@pavlos-samaras/react-cli 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,75 @@
+# React CLI
+
+A simple command-line tool for generating React components and hooks.
+
+## Install
+
+```bash
+npm install -g @pavlos-samaras/react-cli
+```
+
+## Usage
+
+```bash
+ct generate <type> <name> [options]
+```
+
+`g` is a shorthand for `generate`.
+
+### Types
+
+| Type        | Output                                                                                  |
+| ----------- | --------------------------------------------------------------------------------------- |
+| `component` | A folder with the component, a CSS/SCSS module, a hook and a test file                  |
+| `hook`      | A single hook file. The name must start with `use` followed by a capital (e.g. `useAuth`) |
+
+### Options
+
+| Option                    | Description                                                              |
+| ------------------------- | ------------------------------------------------------------------------ |
+| `-d, --dir <dir>`         | Target folder inside `src/` (or inside the feature). Default depends on the type: `components` or `hooks` |
+| `-f, --feature <feature>` | Put the output under `src/features/<feature>/`                           |
+| `--ts`                    | Use TypeScript without prompting                                         |
+| `-y, --yes`               | Use the defaults (TypeScript, SCSS) and skip all prompts                 |
+
+Without `--ts` or `-y`, the CLI asks whether to use TypeScript and (for
+components) which stylesheet to use.
+
+### Output locations
+
+| Command                                  | Output                                       |
+| ---------------------------------------- | -------------------------------------------- |
+| `ct g component Button`                  | `src/components/Button/`                     |
+| `ct g component Button -f auth`          | `src/features/auth/components/Button/`       |
+| `ct g component Button -d ui`            | `src/ui/Button/`                             |
+| `ct g hook useAuth`                      | `src/shared/hooks/useAuth.ts`                |
+| `ct g hook useAuth -f auth`              | `src/features/auth/hooks/useAuth.ts`         |
+
+### Examples
+
+```bash
+# Component with all defaults, no prompts
+ct g component Button -y
+
+# TypeScript component under a feature
+ct g component LoginForm --feature auth --ts
+
+# Hook under a feature
+ct g hook useSession -f auth -y
+```
+
+## Development
+
+Run the CLI directly from the TypeScript source:
+
+```bash
+npm run dev -- generate component Button
+```
+
+To link the local build globally instead:
+
+```bash
+npm install
+npm run build
+npm link
+```

package/dist/bin/ct.js

@@ -1,25 +1,61 @@
 #!/usr/bin/env node
 import fs from "fs";
 import path from "path";
+import chalk from "chalk";
+import { createRequire } from "module";
 import { Command } from "commander";
 import { generateComponent } from "../utils/generateComponent.js";
+import { applySpinner } from "../utils/applySpinner.js";
+import { DEFAULT_DIRS, TYPES } from "../constants/generator.js";
+import { generateHook } from "../utils/generateHook.js";
+const require = createRequire(import.meta.url);
+const { version } = require("../../package.json");
 const program = new Command();
-const TYPES = ["component"];
-program.name("ct").description("My React CLI").version("1.0.0");
+program.name("ct").description("My React CLI").version(version);
 program
     .command("generate <type> <name>")
     .alias("g")
     .description("Generate a component, e.g. ct g component Button")
-    .option("-d, --dir <div>", "target folder", "src/components")
+    .option("-d, --dir <dir>", "target folder (default depends on type)")
+    .option("-f, --feature <feature>", "put component under a feature")
     .option("--ts", "create a .tsx file")
-    .action(async (type, name, options) => {
-    if (!TYPES.includes(type))
-        return console.log(`Unknown type: ${type}`);
+    .option("-y, --yes", "use default options and skip prompts")
+    .action((type, name, options) => {
+    if (!TYPES.includes(type)) {
+        console.log(chalk.red(`Unknown type: ${type}`));
+        process.exitCode = 1;
+        return;
+    }
+    const dir = options.dir ?? DEFAULT_DIRS[type];
     if (type === "component") {
-        const folder = path.join(process.cwd(), options.dir, name);
-        fs.mkdirSync(folder, { recursive: true });
-        const { file, content } = await generateComponent(name, options);
-        fs.writeFileSync(path.join(folder, file), content);
+        const pathToComponent = options.feature
+            ? `src/features/${options.feature}/${dir}`
+            : `src/${dir}`;
+        const folder = path.join(process.cwd(), pathToComponent, name);
+        applySpinner({ name, folder }, async () => {
+            fs.mkdirSync(folder, { recursive: true });
+            const { JSX, stylesheet, hook, test } = await generateComponent(folder, name, options);
+            fs.writeFileSync(JSX.pathToFile, JSX.content);
+            fs.writeFileSync(stylesheet.pathToFile, stylesheet.content);
+            fs.writeFileSync(hook.pathToFile, hook.content);
+            fs.writeFileSync(test.pathToFile, test.content);
+        });
+    }
+    if (type === "hook") {
+        if (!/^use[A-Z]\w+$/.test(name)) {
+            console.log(chalk.red("Hook must start with 'use' followed by a capital letter"));
+            process.exitCode = 1;
+            return;
+        }
+        const pathToHook = options.feature
+            ? `src/features/${options.feature}/${dir}`
+            : `src/shared/${dir}`;
+        const folder = path.join(process.cwd(), pathToHook);
+        applySpinner({ name, folder }, async () => {
+            fs.mkdirSync(folder, { recursive: true });
+            const hook = await generateHook(folder, name, options);
+            fs.writeFileSync(hook.pathToFile, hook.content);
+        });
     }
 });
 program.parse();

package/dist/bin/ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct.js","sourceRoot":"","sources":["../../src/bin/ct.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGlE,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC,CAAC;AAE5B,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAEhE,OAAO;KACJ,OAAO,CAAC,wBAAwB,CAAC;KACjC,KAAK,CAAC,GAAG,CAAC;KACV,WAAW,CAAC,kDAAkD,CAAC;KAC/D,MAAM,CAAC,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,CAAC;KAC5D,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC;KACpC,MAAM,CAAC,KAAK,EAAE,IAAY,EAAE,IAAY,EAAE,OAAyB,EAAE,EAAE;IACtE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;QAAE,OAAO,OAAO,CAAC,GAAG,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;IAEvE,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAC3D,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAE1C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACjE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,CAAC;AACH,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}
+{"version":3,"file":"ct.js","sourceRoot":"","sources":["../../src/bin/ct.ts"],"names":[],"mappings":"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"}

package/dist/constants/generator.d.ts

@@ -0,0 +1,3 @@
+export declare const TYPES: string[];
+export declare const DEFAULT_DIRS: Record<string, string>;
+//# sourceMappingURL=generator.d.ts.map

package/dist/constants/generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../src/constants/generator.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,UAAwB,CAAC;AAE3C,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAG/C,CAAC"}

package/dist/constants/generator.js

@@ -0,0 +1,6 @@
+export const TYPES = ["component", "hook"];
+export const DEFAULT_DIRS = {
+    component: "components",
+    hook: "hooks",
+};
+//# sourceMappingURL=generator.js.map

package/dist/constants/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../src/constants/generator.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,OAAO;CACd,CAAC"}

package/dist/templates/component.d.ts

@@ -1,3 +1,3 @@
-declare const buildComponentTemplate: (name: string) => string;
+declare const buildComponentTemplate: (name: string, stylesheetExt: string, componentExt: string) => string;
 export default buildComponentTemplate;
 //# sourceMappingURL=component.d.ts.map

package/dist/templates/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/templates/component.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,sBAAsB,SAAU,MAAM,WAI3C,CAAC;eAEa,sBAAsB"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/templates/component.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,sBAAsB,SACpB,MAAM,iBACG,MAAM,gBACP,MAAM,WASrB,CAAC;eAEa,sBAAsB"}

package/dist/templates/component.js

@@ -1,6 +1,10 @@
-const buildComponentTemplate = (name) => {
-    return `export const ${name} = () => {
-  return <div></div>
+const buildComponentTemplate = (name, stylesheetExt, componentExt) => {
+    return `import styles from "./${name}.module.${stylesheetExt}"
+import { use${name} } from "./use${name}.${componentExt}"
+
+export const ${name} = () => {
+  const hook = use${name}();
+  return <div className={styles.${name.toLowerCase()}></div>
 }`;
 };
 export default buildComponentTemplate;

package/dist/templates/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/templates/component.ts"],"names":[],"mappings":"AAAA,MAAM,sBAAsB,GAAG,CAAC,IAAY,EAAE,EAAE;IAC9C,OAAO,gBAAgB,IAAI;;EAE3B,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/templates/component.ts"],"names":[],"mappings":"AAAA,MAAM,sBAAsB,GAAG,CAC7B,IAAY,EACZ,aAAqB,EACrB,YAAoB,EACpB,EAAE;IACF,OAAO,yBAAyB,IAAI,WAAW,aAAa;cAChD,IAAI,iBAAiB,IAAI,IAAI,YAAY;;eAExC,IAAI;oBACC,IAAI;kCACU,IAAI,CAAC,WAAW,EAAE;EAClD,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/templates/hook.d.ts

@@ -0,0 +1,3 @@
+declare const buildHookTemplate: (name: string) => string;
+export default buildHookTemplate;
+//# sourceMappingURL=hook.d.ts.map

package/dist/templates/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/templates/hook.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,iBAAiB,SAAU,MAAM,WAEtC,CAAC;eAEa,iBAAiB"}

package/dist/templates/hook.js

@@ -0,0 +1,5 @@
+const buildHookTemplate = (name) => {
+    return `export const use${name} = () => {}`;
+};
+export default buildHookTemplate;
+//# sourceMappingURL=hook.js.map

package/dist/templates/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../src/templates/hook.ts"],"names":[],"mappings":"AAAA,MAAM,iBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;IACzC,OAAO,mBAAmB,IAAI,aAAa,CAAC;AAC9C,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/templates/stylesheet.d.ts

@@ -0,0 +1,3 @@
+declare const buildStylesheetTemplate: (name: string) => string;
+export default buildStylesheetTemplate;
+//# sourceMappingURL=stylesheet.d.ts.map

package/dist/templates/stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/templates/stylesheet.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,uBAAuB,SAAU,MAAM,WAI5C,CAAC;eAEa,uBAAuB"}

package/dist/templates/stylesheet.js

@@ -0,0 +1,7 @@
+const buildStylesheetTemplate = (name) => {
+    return `.${name.toLowerCase()} {
+  // Styles go here
+}`;
+};
+export default buildStylesheetTemplate;
+//# sourceMappingURL=stylesheet.js.map

package/dist/templates/stylesheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesheet.js","sourceRoot":"","sources":["../../src/templates/stylesheet.ts"],"names":[],"mappings":"AAAA,MAAM,uBAAuB,GAAG,CAAC,IAAY,EAAE,EAAE;IAC/C,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE;;EAE7B,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/types/generator.d.ts

@@ -0,0 +1,7 @@
+export type GeneratorOptions = {
+    dir?: string;
+    feature?: string;
+    ts?: boolean;
+    yes?: boolean;
+};
+//# sourceMappingURL=generator.d.ts.map

package/dist/types/generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../src/types/generator.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAA"}

package/dist/types/generator.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=generator.js.map

package/dist/types/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../src/types/generator.ts"],"names":[],"mappings":""}

package/dist/utils/applySpinner.d.ts

@@ -0,0 +1,5 @@
+export declare const applySpinner: (options: {
+    name: string;
+    folder: string;
+}, callback: () => void) => void;
+//# sourceMappingURL=applySpinner.d.ts.map

package/dist/utils/applySpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applySpinner.d.ts","sourceRoot":"","sources":["../../src/utils/applySpinner.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,YACd;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,YAC/B,MAAM,IAAI,SAarB,CAAC"}

package/dist/utils/applySpinner.js

@@ -0,0 +1,16 @@
+import chalk from "chalk";
+import ora from "ora";
+export const applySpinner = (options, callback) => {
+    const { name, folder } = options;
+    const spinner = ora(`Creating ${name}...`).start();
+    try {
+        callback();
+        spinner.succeed(`Created ${chalk.cyan(name)} in ${chalk.gray(folder)}`);
+    }
+    catch (error) {
+        spinner.fail(chalk.red(`Could not create ${name}`));
+        console.error(error);
+        process.exitCode = 1;
+    }
+};
+//# sourceMappingURL=applySpinner.js.map

package/dist/utils/applySpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applySpinner.js","sourceRoot":"","sources":["../../src/utils/applySpinner.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,OAAyC,EACzC,QAAoB,EACpB,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IACjC,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,IAAI,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;IAEnD,IAAI,CAAC;QACH,QAAQ,EAAE,CAAC;QACX,OAAO,CAAC,OAAO,CAAC,WAAW,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC1E,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,oBAAoB,IAAI,EAAE,CAAC,CAAC,CAAC;QACpD,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACrB,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;IACvB,CAAC;AACH,CAAC,CAAC"}

package/dist/utils/generateComponent.d.ts

@@ -1,6 +1,20 @@
-import type { ComponentOptions } from "../types/component.js";
-export declare const generateComponent: (name: string, options: ComponentOptions) => Promise<{
-    file: string;
-    content: string;
+import type { GeneratorOptions } from "../types/generator.js";
+export declare const generateComponent: (folder: string, name: string, options: GeneratorOptions) => Promise<{
+    JSX: {
+        pathToFile: string;
+        content: string;
+    };
+    stylesheet: {
+        pathToFile: string;
+        content: string;
+    };
+    hook: {
+        pathToFile: string;
+        content: string;
+    };
+    test: {
+        pathToFile: string;
+        content: string;
+    };
 }>;
 //# sourceMappingURL=generateComponent.d.ts.map

package/dist/utils/generateComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateComponent.d.ts","sourceRoot":"","sources":["../../src/utils/generateComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,eAAO,MAAM,iBAAiB,SACtB,MAAM,WACH,gBAAgB;;;EAuB1B,CAAC"}
+{"version":3,"file":"generateComponent.d.ts","sourceRoot":"","sources":["../../src/utils/generateComponent.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAM9D,eAAO,MAAM,iBAAiB,WACpB,MAAM,QACR,MAAM,WACH,gBAAgB;;QAuCrB,UAAU;QACV,OAAO;;;QAOP,UAAU;QACV,OAAO;;;QAGP,UAAU;QACV,OAAO;;;QAGP,UAAU;QACV,OAAO;;EAGZ,CAAC"}

package/dist/utils/generateComponent.js

@@ -1,22 +1,60 @@
+import path from "path";
 import prompts from "prompts";
 import buildComponentTemplate from "../templates/component.js";
-export const generateComponent = async (name, options) => {
-    let useTs = options.ts;
-    if (useTs === undefined) {
+import buildStylesheetTemplate from "../templates/stylesheet.js";
+import buildHookTemplate from "../templates/hook.js";
+const DEFAULTS = { componentExt: "tsx", style: "scss" };
+export const generateComponent = async (folder, name, options) => {
+    let componentExt;
+    if (options.ts !== undefined) {
+        componentExt = options.ts ? "tsx" : "jsx";
+    }
+    else if (options.yes) {
+        componentExt = DEFAULTS.componentExt;
+    }
+    else {
         const answer = await prompts({
             type: "select",
             name: "ts",
             message: "Use TypeScript?",
             choices: [
-                { title: "Yes", value: true },
-                { title: "No", value: false },
+                { title: "Yes", value: "tsx" },
+                { title: "No", value: "jsx" },
             ],
             initial: 0,
         });
-        useTs = answer.ts ?? false;
+        componentExt = answer.ts;
     }
-    const ext = useTs ? "tsx" : "jsx";
-    const content = buildComponentTemplate(name);
-    return { file: `${name}.${ext}`, content };
+    const stylesheetExt = options.yes
+        ? { style: DEFAULTS.style }
+        : await prompts({
+            type: "select",
+            name: "style",
+            message: "What stylesheet to use",
+            choices: [
+                { title: "CSS", value: "css" },
+                { title: "SCSS", value: "scss" },
+            ],
+            initial: 1,
+        });
+    const componentLanguage = componentExt?.replace("x", "");
+    return {
+        JSX: {
+            pathToFile: path.join(folder, `${name}.${componentExt}`),
+            content: buildComponentTemplate(name, stylesheetExt.style, componentLanguage),
+        },
+        stylesheet: {
+            pathToFile: path.join(folder, `${name}.module.${stylesheetExt.style}`),
+            content: buildStylesheetTemplate(name),
+        },
+        hook: {
+            pathToFile: path.join(folder, `use${name}.${componentLanguage}`),
+            content: buildHookTemplate(name),
+        },
+        test: {
+            pathToFile: path.join(folder, `${name}.test.${componentLanguage}`),
+            content: "",
+        },
+    };
 };
 //# sourceMappingURL=generateComponent.js.map

package/dist/utils/generateComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateComponent.js","sourceRoot":"","sources":["../../src/utils/generateComponent.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAG/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,EACpC,IAAY,EACZ,OAAyB,EACzB,EAAE;IACF,IAAI,KAAK,GAAG,OAAO,CAAC,EAAE,CAAC;IAEvB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC;YAC3B,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,iBAAiB;YAC1B,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC7B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;aAC9B;YACD,OAAO,EAAE,CAAC;SACX,CAAC,CAAC;QACH,KAAK,GAAG,MAAM,CAAC,EAAE,IAAI,KAAK,CAAC;IAC7B,CAAC;IAED,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,IAAI,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC;AAC7C,CAAC,CAAC"}
+{"version":3,"file":"generateComponent.js","sourceRoot":"","sources":["../../src/utils/generateComponent.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAE/D,OAAO,uBAAuB,MAAM,4BAA4B,CAAC;AACjE,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,MAAM,QAAQ,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,EACpC,MAAc,EACd,IAAY,EACZ,OAAyB,EACzB,EAAE;IACF,IAAI,YAAgC,CAAC;IAErC,IAAI,OAAO,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC7B,YAAY,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,CAAC;SAAM,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;QACvB,YAAY,GAAG,QAAQ,CAAC,YAAY,CAAC;IACvC,CAAC;SAAM,CAAC;QACN,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC;YAC3B,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,iBAAiB;YAC1B,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBAC9B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;aAC9B;YACD,OAAO,EAAE,CAAC;SACX,CAAC,CAAC;QACH,YAAY,GAAG,MAAM,CAAC,EAAY,CAAC;IACrC,CAAC;IAED,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG;QAC/B,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE;QAC3B,CAAC,CAAC,MAAM,OAAO,CAAC;YACZ,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,wBAAwB;YACjC,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;aACjC;YACD,OAAO,EAAE,CAAC;SACX,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAE,CAAC;IAE1D,OAAO;QACL,GAAG,EAAE;YACH,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,IAAI,YAAY,EAAE,CAAC;YACxD,OAAO,EAAE,sBAAsB,CAC7B,IAAI,EACJ,aAAa,CAAC,KAAK,EACnB,iBAAiB,CAClB;SACF;QACD,UAAU,EAAE;YACV,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,WAAW,aAAa,CAAC,KAAK,EAAE,CAAC;YACtE,OAAO,EAAE,uBAAuB,CAAC,IAAI,CAAC;SACvC;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,IAAI,iBAAiB,EAAE,CAAC;YAChE,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC;SACjC;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,SAAS,iBAAiB,EAAE,CAAC;YAClE,OAAO,EAAE,EAAE;SACZ;KACF,CAAC;AACJ,CAAC,CAAC"}

package/dist/utils/generateHook.d.ts

@@ -0,0 +1,6 @@
+import type { GeneratorOptions } from "../types/generator.js";
+export declare const generateHook: (folder: string, name: string, options: GeneratorOptions) => Promise<{
+    pathToFile: string;
+    content: string;
+}>;
+//# sourceMappingURL=generateHook.d.ts.map

package/dist/utils/generateHook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateHook.d.ts","sourceRoot":"","sources":["../../src/utils/generateHook.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAM9D,eAAO,MAAM,YAAY,WACf,MAAM,QACR,MAAM,WACH,gBAAgB;;;EA2B1B,CAAC"}

package/dist/utils/generateHook.js

@@ -0,0 +1,32 @@
+import path from "path";
+import prompts from "prompts";
+import buildHookTemplate from "../templates/hook.js";
+const DEFAULTS = { componentExt: "tsx", style: "scss" };
+export const generateHook = async (folder, name, options) => {
+    let componentExt;
+    if (options.ts !== undefined) {
+        componentExt = options.ts ? "tsx" : "jsx";
+    }
+    else if (options.yes) {
+        componentExt = DEFAULTS.componentExt;
+    }
+    else {
+        const answer = await prompts({
+            type: "select",
+            name: "ts",
+            message: "Use TypeScript?",
+            choices: [
+                { title: "Yes", value: "tsx" },
+                { title: "No", value: "jsx" },
+            ],
+            initial: 0,
+        });
+        componentExt = answer.ts;
+    }
+    const componentLanguage = componentExt?.replace("x", "");
+    return {
+        pathToFile: path.join(folder, `${name}.${componentLanguage}`),
+        content: buildHookTemplate(name),
+    };
+};
+//# sourceMappingURL=generateHook.js.map

package/dist/utils/generateHook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateHook.js","sourceRoot":"","sources":["../../src/utils/generateHook.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,MAAM,QAAQ,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAExD,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAC/B,MAAc,EACd,IAAY,EACZ,OAAyB,EACzB,EAAE;IACF,IAAI,YAAgC,CAAC;IAErC,IAAI,OAAO,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC7B,YAAY,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,CAAC;SAAM,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;QACvB,YAAY,GAAG,QAAQ,CAAC,YAAY,CAAC;IACvC,CAAC;SAAM,CAAC;QACN,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC;YAC3B,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,iBAAiB;YAC1B,OAAO,EAAE;gBACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBAC9B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;aAC9B;YACD,OAAO,EAAE,CAAC;SACX,CAAC,CAAC;QACH,YAAY,GAAG,MAAM,CAAC,EAAY,CAAC;IACrC,CAAC;IACD,MAAM,iBAAiB,GAAG,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAE,CAAC;IAE1D,OAAO;QACL,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,IAAI,iBAAiB,EAAE,CAAC;QAC7D,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC;KACjC,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,30 +1,37 @@
-{
-  "name": "@pavlos-samaras/react-cli",
-  "version": "1.0.0",
-  "author": "sammern-stack",
-  "description": "A CLI to generate React code",
-  "keywords": ["react", "cli", "generator"],
-  "license": "MIT",
-  "type": "module",
-  "bin": {
-    "ct": "./dist/bin/ct.js"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsx src/bin/ct.ts",
-    "build:link": "npm run build && npm link"
-  },
-  "dependencies": {
-    "commander": "^15.0.0",
-    "prompts": "^2.4.2"
-  },
-  "devDependencies": {
-    "@types/node": "^26.6.6",
-    "@types/prompts": "^2.4.9",
-    "tsx": "^4.23.15",
-    "typescript": "^7.0.2"
-  },
-  "files": [
-    "dist"
-  ]
-}
+{
+  "name": "@pavlos-samaras/react-cli",
+  "version": "1.1.0",
+  "author": "sammern-stack",
+  "description": "A CLI to generate React code",
+  "keywords": [
+    "react",
+    "cli",
+    "generator"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "ct": "./dist/bin/ct.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "dev": "tsx src/bin/ct.ts",
+    "build:link": "npm run build && npm link"
+  },
+  "dependencies": {
+    "chalk": "^6.0.1",
+    "commander": "^15.0.0",
+    "ora": "^10.0.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.6",
+    "@types/prompts": "^2.4.9",
+    "tsx": "^4.23.15",
+    "typescript": "^7.0.2"
+  },
+  "files": [
+    "dist"
+  ]
+}

package/dist/types/component.d.ts

@@ -1,5 +0,0 @@
-export type ComponentOptions = {
-    dir: string;
-    ts?: boolean;
-};
-//# sourceMappingURL=component.d.ts.map

package/dist/types/component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/types/component.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,CAAA"}

package/dist/types/component.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=component.js.map

package/dist/types/component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/types/component.ts"],"names":[],"mappings":""}