From 6becdf7682d72f3a3a093e2a6ac5f09a079d9e3d Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Tue, 8 Jul 2025 09:05:02 +0900 Subject: [PATCH 01/24] Install clsx --- apps/landing/package.json | 1 + pnpm-lock.yaml | 3 +++ 2 files changed, 4 insertions(+) diff --git a/apps/landing/package.json b/apps/landing/package.json index 9e4a4579..6e903650 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -18,6 +18,7 @@ "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.3.4", "@types/mdx": "^2.0.13", + "clsx": "^2.1.1", "next": "^15.3.4", "react": "^19.1.0", "react-dom": "^19.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04da0fef..8291473c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,6 +65,9 @@ importers: body-scroll-lock: specifier: 3.1.5 version: 3.1.5 + clsx: + specifier: ^2.1.1 + version: 2.1.1 next: specifier: ^15.3.4 version: 15.3.4(@babel/core@7.27.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) From 368c34fba4bb85d3ed2f16507cb0bc4dd4afaa21 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Tue, 8 Jul 2025 10:43:06 +0900 Subject: [PATCH 02/24] Update devup.json --- apps/landing/devup.json | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/landing/devup.json b/apps/landing/devup.json index 9055ce58..3bba0fc7 100644 --- a/apps/landing/devup.json +++ b/apps/landing/devup.json @@ -31,7 +31,7 @@ "footerText": "#51575F", "menuHover": "#F6F4FF", "menuActive": "#EAE8FC", - "captionBold": "#878594", + "captionBold": "#7C7B8E", "search": "#9C50FF", "kakaoButton": "#DE9800", "kakaoButtonHover": "#C98900", @@ -67,7 +67,7 @@ "footerText": "#FFFFFF", "menuHover": "#3C404B", "menuActive": "#283259", - "captionBold": "#878594", + "captionBold": "#9C9BA9", "search": "#6FA4FF", "kakaoButton": "#A3740D", "kakaoButtonHover": "#C98900", @@ -526,6 +526,14 @@ "fontSize": "12px", "lineHeight": 1.4, "letterSpacing": "-0.03em" + }, + "bodyBold": { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 700, + "fontSize": "16px", + "lineHeight": 1.5, + "letterSpacing": "-0.03em" } } } From 200013a14449298c6aa01ed386e5a966d381ce29 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Tue, 8 Jul 2025 17:13:20 +0900 Subject: [PATCH 03/24] Publish button component mdx page --- .../src/app/(detail)/components/Card.tsx | 9 +- .../src/app/(detail)/components/MdxCard.tsx | 29 ++ .../app/(detail)/components/MdxCardFooter.tsx | 58 +++ .../src/app/(detail)/components/Table.tsx | 99 ++++ .../app/(detail)/components/button/Api.mdx | 65 +++ .../app/(detail)/components/button/Button.mdx | 11 + .../(detail)/components/button/Examples.mdx | 430 ++++++++++++++++++ .../(detail)/components/button/IconDelete.tsx | 16 + .../app/(detail)/components/button/page.mdx | 6 - .../app/(detail)/components/button/page.tsx | 118 +++++ .../src/app/(detail)/components/layout.tsx | 2 +- .../landing/src/components/icons/IconCode.tsx | 33 ++ apps/landing/src/mdx-components.tsx | 5 +- .../src/components/Button/index.tsx | 2 +- 14 files changed, 873 insertions(+), 10 deletions(-) create mode 100644 apps/landing/src/app/(detail)/components/MdxCard.tsx create mode 100644 apps/landing/src/app/(detail)/components/MdxCardFooter.tsx create mode 100644 apps/landing/src/app/(detail)/components/Table.tsx create mode 100644 apps/landing/src/app/(detail)/components/button/Api.mdx create mode 100644 apps/landing/src/app/(detail)/components/button/Button.mdx create mode 100644 apps/landing/src/app/(detail)/components/button/Examples.mdx create mode 100644 apps/landing/src/app/(detail)/components/button/IconDelete.tsx delete mode 100644 apps/landing/src/app/(detail)/components/button/page.mdx create mode 100644 apps/landing/src/app/(detail)/components/button/page.tsx create mode 100644 apps/landing/src/components/icons/IconCode.tsx diff --git a/apps/landing/src/app/(detail)/components/Card.tsx b/apps/landing/src/app/(detail)/components/Card.tsx index f9e1b4f2..b9ad4397 100644 --- a/apps/landing/src/app/(detail)/components/Card.tsx +++ b/apps/landing/src/app/(detail)/components/Card.tsx @@ -1,6 +1,10 @@ import { VStack } from '@devup-ui/react' -export default function Card({ children }: { children: React.ReactNode }) { +export default function Card({ + children, + className, + ...props +}: React.ComponentProps<'div'>) { return ( {children} diff --git a/apps/landing/src/app/(detail)/components/MdxCard.tsx b/apps/landing/src/app/(detail)/components/MdxCard.tsx new file mode 100644 index 00000000..dbf48378 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/MdxCard.tsx @@ -0,0 +1,29 @@ +import { css } from '@devup-ui/react' + +import Card from './Card' + +export default function MdxCard({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx new file mode 100644 index 00000000..ddf5be62 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx @@ -0,0 +1,58 @@ +'use client' + +import { Box, Center, Flex, Text, VStack } from '@devup-ui/react' +import { useState } from 'react' + +import IconCode from '@/components/icons/IconCode' + +export default function MdxCardFooter({ + children, +}: { + children: React.ReactNode +}) { + const [isOpen, setIsOpen] = useState(false) + return ( + <> + + +
setIsOpen(!isOpen)} + p="8px" + transition="all 0.2s ease-in-out" + w="fit-content" + > + + Show Code +
+ + {isOpen && ( + + {children} + + )} + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/Table.tsx b/apps/landing/src/app/(detail)/components/Table.tsx new file mode 100644 index 00000000..98b205ea --- /dev/null +++ b/apps/landing/src/app/(detail)/components/Table.tsx @@ -0,0 +1,99 @@ +import { Box, css } from '@devup-ui/react' +import clsx from 'clsx' + +export function Table({ + children, + className, + ...props +}: React.ComponentProps<'table'>) { + return ( + + {children} + + ) +} + +export function Tr({ children, ...props }: React.ComponentProps<'tr'>) { + return ( + + {children} + + ) +} + +export function Td({ + children, + className, + ...props +}: React.ComponentProps<'td'>) { + return ( + + {children} + + ) +} + +export function Th({ + children, + className, + ...props +}: React.ComponentProps<'th'>) { + return ( + + {children} + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/Api.mdx b/apps/landing/src/app/(detail)/components/button/Api.mdx new file mode 100644 index 00000000..9263c332 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/Api.mdx @@ -0,0 +1,65 @@ +import { Td, Th, Tr, Table } from '../Table' + + +###### API +`Button` props extends the button HTML attributes. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescriptionTypeDefault
variantThe variant of the button`'primary' | 'default'``'default'`
colorsThe color variables of the button, i.e. `var(--primary)` +``` +{ + primary?: string + error?: string + text?: string + border?: string + inputBackground?: string + primaryFocus?: string +} +``` +`undefined`
dangerSignals that it should be used with caution. It is often used in a delete button or to show the error status.`boolean``false`
sizeThe size of the button`'sm' | 'md' | 'lg'``'md'`
iconIcon of the button passed in as a form of ReactNode`React.ReactNode``undefined`
ellipsis +Whether the button text should be truncated with an ellipsis. The +button should have a width to be able to truncate the text. +`boolean``false`
+
\ No newline at end of file diff --git a/apps/landing/src/app/(detail)/components/button/Button.mdx b/apps/landing/src/app/(detail)/components/button/Button.mdx new file mode 100644 index 00000000..b8a42d37 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/Button.mdx @@ -0,0 +1,11 @@ +import IconDelete from './IconDelete' +import { Button } from '@devup-ui/components' +import { Td, Th, Tr, Table } from '../Table' +import MdxCard from '../MdxCard' +import MdxCardFooter from '../MdxCardFooter' + +**Button** + +#### Button + +`Button` component is used to handle user interactions. \ No newline at end of file diff --git a/apps/landing/src/app/(detail)/components/button/Examples.mdx b/apps/landing/src/app/(detail)/components/button/Examples.mdx new file mode 100644 index 00000000..e2d6f4d3 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/Examples.mdx @@ -0,0 +1,430 @@ +import IconDelete from './IconDelete' +import { Button } from '@devup-ui/components' +import MdxCard from '../MdxCard' +import MdxCardFooter from '../MdxCardFooter' + +###### Examples + +
+
+ +
+
+
+ + + +
+
+ + + +
+
+
+

**Variant & Size**

+ `Button` components has `default` and `primary` variants. `Size` prop determines the paddings of the button. +
+ + ```ts +
+ + + +
+
+ + + +
+ ``` + + + +
+
+
+ + + +
+
+
+

**Danger**

+ Use `danger` prop to signal caution. +
+ + ```ts + + + + ``` + + + +
+
+
+ + +
+
+
+

**Disabled**

+ Use `disabled` prop to show disabled UI of the button. +
+ + ```ts + + + ``` + + + +
+
+ +
+
+
+ + + + + +
+
+
+

**Icon**

+ Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button. +
+ + ```ts + + + + ``` + + + +
+
+
+ + + +
+
+ + + + +
+
+ + + +
+
+
+

**Icon**

+ Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button. +
+ + ```ts +
+ + + +
+
+ + + +
+
+ + + +
+ ``` + + +
+
\ No newline at end of file diff --git a/apps/landing/src/app/(detail)/components/button/IconDelete.tsx b/apps/landing/src/app/(detail)/components/button/IconDelete.tsx new file mode 100644 index 00000000..a811c4cd --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/IconDelete.tsx @@ -0,0 +1,16 @@ +export default function IconDelete() { + return ( + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/page.mdx b/apps/landing/src/app/(detail)/components/button/page.mdx deleted file mode 100644 index bd8963c0..00000000 --- a/apps/landing/src/app/(detail)/components/button/page.mdx +++ /dev/null @@ -1,6 +0,0 @@ -import { Button } from '@devup-ui/components' - -# Button - - - diff --git a/apps/landing/src/app/(detail)/components/button/page.tsx b/apps/landing/src/app/(detail)/components/button/page.tsx new file mode 100644 index 00000000..c58c7cf7 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/page.tsx @@ -0,0 +1,118 @@ +import { Box, css, Text, VStack } from '@devup-ui/react' + +import Api from './Api.mdx' +import Button from './Button.mdx' +import Examples from './Examples.mdx' + +function CustomParagraph({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +function CustomPre({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +function CustomCode({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +function CustomH4({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +function CustomH6({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +function CustomStrong({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +export default function Page() { + return ( + + -
+
@@ -56,7 +56,7 @@ import MdxCardFooter from '../MdxCardFooter'
@@ -85,7 +85,7 @@ import MdxCardFooter from '../MdxCardFooter'
@@ -109,7 +109,7 @@ import MdxCardFooter from '../MdxCardFooter'

-

**Variant & Size**

+ **Variant & Size** +
`Button` components has `default` and `primary` variants. `Size` prop determines the paddings of the button.
@@ -64,7 +65,9 @@ import MdxCardFooter from '../MdxCardFooter'

-

**Danger**

+ **Danger** + +
Use `danger` prop to signal caution.
@@ -92,7 +95,9 @@ import MdxCardFooter from '../MdxCardFooter'

-

**Disabled**

+ **Disabled** + +
Use `disabled` prop to show disabled UI of the button.
@@ -164,7 +169,9 @@ import MdxCardFooter from '../MdxCardFooter'

-

**Icon**

+ **Icon** + +
Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button. @@ -322,7 +329,9 @@ import MdxCardFooter from '../MdxCardFooter'
-

**Icon**

+ **Icon** + +
Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button. From 933d45f2a966daecd79a4121b72fe952a2ee4313 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Tue, 8 Jul 2025 17:43:26 +0900 Subject: [PATCH 06/24] Update snapshot --- .../__snapshots__/index.browser.test.tsx.snap | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap index b488fc57..1c1951c3 100644 --- a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Button > color should be white 1`] = `
```ts -
- - - -
-
- - - -
+ ``` @@ -72,13 +80,13 @@ import MdxCardFooter from '../MdxCardFooter' ```ts - - - ``` @@ -102,8 +110,12 @@ import MdxCardFooter from '../MdxCardFooter' ```ts - - + + ``` @@ -193,7 +205,7 @@ import MdxCardFooter from '../MdxCardFooter' /> } - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > With icon @@ -213,13 +225,13 @@ import MdxCardFooter from '../MdxCardFooter' } variant="primary" - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > Add @@ -354,7 +368,7 @@ import MdxCardFooter from '../MdxCardFooter' text: 'chocolate', }} variant="primary" - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > Primary @@ -364,20 +378,22 @@ import MdxCardFooter from '../MdxCardFooter' text: 'chocolate', }} danger - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > Danger - -
+ @@ -387,7 +403,7 @@ import MdxCardFooter from '../MdxCardFooter' text: 'darkseagreen', }} variant="primary" - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > Primary @@ -397,19 +413,21 @@ import MdxCardFooter from '../MdxCardFooter' text: 'darkseagreen', }} danger - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > Danger -
-
+ @@ -418,7 +436,7 @@ import MdxCardFooter from '../MdxCardFooter' primary: 'steelblue', }} variant="primary" - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > Primary @@ -427,11 +445,11 @@ import MdxCardFooter from '../MdxCardFooter' error: 'steelblue', }} danger - style={{ height: 'min-content' }} + className={css({ height: 'min-content' })} > Danger -
+ ``` From 6e07e7304ba7d16d6b69effe261bd553e23fdda9 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 09:39:33 +0900 Subject: [PATCH 10/24] Add storybook link & fix routes --- .../src/app/(detail)/components/LeftMenu.tsx | 54 +++++++++---------- .../landing/src/components/Header/MobMenu.tsx | 30 ++++++++++- apps/landing/src/components/Header/index.tsx | 30 +++++++++++ 3 files changed, 84 insertions(+), 30 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/LeftMenu.tsx b/apps/landing/src/app/(detail)/components/LeftMenu.tsx index 8e7613ee..80f58609 100644 --- a/apps/landing/src/app/(detail)/components/LeftMenu.tsx +++ b/apps/landing/src/app/(detail)/components/LeftMenu.tsx @@ -8,45 +8,43 @@ export function LeftMenu() { Overview Form Layout Theme diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx index 08f5270a..95ff445a 100644 --- a/apps/landing/src/components/Header/MobMenu.tsx +++ b/apps/landing/src/components/Header/MobMenu.tsx @@ -1,7 +1,8 @@ import { Box, css, Flex, Text } from '@devup-ui/react' import Link from 'next/link' -import { LeftMenu } from '../../app/(detail)/docs/LeftMenu' +import { LeftMenu as LeftMenuComponents } from '../../app/(detail)/components/LeftMenu' +import { LeftMenu as LeftMenuDocs } from '../../app/(detail)/docs/LeftMenu' import { HeaderInput } from './HeaderInput' import { HeaderInputWrap } from './HeaderInputWrap' import { MobMenuWrap } from './MobMenuWrap' @@ -27,7 +28,20 @@ export function MobMenu() { - + + + + + Components + + + + + + + + Storybook + + + diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx index 286b3354..9a5dc108 100644 --- a/apps/landing/src/components/Header/index.tsx +++ b/apps/landing/src/components/Header/index.tsx @@ -113,6 +113,36 @@ export function Header() { Team + + + Storybook + + + From 8a210529b94d6da47147a1bbc42983abeb35e22f Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 09:43:01 +0900 Subject: [PATCH 11/24] Fix layout --- apps/landing/src/app/(detail)/components/layout.tsx | 9 +++++---- .../src/app/(detail)/components/overview/page.tsx | 2 +- apps/landing/src/app/(detail)/team/layout.tsx | 8 +++++++- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/layout.tsx b/apps/landing/src/app/(detail)/components/layout.tsx index 6e08b686..29c53564 100644 --- a/apps/landing/src/app/(detail)/components/layout.tsx +++ b/apps/landing/src/app/(detail)/components/layout.tsx @@ -8,7 +8,7 @@ export default function Layout({ }: Readonly<{ children: React.ReactNode }>) { return ( <> - + @@ -16,9 +16,10 @@ export default function Layout({ {children} diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx index b59d4c54..437d5b92 100644 --- a/apps/landing/src/app/(detail)/components/overview/page.tsx +++ b/apps/landing/src/app/(detail)/components/overview/page.tsx @@ -7,7 +7,7 @@ import Card from '../Card' export default function Page() { return ( - + Overview diff --git a/apps/landing/src/app/(detail)/team/layout.tsx b/apps/landing/src/app/(detail)/team/layout.tsx index 9b8c5674..0380b880 100644 --- a/apps/landing/src/app/(detail)/team/layout.tsx +++ b/apps/landing/src/app/(detail)/team/layout.tsx @@ -7,7 +7,13 @@ export default function TeamLayout({ }>) { return ( <> - + {children} From ff0be5f4a12d5502afe1114e9eccee31afc51d28 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 09:45:39 +0900 Subject: [PATCH 12/24] Add icon --- apps/landing/src/components/Header/MobMenu.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx index 95ff445a..0189543e 100644 --- a/apps/landing/src/components/Header/MobMenu.tsx +++ b/apps/landing/src/components/Header/MobMenu.tsx @@ -60,10 +60,21 @@ export function MobMenu() { })} href="/storybook/index.html" > - + Storybook + From ec6cd89424ff42963254a22349817e2f254ca27c Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 09:55:10 +0900 Subject: [PATCH 13/24] Fix header button keyword --- apps/landing/src/components/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx index 9a5dc108..3927cf9e 100644 --- a/apps/landing/src/components/Header/index.tsx +++ b/apps/landing/src/components/Header/index.tsx @@ -124,7 +124,7 @@ export function Header() { href="/storybook/index.html" role="group" > - Storybook + Storybook Date: Wed, 9 Jul 2025 12:04:52 +0900 Subject: [PATCH 14/24] Refactor mdx - refactor MdxCard component to parse md and file for examples section --- apps/landing/next.config.ts | 8 +- apps/landing/package.json | 12 +- .../src/app/(detail)/components/MdxCard.tsx | 49 +- .../app/(detail)/components/MdxCardFooter.tsx | 3 +- .../app/(detail)/components/button/Api.mdx | 8 +- .../(detail)/components/button/Examples.mdx | 458 +------------ .../components/button/demo/Colors.tsx | 103 +++ .../components/button/demo/Danger.tsx | 24 + .../components/button/demo/Disabled.tsx | 25 + .../(detail)/components/button/demo/Icon.tsx | 66 ++ .../components/button/demo/Variants.tsx | 47 ++ apps/landing/src/mdx-components.tsx | 4 +- pnpm-lock.yaml | 641 ++++++++++++++++++ 13 files changed, 988 insertions(+), 460 deletions(-) create mode 100644 apps/landing/src/app/(detail)/components/button/demo/Colors.tsx create mode 100644 apps/landing/src/app/(detail)/components/button/demo/Danger.tsx create mode 100644 apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx create mode 100644 apps/landing/src/app/(detail)/components/button/demo/Icon.tsx create mode 100644 apps/landing/src/app/(detail)/components/button/demo/Variants.tsx diff --git a/apps/landing/next.config.ts b/apps/landing/next.config.ts index fa5bd714..fff27523 100644 --- a/apps/landing/next.config.ts +++ b/apps/landing/next.config.ts @@ -1,7 +1,13 @@ import { DevupUI } from '@devup-ui/next-plugin' import createMDX from '@next/mdx' +import remarkGfm from 'remark-gfm' -const withMDX = createMDX({}) +const withMDX = createMDX({ + options: { + remarkPlugins: [remarkGfm], + }, + extension: /\.mdx?$/, +}) export default withMDX( DevupUI( diff --git a/apps/landing/package.json b/apps/landing/package.json index 6e903650..44f10319 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -11,29 +11,31 @@ "lint": "eslint" }, "dependencies": { - "body-scroll-lock": "3.1.5", - "@devup-ui/react": "workspace:*", "@devup-ui/components": "workspace:*", + "@devup-ui/react": "workspace:*", "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.3.4", "@types/mdx": "^2.0.13", + "body-scroll-lock": "3.1.5", "clsx": "^2.1.1", "next": "^15.3.4", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-markdown": "8.0.6", "react-syntax-highlighter": "^15.6.1", + "remark-gfm": "^4.0.1", "sanitize.css": "^13.0.0" }, "devDependencies": { - "@types/body-scroll-lock": "^3.1.2", "@devup-ui/next-plugin": "workspace:*", + "@types/body-scroll-lock": "^3.1.2", "@types/node": "^24", "@types/react": "^19", "@types/react-dom": "^19", "@types/react-syntax-highlighter": "^15.5.13", - "typescript": "^5", "glob": "^11.0.3", - "remark": "^15.0.1" + "remark": "^15.0.1", + "typescript": "^5" } } \ No newline at end of file diff --git a/apps/landing/src/app/(detail)/components/MdxCard.tsx b/apps/landing/src/app/(detail)/components/MdxCard.tsx index d2b3983c..29459611 100644 --- a/apps/landing/src/app/(detail)/components/MdxCard.tsx +++ b/apps/landing/src/app/(detail)/components/MdxCard.tsx @@ -1,8 +1,40 @@ -import { css } from '@devup-ui/react' +import { readFile } from 'node:fs/promises' +import { join } from 'node:path' + +import { Box, css, VStack } from '@devup-ui/react' +import ReactMarkdown from 'react-markdown' + +import { Code } from '@/components/Code' +import { _components } from '@/mdx-components' import Card from './Card' +import MdxCardFooter from './MdxCardFooter' + +export default async function MdxCard({ + src, + demo, +}: { + children: React.ReactNode + src: string + demo: React.ReactNode +}) { + const content = await readFile( + join( + process.cwd(), + 'src/app/(detail)/components', + src ?? 'button/demo/Variants.tsx', + ), + { + encoding: 'utf-8', + }, + ) + // extract comment + const comment = content.match(/\/\*\*[\s\S]*?\*\//)?.[0] + const code = content.replace('\n' + comment!, '') + const normalizedComment = comment + ?.replace(/\/\*\*|\*\//g, '') + ?.replace(/^\s*\*\s*/gm, '') -export default function MdxCard({ children }: { children: React.ReactNode }) { return ( - {children} + + {demo} + + {normalizedComment ?? ''} + + + + + ) } diff --git a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx index ddf5be62..b4ec0690 100644 --- a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx +++ b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx @@ -44,10 +44,9 @@ export default function MdxCardFooter({ {isOpen && ( {children} diff --git a/apps/landing/src/app/(detail)/components/button/Api.mdx b/apps/landing/src/app/(detail)/components/button/Api.mdx index f6b30a09..edcc3054 100644 --- a/apps/landing/src/app/(detail)/components/button/Api.mdx +++ b/apps/landing/src/app/(detail)/components/button/Api.mdx @@ -66,4 +66,10 @@ button should have a width to be able to truncate the text. - \ No newline at end of file + + +## aa + +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 | diff --git a/apps/landing/src/app/(detail)/components/button/Examples.mdx b/apps/landing/src/app/(detail)/components/button/Examples.mdx index eba04efb..859a3924 100644 --- a/apps/landing/src/app/(detail)/components/button/Examples.mdx +++ b/apps/landing/src/app/(detail)/components/button/Examples.mdx @@ -2,456 +2,22 @@ import IconDelete from './IconDelete' import { Button } from '@devup-ui/components' import MdxCard from '../MdxCard' import MdxCardFooter from '../MdxCardFooter' +import { Variants } from './demo/Variants' +import { Danger } from './demo/Danger' +import { Disabled } from './demo/Disabled' +import { Icon } from './demo/Icon' +import { Colors } from './demo/Colors' ###### Examples
-
- -
-
-
- - - -
-
- - - -
-
-
- **Variant & Size** -
- `Button` components has `default` and `primary` variants. `Size` prop determines the paddings of the button. -
- - ```ts - - - - - - - - - - - ``` - - - -
-
-
- - - -
-
-
- **Danger** - -
- Use `danger` prop to signal caution. -
- - ```ts - - - - ``` - - - -
-
-
- - -
-
-
- **Disabled** - -
- Use `disabled` prop to show disabled UI of the button. -
- - ```ts - - - ``` - - - +
+ } /> + } /> + } />
-
- -
-
-
- - - - - -
-
-
- **Icon** - -
- Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button. -
- - ```ts - - - - ``` - - - -
-
-
- - - -
-
- - - - -
-
- - - -
-
-
- **Colors** - -
- Pass in an object containing color tokens into `colors` prop. You can change color of border, background, danger color and more using `primary`, `error`, `text`, and so on. -
- - ```ts - - - - - - - - - - - - - - - - ``` - - +
+ } /> + } />
\ No newline at end of file diff --git a/apps/landing/src/app/(detail)/components/button/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/button/demo/Colors.tsx new file mode 100644 index 00000000..153accc4 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Colors.tsx @@ -0,0 +1,103 @@ +import { Button } from '@devup-ui/components' +import { Box, css } from '@devup-ui/react' + +/** + * **Colors** + * Pass in an object containing color tokens into `colors` prop. You can change color of border, background, danger color and more using `primary`, `error`, `text`, and so on. + */ +export function Colors() { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx b/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx new file mode 100644 index 00000000..22012713 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx @@ -0,0 +1,24 @@ +import { Button } from '@devup-ui/components' +import { Box, css } from '@devup-ui/react' + +/** + * **Danger** + * Use `danger` prop to signal caution. + */ +export function Danger() { + return ( + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx new file mode 100644 index 00000000..93955a8b --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx @@ -0,0 +1,25 @@ +import { Button } from '@devup-ui/components' +import { Box, css } from '@devup-ui/react' + +/** + * **Disabled** + * Use `disabled` prop to show disabled UI of the button. + */ +export function Disabled() { + return ( + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx b/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx new file mode 100644 index 00000000..dbcf618e --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx @@ -0,0 +1,66 @@ +import { Button } from '@devup-ui/components' +import { Box, css } from '@devup-ui/react' + +import IconDelete from '../IconDelete' + +/** + * **Icon** + * Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button. + */ +export function Icon() { + return ( + + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx new file mode 100644 index 00000000..14a9cf25 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx @@ -0,0 +1,47 @@ +import { Button } from '@devup-ui/components' +import { Box, css } from '@devup-ui/react' + +/** + * **Variant & Size** + * `Button` components has `default` and `primary` variants. `Size` prop determines the paddings of the button. + */ +export function Variants() { + return ( + <> + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/mdx-components.tsx b/apps/landing/src/mdx-components.tsx index 4cef3748..6fecc01d 100644 --- a/apps/landing/src/mdx-components.tsx +++ b/apps/landing/src/mdx-components.tsx @@ -3,7 +3,7 @@ import type { MDXComponents } from 'mdx/types' import { Code } from './components/Code' -const _components = { +export const _components = { code({ node, inline, className, children, ...props }: any) { const match = /language-(\w+)/.exec(className || '') return !inline && match ? ( @@ -41,7 +41,7 @@ const _components = { }, p({ children }: { children: React.ReactNode }) { return ( - + {children} ) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8291473c..b3556086 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,9 +77,15 @@ importers: react-dom: specifier: ^19.1.0 version: 19.1.0(react@19.1.0) + react-markdown: + specifier: 8.0.6 + version: 8.0.6(@types/react@19.1.8)(react@19.1.0) react-syntax-highlighter: specifier: ^15.6.1 version: 15.6.1(react@19.1.0) + remark-gfm: + specifier: ^4.0.1 + version: 4.0.1 sanitize.css: specifier: ^13.0.0 version: 13.0.0 @@ -2271,6 +2277,9 @@ packages: '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + '@types/mdast@3.0.15': + resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==} + '@types/mdast@4.0.4': resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} @@ -2295,6 +2304,9 @@ packages: '@types/parse-json@4.0.2': resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==} + '@types/prop-types@15.7.15': + resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==} + '@types/react-dom@19.1.6': resolution: {integrity: sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==} peerDependencies: @@ -3144,6 +3156,10 @@ packages: devlop@1.1.0: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} + diff@5.2.0: + resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} + engines: {node: '>=0.3.1'} + dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -3260,6 +3276,10 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} + escape-string-regexp@5.0.0: + resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} + engines: {node: '>=12'} + eslint-config-prettier@10.1.5: resolution: {integrity: sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==} hasBin: true @@ -3637,6 +3657,9 @@ packages: hast-util-to-jsx-runtime@2.3.6: resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==} + hast-util-whitespace@2.0.1: + resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==} + hast-util-whitespace@3.0.0: resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} @@ -3694,6 +3717,9 @@ packages: resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==} engines: {node: '>=8'} + inline-style-parser@0.1.1: + resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==} + inline-style-parser@0.2.4: resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==} @@ -3735,6 +3761,10 @@ packages: resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==} engines: {node: '>= 0.4'} + is-buffer@2.0.5: + resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==} + engines: {node: '>=4'} + is-callable@1.2.7: resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==} engines: {node: '>= 0.4'} @@ -3957,6 +3987,10 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + kleur@4.1.5: + resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} + engines: {node: '>=6'} + kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} @@ -4044,13 +4078,43 @@ packages: resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==} engines: {node: '>=16'} + markdown-table@3.0.4: + resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + math-intrinsics@1.1.0: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mdast-util-definitions@5.1.2: + resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==} + + mdast-util-find-and-replace@3.0.2: + resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} + + mdast-util-from-markdown@1.3.1: + resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==} + mdast-util-from-markdown@2.0.2: resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==} + mdast-util-gfm-autolink-literal@2.0.1: + resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==} + + mdast-util-gfm-footnote@2.1.0: + resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==} + + mdast-util-gfm-strikethrough@2.0.0: + resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==} + + mdast-util-gfm-table@2.0.0: + resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==} + + mdast-util-gfm-task-list-item@2.0.0: + resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==} + + mdast-util-gfm@3.1.0: + resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + mdast-util-mdx-expression@2.0.1: resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==} @@ -4066,12 +4130,18 @@ packages: mdast-util-phrasing@4.1.0: resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} + mdast-util-to-hast@12.3.0: + resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==} + mdast-util-to-hast@13.2.0: resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==} mdast-util-to-markdown@2.1.2: resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==} + mdast-util-to-string@3.2.0: + resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==} + mdast-util-to-string@4.0.0: resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} @@ -4082,9 +4152,33 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} + micromark-core-commonmark@1.1.0: + resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==} + micromark-core-commonmark@2.0.3: resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==} + micromark-extension-gfm-autolink-literal@2.1.0: + resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} + + micromark-extension-gfm-footnote@2.1.0: + resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==} + + micromark-extension-gfm-strikethrough@2.1.0: + resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==} + + micromark-extension-gfm-table@2.1.1: + resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==} + + micromark-extension-gfm-tagfilter@2.0.0: + resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==} + + micromark-extension-gfm-task-list-item@2.1.0: + resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==} + + micromark-extension-gfm@3.0.0: + resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==} + micromark-extension-mdx-expression@3.0.1: resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==} @@ -4100,69 +4194,129 @@ packages: micromark-extension-mdxjs@3.0.0: resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==} + micromark-factory-destination@1.1.0: + resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==} + micromark-factory-destination@2.0.1: resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==} + micromark-factory-label@1.1.0: + resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==} + micromark-factory-label@2.0.1: resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==} micromark-factory-mdx-expression@2.0.3: resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==} + micromark-factory-space@1.1.0: + resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==} + micromark-factory-space@2.0.1: resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==} + micromark-factory-title@1.1.0: + resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==} + micromark-factory-title@2.0.1: resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==} + micromark-factory-whitespace@1.1.0: + resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==} + micromark-factory-whitespace@2.0.1: resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==} + micromark-util-character@1.2.0: + resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==} + micromark-util-character@2.1.1: resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==} + micromark-util-chunked@1.1.0: + resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==} + micromark-util-chunked@2.0.1: resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==} + micromark-util-classify-character@1.1.0: + resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==} + micromark-util-classify-character@2.0.1: resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==} + micromark-util-combine-extensions@1.1.0: + resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==} + micromark-util-combine-extensions@2.0.1: resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==} + micromark-util-decode-numeric-character-reference@1.1.0: + resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==} + micromark-util-decode-numeric-character-reference@2.0.2: resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==} + micromark-util-decode-string@1.1.0: + resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==} + micromark-util-decode-string@2.0.1: resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==} + micromark-util-encode@1.1.0: + resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==} + micromark-util-encode@2.0.1: resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==} micromark-util-events-to-acorn@2.0.3: resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==} + micromark-util-html-tag-name@1.2.0: + resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==} + micromark-util-html-tag-name@2.0.1: resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==} + micromark-util-normalize-identifier@1.1.0: + resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==} + micromark-util-normalize-identifier@2.0.1: resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==} + micromark-util-resolve-all@1.1.0: + resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==} + micromark-util-resolve-all@2.0.1: resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==} + micromark-util-sanitize-uri@1.2.0: + resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==} + micromark-util-sanitize-uri@2.0.1: resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==} + micromark-util-subtokenize@1.1.0: + resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==} + micromark-util-subtokenize@2.1.0: resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==} + micromark-util-symbol@1.1.0: + resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==} + micromark-util-symbol@2.0.1: resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==} + micromark-util-types@1.1.0: + resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==} + micromark-util-types@2.0.2: resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==} + micromark@3.2.0: + resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==} + micromark@4.0.2: resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==} @@ -4482,6 +4636,9 @@ packages: property-information@5.6.0: resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==} + property-information@6.5.0: + resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} + property-information@7.1.0: resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==} @@ -4529,6 +4686,15 @@ packages: react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} + react-is@18.3.1: + resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} + + react-markdown@8.0.6: + resolution: {integrity: sha512-KgPWsYgHuftdx510wwIzpwf+5js/iHqBR+fzxefv8Khk3mFbnioF1bmL2idHN3ler0LMQmICKeDrWnZrX9mtbQ==} + peerDependencies: + '@types/react': '>=16' + react: '>=16' + react-refresh@0.17.0: resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} engines: {node: '>=0.10.0'} @@ -4598,12 +4764,21 @@ packages: rehype-recma@1.0.0: resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==} + remark-gfm@4.0.1: + resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + remark-mdx@3.1.0: resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==} + remark-parse@10.0.2: + resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==} + remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} + remark-rehype@10.1.0: + resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==} + remark-rehype@11.1.2: resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==} @@ -4654,6 +4829,10 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + sade@1.8.1: + resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} + engines: {node: '>=6'} + safe-array-concat@1.1.3: resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==} engines: {node: '>=0.4'} @@ -4874,6 +5053,9 @@ packages: style-to-js@1.1.17: resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==} + style-to-object@0.4.4: + resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==} + style-to-object@1.0.9: resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==} @@ -5074,24 +5256,45 @@ packages: resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==} engines: {node: '>=18'} + unified@10.1.2: + resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==} + unified@11.0.5: resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} + unist-util-generated@2.0.1: + resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==} + + unist-util-is@5.2.1: + resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==} + unist-util-is@6.0.0: resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} unist-util-position-from-estree@2.0.0: resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + unist-util-position@4.0.4: + resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==} + unist-util-position@5.0.0: resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} + unist-util-stringify-position@3.0.3: + resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==} + unist-util-stringify-position@4.0.0: resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} + unist-util-visit-parents@5.1.3: + resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==} + unist-util-visit-parents@6.0.1: resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + unist-util-visit@4.1.2: + resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} + unist-util-visit@5.0.0: resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} @@ -5119,9 +5322,20 @@ packages: uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + uvu@0.5.6: + resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==} + engines: {node: '>=8'} + hasBin: true + + vfile-message@3.1.4: + resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==} + vfile-message@4.0.2: resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} + vfile@5.3.7: + resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==} + vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} @@ -7396,6 +7610,10 @@ snapshots: '@types/json-schema@7.0.15': {} + '@types/mdast@3.0.15': + dependencies: + '@types/unist': 2.0.11 + '@types/mdast@4.0.4': dependencies: '@types/unist': 3.0.3 @@ -7420,6 +7638,8 @@ snapshots: '@types/parse-json@4.0.2': {} + '@types/prop-types@15.7.15': {} + '@types/react-dom@19.1.6(@types/react@19.1.8)': dependencies: '@types/react': 19.1.8 @@ -8676,6 +8896,8 @@ snapshots: dependencies: dequal: 2.0.3 + diff@5.2.0: {} + dir-glob@3.0.1: dependencies: path-type: 4.0.0 @@ -8907,6 +9129,8 @@ snapshots: escape-string-regexp@4.0.0: {} + escape-string-regexp@5.0.0: {} + eslint-config-prettier@10.1.5(eslint@9.30.0(jiti@2.4.2)): dependencies: eslint: 9.30.0(jiti@2.4.2) @@ -9388,6 +9612,8 @@ snapshots: transitivePeerDependencies: - supports-color + hast-util-whitespace@2.0.1: {} + hast-util-whitespace@3.0.0: dependencies: '@types/hast': 3.0.4 @@ -9435,6 +9661,8 @@ snapshots: indent-string@4.0.0: {} + inline-style-parser@0.1.1: {} + inline-style-parser@0.2.4: {} internal-slot@1.1.0: @@ -9485,6 +9713,8 @@ snapshots: call-bound: 1.0.4 has-tostringtag: 1.0.2 + is-buffer@2.0.5: {} + is-callable@1.2.7: {} is-core-module@2.16.1: @@ -9697,6 +9927,8 @@ snapshots: dependencies: json-buffer: 3.0.1 + kleur@4.1.5: {} + kolorist@1.8.0: {} levn@0.4.1: @@ -9777,8 +10009,40 @@ snapshots: markdown-extensions@2.0.0: {} + markdown-table@3.0.4: {} + math-intrinsics@1.1.0: {} + mdast-util-definitions@5.1.2: + dependencies: + '@types/mdast': 3.0.15 + '@types/unist': 2.0.11 + unist-util-visit: 4.1.2 + + mdast-util-find-and-replace@3.0.2: + dependencies: + '@types/mdast': 4.0.4 + escape-string-regexp: 5.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + + mdast-util-from-markdown@1.3.1: + dependencies: + '@types/mdast': 3.0.15 + '@types/unist': 2.0.11 + decode-named-character-reference: 1.2.0 + mdast-util-to-string: 3.2.0 + micromark: 3.2.0 + micromark-util-decode-numeric-character-reference: 1.1.0 + micromark-util-decode-string: 1.1.0 + micromark-util-normalize-identifier: 1.1.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + unist-util-stringify-position: 3.0.3 + uvu: 0.5.6 + transitivePeerDependencies: + - supports-color + mdast-util-from-markdown@2.0.2: dependencies: '@types/mdast': 4.0.4 @@ -9796,6 +10060,63 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-gfm-autolink-literal@2.0.1: + dependencies: + '@types/mdast': 4.0.4 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-find-and-replace: 3.0.2 + micromark-util-character: 2.1.1 + + mdast-util-gfm-footnote@2.1.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + micromark-util-normalize-identifier: 2.0.1 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-strikethrough@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-table@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + markdown-table: 3.0.4 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm-task-list-item@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + + mdast-util-gfm@3.1.0: + dependencies: + mdast-util-from-markdown: 2.0.2 + mdast-util-gfm-autolink-literal: 2.0.1 + mdast-util-gfm-footnote: 2.1.0 + mdast-util-gfm-strikethrough: 2.0.0 + mdast-util-gfm-table: 2.0.0 + mdast-util-gfm-task-list-item: 2.0.0 + mdast-util-to-markdown: 2.1.2 + transitivePeerDependencies: + - supports-color + mdast-util-mdx-expression@2.0.1: dependencies: '@types/estree-jsx': 1.0.5 @@ -9850,6 +10171,17 @@ snapshots: '@types/mdast': 4.0.4 unist-util-is: 6.0.0 + mdast-util-to-hast@12.3.0: + dependencies: + '@types/hast': 2.3.10 + '@types/mdast': 3.0.15 + mdast-util-definitions: 5.1.2 + micromark-util-sanitize-uri: 1.2.0 + trim-lines: 3.0.1 + unist-util-generated: 2.0.1 + unist-util-position: 4.0.4 + unist-util-visit: 4.1.2 + mdast-util-to-hast@13.2.0: dependencies: '@types/hast': 3.0.4 @@ -9874,6 +10206,10 @@ snapshots: unist-util-visit: 5.0.0 zwitch: 2.0.4 + mdast-util-to-string@3.2.0: + dependencies: + '@types/mdast': 3.0.15 + mdast-util-to-string@4.0.0: dependencies: '@types/mdast': 4.0.4 @@ -9882,6 +10218,25 @@ snapshots: merge2@1.4.1: {} + micromark-core-commonmark@1.1.0: + dependencies: + decode-named-character-reference: 1.2.0 + micromark-factory-destination: 1.1.0 + micromark-factory-label: 1.1.0 + micromark-factory-space: 1.1.0 + micromark-factory-title: 1.1.0 + micromark-factory-whitespace: 1.1.0 + micromark-util-character: 1.2.0 + micromark-util-chunked: 1.1.0 + micromark-util-classify-character: 1.1.0 + micromark-util-html-tag-name: 1.2.0 + micromark-util-normalize-identifier: 1.1.0 + micromark-util-resolve-all: 1.1.0 + micromark-util-subtokenize: 1.1.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + uvu: 0.5.6 + micromark-core-commonmark@2.0.3: dependencies: decode-named-character-reference: 1.2.0 @@ -9901,6 +10256,64 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-extension-gfm-autolink-literal@2.1.0: + dependencies: + micromark-util-character: 2.1.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-footnote@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-core-commonmark: 2.0.3 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-normalize-identifier: 2.0.1 + micromark-util-sanitize-uri: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-strikethrough@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-util-chunked: 2.0.1 + micromark-util-classify-character: 2.0.1 + micromark-util-resolve-all: 2.0.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-table@2.1.1: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm-tagfilter@2.0.0: + dependencies: + micromark-util-types: 2.0.2 + + micromark-extension-gfm-task-list-item@2.1.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.2 + + micromark-extension-gfm@3.0.0: + dependencies: + micromark-extension-gfm-autolink-literal: 2.1.0 + micromark-extension-gfm-footnote: 2.1.0 + micromark-extension-gfm-strikethrough: 2.1.0 + micromark-extension-gfm-table: 2.1.1 + micromark-extension-gfm-tagfilter: 2.0.0 + micromark-extension-gfm-task-list-item: 2.1.0 + micromark-util-combine-extensions: 2.0.1 + micromark-util-types: 2.0.2 + micromark-extension-mdx-expression@3.0.1: dependencies: '@types/estree': 1.0.8 @@ -9952,12 +10365,25 @@ snapshots: micromark-util-combine-extensions: 2.0.1 micromark-util-types: 2.0.2 + micromark-factory-destination@1.1.0: + dependencies: + micromark-util-character: 1.2.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + micromark-factory-destination@2.0.1: dependencies: micromark-util-character: 2.1.1 micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-factory-label@1.1.0: + dependencies: + micromark-util-character: 1.2.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + uvu: 0.5.6 + micromark-factory-label@2.0.1: dependencies: devlop: 1.1.0 @@ -9977,11 +10403,23 @@ snapshots: unist-util-position-from-estree: 2.0.0 vfile-message: 4.0.2 + micromark-factory-space@1.1.0: + dependencies: + micromark-util-character: 1.2.0 + micromark-util-types: 1.1.0 + micromark-factory-space@2.0.1: dependencies: micromark-util-character: 2.1.1 micromark-util-types: 2.0.2 + micromark-factory-title@1.1.0: + dependencies: + micromark-factory-space: 1.1.0 + micromark-util-character: 1.2.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + micromark-factory-title@2.0.1: dependencies: micromark-factory-space: 2.0.1 @@ -9989,6 +10427,13 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-factory-whitespace@1.1.0: + dependencies: + micromark-factory-space: 1.1.0 + micromark-util-character: 1.2.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + micromark-factory-whitespace@2.0.1: dependencies: micromark-factory-space: 2.0.1 @@ -9996,30 +10441,61 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-util-character@1.2.0: + dependencies: + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + micromark-util-character@2.1.1: dependencies: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-util-chunked@1.1.0: + dependencies: + micromark-util-symbol: 1.1.0 + micromark-util-chunked@2.0.1: dependencies: micromark-util-symbol: 2.0.1 + micromark-util-classify-character@1.1.0: + dependencies: + micromark-util-character: 1.2.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + micromark-util-classify-character@2.0.1: dependencies: micromark-util-character: 2.1.1 micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-util-combine-extensions@1.1.0: + dependencies: + micromark-util-chunked: 1.1.0 + micromark-util-types: 1.1.0 + micromark-util-combine-extensions@2.0.1: dependencies: micromark-util-chunked: 2.0.1 micromark-util-types: 2.0.2 + micromark-util-decode-numeric-character-reference@1.1.0: + dependencies: + micromark-util-symbol: 1.1.0 + micromark-util-decode-numeric-character-reference@2.0.2: dependencies: micromark-util-symbol: 2.0.1 + micromark-util-decode-string@1.1.0: + dependencies: + decode-named-character-reference: 1.2.0 + micromark-util-character: 1.2.0 + micromark-util-decode-numeric-character-reference: 1.1.0 + micromark-util-symbol: 1.1.0 + micromark-util-decode-string@2.0.1: dependencies: decode-named-character-reference: 1.2.0 @@ -10027,6 +10503,8 @@ snapshots: micromark-util-decode-numeric-character-reference: 2.0.2 micromark-util-symbol: 2.0.1 + micromark-util-encode@1.1.0: {} + micromark-util-encode@2.0.1: {} micromark-util-events-to-acorn@2.0.3: @@ -10039,22 +10517,45 @@ snapshots: micromark-util-types: 2.0.2 vfile-message: 4.0.2 + micromark-util-html-tag-name@1.2.0: {} + micromark-util-html-tag-name@2.0.1: {} + micromark-util-normalize-identifier@1.1.0: + dependencies: + micromark-util-symbol: 1.1.0 + micromark-util-normalize-identifier@2.0.1: dependencies: micromark-util-symbol: 2.0.1 + micromark-util-resolve-all@1.1.0: + dependencies: + micromark-util-types: 1.1.0 + micromark-util-resolve-all@2.0.1: dependencies: micromark-util-types: 2.0.2 + micromark-util-sanitize-uri@1.2.0: + dependencies: + micromark-util-character: 1.2.0 + micromark-util-encode: 1.1.0 + micromark-util-symbol: 1.1.0 + micromark-util-sanitize-uri@2.0.1: dependencies: micromark-util-character: 2.1.1 micromark-util-encode: 2.0.1 micromark-util-symbol: 2.0.1 + micromark-util-subtokenize@1.1.0: + dependencies: + micromark-util-chunked: 1.1.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + uvu: 0.5.6 + micromark-util-subtokenize@2.1.0: dependencies: devlop: 1.1.0 @@ -10062,10 +10563,36 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.2 + micromark-util-symbol@1.1.0: {} + micromark-util-symbol@2.0.1: {} + micromark-util-types@1.1.0: {} + micromark-util-types@2.0.2: {} + micromark@3.2.0: + dependencies: + '@types/debug': 4.1.12 + debug: 4.4.1 + decode-named-character-reference: 1.2.0 + micromark-core-commonmark: 1.1.0 + micromark-factory-space: 1.1.0 + micromark-util-character: 1.2.0 + micromark-util-chunked: 1.1.0 + micromark-util-combine-extensions: 1.1.0 + micromark-util-decode-numeric-character-reference: 1.1.0 + micromark-util-encode: 1.1.0 + micromark-util-normalize-identifier: 1.1.0 + micromark-util-resolve-all: 1.1.0 + micromark-util-sanitize-uri: 1.2.0 + micromark-util-subtokenize: 1.1.0 + micromark-util-symbol: 1.1.0 + micromark-util-types: 1.1.0 + uvu: 0.5.6 + transitivePeerDependencies: + - supports-color + micromark@4.0.2: dependencies: '@types/debug': 4.1.12 @@ -10403,6 +10930,8 @@ snapshots: dependencies: xtend: 4.0.2 + property-information@6.5.0: {} + property-information@7.1.0: {} proxy-compare@3.0.1: {} @@ -10453,6 +10982,30 @@ snapshots: react-is@17.0.2: {} + react-is@18.3.1: {} + + react-markdown@8.0.6(@types/react@19.1.8)(react@19.1.0): + dependencies: + '@types/hast': 2.3.10 + '@types/prop-types': 15.7.15 + '@types/react': 19.1.8 + '@types/unist': 2.0.11 + comma-separated-tokens: 2.0.3 + hast-util-whitespace: 2.0.1 + prop-types: 15.8.1 + property-information: 6.5.0 + react: 19.1.0 + react-is: 18.3.1 + remark-parse: 10.0.2 + remark-rehype: 10.1.0 + space-separated-tokens: 2.0.2 + style-to-object: 0.4.4 + unified: 10.1.2 + unist-util-visit: 4.1.2 + vfile: 5.3.7 + transitivePeerDependencies: + - supports-color + react-refresh@0.17.0: {} react-syntax-highlighter@15.6.1(react@19.1.0): @@ -10572,6 +11125,17 @@ snapshots: transitivePeerDependencies: - supports-color + remark-gfm@4.0.1: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-gfm: 3.1.0 + micromark-extension-gfm: 3.0.0 + remark-parse: 11.0.0 + remark-stringify: 11.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + remark-mdx@3.1.0: dependencies: mdast-util-mdx: 3.0.0 @@ -10579,6 +11143,14 @@ snapshots: transitivePeerDependencies: - supports-color + remark-parse@10.0.2: + dependencies: + '@types/mdast': 3.0.15 + mdast-util-from-markdown: 1.3.1 + unified: 10.1.2 + transitivePeerDependencies: + - supports-color + remark-parse@11.0.0: dependencies: '@types/mdast': 4.0.4 @@ -10588,6 +11160,13 @@ snapshots: transitivePeerDependencies: - supports-color + remark-rehype@10.1.0: + dependencies: + '@types/hast': 2.3.10 + '@types/mdast': 3.0.15 + mdast-util-to-hast: 12.3.0 + unified: 10.1.2 + remark-rehype@11.1.2: dependencies: '@types/hast': 3.0.4 @@ -10669,6 +11248,10 @@ snapshots: dependencies: queue-microtask: 1.2.3 + sade@1.8.1: + dependencies: + mri: 1.2.0 + safe-array-concat@1.1.3: dependencies: call-bind: 1.0.8 @@ -10960,6 +11543,10 @@ snapshots: dependencies: style-to-object: 1.0.9 + style-to-object@0.4.4: + dependencies: + inline-style-parser: 0.1.1 + style-to-object@1.0.9: dependencies: inline-style-parser: 0.2.4 @@ -11140,6 +11727,16 @@ snapshots: unicorn-magic@0.1.0: {} + unified@10.1.2: + dependencies: + '@types/unist': 2.0.11 + bail: 2.0.2 + extend: 3.0.2 + is-buffer: 2.0.5 + is-plain-obj: 4.1.0 + trough: 2.2.0 + vfile: 5.3.7 + unified@11.0.5: dependencies: '@types/unist': 3.0.3 @@ -11150,6 +11747,12 @@ snapshots: trough: 2.2.0 vfile: 6.0.3 + unist-util-generated@2.0.1: {} + + unist-util-is@5.2.1: + dependencies: + '@types/unist': 2.0.11 + unist-util-is@6.0.0: dependencies: '@types/unist': 3.0.3 @@ -11158,19 +11761,38 @@ snapshots: dependencies: '@types/unist': 3.0.3 + unist-util-position@4.0.4: + dependencies: + '@types/unist': 2.0.11 + unist-util-position@5.0.0: dependencies: '@types/unist': 3.0.3 + unist-util-stringify-position@3.0.3: + dependencies: + '@types/unist': 2.0.11 + unist-util-stringify-position@4.0.0: dependencies: '@types/unist': 3.0.3 + unist-util-visit-parents@5.1.3: + dependencies: + '@types/unist': 2.0.11 + unist-util-is: 5.2.1 + unist-util-visit-parents@6.0.1: dependencies: '@types/unist': 3.0.3 unist-util-is: 6.0.0 + unist-util-visit@4.1.2: + dependencies: + '@types/unist': 2.0.11 + unist-util-is: 5.2.1 + unist-util-visit-parents: 5.1.3 + unist-util-visit@5.0.0: dependencies: '@types/unist': 3.0.3 @@ -11204,11 +11826,30 @@ snapshots: dependencies: punycode: 2.3.1 + uvu@0.5.6: + dependencies: + dequal: 2.0.3 + diff: 5.2.0 + kleur: 4.1.5 + sade: 1.8.1 + + vfile-message@3.1.4: + dependencies: + '@types/unist': 2.0.11 + unist-util-stringify-position: 3.0.3 + vfile-message@4.0.2: dependencies: '@types/unist': 3.0.3 unist-util-stringify-position: 4.0.0 + vfile@5.3.7: + dependencies: + '@types/unist': 2.0.11 + is-buffer: 2.0.5 + unist-util-stringify-position: 3.0.3 + vfile-message: 3.1.4 + vfile@6.0.3: dependencies: '@types/unist': 3.0.3 From 80581a171b93b81aac0b1908c39ccac90e9d75e0 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 13:17:40 +0900 Subject: [PATCH 15/24] Fix button page layout --- apps/landing/src/app/(detail)/components/button/Examples.mdx | 4 ++-- .../src/app/(detail)/components/button/demo/Variants.tsx | 4 ++-- apps/landing/src/app/(detail)/components/layout.tsx | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/button/Examples.mdx b/apps/landing/src/app/(detail)/components/button/Examples.mdx index 859a3924..c83e896e 100644 --- a/apps/landing/src/app/(detail)/components/button/Examples.mdx +++ b/apps/landing/src/app/(detail)/components/button/Examples.mdx @@ -11,12 +11,12 @@ import { Colors } from './demo/Colors' ###### Examples
-
+
} /> } /> } />
-
+
} /> } />
diff --git a/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx index 14a9cf25..df16b51a 100644 --- a/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx +++ b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx @@ -8,7 +8,7 @@ import { Box, css } from '@devup-ui/react' export function Variants() { return ( <> - + diff --git a/apps/landing/src/app/(detail)/components/layout.tsx b/apps/landing/src/app/(detail)/components/layout.tsx index 29c53564..fa91bb75 100644 --- a/apps/landing/src/app/(detail)/components/layout.tsx +++ b/apps/landing/src/app/(detail)/components/layout.tsx @@ -17,6 +17,7 @@ export default function Layout({ Date: Wed, 9 Jul 2025 14:42:09 +0900 Subject: [PATCH 16/24] Use mdx table --- .../src/app/(detail)/components/MdxCard.tsx | 1 - .../app/(detail)/components/button/Api.mdx | 82 +++---------------- .../(detail)/components/button/Examples.mdx | 4 +- .../app/(detail)/components/button/page.tsx | 6 +- apps/landing/src/mdx-components.tsx | 68 +++++++++++++++ 5 files changed, 83 insertions(+), 78 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/MdxCard.tsx b/apps/landing/src/app/(detail)/components/MdxCard.tsx index 29459611..5240e92a 100644 --- a/apps/landing/src/app/(detail)/components/MdxCard.tsx +++ b/apps/landing/src/app/(detail)/components/MdxCard.tsx @@ -48,7 +48,6 @@ export default async function MdxCard({ border: '1px solid $border', bg: '$containerBackground', maxWidth: '100%', - minWidth: '300px', flexShrink: 0, cursor: 'default', marginBottom: '20px', diff --git a/apps/landing/src/app/(detail)/components/button/Api.mdx b/apps/landing/src/app/(detail)/components/button/Api.mdx index edcc3054..3789d5af 100644 --- a/apps/landing/src/app/(detail)/components/button/Api.mdx +++ b/apps/landing/src/app/(detail)/components/button/Api.mdx @@ -1,75 +1,13 @@ -import { Td, Th, Tr, Table } from '../Table' - - ###### API `Button` props extends the button HTML attributes. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescriptionTypeDefault
variantThe variant of the button`'primary' | 'default'``'default'`
colorsThe color variables of the button, i.e. `var(--primary)` -``` -{ - primary?: string - error?: string - text?: string - border?: string - inputBackground?: string - primaryFocus?: string -} -``` -`undefined`
dangerSignals that it should be used with caution. It is often used in a delete button or to show the error status.`boolean``false`
sizeThe size of the button`'sm' | 'md' | 'lg'``'md'`
iconIcon of the button passed in as a form of ReactNode`React.ReactNode``undefined`
ellipsis -Whether the button text should be truncated with an ellipsis. The -button should have a width to be able to truncate the text. -`boolean``false`
-
-## aa - -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 | +
+| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **variant** | The variant of the button | `'primary' \| 'default'` | `'default'` | +| **colors** | The color variables of the button, i.e. `var(--primary)` | ```{
primary?: string
error?: string
text?: string
border?: string
inputBackground?: string
primaryFocus?: string
}``` | `undefined` | +| **danger** | Signals that it should be used with caution. It is often used in a delete button or to show the error status. | `boolean` | `false` | +| **size** | The size of the button | `'sm' \| 'md' \| 'lg'` | `'md'` | +| **icon** | Icon of the button passed in as a form of ReactNode | `React.ReactNode` | `undefined` | +| **ellipsis** | Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text. | `boolean` | `false` | +
diff --git a/apps/landing/src/app/(detail)/components/button/Examples.mdx b/apps/landing/src/app/(detail)/components/button/Examples.mdx index c83e896e..8a852cc4 100644 --- a/apps/landing/src/app/(detail)/components/button/Examples.mdx +++ b/apps/landing/src/app/(detail)/components/button/Examples.mdx @@ -11,12 +11,12 @@ import { Colors } from './demo/Colors' ###### Examples
-
+
} /> } /> } />
-
+
} /> } />
diff --git a/apps/landing/src/app/(detail)/components/button/page.tsx b/apps/landing/src/app/(detail)/components/button/page.tsx index c58c7cf7..ecf02332 100644 --- a/apps/landing/src/app/(detail)/components/button/page.tsx +++ b/apps/landing/src/app/(detail)/components/button/page.tsx @@ -48,10 +48,10 @@ function CustomPre({ children }: { children: React.ReactNode }) { ) } -function CustomCode({ children }: { children: React.ReactNode }) { +function CustomCode({ children }: { children: string }) { return ( - - {children} + + {children.replaceAll('
', '\n')} ) } diff --git a/apps/landing/src/mdx-components.tsx b/apps/landing/src/mdx-components.tsx index 6fecc01d..a4b69ce1 100644 --- a/apps/landing/src/mdx-components.tsx +++ b/apps/landing/src/mdx-components.tsx @@ -49,6 +49,74 @@ export const _components = { pre({ children }: { children: React.ReactNode }) { return {children} }, + table({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) + }, + thead({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) + }, + th({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) + }, + tr({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) + }, + td({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) + }, } export function useMDXComponents(components: MDXComponents): MDXComponents { From ad5206bd1fd03cf2fd28dbe7f445c1010cf51220 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 15:01:43 +0900 Subject: [PATCH 17/24] Fix header responsive layout --- apps/landing/src/components/Header/index.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx index 3927cf9e..9ffb3ad5 100644 --- a/apps/landing/src/components/Header/index.tsx +++ b/apps/landing/src/components/Header/index.tsx @@ -82,8 +82,12 @@ export function Header() { - - + + Docs - + Components - + Team - + Date: Wed, 9 Jul 2025 15:09:29 +0900 Subject: [PATCH 18/24] Separate mdx local components --- .../app/(detail)/components/button/page.tsx | 85 ++----------------- .../components/mdx/components/CustomCode.tsx | 9 ++ .../components/mdx/components/CustomH4.tsx | 9 ++ .../components/mdx/components/CustomH6.tsx | 9 ++ .../mdx/components/CustomParagraph.tsx | 9 ++ .../components/mdx/components/CustomPre.tsx | 37 ++++++++ .../mdx/components/CustomStrong.tsx | 9 ++ 7 files changed, 90 insertions(+), 77 deletions(-) create mode 100644 apps/landing/src/components/mdx/components/CustomCode.tsx create mode 100644 apps/landing/src/components/mdx/components/CustomH4.tsx create mode 100644 apps/landing/src/components/mdx/components/CustomH6.tsx create mode 100644 apps/landing/src/components/mdx/components/CustomParagraph.tsx create mode 100644 apps/landing/src/components/mdx/components/CustomPre.tsx create mode 100644 apps/landing/src/components/mdx/components/CustomStrong.tsx diff --git a/apps/landing/src/app/(detail)/components/button/page.tsx b/apps/landing/src/app/(detail)/components/button/page.tsx index ecf02332..8d046f85 100644 --- a/apps/landing/src/app/(detail)/components/button/page.tsx +++ b/apps/landing/src/app/(detail)/components/button/page.tsx @@ -1,85 +1,16 @@ -import { Box, css, Text, VStack } from '@devup-ui/react' +import { VStack } from '@devup-ui/react' + +import { CustomCode } from '@/components/mdx/components/CustomCode' +import { CustomH4 } from '@/components/mdx/components/CustomH4' +import { CustomH6 } from '@/components/mdx/components/CustomH6' +import { CustomParagraph } from '@/components/mdx/components/CustomParagraph' +import { CustomPre } from '@/components/mdx/components/CustomPre' +import { CustomStrong } from '@/components/mdx/components/CustomStrong' import Api from './Api.mdx' import Button from './Button.mdx' import Examples from './Examples.mdx' -function CustomParagraph({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ) -} - -function CustomPre({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ) -} - -function CustomCode({ children }: { children: string }) { - return ( - - {children.replaceAll('
', '\n')} - - ) -} - -function CustomH4({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ) -} - -function CustomH6({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ) -} - -function CustomStrong({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ) -} - export default function Page() { return ( diff --git a/apps/landing/src/components/mdx/components/CustomCode.tsx b/apps/landing/src/components/mdx/components/CustomCode.tsx new file mode 100644 index 00000000..4956f699 --- /dev/null +++ b/apps/landing/src/components/mdx/components/CustomCode.tsx @@ -0,0 +1,9 @@ +import { Box } from '@devup-ui/react' + +export function CustomCode({ children }: { children: string }) { + return ( + + {children.replaceAll('
', '\n')} + + ) +} diff --git a/apps/landing/src/components/mdx/components/CustomH4.tsx b/apps/landing/src/components/mdx/components/CustomH4.tsx new file mode 100644 index 00000000..7ac9b79d --- /dev/null +++ b/apps/landing/src/components/mdx/components/CustomH4.tsx @@ -0,0 +1,9 @@ +import { Text } from '@devup-ui/react' + +export function CustomH4({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/landing/src/components/mdx/components/CustomH6.tsx b/apps/landing/src/components/mdx/components/CustomH6.tsx new file mode 100644 index 00000000..8c0e7bad --- /dev/null +++ b/apps/landing/src/components/mdx/components/CustomH6.tsx @@ -0,0 +1,9 @@ +import { Text } from '@devup-ui/react' + +export function CustomH6({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/landing/src/components/mdx/components/CustomParagraph.tsx b/apps/landing/src/components/mdx/components/CustomParagraph.tsx new file mode 100644 index 00000000..f80a509b --- /dev/null +++ b/apps/landing/src/components/mdx/components/CustomParagraph.tsx @@ -0,0 +1,9 @@ +import { Text } from '@devup-ui/react' + +export function CustomParagraph({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/landing/src/components/mdx/components/CustomPre.tsx b/apps/landing/src/components/mdx/components/CustomPre.tsx new file mode 100644 index 00000000..63da836b --- /dev/null +++ b/apps/landing/src/components/mdx/components/CustomPre.tsx @@ -0,0 +1,37 @@ +import { Box, css } from '@devup-ui/react' + +export function CustomPre({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/landing/src/components/mdx/components/CustomStrong.tsx b/apps/landing/src/components/mdx/components/CustomStrong.tsx new file mode 100644 index 00000000..c4cf55c0 --- /dev/null +++ b/apps/landing/src/components/mdx/components/CustomStrong.tsx @@ -0,0 +1,9 @@ +import { Text } from '@devup-ui/react' + +export function CustomStrong({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} From d1dc5f6fd1d376083d5922d3624818a908a5368d Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 15:44:48 +0900 Subject: [PATCH 19/24] Refactor --- .../app/(detail)/components/MdxCardFooter.tsx | 73 +++++++++---------- .../src/app/(detail)/components/Table.tsx | 62 ---------------- .../(detail)/components/button/IconDelete.tsx | 4 +- .../components/button/demo/Colors.tsx | 34 ++++----- .../components/button/demo/Danger.tsx | 8 +- .../components/button/demo/Disabled.tsx | 8 +- .../(detail)/components/button/demo/Icon.tsx | 14 ++-- .../components/button/demo/Variants.tsx | 22 +++--- .../landing/src/components/icons/IconCode.tsx | 34 +++------ .../components/mdx/components/CustomPre.tsx | 24 ++---- 10 files changed, 98 insertions(+), 185 deletions(-) delete mode 100644 apps/landing/src/app/(detail)/components/Table.tsx diff --git a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx index b4ec0690..1d996336 100644 --- a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx +++ b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx @@ -12,46 +12,39 @@ export default function MdxCardFooter({ }) { const [isOpen, setIsOpen] = useState(false) return ( - <> - - + +
setIsOpen(!isOpen)} + p="8px" + transition="all 0.2s ease-in-out" + w="fit-content" > -
setIsOpen(!isOpen)} - p="8px" - transition="all 0.2s ease-in-out" - w="fit-content" - > - - Show Code -
- - {isOpen && ( - - {children} - - )} - - + + Show Code +
+ + {isOpen && ( + + {children} + + )} + ) } diff --git a/apps/landing/src/app/(detail)/components/Table.tsx b/apps/landing/src/app/(detail)/components/Table.tsx deleted file mode 100644 index a8f3575e..00000000 --- a/apps/landing/src/app/(detail)/components/Table.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Box } from '@devup-ui/react' - -export function Table(props: React.ComponentProps<'table'>) { - return ( - - ) -} - -export function Tr(props: React.ComponentProps<'tr'>) { - return ( - - ) -} - -export function Td(props: React.ComponentProps<'td'>) { - return ( - - ) -} - -export function Th(props: React.ComponentProps<'th'>) { - return ( - - ) -} diff --git a/apps/landing/src/app/(detail)/components/button/IconDelete.tsx b/apps/landing/src/app/(detail)/components/button/IconDelete.tsx index a811c4cd..aef92c6e 100644 --- a/apps/landing/src/app/(detail)/components/button/IconDelete.tsx +++ b/apps/landing/src/app/(detail)/components/button/IconDelete.tsx @@ -1,11 +1,13 @@ +import { css } from '@devup-ui/react' + export default function IconDelete() { return ( - + + - + + - - + + - + ) } diff --git a/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx b/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx index 22012713..d3dd1cb3 100644 --- a/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx +++ b/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx @@ -7,15 +7,15 @@ import { Box, css } from '@devup-ui/react' */ export function Danger() { return ( - + - - - diff --git a/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx index 93955a8b..466cbc20 100644 --- a/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx +++ b/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx @@ -1,5 +1,5 @@ import { Button } from '@devup-ui/components' -import { Box, css } from '@devup-ui/react' +import { Box, css, Flex } from '@devup-ui/react' /** * **Disabled** @@ -7,8 +7,8 @@ import { Box, css } from '@devup-ui/react' */ export function Disabled() { return ( - - + + - + ) } diff --git a/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx b/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx index dbcf618e..d7ff7dd6 100644 --- a/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx +++ b/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx @@ -1,5 +1,5 @@ import { Button } from '@devup-ui/components' -import { Box, css } from '@devup-ui/react' +import { Box, css, Flex } from '@devup-ui/react' import IconDelete from '../IconDelete' @@ -9,10 +9,10 @@ import IconDelete from '../IconDelete' */ export function Icon() { return ( - - + + - + ) } diff --git a/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx index df16b51a..0a75ac21 100644 --- a/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx +++ b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx @@ -1,5 +1,5 @@ import { Button } from '@devup-ui/components' -import { Box, css } from '@devup-ui/react' +import { css, Flex } from '@devup-ui/react' /** * **Variant & Size** @@ -8,40 +8,40 @@ import { Box, css } from '@devup-ui/react' export function Variants() { return ( <> - + - - - - - - + ) } diff --git a/apps/landing/src/components/icons/IconCode.tsx b/apps/landing/src/components/icons/IconCode.tsx index d07e016c..69c463f2 100644 --- a/apps/landing/src/components/icons/IconCode.tsx +++ b/apps/landing/src/components/icons/IconCode.tsx @@ -1,21 +1,4 @@ -export default function IconCode({ isOpen }: { isOpen: boolean }) { - if (isOpen) { - return ( - - - - ) - } - +export default function IconCode({ open }: { open: boolean }) { return ( - + {open ? ( + + ) : ( + + )} ) } diff --git a/apps/landing/src/components/mdx/components/CustomPre.tsx b/apps/landing/src/components/mdx/components/CustomPre.tsx index 63da836b..f615f959 100644 --- a/apps/landing/src/components/mdx/components/CustomPre.tsx +++ b/apps/landing/src/components/mdx/components/CustomPre.tsx @@ -1,26 +1,14 @@ -import { Box, css } from '@devup-ui/react' +import { Box } from '@devup-ui/react' export function CustomPre({ children }: { children: React.ReactNode }) { return ( {children} From 75fbf0b003ff9d14b157a469d8340c0d1cc02edc Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 15:55:09 +0900 Subject: [PATCH 20/24] Remove mdx comp --- .../src/app/(detail)/components/MdxCard.tsx | 1 - .../(detail)/components/button/Examples.mdx | 23 -------------- .../app/(detail)/components/button/page.tsx | 31 +++++++++++++------ 3 files changed, 21 insertions(+), 34 deletions(-) delete mode 100644 apps/landing/src/app/(detail)/components/button/Examples.mdx diff --git a/apps/landing/src/app/(detail)/components/MdxCard.tsx b/apps/landing/src/app/(detail)/components/MdxCard.tsx index 5240e92a..a4559215 100644 --- a/apps/landing/src/app/(detail)/components/MdxCard.tsx +++ b/apps/landing/src/app/(detail)/components/MdxCard.tsx @@ -14,7 +14,6 @@ export default async function MdxCard({ src, demo, }: { - children: React.ReactNode src: string demo: React.ReactNode }) { diff --git a/apps/landing/src/app/(detail)/components/button/Examples.mdx b/apps/landing/src/app/(detail)/components/button/Examples.mdx deleted file mode 100644 index 8a852cc4..00000000 --- a/apps/landing/src/app/(detail)/components/button/Examples.mdx +++ /dev/null @@ -1,23 +0,0 @@ -import IconDelete from './IconDelete' -import { Button } from '@devup-ui/components' -import MdxCard from '../MdxCard' -import MdxCardFooter from '../MdxCardFooter' -import { Variants } from './demo/Variants' -import { Danger } from './demo/Danger' -import { Disabled } from './demo/Disabled' -import { Icon } from './demo/Icon' -import { Colors } from './demo/Colors' - -###### Examples - -
-
- } /> - } /> - } /> -
-
- } /> - } /> -
-
\ No newline at end of file diff --git a/apps/landing/src/app/(detail)/components/button/page.tsx b/apps/landing/src/app/(detail)/components/button/page.tsx index 8d046f85..b22ac3b5 100644 --- a/apps/landing/src/app/(detail)/components/button/page.tsx +++ b/apps/landing/src/app/(detail)/components/button/page.tsx @@ -1,4 +1,4 @@ -import { VStack } from '@devup-ui/react' +import { Box, Flex, Text, VStack } from '@devup-ui/react' import { CustomCode } from '@/components/mdx/components/CustomCode' import { CustomH4 } from '@/components/mdx/components/CustomH4' @@ -7,9 +7,14 @@ import { CustomParagraph } from '@/components/mdx/components/CustomParagraph' import { CustomPre } from '@/components/mdx/components/CustomPre' import { CustomStrong } from '@/components/mdx/components/CustomStrong' +import MdxCard from '../MdxCard' import Api from './Api.mdx' import Button from './Button.mdx' -import Examples from './Examples.mdx' +import { Colors } from './demo/Colors' +import { Danger } from './demo/Danger' +import { Disabled } from './demo/Disabled' +import { Icon } from './demo/Icon' +import { Variants } from './demo/Variants' export default function Page() { return ( @@ -24,14 +29,20 @@ export default function Page() { }} /> - + + Examples + + + + } src="button/demo/Variants.tsx" /> + } src="button/demo/Danger.tsx" /> + } src="button/demo/Disabled.tsx" /> + + + } src="button/demo/Icon.tsx" /> + } src="button/demo/Colors.tsx" /> + + Date: Wed, 9 Jul 2025 15:59:27 +0900 Subject: [PATCH 21/24] Add padding to th, td --- apps/landing/src/mdx-components.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/landing/src/mdx-components.tsx b/apps/landing/src/mdx-components.tsx index a4b69ce1..ac91e480 100644 --- a/apps/landing/src/mdx-components.tsx +++ b/apps/landing/src/mdx-components.tsx @@ -84,7 +84,14 @@ export const _components = { }, th({ children }: { children: React.ReactNode }) { return ( - + {children} ) @@ -110,6 +117,8 @@ export const _components = { border="none" color="$text" m="0" + px="20px" + py="14px" typography="body" whiteSpace="pre-wrap" > From 9c5b664c12fd2c577ef252896fac3e2c320c7d1d Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Wed, 9 Jul 2025 17:08:27 +0900 Subject: [PATCH 22/24] Refactor & fix syntax highlighter --- README.md | 10 +++--- README_ko.md | 10 +++--- .../src/app/(detail)/components/MdxCard.tsx | 8 ++--- .../src/app/(detail)/docs/api/box/page.mdx | 16 ++++----- .../src/app/(detail)/docs/api/button/page.mdx | 8 ++--- .../src/app/(detail)/docs/api/center/page.mdx | 16 +++++---- .../src/app/(detail)/docs/api/css/page.mdx | 35 +++++++++++-------- .../src/app/(detail)/docs/api/flex/page.mdx | 8 ++--- .../src/app/(detail)/docs/api/grid/page.mdx | 16 +++++---- .../(detail)/docs/api/group-selector/page.mdx | 14 ++++---- .../src/app/(detail)/docs/api/image/page.mdx | 8 ++--- .../src/app/(detail)/docs/api/input/page.mdx | 8 ++--- .../src/app/(detail)/docs/api/text/page.mdx | 8 ++--- .../app/(detail)/docs/api/v-stack/page.mdx | 16 +++++---- .../(detail)/docs/devup/breakpoints/page.mdx | 10 +++--- .../app/(detail)/docs/devup/colors/page.mdx | 8 ++--- .../(detail)/docs/devup/typography/page.mdx | 4 +-- .../src/app/(detail)/docs/features/page.mdx | 34 +++++++++--------- apps/landing/src/components/Code.tsx | 28 ++++++++++++--- .../components/mdx/components/CustomCode.tsx | 9 +++-- libs/extractor/README.md | 4 +-- packages/components/README.md | 10 +++--- packages/react/README.md | 10 +++--- 23 files changed, 163 insertions(+), 135 deletions(-) diff --git a/README.md b/README.md index 9de75122..dd04813b 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,7 @@ Devup UI is a CSS in JS preprocessor that does not require runtime. Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor. We develop a preprocessor that considers all grammatical cases. -```jsx +```typescript // Before // After @@ -91,7 +91,7 @@ We develop a preprocessor that considers all grammatical cases. Variables are fully supported. -```jsx +```typescript // Before // After @@ -102,7 +102,7 @@ Variables are fully supported. Various expressions and responsiveness are also fully supported. -```jsx +```typescript // Before b ? "yellow" : variable]}/> // After @@ -130,7 +130,7 @@ Support Theme with Typing } ``` -```jsx +```typescript // Type Safe ``` @@ -139,7 +139,7 @@ Support Responsive And Pseudo Selector You can use responsive and pseudo selector. -```jsx +```typescript // Responsive with Selector diff --git a/README_ko.md b/README_ko.md index 6efa50d0..3d80ea47 100644 --- a/README_ko.md +++ b/README_ko.md @@ -82,7 +82,7 @@ Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다. Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다. 모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다. -```jsx +```typescript // Before // After @@ -91,7 +91,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 변수 사용도 완전히 지원합니다. -```jsx +```typescript // Before // After @@ -102,7 +102,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 다양한 표현식과 반응형도 모두 지원합니다. -```jsx +```typescript // Before b ? "yellow" : variable]}/> // After @@ -130,7 +130,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 } ``` -```jsx +```typescript // Type Safe ``` @@ -139,7 +139,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 물론 동시 사용도 가능합니다. -```jsx +```typescript // Responsive with Selector diff --git a/apps/landing/src/app/(detail)/components/MdxCard.tsx b/apps/landing/src/app/(detail)/components/MdxCard.tsx index a4559215..88ac244f 100644 --- a/apps/landing/src/app/(detail)/components/MdxCard.tsx +++ b/apps/landing/src/app/(detail)/components/MdxCard.tsx @@ -46,12 +46,12 @@ export default async function MdxCard({ borderRadius: '10px', border: '1px solid $border', bg: '$containerBackground', - maxWidth: '100%', + maxW: '100%', flexShrink: 0, cursor: 'default', - marginBottom: '20px', + mb: '20px', _lastChild: { - marginBottom: '0', + mb: '0', }, typography: 'bodyReg', color: '$text', @@ -65,7 +65,7 @@ export default async function MdxCard({ - + ) diff --git a/apps/landing/src/app/(detail)/docs/api/box/page.mdx b/apps/landing/src/app/(detail)/docs/api/box/page.mdx index dbb60adf..acccf98b 100644 --- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx +++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx @@ -14,20 +14,16 @@ It is just a `div` with some styles. ## How to use -```jsx -// Before - +```typescript +const before = -// After -
+const after =
``` You can use the `as` prop to change the element type. -```jsx -// Before - +```typescript +const before = -// After - +const after = ``` diff --git a/apps/landing/src/app/(detail)/docs/api/button/page.mdx b/apps/landing/src/app/(detail)/docs/api/button/page.mdx index 2407c4c8..a3e6c762 100644 --- a/apps/landing/src/app/(detail)/docs/api/button/page.mdx +++ b/apps/landing/src/app/(detail)/docs/api/button/page.mdx @@ -12,10 +12,8 @@ The `Button` component is a simple button component that can be used to trigger ## How to use -```jsx -// Before -