diff --git a/docs/mdx/Callout/index.md b/docs/mdx/Callout/index.md index 38a2ca77..6abc2d9f 100644 --- 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 index 3820b4d2..143ee9ee 100644 --- 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 () => ( - - - + + + - - - + + + - - - ( - pnpm: Fast, disk space efficient package manager. - npm is a package manager for the JavaScript programming language. - Yarn is a software packaging system. + pnpm: Fast, disk space efficient package manager. + npm is a package manager for the JavaScript programming language. + Yarn is a software packaging system. ); diff --git a/docs/mdx/Tabs/index.md b/docs/mdx/Tabs/index.md index 603f2112..760d2827 100644 --- 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 index 705add00..551a3f2c 100644 --- 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 index 04b77db6..908d6a4a 100644 --- 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 index 37484c63..13448448 100644 --- 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 = ({ children, type = 'info' }) => { const typeConfig = { error: { color: theme.colorError, - icon: OctagonAlert, + icon: AlertOctagon, }, important: { color: theme.purple, @@ -70,7 +70,7 @@ const Callout: FC = ({ children, type = 'info' }) => { }, warning: { color: theme.colorWarning, - icon: TriangleAlert, + icon: AlertTriangle, }, }; diff --git a/src/mdx/Card.tsx b/src/mdx/Card.tsx new file mode 100644 index 00000000..fd19041d --- /dev/null +++ b/src/mdx/Card.tsx @@ -0,0 +1,110 @@ +'use client'; + +import { createStyles } from 'antd-style'; +import { FC } from 'react'; +import { Flexbox, type FlexboxProps } from 'react-layout-kit'; + +import A from '@/A'; +import Icon, { type IconProps } from '@/Icon'; +import Img from '@/Img'; + +const useStyles = createStyles(({ css, cx, token }) => { + const icon = cx(css` + margin-block: 0.1em; + opacity: 0.5; + transition: opacity 0.2s ${token.motionEaseInOut}; + `); + + return { + card: css` + --lobe-markdown-header-multiple: 0; + --lobe-markdown-margin-multiple: 1; + + overflow: hidden; + + height: 100%; + + color: ${token.colorText}; + + border-radius: calc(var(--lobe-markdown-border-radius) * 1px); + box-shadow: 0 0 0 1px var(--lobe-markdown-border-color); + + transition: all 0.2s ${token.motionEaseInOut}; + + h3, + p { + margin-block: 0; + } + + p { + color: ${token.colorTextDescription}; + transition: color 0.2s ${token.motionEaseInOut}; + } + + &:hover { + background: ${token.colorFillQuaternary}; + box-shadow: 0 0 0 1px ${token.colorBorder}; + + p { + color: ${token.colorTextSecondary}; + } + + .${icon} { + opacity: 1; + } + } + `, + content: css` + gap: 0.75em; + width: 100%; + padding: 1em; + `, + icon, + }; +}); + +export interface CardProps extends Omit { + desc?: string; + href?: string; + icon?: IconProps['icon']; + iconProps?: Omit; + image?: string; + title: string; +} + +const Card: FC = ({ icon, title, desc, href, iconProps, image, ...rest }) => { + const { styles } = useStyles(); + + return ( + + + {image && ( + {title} + )} + + + {!image && icon && ( + + )} +
+

{title}

+ {desc &&

{desc}

} +
+ + + + ); +}; + +export default Card; diff --git a/src/mdx/Cards.tsx b/src/mdx/Cards.tsx index 2ee79465..6df23d64 100644 --- a/src/mdx/Cards.tsx +++ b/src/mdx/Cards.tsx @@ -2,60 +2,13 @@ import { createStyles } from 'antd-style'; import { FC, PropsWithChildren } from 'react'; -import { Flexbox, type FlexboxProps } from 'react-layout-kit'; -import A from '@/A'; import Grid from '@/Grid'; -import Icon, { type IconProps } from '@/Icon'; -import Img from '@/Img'; -const useStyles = createStyles(({ css, cx, token }) => { - const icon = cx(css` - margin-block: 0.1em; - opacity: 0.5; - transition: opacity 0.2s ${token.motionEaseInOut}; - `); +import Card from './Card'; +const useStyles = createStyles(({ css }) => { return { - card: css` - --lobe-markdown-header-multiple: 0; - --lobe-markdown-margin-multiple: 1; - - overflow: hidden; - - height: 100%; - - color: ${token.colorText}; - - border-radius: calc(var(--lobe-markdown-border-radius) * 1px); - box-shadow: 0 0 0 1px var(--lobe-markdown-border-color); - - transition: all 0.2s ${token.motionEaseInOut}; - - h3, - p { - margin-block: 0; - } - - p { - color: ${token.colorTextDescription}; - transition: color 0.2s ${token.motionEaseInOut}; - } - - &:hover { - background: ${token.colorFillQuaternary}; - box-shadow: 0 0 0 1px ${token.colorBorder}; - - p { - color: ${token.colorTextSecondary}; - } - - .${icon} { - opacity: 1; - } - } - `, - container: css` margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em); @@ -63,53 +16,9 @@ const useStyles = createStyles(({ css, cx, token }) => { margin: 0 !important; } `, - content: css` - gap: 0.75em; - padding: 1em; - `, - icon, }; }); -export interface CardProps extends Omit { - desc?: string; - href?: string; - icon?: IconProps['icon']; - iconProps?: Omit; - image?: string; - title: string; -} - -const Card: FC = ({ icon, title, desc, href, iconProps, image, ...rest }) => { - const { styles } = useStyles(); - - return ( - - - {image && ( - {title} - )} - - - {!image && icon && ( - - )} -
-

{title}

- {desc &&

{desc}

} -
- - - - ); -}; - interface _CardsProps extends PropsWithChildren { maxItemWidth?: string | number; rows?: number; diff --git a/src/mdx/Tab.tsx b/src/mdx/Tab.tsx new file mode 100644 index 00000000..1da69c0e --- /dev/null +++ b/src/mdx/Tab.tsx @@ -0,0 +1,32 @@ +'use client'; + +import { createStyles } from 'antd-style'; +import { FC, ReactNode } from 'react'; + +const useStyles = createStyles(({ css }) => { + return { + body: css` + padding-inline: 1em; + + > div { + margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em); + } + `, + }; +}); + +export interface TabProps { + children: ReactNode; +} + +const Tab: FC = ({ children }) => { + const { styles } = useStyles(); + + return ( +
+
{children}
+
+ ); +}; + +export default Tab; diff --git a/src/mdx/Tabs.tsx b/src/mdx/Tabs.tsx index 376cafc6..035b6a2f 100644 --- a/src/mdx/Tabs.tsx +++ b/src/mdx/Tabs.tsx @@ -6,15 +6,10 @@ import { Flexbox } from 'react-layout-kit'; import TabsNav from '@/TabsNav'; +import Tab from './Tab'; + const useStyles = createStyles(({ css, token, prefixCls }) => { return { - body: css` - padding-inline: 1em; - - > div { - margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em); - } - `, container: css` --lobe-markdown-margin-multiple: 1; @@ -34,20 +29,6 @@ const useStyles = createStyles(({ css, token, prefixCls }) => { }; }); -export interface _TabItemProps { - children: ReactNode; -} - -const _TabItem: FC<_TabItemProps> = ({ children }) => { - const { styles } = useStyles(); - - return ( -
-
{children}
-
- ); -}; - export interface _TabsProps { children: ReactNode[]; defaultIndex?: number | string; @@ -78,10 +59,10 @@ const _Tabs: FC<_TabsProps> = ({ defaultIndex = '0', items, children }) => { }; export type TabsProps = typeof _Tabs & { - Tab: typeof _TabItem; + Tab: typeof Tab; }; const Tabs = _Tabs as TabsProps; -Tabs.Tab = _TabItem; +Tabs.Tab = Tab; export default Tabs; diff --git a/src/mdx/index.ts b/src/mdx/index.ts index e6b8b67c..4059a1df 100644 --- a/src/mdx/index.ts +++ b/src/mdx/index.ts @@ -1,9 +1,11 @@ export { default as Callout, type CalloutProps } from './Callout'; +export { default as Card, type CardProps } from './Card'; export { default as Cards, type CardsProps } from './Cards'; export { default as FileTree, type FileTreeProps } from './FileTree'; export { default as Image, type ImageProps } from './Image'; export { default as mdxComponents } from './mdxComponents'; export { default as Pre, type PreProps, PreSingleLine } from './Pre'; export { default as Steps } from './Steps'; +export { default as Tab, type TabProps } from './Tab'; export { default as Tabs, type TabsProps } from './Tabs'; export { default as Video, type VideoProps } from './Video'; diff --git a/src/mdx/mdxComponents.ts b/src/mdx/mdxComponents.ts index 4e239c6b..ecd75b08 100644 --- a/src/mdx/mdxComponents.ts +++ b/src/mdx/mdxComponents.ts @@ -1,17 +1,21 @@ import Callout from './Callout'; +import Card from './Card'; import Cards from './Cards'; import FileTree from './FileTree'; import Image from './Image'; import Steps from './Steps'; +import Tab from './Tab'; import Tabs from './Tabs'; import Video from './Video'; const mdxComponents = { Callout, + Card, Cards, FileTree, Image, Steps, + Tab, Tabs, Video, };