@seed-design/cli 0.0.0-alpha.1 → 0.0.1

package/README.md

@@ -2,6 +2,6 @@
 
 ### How to test
 
-- Run `yarn dev` in `@seed-design/component-docs` (snippet download)
-- Run `yarn dev` here (watch mode)
-- You can test `yarn seed-design <command>` in `@seed-design/example/cli` terminal
+- Run `bun dev` in `@seed-design/component-docs` (snippet download)
+- Run `bun dev` here (watch mode)
+- You can test `bun seed-design <command>` in `@seed-design/example/cli` terminal

package/bin/index.mjs

@@ -1,3 +1,3 @@
 #!/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();
+import*as w from"@clack/prompts";import{cosmiconfig as ce}from"cosmiconfig";import{execa as pe}from"execa";import I from"fs";import D from"path";import{z as x}from"zod";import ie from"picocolors";var y=e=>ie.cyan(e);import{detect as ae}from"@antfu/ni";async function M(e){let t=await ae({programmatic:!0,cwd:e});return t==="yarn@berry"?"yarn":t==="pnpm@6"?"pnpm":t==="bun"?"bun":t==="deno"?"deno":t??"npm"}var F="seed-design",me=ce(F,{searchPlaces:[`${F}.json`]}),_=x.object({$schema:x.string().optional(),rsc:x.coerce.boolean().default(!1),tsx:x.coerce.boolean().default(!0),path:x.string()}).strict(),le=_.extend({resolvedUIPaths:x.string(),resolvedLibPaths:x.string()});async function J(e){let t=await ge(e);return t?await fe(e,t):null}async function fe(e,t){let r=D.resolve(e,t.path);I.existsSync(r)||I.mkdirSync(r,{recursive:!0});let n=D.join(r,"ui"),o=D.join(r,"lib");return I.existsSync(n)||I.mkdirSync(n,{recursive:!0}),I.existsSync(o)||I.mkdirSync(o,{recursive:!0}),le.parse({...t,resolvedUIPaths:n,resolvedLibPaths:o})}async function ge(e){try{let t=await me.search(e);return _.parse(t.config)}catch{if(w.log.error("\uD504\uB85C\uC81D\uD2B8 \uB8E8\uD2B8 \uACBD\uB85C\uC5D0 `seed-design.json` \uD30C\uC77C\uC774 \uC5C6\uC5B4\uC694."),await w.confirm({message:"seed-design.json \uD30C\uC77C\uC744 \uC0DD\uC131\uD558\uC2DC\uACA0\uC5B4\uC694?"})===!0){let r=await M(e);await pe(r,["seed-design","init","--default"],{cwd:e}),w.log.message("seed-design.json \uD30C\uC77C\uC774 \uC0DD\uC131\uB410\uC5B4\uC694.")}else w.outro(y("\uC791\uC5C5\uC774 \uCDE8\uC18C\uB410\uC5B4\uC694.")),process.exit(1)}}import*as R from"@clack/prompts";import{z as c}from"zod";var de=c.union([c.literal("ui"),c.literal("lib")]),N=c.object({name:c.string(),description:c.string().optional(),dependencies:c.array(c.string()).optional(),devDependencies:c.array(c.string()).optional(),innerDependencies:c.array(c.string()).optional(),files:c.array(c.string())}),U=c.array(N),ue=N.omit({files:!0}),ye=ue.extend({registries:c.array(c.object({name:c.string(),type:de,content:c.string()}))}),tt=c.array(ye);async function G(e,t,r="ui"){return await Promise.all(e.map(async o=>{try{return await(await fetch(`${t}/__registry__/${r}/${o}.json`)).json()}catch(s){let a=await fetch(`${t}/__registry__/${r}/index.json`).then(g=>g.json()),m=U.parse(a).map(g=>g.name);R.log.error(`${r}:${o} \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uB808\uC9C0\uC2A4\uD2B8\uB9AC\uC5D0 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC544\uC694.`),R.log.info(`\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uCEF4\uD3EC\uB10C\uD2B8: ${m.join(", ")}`),R.log.info(JSON.stringify({baseUrl:t,error:s.toString()},null,2)),process.exit(1)}}))}async function B(e,t,r="ui"){let[n]=await G([e],t,r);return n}async function K(e){try{let[t]=await G(["index"],e,"ui");return U.parse(t)}catch(t){R.log.error("\uB808\uC9C0\uC2A4\uD2B8\uB9AC \uC778\uB371\uC2A4\uB97C \uAC00\uC838\uC624\uB294 \uB370 \uC2E4\uD328\uD588\uC5B4\uC694."),R.log.info(JSON.stringify({baseUrl:e,error:t.toString()},null,2)),process.exit(1)}}async function V(e){let[t]=await G(["index"],e,"lib");return U.parse(t)}import{promises as Re}from"fs";import{tmpdir as be}from"os";import q from"path";import{transformFromAstSync as he}from"@babel/core";import xe from"@babel/plugin-transform-typescript";import*as $ from"recast";import{parse as we}from"@babel/parser";var Se={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"]},X=async({sourceFile:e,config:t})=>{let r=e.getFullText();if(t.tsx)return r;let n=$.parse(r,{parser:{parse:s=>we(s,Se)}}),o=he(n,r,{cloneInputAst:!1,code:!1,ast:!0,plugins:[xe],configFile:!1});if(!o||!o.ast)throw new Error("Failed to transform JSX");return $.print(o.ast).code};import{SyntaxKind as Ie}from"ts-morph";var Y=async({sourceFile:e,config:t})=>{if(t.rsc)return e;let r=e.getFirstChildByKind(Ie.ExpressionStatement);return r?.getText()==='"use client";'&&r.remove(),e};import{Project as Ce,ScriptKind as ve}from"ts-morph";var Pe=[Y],je=new Ce({compilerOptions:{}});async function ke(e){let t=await Re.mkdtemp(q.join(be(),"seed-deisgn-"));return q.join(t,e)}async function H(e){let t=await ke(e.filename),r=je.createSourceFile(t,e.raw,{scriptKind:ve.TSX});for(let n of Pe)n({sourceFile:r,...e});return await X({sourceFile:r,...e})}import*as l from"@clack/prompts";import z from"fs-extra";import ee from"path";import De from"picocolors";import{z as b}from"zod";var Q="https://v3.seed-design.io";function W({userSelects:e,uiRegistryIndex:t,libRegistryIndex:r}){let n=[];function o({registryName:s,type:a}){if(n.some(m=>m.name===s&&m.type===a))return;n.push({type:a,name:s});let d=a==="ui"?t.find(m=>m.name===s):r.find(m=>m.name===s);if(d&&d.innerDependencies)for(let m of d.innerDependencies){let[g,k]=m.split(":");o({registryName:k,type:g})}}for(let s of e)o({registryName:s,type:"ui"});return Array.from(n)}import*as Z from"@clack/prompts";import{execa as Ae}from"execa";import Te from"picocolors";import Me from"findup-sync";import Ue from"fs-extra";var $e="package.json";function Oe(){let e=Me($e);if(!e)throw new Error("No package.json file found in the project.");return e}function O(){let e=Oe();return Ue.readJSONSync(e)}async function L({cwd:e,deps:t,dev:r=!1}){let{start:n,stop:o}=Z.spinner(),s=await M(e),a=O(),d={...a.dependencies,...a.devDependencies},m=t.filter(h=>!d[h]),g=t.filter(h=>d[h]);if(!m.length)return{installed:new Set,filtered:new Set};n(Te.gray("\uC758\uC874\uC131 \uC124\uCE58\uC911..."));let A=[s==="npm"?"install":"add",r?"-D":null,...m].filter(Boolean);try{await Ae(s,A,{cwd:e})}catch(h){console.error(`\uC758\uC874\uC131 \uC124\uCE58 \uC2E4\uD328: ${h}`),process.exit(1)}return o("\uC758\uC874\uC131 \uC124\uCE58 \uC644\uB8CC."),{installed:m,filtered:g}}var Ge=b.object({components:b.array(b.string()).optional(),cwd:b.string(),all:b.boolean(),baseUrl:b.string().optional()}),te=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()}).option("-u, --baseUrl <baseUrl>","the base url of the registry. defaults to the current directory.",{default:Q}).example("seed-design add action-button").example("seed-design add alert-dialog").action(async(t,r)=>{l.intro(De.bgCyan("seed-design add"));let n=Ge.parse({components:t,...r}),o=n.cwd,s=n.baseUrl,a=await J(o),d=await K(s),m=await V(s),g=n.all?d.map(f=>f.name):n.components;if(!n.components?.length&&!n.all){let f=await l.multiselect({message:"\uCD94\uAC00\uD560 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694 (\uC2A4\uD398\uC774\uC2A4 \uBC14\uB85C \uC5EC\uB7EC \uAC1C \uC120\uD0DD \uAC00\uB2A5)",options:d.map(i=>({label:i.name,value:i.name,hint:i.description}))});l.isCancel(f)&&(l.log.error("\uCDE8\uC18C\uB418\uC5C8\uC5B4\uC694."),process.exit(0)),g=f}g?.length||(l.log.error("\uCEF4\uD3EC\uB10C\uD2B8\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC5B4\uC694."),process.exit(0)),l.log.message(`\uC120\uD0DD\uB41C \uCEF4\uD3EC\uB10C\uD2B8: ${y(g.join(", "))}`);let k=W({userSelects:g,uiRegistryIndex:d,libRegistryIndex:m}),C=[],{start:A,stop:h}=l.spinner();A("Registry\uB97C \uAC00\uC838\uC624\uACE0 \uC788\uC5B4\uC694...");for(let f of k){let i=await B(f.name,s,f.type);C.push(i)}if(h(),C.length){let f=C.filter(i=>!g.includes(i.name));l.log.message(`\uCD94\uAC00\uB85C \uC124\uCE58\uB420 \uB808\uC9C0\uC2A4\uD2B8\uB9AC: ${y(f.map(i=>i.name).join(", "))}`)}let T=[],u={installed:new Set,filtered:new Set};for(let f of C){for(let i of f.registries){let v="";switch(i.type){case"ui":v=a.resolvedUIPaths;break;case"lib":v=a.resolvedLibPaths;break;default:break}z.existsSync(v)||await z.mkdir(v,{recursive:!0});let S=ee.resolve(v,i.name),oe=await H({filename:i.name,config:a,raw:i.content});a.tsx||(S=S.replace(/\.tsx$/,".jsx"),S=S.replace(/\.ts$/,".js")),await z.writeFile(S,oe);let se=ee.relative(o,S);T.push({name:i.name,path:se})}if(f.dependencies?.length){let i=await L({cwd:o,deps:f.dependencies});u.installed=new Set([...u.installed,...i.installed]),u.filtered=new Set([...u.filtered,...i.filtered])}if(f.devDependencies?.length){let i=await L({cwd:o,deps:f.devDependencies,dev:!0});u.installed=new Set([...u.installed,...i.installed]),u.filtered=new Set([...u.filtered,...i.filtered])}l.log.success(`${y(f.name)} \uAD00\uB828 \uD30C\uC77C \uCD94\uAC00 \uC644\uB8CC`)}if(u.installed.size&&l.log.message(`\uC124\uCE58\uB41C \uC758\uC874\uC131: ${y(Array.from(u.installed).join(", "))}`),u.filtered.size&&l.log.message(`\uC774\uBBF8 \uC124\uCE58\uB41C \uC758\uC874\uC131: ${y(Array.from(u.filtered).join(", "))}`),T.length)for(let f of T)l.log.message(`\uCD94\uAC00\uB41C \uD30C\uC77C: ${y(f.path)}`);l.outro("\uCEF4\uD3EC\uB10C\uD2B8 \uCD94\uAC00 \uC644\uB8CC.")})};import*as p from"@clack/prompts";import Le from"fs-extra";import re from"path";import P from"picocolors";import{z as E}from"zod";var ze=E.object({cwd:E.string(),yes:E.boolean().optional()}),ne=e=>{e.command("init","seed-design.json \uD30C\uC77C \uC0DD\uC131").option("-c, --cwd <cwd>","\uC791\uC5C5 \uB514\uB809\uD1A0\uB9AC. \uAE30\uBCF8\uAC12\uC740 \uD604\uC7AC \uB514\uB809\uD1A0\uB9AC.",{default:process.cwd()}).option("-y, --yes","\uBAA8\uB4E0 \uC9C8\uBB38\uC5D0 \uB300\uD574 \uAE30\uBCF8\uAC12\uC73C\uB85C \uB2F5\uBCC0\uD569\uB2C8\uB2E4.").action(async t=>{let r=a=>P.cyan(a);p.intro(P.bgCyan("seed-design.json \uD30C\uC77C \uC0DD\uC131"));let n=ze.parse(t),o=n.yes,s={rsc:!1,tsx:!0,path:"./seed-design"};o||(s={...await p.group({tsx:()=>p.confirm({message:`${r("TypeScript")}\uB97C \uC0AC\uC6A9\uC911\uC774\uC2E0\uAC00\uC694?`,initialValue:!0}),rsc:()=>p.confirm({message:`${r("React Server Components")}\uB97C \uC0AC\uC6A9\uC911\uC774\uC2E0\uAC00\uC694?`,initialValue:!1}),path:()=>p.text({message:`${r("seed-design \uD3F4\uB354")} \uACBD\uB85C\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694. (\uAE30\uBCF8\uAC12\uC740 \uD504\uB85C\uC81D\uD2B8 \uB8E8\uD2B8\uC5D0 \uC0DD\uC131\uB429\uB2C8\uB2E4.)`,initialValue:"./seed-design",defaultValue:"./seed-design",placeholder:"./seed-design"})},{onCancel:()=>{p.cancel("\uC791\uC5C5\uC774 \uCDE8\uC18C\uB410\uC5B4\uC694."),process.exit(0)}})});try{let{start:a,stop:d}=p.spinner();a("seed-design.json \uD30C\uC77C \uC0DD\uC131\uC911...");let m=re.resolve(n.cwd,"seed-design.json");await Le.writeFile(m,`${JSON.stringify(s,null,2)}
+`,"utf-8");let g=re.relative(process.cwd(),m);d(`seed-design.json \uD30C\uC77C\uC774 ${r(g)}\uC5D0 \uC0DD\uC131\uB410\uC5B4\uC694.`),p.log.info(P.gray("seed-design add {component} \uBA85\uB839\uC5B4\uB85C \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uCD94\uAC00\uD574\uBCF4\uC138\uC694!")),p.log.info(P.gray("seed-design add \uBA85\uB839\uC5B4\uB85C \uCD94\uAC00\uD560 \uC218 \uC788\uB294 \uBAA8\uB4E0 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uD655\uC778\uD574\uBCF4\uC138\uC694.")),p.outro("\uC791\uC5C5\uC774 \uC644\uB8CC\uB410\uC5B4\uC694.")}catch(a){p.log.error(`seed-design.json \uD30C\uC77C \uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC5B4\uC694. ${a}`),p.outro(P.bgRed("\uC791\uC5C5\uC774 \uCDE8\uC18C\uB410\uC5B4\uC694.")),process.exit(1)}})};import{cac as Ee}from"cac";var Fe="seed-design",j=Ee(Fe);async function _e(){let e=O();te(j),ne(j),j.version(e.version||"1.0.0","-v, --version"),j.help(),j.parse()}_e();

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@seed-design/cli",
-  "version": "0.0.0-alpha.1",
+  "version": "0.0.1",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/daangn/sprout",
+    "url": "git+https://github.com/daangn/seed-design.git",
     "directory": "packages/cli"
   },
   "license": "MIT",
@@ -19,12 +19,13 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "ENV=prod node ./build.mjs",
-    "dev": "ENV=dev node ./dev.mjs",
-    "test": "yarn vitest"
+    "build": "ENV=prod bun ./build.mjs",
+    "dev": "ENV=dev bun ./dev.mjs",
+    "test": "bun vitest",
+    "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@antfu/ni": "^0.22.0",
+    "@antfu/ni": "^23.3.1",
     "@babel/core": "^7.24.9",
     "@babel/parser": "^7.24.8",
     "@babel/plugin-transform-typescript": "^7.24.8",
@@ -43,19 +44,11 @@
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
     "@types/fs-extra": "^11.0.4",
-    "esbuild": "^0.19.3",
+    "esbuild": "^0.25.0",
     "type-fest": "^4.23.0",
-    "typescript": "^5.4.5",
-    "ultra-runner": "^3.10.5",
-    "vitest": "^2.0.5"
+    "typescript": "^5.4.5"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "ultra": {
-    "concurrent": [
-      "dev",
-      "build"
-    ]
   }
 }

package/src/commands/add.ts

@@ -1,21 +1,27 @@
 import { getConfig } from "@/src/utils/get-config";
-import { fetchComponentMetadatas, getMetadataIndex } from "@/src/utils/get-metadata";
-import { getPackageManager } from "@/src/utils/get-package-manager";
+import {
+  fetchRegistryItem,
+  getRegistryLibIndex,
+  getRegistryUIIndex,
+} from "@/src/utils/get-metadata";
 import { transform } from "@/src/utils/transformers";
 import * as p from "@clack/prompts";
-import { execa } from "execa";
 import fs from "fs-extra";
 import path from "path";
 import color from "picocolors";
 import { z } from "zod";
 
 import type { CAC } from "cac";
-import { addRelativeComponents } from "../utils/add-relative-components";
+import { BASE_URL } from "../constants";
+import { addRelativeRegistries } from "../utils/add-relative-registries";
+import { highlight } from "../utils/color";
+import { installDependencies } from "../utils/install";
 
 const addOptionsSchema = z.object({
   components: z.array(z.string()).optional(),
   cwd: z.string(),
   all: z.boolean(),
+  baseUrl: z.string().optional(),
   // yes: z.boolean(),
   // overwrite: z.boolean(),
   // path: z.string().optional(),
@@ -30,25 +36,28 @@ export const addCommand = (cli: CAC) => {
     .option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", {
       default: process.cwd(),
     })
-    .example("seed-design add box-button")
+    .option(
+      "-u, --baseUrl <baseUrl>",
+      "the base url of the registry. defaults to the current directory.",
+      {
+        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,
       });
-      const highlight = (text: string) => color.cyan(text);
       const cwd = options.cwd;
-
-      if (!fs.existsSync(cwd)) {
-        p.log.error(`The path ${cwd} does not exist. Please try again.`);
-        process.exit(1);
-      }
-
-      const metadataIndex = await getMetadataIndex();
-
+      const baseUrl = options.baseUrl;
+      const config = await getConfig(cwd);
+      const registryComponentIndex = await getRegistryUIIndex(baseUrl);
+      const libRegistryIndex = await getRegistryLibIndex(baseUrl);
       let selectedComponents: string[] = options.all
-        ? metadataIndex.map((meatadata) => meatadata.name)
+        ? registryComponentIndex.map((registry) => registry.name)
         : options.components;
 
       if (!options.components?.length && !options.all) {
@@ -56,8 +65,8 @@ export const addCommand = (cli: CAC) => {
           { label: string; value: string; hint: string }[],
           string
         >({
-          message: "Select all components to add",
-          options: metadataIndex.map((metadata) => {
+          message: "추가할 컴포넌트를 선택해주세요 (스페이스 바로 여러 개 선택 가능)",
+          options: registryComponentIndex.map((metadata) => {
             return {
               label: metadata.name,
               value: metadata.name,
@@ -67,7 +76,7 @@ export const addCommand = (cli: CAC) => {
         });
 
         if (p.isCancel(selects)) {
-          p.log.error("Aborted.");
+          p.log.error("취소되었어요.");
           process.exit(0);
         }
 
@@ -75,31 +84,66 @@ export const addCommand = (cli: CAC) => {
       }
 
       if (!selectedComponents?.length) {
-        p.log.error("No components found.");
+        p.log.error("컴포넌트를 찾을 수 없어요.");
         process.exit(0);
       }
 
-      const allComponents = addRelativeComponents(selectedComponents, metadataIndex);
-      const addedComponents = allComponents.filter((c) => !selectedComponents.includes(c));
-      const config = await getConfig(cwd);
-      const metadatas = await fetchComponentMetadatas(allComponents);
+      p.log.message(`선택된 컴포넌트: ${highlight(selectedComponents.join(", "))}`);
+
+      const allRelativeRegistries = addRelativeRegistries({
+        userSelects: selectedComponents,
+        uiRegistryIndex: registryComponentIndex,
+        libRegistryIndex,
+      });
 
-      p.log.message(`Selection: ${highlight(selectedComponents.join(", "))}`);
-      if (addedComponents.length) {
+      const allRegistryItems = [];
+
+      const { start, stop } = p.spinner();
+      start("Registry를 가져오고 있어요...");
+
+      for (const registry of allRelativeRegistries) {
+        const registryItem = await fetchRegistryItem(registry.name, baseUrl, registry.type);
+        allRegistryItems.push(registryItem);
+      }
+
+      stop();
+
+      if (allRegistryItems.length) {
+        const filteredRegistryItems = allRegistryItems.filter(
+          (c) => !selectedComponents.includes(c.name),
+        );
         p.log.message(
-          `Inner Dependencies: ${highlight(addedComponents.join(", "))} will be also added.`,
+          `추가로 설치될 레지스트리: ${highlight(
+            filteredRegistryItems.map((c) => c.name).join(", "),
+          )}`,
         );
       }
 
-      for (const metadata of metadatas) {
-        for (const registry of metadata.registries) {
-          const UIFolderPath = config.resolvedUIPaths;
+      // 선택된 컴포넌트.json 레지스트리 파일 기반으로 컴포넌트를 추가합니다.
+      const registryResult = [];
+      const installResult = {
+        installed: new Set(),
+        filtered: new Set(),
+      };
+      for (const component of allRegistryItems) {
+        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;
+          }
 
-          if (!fs.existsSync(UIFolderPath)) {
-            await fs.mkdir(UIFolderPath, { recursive: true });
+          if (!fs.existsSync(targetPath)) {
+            await fs.mkdir(targetPath, { recursive: true });
           }
 
-          let filePath = path.resolve(UIFolderPath, registry.name);
+          let filePath = path.resolve(targetPath, registry.name);
 
           const content = await transform({
             filename: registry.name,
@@ -114,60 +158,50 @@ export const addCommand = (cli: CAC) => {
 
           await fs.writeFile(filePath, content);
           const relativePath = path.relative(cwd, filePath);
-          p.log.info(`Added ${highlight(registry.name)} to ${highlight(relativePath)}`);
-        }
 
-        const packageManager = await getPackageManager(cwd);
-
-        const { start, stop } = p.spinner();
+          registryResult.push({
+            name: registry.name,
+            path: relativePath,
+          });
+        }
 
         // Install dependencies.
-        if (metadata.dependencies?.length) {
-          start(color.gray("Installing dependencies"));
-
-          const result = await execa(
-            packageManager,
-            [packageManager === "npm" ? "install" : "add", ...metadata.dependencies],
-            {
-              cwd,
-            },
-          );
-
-          if (result.failed) {
-            console.error(result.all);
-            process.exit(1);
-          } else {
-            for (const deps of metadata.dependencies) {
-              p.log.info(`- ${deps}`);
-            }
-            stop("Dependencies installed.");
-          }
+        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]);
         }
 
         // Install devDependencies.
-        if (metadata.devDependencies?.length) {
-          start(color.gray("Installing devDependencies"));
-
-          const result = await execa(
-            packageManager,
-            [packageManager === "npm" ? "install" : "add", "-D", ...metadata.devDependencies],
-            {
-              cwd,
-            },
-          );
-
-          if (result.failed) {
-            console.error(result.all);
-            process.exit(1);
-          } else {
-            for (const deps of metadata.devDependencies) {
-              p.log.info(`- ${deps}`);
-            }
-            stop("Dependencies installed.");
-          }
+        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]);
+        }
+
+        p.log.success(`${highlight(component.name)} 관련 파일 추가 완료`);
+      }
+
+      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)}`);
         }
       }
 
-      p.outro("Components added.");
+      p.outro("컴포넌트 추가 완료.");
     });
 };

package/src/commands/init.ts

@@ -10,63 +10,78 @@ import type { CAC } from "cac";
 
 const initOptionsSchema = z.object({
   cwd: z.string(),
+  yes: z.boolean().optional(),
 });
 
 export const initCommand = (cli: CAC) => {
   cli
-    .command("init", "initialize seed-design.json")
-    .option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", {
+    .command("init", "seed-design.json 파일 생성")
+    .option("-c, --cwd <cwd>", "작업 디렉토리. 기본값은 현재 디렉토리.", {
       default: process.cwd(),
     })
+    .option("-y, --yes", "모든 질문에 대해 기본값으로 답변합니다.")
     .action(async (opts) => {
-      const options = initOptionsSchema.parse({ ...opts });
       const highlight = (text: string) => color.cyan(text);
+      p.intro(color.bgCyan("seed-design.json 파일 생성"));
 
-      const group = await p.group(
-        {
-          tsx: () =>
-            p.confirm({
-              message: `Would you like to use ${highlight("TypeScript")} (recommended)?`,
-              initialValue: true,
-            }),
-          rsc: () =>
-            p.confirm({
-              message: `Are you using ${highlight("React Server Components")}?`,
-              initialValue: false,
-            }),
-          css: () =>
-            p.confirm({
-              message: `Would you like to use ${highlight("CSS Modules")}? (If true, CSS import will be added in components)`,
-              initialValue: true,
-            }),
-          path: () =>
-            p.text({
-              message: `Enter the path to your ${highlight("seed-design directory")}`,
-              initialValue: "./seed-design",
-              defaultValue: "./seed-design",
-              placeholder: "./seed-design",
-            }),
-        },
-        {
-          onCancel: () => {
-            p.cancel("Operation cancelled.");
-            process.exit(0);
+      const options = initOptionsSchema.parse(opts);
+      const isYesOption = options.yes;
+      let config: RawConfig = {
+        rsc: false,
+        tsx: true,
+        path: "./seed-design",
+      };
+
+      if (!isYesOption) {
+        const group = await p.group(
+          {
+            tsx: () =>
+              p.confirm({
+                message: `${highlight("TypeScript")}를 사용중이신가요?`,
+                initialValue: true,
+              }),
+            rsc: () =>
+              p.confirm({
+                message: `${highlight("React Server Components")}를 사용중이신가요?`,
+                initialValue: false,
+              }),
+            path: () =>
+              p.text({
+                message: `${highlight("seed-design 폴더")} 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)`,
+                initialValue: "./seed-design",
+                defaultValue: "./seed-design",
+                placeholder: "./seed-design",
+              }),
           },
-        },
-      );
+          {
+            onCancel: () => {
+              p.cancel("작업이 취소됐어요.");
+              process.exit(0);
+            },
+          },
+        );
 
-      const config: RawConfig = {
-        rsc: group.rsc,
-        tsx: group.tsx,
-        css: group.css,
-        path: group.path,
-      };
+        config = {
+          ...group,
+        };
+      }
 
-      const { start, stop } = p.spinner();
-      start("Writing seed-design.json...");
-      const targetPath = path.resolve(options.cwd, "seed-design.json");
-      await fs.writeFile(targetPath, `${JSON.stringify(config, null, 2)}\n`, "utf-8");
-      const relativePath = path.relative(process.cwd(), targetPath);
-      stop(`seed-design.json written to ${highlight(relativePath)}`);
+      try {
+        const { start, stop } = p.spinner();
+        start("seed-design.json 파일 생성중...");
+        const targetPath = path.resolve(options.cwd, "seed-design.json");
+        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(
+          color.gray("seed-design add 명령어로 추가할 수 있는 모든 컴포넌트를 확인해보세요."),
+        );
+        p.outro("작업이 완료됐어요.");
+      } catch (error) {
+        p.log.error(`seed-design.json 파일 생성에 실패했어요. ${error}`);
+        p.outro(color.bgRed("작업이 취소됐어요."));
+        process.exit(1);
+      }
     });
 };

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const BASE_URL =
+  process.env.NODE_ENV === "prod" ? "https://v3.seed-design.io" : "http://localhost:3000";

package/src/index.ts

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
 import { addCommand } from "@/src/commands/add";
+import { initCommand } from "@/src/commands/init";
 import { getPackageInfo } from "@/src/utils/get-package-info";
 import { cac } from "cac";
-import { initCommand } from "./commands/init";
 
 const NAME = "seed-design";
 const CLI = cac(NAME);

package/src/schema.ts

@@ -1,34 +1,76 @@
 import { z } from "zod";
 
-// TODO: Extract this to a shared package.
-// INFO: also used in component-docs
-export const componentMetadataSchema = z.object({
+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(),
+
   description: z.string().optional(),
+
+  /**
+   * @description 레지스트리 의존성
+   * @example @seed-design/react-tabs
+   */
   dependencies: z.array(z.string()).optional(),
+
+  /**
+   * @description 레지스트리 개발 의존성
+   */
   devDependencies: z.array(z.string()).optional(),
-  innerDependencies: z.array(z.string()).optional(),
-  snippets: z.array(z.string()),
-  type: z.enum(["component"]),
-});
 
-export const componentMetadataIndexSchema = z.array(componentMetadataSchema);
+  /**
+   * @description 레지스트리 내부의 Seed Design 컴포넌트 의존성
+   * * `:`를 기준으로 왼쪽은 {registryType}, 오른쪽은 파일 이름
+   * @example ui:action-button
+   * @example lib:manner-temp-level
+   */
+  innerDependencies: z.array(z.string()).optional(),
 
-const omittedComponentMetadataIndexSchema = componentMetadataSchema.omit({ snippets: true });
+  /**
+   * @description
+   * 컴포넌트 코드 스니펫 경로, 여러 파일이 될 수 있어서 배열로 정의
+   * `:`를 기준으로 왼쪽은 {registryType}, 오른쪽은 파일 이름
+   * @example ui:alert-dialog.tsx
+   * @example ui:use-dismissible.ts
+   * @example lib:manner-temp-level.ts
+   */
+  files: z.array(z.string()),
+});
+export const registryUISchema = z.array(registryUIItemSchema);
 
-export const componentMetadataSchemaWithRegistry = omittedComponentMetadataIndexSchema.extend({
+/**
+ * @description 머신이 생성한 registry component schema
+ */
+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 registryComponentMachineGeneratedSchema = z.array(
+  registryUIItemMachineGeneratedSchema,
+);
+
+// NOTE: 현재는 lib이 ui와 타입이 동일하지만, 따로 가져가야한다면 타입을 변경해야해요.
+export const registryLibItemMachineGeneratedSchema = registryUIItemMachineGeneratedSchema;
 
-export const componentMetadataWithRegistrySchema = z.array(componentMetadataSchemaWithRegistry);
+// 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>;
 
-export type ComponentMetadata = z.infer<typeof componentMetadataSchema>;
-export type ComponentMetadataIndex = z.infer<typeof componentMetadataIndexSchema>;
-export type ComponentMetadataWithRegistrySchema = z.infer<
-  typeof componentMetadataSchemaWithRegistry
->;
+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>;

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,6 +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 { z } from "zod";
+import { highlight } from "./color";
+import { getPackageManager } from "./get-package-manager";
 
 const MODULE_NAME = "seed-design";
 
@@ -13,7 +18,6 @@ export const rawConfigSchema = z
     $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();
@@ -22,6 +26,7 @@ export type RawConfig = z.infer<typeof rawConfigSchema>;
 
 export const configSchema = rawConfigSchema.extend({
   resolvedUIPaths: z.string(),
+  resolvedLibPaths: z.string(),
 });
 
 export async function getConfig(cwd: string) {
@@ -39,23 +44,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"),
+    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) {
-      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(`Invalid configuration found in ${cwd}/seed-design.json.`);
   }
 }

package/src/utils/get-metadata.ts

@@ -1,36 +1,75 @@
-import {
-  componentMetadataIndexSchema,
-  type ComponentMetadataWithRegistrySchema,
-} from "@/src/schema";
+import * as p from "@clack/prompts";
+import { registryUISchema, type RegistryUIMachineGenerated } 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 fetchRegistryItems(
   fileNames?: string[],
-): Promise<ComponentMetadataWithRegistrySchema[]> {
-  try {
-    const results = await Promise.all(
-      fileNames.map(async (fileName) => {
-        const response = await fetch(`${BASE_URL}/registry/component/${fileName}.json`);
+  baseUrl?: string,
+  type: "ui" | "lib" = "ui",
+): Promise<RegistryUIMachineGenerated> {
+  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 getMetadataIndex() {
+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 fetchComponentMetadatas(["index"]);
+    const [result] = await fetchRegistryItems(["index"], baseUrl, "ui");
 
-    return componentMetadataIndexSchema.parse(result);
+    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,
+  };
+}

package/src/utils/transformers/index.ts

@@ -5,7 +5,6 @@ import path from "path";
 
 import { transformJsx } from "@/src/utils/transformers/transform-jsx";
 import { transformRsc } from "@/src/utils/transformers/transform-rsc";
-import { transformCSS } from "./transform-css";
 
 import { Project, ScriptKind, type SourceFile } from "ts-morph";
 
@@ -23,7 +22,7 @@ export type Transformer<Output = SourceFile> = (
   },
 ) => Promise<Output>;
 
-const transformers: Transformer[] = [transformRsc, transformCSS];
+const transformers: Transformer[] = [transformRsc];
 
 const project = new Project({
   compilerOptions: {},

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

@@ -1,67 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { addRelativeComponents } from "../utils/add-relative-components";
-import type { ComponentMetadataIndex } from "@/src/schema";
-
-const config: ComponentMetadataIndex = [
-  {
-    name: "a",
-    snippets: ["a.tsx"],
-    type: "component",
-  },
-  {
-    name: "b",
-    innerDependencies: ["a"],
-    snippets: ["b.tsx"],
-    type: "component",
-  },
-  {
-    name: "c",
-    innerDependencies: ["b"],
-    snippets: ["c.tsx"],
-    type: "component",
-  },
-  {
-    name: "d",
-    innerDependencies: ["a", "b"],
-    snippets: ["d.tsx"],
-    type: "component",
-  },
-  {
-    name: "e",
-    innerDependencies: ["d"],
-    snippets: ["d.tsx"],
-    type: "component",
-  },
-];
-
-describe("addRelativeComponents", () => {
-  test("4 deps test", () => {
-    const userSelects = ["e"];
-    const result = addRelativeComponents(userSelects, config);
-    expect(result).toEqual(expect.arrayContaining(["a", "b", "d", "e"]));
-  });
-
-  test("3 deps test", () => {
-    const userSelects = ["d"];
-    const result = addRelativeComponents(userSelects, config);
-    expect(result).toEqual(expect.arrayContaining(["a", "b", "d"]));
-  });
-
-  test("3 deps test", () => {
-    const userSelects = ["c"];
-    const result = addRelativeComponents(userSelects, config);
-    expect(result).toEqual(expect.arrayContaining(["a", "b", "c"]));
-  });
-
-  test("2 deps test", () => {
-    const userSelects = ["b"];
-    const result = addRelativeComponents(userSelects, config);
-    expect(result).toEqual(expect.arrayContaining(["a", "b"]));
-  });
-
-  test("1 deps test", () => {
-    const userSelects = ["a"];
-    const result = addRelativeComponents(userSelects, config);
-    expect(result).toEqual(expect.arrayContaining(["a"]));
-  });
-});

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

@@ -1,29 +0,0 @@
-import type { ComponentMetadataIndex } from "@/src/schema";
-
-export function addRelativeComponents(
-  userSelects: string[],
-  metadataIndex: ComponentMetadataIndex,
-) {
-  const selectedComponents = new Set<string>();
-
-  function addSeedDependencies(componentName: string) {
-    if (selectedComponents.has(componentName)) return;
-
-    selectedComponents.add(componentName);
-
-    const component = metadataIndex.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);
-}

package/src/utils/transformers/transform-css.ts

@@ -1,16 +0,0 @@
-import type { Transformer } from "@/src/utils/transformers";
-
-export const transformCSS: Transformer = 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;
-};