Skip to content

Commit 5c9853f

Browse files
raymondanythingsraymondanythings
committed
docs: add props-table into button docs
1 parent 8beed20 commit 5c9853f

File tree

7 files changed

+231
-28
lines changed

7 files changed

+231
-28
lines changed

‎apps/landing/src/app/(detail)/components/[component]/button/Api.mdx‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,48 @@
1+
import { PropsTable } from '@/components/props-table'
2+
13
###### API
24

35
`Button` props extends the button HTML attributes.
46

5-
<div style={{ width: '100%', overflow: 'auto'}}>
6-
| Property | Description | Type | Default |
7-
| --- | --- | --- | --- |
8-
| **variant** | The variant of the button | `'primary' \| 'default'` | `'default'` |
9-
| **colors** | The color variables of the button, i.e. `var(--primary)` | ```{<br> primary?: string<br> error?: string<br> text?: string<br> border?: string<br> inputBackground?: string<br> primaryFocus?: string<br>}``` | `undefined` |
10-
| **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` |
11-
| **size** | The size of the button | `'sm' \| 'md' \| 'lg'` | `'md'` |
12-
| **icon** | Icon of the button passed in as a form of ReactNode | `React.ReactNode` | `undefined` |
13-
| **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` |
14-
</div>
7+
<PropsTable
8+
componentProps={[
9+
{
10+
property: 'variant',
11+
description: 'The variant of the button',
12+
type: "`'primary' | 'default'`",
13+
default: "`'default'`",
14+
},
15+
{
16+
property: 'colors',
17+
description: 'The color variables of the button, i.e. `var(--primary)`',
18+
type: '```{<br> primary?: string<br> error?: string<br> text?: string<br> border?: string<br> inputBackground?: string<br> primaryFocus?: string<br>}```',
19+
default: '`undefined`',
20+
},
21+
{
22+
property: 'danger',
23+
description:
24+
'Signals that it should be used with caution. It is often used in a delete button or to show the error status.',
25+
type: '`boolean`',
26+
default: '`false`',
27+
},
28+
{
29+
property: 'size',
30+
description: 'The size of the button',
31+
type: "`'sm' | 'md' | 'lg'`",
32+
default: "`'md'`",
33+
},
34+
{
35+
property: 'icon',
36+
description: 'Icon of the button passed in as a form of ReactNode',
37+
type: '`React.ReactNode`',
38+
default: '`undefined`',
39+
},
40+
{
41+
property: 'ellipsis',
42+
description:
43+
'Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text.',
44+
type: '`boolean`',
45+
default: '`false`',
46+
},
47+
]}
48+
/>

‎apps/landing/src/app/(detail)/components/[component]/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { CustomH6 } from '@/components/mdx/components/CustomH6'
66
import { CustomParagraph } from '@/components/mdx/components/CustomParagraph'
77
import { CustomPre } from '@/components/mdx/components/CustomPre'
88
import { CustomStrong } from '@/components/mdx/components/CustomStrong'
9+
import { PropsTable } from '@/components/props-table'
910
import { COMPONENT_GROUPS } from '@/constants'
1011
import { getDemos } from '@/utils/get-demos'
1112

@@ -102,6 +103,7 @@ export default async function Page({
102103
h6: CustomH6,
103104
pre: CustomPre,
104105
p: CustomParagraph,
106+
PropsTable,
105107
}}
106108
/>
107109
</VStack>

‎apps/landing/src/app/layout.tsx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,6 @@ export const metadata: Metadata = {
2727
resetCss()
2828

2929
globalCss({
30-
table: {
31-
borderCollapse: 'collapse',
32-
borderSpacing: 0,
33-
border: '1px solid var(--text)',
34-
color: 'var(--text, #2F2F2F)',
35-
fontFamily: 'Pretendard',
36-
fontSize: '16px',
37-
fontStyle: 'normal',
38-
fontWeight: 400,
39-
lineHeight: '150%',
40-
letterSpacing: '-0.48px',
41-
},
4230
code: {
4331
fontFamily: 'D2Coding',
4432
fontSize: ['13px', '15px'],
@@ -47,10 +35,6 @@ globalCss({
4735
lineHeight: '1.5',
4836
letterSpacing: '-0.03em',
4937
},
50-
'th, td': {
51-
border: '1px solid var(--text)',
52-
padding: '6px 13px',
53-
},
5438
pre: {
5539
borderRadius: '10px',
5640
},
@@ -117,7 +101,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
117101
width="0"
118102
/>
119103
</noscript>
120-
<ReactLenis options={{ duration: 1.4 }} root>
104+
<ReactLenis options={{ duration: 1.4, allowNestedScroll: true }} root>
121105
<SearchModal />
122106
<Box bg="$background">
123107
<Header />

‎apps/landing/src/components/mdx/components/CustomCodeBlock.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Box, Text } from '@devup-ui/react'
2+
3+
export function CustomCodeBlock({ children }: { children: string }) {
4+
return (
5+
<Box
6+
as="code"
7+
bg="var(--containerBackground)"
8+
borderRadius="0.25rem"
9+
color="var(--text)"
10+
padding="0.25rem"
11+
whiteSpace="pre-wrap"
12+
>
13+
{children.split('<br>').map((line, index) => (
14+
<Text key={index.toString()} whiteSpace="pre">
15+
{index > 0 && <br />}
16+
{line}
17+
</Text>
18+
))}
19+
</Box>
20+
)
21+
}

‎apps/landing/src/components/mdx/components/Table.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {
2+
Box,
3+
type DevupComponentBaseProps,
4+
type DevupComponentProps,
5+
} from '@devup-ui/react'
6+
7+
// FIXME: Merge type is not exported in @devup-ui/react
8+
type Merge<T, U> = Omit<T, Extract<keyof T, keyof U>> & U
9+
10+
type TableComponentProps<T extends React.ElementType> = Merge<
11+
DevupComponentBaseProps<T>,
12+
DevupComponentProps<T>
13+
>
14+
15+
const TableRoot = ({ ...props }: TableComponentProps<'table'>) => {
16+
return (
17+
<Box borderRadius="0.5rem" overflow="hidden">
18+
<Box as="table" borderCollapse="collapse" borderSpacing={0} {...props} />
19+
</Box>
20+
)
21+
}
22+
23+
const TableHead = ({ ...props }: TableComponentProps<'thead'>) => {
24+
return (
25+
<Box
26+
as="thead"
27+
{...props}
28+
selectors={{
29+
'& tr': {
30+
bg: '$cardBg',
31+
},
32+
}}
33+
/>
34+
)
35+
}
36+
37+
const TableBody = ({ ...props }: TableComponentProps<'tbody'>) => {
38+
return <Box as="tbody" {...props}></Box>
39+
}
40+
41+
const TableRow = ({ ...props }: TableComponentProps<'tr'>) => {
42+
return (
43+
<Box
44+
as="tr"
45+
borderBottom="1px solid var(--border, #E4E4E4)"
46+
selectors={{
47+
'& + &:last-of-type': {
48+
borderBottom: 'none',
49+
},
50+
}}
51+
{...props}
52+
/>
53+
)
54+
}
55+
56+
const TableCell = ({ ...props }: TableComponentProps<'td'>) => {
57+
return <Box as="td" padding="0.5rem 1rem" {...props} />
58+
}
59+
60+
const TableHeaderCell = ({ ...props }: TableComponentProps<'th'>) => {
61+
return <Box as="th" padding="0.5rem 1rem" textAlign="left" {...props} />
62+
}
63+
64+
export { TableBody, TableCell, TableHead, TableHeaderCell, TableRoot, TableRow }
65+
66+
export function Table() {
67+
return <></>
68+
}

‎apps/landing/src/components/props-table.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Text, VStack } from '@devup-ui/react'
2+
import Markdown from 'react-markdown'
3+
4+
import { _components } from '@/mdx-components'
5+
6+
import { CustomCodeBlock } from './mdx/components/CustomCodeBlock'
7+
import {
8+
TableBody,
9+
TableCell,
10+
TableHead,
11+
TableHeaderCell,
12+
TableRoot,
13+
TableRow,
14+
} from './mdx/components/Table'
15+
16+
interface ComponentProp {
17+
property: string
18+
description?: string
19+
type?: string
20+
default?: string
21+
}
22+
23+
const MdxComponentsWithCodeBlock = ({ children }: { children?: string }) => {
24+
return (
25+
<Markdown
26+
components={{
27+
...(_components as any),
28+
code: CustomCodeBlock,
29+
}}
30+
>
31+
{children}
32+
</Markdown>
33+
)
34+
}
35+
36+
interface PropTableProps {
37+
componentProps: ComponentProp[]
38+
}
39+
40+
export const PropsTable = async (props: PropTableProps) => {
41+
const { componentProps } = props
42+
43+
return (
44+
<TableRoot border={0}>
45+
<TableHead>
46+
<TableRow>
47+
<TableHeaderCell>Prop</TableHeaderCell>
48+
<TableHeaderCell>description</TableHeaderCell>
49+
<TableHeaderCell>Type</TableHeaderCell>
50+
<TableHeaderCell>Default</TableHeaderCell>
51+
</TableRow>
52+
</TableHead>
53+
<TableBody>
54+
{componentProps.length === 0 && (
55+
<TableRow>
56+
<TableCell colSpan={3}>
57+
<Text>No props to display</Text>
58+
</TableCell>
59+
</TableRow>
60+
)}
61+
{componentProps.map(
62+
({ property, description, type, default: defaultValue }) => (
63+
<TableRow key={property}>
64+
<TableCell>
65+
<Text typography="bodyBold">{property}</Text>
66+
</TableCell>
67+
<TableCell>
68+
<MdxComponentsWithCodeBlock>
69+
{description}
70+
</MdxComponentsWithCodeBlock>
71+
</TableCell>
72+
<TableCell>
73+
<VStack>
74+
<MdxComponentsWithCodeBlock>
75+
{type?.replaceAll('"', "'")}
76+
</MdxComponentsWithCodeBlock>
77+
</VStack>
78+
</TableCell>
79+
<TableCell>
80+
<MdxComponentsWithCodeBlock>
81+
{defaultValue}
82+
</MdxComponentsWithCodeBlock>
83+
</TableCell>
84+
</TableRow>
85+
),
86+
)}
87+
</TableBody>
88+
</TableRoot>
89+
)
90+
}

‎packages/react/src/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ export { Text } from './components/Text'
99
export { ThemeScript } from './components/ThemeScript'
1010
export { VStack } from './components/VStack'
1111
export { useTheme } from './hooks/use-theme'
12-
export type { DevupProps } from './types/props'
12+
export type {
13+
DevupComponentBaseProps,
14+
DevupComponentProps,
15+
DevupProps,
16+
} from './types/props'
1317
export type { DevupTheme, DevupThemeColors } from './types/theme'
1418
export type {
1519
DevupThemeTypography,

0 commit comments

Comments
 (0)