♻️ refactor: replace lodash-es with es-toolkit and move docs components (#6)

Innei · web-flow · commit 4dde5e809de1 · 2025-12-29T21:14:45.000+08:00
Replace lodash-es with es-toolkit for smaller bundle size
Update antd-style to v4.1.0 and migrate to createStaticStyles
Move Dashboard, EmojiItem, and VirtuosoGridList from src/components to docs/components
Remove @lobehub/ui dependency from FluentEmoji core component
Update docs imports to use local component paths
Remove unused peer dependencies (@lobehub/ui, antd)
diff --git a/docs/components/Dashboard.tsx b/docs/components/Dashboard.tsx
@@ -2,14 +2,13 @@ import emojilib from '@lobehub/emojilib';
 import { FluentEmoji, FluentEmojiProps, getFluentEmojiCDN } from '@lobehub/fluent-emoji';
 import { Flexbox, SearchBar } from '@lobehub/ui';
 import { Segmented } from 'antd';
-import { useTheme } from 'antd-style';
+import { cssVar } from 'antd-style';
 import { memo, useMemo, useState } from 'react';
 
 import EmojiItem from './EmojiItem';
 import VirtuosoGridList from './VirtuosoGridList';
 
 const Dashboard = memo(() => {
-  const theme = useTheme();
   const [type, setType] = useState<FluentEmojiProps['type']>('3d');
   const [keyword, setKeyword] = useState<string>();
 
@@ -56,7 +55,7 @@ const Dashboard = memo(() => {
             },
           ]}
           style={{
-            border: `1px solid ${theme.colorBorder}`,
+            border: `1px solid ${cssVar.colorBorder}`,
           }}
         />
       </Flexbox>
diff --git a/docs/components/EmojiItem.tsx b/docs/components/EmojiItem.tsx
@@ -1,23 +1,23 @@
 import { Center, CopyButton, Flexbox } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
-import { capitalize } from 'lodash-es';
+import { createStaticStyles } from 'antd-style';
+import { capitalize } from 'es-toolkit/string';
 import { ReactNode, memo, useRef } from 'react';
 
-const useStyles = createStyles(({ css, token }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
   return {
     card: css`
       position: relative;
 
       overflow: hidden;
 
-      border: 1px solid ${token.colorBorderSecondary};
-      border-radius: ${token.borderRadiusLG}px;
+      border: 1px solid ${cssVar.colorBorderSecondary};
+      border-radius: ${cssVar.borderRadiusLG};
 
-      background: ${token.colorBgContainer};
+      background: ${cssVar.colorBgContainer};
     `,
     row: css`
-      border-block-start: 1px solid ${token.colorFillSecondary};
+      border-block-start: 1px solid ${cssVar.colorFillSecondary};
     `,
     title: css`
       margin: 0;
@@ -37,7 +37,6 @@ interface IconItemProps {
 }
 
 const EmojiItem = memo<IconItemProps>(({ children, title, url, emoji }) => {
-  const { styles } = useStyles();
   const ref = useRef<HTMLDivElement>(null);
 
   return (
diff --git a/docs/components/VirtuosoGridList/index.tsx b/docs/components/VirtuosoGridList/index.tsx
diff --git a/docs/components/VirtuosoGridList/useScrollParent.ts b/docs/components/VirtuosoGridList/useScrollParent.ts
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -2,7 +2,7 @@ import { Center, Flexbox, Snippet } from '@lobehub/ui';
 import { Features, FeaturesProps } from '@lobehub/ui/awesome';
 import { Expand, GitPullRequest, Trees } from 'lucide-react';
 
-import Dashboard from '@/components/Dashboard';
+import Dashboard from './components/Dashboard';
 
 const items: FeaturesProps['items'] = [
   {
diff --git a/package.json b/package.json
@@ -73,9 +73,9 @@
   },
   "dependencies": {
     "@lobehub/emojilib": "^1.0.0",
-    "antd-style": "^4.0.0",
+    "antd-style": "^4.1.0",
     "emoji-regex": "^10.6.0",
-    "lodash-es": "^4.17.22",
+    "es-toolkit": "^1.43.0",
     "lucide-react": "^0.562.0",
     "url-join": "^5.0.0"
   },
@@ -85,7 +85,6 @@
     "@lobehub/lint": "^1.26.3",
     "@lobehub/ui": "^4.1.2",
     "@testing-library/react": "^16.3.1",
-    "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "~1.2.2",
@@ -116,8 +115,6 @@
     "vitest": "~1.2.2"
   },
   "peerDependencies": {
-    "@lobehub/ui": "^4.0.0",
-    "antd": "^6.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
diff --git a/src/FluentEmoji/index.tsx b/src/FluentEmoji/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { Center } from '@lobehub/ui';
+import { cx } from 'antd-style';
 import { ElementType, createElement, forwardRef, useMemo, useState } from 'react';
 import { type HTMLAttributes } from 'react';
 
 import { getFluentEmojiCDN } from '@/getFluentEmojiCDN';
 import { EmojiType } from '@/getFluentEmojiCDN/utils';
 
-import { useStyles } from './style';
+import { styles } from './style';
 
 const createContainer = (as: ElementType) =>
   forwardRef((props: any, ref) => createElement(as, { ...props, ref }));
@@ -37,7 +37,6 @@ const FluentEmoji = forwardRef<any, FluentEmojiProps>(
     ref,
   ) => {
     const [loadingFail, setLoadingFail] = useState(false);
-    const { cx, styles } = useStyles();
 
     const ImgContainer = useMemo(() => createContainer(as), [as]);
 
@@ -48,15 +47,21 @@ const FluentEmoji = forwardRef<any, FluentEmojiProps>(
 
     if (type === 'pure' || !emojiUrl || loadingFail)
       return (
-        <Center
+        <div
           className={cx(styles.container, className)}
-          flex={'none'}
-          height={size}
-          style={{ fontSize: size * 0.9, ...style }}
-          width={size}
+          style={{
+            alignItems: 'center',
+            display: 'inline-flex',
+            fontSize: size,
+            height: size,
+            justifyContent: 'center',
+            verticalAlign: 'middle',
+            width: size,
+            ...style,
+          }}
         >
           {emoji}
-        </Center>
+        </div>
       );
 
     return (
diff --git a/src/FluentEmoji/style.ts b/src/FluentEmoji/style.ts
@@ -1,6 +1,6 @@
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css }) => {
+export const styles = createStaticStyles(({ css }) => {
   return {
     container: css`
       position: relative;

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { Center, Flexbox, Snippet } from '@lobehub/ui';`
`2`	`2`	`import { Features, FeaturesProps } from '@lobehub/ui/awesome';`
`3`	`3`	`import { Expand, GitPullRequest, Trees } from 'lucide-react';`
`4`	`4`
`5`		`-import Dashboard from '@/components/Dashboard';`
	`5`	`+import Dashboard from './components/Dashboard';`
`6`	`6`
`7`	`7`	`const items: FeaturesProps['items'] = [`
`8`	`8`	`{`