@seed-design/cli 0.0.0-alpha-20241014082441 → 0.0.0-alpha-20241014090450

package/bin/index.mjs

@@ -1,3 +1,503 @@
 #!/usr/bin/env node
-import{cosmiconfig as Z}from"cosmiconfig";import T from"path";import{z as u}from"zod";var $="seed-design",ee=Z($,{searchPlaces:[`${$}.json`]}),k=u.object({$schema:u.string().optional(),rsc:u.coerce.boolean().default(!1),tsx:u.coerce.boolean().default(!0),css:u.coerce.boolean().default(!0),path:u.string()}).strict(),te=k.extend({resolvedUIPaths:u.string()});async function O(e){let t=await ne(e);return t?await oe(e,t):null}async function oe(e,t){let n=T.resolve(e,t.path);return te.parse({...t,resolvedUIPaths:T.join(n,"ui")})}async function ne(e){try{let t=await ee.search(e);return t?k.parse(t.config):null}catch(t){throw console.log(t),new Error(`Invalid configuration found in ${e}/seed-design.json.`)}}import{z as s}from"zod";var A=s.object({name:s.string(),description:s.string().optional(),dependencies:s.array(s.string()).optional(),devDependencies:s.array(s.string()).optional(),innerDependencies:s.array(s.string()).optional(),snippets:s.array(s.string()),type:s.enum(["component"])}),E=s.array(A),re=A.omit({snippets:!0}),se=re.extend({registries:s.array(s.object({name:s.string(),content:s.string()}))}),De=s.array(se);var I="https://component.seed-design.io";async function M(e){try{return await Promise.all(e.map(async n=>await(await fetch(`${I}/registry/component/${n}.json`)).json()))}catch(t){throw console.log(t),new Error(`Failed to fetch registry from ${I}.`)}}async function D(){try{let[e]=await M(["index"]);return E.parse(e)}catch(e){throw console.log(e),new Error(`Failed to fetch components from ${I}.`)}}import{detect as ae}from"@antfu/ni";async function F(e){let t=await ae({programmatic:!0,cwd:e});return t==="yarn@berry"?"yarn":t==="pnpm@6"?"pnpm":t==="bun"?"bun":t??"npm"}import{promises as le}from"fs";import{tmpdir as fe}from"os";import J from"path";import{transformFromAstSync as ie}from"@babel/core";import ce from"@babel/plugin-transform-typescript";import*as v from"recast";import{parse as pe}from"@babel/parser";var me={sourceType:"module",allowImportExportEverywhere:!0,allowReturnOutsideFunction:!0,startLine:1,tokens:!0,plugins:["asyncGenerators","bigInt","classPrivateMethods","classPrivateProperties","classProperties","classStaticBlock","decimal","decorators-legacy","doExpressions","dynamicImport","exportDefaultFrom","exportNamespaceFrom","functionBind","functionSent","importAssertions","importMeta","nullishCoalescingOperator","numericSeparator","objectRestSpread","optionalCatchBinding","optionalChaining",["pipelineOperator",{proposal:"minimal"}],["recordAndTuple",{syntaxType:"hash"}],"throwExpressions","topLevelAwait","v8intrinsic","typescript","jsx"]},z=async({sourceFile:e,config:t})=>{let n=e.getFullText();if(t.tsx)return n;let r=v.parse(n,{parser:{parse:c=>pe(c,me)}}),o=ie(r,n,{cloneInputAst:!1,code:!1,ast:!0,plugins:[ce],configFile:!1});if(!o||!o.ast)throw new Error("Failed to transform JSX");return v.print(o.ast).code};import{SyntaxKind as de}from"ts-morph";var N=async({sourceFile:e,config:t})=>{if(t.rsc)return e;let n=e.getFirstChildByKind(de.ExpressionStatement);return n?.getText()==='"use client";'&&n.remove(),e};var W=async({sourceFile:e,config:t})=>{if(t.css)return e;let r=e.getImportDeclarations().filter(o=>o.getModuleSpecifierValue().endsWith(".css"));for(let o of r)o.remove();return e};import{Project as ge,ScriptKind as ue}from"ts-morph";var he=[N,W],ye=new ge({compilerOptions:{}});async function xe(e){let t=await le.mkdtemp(J.join(fe(),"seed-deisgn-"));return J.join(t,e)}async function V(e){let t=await xe(e.filename),n=ye.createSourceFile(t,e.raw,{scriptKind:ue.TSX});for(let r of he)r({sourceFile:n,...e});return await z({sourceFile:n,...e})}import*as a from"@clack/prompts";import{execa as B}from"execa";import P from"fs-extra";import K from"path";import j from"picocolors";import{z as w}from"zod";function U(e,t){let n=new Set;function r(o){if(n.has(o))return;n.add(o);let c=t.find(d=>d.name===o);if(c&&c.innerDependencies)for(let d of c.innerDependencies)r(d)}for(let o of e)r(o);return Array.from(n)}var we=w.object({components:w.array(w.string()).optional(),cwd:w.string(),all:w.boolean()}),L=e=>{e.command("add [...components]","add component").option("-a, --all","Add all components",{default:!1}).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",{default:process.cwd()}).example("seed-design add box-button").example("seed-design add alert-dialog").action(async(t,n)=>{let r=we.parse({components:t,...n}),o=i=>j.cyan(i),c=r.cwd;P.existsSync(c)||(a.log.error(`The path ${c} does not exist. Please try again.`),process.exit(1));let d=await D(),f=r.all?d.map(i=>i.name):r.components;if(!r.components?.length&&!r.all){let i=await a.multiselect({message:"Select all components to add",options:d.map(l=>({label:l.name,value:l.name,hint:l.description}))});a.isCancel(i)&&(a.log.error("Aborted."),process.exit(0)),f=i}f?.length||(a.log.error("No components found."),process.exit(0));let y=U(f,d),S=y.filter(i=>!f.includes(i)),x=await O(c),H=await M(y);a.log.message(`Selection: ${o(f.join(", "))}`),S.length&&a.log.message(`Inner Dependencies: ${o(S.join(", "))} will be also added.`);for(let i of H){for(let m of i.registries){let g=x.resolvedUIPaths;P.existsSync(g)||await P.mkdir(g,{recursive:!0});let h=K.resolve(g,m.name),Q=await V({filename:m.name,config:x,raw:m.content});x.tsx||(h=h.replace(/\.tsx$/,".jsx"),h=h.replace(/\.ts$/,".js")),await P.writeFile(h,Q);let Y=K.relative(c,h);a.log.info(`Added ${o(m.name)} to ${o(Y)}`)}let l=await F(c),{start:b,stop:R}=a.spinner();if(i.dependencies?.length){b(j.gray("Installing dependencies"));let m=await B(l,[l==="npm"?"install":"add",...i.dependencies],{cwd:c});if(m.failed)console.error(m.all),process.exit(1);else{for(let g of i.dependencies)a.log.info(`- ${g}`);R("Dependencies installed.")}}if(i.devDependencies?.length){b(j.gray("Installing devDependencies"));let m=await B(l,[l==="npm"?"install":"add","-D",...i.devDependencies],{cwd:c});if(m.failed)console.error(m.all),process.exit(1);else{for(let g of i.devDependencies)a.log.info(`- ${g}`);R("Dependencies installed.")}}}a.outro("Components added.")})};import Ce from"findup-sync";import Se from"fs-extra";var ve="package.json";function Pe(){let e=Ce(ve);if(!e)throw new Error("No package.json file found in the project.");return e}function _(){return Se.readJSONSync(Pe())}import{cac as be}from"cac";import*as p from"@clack/prompts";import Ie from"fs-extra";import G from"path";import Me from"picocolors";import{z as X}from"zod";var je=X.object({cwd:X.string()}),q=e=>{e.command("init","initialize seed-design.json").option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",{default:process.cwd()}).action(async t=>{let n=je.parse({...t}),r=x=>Me.cyan(x),o=await p.group({tsx:()=>p.confirm({message:`Would you like to use ${r("TypeScript")} (recommended)?`,initialValue:!0}),rsc:()=>p.confirm({message:`Are you using ${r("React Server Components")}?`,initialValue:!1}),css:()=>p.confirm({message:`Would you like to use ${r("CSS Modules")}? (If true, CSS import will be added in components)`,initialValue:!0}),path:()=>p.text({message:`Enter the path to your ${r("seed-design directory")}`,initialValue:"./seed-design",defaultValue:"./seed-design",placeholder:"./seed-design"})},{onCancel:()=>{p.cancel("Operation cancelled."),process.exit(0)}}),c={rsc:o.rsc,tsx:o.tsx,css:o.css,path:o.path},{start:d,stop:f}=p.spinner();d("Writing seed-design.json...");let y=G.resolve(n.cwd,"seed-design.json");await Ie.writeFile(y,`${JSON.stringify(c,null,2)}
-`,"utf-8");let S=G.relative(process.cwd(),y);f(`seed-design.json written to ${r(S)}`)})};var Re="seed-design",C=be(Re);async function Te(){let e=_();L(C),q(C),C.version(e.version||"1.0.0","-v, --version"),C.help(),C.parse()}Te();
+
+// src/utils/get-config.ts
+import { cosmiconfig } from "cosmiconfig";
+import path from "path";
+import { z } from "zod";
+var MODULE_NAME = "seed-design";
+var explorer = cosmiconfig(MODULE_NAME, {
+  searchPlaces: [`${MODULE_NAME}.json`]
+});
+var rawConfigSchema = z.object({
+  $schema: z.string().optional(),
+  rsc: z.coerce.boolean().default(false),
+  tsx: z.coerce.boolean().default(true),
+  css: z.coerce.boolean().default(true),
+  path: z.string()
+}).strict();
+var configSchema = rawConfigSchema.extend({
+  resolvedUIPaths: z.string()
+});
+async function getConfig(cwd) {
+  const config = await getRawConfig(cwd);
+  if (!config) {
+    return null;
+  }
+  return await resolveConfigPaths(cwd, config);
+}
+async function resolveConfigPaths(cwd, config) {
+  const seedComponentRootPath = path.resolve(cwd, config.path);
+  return configSchema.parse({
+    ...config,
+    resolvedUIPaths: path.join(seedComponentRootPath, "ui")
+  });
+}
+async function getRawConfig(cwd) {
+  try {
+    const configResult = await explorer.search(cwd);
+    if (!configResult) {
+      return null;
+    }
+    return rawConfigSchema.parse(configResult.config);
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Invalid configuration found in ${cwd}/seed-design.json.`);
+  }
+}
+
+// src/schema.ts
+import { z as z2 } from "zod";
+var registryComponentItemSchema = z2.object({
+  /**
+   * @description 컴포넌트 이름
+   * @example chip-tabs, alert-dialog
+   */
+  name: z2.string(),
+  description: z2.string().optional(),
+  /**
+   * @description 컴포넌트 의존성
+   * @example @seed-design/react-tabs
+   */
+  dependencies: z2.array(z2.string()).optional(),
+  /**
+   * @description 컴포넌트 개발 의존성
+   */
+  devDependencies: z2.array(z2.string()).optional(),
+  /**
+   * @description 컴포넌트 내부의 Seed Design 컴포넌트 의존성
+   * @example action-button
+   */
+  innerDependencies: z2.array(z2.string()).optional(),
+  /**
+   * @description 컴포넌트 코드 스니펫 경로, 여러 파일이 될 수 있어서 배열로 정의
+   * @example component/alert-dialog.tsx
+   */
+  files: z2.array(z2.string())
+});
+var registryComponentSchema = z2.array(registryComponentItemSchema);
+var omittedRegistryComponentSchema = registryComponentItemSchema.omit({ files: true });
+var registryComponentItemMachineGeneratedSchema = omittedRegistryComponentSchema.extend({
+  registries: z2.array(
+    z2.object({
+      name: z2.string(),
+      content: z2.string()
+    })
+  )
+});
+var registryComponentMachineGeneratedSchema = z2.array(
+  registryComponentItemMachineGeneratedSchema
+);
+
+// src/utils/get-metadata.ts
+var BASE_URL = false ? "https://component.seed-design.io" : "http://localhost:3000";
+async function fetchRegistryComponentItem(fileNames) {
+  try {
+    const results = await Promise.all(
+      fileNames.map(async (fileName) => {
+        const response = await fetch(`${BASE_URL}/__registry__/component/${fileName}.json`);
+        return await response.json();
+      })
+    );
+    return results;
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Failed to fetch registry from ${BASE_URL}.`);
+  }
+}
+async function getRegistryComponentIndex() {
+  try {
+    const [result] = await fetchRegistryComponentItem(["index"]);
+    return registryComponentSchema.parse(result);
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Failed to fetch components from ${BASE_URL}.`);
+  }
+}
+
+// src/utils/get-package-manager.ts
+import { detect } from "@antfu/ni";
+async function getPackageManager(targetDir) {
+  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";
+  return packageManager ?? "npm";
+}
+
+// src/utils/transformers/index.ts
+import { promises as fs } from "fs";
+import { tmpdir } from "os";
+import path2 from "path";
+
+// src/utils/transformers/transform-jsx.ts
+import { transformFromAstSync } from "@babel/core";
+import transformTypescript from "@babel/plugin-transform-typescript";
+import * as recast from "recast";
+import { parse as parse2 } from "@babel/parser";
+var PARSE_OPTIONS = {
+  sourceType: "module",
+  allowImportExportEverywhere: true,
+  allowReturnOutsideFunction: true,
+  startLine: 1,
+  tokens: true,
+  plugins: [
+    "asyncGenerators",
+    "bigInt",
+    "classPrivateMethods",
+    "classPrivateProperties",
+    "classProperties",
+    "classStaticBlock",
+    "decimal",
+    "decorators-legacy",
+    "doExpressions",
+    "dynamicImport",
+    "exportDefaultFrom",
+    "exportNamespaceFrom",
+    "functionBind",
+    "functionSent",
+    "importAssertions",
+    "importMeta",
+    "nullishCoalescingOperator",
+    "numericSeparator",
+    "objectRestSpread",
+    "optionalCatchBinding",
+    "optionalChaining",
+    [
+      "pipelineOperator",
+      {
+        proposal: "minimal"
+      }
+    ],
+    [
+      "recordAndTuple",
+      {
+        syntaxType: "hash"
+      }
+    ],
+    "throwExpressions",
+    "topLevelAwait",
+    "v8intrinsic",
+    "typescript",
+    "jsx"
+  ]
+};
+var transformJsx = async ({ sourceFile, config }) => {
+  const output = sourceFile.getFullText();
+  if (config.tsx) {
+    return output;
+  }
+  const ast = recast.parse(output, {
+    parser: {
+      parse: (code) => {
+        return parse2(code, PARSE_OPTIONS);
+      }
+    }
+  });
+  const result = transformFromAstSync(ast, output, {
+    cloneInputAst: false,
+    code: false,
+    ast: true,
+    plugins: [transformTypescript],
+    configFile: false
+  });
+  if (!result || !result.ast) {
+    throw new Error("Failed to transform JSX");
+  }
+  return recast.print(result.ast).code;
+};
+
+// src/utils/transformers/transform-rsc.ts
+import { SyntaxKind } from "ts-morph";
+var transformRsc = async ({ sourceFile, config }) => {
+  if (config.rsc) {
+    return sourceFile;
+  }
+  const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement);
+  if (first?.getText() === `"use client";`) {
+    first.remove();
+  }
+  return sourceFile;
+};
+
+// src/utils/transformers/transform-css.ts
+var transformCSS = async ({ sourceFile, config }) => {
+  if (config.css) {
+    return sourceFile;
+  }
+  const imports = sourceFile.getImportDeclarations();
+  const cssImports = imports.filter((i) => i.getModuleSpecifierValue().endsWith(".css"));
+  for (const cssImport of cssImports) {
+    cssImport.remove();
+  }
+  return sourceFile;
+};
+
+// src/utils/transformers/index.ts
+import { Project, ScriptKind } from "ts-morph";
+var transformers = [transformRsc, transformCSS];
+var project = new Project({
+  compilerOptions: {}
+});
+async function createTempSourceFile(filename) {
+  const dir = await fs.mkdtemp(path2.join(tmpdir(), "seed-deisgn-"));
+  return path2.join(dir, filename);
+}
+async function transform(opts) {
+  const tempFile = await createTempSourceFile(opts.filename);
+  const sourceFile = project.createSourceFile(tempFile, opts.raw, {
+    scriptKind: ScriptKind.TSX
+  });
+  for (const transformer of transformers) {
+    transformer({ sourceFile, ...opts });
+  }
+  return await transformJsx({
+    sourceFile,
+    ...opts
+  });
+}
+
+// src/commands/add.ts
+import * as p from "@clack/prompts";
+import { execa } from "execa";
+import fs2 from "fs-extra";
+import path3 from "path";
+import color from "picocolors";
+import { z as z3 } from "zod";
+
+// src/utils/add-relative-components.ts
+function addRelativeComponents(userSelects, registryIndex) {
+  const selectedComponents = /* @__PURE__ */ new Set();
+  function addSeedDependencies(componentName) {
+    if (selectedComponents.has(componentName))
+      return;
+    selectedComponents.add(componentName);
+    const component = registryIndex.find((c) => c.name === componentName);
+    if (!component)
+      return;
+    if (component.innerDependencies) {
+      for (const dep of component.innerDependencies) {
+        addSeedDependencies(dep);
+      }
+    }
+  }
+  for (const componentName of userSelects) {
+    addSeedDependencies(componentName);
+  }
+  return Array.from(selectedComponents);
+}
+
+// src/commands/add.ts
+var addOptionsSchema = z3.object({
+  components: z3.array(z3.string()).optional(),
+  cwd: z3.string(),
+  all: z3.boolean()
+  // yes: z.boolean(),
+  // overwrite: z.boolean(),
+  // path: z.string().optional(),
+});
+var addCommand = (cli) => {
+  cli.command("add [...components]", "add component").option("-a, --all", "Add all components", {
+    default: false
+  }).option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", {
+    default: process.cwd()
+  }).example("seed-design add box-button").example("seed-design add alert-dialog").action(async (components, opts) => {
+    const options = addOptionsSchema.parse({
+      components,
+      ...opts
+    });
+    const highlight = (text2) => color.cyan(text2);
+    const cwd = options.cwd;
+    if (!fs2.existsSync(cwd)) {
+      p.log.error(`The path ${cwd} does not exist. Please try again.`);
+      process.exit(1);
+    }
+    const registryComponentIndex = await getRegistryComponentIndex();
+    let selectedComponents = options.all ? registryComponentIndex.map((registry) => registry.name) : options.components;
+    if (!options.components?.length && !options.all) {
+      const selects = await p.multiselect({
+        message: "Select all components to add",
+        options: registryComponentIndex.map((metadata) => {
+          return {
+            label: metadata.name,
+            value: metadata.name,
+            hint: metadata.description
+          };
+        })
+      });
+      if (p.isCancel(selects)) {
+        p.log.error("Aborted.");
+        process.exit(0);
+      }
+      selectedComponents = selects;
+    }
+    if (!selectedComponents?.length) {
+      p.log.error("No components found.");
+      process.exit(0);
+    }
+    const allComponents = addRelativeComponents(selectedComponents, registryComponentIndex);
+    const addedComponents = allComponents.filter((c) => !selectedComponents.includes(c));
+    const config = await getConfig(cwd);
+    const registryComponentItems = await fetchRegistryComponentItem(allComponents);
+    p.log.message(`Selection: ${highlight(selectedComponents.join(", "))}`);
+    if (addedComponents.length) {
+      p.log.message(
+        `Inner Dependencies: ${highlight(addedComponents.join(", "))} will be also added.`
+      );
+    }
+    for (const component of registryComponentItems) {
+      for (const registry of component.registries) {
+        const UIFolderPath = config.resolvedUIPaths;
+        if (!fs2.existsSync(UIFolderPath)) {
+          await fs2.mkdir(UIFolderPath, { recursive: true });
+        }
+        let filePath = path3.resolve(UIFolderPath, registry.name);
+        const content = await transform({
+          filename: registry.name,
+          config,
+          raw: registry.content
+        });
+        if (!config.tsx) {
+          filePath = filePath.replace(/\.tsx$/, ".jsx");
+          filePath = filePath.replace(/\.ts$/, ".js");
+        }
+        await fs2.writeFile(filePath, content);
+        const relativePath = path3.relative(cwd, filePath);
+        p.log.info(`Added ${highlight(registry.name)} to ${highlight(relativePath)}`);
+      }
+      const packageManager = await getPackageManager(cwd);
+      const { start, stop } = p.spinner();
+      if (component.dependencies?.length) {
+        start(color.gray("Installing dependencies"));
+        const result = await execa(
+          packageManager,
+          [packageManager === "npm" ? "install" : "add", ...component.dependencies],
+          {
+            cwd
+          }
+        );
+        if (result.failed) {
+          console.error(result.all);
+          process.exit(1);
+        } else {
+          for (const deps of component.dependencies) {
+            p.log.info(`- ${deps}`);
+          }
+          stop("Dependencies installed.");
+        }
+      }
+      if (component.devDependencies?.length) {
+        start(color.gray("Installing devDependencies"));
+        const result = await execa(
+          packageManager,
+          [packageManager === "npm" ? "install" : "add", "-D", ...component.devDependencies],
+          {
+            cwd
+          }
+        );
+        if (result.failed) {
+          console.error(result.all);
+          process.exit(1);
+        } else {
+          for (const deps of component.devDependencies) {
+            p.log.info(`- ${deps}`);
+          }
+          stop("Dependencies installed.");
+        }
+      }
+    }
+    p.outro("Components added.");
+  });
+};
+
+// src/utils/get-package-info.ts
+import findup from "findup-sync";
+import fs3 from "fs-extra";
+var PACKAGE_JSON = "package.json";
+function getPackagePath() {
+  const packageJsonPath = findup(PACKAGE_JSON);
+  if (!packageJsonPath) {
+    throw new Error("No package.json file found in the project.");
+  }
+  return packageJsonPath;
+}
+function getPackageInfo() {
+  return fs3.readJSONSync(getPackagePath());
+}
+
+// src/index.ts
+import { cac } from "cac";
+
+// src/commands/init.ts
+import * as p2 from "@clack/prompts";
+import fs4 from "fs-extra";
+import path4 from "path";
+import color2 from "picocolors";
+import { z as z4 } from "zod";
+var initOptionsSchema = z4.object({
+  cwd: z4.string()
+});
+var initCommand = (cli) => {
+  cli.command("init", "initialize seed-design.json").option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", {
+    default: process.cwd()
+  }).action(async (opts) => {
+    const options = initOptionsSchema.parse({ ...opts });
+    const highlight = (text2) => color2.cyan(text2);
+    const group2 = await p2.group(
+      {
+        tsx: () => p2.confirm({
+          message: `Would you like to use ${highlight("TypeScript")} (recommended)?`,
+          initialValue: true
+        }),
+        rsc: () => p2.confirm({
+          message: `Are you using ${highlight("React Server Components")}?`,
+          initialValue: false
+        }),
+        css: () => p2.confirm({
+          message: `Would you like to use ${highlight("CSS Modules")}? (If true, CSS import will be added in components)`,
+          initialValue: true
+        }),
+        path: () => p2.text({
+          message: `Enter the path to your ${highlight("seed-design directory")}`,
+          initialValue: "./seed-design",
+          defaultValue: "./seed-design",
+          placeholder: "./seed-design"
+        })
+      },
+      {
+        onCancel: () => {
+          p2.cancel("Operation cancelled.");
+          process.exit(0);
+        }
+      }
+    );
+    const config = {
+      rsc: group2.rsc,
+      tsx: group2.tsx,
+      css: group2.css,
+      path: group2.path
+    };
+    const { start, stop } = p2.spinner();
+    start("Writing seed-design.json...");
+    const targetPath = path4.resolve(options.cwd, "seed-design.json");
+    await fs4.writeFile(targetPath, `${JSON.stringify(config, null, 2)}
+`, "utf-8");
+    const relativePath = path4.relative(process.cwd(), targetPath);
+    stop(`seed-design.json written to ${highlight(relativePath)}`);
+  });
+};
+
+// src/index.ts
+var NAME = "seed-design";
+var CLI = cac(NAME);
+async function main() {
+  const packageInfo = getPackageInfo();
+  addCommand(CLI);
+  initCommand(CLI);
+  CLI.version(packageInfo.version || "1.0.0", "-v, --version");
+  CLI.help();
+  CLI.parse();
+}
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/cli",
-  "version": "0.0.0-alpha-20241014082441",
+  "version": "0.0.0-alpha-20241014090450",
   "type": "module",
   "repository": {
     "type": "git",

package/src/commands/add.ts

@@ -1,5 +1,5 @@
 import { getConfig } from "@/src/utils/get-config";
-import { fetchComponentMetadatas, getMetadataIndex } from "@/src/utils/get-metadata";
+import { fetchRegistryComponentItem, getRegistryComponentIndex } from "@/src/utils/get-metadata";
 import { getPackageManager } from "@/src/utils/get-package-manager";
 import { transform } from "@/src/utils/transformers";
 import * as p from "@clack/prompts";
@@ -45,10 +45,10 @@ export const addCommand = (cli: CAC) => {
         process.exit(1);
       }
 
-      const metadataIndex = await getMetadataIndex();
+      const registryComponentIndex = await getRegistryComponentIndex();
 
       let selectedComponents: string[] = options.all
-        ? metadataIndex.map((meatadata) => meatadata.name)
+        ? registryComponentIndex.map((registry) => registry.name)
         : options.components;
 
       if (!options.components?.length && !options.all) {
@@ -57,7 +57,7 @@ export const addCommand = (cli: CAC) => {
           string
         >({
           message: "Select all components to add",
-          options: metadataIndex.map((metadata) => {
+          options: registryComponentIndex.map((metadata) => {
             return {
               label: metadata.name,
               value: metadata.name,
@@ -79,10 +79,10 @@ export const addCommand = (cli: CAC) => {
         process.exit(0);
       }
 
-      const allComponents = addRelativeComponents(selectedComponents, metadataIndex);
+      const allComponents = addRelativeComponents(selectedComponents, registryComponentIndex);
       const addedComponents = allComponents.filter((c) => !selectedComponents.includes(c));
       const config = await getConfig(cwd);
-      const metadatas = await fetchComponentMetadatas(allComponents);
+      const registryComponentItems = await fetchRegistryComponentItem(allComponents);
 
       p.log.message(`Selection: ${highlight(selectedComponents.join(", "))}`);
       if (addedComponents.length) {
@@ -91,8 +91,8 @@ export const addCommand = (cli: CAC) => {
         );
       }
 
-      for (const metadata of metadatas) {
-        for (const registry of metadata.registries) {
+      for (const component of registryComponentItems) {
+        for (const registry of component.registries) {
           const UIFolderPath = config.resolvedUIPaths;
 
           if (!fs.existsSync(UIFolderPath)) {
@@ -122,12 +122,12 @@ export const addCommand = (cli: CAC) => {
         const { start, stop } = p.spinner();
 
         // Install dependencies.
-        if (metadata.dependencies?.length) {
+        if (component.dependencies?.length) {
           start(color.gray("Installing dependencies"));
 
           const result = await execa(
             packageManager,
-            [packageManager === "npm" ? "install" : "add", ...metadata.dependencies],
+            [packageManager === "npm" ? "install" : "add", ...component.dependencies],
             {
               cwd,
             },
@@ -137,7 +137,7 @@ export const addCommand = (cli: CAC) => {
             console.error(result.all);
             process.exit(1);
           } else {
-            for (const deps of metadata.dependencies) {
+            for (const deps of component.dependencies) {
               p.log.info(`- ${deps}`);
             }
             stop("Dependencies installed.");
@@ -145,12 +145,12 @@ export const addCommand = (cli: CAC) => {
         }
 
         // Install devDependencies.
-        if (metadata.devDependencies?.length) {
+        if (component.devDependencies?.length) {
           start(color.gray("Installing devDependencies"));
 
           const result = await execa(
             packageManager,
-            [packageManager === "npm" ? "install" : "add", "-D", ...metadata.devDependencies],
+            [packageManager === "npm" ? "install" : "add", "-D", ...component.devDependencies],
             {
               cwd,
             },
@@ -160,7 +160,7 @@ export const addCommand = (cli: CAC) => {
             console.error(result.all);
             process.exit(1);
           } else {
-            for (const deps of metadata.devDependencies) {
+            for (const deps of component.devDependencies) {
               p.log.info(`- ${deps}`);
             }
             stop("Dependencies installed.");

package/src/schema.ts

@@ -2,21 +2,43 @@ import { z } from "zod";
 
 // TODO: Extract this to a shared package.
 // INFO: also used in component-docs
-export const componentMetadataSchema = z.object({
+export const registryComponentItemSchema = z.object({
+  /**
+   * @description 컴포넌트 이름
+   * @example chip-tabs, alert-dialog
+   */
   name: z.string(),
+
   description: z.string().optional(),
+
+  /**
+   * @description 컴포넌트 의존성
+   * @example @seed-design/react-tabs
+   */
   dependencies: z.array(z.string()).optional(),
+
+  /**
+   * @description 컴포넌트 개발 의존성
+   */
   devDependencies: z.array(z.string()).optional(),
+
+  /**
+   * @description 컴포넌트 내부의 Seed Design 컴포넌트 의존성
+   * @example action-button
+   */
   innerDependencies: z.array(z.string()).optional(),
-  snippets: z.array(z.string()),
-  type: z.enum(["component"]),
-});
 
-export const componentMetadataIndexSchema = z.array(componentMetadataSchema);
+  /**
+   * @description 컴포넌트 코드 스니펫 경로, 여러 파일이 될 수 있어서 배열로 정의
+   * @example component/alert-dialog.tsx
+   */
+  files: z.array(z.string()),
+});
 
-const omittedComponentMetadataIndexSchema = componentMetadataSchema.omit({ snippets: true });
+export const registryComponentSchema = z.array(registryComponentItemSchema);
 
-export const componentMetadataSchemaWithRegistry = omittedComponentMetadataIndexSchema.extend({
+const omittedRegistryComponentSchema = registryComponentItemSchema.omit({ files: true });
+export const registryComponentItemMachineGeneratedSchema = omittedRegistryComponentSchema.extend({
   registries: z.array(
     z.object({
       name: z.string(),
@@ -25,10 +47,15 @@ export const componentMetadataSchemaWithRegistry = omittedComponentMetadataIndex
   ),
 });
 
-export const componentMetadataWithRegistrySchema = z.array(componentMetadataSchemaWithRegistry);
+export const registryComponentMachineGeneratedSchema = z.array(
+  registryComponentItemMachineGeneratedSchema,
+);
 
-export type ComponentMetadata = z.infer<typeof componentMetadataSchema>;
-export type ComponentMetadataIndex = z.infer<typeof componentMetadataIndexSchema>;
-export type ComponentMetadataWithRegistrySchema = z.infer<
-  typeof componentMetadataSchemaWithRegistry
+export type RegistryComponentItem = z.infer<typeof registryComponentItemSchema>;
+export type RegistryComponent = z.infer<typeof registryComponentSchema>;
+export type RegistryComponentItemMachineGenerated = z.infer<
+  typeof registryComponentItemMachineGeneratedSchema
+>;
+export type RegistryComponentMachineGenerated = z.infer<
+  typeof registryComponentMachineGeneratedSchema
 >;

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

@@ -1,36 +1,31 @@
 import { describe, expect, test } from "vitest";
 import { addRelativeComponents } from "../utils/add-relative-components";
-import type { ComponentMetadataIndex } from "@/src/schema";
+import type { RegistryComponent } from "@/src/schema";
 
-const config: ComponentMetadataIndex = [
+const config: RegistryComponent = [
   {
     name: "a",
-    snippets: ["a.tsx"],
-    type: "component",
+    files: ["a.tsx"],
   },
   {
     name: "b",
     innerDependencies: ["a"],
-    snippets: ["b.tsx"],
-    type: "component",
+    files: ["b.tsx"],
   },
   {
     name: "c",
     innerDependencies: ["b"],
-    snippets: ["c.tsx"],
-    type: "component",
+    files: ["c.tsx"],
   },
   {
     name: "d",
     innerDependencies: ["a", "b"],
-    snippets: ["d.tsx"],
-    type: "component",
+    files: ["d.tsx"],
   },
   {
     name: "e",
     innerDependencies: ["d"],
-    snippets: ["d.tsx"],
-    type: "component",
+    files: ["d.tsx"],
   },
 ];
 

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

@@ -1,8 +1,8 @@
-import type { ComponentMetadataIndex } from "@/src/schema";
+import type { RegistryComponentMachineGenerated } from "@/src/schema";
 
 export function addRelativeComponents(
   userSelects: string[],
-  metadataIndex: ComponentMetadataIndex,
+  registryIndex: RegistryComponentMachineGenerated,
 ) {
   const selectedComponents = new Set<string>();
 
@@ -11,7 +11,7 @@ export function addRelativeComponents(
 
     selectedComponents.add(componentName);
 
-    const component = metadataIndex.find((c) => c.name === componentName);
+    const component = registryIndex.find((c) => c.name === componentName);
     if (!component) return;
 
     if (component.innerDependencies) {

package/src/utils/get-metadata.ts

@@ -1,18 +1,15 @@
-import {
-  componentMetadataIndexSchema,
-  type ComponentMetadataWithRegistrySchema,
-} from "@/src/schema";
+import { registryComponentSchema, type RegistryComponentMachineGenerated } from "@/src/schema";
 
 const BASE_URL =
   process.env.NODE_ENV === "prod" ? "https://component.seed-design.io" : "http://localhost:3000";
 
-export async function fetchComponentMetadatas(
+export async function fetchRegistryComponentItem(
   fileNames?: string[],
-): Promise<ComponentMetadataWithRegistrySchema[]> {
+): Promise<RegistryComponentMachineGenerated> {
   try {
     const results = await Promise.all(
       fileNames.map(async (fileName) => {
-        const response = await fetch(`${BASE_URL}/registry/component/${fileName}.json`);
+        const response = await fetch(`${BASE_URL}/__registry__/component/${fileName}.json`);
         return await response.json();
       }),
     );
@@ -24,11 +21,11 @@ export async function fetchComponentMetadatas(
   }
 }
 
-export async function getMetadataIndex() {
+export async function getRegistryComponentIndex() {
   try {
-    const [result] = await fetchComponentMetadatas(["index"]);
+    const [result] = await fetchRegistryComponentItem(["index"]);
 
-    return componentMetadataIndexSchema.parse(result);
+    return registryComponentSchema.parse(result);
   } catch (error) {
     console.log(error);
     throw new Error(`Failed to fetch components from ${BASE_URL}.`);