Merge pull request #5 from hvg2416/feature/class-component-template

ADD class based component's templates

Author: studcroc

bin/index.ts

@@ -22,6 +22,11 @@ const args: any = yargs
     description:
       "Set this flag to true to scaffold new react component along with it's css style file",
     type: "boolean",
+  })
+  .option("class", {
+    description:
+      "Set this flag to true to scaffold new class based react component",
+    type: "boolean",
   }).argv;
 
 let params: RCTParams = parseParams(args);

src/lib/gc.ts

@@ -1,7 +1,8 @@
 import { mkdirSync, writeFileSync } from "fs";
 import { chdir } from "process";
 import { RCTParams } from "../models/rct_params";
-import { getRCTSTemplate } from "../templates/rc-ts-template";
+import { getRCCCTemplate } from "../templates/rc-cc-template";
+import { getRCFCTemplate } from "../templates/rc-fc-template";
 import { transformIntoPascalCase } from "../utils/transformers/pascalcase.transformer";
 
 const generateReactComponent = (params: RCTParams) => {
@@ -18,7 +19,7 @@ const generateReactComponent = (params: RCTParams) => {
 
         if(params.flags.css) writeFileSync(`${componentName}.css`, "", {});
 
-        writeFileSync(`${componentName}.${params.flags.js? "js": "tsx"}`, getRCTSTemplate(params), {});
+        writeFileSync(`${componentName}.${params.flags.js? "js": "tsx"}`, params.flags.class? getRCCCTemplate(params): getRCFCTemplate(params), {});
 
         console.log(`Done`);
     } catch (error) {

src/models/rct_params.ts

@@ -5,6 +5,7 @@ export interface RCTParams {
 export interface RCTFlags {
     js: boolean,
     css: boolean,
+    class: boolean,
 }
 export interface RCTCommand {
     name: string,

src/templates/rc-cc-template.ts

@@ -0,0 +1,23 @@
+import { RCTParams } from "../models/rct_params";
+
+export function getRCCCTemplate(params: RCTParams) {
+  if (!params.flags.js) {
+    return `import React from 'react'; ${
+      params.flags.css ? `\nimport './${params.command.args[0]}.css';` : ""
+    }\n\ntype ${params.command.args[0]}Props = {\n\n};\n\ntype ${
+      params.command.args[0]
+    }State = {\n\n};\n\nclass ${
+      params.command.args[0]
+    } extends React.Component<${params.command.args[0]}Props, ${
+      params.command.args[0]
+    }State> {\n\n\tstate: ${
+      params.command.args[0]
+    }State = {\n\n\t};\n\n\trender() {\n\t\treturn (\n\t\t\t<></>\n\t\t);\n\t}\n}\n\nexport default ${params.command.args[0]};`;
+  } else {
+    return `import React from 'react';${
+      params.flags.css ? `\nimport './${params.command.args[0]}.css';` : ""
+    }\n\nclass ${
+      params.command.args[0]
+    } extends React.Component {\n\trender() {\n\t\treturn <></>;\n\t}\n}\n\nexport default ${params.command.args[0]};`;
+  }
+}

src/templates/rc-fc-template.ts

@@ -0,0 +1,19 @@
+import { RCTParams } from "../models/rct_params";
+
+export function getRCFCTemplate(params: RCTParams) {
+  if (params.flags.js) {
+    return `import React from 'react';${
+      params.flags.css ? `\nimport './${params.command.args[0]}.css';` : ""
+    }\n\nexport const ${
+      params.command.args[0]
+    } = (props) => {\n\n\treturn (\n\t\t<></>\n\t);\n\n}`;
+  } else {
+    return `import React from 'react';${
+      params.flags.css ? `\nimport './${params.command.args[0]}.css';` : ""
+    }\n\ntype ${params.command.args[0]}Props = {\n\n}\n\nexport const ${
+      params.command.args[0]
+    } = (props: ${
+      params.command.args[0]
+    }Props) => {\n\n\treturn (\n\t\t<></>\n\t);\n\n}`;
+  }
+}

src/templates/rc-ts-template.ts

@@ -22,6 +22,7 @@ export function parseParams(args: any): RCTParams {
     flags: {
       js: false,
       css: false,
+      class: false,
       ...flags,
     },
   };