@seed-design/cli 0.0.3 → 1.0.0

package/src/commands/init.ts

@@ -1,10 +1,10 @@
 import * as p from "@clack/prompts";
 import fs from "fs-extra";
 import path from "path";
-import color from "picocolors";
+import { highlight } from "../utils/color";
 import { z } from "zod";
 
-import type { RawConfig } from "@/src/utils/get-config";
+import type { Config } from "@/src/utils/get-config";
 
 import type { CAC } from "cac";
 
@@ -21,12 +21,11 @@ export const initCommand = (cli: CAC) => {
     })
     .option("-y, --yes", "모든 질문에 대해 기본값으로 답변합니다.")
     .action(async (opts) => {
-      const highlight = (text: string) => color.cyan(text);
-      p.intro(color.bgCyan("seed-design.json 파일 생성"));
+      p.intro("seed-design.json 파일 생성");
 
       const options = initOptionsSchema.parse(opts);
       const isYesOption = options.yes;
-      let config: RawConfig = {
+      let config: Config = {
         rsc: false,
         tsx: true,
         path: "./seed-design",
@@ -73,14 +72,14 @@ export const initCommand = (cli: CAC) => {
         await fs.writeFile(targetPath, `${JSON.stringify(config, null, 2)}\n`, "utf-8");
         const relativePath = path.relative(process.cwd(), targetPath);
         stop(`seed-design.json 파일이 ${highlight(relativePath)}에 생성됐어요.`);
-        p.log.info(color.gray("seed-design add {component} 명령어로 컴포넌트를 추가해보세요!"));
+        p.log.info(highlight("seed-design add {component} 명령어로 컴포넌트를 추가해보세요!"));
         p.log.info(
-          color.gray("seed-design add 명령어로 추가할 수 있는 모든 컴포넌트를 확인해보세요."),
+          highlight("seed-design add 명령어로 추가할 수 있는 모든 컴포넌트를 확인해보세요."),
         );
         p.outro("작업이 완료됐어요.");
       } catch (error) {
         p.log.error(`seed-design.json 파일 생성에 실패했어요. ${error}`);
-        p.outro(color.bgRed("작업이 취소됐어요."));
+        p.outro(highlight("작업이 취소됐어요."));
         process.exit(1);
       }
     });

package/src/index.ts

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 import { addCommand } from "@/src/commands/add";
+import { addAllCommand } from "@/src/commands/add-all";
 import { initCommand } from "@/src/commands/init";
 import { getPackageInfo } from "@/src/utils/get-package-info";
 import { cac } from "cac";
@@ -13,6 +14,7 @@ async function main() {
 
   /* Commands */
   addCommand(CLI);
+  addAllCommand(CLI);
   initCommand(CLI);
 
   CLI.version(packageInfo.version || "1.0.0", "-v, --version");

package/src/schema.ts

@@ -1,81 +1,55 @@
 import { z } from "zod";
 
-export const registryType = z.union([z.literal("ui"), z.literal("lib")]);
-
-export const registryUIItemSchema = z.object({
-  /**
-   * @description 레지스트리 이름
-   * @example chip-tabs, alert-dialog
-   */
-  name: z.string(),
+/**
+ * this should be in sync with `docs/registry/schema.ts`
+ */
+export const publicRegistryItemSchema = z.object({
+  id: z.string(),
 
   description: z.string().optional(),
 
-  /**
-   * @description 레지스트리 의존성
-   * @example @seed-design/react-tabs
-   */
-  dependencies: z.array(z.string()).optional(),
+  deprecated: z.boolean().optional(),
 
-  /**
-   * @description 레지스트리 개발 의존성
-   */
-  devDependencies: z.array(z.string()).optional(),
+  hideFromCLICatalog: z.boolean().optional(),
+
+  ///////////////////////////////////////////////////////////////
+
+  dependencies: z.array(z.string()).optional(),
 
-  /**
-   * @description 레지스트리 내부의 Seed Design 컴포넌트 의존성
-   * * `:`를 기준으로 왼쪽은 {registryType}, 오른쪽은 파일 이름
-   * @example ui:action-button
-   * @example lib:manner-temp-level
-   */
-  innerDependencies: z.array(z.string()).optional(),
+  innerDependencies: z
+    .array(
+      z.object({
+        registryId: z.string(),
+        itemIds: z.array(z.string()),
+      }),
+    )
+    .optional(),
 
-  /**
-   * @description
-   * 컴포넌트 코드 스니펫 경로, 여러 파일이 될 수 있어서 배열로 정의
-   * `:`를 기준으로 왼쪽은 {registryType}, 오른쪽은 파일 이름
-   * @example ui:alert-dialog.tsx
-   * @example ui:use-dismissible.ts
-   * @example lib:manner-temp-level.ts
-   */
-  files: z.array(z.string()),
+  ///////////////////////////////////////////////////////////////
 
-  /**
-   * @description 컴포넌트 deprecated 여부
-   */
-  deprecated: z.literal(true).optional(),
+  snippets: z.array(z.object({ path: z.string(), content: z.string() })),
 });
-export const registryUISchema = z.array(registryUIItemSchema);
 
 /**
- * @description 머신이 생성한 registry component schema
+ * this should be in sync with `packages/cli/src/schema.ts`
  */
-const omittedRegistryUISchema = registryUIItemSchema.omit({
-  files: true,
-});
-export const registryUIItemMachineGeneratedSchema = omittedRegistryUISchema.extend({
-  registries: z.array(
-    z.object({
-      name: z.string(),
-      type: registryType,
-      content: z.string(),
-    }),
+export const publicRegistrySchema = z.object({
+  id: z.string(),
+
+  hideFromCLICatalog: z.boolean().optional(),
+
+  items: z.array(
+    publicRegistryItemSchema
+      .omit({ snippets: true })
+      .extend({ snippets: z.array(z.object({ path: z.string() })) }),
   ),
 });
-export const registryComponentMachineGeneratedSchema = z.array(
-  registryUIItemMachineGeneratedSchema,
-);
 
-// NOTE: 현재는 lib이 ui와 타입이 동일하지만, 따로 가져가야한다면 타입을 변경해야해요.
-export const registryLibItemMachineGeneratedSchema = registryUIItemMachineGeneratedSchema;
-
-// NOTE: 현재는 lib이 ui와 타입이 동일하지만, 따로 가져가야한다면 타입을 변경해야해요.
-export type RegistryLibItem = z.infer<typeof registryUIItemSchema>;
-export type RegistryLib = z.infer<typeof registryUISchema>;
-export type RegistryUIItem = z.infer<typeof registryUIItemSchema>;
-export type RegistryUI = z.infer<typeof registryUISchema>;
+/**
+ * this should be in sync with `packages/cli/src/schema.ts`
+ */
+export const publicAvailableRegistriesSchema = z.array(z.object({ id: z.string() }));
 
-export type RegistryUIItemMachineGenerated = z.infer<typeof registryUIItemMachineGeneratedSchema>;
-export type RegistryUIMachineGenerated = z.infer<typeof registryComponentMachineGeneratedSchema>;
-export type RegistryLibItemMachineGenerated = z.infer<typeof registryLibItemMachineGeneratedSchema>;
-export type RegistryLibMachineGenerated = z.infer<typeof registryComponentMachineGeneratedSchema>;
+export type PublicRegistryItem = z.infer<typeof publicRegistryItemSchema>;
+export type PublicRegistry = z.infer<typeof publicRegistrySchema>;
+export type PublicAvailableRegistries = z.infer<typeof publicAvailableRegistriesSchema>;

package/src/tests/resolve-dependencies.test.ts

@@ -0,0 +1,424 @@
+import { describe, it, expect } from "vitest";
+import { resolveDependencies } from "../utils/resolve-dependencies";
+import type { PublicRegistry } from "@/src/schema";
+
+describe("resolveDependencies", () => {
+  it("should resolve a simple item without dependencies", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "button",
+            description: "Button component",
+            snippets: [{ path: "button.tsx" }],
+          },
+        ],
+      },
+    ];
+
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:button"],
+      publicRegistries,
+    });
+
+    expect(result.registryItemsToAdd).toHaveLength(1);
+    expect(result.registryItemsToAdd[0]).toEqual({
+      registryId: "ui",
+      items: [
+        {
+          id: "button",
+          description: "Button component",
+          files: [{ path: "button.tsx" }],
+        },
+      ],
+    });
+    expect(result.npmDependenciesToAdd.size).toBe(0);
+  });
+
+  it("should resolve npm dependencies", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "tabs",
+            description: "Tabs component",
+            snippets: [{ path: "tabs.tsx" }],
+            dependencies: ["@seed-design/react-tabs", "clsx"],
+          },
+        ],
+      },
+    ];
+
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:tabs"],
+      publicRegistries,
+    });
+
+    expect(result.npmDependenciesToAdd.size).toBe(2);
+    expect(result.npmDependenciesToAdd.has("@seed-design/react-tabs")).toBe(true);
+    expect(result.npmDependenciesToAdd.has("clsx")).toBe(true);
+  });
+
+  it("should resolve inner dependencies recursively", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "dialog",
+            description: "Dialog component",
+            snippets: [{ path: "dialog.tsx" }],
+            innerDependencies: [
+              {
+                registryId: "breeze",
+                itemIds: ["animate-number"],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "breeze",
+        items: [
+          {
+            id: "animate-number",
+            description: "Animate number utility",
+            snippets: [{ path: "animate-number.ts" }],
+            dependencies: ["framer-motion"],
+          },
+        ],
+      },
+    ];
+
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:dialog"],
+      publicRegistries,
+    });
+
+    expect(result.registryItemsToAdd).toHaveLength(2);
+    expect(result.registryItemsToAdd).toEqual([
+      {
+        registryId: "ui",
+        items: [
+          {
+            id: "dialog",
+            description: "Dialog component",
+            files: [{ path: "dialog.tsx" }],
+            innerDependencies: [
+              {
+                registryId: "breeze",
+                itemIds: ["animate-number"],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        registryId: "breeze",
+        items: [
+          {
+            id: "animate-number",
+            description: "Animate number utility",
+            files: [{ path: "animate-number.ts" }],
+            dependencies: ["framer-motion"],
+          },
+        ],
+      },
+    ]);
+    expect(result.npmDependenciesToAdd.size).toBe(1);
+    expect(result.npmDependenciesToAdd.has("framer-motion")).toBe(true);
+  });
+
+  it("should handle multiple selected items", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "button",
+            description: "Button component",
+            snippets: [{ path: "button.tsx" }],
+          },
+          {
+            id: "chip",
+            description: "Chip component",
+            snippets: [{ path: "chip.tsx" }],
+          },
+        ],
+      },
+    ];
+
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:button", "ui:chip"],
+      publicRegistries,
+    });
+
+    expect(result.registryItemsToAdd).toHaveLength(1);
+    expect(result.registryItemsToAdd[0].registryId).toBe("ui");
+    expect(result.registryItemsToAdd[0].items).toHaveLength(2);
+    expect(result.registryItemsToAdd[0].items.map((i) => i.id)).toEqual(["button", "chip"]);
+  });
+
+  it("should prevent duplicate items", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "dialog",
+            description: "Dialog component",
+            snippets: [{ path: "dialog.tsx" }],
+            innerDependencies: [
+              {
+                registryId: "ui",
+                itemIds: ["button"],
+              },
+            ],
+          },
+          {
+            id: "button",
+            description: "Button component",
+            snippets: [{ path: "button.tsx" }],
+          },
+        ],
+      },
+    ];
+
+    // Select both dialog and button, but button is already a dependency of dialog
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:dialog", "ui:button"],
+      publicRegistries,
+    });
+
+    expect(result.registryItemsToAdd).toHaveLength(1);
+    expect(result.registryItemsToAdd[0].items).toHaveLength(2);
+    // Button should appear only once
+    const buttonCount = result.registryItemsToAdd[0].items.filter((i) => i.id === "button").length;
+    expect(buttonCount).toBe(1);
+  });
+
+  it("should handle nested inner dependencies", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "complex",
+            description: "Complex component",
+            snippets: [{ path: "complex.tsx" }],
+            innerDependencies: [
+              {
+                registryId: "ui",
+                itemIds: ["dialog"],
+              },
+            ],
+          },
+          {
+            id: "dialog",
+            description: "Dialog component",
+            snippets: [{ path: "dialog.tsx" }],
+            innerDependencies: [
+              {
+                registryId: "breeze",
+                itemIds: ["animate"],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "breeze",
+        items: [
+          {
+            id: "animate",
+            description: "Animate utility",
+            snippets: [{ path: "animate.ts" }],
+            innerDependencies: [
+              {
+                registryId: "lib",
+                itemIds: ["utils"],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "lib",
+        items: [
+          {
+            id: "utils",
+            description: "Utility functions",
+            snippets: [{ path: "utils.ts" }],
+            dependencies: ["lodash"],
+          },
+        ],
+      },
+    ];
+
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:complex"],
+      publicRegistries,
+    });
+
+    expect(result.registryItemsToAdd).toHaveLength(3);
+    expect(result.registryItemsToAdd.map((r) => r.registryId)).toEqual(["ui", "breeze", "lib"]);
+    expect(result.npmDependenciesToAdd.size).toBe(1);
+    expect(result.npmDependenciesToAdd.has("lodash")).toBe(true);
+  });
+
+  it("should throw error for invalid snippet format", () => {
+    const publicRegistries: PublicRegistry[] = [];
+
+    expect(() =>
+      resolveDependencies({
+        selectedItemKeys: ["invalid-format"],
+        publicRegistries,
+      }),
+    ).toThrowError('Invalid snippet format: "invalid-format"');
+  });
+
+  it("should throw error for non-existent snippet", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [],
+      },
+    ];
+
+    expect(() =>
+      resolveDependencies({
+        selectedItemKeys: ["ui:non-existent"],
+        publicRegistries,
+      }),
+    ).toThrowError('Cannot find snippet: "ui:non-existent"');
+  });
+
+  it("should throw error for missing inner dependency", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "broken",
+            description: "Broken component",
+            snippets: [{ path: "broken.tsx" }],
+            innerDependencies: [
+              {
+                registryId: "breeze",
+                itemIds: ["missing"],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: "breeze",
+        items: [],
+      },
+    ];
+
+    expect(() =>
+      resolveDependencies({
+        selectedItemKeys: ["ui:broken"],
+        publicRegistries,
+      }),
+    ).toThrowError("Cannot find dependency item: breeze:missing");
+  });
+
+  it("should handle multiple registries with multiple items", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "button",
+            description: "Button component",
+            snippets: [{ path: "button.tsx" }],
+            dependencies: ["clsx"],
+          },
+          {
+            id: "chip",
+            description: "Chip component",
+            snippets: [{ path: "chip.tsx" }],
+          },
+        ],
+      },
+      {
+        id: "breeze",
+        items: [
+          {
+            id: "animate",
+            description: "Animate utility",
+            snippets: [{ path: "animate.ts" }],
+            dependencies: ["framer-motion"],
+          },
+        ],
+      },
+    ];
+
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:button", "breeze:animate", "ui:chip"],
+      publicRegistries,
+    });
+
+    expect(result.registryItemsToAdd).toHaveLength(2);
+
+    const uiRegistry = result.registryItemsToAdd.find((r) => r.registryId === "ui");
+    expect(uiRegistry?.items).toHaveLength(2);
+    expect(uiRegistry?.items.map((i) => i.id)).toEqual(["button", "chip"]);
+
+    const breezeRegistry = result.registryItemsToAdd.find((r) => r.registryId === "breeze");
+    expect(breezeRegistry?.items).toHaveLength(1);
+    expect(breezeRegistry?.items[0].id).toBe("animate");
+
+    expect(result.npmDependenciesToAdd.size).toBe(2);
+    expect(result.npmDependenciesToAdd.has("clsx")).toBe(true);
+    expect(result.npmDependenciesToAdd.has("framer-motion")).toBe(true);
+  });
+
+  it("should collect all npm dependencies from nested dependencies", () => {
+    const publicRegistries: PublicRegistry[] = [
+      {
+        id: "ui",
+        items: [
+          {
+            id: "rich",
+            description: "Rich component",
+            snippets: [{ path: "rich.tsx" }],
+            dependencies: ["react-hook-form"],
+            innerDependencies: [
+              {
+                registryId: "ui",
+                itemIds: ["field", "label"],
+              },
+            ],
+          },
+          {
+            id: "field",
+            description: "Field component",
+            snippets: [{ path: "field.tsx" }],
+            dependencies: ["clsx", "tailwind-merge"],
+          },
+          {
+            id: "label",
+            description: "Label component",
+            snippets: [{ path: "label.tsx" }],
+            dependencies: ["clsx"],
+          },
+        ],
+      },
+    ];
+
+    const result = resolveDependencies({
+      selectedItemKeys: ["ui:rich"],
+      publicRegistries,
+    });
+
+    expect(result.npmDependenciesToAdd.size).toBe(3);
+    expect(result.npmDependenciesToAdd.has("react-hook-form")).toBe(true);
+    expect(result.npmDependenciesToAdd.has("clsx")).toBe(true);
+    expect(result.npmDependenciesToAdd.has("tailwind-merge")).toBe(true);
+  });
+});