✨ feat: init basic components

Author: arvinxx

package.json

@@ -57,13 +57,58 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "dependencies": {
+    "@ant-design/colors": "^7",
+    "@ant-design/icons": "^5",
+    "@babel/runtime": "^7",
+    "@floating-ui/react": "^0",
+    "@giscus/react": "^2",
+    "@lobehub/chat-plugin-sdk": "latest",
+    "@lobehub/emojilib": "latest",
+    "@react-spring/three": "^9",
+    "@react-spring/web": "^9",
+    "@react-three/drei": "^9",
+    "@react-three/fiber": "^8",
+    "ahooks": "^3",
+    "antd": "^5",
+    "chroma-js": "^2",
+    "copy-to-clipboard": "^3",
+    "dayjs": "^1",
+    "emoji-regex": "^10",
+    "fast-deep-equal": "^3",
+    "immer": "^10",
+    "lodash-es": "^4",
+    "lucide-react": "^0.288.0",
+    "polished": "^4",
+    "prism-react-renderer": "^2",
+    "rc-footer": "^0",
+    "re-resizable": "^6",
+    "react-error-boundary": "^4",
+    "react-layout-kit": "^1.7.1",
+    "react-markdown": "^8",
+    "react-rnd": "^10",
+    "react-simple-code-editor": "^0",
+    "rehype-katex": "^6",
+    "remark-gfm": "^3",
+    "remark-math": "^5",
+    "shikiji": "^0",
+    "swr": "^2",
+    "three": "^0.150",
+    "ts-md5": "^1",
+    "url-join": "^5",
+    "use-merge-value": "^1",
+    "zustand": "^4.4.1",
+    "zustand-utils": "^1.3.1"
+  },
   "devDependencies": {
     "@commitlint/cli": "^17",
+    "@lobehub/ui": "^1",
     "@testing-library/react": "^14",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",
+    "antd-style": "^3",
     "commitlint": "^17",
     "commitlint-config-gitmoji": "^2",
     "conventional-changelog-gitmoji-config": "^1",
@@ -74,6 +119,7 @@
     "father": "^4",
     "husky": "^8",
     "jsdom": "^22",
+    "leva": "^0.9.35",
     "lint-staged": "^15",
     "prettier": "^3",
     "prettier-plugin-organize-imports": "^3",
@@ -82,10 +128,15 @@
     "react-dom": "^18",
     "semantic-release": "^21",
     "semantic-release-config-gitmoji": "^1",
+    "styled-components": "^6.1.0",
     "stylelint": "^15",
     "typescript": "^5",
     "vitest": "latest"
   },
+  "peerDependencies": {
+    "antd": "^5",
+    "antd-style": "^3"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

src/ActionIcon/demos/CustomSize.tsx

@@ -0,0 +1,42 @@
+import { ActionIcon, ActionIconProps } from '@ant-design/pro-chat';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Settings } from 'lucide-react';
+
+export default () => {
+  const store = useCreateStore();
+  const size: ActionIconProps['size'] | any = useControls(
+    {
+      blockSize: {
+        max: 100,
+        min: 8,
+        step: 4,
+        value: 40,
+      },
+      borderRadius: {
+        max: 50,
+        min: 2,
+        step: 2,
+        value: 10,
+      },
+      fontSize: {
+        max: 100,
+        min: 8,
+        step: 4,
+        value: 28,
+      },
+      strokeWidth: {
+        max: 2,
+        min: 1,
+        step: 0.5,
+        value: 2,
+      },
+    },
+    { store },
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ActionIcon active icon={Settings} size={size} />
+    </StoryBook>
+  );
+};

src/ActionIcon/demos/index.tsx

@@ -0,0 +1,52 @@
+import { ActionIcon, ActionIconProps } from '@ant-design/pro-chat';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { folder } from 'leva';
+import * as LucideIcon from 'lucide-react';
+
+export default () => {
+  const store = useCreateStore();
+  const control: ActionIconProps | any = useControls(
+    {
+      active: false,
+      glass: false,
+      icon: {
+        options: LucideIcon,
+        value: LucideIcon.Settings,
+      },
+      size: {
+        options: ['large', 'normal', 'small'],
+        value: 'large',
+      },
+      tooltip: folder({
+        arrow: false,
+        loading: false,
+        placement: {
+          options: [
+            'top',
+            'left',
+            'right',
+            'bottom',
+            'topLeft',
+            'topRight',
+            'bottomLeft',
+            'bottomRight',
+            'leftTop',
+            'leftBottom',
+            'rightTop',
+            'rightBottom',
+          ],
+          value: 'top',
+        },
+        spotlight: false,
+        title: '',
+      }),
+    },
+    { store },
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <ActionIcon {...control} />
+    </StoryBook>
+  );
+};

src/ActionIcon/index.md

@@ -0,0 +1,22 @@
+---
+nav: Components
+group:
+  title: General
+  order: -1
+title: ActionIcon
+description: ActionIcon is a component used to render an icon with a block around it
+---
+
+## Default
+
+Search icons in [`Lucide Icon`](https://lucide.dev/)
+
+<code src="./demos/index.tsx" nopadding></code>
+
+## CustomSize
+
+<code src="./demos/CustomSize.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/ActionIcon/index.tsx

@@ -0,0 +1,192 @@
+import { Loader2 } from 'lucide-react';
+import { forwardRef, useMemo } from 'react';
+
+import Icon, { type IconProps } from '@/Icon';
+import Spotlight from '@/Spotlight';
+import Tooltip, { type TooltipProps } from '@/Tooltip';
+import { DivProps } from '@/types';
+
+import { useStyles } from './style';
+
+export type ActionIconSize =
+  | 'large'
+  | 'normal'
+  | 'small'
+  | 'site'
+  | {
+      blockSize?: number;
+      borderRadius?: number;
+      fontSize?: number;
+      strokeWidth?: number;
+    };
+
+const calcSize = (size?: ActionIconSize) => {
+  let blockSize: number;
+  let borderRadius: number;
+
+  switch (size) {
+    case 'large': {
+      blockSize = 44;
+      borderRadius = 8;
+      break;
+    }
+    case 'normal': {
+      blockSize = 36;
+      borderRadius = 5;
+      break;
+    }
+    case 'small': {
+      blockSize = 24;
+      borderRadius = 5;
+      break;
+    }
+    case 'site': {
+      blockSize = 34;
+      borderRadius = 5;
+      break;
+    }
+    default: {
+      blockSize = size?.blockSize || 36;
+      borderRadius = size?.borderRadius || 5;
+      break;
+    }
+  }
+
+  return {
+    blockSize,
+    borderRadius,
+  };
+};
+
+export interface ActionIconProps extends DivProps {
+  /**
+   * @description Whether the icon is active or not
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * @description Change arrow's visible state and change whether the arrow is pointed at the center of target.
+   * @default false
+   */
+  arrow?: boolean;
+  color?: IconProps['color'];
+  fill?: IconProps['fill'];
+  /**
+   * @description Glass blur style
+   * @default 'false'
+   */
+  glass?: boolean;
+  /**
+   * @description The icon element to be rendered
+   * @type LucideIcon
+   */
+  icon?: IconProps['icon'];
+  /**
+   * @description Set the loading status of ActionIcon
+   */
+  loading?: boolean;
+
+  /**
+   * @description The position of the tooltip relative to the target
+   * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
+   * @default "top"
+   */
+  placement?: TooltipProps['placement'];
+
+  /**
+   * @description Size of the icon
+   * @default 'normal'
+   */
+  size?: ActionIconSize;
+  /**
+   * @description Whether add spotlight background
+   * @default false
+   */
+  spotlight?: boolean;
+  /**
+   * @description The text shown in the tooltip
+   */
+  title?: string;
+  /**
+   * @description Mouse enter delay of tooltip
+   * @default 0.5
+   */
+  tooltipDelay?: number;
+}
+
+const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
+  (
+    {
+      color,
+      fill,
+      className,
+      active,
+      icon,
+      size = 'normal',
+      style,
+      glass,
+      title,
+      placement,
+      arrow = false,
+      spotlight,
+      onClick,
+      children,
+      loading,
+      tooltipDelay = 0.5,
+      ...props
+    },
+    ref,
+  ) => {
+    const { styles, cx } = useStyles({ active: Boolean(active), glass: Boolean(glass) });
+
+    const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
+
+    const content = (
+      <>
+        {icon && (
+          <Icon
+            className={styles.icon}
+            color={color}
+            fill={fill}
+            icon={icon}
+            size={size === 'site' ? 'normal' : size}
+          />
+        )}
+        {children}
+      </>
+    );
+
+    const spin = (
+      <Icon color={color} icon={Loader2} size={size === 'site' ? 'normal' : size} spin />
+    );
+
+    const actionIconBlock = (
+      <div
+        className={cx(styles.block, className)}
+        onClick={loading ? undefined : onClick}
+        ref={ref}
+        style={{ borderRadius, height: blockSize, width: blockSize, ...style }}
+        {...props}
+      >
+        {spotlight && <Spotlight />}
+        {loading ? spin : content}
+      </div>
+    );
+
+    if (!title) return actionIconBlock;
+
+    return (
+      <Tooltip
+        arrow={arrow}
+        mouseEnterDelay={tooltipDelay}
+        overlayStyle={{ pointerEvents: 'none' }}
+        placement={placement}
+        title={title}
+      >
+        {actionIconBlock}
+      </Tooltip>
+    );
+  },
+);
+
+export default ActionIcon;