feat(icon-view): add draft component

packages/icon-view/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@alfalab/core-components-icon-view",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "./dist/esm/index.js",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1"
+    },
+    "dependencies": {
+        "classnames": "^2.2.6"
+    }
+}

packages/icon-view/src/component.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+import { SuperEllipse, Circle } from './components';
+import { ShapeProps } from './types';
+
+export type IconViewProps = ShapeProps & {
+    shape?: 'super-ellipse' | 'circle';
+};
+
+const shapeMap = {
+    circle: Circle,
+    'super-ellipse': SuperEllipse,
+};
+
+export const IconView: FC<IconViewProps> = ({ shape = 'super-ellipse', ...restProps }) => {
+    const Component = shapeMap[shape];
+
+    return <Component {...restProps} />;
+};

packages/icon-view/src/components/circle/component.tsx

@@ -0,0 +1,80 @@
+import React, { FC, useMemo } from 'react';
+import cn from 'classnames';
+
+import { getClipPath, getBorderPath } from './paths';
+import { ShapeProps } from '../../types';
+
+import styles from './index.module.css';
+
+export const Circle: FC<ShapeProps> = ({
+    size = '64',
+    border = false,
+    backgroundColor = '#f3f4f5',
+    imageUrl,
+    className,
+    children,
+    topAddons,
+    bottomAddons,
+}) => {
+    const hasTopAddons = Boolean(topAddons);
+    const hasBottomAddons = Boolean(bottomAddons);
+    const hasMask = hasTopAddons || hasBottomAddons;
+
+    const maskId = useMemo(
+        () =>
+            cn('core-components-mask', 'circle', size, {
+                'top-addons': hasTopAddons,
+                'bottom-addons': hasBottomAddons,
+            })
+                .split(' ')
+                .join('_'),
+        [size, hasTopAddons, hasBottomAddons],
+    );
+
+    const mask = hasMask && (
+        <defs>
+            <clipPath id={maskId}>
+                <path fill='white' d={getClipPath(size, hasTopAddons, hasBottomAddons)} />
+            </clipPath>
+        </defs>
+    );
+
+    return (
+        <div className={cn(styles.componentWrapper, styles[`size_${size}`], className)}>
+            <div
+                className={cn(styles.component, { [styles.withCssBorder]: border && !hasMask })}
+                style={{ clipPath: hasMask ? `url(#${maskId})` : '', backgroundColor }}
+            >
+                {imageUrl ? (
+                    <div className={styles.img} style={{ backgroundImage: `url(${imageUrl})` }} />
+                ) : (
+                    <div className={styles.children}>{children}</div>
+                )}
+
+                <svg
+                    width={size}
+                    height={size}
+                    viewBox={`0 0 ${size} ${size}`}
+                    xmlns='http://www.w3.org/2000/svg'
+                    className={styles.svg}
+                >
+                    {mask}
+
+                    {border && (
+                        <path
+                            d={getBorderPath(size, hasTopAddons, hasBottomAddons)}
+                            className={styles.border}
+                            fill='transparent'
+                        />
+                    )}
+                </svg>
+            </div>
+
+            {hasTopAddons && <div className={cn(styles.addons, styles.topAddons)}>{topAddons}</div>}
+
+            {hasBottomAddons && (
+                <div className={cn(styles.addons, styles.bottomAddons)}>{bottomAddons}</div>
+            )}
+        </div>
+    );
+};

packages/icon-view/src/components/circle/index.module.css

@@ -0,0 +1,163 @@
+@import '../../../../themes/src/default.css';
+
+.componentWrapper {
+    position: relative;
+    display: inline-flex;
+}
+
+.component {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--border-radius-circle);
+    color: var(--color-light-text-secondary-transparent);
+}
+
+.withCssBorder:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--border-radius-circle);
+    border: 1px solid var(--color-light-specialbg-component);
+}
+
+.border {
+    stroke: var(--color-light-specialbg-component);
+}
+
+.svg {
+    position: relative;
+}
+
+.children {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    & svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.addons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    position: absolute;
+
+    & svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.size_48 {
+    & .children {
+        width: 24px;
+        height: 24px;
+    }
+
+    & .addons {
+        width: 18px;
+        height: 18px;
+    }
+
+    & .topAddons {
+        top: -4px;
+        right: -4px;
+    }
+
+    & .bottomAddons {
+        bottom: -4px;
+        right: -4px;
+    }
+}
+
+.size_64 {
+    & .children {
+        width: 32px;
+        height: 32px;
+    }
+
+    & .addons {
+        width: 18px;
+        height: 18px;
+    }
+
+    & .topAddons {
+        top: -2px;
+        right: -2px;
+    }
+
+    & .bottomAddons {
+        bottom: -2px;
+        right: -2px;
+    }
+}
+
+.size_80 {
+    & .children {
+        width: 48px;
+        height: 48px;
+    }
+
+    & .addons {
+        width: 24px;
+        height: 24px;
+    }
+
+    & .topAddons {
+        top: -4px;
+        right: -4px;
+    }
+
+    & .bottomAddons {
+        bottom: -4px;
+        right: -4px;
+    }
+}
+
+.size_128 {
+    & .children {
+        width: 60px;
+        height: 60px;
+    }
+
+    & .addons {
+        width: 40px;
+        height: 40px;
+    }
+
+    & .topAddons {
+        top: -8px;
+        right: -8px;
+    }
+
+    & .bottomAddons {
+        bottom: -8px;
+        right: -8px;
+    }
+}
+
+.img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}

packages/icon-view/src/components/circle/index.ts

@@ -0,0 +1 @@
+export * from './component';