@pavlos-samaras/react-cli 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,37 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# React CLI
+
+A simple command-line tool for generating React components.
+
+## Build and link
+
+```bash
+npm install
+npm run build
+npm link
+```
+
+## Usage
+
+Generate a component in `src/components/<Name>`:
+
+```bash
+ct generate component Button
+```
+
+You can also use the `g` shorthand, choose a different target directory, or
+create a TypeScript file:
+
+```bash
+ct g component Button --dir src/ui --ts
+```
+
+Without `--ts`, the CLI asks whether to use TypeScript and creates either a
+`.tsx` or `.jsx` file.
+
+## Development
+
+Run the CLI directly from the TypeScript source:
+
+```bash
+npm run dev -- generate component Button
+```

package/dist/bin/ct.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=ct.d.ts.map

package/dist/bin/ct.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ct.d.ts","sourceRoot":"","sources":["../../src/bin/ct.ts"],"names":[],"mappings":""}

package/dist/bin/ct.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import fs from "fs";
+import path from "path";
+import { createRequire } from "module";
+import { Command } from "commander";
+import { generateComponent } from "../utils/generateComponent.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(version);
+program
+    .command("generate <type> <name>")
+    .alias("g")
+    .description("Generate a component, e.g. ct g component Button")
+    .option("-d, --dir <div>", "target folder", "components")
+    .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}`);
+    if (type === "component") {
+        const pathToComponent = options.feature
+            ? `src/features/${options.feature}/${options.dir}`
+            : `src/${options.dir}`;
+        const folder = path.join(process.cwd(), pathToComponent, name);
+        fs.mkdirSync(folder, { recursive: true });
+        const { JSX, stylesheet, hook, test } = await generateComponent(name, options);
+        fs.writeFileSync(path.join(folder, JSX.file), JSX.content);
+        fs.writeFileSync(path.join(folder, stylesheet.file), stylesheet.content);
+        fs.writeFileSync(path.join(folder, hook.file), hook.content);
+        fs.writeFileSync(path.join(folder, test.file), test.content);
+    }
+});
+program.parse();
+//# sourceMappingURL=ct.js.map

package/dist/bin/ct.js.map

@@ -0,0 +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,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGlE,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,oBAAoB,CAAwB,CAAC;AAEzE,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,YAAY,CAAC;KACxD,MAAM,CAAC,yBAAyB,EAAE,+BAA+B,CAAC;KAClE,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,eAAe,GAAG,OAAO,CAAC,OAAO;YACrC,CAAC,CAAC,gBAAgB,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE;YAClD,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QAC/D,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAE1C,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,iBAAiB,CAC7D,IAAI,EACJ,OAAO,CACR,CAAC;QAEF,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;QAC3D,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;QACzE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7D,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC;AACH,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/dist/templates/component.d.ts

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,11 @@
+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;
+//# sourceMappingURL=component.js.map

package/dist/templates/component.js.map

@@ -0,0 +1 @@
+{"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/component.d.ts

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

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

@@ -0,0 +1 @@
+{"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,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,CAAA"}

package/dist/types/component.js

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

package/dist/types/component.js.map

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

package/dist/utils/generateComponent.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateComponent.d.ts","sourceRoot":"","sources":["../../src/utils/generateComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAI9D,eAAO,MAAM,iBAAiB,SACtB,MAAM,WACH,gBAAgB;;QAiCrB,IAAI;QACJ,OAAO;;;QAOP,IAAI;QACJ,OAAO;;;QAGP,IAAI;QACJ,OAAO;;;QAGP,IAAI;QACJ,OAAO;;EAGZ,CAAC"}

package/dist/utils/generateComponent.js

@@ -0,0 +1,50 @@
+import prompts from "prompts";
+import buildComponentTemplate from "../templates/component.js";
+import buildStylesheetTemplate from "../templates/stylesheet.js";
+import buildHookTemplate from "../templates/hook.js";
+export const generateComponent = async (name, options) => {
+    let componentExt;
+    if (options.ts === undefined) {
+        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 stylesheetExt = 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: {
+            file: `${name}.${componentExt}`,
+            content: buildComponentTemplate(name, stylesheetExt.style, componentLanguage),
+        },
+        stylesheet: {
+            file: `${name}.module.${stylesheetExt.style}`,
+            content: buildStylesheetTemplate(name),
+        },
+        hook: {
+            file: `use${name}.${componentLanguage}`,
+            content: buildHookTemplate(name),
+        },
+        test: {
+            file: `${name}.test.${componentLanguage}`,
+            content: "",
+        },
+    };
+};
+//# sourceMappingURL=generateComponent.js.map

package/dist/utils/generateComponent.js.map

@@ -0,0 +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;AAE/D,OAAO,uBAAuB,MAAM,4BAA4B,CAAC;AACjE,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,EACpC,IAAY,EACZ,OAAyB,EACzB,EAAE;IACF,IAAI,YAAY,CAAC;IAEjB,IAAI,OAAO,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC7B,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,MAAM,OAAO,CAAC;QAClC,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,wBAAwB;QACjC,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;YAC9B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;SACjC;QACD,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,YAAY,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAE,CAAC;IAE1D,OAAO;QACL,GAAG,EAAE;YACH,IAAI,EAAE,GAAG,IAAI,IAAI,YAAY,EAAE;YAC/B,OAAO,EAAE,sBAAsB,CAC7B,IAAI,EACJ,aAAa,CAAC,KAAK,EACnB,iBAAiB,CAClB;SACF;QACD,UAAU,EAAE;YACV,IAAI,EAAE,GAAG,IAAI,WAAW,aAAa,CAAC,KAAK,EAAE;YAC7C,OAAO,EAAE,uBAAuB,CAAC,IAAI,CAAC;SACvC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM,IAAI,IAAI,iBAAiB,EAAE;YACvC,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC;SACjC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,GAAG,IAAI,SAAS,iBAAiB,EAAE;YACzC,OAAO,EAAE,EAAE;SACZ;KACF,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,35 @@
-{
-  "name": "@pavlos-samaras/react-cli",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@pavlos-samaras/react-cli",
+  "version": "1.0.1",
+  "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": {
+    "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"
+  ]
+}