@dofu-lab/simui-cli 0.1.0

package/README.md

@@ -0,0 +1,148 @@
+# @simui/cli
+
+A CLI to add [SimUI](https://simui.dev) Angular components to your project instantly.
+
+## Usage
+
+```bash
+# Using npx (no install required)
+npx @simui/cli add accordion-01
+
+# Or install globally
+npm install -g @simui/cli
+simui add accordion-01
+```
+
+## Commands
+
+### `simui add <component>`
+
+Fetches a component from the SimUI registry and writes it to your project.
+
+```bash
+simui add select-01
+simui add dialog-03
+simui add button-07
+```
+
+**Options:**
+
+| Flag | Default | Description |
+|------|---------|-------------|
+| `-p, --path <dir>` | `src/app/components` | Output directory (relative to cwd) |
+
+**Examples:**
+
+```bash
+# Default path: src/app/components/accordion-01.component.ts
+simui add accordion-01
+
+# Custom output directory
+simui add badge-05 --path src/shared/ui
+
+# Short flag alias
+simui add input-12 -p src/features/auth
+```
+
+## What it does
+
+1. **Fetches** the component TypeScript source from `https://simui.dev/registry/<name>.json`
+2. **Writes** the file to the resolved output path
+3. **Detects** required `@spartan-ng/helm/*` and `@ng-icons/*` imports
+4. **Prompts** you to install them:
+   - Spartan UI packages — installed via `npx @spartan-ng/cli@latest add <package>`
+   - `@ng-icons/*` packages  — installed via your detected package manager (pnpm / yarn / npm)
+
+## Requirements
+
+- Node.js ≥ 18
+- An Angular project with [Spartan UI](https://spartan.ng) configured
+
+## Browse components
+
+Visit [simui.dev](https://simui.dev) to browse all available components and their previews.
+
+## Publishing
+
+Follow these steps to publish a new version of `@simui/cli` to the npm registry.
+
+1. Run tests and linters
+
+```bash
+# from packages/cli
+npm test     # if you have tests
+npm run lint # if you have a lint script
+```
+
+2. Bump the package version (creates a git commit and tag)
+
+```bash
+cd packages/cli
+npm version patch   # or `minor` / `major`
+# push the commit and tag afterwards
+```
+
+3. Update changelog (optional)
+
+Edit `packages/cli/CHANGELOG.md` or add release notes for the new version.
+
+4. Build the package
+
+```bash
+cd packages/cli
+npm run build
+```
+
+5. Dry-run publish / pack
+
+```bash
+# create a tarball for inspection
+npm pack
+
+# simulate publish (shows what will be published)
+npm publish --dry-run
+```
+
+6. Login to npm (if needed)
+
+```bash
+npm whoami || npm login
+```
+
+7. Publish to npm
+
+```bash
+cd packages/cli
+npm publish --access public
+```
+
+8. Push changes and tags to the remote repo
+
+```bash
+# from repo root
+git push origin main
+git push --tags
+```
+
+9. Create a GitHub release (optional)
+
+```bash
+gh release create vX.Y.Z --title "vX.Y.Z" --notes "Short changelog"
+```
+
+10. Verify installation
+
+```bash
+# try via npx
+npx @simui/cli@latest add accordion-01
+
+# or install globally
+npm install -g @simui/cli
+simui add accordion-01
+```
+
+Notes:
+- If your package is scoped (e.g. `@simui/cli`) publishing publicly requires `--access public`.
+- If your npm account has 2FA enabled, you'll be prompted for an OTP when publishing.
+- For CI-based publishing, use an `NPM_TOKEN` and run `npm publish` from the pipeline.
+

package/dist/index.js

@@ -0,0 +1,177 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/add.ts
+import * as p from "@clack/prompts";
+import chalk from "chalk";
+import { existsSync as existsSync2, mkdirSync, writeFileSync } from "fs";
+import { join as join2, resolve } from "path";
+import { execSync } from "child_process";
+
+// src/utils/registry.ts
+var REGISTRY_BASE_URL = "https://simui.dev/registry";
+async function fetchComponent(name) {
+  const url = `${REGISTRY_BASE_URL}/${name}.json`;
+  let response;
+  try {
+    response = await fetch(url);
+  } catch {
+    throw new Error(`Network error: could not reach ${url}`);
+  }
+  if (!response.ok) {
+    if (response.status === 404 || response.status >= 500) {
+      throw new Error(
+        `Component "${name}" was not found in the SimUI registry.
+Browse available components at https://simui.dev`
+      );
+    }
+    throw new Error(`Failed to fetch "${name}" (HTTP ${response.status})`);
+  }
+  let data;
+  try {
+    data = await response.json();
+  } catch {
+    throw new Error(`Invalid response from registry for "${name}"`);
+  }
+  if (typeof data !== "object" || data === null || !("content" in data) || typeof data.content !== "string") {
+    throw new Error(`Unexpected registry format for "${name}" \u2014 expected { content: string }`);
+  }
+  return data.content;
+}
+
+// src/utils/deps.ts
+import { existsSync } from "fs";
+import { join } from "path";
+function parseDeps(content) {
+  const spartanHelmSet = /* @__PURE__ */ new Set();
+  const ngIconsSet = /* @__PURE__ */ new Set();
+  const spartanRegex = /from\s+['"]@spartan-ng\/helm\/([a-z0-9-]+)['"]/g;
+  let match;
+  while ((match = spartanRegex.exec(content)) !== null) {
+    spartanHelmSet.add(match[1]);
+  }
+  const ngIconsRegex = /from\s+['"](@ng-icons\/[a-z0-9-]+)['"]/g;
+  while ((match = ngIconsRegex.exec(content)) !== null) {
+    ngIconsSet.add(match[1]);
+  }
+  return {
+    spartanHelm: [...spartanHelmSet],
+    ngIcons: [...ngIconsSet]
+  };
+}
+function detectPackageManager(cwd) {
+  if (existsSync(join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync(join(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+
+// src/commands/add.ts
+async function addComponent(componentName, options) {
+  const cwd = process.cwd();
+  p.intro(chalk.bold.cyan(`SimUI`) + chalk.dim(` \u2014 adding ${componentName}`));
+  const spinner2 = p.spinner();
+  spinner2.start("Fetching component from registry\u2026");
+  let content;
+  try {
+    content = await fetchComponent(componentName);
+    spinner2.stop(chalk.green("Component fetched"));
+  } catch (err) {
+    spinner2.stop(chalk.red("Failed to fetch component"));
+    p.outro(chalk.red(String(err instanceof Error ? err.message : err)));
+    process.exit(1);
+  }
+  const outputDir = options.path ? resolve(cwd, options.path) : join2(cwd, "src", "app", "components");
+  const outputFile = join2(outputDir, `${componentName}.component.ts`);
+  if (existsSync2(outputFile)) {
+    const overwrite = await p.confirm({
+      message: `${chalk.yellow(outputFile.replace(cwd + "/", ""))} already exists. Overwrite?`,
+      initialValue: false
+    });
+    if (p.isCancel(overwrite) || !overwrite) {
+      p.outro(chalk.dim("Aborted."));
+      process.exit(0);
+    }
+  }
+  try {
+    mkdirSync(outputDir, { recursive: true });
+    writeFileSync(outputFile, content, "utf-8");
+  } catch (err) {
+    p.outro(chalk.red(`Could not write file: ${err instanceof Error ? err.message : err}`));
+    process.exit(1);
+  }
+  const relativePath = outputFile.replace(cwd + "/", "");
+  p.log.success(`Created ${chalk.cyan(relativePath)}`);
+  const { spartanHelm, ngIcons } = parseDeps(content);
+  const totalDeps = spartanHelm.length + ngIcons.length;
+  if (totalDeps === 0) {
+    p.outro(chalk.green("Done! No extra dependencies detected."));
+    return;
+  }
+  p.log.info(chalk.bold("Dependencies detected in this component:"));
+  for (const d of spartanHelm) {
+    p.log.message(`  ${chalk.cyan("@spartan-ng/helm/")}${d}   ${chalk.dim("(via Spartan CLI)")}`);
+  }
+  for (const d of ngIcons) {
+    p.log.message(`  ${chalk.cyan(d)}`);
+  }
+  const shouldInstall = await p.confirm({
+    message: `Install ${totalDeps} dependenc${totalDeps === 1 ? "y" : "ies"} now?`,
+    initialValue: true
+  });
+  if (p.isCancel(shouldInstall) || !shouldInstall) {
+    p.log.warn("Skipped dependency installation. Install them manually before using the component.");
+    p.outro(chalk.dim("Done."));
+    return;
+  }
+  const pm = detectPackageManager(cwd);
+  p.log.info(`Using ${chalk.bold(pm)}`);
+  for (const helmPkg of spartanHelm) {
+    const installSpinner = p.spinner();
+    installSpinner.start(`Installing @spartan-ng/helm/${helmPkg}\u2026`);
+    try {
+      execSync(`npx @spartan-ng/cli@latest add ${helmPkg}`, {
+        cwd,
+        stdio: "pipe"
+      });
+      installSpinner.stop(chalk.green(`@spartan-ng/helm/${helmPkg} installed`));
+    } catch (err) {
+      installSpinner.stop(chalk.red(`Failed to install @spartan-ng/helm/${helmPkg}`));
+      const stderr = err instanceof Error && "stderr" in err ? String(err.stderr) : "";
+      p.log.warn(chalk.dim(stderr.trim() || String(err)));
+    }
+  }
+  if (ngIcons.length > 0) {
+    const ngIconsStr = ngIcons.join(" ");
+    const installCmd = pm === "pnpm" ? `pnpm add ${ngIconsStr}` : pm === "yarn" ? `yarn add ${ngIconsStr}` : `npm install ${ngIconsStr}`;
+    const installSpinner = p.spinner();
+    installSpinner.start(`Installing ${ngIconsStr}\u2026`);
+    try {
+      execSync(installCmd, { cwd, stdio: "pipe" });
+      installSpinner.stop(chalk.green(`${ngIconsStr} installed`));
+    } catch (err) {
+      installSpinner.stop(chalk.red(`Failed to install ${ngIconsStr}`));
+      p.log.warn(`Run manually: ${chalk.bold(installCmd)}`);
+    }
+  }
+  p.outro(chalk.green("All done! Your component is ready to use."));
+}
+
+// src/index.ts
+import { createRequire } from "module";
+import { fileURLToPath } from "url";
+import { dirname as dirname2, join as join3 } from "path";
+var require2 = createRequire(import.meta.url);
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname2(__filename);
+var pkg = require2(join3(__dirname, "..", "package.json"));
+var program = new Command();
+program.name("simui").description("Add SimUI Angular components to your project").version(pkg.version);
+program.command("add <component>").description("Fetch a SimUI component from the registry and add it to your project").option(
+  "-p, --path <path>",
+  "Output directory relative to cwd (default: src/app/components)"
+).action(async (component, opts) => {
+  await addComponent(component, { path: opts.path });
+});
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@dofu-lab/simui-cli",
+  "version": "0.1.0",
+  "description": "CLI to add SimUI components to your Angular project",
+  "type": "module",
+  "main": "./dist/index.js",
+  "bin": {
+    "simui": "./dist/index.js"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "chalk": "^5.4.1",
+    "commander": "^13.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "angular",
+    "simui",
+    "spartan",
+    "cli",
+    "components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tdphuong/simui"
+  }
+}