docs: add props-table into button docs

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

@@ -1,14 +1,48 @@
+import { PropsTable } from '@/components/PropsTable'
+
 ###### API
 
 `Button` props extends the button HTML attributes.
 
-<div style={{ width: '100%', overflow: 'auto'}}>
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **variant** | The variant of the button | `'primary' \| 'default'` | `'default'` |
-| **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` |
-| **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` |
-</div>
+<PropsTable
+  componentProps={[
+    {
+      property: 'variant',
+      description: 'The variant of the button',
+      type: "`'primary' | 'default'`",
+      default: "`'default'`",
+    },
+    {
+      property: 'colors',
+      description: 'The color variables of the button, i.e. `var(--primary)`',
+      type: '```{<br>  primary?: string<br>  error?: string<br>  text?: string<br>  border?: string<br>  inputBackground?: string<br>  primaryFocus?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'danger',
+      description:
+        'Signals that it should be used with caution. It is often used in a delete button or to show the error status.',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'size',
+      description: 'The size of the button',
+      type: "`'sm' | 'md' | 'lg'`",
+      default: "`'md'`",
+    },
+    {
+      property: 'icon',
+      description: 'Icon of the button passed in as a form of ReactNode',
+      type: '`React.ReactNode`',
+      default: '`undefined`',
+    },
+    {
+      property: 'ellipsis',
+      description:
+        'Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text.',
+      type: '`boolean`',
+      default: '`false`',
+    },
+  ]}
+/>

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

@@ -6,6 +6,7 @@ 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 { PropsTable } from '@/components/PropsTable'
 import { COMPONENT_GROUPS } from '@/constants'
 import { getDemos } from '@/utils/get-demos'
 
@@ -102,6 +103,7 @@ export default async function Page({
             h6: CustomH6,
             pre: CustomPre,
             p: CustomParagraph,
+            PropsTable,
           }}
         />
       </VStack>

apps/landing/src/app/layout.tsx

@@ -27,18 +27,6 @@ export const metadata: Metadata = {
 resetCss()
 
 globalCss({
-  table: {
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-    border: '1px solid var(--text)',
-    color: 'var(--text, #2F2F2F)',
-    fontFamily: 'Pretendard',
-    fontSize: '16px',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    lineHeight: '150%',
-    letterSpacing: '-0.48px',
-  },
   code: {
     fontFamily: 'D2Coding',
     fontSize: ['13px', '15px'],
@@ -47,10 +35,6 @@ globalCss({
     lineHeight: '1.5',
     letterSpacing: '-0.03em',
   },
-  'th, td': {
-    border: '1px solid var(--text)',
-    padding: '6px 13px',
-  },
   pre: {
     borderRadius: '10px',
   },
@@ -117,7 +101,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             width="0"
           />
         </noscript>
-        <ReactLenis options={{ duration: 1.4 }} root>
+        <ReactLenis options={{ duration: 1.4, allowNestedScroll: true }} root>
           <SearchModal />
           <Box bg="$background">
             <Header />

apps/landing/src/components/PropsTable.tsx

@@ -0,0 +1,90 @@
+import { Text, VStack } from '@devup-ui/react'
+import Markdown from 'react-markdown'
+
+import { _components } from '@/mdx-components'
+
+import { CustomCodeBlock } from './mdx/components/CustomCodeBlock'
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRoot,
+  TableRow,
+} from './Table'
+
+interface ComponentProp {
+  property: string
+  description?: string
+  type?: string
+  default?: string
+}
+
+const MdxComponentsWithCodeBlock = ({ children }: { children?: string }) => {
+  return (
+    <Markdown
+      components={{
+        ...(_components as any),
+        code: CustomCodeBlock,
+      }}
+    >
+      {children}
+    </Markdown>
+  )
+}
+
+interface PropTableProps {
+  componentProps: ComponentProp[]
+}
+
+export const PropsTable = async (props: PropTableProps) => {
+  const { componentProps } = props
+
+  return (
+    <TableRoot border={0}>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Prop</TableHeaderCell>
+          <TableHeaderCell>description</TableHeaderCell>
+          <TableHeaderCell>Type</TableHeaderCell>
+          <TableHeaderCell>Default</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {componentProps.length === 0 && (
+          <TableRow>
+            <TableCell colSpan={3}>
+              <Text>No props to display</Text>
+            </TableCell>
+          </TableRow>
+        )}
+        {componentProps.map(
+          ({ property, description, type, default: defaultValue }) => (
+            <TableRow key={property}>
+              <TableCell>
+                <Text typography="bodyBold">{property}</Text>
+              </TableCell>
+              <TableCell>
+                <MdxComponentsWithCodeBlock>
+                  {description}
+                </MdxComponentsWithCodeBlock>
+              </TableCell>
+              <TableCell>
+                <VStack>
+                  <MdxComponentsWithCodeBlock>
+                    {type?.replaceAll('"', "'")}
+                  </MdxComponentsWithCodeBlock>
+                </VStack>
+              </TableCell>
+              <TableCell>
+                <MdxComponentsWithCodeBlock>
+                  {defaultValue}
+                </MdxComponentsWithCodeBlock>
+              </TableCell>
+            </TableRow>
+          ),
+        )}
+      </TableBody>
+    </TableRoot>
+  )
+}

apps/landing/src/components/Table.tsx

@@ -0,0 +1,68 @@
+import {
+  Box,
+  type DevupComponentBaseProps,
+  type DevupComponentProps,
+} from '@devup-ui/react'
+
+// FIXME: Merge type is not exported in @devup-ui/react
+type Merge<T, U> = Omit<T, Extract<keyof T, keyof U>> & U
+
+type TableComponentProps<T extends React.ElementType> = Merge<
+  DevupComponentBaseProps<T>,
+  DevupComponentProps<T>
+>
+
+const TableRoot = ({ ...props }: TableComponentProps<'table'>) => {
+  return (
+    <Box borderRadius="0.5rem" overflow="hidden">
+      <Box as="table" borderCollapse="collapse" borderSpacing={0} {...props} />
+    </Box>
+  )
+}
+
+const TableHead = ({ ...props }: TableComponentProps<'thead'>) => {
+  return (
+    <Box
+      as="thead"
+      {...props}
+      selectors={{
+        '& tr': {
+          bg: '$cardBg',
+        },
+      }}
+    />
+  )
+}
+
+const TableBody = ({ ...props }: TableComponentProps<'tbody'>) => {
+  return <Box as="tbody" {...props}></Box>
+}
+
+const TableRow = ({ ...props }: TableComponentProps<'tr'>) => {
+  return (
+    <Box
+      as="tr"
+      borderBottom="1px solid var(--border, #E4E4E4)"
+      selectors={{
+        '& + &:last-of-type': {
+          borderBottom: 'none',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+const TableCell = ({ ...props }: TableComponentProps<'td'>) => {
+  return <Box as="td" padding="0.5rem 1rem" {...props} />
+}
+
+const TableHeaderCell = ({ ...props }: TableComponentProps<'th'>) => {
+  return <Box as="th" padding="0.5rem 1rem" textAlign="left" {...props} />
+}
+
+export { TableBody, TableCell, TableHead, TableHeaderCell, TableRoot, TableRow }
+
+export function Table() {
+  return <></>
+}

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

@@ -0,0 +1,21 @@
+import { Box, Text } from '@devup-ui/react'
+
+export function CustomCodeBlock({ children }: { children: string }) {
+  return (
+    <Box
+      as="code"
+      bg="var(--containerBackground)"
+      borderRadius="0.25rem"
+      color="var(--text)"
+      padding="0.25rem"
+      whiteSpace="pre-wrap"
+    >
+      {children.split('<br>').map((line, index) => (
+        <Text key={index.toString()} whiteSpace="pre">
+          {index > 0 && <br />}
+          {line}
+        </Text>
+      ))}
+    </Box>
+  )
+}

packages/react/src/index.ts

@@ -9,7 +9,11 @@ export { Text } from './components/Text'
 export { ThemeScript } from './components/ThemeScript'
 export { VStack } from './components/VStack'
 export { useTheme } from './hooks/use-theme'
-export type { DevupProps } from './types/props'
+export type {
+  DevupComponentBaseProps,
+  DevupComponentProps,
+  DevupProps,
+} from './types/props'
 export type { DevupTheme, DevupThemeColors } from './types/theme'
 export type {
   DevupThemeTypography,