@seed-design/cli 0.0.0-alpha-20241113031935 → 0.0.0-alpha-20250210081704

package/src/test/add-relative-registries.test.ts

@@ -0,0 +1,182 @@
+import { describe, expect, test } from "vitest";
+import { addRelativeRegistries } from "../utils/add-relative-registries";
+import type { RegistryLib, RegistryUI } from "@/src/schema";
+
+const libConfig: RegistryLib = [
+  {
+    name: "a",
+    files: ["a.tsx"],
+  },
+];
+
+const uiConfig: RegistryUI = [
+  {
+    name: "a",
+    files: ["a.tsx"],
+  },
+  {
+    name: "b",
+    innerDependencies: ["ui:a"],
+    files: ["b.tsx"],
+  },
+  {
+    name: "c",
+    innerDependencies: ["ui:b"],
+    files: ["c.tsx"],
+  },
+  {
+    name: "d",
+    innerDependencies: ["ui:a", "ui:b"],
+    files: ["d.tsx"],
+  },
+  {
+    name: "e",
+    innerDependencies: ["ui:d"],
+    files: ["e.tsx"],
+  },
+  {
+    name: "f",
+    innerDependencies: ["lib:a"],
+    files: ["f.tsx"],
+  },
+];
+
+describe("addRelativeRegistries", () => {
+  test("4 deps test", () => {
+    const userSelects = ["e"];
+    const result = addRelativeRegistries({
+      userSelects,
+      uiRegistryIndex: uiConfig,
+      libRegistryIndex: [],
+    });
+    expect(result).toEqual(
+      expect.arrayContaining([
+        {
+          type: "ui",
+          name: "e",
+        },
+        {
+          type: "ui",
+          name: "d",
+        },
+        {
+          type: "ui",
+          name: "a",
+        },
+        {
+          type: "ui",
+          name: "b",
+        },
+      ]),
+    );
+  });
+
+  test("3 deps test", () => {
+    const userSelects = ["d"];
+    const result = addRelativeRegistries({
+      userSelects,
+      uiRegistryIndex: uiConfig,
+      libRegistryIndex: [],
+    });
+    expect(result).toEqual(
+      expect.arrayContaining([
+        {
+          type: "ui",
+          name: "d",
+        },
+        {
+          type: "ui",
+          name: "a",
+        },
+        {
+          type: "ui",
+          name: "b",
+        },
+      ]),
+    );
+  });
+
+  test("3 deps test", () => {
+    const userSelects = ["c"];
+    const result = addRelativeRegistries({
+      userSelects,
+      uiRegistryIndex: uiConfig,
+      libRegistryIndex: [],
+    });
+    expect(result).toEqual(
+      expect.arrayContaining([
+        {
+          type: "ui",
+          name: "c",
+        },
+        {
+          type: "ui",
+          name: "b",
+        },
+        {
+          type: "ui",
+          name: "a",
+        },
+      ]),
+    );
+  });
+
+  test("2 deps test", () => {
+    const userSelects = ["b"];
+    const result = addRelativeRegistries({
+      userSelects,
+      uiRegistryIndex: uiConfig,
+      libRegistryIndex: [],
+    });
+    expect(result).toEqual(
+      expect.arrayContaining([
+        {
+          type: "ui",
+          name: "b",
+        },
+        {
+          type: "ui",
+          name: "a",
+        },
+      ]),
+    );
+  });
+
+  test("1 deps test", () => {
+    const userSelects = ["a"];
+    const result = addRelativeRegistries({
+      userSelects,
+      uiRegistryIndex: uiConfig,
+      libRegistryIndex: [],
+    });
+    expect(result).toEqual(
+      expect.arrayContaining([
+        {
+          type: "ui",
+          name: "a",
+        },
+      ]),
+    );
+  });
+
+  test("lib deps test", () => {
+    const userSelects = ["f"];
+    const result = addRelativeRegistries({
+      userSelects,
+      uiRegistryIndex: uiConfig,
+      libRegistryIndex: libConfig,
+    });
+    expect(result).toEqual(
+      expect.arrayContaining([
+        {
+          type: "ui",
+          name: "f",
+        },
+        {
+          type: "lib",
+          name: "a",
+        },
+      ]),
+    );
+  });
+});

package/src/utils/add-relative-registries.ts

@@ -0,0 +1,43 @@
+import type { RegistryLibMachineGenerated, RegistryUIMachineGenerated } from "@/src/schema";
+
+interface AddRelativeComponentsProps {
+  userSelects: string[];
+  uiRegistryIndex: RegistryUIMachineGenerated;
+  libRegistryIndex: RegistryLibMachineGenerated;
+}
+
+export function addRelativeRegistries({
+  userSelects,
+  uiRegistryIndex,
+  libRegistryIndex,
+}: AddRelativeComponentsProps) {
+  const selectedComponents: { type: "ui" | "lib"; name: string }[] = [];
+
+  function addSeedDependencies({
+    registryName,
+    type,
+  }: { registryName: string; type: "ui" | "lib" }) {
+    if (selectedComponents.some((c) => c.name === registryName && c.type === type)) return;
+
+    selectedComponents.push({ type, name: registryName });
+
+    const registry =
+      type === "ui"
+        ? uiRegistryIndex.find((c) => c.name === registryName)
+        : libRegistryIndex.find((c) => c.name === registryName);
+    if (!registry) return;
+
+    if (registry.innerDependencies) {
+      for (const dep of registry.innerDependencies) {
+        const [depType, depName] = dep.split(":");
+        addSeedDependencies({ registryName: depName, type: depType as "ui" | "lib" });
+      }
+    }
+  }
+
+  for (const registryName of userSelects) {
+    addSeedDependencies({ registryName, type: "ui" });
+  }
+
+  return Array.from(selectedComponents);
+}

package/src/utils/color.ts

@@ -0,0 +1,3 @@
+import color from "picocolors";
+
+export const highlight = (text: string) => color.cyan(text);

package/src/utils/get-config.ts

@@ -1,8 +1,11 @@
+import * as p from "@clack/prompts";
 import { cosmiconfig } from "cosmiconfig";
+import { execa } from "execa";
+import fs from "fs";
 import path from "path";
-import * as p from "@clack/prompts";
 import { z } from "zod";
-import color from "picocolors";
+import { highlight } from "./color";
+import { getPackageManager } from "./get-package-manager";
 
 const MODULE_NAME = "seed-design";
 
@@ -24,8 +27,7 @@ export type RawConfig = z.infer<typeof rawConfigSchema>;
 
 export const configSchema = rawConfigSchema.extend({
   resolvedUIPaths: z.string(),
-  resolbedHookPaths: z.string(),
-  resolvedUtilPaths: z.string(),
+  resolvedLibPaths: z.string(),
 });
 
 export async function getConfig(cwd: string) {
@@ -43,26 +45,43 @@ export type Config = z.infer<typeof configSchema>;
 export async function resolveConfigPaths(cwd: string, config: RawConfig) {
   const seedComponentRootPath = path.resolve(cwd, config.path);
 
+  if (!fs.existsSync(seedComponentRootPath)) {
+    fs.mkdirSync(seedComponentRootPath, { recursive: true });
+  }
+
+  const resolvedUIPaths = path.join(seedComponentRootPath, "ui");
+  const resolvedLibPaths = path.join(seedComponentRootPath, "lib");
+
+  if (!fs.existsSync(resolvedUIPaths)) {
+    fs.mkdirSync(resolvedUIPaths, { recursive: true });
+  }
+
+  if (!fs.existsSync(resolvedLibPaths)) {
+    fs.mkdirSync(resolvedLibPaths, { recursive: true });
+  }
+
   return configSchema.parse({
     ...config,
-    resolvedUIPaths: path.join(seedComponentRootPath, "ui"),
-    resolbedHookPaths: path.join(seedComponentRootPath, "hook"),
-    resolvedUtilPaths: path.join(seedComponentRootPath, "util"),
+    resolvedUIPaths,
+    resolvedLibPaths,
   });
 }
 
 export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
   try {
     const configResult = await explorer.search(cwd);
+    return rawConfigSchema.parse(configResult.config);
+  } catch {
+    p.log.error("프로젝트 루트 경로에 `seed-design.json` 파일이 없어요.");
 
-    if (!configResult) {
-      p.log.message(color.red(`${cwd} 경로에 seed-design.json 파일이 없습니다.`));
-      return null;
+    const isConfirm = await p.confirm({ message: "seed-design.json 파일을 생성하시겠어요?" });
+    if (isConfirm === true) {
+      const packageManager = await getPackageManager(cwd);
+      await execa(packageManager, ["seed-design", "init", "--default"], { cwd });
+      p.log.message("seed-design.json 파일이 생성됐어요.");
+    } else {
+      p.outro(highlight("작업이 취소됐어요."));
+      process.exit(1);
     }
-
-    return rawConfigSchema.parse(configResult.config);
-  } catch (error) {
-    console.log(error);
-    throw new Error(`${cwd} 경로에 seed-design.json 파일을 읽을 수 없습니다.`);
   }
 }

package/src/utils/get-metadata.ts

@@ -1,33 +1,75 @@
+import * as p from "@clack/prompts";
 import { registryUISchema, type RegistryUIMachineGenerated } from "@/src/schema";
 
-const BASE_URL =
-  process.env.NODE_ENV === "prod" ? "https://v3.seed-design.io" : "http://localhost:3000";
-
-export async function fetchRegistryUIItem(
+export async function fetchRegistryItems(
   fileNames?: string[],
+  baseUrl?: string,
+  type: "ui" | "lib" = "ui",
 ): Promise<RegistryUIMachineGenerated> {
-  try {
-    const results = await Promise.all(
-      fileNames.map(async (fileName) => {
-        const response = await fetch(`${BASE_URL}/__registry__/ui/${fileName}.json`);
+  const results = await Promise.all(
+    fileNames.map(async (fileName) => {
+      try {
+        const response = await fetch(`${baseUrl}/__registry__/${type}/${fileName}.json`);
         return await response.json();
-      }),
-    );
+      } catch (error) {
+        const index = await fetch(`${baseUrl}/__registry__/${type}/index.json`).then((res) =>
+          res.json(),
+        );
+        const parsedIndex = registryUISchema.parse(index);
+        const availableComponents = parsedIndex.map((component) => component.name);
 
-    return results;
-  } catch (error) {
-    console.log(error);
-    throw new Error(`Failed to fetch registry from ${BASE_URL}.`);
-  }
+        p.log.error(`${type}:${fileName} 컴포넌트는 레지스트리에 존재하지 않아요.`);
+        p.log.info(`사용 가능한 컴포넌트: ${availableComponents.join(", ")}`);
+        p.log.info(
+          JSON.stringify(
+            {
+              baseUrl,
+              error: error.toString(),
+            },
+            null,
+            2,
+          ),
+        );
+        process.exit(1);
+      }
+    }),
+  );
+
+  return results;
 }
 
-export async function getRegistryUIIndex() {
+export async function fetchRegistryItem(
+  fileName: string,
+  baseUrl: string,
+  type: "ui" | "lib" = "ui",
+) {
+  const [result] = await fetchRegistryItems([fileName], baseUrl, type);
+  return result;
+}
+
+export async function getRegistryUIIndex(baseUrl?: string) {
   try {
-    const [result] = await fetchRegistryUIItem(["index"]);
+    const [result] = await fetchRegistryItems(["index"], baseUrl, "ui");
 
     return registryUISchema.parse(result);
   } catch (error) {
-    console.log(error);
-    throw new Error(`Failed to fetch components from ${BASE_URL}.`);
+    p.log.error("레지스트리 인덱스를 가져오는 데 실패했어요.");
+    p.log.info(
+      JSON.stringify(
+        {
+          baseUrl,
+          error: error.toString(),
+        },
+        null,
+        2,
+      ),
+    );
+    process.exit(1);
   }
 }
+
+export async function getRegistryLibIndex(baseUrl?: string) {
+  const [result] = await fetchRegistryItems(["index"], baseUrl, "lib");
+
+  return registryUISchema.parse(result);
+}

package/src/utils/get-package-info.ts

@@ -13,5 +13,6 @@ function getPackagePath() {
 }
 
 export function getPackageInfo() {
-  return fs.readJSONSync(getPackagePath()) as PackageJson;
+  const packageJsonPath = getPackagePath();
+  return fs.readJSONSync(packageJsonPath) as PackageJson;
 }

package/src/utils/get-package-manager.ts

@@ -2,12 +2,12 @@ import { detect } from "@antfu/ni";
 
 export async function getPackageManager(
   targetDir: string,
-): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
+): Promise<"yarn" | "pnpm" | "bun" | "npm" | "deno"> {
   const packageManager = await detect({ programmatic: true, cwd: targetDir });
 
   if (packageManager === "yarn@berry") return "yarn";
   if (packageManager === "pnpm@6") return "pnpm";
   if (packageManager === "bun") return "bun";
-
+  if (packageManager === "deno") return "deno";
   return packageManager ?? "npm";
 }

package/src/utils/install.ts

@@ -0,0 +1,53 @@
+import * as p from "@clack/prompts";
+import { execa } from "execa";
+import color from "picocolors";
+import { getPackageManager } from "./get-package-manager";
+import { getPackageInfo } from "./get-package-info";
+
+interface InstallDependenciesProps {
+  cwd: string;
+  deps: string[];
+  dev?: boolean;
+}
+
+export async function installDependencies({ cwd, deps, dev = false }: InstallDependenciesProps) {
+  const { start, stop } = p.spinner();
+  const packageManager = await getPackageManager(cwd);
+  const packageInfo = getPackageInfo();
+
+  // 이미 설치된 의존성 필터링
+  const existingDeps = {
+    ...packageInfo.dependencies,
+    ...packageInfo.devDependencies,
+  };
+
+  const depsToInstall = deps.filter((dep) => !existingDeps[dep]);
+  const filteredDeps = deps.filter((dep) => existingDeps[dep]);
+
+  if (!depsToInstall.length) {
+    return {
+      installed: new Set(),
+      filtered: new Set(),
+    };
+  }
+
+  start(color.gray("의존성 설치중..."));
+
+  const isDev = dev ? "-D" : null;
+  const addCommand = packageManager === "npm" ? "install" : "add";
+  const command = [addCommand, isDev, ...depsToInstall].filter(Boolean);
+
+  try {
+    await execa(packageManager, command, { cwd });
+  } catch (error) {
+    console.error(`의존성 설치 실패: ${error}`);
+    process.exit(1);
+  }
+
+  stop("의존성 설치 완료.");
+
+  return {
+    installed: depsToInstall,
+    filtered: filteredDeps,
+  };
+}