feat: wip

- registry/example로 생성된걸 mdx에서 볼수있도록 해야할듯
- stackflow는 <StackflowExample name="" /> 같은게 필요하려나
- react는 <ReactExample name="" />
- 컴포넌트 젤 최상단에 있는건 preview <ComponentPreview name="" />

component-docs/metadatas/component.ts

@@ -1,34 +1,34 @@
-import type { ComponentMetadatas } from "../schemas/metadata";
+import type { ComponentMetadataSchema } from "../schemas/component";
 
-export const componentMetadatas: ComponentMetadatas = [
+export const componentMetadatas: ComponentMetadataSchema[] = [
   {
     name: "alert-dialog",
     type: "component",
     innerDependencies: ["box-button"],
-    snippets: ["alert-dialog.tsx"],
+    snippets: ["component/alert-dialog.tsx"],
   },
   {
     name: "box-button",
     type: "component",
     dependencies: ["@radix-ui/react-slot"],
-    snippets: ["box-button.tsx"],
+    snippets: ["component/box-button.tsx"],
   },
   {
     name: "checkbox",
     type: "component",
     dependencies: ["@seed-design/react-checkbox"],
-    snippets: ["checkbox.tsx"],
+    snippets: ["component/checkbox.tsx"],
   },
   {
     name: "tabs",
     type: "component",
     dependencies: ["@seed-design/react-tabs"],
-    snippets: ["tabs.tsx"],
+    snippets: ["component/tabs.tsx"],
   },
   {
     name: "chip-tabs",
     type: "component",
     dependencies: ["@seed-design/react-tabs"],
-    snippets: ["chip-tabs.tsx"],
+    snippets: ["component/chip-tabs.tsx"],
   },
 ];

component-docs/metadatas/example.ts

@@ -0,0 +1,10 @@
+import type { ExampleMetadataSchema } from "../schemas/example";
+
+export const exampleMetadatas: ExampleMetadataSchema[] = [
+  {
+    name: "chip-tabs-stackflow-default",
+    type: "stackflow",
+    snippets: ["example/chip-tabs-stackflow-default.tsx"],
+    innerDependencies: ["chip-tabs"],
+  },
+];

component-docs/public/registry/components/index.json → component-docs/public/registry/component/index.json

@@ -6,7 +6,7 @@
       "box-button"
     ],
     "snippets": [
-      "alert-dialog.tsx"
+      "component/alert-dialog.tsx"
     ]
   },
   {
@@ -16,7 +16,7 @@
       "@radix-ui/react-slot"
     ],
     "snippets": [
-      "box-button.tsx"
+      "component/box-button.tsx"
     ]
   },
   {
@@ -26,7 +26,7 @@
       "@seed-design/react-checkbox"
     ],
     "snippets": [
-      "checkbox.tsx"
+      "component/checkbox.tsx"
     ]
   },
   {
@@ -36,7 +36,7 @@
       "@seed-design/react-tabs"
     ],
     "snippets": [
-      "tabs.tsx"
+      "component/tabs.tsx"
     ]
   },
   {
@@ -46,7 +46,7 @@
       "@seed-design/react-tabs"
     ],
     "snippets": [
-      "chip-tabs.tsx"
+      "component/chip-tabs.tsx"
     ]
   }
 ]

component-docs/public/registry/example/chip-tabs-stackflow-default.json

@@ -0,0 +1,13 @@
+{
+  "name": "chip-tabs-stackflow-default",
+  "innerDependencies": [
+    "chip-tabs"
+  ],
+  "registries": [
+    {
+      "name": "chip-tabs-stackflow-default.tsx",
+      "content": "import * as React from \"react\";\n\nimport { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from \"@/seed-design/ui/chip-tabs\";\n\nimport type { ActivityComponentType } from \"@stackflow/react/future\";\nimport Layout from \"./ActivityLayout\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    ChipTabsBasic: unknown;\n  }\n}\n\nconst ChipTabsBasicActivity: ActivityComponentType<\"ChipTabsBasic\"> = () => {\n  const [value, setValue] = React.useState(\"1\");\n\n  const commonStyle = {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"#eeeeee\",\n    height: \"100%\",\n  };\n\n  return (\n    <Layout>\n      <ChipTabs defaultValue=\"1\" value={value} onValueChange={(value) => setValue(value)}>\n        <ChipTabTriggerList>\n          <ChipTabTrigger value=\"1\">라벨1</ChipTabTrigger>\n          <ChipTabTrigger value=\"2\">라벨2</ChipTabTrigger>\n          <ChipTabTrigger value=\"3\">라벨3</ChipTabTrigger>\n        </ChipTabTriggerList>\n      </ChipTabs>\n      {value === \"1\" && <div style={commonStyle}>content 1</div>}\n      {value === \"2\" && <div style={commonStyle}>content 2</div>}\n      {value === \"3\" && <div style={commonStyle}>content 3</div>}\n    </Layout>\n  );\n};\n\nexport default ChipTabsBasicActivity;\n\nChipTabsBasicActivity.displayName = \"ChipTabsBasicActivity\";\n"
+    }
+  ],
+  "type": "stackflow"
+}

component-docs/public/registry/example/index.json

@@ -0,0 +1,12 @@
+[
+  {
+    "name": "chip-tabs-stackflow-default",
+    "type": "stackflow",
+    "snippets": [
+      "example/chip-tabs-stackflow-default.tsx"
+    ],
+    "innerDependencies": [
+      "chip-tabs"
+    ]
+  }
+]

component-docs/schemas/component.ts

@@ -0,0 +1,29 @@
+import { z } from "zod";
+
+export const componentMetadataSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  innerDependencies: z.array(z.string()).optional(),
+  snippets: z.array(z.string()),
+  type: z.enum(["component"]),
+});
+
+export const componentRegistrySchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  innerDependencies: z.array(z.string()).optional(),
+  registries: z.array(
+    z.object({
+      name: z.string(),
+      content: z.string(),
+    }),
+  ),
+  type: z.enum(["component"]),
+});
+
+export type ComponentMetadataSchema = z.infer<typeof componentMetadataSchema>;
+export type ComponentRegistrySchema = z.infer<typeof componentRegistrySchema>;

component-docs/schemas/example.ts

@@ -1,15 +1,28 @@
 import { z } from "zod";
 
-export const componentExampleSchema = z.object({
+export const exampleMetadataSchema = z.object({
   name: z.string(),
   dependencies: z.array(z.string()).optional(),
   devDependencies: z.array(z.string()).optional(),
   innerDependencies: z.array(z.string()).optional(),
   snippets: z.array(z.string()),
+  type: z.enum(["stackflow", "react"]),
 });
 
-export const componentExamplesSchema = z.array(componentExampleSchema);
-
-export type ComponentExample = z.infer<typeof componentExampleSchema>;
+export const exampleRegistrySchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  innerDependencies: z.array(z.string()).optional(),
+  registries: z.array(
+    z.object({
+      name: z.string(),
+      content: z.string(),
+    }),
+  ),
+  type: z.enum(["stackflow", "react"]),
+});
 
-export type ComponentExamples = z.infer<typeof componentExamplesSchema>;
+export type ExampleMetadataSchema = z.infer<typeof exampleMetadataSchema>;
+export type ExampleRegistrySchema = z.infer<typeof exampleRegistrySchema>;

component-docs/scripts/generate-registry.ts

@@ -2,36 +2,47 @@ import { existsSync, promises as fs, readFileSync } from "fs";
 import path, { basename } from "node:path";
 import chalk from "chalk";
 
+import { match } from "ts-pattern";
+
 // ts-node로 실행할 때 extension을 명시해주지 않으면 모듈을 찾지 못함.
 import { componentMetadatas } from "../metadatas/component.js";
+import { exampleMetadatas } from "../metadatas/example.js";
 
-import type { ComponentMetadatas } from "../schemas/metadata.js";
-import { componentRegistrySchema } from "../schemas/registry.js";
+import { type ComponentMetadataSchema, componentRegistrySchema } from "../schemas/component.js";
+import { type ExampleMetadataSchema, exampleRegistrySchema } from "../schemas/example.js";
 
 const REGISTRY_PATH = path.join(process.cwd(), "public/registry");
 const SNIPPETS_PATH = path.join(process.cwd(), "snippets");
 
-async function generateComponentRegistryIndex(metadatas: ComponentMetadatas) {
+type RegistryType = "component" | "example";
+
+interface GenerateRegistryIndexProps {
+  metadatas: ComponentMetadataSchema[] | ExampleMetadataSchema[];
+  type: RegistryType;
+}
+async function generateRegistryIndex({ metadatas, type }: GenerateRegistryIndexProps) {
   const metadatasJson = JSON.stringify(metadatas, null, 2);
 
-  await fs.writeFile(path.join(REGISTRY_PATH, "components/index.json"), metadatasJson, "utf8");
+  await fs.writeFile(path.join(REGISTRY_PATH, `${type}/index.json`), metadatasJson, "utf8");
+}
+
+interface GenerateRegistryProps {
+  metadatas: ComponentMetadataSchema[] | ExampleMetadataSchema[];
+  type: RegistryType;
 }
 
-async function generateComponentRegistry(metadatas: ComponentMetadatas) {
-  const targetPath = path.join(REGISTRY_PATH, "components");
+async function generateRegistry({ metadatas, type }: GenerateRegistryProps) {
+  const targetPath = path.join(REGISTRY_PATH, type);
 
   if (!existsSync(targetPath)) {
     await fs.mkdir(targetPath, { recursive: true });
   }
 
   for (const metadata of metadatas) {
-    if (metadata.type !== "component") {
-      continue;
-    }
-
     const registries = metadata.snippets
       ?.map((snippet) => {
         const snippetPath = path.join(SNIPPETS_PATH, snippet);
+
         if (!existsSync(snippetPath)) {
           console.log(
             chalk.red(
@@ -60,7 +71,10 @@ async function generateComponentRegistry(metadatas: ComponentMetadatas) {
       registries,
     };
 
-    const parsedPayload = componentRegistrySchema.parse(payload);
+    const parsedPayload = match(type)
+      .with("component", () => componentRegistrySchema.parse(payload))
+      .with("example", () => exampleRegistrySchema.parse(payload))
+      .exhaustive();
 
     await fs.writeFile(
       path.join(targetPath, `${metadata.name}.json`),
@@ -73,8 +87,11 @@ async function generateComponentRegistry(metadatas: ComponentMetadatas) {
 function main() {
   console.log(chalk.gray("Generate Component Registry..."));
 
-  generateComponentRegistryIndex(componentMetadatas);
-  generateComponentRegistry(componentMetadatas);
+  generateRegistryIndex({ metadatas: componentMetadatas, type: "component" });
+  generateRegistryIndex({ metadatas: exampleMetadatas, type: "example" });
+
+  generateRegistry({ metadatas: componentMetadatas, type: "component" });
+  generateRegistry({ metadatas: exampleMetadatas, type: "example" });
 
   console.log(chalk.green("Component Registry Generated !"));
 }

component-docs/snippets/example/chip-tabs-stackflow-default.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "@/seed-design/ui/chip-tabs";
+
+import type { ActivityComponentType } from "@stackflow/react/future";
+import Layout from "./ActivityLayout";
+
+declare module "@stackflow/config" {
+  interface Register {
+    ChipTabsBasic: unknown;
+  }
+}
+
+const ChipTabsBasicActivity: ActivityComponentType<"ChipTabsBasic"> = () => {
+  const [value, setValue] = React.useState("1");
+
+  const commonStyle = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#eeeeee",
+    height: "100%",
+  };
+
+  return (
+    <Layout>
+      <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
+        <ChipTabTriggerList>
+          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
+          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
+          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
+        </ChipTabTriggerList>
+      </ChipTabs>
+      {value === "1" && <div style={commonStyle}>content 1</div>}
+      {value === "2" && <div style={commonStyle}>content 2</div>}
+      {value === "3" && <div style={commonStyle}>content 3</div>}
+    </Layout>
+  );
+};
+
+export default ChipTabsBasicActivity;
+
+ChipTabsBasicActivity.displayName = "ChipTabsBasicActivity";

component-docs/src/pages/components/alert-dialog.mdx

@@ -3,7 +3,7 @@ import { Installation } from '@/src/components/Installation';
 import { Preview } from '@/src/components/Preview';
 import { Stackflow } from "@/src/components/Stackflow";
 
-import registry from '@/public/registry/components/alert-dialog.json';
+import registry from '@/public/registry/component/alert-dialog.json';
 import AlertDialogDefaultActivity from "@/src/activities/AlertDialogDefaultActivity";
 
 # Alert Dialog