Plop setup

README.md

@@ -54,6 +54,10 @@ Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 The page will reload when you make changes.\
 You may also see any lint errors in the console.
 
+### `yarn plop`
+
+Create a new play using this command. Just answer a few questions to get started.
+
 ### `yarn build`
 
 Builds the app for production to the `build` folder.\

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "plop": "^3.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-organizational-chart": "^2.1.1",
@@ -17,7 +18,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "plop": "plop"
   },
   "eslintConfig": {
     "extends": [

plop-templates/component.hbs

@@ -0,0 +1,10 @@
+function {{component}}() {
+  return (
+    <div>
+      <h1>{{name}}</h1>
+      <p>{{description}}</p>
+    </div>
+  );
+}
+
+export default {{component}};

plop-templates/exportPlay.hbs

@@ -0,0 +1,2 @@
+export { default as {{component}} } from 'plays/{{folder}}/{{component}}';
+//add export here

plop-templates/importToMeta.hbs

@@ -0,0 +1,2 @@
+{{component}},
+//import play here

plop-templates/play.hbs

@@ -0,0 +1,12 @@
+{
+    id: '{{dashCase id}}', 
+    name: '{{name}}', 
+    description: '{{description}}',
+    component: () => {return <{{component}} />},
+    path: '/plays/{{folder}}',
+    level: '{{level}}',
+    tags: '{{tags}}',
+    github: '{{github}}',
+    blog: '{{blog}}',
+    video: '{{video}}'
+  }, //replace new play item here

plopfile.js

@@ -0,0 +1,86 @@
+module.exports = plop => {
+  // demo generator
+  plop.setGenerator('play', {
+    description: 'add a new play',
+    prompts: [
+      {
+        type: 'input',
+        name: 'id',
+        message:
+          'Give us a play id(Any string starts with pl and without a space(Example: pl-id-card ):',
+      },
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Please provide the name of the play(Example: Identity Card):',
+      },
+      {
+        type: 'input',
+        name: 'description',
+        message: 'Tell us more about the demo(Max 1024 characters):',
+      },
+      {
+        type: 'input',
+        name: 'component',
+        message:
+          'Provide the React Component name(Example: IdentityCard):',
+      },
+      {
+        type: 'input',
+        name: 'folder',
+        message: 'Provide the folder name(Example: identity-card):',
+      },
+      {
+        type: 'list',
+        name: 'level',
+        message: 'What level is this play?(Example: Intermediate):',
+        choices: ['Beginner', 'Intermediate', 'Advanced']
+      },
+      {
+        type: 'input',
+        name: 'tags',
+        message: 'Provide the tags(Example: JSX, Hooks):',
+      },
+      {
+        type: 'input',
+        name: 'github',
+        message: 'Your github username(Example: atapas):',
+      },
+      {
+        type: 'input',
+        name: 'blog',
+        message: 'Your blog url(Example: https://blog.greenroots.info):',
+      },
+      {
+        type: 'input',
+        name: 'video',
+        message: 'Your video url(Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ):',
+      },
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/plays/{{folder}}/{{component}}.js',
+        templateFile: 'plop-templates/component.hbs',
+      },
+      {
+        type: 'modify',
+        path: 'src/plays/index.js',
+        pattern: /\/\/add export here/gi,
+        templateFile: 'plop-templates/exportPlay.hbs',
+      },
+      {
+        type: 'modify',
+        path: 'src/meta/play-meta.js',
+        pattern: /\/\/import play here/gi,
+        templateFile: 'plop-templates/importToMeta.hbs',
+      },
+      {
+        type: 'modify',
+        path: 'src/meta/play-meta.js',
+        pattern: /\/\/replace new play item here/gi,
+        templateFile: 'plop-templates/play.hbs',
+      },
+    ],
+  });
+};

src/meta/play-meta.js

@@ -3,7 +3,8 @@ import {
   BasicTree, CdTimerComp,
   CurrentTimer,
   MovieContainer,
-  WhyReact
+  WhyReact,
+  //import play here
 } from "plays";
 
 const plays = [
@@ -57,7 +58,7 @@ const plays = [
     level: 'Intermediate',
     tags: 'Recursion, Tree',
     github: 'green-roots'
-  },
+  }, //replace new play item here
 ];
 
 const getAllPlays = () => {

src/plays/index.js

@@ -5,4 +5,4 @@ export { default as CdTimerComp } from 'plays/date-time-counter/CdTimerComp';
 export { default as BasicTree } from 'plays/family-tree/BasicTree';
 export { default as MovieContainer } from 'plays/movies/MovieContainer';
 export { default as WhyReact } from 'plays/why-react/WhyReact';
-
+//add export here