component-gen-cli 1.0.1 → 1.0.2

package/README.md

@@ -1,138 +1,212 @@
-# component-gen-cli (`cg`)
+# component-gen-cli
 
-CLI to scaffold starter **components** across common **JavaScript / TypeScript** stacks.
+[![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)
 
-## Supported frameworks
+**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 |
 
-| 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'` |
+---
+
+## Requirements
 
-## Prerequisites
+- **Node.js ≥ 18**
 
-- **Node.js 18+**
-- Optionally **authenticated npm** (`npm login`) — only if publishing this package yourself
+---
 
 ## Install
 
-**No install — use via npx:**
+**Run once (no global install)**
 
 ```bash
-npx component-gen-cli@latest --help
+npx component-gen-cli@latest
 ```
 
-**Global:**
+Opens the built-in help and examples.
+
+**Globally**
 
 ```bash
 npm install -g component-gen-cli
 cg --help
 ```
 
-The binaries are **`cg`** and **`component-gen`** (same program).
-
----
-
-## Commands
+**As a dev tool in another project**
 
-Run **`cg`** with **no arguments** for the main help panel (examples included).
+```bash
+npm install --save-dev component-gen-cli
+npx cg --help
+```
 
-### `cg generate` (alias `cg g`)
+---
 
-Creates file(s). **`-f`** / **`--framework`** is required.
+## Quick start
 
 ```bash
-cg generate <Name> --framework <react|vue|angular|svelte|solid|next> [options]
-cg g <Name> -f react [options]
+# 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
 ```
 
-| 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"` |
+Run **`cg`** with **no arguments** to print the full help block (same examples as **`cg examples`**).
 
-**Help for flags only:**
+---
 
-```bash
-cg generate --help
-cg g -h
-```
+## Supported frameworks
 
-### `cg examples` (alias `cg guide`)
+Use **`-f`** or **`--framework`** with exactly one value:
 
-Prints usage examples without opening the generic help screen.
+| 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'`) |
 
-### `cg frameworks` (aliases **`fw`**, **`targets`**)
+Angular uses a **standalone** component and **selector** `app-<kebab>` (from your component name).
 
-Lists supported frameworks and related flags.
+---
+
+## CLI reference
 
-### Built-in Commander help
+### Discover commands
 
 ```bash
-cg help
+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 --help
-cg -h
+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). |
+
 ---
 
-## Copy-paste examples
+## Examples by stack
 
-**React (TypeScript)**
+<details>
+<summary><strong>React</strong></summary>
 
 ```bash
-npx component-gen-cli@latest generate MyCard -f react --ts --out ./src/components
+cg g Avatar -f react --ts --out ./src/components
+cg g Avatar -f react --out ./src/components
 ```
 
-**React (JavaScript)**
+Creates `Avatar.tsx` or `Avatar.jsx`.
+
+</details>
+
+<details>
+<summary><strong>Vue 3</strong></summary>
 
 ```bash
-cg g Footer -f react --out ./src/components
+cg g SearchBar -f vue --ts --out ./components
+cg g SearchBar -f vue --out ./components
 ```
 
-**Vue**
+Creates `SearchBar.vue`.
+
+</details>
+
+<details>
+<summary><strong>Angular</strong></summary>
 
 ```bash
-cg g Navbar -f vue --ts --out ./src/components
+cg g MetricsTile -f angular --out ./src/app/widgets
+cg g MetricsTile -f angular --scss --out ./src/app/widgets
 ```
 
-**Angular (+ SCSS)**
+Creates `<kebab>/` containing `*.component.ts`, `*.component.html`, and `*.component.css` or `*.scss`.
+
+</details>
+
+<details>
+<summary><strong>Svelte</strong></summary>
 
 ```bash
-cg g ChartPanel -f angular --scss --out ./src/app
+cg g Toast -f svelte --ts --out ./lib
 ```
 
-**Svelte**
+Creates `Toast.svelte`.
+
+</details>
+
+<details>
+<summary><strong>SolidJS</strong></summary>
 
 ```bash
-cg g Sidebar -f svelte --ts --out ./src/lib
+cg g Counter -f solid --ts --out ./src/ui
 ```
 
-**Solid**
+Creates `Counter.tsx` / `Counter.jsx`.
+
+</details>
+
+<details>
+<summary><strong>Next.js</strong></summary>
 
 ```bash
-cg g IconBtn -f solid --ts --out ./src/ui
+cg g Sidebar -f next --ts --out ./components
+cg g Sidebar -f next --ts --client --out ./components
 ```
 
-**Next.js (client component)**
+Creates `Sidebar.tsx` or `Sidebar.jsx`. Use **`--client`** when the scaffold uses hooks or browser-only APIs in the App Router.
 
-```bash
-cg g Modal -f next --ts --client --out ./components
+</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).
+
 ---
 
-## Publish a new release (maintainers)
+## Contributing & issues
 
-1. Bump **`version`** in `package.json`.
-2. `npm publish --access public` — add `--otp <code>` if npm requires 2FA.
+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.
 
 ---
 

package/package.json

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