component-gen-cli 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,215 @@
+# component-gen-cli
+
+[![npm version](https://img.shields.io/npm/v/component-gen-cli.svg)](https://www.npmjs.com/package/component-gen-cli)
+[![Node engines](https://img.shields.io/node/v/component-gen-cli.svg)](https://www.npmjs.com/package/component-gen-cli)
+
+**CLI to scaffold starter components** for **[React](https://react.dev/)**, **[Vue 3](https://vuejs.org/)**, **[Angular](https://angular.dev/)**, **[Svelte](https://svelte.dev/)**, **[SolidJS](https://solidjs.com/)**, and **[Next.js](https://nextjs.org/)**. Use JavaScript or TypeScript via a single flag.
+
+Binaries installed from this package:
+
+| Command | Purpose |
+|---------|---------|
+| **`cg`** | Short default (shown in docs below) |
+| **`component-gen`** | Same CLI, longer name |
+
+---
+
+## Requirements
+
+- **Node.js ≥ 18**
+
+---
+
+## Install
+
+**Run once (no global install)**
+
+```bash
+npx component-gen-cli@latest
+```
+
+Opens the built-in help and examples.
+
+**Globally**
+
+```bash
+npm install -g component-gen-cli
+cg --help
+```
+
+**As a dev tool in another project**
+
+```bash
+npm install --save-dev component-gen-cli
+npx cg --help
+```
+
+---
+
+## Quick start
+
+```bash
+# React + TypeScript into ./src/components
+npx component-gen-cli@latest generate ProductCard -f react --typescript --out ./src/components
+
+# Same, short form
+cg g ProductCard -f react --ts -o ./src/components
+```
+
+Run **`cg`** with **no arguments** to print the full help block (same examples as **`cg examples`**).
+
+---
+
+## Supported frameworks
+
+Use **`-f`** or **`--framework`** with exactly one value:
+
+| Value | Typical output |
+|-------|----------------|
+| **`react`** | `<Name>.jsx` or `<Name>.tsx` |
+| **`vue`** | `<Name>.vue` (Vue 3 `<script setup>`) |
+| **`angular`** | `<kebab>/<kebab>.component.ts` plus `.html` and `.css` or `.scss` |
+| **`svelte`** | `<Name>.svelte` |
+| **`solid`** | `<Name>.jsx` / `<Name>.tsx` (JSX component) |
+| **`next`** | `<Name>.jsx` / `<Name>.tsx` (Next-compatible React; optional `'use client'`) |
+
+Angular uses a **standalone** component and **selector** `app-<kebab>` (from your component name).
+
+---
+
+## CLI reference
+
+### Discover commands
+
+```bash
+cg                           # Help + examples
+cg frameworks                # List targets (aliases: cg fw, cg targets)
+cg examples                  # Examples only (alias: cg guide)
+cg generate --help           # All flags for generate (alias: cg g -h)
+cg help generate
+cg --version                 # Published version
+```
+
+### `generate` / `g`
+
+```text
+cg generate <ComponentName> -f <framework> [options]
+cg g <ComponentName> -f <framework> [options]
+```
+
+`<ComponentName>` can be PascalCase (`UserCard`), kebab-case (`user-card`), or spaced words (`user card`). Names are normalized to PascalCase for file symbols and sensible paths.
+
+| Option | Description |
+|--------|--------------|
+| **`-f, --framework <fw>`** | **Required.** `react`, `vue`, `angular`, `svelte`, `solid`, or `next`. |
+| **`-o, --out <dir>`** | Destination folder (default: current directory `.`). Parent folders are created as needed. |
+| **`--typescript`, `--ts`** | TypeScript dialect (`.tsx`, `<script lang="ts">`, etc.). Omit for plain JS where supported. Angular component class is **always `.ts`**; this flag aligns other TS-related choices where relevant. |
+| **`--scss`** | **Angular only:** use **`*.component.scss`** instead of **`.css`**. |
+| **`--client`** | **Next.js only:** insert **`'use client'`** at top of file (client boundary). |
+
+---
+
+## Examples by stack
+
+<details>
+<summary><strong>React</strong></summary>
+
+```bash
+cg g Avatar -f react --ts --out ./src/components
+cg g Avatar -f react --out ./src/components
+```
+
+Creates `Avatar.tsx` or `Avatar.jsx`.
+
+</details>
+
+<details>
+<summary><strong>Vue 3</strong></summary>
+
+```bash
+cg g SearchBar -f vue --ts --out ./components
+cg g SearchBar -f vue --out ./components
+```
+
+Creates `SearchBar.vue`.
+
+</details>
+
+<details>
+<summary><strong>Angular</strong></summary>
+
+```bash
+cg g MetricsTile -f angular --out ./src/app/widgets
+cg g MetricsTile -f angular --scss --out ./src/app/widgets
+```
+
+Creates `<kebab>/` containing `*.component.ts`, `*.component.html`, and `*.component.css` or `*.scss`.
+
+</details>
+
+<details>
+<summary><strong>Svelte</strong></summary>
+
+```bash
+cg g Toast -f svelte --ts --out ./lib
+```
+
+Creates `Toast.svelte`.
+
+</details>
+
+<details>
+<summary><strong>SolidJS</strong></summary>
+
+```bash
+cg g Counter -f solid --ts --out ./src/ui
+```
+
+Creates `Counter.tsx` / `Counter.jsx`.
+
+</details>
+
+<details>
+<summary><strong>Next.js</strong></summary>
+
+```bash
+cg g Sidebar -f next --ts --out ./components
+cg g Sidebar -f next --ts --client --out ./components
+```
+
+Creates `Sidebar.tsx` or `Sidebar.jsx`. Use **`--client`** when the scaffold uses hooks or browser-only APIs in the App Router.
+
+</details>
+
+---
+
+## Programmatic use (advanced)
+
+Published entry is ESM **`src/index.js`**. You may import (**after** resolving from `node_modules` in your toolchain):
+
+```js
+import { generateComponent, FRAMEWORKS } from "component-gen-cli";
+```
+
+Typical callers run the **`cg`** CLI instead.
+
+---
+
+## How the npm readme is updated
+
+The page at **npmjs.com** shows **`README.md` from your package tarball**. After you edit this file **at the repo root**:
+
+1. Bump **`version`** in **`package.json`** (required for each new publish unless you unpublished).
+2. Run **`npm publish --access public`** (add **`--otp <code>`** if npm asks).
+
+---
+
+## Contributing & issues
+
+Use your repository’s tracker for bugs and ideas. Pull requests improving templates or frameworks are welcome once you open a fork and keep changes focused.
+
+---
+
+## License
+
+MIT

package/bin/cli.js

@@ -10,17 +10,68 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const pkgPath = join(__dirname, "..", "package.json");
 const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
 
+const examplesBlock = `
+Examples:
+  npx component-gen-cli@latest generate MyCard -f react --ts --out ./src/components
+  cg g Navbar -f vue --out ./src/components
+  cg g Chart -f angular --scss --out ./src/app
+  cg g Panel -f svelte --ts --out ./lib
+  cg g Icon -f solid --ts --out ./src/ui
+  cg g Drawer -f next --ts --client --out ./components
+
+Tips:
+  Use "cg frameworks" or "cg examples" anytime.
+`;
+
+const frameworksBlock = FRAMEWORKS.map((fw) => `  • ${fw}`).join("\n");
+
 const program = new Command();
 
+program.configureHelp({
+  sortSubcommands: true,
+});
+
 program
   .name("cg")
-  .description("Generate UI components for popular JavaScript frameworks")
-  .version(pkg.version ?? "0.0.0");
+  .description(
+    `Generate starter components for JS/TS (${FRAMEWORKS.join(", ")})`
+  )
+  .version(pkg.version ?? "0.0.0")
+  .addHelpText("after", `\nQuick start:${examplesBlock}\n`);
+
+program
+  .command("examples")
+  .alias("guide")
+  .description("Show copy-paste usage examples")
+  .action(() => {
+    console.log(`component-gen-cli — usage examples`);
+    console.log(examplesBlock);
+    console.log(
+      `Commands:\n  cg generate <name> -f …   (alias: cg g …)\n  cg frameworks               list supported targets`
+    );
+    console.log(`\nDetailed flags:  cg generate --help  or  cg g -h`);
+  });
+
+program
+  .command("frameworks")
+  .aliases(["fw", "targets"])
+  .description(`List frameworks (${FRAMEWORKS.length} supported)`)
+  .action(() => {
+    console.log("Supported frameworks (use -f or --framework):");
+    console.log(frameworksBlock);
+    console.log(`
+Optional language:
+  --typescript / --ts  TypeScript where supported (.tsx, <script lang="ts">, etc.)
+Angular only:
+  --scss               use .scss instead of .css
+Next.js only:
+  --client             prepend 'use client' for client components`);
+  });
 
 program
   .command("generate")
   .alias("g")
-  .argument("<name>", "Component name (PascalCase recommended, e.g. UserCard)")
+  .argument("<name>", "Component name (e.g. UserCard, user-card)")
   .addOption(
     new Option("-f, --framework <fw>", `Framework (${FRAMEWORKS.join("|")})`)
       .choices([...FRAMEWORKS])
@@ -28,9 +79,10 @@ program
   )
   .option("-o, --out <dir>", "Output directory (default: current directory)", ".")
   .option("--ts, --typescript", "Use TypeScript where applicable", false)
-  .option("--scss", "Use SCSS for style files (Angular / optional CSS splits)", false)
+  .option("--scss", "Use SCSS for style files (Angular)", false)
   .option("--client", "Next.js: add \"use client\" directive", false)
-  .description("Create a component file (or Angular multi-file scaffold)")
+  .description("Write component file(s)")
+  .addHelpText("after", `\n${examplesBlock.trim()}\n`)
   .action(async (name, opts) => {
     try {
       const result = await generateComponent(name, opts);
@@ -44,4 +96,10 @@ program
     }
   });
 
-program.parse();
+const argv = process.argv.slice(2);
+if (argv.length === 0) {
+  program.outputHelp({ error: false });
+  process.exit(0);
+}
+
+program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "component-gen-cli",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Generate framework components for React, Vue, Angular, Svelte, Solid, and Next.js",
   "type": "module",
   "bin": {