component-gen-cli 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,141 @@
+# component-gen-cli (`cg`)
+
+CLI to scaffold starter **components** across common **JavaScript / TypeScript** stacks.
+
+## Supported frameworks
+
+| Flag `-f` | What you get |
+|-----------|----------------|
+| `react` | `.jsx` or `.tsx` functional component |
+| `vue` | Single-file `.vue` (Vue 3, `<script setup>`) |
+| `angular` | Standalone Angular component (`ts` + `.html` + `.css`/`.scss`) |
+| `svelte` | `.svelte` file |
+| `solid` | Solid JSX component |
+| `next` | Next.js-ready React file; `--client` adds `'use client'` |
+
+## Prerequisites
+
+- **Node.js 18+**
+- Optionally **authenticated npm** (`npm login`) — only if publishing this package yourself
+
+## Install
+
+**No install — use via npx:**
+
+```bash
+npx component-gen-cli@latest --help
+```
+
+**Global:**
+
+```bash
+npm install -g component-gen-cli
+cg --help
+```
+
+The binaries are **`cg`** and **`component-gen`** (same program).
+
+---
+
+## Commands
+
+Run **`cg`** with **no arguments** for the main help panel (examples included).
+
+### `cg generate` (alias `cg g`)
+
+Creates file(s). **`-f`** / **`--framework`** is required.
+
+```bash
+cg generate <Name> --framework <react|vue|angular|svelte|solid|next> [options]
+cg g <Name> -f react [options]
+```
+
+| Option | Effect |
+|--------|--------|
+| `-o`, `--out <dir>` | Output folder (default: `.`) |
+| `--typescript`, `--ts` | TypeScript where applicable |
+| `--scss` | Angular: use `.scss` instead of `.css` |
+| `--client` | Next.js: add `"use client"` |
+
+**Help for flags only:**
+
+```bash
+cg generate --help
+cg g -h
+```
+
+### `cg examples` (alias `cg guide`)
+
+Prints usage examples without opening the generic help screen.
+
+### `cg frameworks` (aliases **`fw`**, **`targets`**)
+
+Lists supported frameworks and related flags.
+
+### Built-in Commander help
+
+```bash
+cg help
+cg help generate
+cg --help
+cg -h
+```
+
+---
+
+## Copy-paste examples
+
+**React (TypeScript)**
+
+```bash
+npx component-gen-cli@latest generate MyCard -f react --ts --out ./src/components
+```
+
+**React (JavaScript)**
+
+```bash
+cg g Footer -f react --out ./src/components
+```
+
+**Vue**
+
+```bash
+cg g Navbar -f vue --ts --out ./src/components
+```
+
+**Angular (+ SCSS)**
+
+```bash
+cg g ChartPanel -f angular --scss --out ./src/app
+```
+
+**Svelte**
+
+```bash
+cg g Sidebar -f svelte --ts --out ./src/lib
+```
+
+**Solid**
+
+```bash
+cg g IconBtn -f solid --ts --out ./src/ui
+```
+
+**Next.js (client component)**
+
+```bash
+cg g Modal -f next --ts --client --out ./components
+```
+
+---
+
+## Publish a new release (maintainers)
+
+1. Bump **`version`** in `package.json`.
+2. `npm publish --access public` — add `--otp <code>` if npm requires 2FA.
+
+---
+
+## 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.1",
   "description": "Generate framework components for React, Vue, Angular, Svelte, Solid, and Next.js",
   "type": "module",
   "bin": {