Skip to content

Commit 7872547

Browse files
owjs3901owjs3901
authored
Merge pull request #446 from raymondanythings/docs/button-api
docs: add props-table into button docs
2 parents 70b15c6 + 505b593 commit 7872547

File tree

6 files changed

+209
-27
lines changed

6 files changed

+209
-27
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/PropsTable'
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/PropsTable'
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/PropsTable.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+
Table,
9+
TableBody,
10+
TableCell,
11+
TableHead,
12+
TableHeaderCell,
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+
<Table 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+
</Table>
89+
)
90+
}

‎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="$containerBackground"
8+
borderRadius="0.25rem"
9+
color="$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/index.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Box } from '@devup-ui/react'
2+
import { type ComponentProps } from 'react'
3+
4+
export const Table = ({ ...props }: ComponentProps<'table'>) => {
5+
return (
6+
<Box borderRadius="0.5rem" overflow="hidden">
7+
<Box {...props} as="table" borderCollapse="collapse" borderSpacing={0} />
8+
</Box>
9+
)
10+
}
11+
12+
export const TableBody = ({ ...props }: ComponentProps<'tbody'>) => {
13+
return <Box {...props} as="tbody" />
14+
}
15+
16+
export const TableCell = ({ ...props }: ComponentProps<'th'>) => {
17+
return <Box {...props} as="td" padding="0.5rem 1rem" />
18+
}
19+
20+
export const TableHead = ({ ...props }: ComponentProps<'thead'>) => {
21+
return (
22+
<Box
23+
{...props}
24+
as="thead"
25+
selectors={{
26+
'& tr': {
27+
bg: '$cardBg',
28+
},
29+
}}
30+
/>
31+
)
32+
}
33+
34+
export const TableHeaderCell = ({ ...props }: ComponentProps<'th'>) => {
35+
return <Box {...props} as="th" padding="0.5rem 1rem" textAlign="left" />
36+
}
37+
38+
export const TableRow = ({ ...props }: ComponentProps<'tr'>) => {
39+
return (
40+
<Box
41+
{...props}
42+
as="tr"
43+
borderBottom="1px solid var(--border, #E4E4E4)"
44+
selectors={{
45+
'& + &:last-of-type': {
46+
borderBottom: 'none',
47+
},
48+
}}
49+
/>
50+
)
51+
}

0 commit comments

Comments
 (0)