Create demo comp import function

Author: forestream

apps/landing/src/app/(detail)/components/button/demo/Colors.tsx

@@ -5,7 +5,7 @@ import { Box, css, Flex } 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() {
+export default function Colors() {
   return (
     <Box w="100%">
       <Flex flexWrap="wrap" gap="12px" mb="16px">

apps/landing/src/app/(detail)/components/button/demo/Danger.tsx

@@ -5,7 +5,7 @@ import { Box, css } from '@devup-ui/react'
  * **Danger**
  * Use `danger` prop to signal caution.
  */
-export function Danger() {
+export default function Danger() {
   return (
     <Box w="100%">
       <Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">

apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx

@@ -5,7 +5,7 @@ import { Box, css, Flex } from '@devup-ui/react'
  * **Disabled**
  * Use `disabled` prop to show disabled UI of the button.
  */
-export function Disabled() {
+export default function Disabled() {
   return (
     <Box w="100%">
       <Flex flexWrap="wrap" gap="12px" mb="16px">

apps/landing/src/app/(detail)/components/button/demo/Icon.tsx

@@ -7,7 +7,7 @@ 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() {
+export default function Icon() {
   return (
     <Box w="100%">
       <Flex flexWrap="wrap" gap="12px" mb="16px">

apps/landing/src/app/(detail)/components/button/demo/Variants.tsx

@@ -5,7 +5,7 @@ import { css, Flex } from '@devup-ui/react'
  * **Variant & Size**
  * `Button` components has `default` and `primary` variants. `Size` prop determines the paddings of the button.
  */
-export function Variants() {
+export default function Variants() {
   return (
     <>
       <Flex flexWrap="wrap" gap="12px" mb="16px">

apps/landing/src/app/(detail)/components/button/page.tsx

@@ -6,17 +6,16 @@ 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 { getDemos } from '@/utils/get-demos'
 
 import MdxCard from '../MdxCard'
 import Api from './Api.mdx'
 import Button from './Button.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() {
+export default async function Page() {
+  const c = await getDemos(__dirname.split(/[\\/]/).pop()!)
+  const m = Math.ceil(c.length / 2)
+
   return (
     <VStack gap="16px" maxW="100%" overflow="hidden">
       <Button
@@ -34,13 +33,14 @@ export default function Page() {
         </Text>
         <Flex flexWrap="wrap" gap="16px">
           <Box flex="1" minW="300px" w="calc(50% - 8px)">
-            <MdxCard demo={<Variants />} src="button/demo/Variants.tsx" />
-            <MdxCard demo={<Danger />} src="button/demo/Danger.tsx" />
-            <MdxCard demo={<Disabled />} src="button/demo/Disabled.tsx" />
+            {c.slice(0, m).map(([Demo, src]) => (
+              <MdxCard key={src} demo={<Demo />} src={src} />
+            ))}
           </Box>
           <Box flex="1" minW="300px" w="calc(50% - 8px)">
-            <MdxCard demo={<Icon />} src="button/demo/Icon.tsx" />
-            <MdxCard demo={<Colors />} src="button/demo/Colors.tsx" />
+            {c.slice(m).map(([Demo, src]) => (
+              <MdxCard key={src} demo={<Demo />} src={src} />
+            ))}
           </Box>
         </Flex>
       </VStack>

apps/landing/src/utils/get-demos.ts

@@ -0,0 +1,29 @@
+import { readdir } from 'node:fs/promises'
+import { join, relative } from 'node:path'
+
+export async function getDemos(
+  dir: string,
+): Promise<[React.ComponentType, string][]> {
+  const dirPath = join(
+    process.cwd(),
+    'src',
+    'app',
+    '(detail)',
+    'components',
+    dir,
+    'demo',
+  )
+  const demos = await readdir(dirPath)
+
+  return Promise.all(
+    demos.map<Promise<[React.ComponentType, string]>>((item) =>
+      import(
+        './../' +
+          relative(process.cwd(), `${dirPath}/${item}`)
+            .replace('.tsx', '')
+            .replaceAll('\\', '/')
+            .slice(4)
+      ).then((m) => [m.default, `${dir}/demo/${item}`]),
+    ),
+  )
+}