feat: add docs-extractor package for component documentation extraction

apps/website/docs-extractor.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from '@vapor-ui/ts-api-extractor';
+
+export default defineConfig({
+    global: {
+        outputDir: './public/components/generated',
+        languages: ['ko', 'en'],
+        defaultLanguage: 'ko',
+        filterExternal: true,
+        filterSprinkles: true,
+        filterHtml: true,
+        includeHtml: ['className', 'style'],
+    },
+
+    sprinkles: {
+        metaPath: '../../scripts/docs-extractor/generated/sprinkles-meta.json',
+        include: ['padding', 'paddingX', 'paddingY', 'margin', 'gap', 'color'],
+    },
+
+    components: {
+        'box/box.tsx': {
+            sprinklesAll: true,
+        },
+        'flex/flex.tsx': {
+            sprinkles: ['gap', 'alignItems', 'justifyContent', 'flexDirection', 'alignContent'],
+        },
+        'v-stack/v-stack.tsx': {
+            sprinkles: ['gap', 'alignItems', 'justifyContent'],
+        },
+        'h-stack/h-stack.tsx': {
+            sprinkles: ['gap', 'alignItems', 'justifyContent'],
+        },
+    },
+});

apps/website/package.json

@@ -2,10 +2,12 @@
     "name": "website",
     "version": "1.0.0-beta.6",
     "private": true,
+    "type": "module",
     "scripts": {
         "build": "next build",
         "clean": "rm -rf node_modules .next .turbo .source",
         "dev": "next dev --turbo",
+        "extract": "ts-api-extractor ../../packages/core/src/components",
         "format": "prettier --write \"./src/**/*.{ts,tsx,md}\"",
         "format:check": "prettier --check \"./src/**/*.{ts,tsx,md}\"",
         "postinstall": "fumadocs-mdx",
@@ -59,6 +61,7 @@
         "@types/node": "^22.15.4",
         "@types/react": "^18.3.27",
         "@types/react-dom": "^18.3.7",
+        "@vapor-ui/ts-api-extractor": "workspace:*",
         "eslint": "^9.20.1",
         "postcss": "^8.5.4",
         "shiki": "^3.7.0",

apps/website/public/components/generated/ko/button.json

@@ -0,0 +1,31 @@
+{
+    "name": "Button",
+    "displayName": "Button",
+    "props": [
+        {
+            "name": "colorPalette",
+            "type": ["primary", "secondary", "success", "warning", "danger", "contrast"],
+            "required": false,
+            "defaultValue": "primary"
+        },
+        {
+            "name": "size",
+            "type": ["sm", "md", "lg", "xl"],
+            "required": false,
+            "defaultValue": "md"
+        },
+        {
+            "name": "variant",
+            "type": ["outline", "fill", "ghost"],
+            "required": false,
+            "defaultValue": "fill"
+        },
+        {
+            "name": "render",
+            "type": ["ReactElement", "(props: HTMLProps) => ReactElement"],
+            "required": false,
+            "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        }
+    ],
+    "defaultElement": "button"
+}

apps/website/src/components/component-props-table/component-props-table.tsx

@@ -7,6 +7,9 @@ import { Badge, Flex, HStack, Text, VStack } from '@vapor-ui/core';
 
 import { InfoPopover } from '~/components/info';
 
+// TODO: When i18n routing is implemented, derive language from URL path or context
+const DEFAULT_LANGUAGE = 'ko';
+
 interface PropDefinition {
     name: string;
     type: string | string[];
@@ -36,7 +39,9 @@ export const ComponentPropsTable = ({ componentName }: ComponentPropsTableProps)
     React.useEffect(() => {
         const loadComponentData = async () => {
             try {
-                const response = await fetch(`/components/generated/${componentName}.json`);
+                const response = await fetch(
+                    `/components/generated/${DEFAULT_LANGUAGE}/${componentName}.json`,
+                );
                 if (!response.ok) {
                     throw new Error(`Failed to load component data for ${componentName}`);
                 }

apps/website/tsconfig.json

@@ -26,6 +26,13 @@
             }
         ]
     },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "global.d.ts"],
+    "include": [
+        "next-env.d.ts",
+        "**/*.ts",
+        "**/*.tsx",
+        ".next/types/**/*.ts",
+        "global.d.ts",
+        "docs-extractor.config.mjs"
+    ],
     "exclude": ["node_modules"]
 }

package.json

@@ -37,6 +37,7 @@
         "test": "turbo run test",
         "test:regressions": "turbo run test:regressions",
         "test:update-snapshots": "turbo run test:regressions -- --update-snapshots",
+        "ts-api-extractor": "pnpm --filter @vapor-ui/ts-api-extractor",
         "typecheck": "turbo typecheck",
         "update-releases": "node scripts/update-releases.mjs",
         "version": "changeset version && pnpm version:changelog && pnpm install --lockfile-only",