✨ feat: Update mdx components to next rsc

lobehub · Apr 9, 2024 · 276effc · 276effc
1 parent 8896a39
commit 276effc
Show file tree

Hide file tree

Showing 16 changed files with 254 additions and 214 deletions.
diff --git a/docs/mdx/Callout/index.md b/docs/mdx/Callout/index.md
@@ -4,8 +4,8 @@ group: Built-ins
 title: Callout
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: '{github}/tree/master/docs/mdx/{atomId}/index.md'
-  sourceUrl: '{github}/tree/master/src/mdx/{atomId}/index.tsx'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Callout/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Callout/index.tsx'
 ---
 
 ## Example

diff --git a/docs/mdx/Cards/demos/index.tsx b/docs/mdx/Cards/demos/index.tsx
@@ -1,33 +1,33 @@
 import { Typography } from '@lobehub/ui';
-import { Cards } from '@lobehub/ui/mdx';
+import { Card, Cards } from '@lobehub/ui/mdx';
 import { Warehouse } from 'lucide-react';
 
 export default () => (
   <Typography>
     <Cards>
-      <Cards.Card href="/mdx/callout" icon={Warehouse} title="Callout" />
-      <Cards.Card href="/mdx/callout" icon={Warehouse} title="Tabs" />
-      <Cards.Card href="/mdx/callouts" icon={Warehouse} title="Steps" />
+      <Card href="/mdx/callout" icon={Warehouse} title="Callout" />
+      <Card href="/mdx/callout" icon={Warehouse} title="Tabs" />
+      <Card href="/mdx/callouts" icon={Warehouse} title="Steps" />
     </Cards>
     <Cards>
-      <Cards.Card desc="Demo desction text" href="/mdx/callout" icon={Warehouse} title="Callout" />
-      <Cards.Card desc="Demo desction text" href="/mdx/callout" icon={Warehouse} title="Tabs" />
-      <Cards.Card desc="Demo desction text" href="/mdx/callouts" icon={Warehouse} title="Steps" />
+      <Card desc="Demo desction text" href="/mdx/callout" icon={Warehouse} title="Callout" />
+      <Card desc="Demo desction text" href="/mdx/callout" icon={Warehouse} title="Tabs" />
+      <Card desc="Demo desction text" href="/mdx/callouts" icon={Warehouse} title="Steps" />
     </Cards>
     <Cards>
-      <Cards.Card
+      <Card
         href="/mdx/callout"
         icon={Warehouse}
         image="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"
         title="Callout"
       />
-      <Cards.Card
+      <Card
         href="/mdx/callout"
         icon={Warehouse}
         image="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"
         title="Tabs"
       />
-      <Cards.Card
+      <Card
         href="/mdx/callouts"
         icon={Warehouse}
         image="https://gw.alipayobjects.com/zos/kitchen/sLO%24gbrQtp/lobe-chat.webp"

diff --git a/docs/mdx/Cards/index.md b/docs/mdx/Cards/index.md
@@ -2,10 +2,11 @@
 nav: Mdx
 group: Built-ins
 title: Cards
+atomId: 'Cards, Card'
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: '{github}/tree/master/docs/mdx/{atomId}/index.md'
-  sourceUrl: '{github}/tree/master/src/mdx/{atomId}/index.tsx'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Cards/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Cards/index.tsx'
 ---
 
 ## Example

diff --git a/docs/mdx/FileTree/index.md b/docs/mdx/FileTree/index.md
@@ -4,8 +4,8 @@ group: Built-ins
 title: FileTree
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: '{github}/tree/master/docs/mdx/{atomId}/index.md'
-  sourceUrl: '{github}/tree/master/src/mdx/{atomId}/index.tsx'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/FileTree/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/FileTree/index.tsx'
 ---
 
 ## Example

diff --git a/docs/mdx/Steps/index.md b/docs/mdx/Steps/index.md
@@ -4,8 +4,8 @@ group: Built-ins
 title: Steps
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: '{github}/tree/master/docs/mdx/{atomId}/index.md'
-  sourceUrl: '{github}/tree/master/src/mdx/{atomId}/index.tsx'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Steps/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Steps/index.tsx'
 ---
 
 ## Example

diff --git a/docs/mdx/Tabs/demos/index.tsx b/docs/mdx/Tabs/demos/index.tsx
@@ -1,12 +1,12 @@
 import { Typography } from '@lobehub/ui';
-import { Tabs } from '@lobehub/ui/mdx';
+import { Tab, Tabs } from '@lobehub/ui/mdx';
 
 export default () => (
   <Typography>
     <Tabs items={['pnpm', 'npm', 'yarn']}>
-      <Tabs.Tab>pnpm: Fast, disk space efficient package manager.</Tabs.Tab>
-      <Tabs.Tab>npm is a package manager for the JavaScript programming language.</Tabs.Tab>
-      <Tabs.Tab>Yarn is a software packaging system.</Tabs.Tab>
+      <Tab>pnpm: Fast, disk space efficient package manager.</Tab>
+      <Tab>npm is a package manager for the JavaScript programming language.</Tab>
+      <Tab>Yarn is a software packaging system.</Tab>
     </Tabs>
   </Typography>
 );
diff --git a/docs/mdx/Tabs/index.md b/docs/mdx/Tabs/index.md
@@ -2,10 +2,11 @@
 nav: Mdx
 group: Built-ins
 title: Tabs
+atomId: 'Tabs, Tab'
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: '{github}/tree/master/docs/mdx/{atomId}/index.md'
-  sourceUrl: '{github}/tree/master/src/mdx/{atomId}/index.tsx'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/Tabs/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/Tabs/index.tsx'
 ---
 
 ## Example

diff --git a/docs/mdx/index.md b/docs/mdx/index.md
@@ -5,8 +5,8 @@ title: mdxComponents
 atomId: mdxComponents
 apiHeader:
   pkg: '@lobehub/ui/mdx'
-  docUrl: '{github}/tree/master/docs/mdx/index.md'
-  sourceUrl: '{github}/tree/master/src/mdx/mdxComponents.tsx'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/docs/mdx/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/mdx/mdxComponents.ts'
 ---
 
 ## Usage

diff --git a/package.json b/package.json
@@ -73,93 +73,93 @@
     ]
   },
   "dependencies": {
-    "@ant-design/colors": "^7",
-    "@ant-design/icons": "^5",
-    "@babel/runtime": "^7",
-    "@dnd-kit/core": "^6",
+    "@ant-design/colors": "^7.0.2",
+    "@ant-design/icons": "^5.3.6",
+    "@babel/runtime": "^7.24.4",
+    "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8",
-    "@dnd-kit/utilities": "^3",
-    "@emoji-mart/data": "^1",
-    "@emoji-mart/react": "^1",
-    "@floating-ui/react": "^0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
+    "@floating-ui/react": "^0.26.11",
     "@giscus/react": "^3.0.0",
     "@lobehub/emojilib": "latest",
-    "@react-spring/web": "^9",
-    "@shikijs/transformers": "^1",
-    "@splinetool/react-spline": "^2",
-    "@splinetool/runtime": "^0.9",
-    "ahooks": "^3",
-    "chroma-js": "^2",
-    "dayjs": "^1",
-    "emoji-mart": "^5",
-    "emoji-regex": "^10",
-    "fast-deep-equal": "^3",
-    "immer": "^10",
-    "leva": "^0",
-    "lodash-es": "^4",
+    "@react-spring/web": "^9.7.3",
+    "@shikijs/transformers": "^1.2.4",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^0.9.526",
+    "ahooks": "^3.7.11",
+    "chroma-js": "^2.4.2",
+    "dayjs": "^1.11.10",
+    "emoji-mart": "^5.5.2",
+    "emoji-regex": "^10.3.0",
+    "fast-deep-equal": "^3.1.3",
+    "immer": "^10.0.4",
+    "leva": "^0.9.35",
+    "lodash-es": "^4.17.21",
     "lucide-react": "latest",
-    "polished": "^4",
-    "prism-react-renderer": "^2",
+    "polished": "^4.3.1",
+    "prism-react-renderer": "^2.3.1",
     "query-string": "^9.0.0",
-    "rc-footer": "^0",
-    "re-resizable": "^6",
-    "react-error-boundary": "^4",
-    "react-layout-kit": "^1",
-    "react-markdown": "^8",
-    "react-rnd": "^10",
-    "react-simple-code-editor": "^0",
-    "rehype-katex": "^6",
-    "rehype-raw": "^7",
-    "remark-gfm": "^3",
-    "remark-math": "^5",
-    "shiki": "^1",
-    "swr": "^2",
-    "ts-md5": "^1",
-    "url-join": "^5",
-    "use-merge-value": "^1",
-    "uuid": "^9",
-    "zustand": "^4.4.1",
-    "zustand-utils": "^1.3.1"
+    "rc-footer": "^0.6.8",
+    "re-resizable": "^6.9.11",
+    "react-error-boundary": "^4.0.13",
+    "react-layout-kit": "^1.9.0",
+    "react-markdown": "^8.0.7",
+    "react-rnd": "^10.4.1",
+    "react-simple-code-editor": "^0.13.1",
+    "rehype-katex": "^6.0.3",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "shiki": "^1.2.4",
+    "swr": "^2.2.5",
+    "ts-md5": "^1.3.1",
+    "url-join": "^5.0.0",
+    "use-merge-value": "^1.2.0",
+    "uuid": "^9.0.1",
+    "zustand": "^4.5.2",
+    "zustand-utils": "^1.3.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.0.0",
+    "@commitlint/cli": "^19.2.1",
     "@lobehub/lint": "latest",
-    "@testing-library/react": "^14",
-    "@types/chroma-js": "^2",
-    "@types/lodash-es": "^4",
-    "@types/pangu": "^4",
-    "@types/query-string": "^6",
+    "@testing-library/react": "^14.3.0",
+    "@types/chroma-js": "^2.4.4",
+    "@types/lodash-es": "^4.17.12",
+    "@types/pangu": "^4.0.2",
+    "@types/query-string": "^6.3.0",
     "@types/react": "18.2.40",
-    "@types/react-dom": "^18",
-    "@types/uuid": "^9",
+    "@types/react-dom": "^18.2.24",
+    "@types/uuid": "^9.0.8",
     "@vitest/coverage-v8": "latest",
-    "antd-style": "^3",
+    "antd-style": "^3.6.2",
     "babel-plugin-antd-style": "latest",
-    "commitlint": "^19.0.0",
-    "concurrently": "^8",
-    "cross-env": "^7",
-    "dpdm": "^3",
-    "dumi": "^2",
+    "commitlint": "^19.2.1",
+    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "dpdm": "^3.14.0",
+    "dumi": "^2.2.17",
     "dumi-theme-lobehub": "latest",
-    "eslint": "^8",
+    "eslint": "^8.57.0",
     "father": "4.3.1",
-    "husky": "^8",
+    "husky": "^8.0.3",
     "jsdom": "^24.0.0",
-    "lint-staged": "^15",
-    "prettier": "^3",
-    "react": "^18",
-    "react-dom": "^18",
-    "remark": "^14",
-    "remark-cli": "^11",
-    "semantic-release": "^21",
-    "stylelint": "^15",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remark": "^14.0.3",
+    "remark-cli": "^11.0.0",
+    "semantic-release": "^21.1.2",
+    "stylelint": "^15.11.0",
     "stylelint-use-logical-spec": "^5.0.1",
-    "typescript": "^5",
+    "typescript": "^5.4.4",
     "vitest": "latest"
   },
   "peerDependencies": {
-    "antd": ">=5",
+    "antd": ">=5.13.0",
     "antd-style": ">=3",
     "react": ">=18",
     "react-dom": ">=18"

diff --git a/src/mdx/Callout.tsx b/src/mdx/Callout.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { createStyles } from 'antd-style';
-import { Info, Lightbulb, MessageSquareWarning, OctagonAlert, TriangleAlert } from 'lucide-react';
+import { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';
 import { rgba } from 'polished';
 import type { ReactNode } from 'react';
 import { FC } from 'react';
@@ -54,7 +54,7 @@ const Callout: FC<CalloutProps> = ({ children, type = 'info' }) => {
   const typeConfig = {
     error: {
       color: theme.colorError,
-      icon: OctagonAlert,
+      icon: AlertOctagon,
     },
     important: {
       color: theme.purple,
@@ -70,7 +70,7 @@ const Callout: FC<CalloutProps> = ({ children, type = 'info' }) => {
     },
     warning: {
       color: theme.colorWarning,
-      icon: TriangleAlert,
+      icon: AlertTriangle,
     },
   };