@seed-design/cli 0.0.3 → 1.1.0

package/src/commands/add.ts

@@ -1,41 +1,31 @@
 import { getConfig } from "@/src/utils/get-config";
-import {
-  fetchRegistryItem,
-  getRegistryLibIndex,
-  getRegistryUIIndex,
-} from "@/src/utils/get-metadata";
-import { transform } from "@/src/utils/transformers";
+import { resolveDependencies } from "@/src/utils/resolve-dependencies";
+import { fetchAvailableRegistries, fetchRegistry } from "@/src/utils/fetch";
+import { writeRegistryItemSnippets } from "@/src/utils/write";
 import * as p from "@clack/prompts";
-import fs from "fs-extra";
 import path from "path";
-import color from "picocolors";
 import { z } from "zod";
 
 import type { CAC } from "cac";
 import { BASE_URL } from "../constants";
-import { addRelativeRegistries } from "../utils/add-relative-registries";
 import { highlight } from "../utils/color";
 import { installDependencies } from "../utils/install";
-import type { RegistryUIMachineGenerated } from "../schema";
+import { analytics } from "../utils/analytics";
 
 const addOptionsSchema = z.object({
-  components: z.array(z.string()).optional(),
+  itemIds: z.array(z.string()).optional(),
+  /**
+   * @deprecated use `seed-design add-all` instead
+   */
   all: z.boolean(),
-  includeDeprecated: z.boolean().optional(),
   cwd: z.string(),
   baseUrl: z.string().optional(),
-  // yes: z.boolean(),
-  // overwrite: z.boolean(),
-  // path: z.string().optional(),
 });
 
 export const addCommand = (cli: CAC) => {
   cli
-    .command("add [...components]", "add component")
-    .option("-a, --all", "Add all components", {
-      default: false,
-    })
-    .option("--include-deprecated", "Include deprecated components when used with `--all`", {
+    .command("add [...item-ids]", "add items")
+    .option("-a, --all", "[Deprecated] Add all items", {
       default: false,
     })
     .option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", {
@@ -44,46 +34,76 @@ export const addCommand = (cli: CAC) => {
     .option(
       "-u, --baseUrl <baseUrl>",
       "the base url of the registry. defaults to the current directory.",
-      {
-        default: BASE_URL,
-      },
+      { default: BASE_URL },
     )
-    .example("seed-design add action-button")
-    .example("seed-design add alert-dialog")
-    .action(async (components, opts) => {
-      p.intro(color.bgCyan("seed-design add"));
-      const options = addOptionsSchema.parse({
-        components,
-        ...opts,
-      });
+    .example("seed-design add ui:action-button")
+    .example("seed-design add ui:alert-dialog")
+    .action(async (itemIds, opts) => {
+      const startTime = Date.now();
+      p.intro("seed-design add");
+
+      const {
+        success,
+        data: { all, ...options },
+        error,
+      } = addOptionsSchema.safeParse({ itemIds, ...opts });
+
+      if (!success) {
+        p.log.error(`잘못된 옵션이에요: ${error?.message}`);
+
+        process.exit(1);
+      }
+
+      if (all) {
+        p.log.error(
+          "`--all` 옵션은 더 이상 지원되지 않아요. 대신 `seed-design add-all` 명령어를 사용해주세요.",
+        );
+
+        process.exit(1);
+      }
+
       const cwd = options.cwd;
       const baseUrl = options.baseUrl;
       const config = await getConfig(cwd);
-      const registryComponentIndex = await getRegistryUIIndex(baseUrl);
-      const libRegistryIndex = await getRegistryLibIndex(baseUrl);
+      const rootPath = path.resolve(cwd, config.path);
 
-      const selectedComponents: string[] = await (async () => {
-        if (options.all) {
-          if (options.includeDeprecated) return registryComponentIndex.map((c) => c.name);
+      const { start, stop } = p.spinner();
 
-          return registryComponentIndex.filter(({ deprecated }) => !deprecated).map((c) => c.name);
-        }
+      start("Registry를 가져오고 있어요...");
 
-        if (options.components.length > 0) return options.components;
+      const publicRegistries = await Promise.all(
+        (await fetchAvailableRegistries({ baseUrl })).map(async ({ id }) =>
+          fetchRegistry({ baseUrl, registryId: id }),
+        ),
+      );
+
+      stop("Registry를 가져왔어요.");
+
+      const selectedItemKeys: string[] = await (async () => {
+        if (options.itemIds.length > 0) return options.itemIds;
 
         const selected = await p.multiselect({
-          message: "추가할 컴포넌트를 선택해주세요 (스페이스 바로 여러 개 선택 가능)",
-          options: registryComponentIndex
-            .map(({ name, description, deprecated }) => ({
-              label: `${deprecated ? "(deprecated) " : ""}${name}`,
-              value: name,
-              hint: description,
-              deprecated,
-            }))
+          message: "추가할 항목을 선택해주세요 (스페이스 바로 여러 개 선택 가능)",
+          options: publicRegistries
+            .filter(({ hideFromCLICatalog }) => !hideFromCLICatalog)
+            .flatMap(({ id: registryId, items }) =>
+              items
+                .filter(({ hideFromCLICatalog }) => !hideFromCLICatalog)
+                .sort((a, b) => a.id.localeCompare(b.id))
+                .map(({ id, description, deprecated }) => ({
+                  label: `${deprecated ? "(deprecated) " : ""}${highlight(registryId)}:${id}`,
+                  value: `${registryId}:${id}`,
+                  hint: description,
+
+                  // used for sorting
+                  deprecated,
+                  registryItemCount: items.length,
+                })),
+            )
             .sort((a, b) => {
-              if (a.deprecated === b.deprecated) return a.label.localeCompare(b.label);
+              if (a.deprecated !== b.deprecated) return a.deprecated ? 1 : -1;
 
-              return a.deprecated ? 1 : -1;
+              return b.registryItemCount - a.registryItemCount;
             }),
         });
 
@@ -95,138 +115,118 @@ export const addCommand = (cli: CAC) => {
         return selected;
       })();
 
-      if (!selectedComponents?.length) {
-        p.log.error("컴포넌트를 찾을 수 없어요.");
+      if (!selectedItemKeys?.length) {
+        p.log.error("항목을 찾을 수 없어요.");
+
         process.exit(0);
       }
 
-      p.log.message(`선택된 컴포넌트: ${highlight(selectedComponents.join(", "))}`);
+      p.log.message(`선택된 항목: ${highlight(selectedItemKeys.join(", "))}`);
 
-      const allRelativeRegistries = addRelativeRegistries({
-        userSelects: selectedComponents,
-        uiRegistryIndex: registryComponentIndex,
-        libRegistryIndex,
-      });
+      const filteredItemKeys: string[] = [];
 
-      const allRegistryItems: RegistryUIMachineGenerated = [];
+      for (const itemKey of selectedItemKeys) {
+        const [registryId, ...rest] = itemKey.split(":");
+        const itemId = rest.join(":");
 
-      const { start, stop } = p.spinner();
-      start("Registry를 가져오고 있어요...");
+        if (!registryId || !itemId) {
+          p.log.error(
+            `${highlight(itemKey)}: 항목 이름이 잘못되었어요. ${highlight("ui:action-button")}과 같은 형식으로 입력해보세요.`,
+          );
 
-      for (const registry of allRelativeRegistries) {
-        const registryItem = await fetchRegistryItem(registry.name, baseUrl, registry.type);
-        allRegistryItems.push(registryItem);
-      }
+          process.exit(1);
+        }
 
-      stop();
+        const foundItem = publicRegistries
+          .find((r) => r.id === registryId)
+          ?.items.find((i) => i.id === itemId);
 
-      if (allRegistryItems.length) {
-        const filteredRegistryItems = allRegistryItems.filter(
-          (c) => !selectedComponents.includes(c.name),
-        );
-        p.log.message(
-          `추가로 설치될 레지스트리: ${highlight(
-            filteredRegistryItems.map((c) => c.name).join(", "),
-          )}`,
-        );
-      }
+        if (!foundItem) {
+          p.log.error(`${highlight(itemKey)}: 항목을 찾을 수 없어요.`);
 
-      // 선택된 컴포넌트.json 레지스트리 파일 기반으로 컴포넌트를 추가합니다.
-      const registryResult = [];
-      const installResult = {
-        installed: new Set(),
-        filtered: new Set(),
-      };
-      for (const component of allRegistryItems) {
-        if (component.deprecated && !options.includeDeprecated) {
+          process.exit(1);
+        }
+
+        if (foundItem.deprecated) {
           const confirm = await p.confirm({
-            message: `${highlight(component.name)}는 deprecated 되었어요. 추가할까요?`,
+            message: `${highlight(foundItem.id)}: deprecated 되었어요. 추가할까요?`,
             initialValue: false,
           });
 
           if (confirm === false || p.isCancel(confirm)) {
-            p.log.info(`${highlight(component.name)} 컴포넌트는 추가하지 않을게요.`);
+            p.log.info(`${highlight(foundItem.id)}: 추가하지 않을게요.`);
 
             continue;
           }
         }
 
-        for (const registry of component.registries) {
-          let targetPath = "";
-          switch (registry.type) {
-            case "ui":
-              targetPath = config.resolvedUIPaths;
-              break;
-            case "lib":
-              targetPath = config.resolvedLibPaths;
-              break;
-            default:
-              break;
-          }
+        filteredItemKeys.push(itemKey);
+      }
 
-          if (!fs.existsSync(targetPath)) {
-            await fs.mkdir(targetPath, { recursive: true });
-          }
+      const { registryItemsToAdd, npmDependenciesToAdd } = resolveDependencies({
+        selectedItemKeys: filteredItemKeys,
+        publicRegistries,
+      });
 
-          let filePath = path.resolve(targetPath, registry.name);
+      p.log.info(
+        `추가할 항목: ${highlight(registryItemsToAdd.map((r) => r.items.map((i) => `${r.registryId}:${i.id}`).join(", ")).join(", ") || "없음")}
 
-          const content = await transform({
-            filename: registry.name,
-            config,
-            raw: registry.content,
-          });
+설치할 의존성: ${highlight(Array.from(npmDependenciesToAdd).join(", ") || "없음")}`,
+      );
 
-          if (!config.tsx) {
-            filePath = filePath.replace(/\.tsx$/, ".jsx");
-            filePath = filePath.replace(/\.ts$/, ".js");
-          }
+      await writeRegistryItemSnippets({
+        registryItemsToAdd,
+        rootPath,
+        cwd,
+        baseUrl,
+        config,
+      });
 
-          await fs.writeFile(filePath, content);
-          const relativePath = path.relative(cwd, filePath);
+      try {
+        const { installed, filtered } = await installDependencies({
+          cwd,
+          deps: Array.from(npmDependenciesToAdd),
+        });
 
-          registryResult.push({
-            name: registry.name,
-            path: relativePath,
-          });
+        if (installed.size === 0) {
+          p.log.message("모든 의존성이 이미 설치되어 있어요.");
         }
 
-        // Install dependencies.
-        if (component.dependencies?.length) {
-          const result = await installDependencies({ cwd, deps: component.dependencies });
-          installResult.installed = new Set([...installResult.installed, ...result.installed]);
-          installResult.filtered = new Set([...installResult.filtered, ...result.filtered]);
-        }
+        if (installed.size) {
+          p.log.message(`의존성 설치 완료: ${highlight(Array.from(installed).join(", "))}`);
 
-        // Install devDependencies.
-        if (component.devDependencies?.length) {
-          const result = await installDependencies({
-            cwd,
-            deps: component.devDependencies,
-            dev: true,
-          });
-          installResult.installed = new Set([...installResult.installed, ...result.installed]);
-          installResult.filtered = new Set([...installResult.filtered, ...result.filtered]);
+          if (filtered.size) {
+            p.log.message(
+              `설치하지 않은 의존성 (이미 설치됨): ${highlight(Array.from(filtered).join(", "))}`,
+            );
+          }
         }
-
-        p.log.success(`${highlight(component.name)} 관련 파일 추가 완료`);
+        p.outro("완료했어요.");
+      } catch (error) {
+        p.log.error(`추가에 실패했어요. ${error}`);
+        p.outro(highlight("작업이 취소됐어요."));
+        process.exit(1);
       }
 
-      if (installResult.installed.size) {
-        p.log.message(
-          `설치된 의존성: ${highlight(Array.from(installResult.installed).join(", "))}`,
-        );
-      }
-      if (installResult.filtered.size) {
-        p.log.message(
-          `이미 설치된 의존성: ${highlight(Array.from(installResult.filtered).join(", "))}`,
-        );
-      }
-      if (registryResult.length) {
-        for (const registry of registryResult) {
-          p.log.message(`추가된 파일: ${highlight(registry.path)}`);
-        }
-      }
+      // add 성공 이벤트 추적
+      const duration = Date.now() - startTime;
+      const uniqueRegistries = new Set(registryItemsToAdd.map((r) => r.registryId));
+      const hasDeprecated = selectedItemKeys.some((itemKey) => {
+        const [registryId, ...rest] = itemKey.split(":");
+        const itemId = rest.join(":");
+        return publicRegistries.find((r) => r.id === registryId)?.items.find((i) => i.id === itemId)
+          ?.deprecated;
+      });
 
-      p.outro("컴포넌트 추가 완료.");
+      await analytics.track(options.cwd, {
+        event: "add",
+        properties: {
+          items_count: filteredItemKeys.length,
+          registries: Array.from(uniqueRegistries),
+          has_deprecated: hasDeprecated,
+          dependencies_count: npmDependenciesToAdd.size,
+          duration_ms: duration,
+        },
+      });
     });
 };

package/src/commands/init.ts

@@ -1,12 +1,14 @@
 import * as p from "@clack/prompts";
 import fs from "fs-extra";
 import path from "path";
-import color from "picocolors";
 import { z } from "zod";
+import { analytics } from "../utils/analytics";
+import { highlight } from "../utils/color";
 
-import type { RawConfig } from "@/src/utils/get-config";
+import type { Config } from "@/src/utils/get-config";
 
 import type { CAC } from "cac";
+import dedent from "dedent";
 
 const initOptionsSchema = z.object({
   cwd: z.string(),
@@ -21,15 +23,16 @@ 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 파일 생성"));
+      const startTime = Date.now();
+      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",
+        telemetry: true,
       };
 
       if (!isYesOption) {
@@ -52,6 +55,11 @@ export const initCommand = (cli: CAC) => {
                 defaultValue: "./seed-design",
                 placeholder: "./seed-design",
               }),
+            telemetry: () =>
+              p.confirm({
+                message: `개선을 위해 ${highlight("익명 사용 데이터")}를 수집할까요?`,
+                initialValue: true,
+              }),
           },
           {
             onCancel: () => {
@@ -73,15 +81,41 @@ 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.note(
+          dedent(`SEED Design CLI는 개선을 위해 익명 사용 데이터를 수집해요.
+
+      비활성화하려면:
+        • seed-design.json에서 ${highlight('"telemetry": false')}로 설정
+        • ${highlight("DISABLE_TELEMETRY=true")} 환경 변수 설정
+
+      자세한 내용: https://seed-design.com/react/getting-started/cli/configuration#telemetry`),
+          "Telemetry 안내",
         );
+
         p.outro("작업이 완료됐어요.");
       } catch (error) {
         p.log.error(`seed-design.json 파일 생성에 실패했어요. ${error}`);
-        p.outro(color.bgRed("작업이 취소됐어요."));
+        p.outro(highlight("작업이 취소됐어요."));
         process.exit(1);
       }
+
+      // init 성공 이벤트 추적
+      const duration = Date.now() - startTime;
+      await analytics.track(options.cwd, {
+        event: "init",
+        properties: {
+          tsx: config.tsx,
+          rsc: config.rsc,
+          telemetry: config.telemetry,
+          yes_option: isYesOption,
+          duration_ms: duration,
+        },
+      });
     });
 };

package/src/env.d.ts

@@ -0,0 +1,13 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      NODE_ENV: "dev" | "prod";
+      POSTHOG_API_KEY?: string;
+      POSTHOG_HOST?: string;
+      DISABLE_TELEMETRY?: "true" | "false";
+      SEED_DISABLE_TELEMETRY?: "true" | "false";
+    }
+  }
+}
+
+export {};

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>;