feat(ui-kit): improve CLI with new commands and component management, update dependencies

Author: Ohh-889

internal/create-skyroc/package.json

@@ -25,10 +25,7 @@
   "bin": {
     "create-skyroc": "./src/bin.js"
   },
-  "files": [
-    "dist",
-    "template-*"
-  ],
+  "files": ["dist", "template-*"],
   "scripts": {
     "build": "pnpm typecheck && pnpm build-only",
     "build-only": "tsdown",

internal/ui-kit/package.json

@@ -4,25 +4,10 @@
   "version": "0.0.1",
   "private": true,
   "description": "UI Primitives Template",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "import": {
-          "types": "./dist/index.d.ts",
-          "default": "./dist/index.js"
-        },
-        "require": {
-          "types": "./dist/index.d.ts",
-          "default": "./dist/index.js"
-        }
-      }
-    }
-  },
   "sideEffects": false,
+  "bin": {
+    "ui-kit": "./src/bin.js"
+  },
   "exports": {
     ".": "./src/index.ts"
   },
@@ -33,26 +18,19 @@
   "scripts": {
     "build": "tsdown"
   },
-  "peerDependencies": {
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
-    },
-    "@types/react-dom": {
-      "optional": true
-    }
+  "dependencies": {
+    "commander": "^14.0.1",
+    "execa": "^9.6.0",
+    "fs-extra": "^11.3.2",
+    "pathe": "^2.0.3",
+    "picocolors": "^1.1.1",
+    "shadcn": "3.3.1"
   },
   "devDependencies": {
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
-    "react": "19.1.0",
-    "react-dom": "19.1.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^24.6.2",
     "tsdown": "0.12.9",
+    "tsx": "4.20.3",
     "typescript": "5.8.2"
   }
 }

internal/ui-kit/src/bin.js

@@ -0,0 +1,3 @@
+import { require } from 'tsx/cjs/api';
+
+require('./index.ts', import.meta.url);

internal/ui-kit/src/commands/add.ts

@@ -0,0 +1,42 @@
+import {
+  applyCssVariablesFlag,
+  defaultComponentsJson,
+  readComponentsJson,
+  writeComponentsJson
+} from '../core/componentsJson';
+import { log } from '../core/logger';
+import { runShadcn } from '../core/shadcn';
+
+/**
+ * soyui add [components...]  —— 包装 shadcn add
+ * 在调用前确保 components.json 存在，并按 flags 修正 cssVariables。
+ * 其余未知参数全部透传给 shadcn。
+ */
+export async function cmdAdd(
+  cwd: string,
+  components: string[],
+  opts: {
+    // 我们识别的 wrapper 级选项（默认 false = 不改变）
+    cssVariables?: boolean;
+    noCssVariables?: boolean;
+
+    // 透传给 shadcn 的原生选项（-y/-o/-p/...）以及未知项
+    passthrough: string[];
+  }
+) {
+  // 1) 确保 components.json 存在
+  const json = (await readComponentsJson(cwd)) ?? defaultComponentsJson();
+
+  // 2) 应用 wrapper 对 cssVariables 的覆盖（仅显式传入时才应用）
+  applyCssVariablesFlag(json, { cssVariables: opts.cssVariables, noCssVariables: opts.noCssVariables });
+
+  // 3) 写回（保证 shadcn 运行时能通过 components.json 读取到）
+  await writeComponentsJson(cwd, json);
+  log.ok('已准备 components.json，开始执行 shadcn add ...');
+
+  // 4) 组织最终参数：components + 剩余未知参数（全部透传）
+  const finalArgs = [...components, ...opts.passthrough];
+
+  // 5) 调用 shadcn add
+  await runShadcn('add', finalArgs, { cwd });
+}

internal/ui-kit/src/commands/init.ts

@@ -0,0 +1,56 @@
+import {
+  applyCssVariablesFlag,
+  deepMerge,
+  defaultComponentsJson,
+  readComponentsJson,
+  writeComponentsJson
+} from '../core/componentsJson';
+import { log } from '../core/logger';
+import type { ComponentsJson } from '../types';
+
+/**
+ * soyui init
+ * - 若不存在 components.json：写入默认模板
+ * - 若存在：合并（保留用户已有设置），可通过 flags 更新 tailwind.cssVariables / baseColor / style / prefix 等
+ */
+export async function cmdInit(
+  cwd: string,
+  flags: {
+    // --no-css-variables
+    baseColor?: string;
+    cssVariables?: boolean; // --css-variables
+    noCssVariables?: boolean; // --style new-york|...
+    prefix?: string; // --tsx / --no-tsx
+    registry?: string; // --prefix tw-
+    rsc?: boolean; // --base-color neutral|zinc|slate...
+    style?: string; // --rsc / --no-rsc 用 commander 处理
+    tsx?: boolean; // --registry 用于覆盖 @sr
+  }
+) {
+  const current = (await readComponentsJson(cwd)) ?? defaultComponentsJson();
+
+  // 合并覆盖
+  const overrides: Partial<ComponentsJson> = {};
+  if (flags.style !== undefined) overrides.style = flags.style;
+  if (flags.rsc !== undefined) overrides.rsc = flags.rsc;
+  if (flags.tsx !== undefined) overrides.tsx = flags.tsx;
+  if (flags.baseColor !== undefined || flags.prefix !== undefined) {
+    overrides.tailwind = {
+      ...(overrides.tailwind || current.tailwind || {}),
+      ...(flags.baseColor ? { baseColor: flags.baseColor } : {}),
+      ...(flags.prefix !== undefined ? { prefix: flags.prefix } : {})
+    };
+  }
+  if (flags.registry) {
+    overrides.registries = {
+      ...(current.registries || {}),
+      '@sr': flags.registry
+    };
+  }
+
+  const next = deepMerge(current, overrides);
+  applyCssVariablesFlag(next, { cssVariables: flags.cssVariables, noCssVariables: flags.noCssVariables });
+
+  await writeComponentsJson(cwd, next);
+  log.ok('components.json 已更新/创建');
+}

internal/ui-kit/src/core/componentsJson.ts

@@ -0,0 +1,73 @@
+import { pathExists, readJSON, writeJSON } from 'fs-extra';
+import { join } from 'pathe';
+
+import type { ComponentsJson } from '../types';
+
+export async function readComponentsJson(cwd: string) {
+  const file = join(cwd, 'components.json');
+  if (!(await pathExists(file))) return null;
+  return (await readJSON(file)) as ComponentsJson;
+}
+
+export async function writeComponentsJson(cwd: string, data: ComponentsJson) {
+  const file = join(cwd, 'components.json');
+  await writeJSON(file, data, { spaces: 2 });
+}
+
+export function deepMerge<T extends object>(a: T, b: Partial<T>): T {
+  const out: any = Array.isArray(a) ? [...a] : { ...a };
+  for (const [k, v] of Object.entries(b as any)) {
+    if (v && typeof v === 'object' && !Array.isArray(v)) {
+      (out as any)[k] = deepMerge((out as any)[k] ?? {}, v);
+    } else if (v !== undefined) {
+      (out as any)[k] = v;
+    }
+  }
+  return out;
+}
+
+/** 生成你的默认 components.json（按你的需求） */
+export function defaultComponentsJson(): ComponentsJson {
+  return {
+    $schema: 'https://ui.shadcn.com/schema.json',
+    aliases: {
+      components: '@/components',
+      hooks: '@/hooks',
+      lib: '@/lib',
+      ui: '@/components/ui',
+      utils: '@/lib/utils'
+    },
+    iconLibrary: 'lucide',
+    // 你的私有/自定义注册表
+    registries: {
+      '@sr': 'http://localhost:3001/r/{name}.json'
+    },
+    rsc: true,
+    style: 'new-york',
+    tailwind: {
+      baseColor: 'neutral',
+      config: '',
+      css: 'app/globals.css',
+      cssVariables: true,
+      prefix: ''
+    },
+    tsx: true
+  };
+}
+
+/**
+ * 规范化：根据 wrapper 传入的 --css-variables/--no-css-variables，落到 tailwind.cssVariables
+ * 注意：wrapper 默认二者都 false（即不改变已有配置），只有显式传入才改。
+ */
+export function applyCssVariablesFlag(
+  json: ComponentsJson,
+  flags: { cssVariables?: boolean; noCssVariables?: boolean }
+) {
+  if (flags.cssVariables) {
+    json.tailwind ??= {};
+    json.tailwind.cssVariables = true;
+  } else if (flags.noCssVariables) {
+    json.tailwind ??= {};
+    json.tailwind.cssVariables = false;
+  }
+}

internal/ui-kit/src/core/logger.ts

@@ -0,0 +1,8 @@
+import pc from 'picocolors';
+
+export const log = {
+  err: (msg: string) => console.error(pc.red('err  ') + msg),
+  info: (msg: string) => console.log(pc.cyan('info ') + msg),
+  ok: (msg: string) => console.log(pc.green('ok   ') + msg),
+  warn: (msg: string) => console.log(pc.yellow('warn ') + msg)
+};

internal/ui-kit/src/core/shadcn.ts

@@ -0,0 +1,16 @@
+import { execSync } from 'node:child_process';
+
+/**
+ * 调用 pnpm dlx shadcn@latest <subcommand> ...args
+ * 透明透传所有 shadcn 的原生命令与参数。
+ */
+export async function runShadcn(subcommand: string, args: string[], opts?: { cwd?: string }) {
+  const finalArgs = ['dlx', 'shadcn@latest', subcommand, ...args];
+
+  // 在 Windows / Unix 都兼容
+  const child = execSync(`pnpm ${finalArgs.join(' ')}`, {
+    cwd: opts?.cwd,
+    stdio: 'inherit'
+  });
+  return child;
+}