feat: camelCase handling + index for default export

Author: yannvr

README.md

@@ -19,21 +19,32 @@ or
 ### Usage
 You can substitute `yarn` with `npm run`
 - Create any components type using prompts: 
-    - `yarn create-component`
     - `npm run create-component`
+    - `yarn run create-component`
 - Create styled components interactively using: 
-    - `yarn create-component`
     - `npm run create-component` 
-- Or without prompt: 
-    - `yarn create-component <ComponentName> <stateless|class|pure> <targetDir> [styled] [story]`
-    - `npm run create-component <ComponentName> <stateless|class|pure> <targetDir> [styled] [story]`
+    - `yarn run create-component`
+- Or without any prompt: 
+    ```
+        npx create-component -- 
+        --name <ComponentName> 
+        --componentType (stateless|class|pure) 
+        --componentCase (camel|kebab)
+        --directory <targetDir> 
+        --story <Boolean>
+        --syled <Boolean>
+    ```
     
 ### Examples
 
-- `npx create-component -- --name PureComponent --directory src/components --comptype pure --styled true --story false` will generate a pure component without a story boook
-- `npx create-component avatar src/component/profile pure true true` will create a pure component `<Avatar />` in `src/component/profile` including test and story files
+- `npx create-component -- --name FunctionComponent  --directory src/components --componentType stateless --styled true --story false --componentCase camel` 
+will create a function component `<FunctionComponent />` in `src/component/profile` including test and story files
 
 ![screen recording](http://g.recordit.co/XMuQeSSrgy.gif)
 
+### TODO
+- Handle typescript
+- Cypress template
+
 Note: the template can generate unstyled component but you'll just have to remove styled component references.
 PR welcome for different handling templates with other conventions/libraries

package-lock.json

@@ -24,6 +24,7 @@
   "author": "Yann VR",
   "license": "MIT",
   "dependencies": {
+    "lodash": "^4.17.11",
     "plop": "^2.3.0"
   }
 }

package.json

@@ -0,0 +1,3 @@
+import {{name}} from './{{name}}'
+
+export default {{name}}

plop-templates/component/index.class-component.hbs renamed to plop-templates/component/component.class-component.hbs

@@ -1,4 +1,5 @@
 const path = require('path')
+const { upperFirst, kebabCase, camelCase } = require('lodash')
 
 module.exports = function(plop) {
 
@@ -23,10 +24,11 @@ module.exports = function(plop) {
         message: 'Target directory:',
         default: 'src/components',
       },
+
       {
         type: 'list',
-        name: 'comptype',
-        message: 'What component type is it?',
+        name: 'componentType',
+        message: 'Component type?',
         choices: [
           { name: 'stateless', value: 'stateless', checked: true },
           { name: 'class', value: 'class' },
@@ -47,6 +49,17 @@ module.exports = function(plop) {
         message: 'Create story?',
         default: true,
       },
+
+      {
+        type: 'list',
+        name: 'componentCase',
+        message: 'What component type is it?',
+        choices: [
+          { name: 'camelCase', value: 'camel', checked: true },
+          { name: 'kebabCase', value: 'kebab' },
+        ],
+      },
+
     ],
 
     actions: function(data) {
@@ -55,53 +68,66 @@ module.exports = function(plop) {
       const targetDir = data['directory']
       const baseDir = cwd + '/' + targetDir
 
-      switch (data.comptype) {
+      plop.setHelper('selectedComponentCase', function (text) {
+        if (data.componentCase === 'kebab') {
+          return kebabCase(text)
+        }
+        return upperFirst(camelCase(text))
+      });
+
+      switch (data.componentType) {
         case 'class':
           actions.push({
             type: 'add',
-            path: baseDir + '/{{kebabCase name}}/index.jsx',
-            templateFile: 'plop-templates/component/index.class-component.hbs',
+            path: baseDir + '/{{selectedComponentCase name}}/{{selectedComponentCase name}}.jsx',
+            templateFile: 'plop-templates/component/component.class-component.hbs',
           })
           break
         case 'pure':
           actions.push({
             type: 'add',
-            path: baseDir + '/{{kebabCase name}}/index.jsx',
-            templateFile: 'plop-templates/component/index.pure-component.hbs',
+            path: baseDir + '/{{selectedComponentCase name}}/{{selectedComponentCase name}}.jsx',
+            templateFile: 'plop-templates/component/component.pure-component.hbs',
           })
           break
         case 'stateless':
         default:
           actions.push({
             type: 'add',
-            path: baseDir + '/{{kebabCase name}}/index.jsx',
-            templateFile: 'plop-templates/component/index.stateless-component.hbs',
+            path: baseDir + '/{{selectedComponentCase name}}/{{selectedComponentCase name}}.jsx',
+            templateFile: 'plop-templates/component/component.stateless-component.hbs',
           })
           break
       }
 
       if (data.story) {
         actions.push({
           type: 'add',
-          path: baseDir + '/{{kebabCase name}}/story.js',
+          path: baseDir + '/{{selectedComponentCase name}}/story.js',
           templateFile: 'plop-templates/component/story.hbs',
         })
       }
 
       if (data.styled) {
         actions.push({
           type: 'add',
-          path: baseDir + '/{{kebabCase name}}/style.js',
+          path: baseDir + '/{{selectedComponentCase name}}/style.js',
           templateFile: 'plop-templates/component/style.hbs',
         })
       }
 
       actions.push({
         type: 'add',
-        path: baseDir + '/{{kebabCase name}}/test.jsx',
+        path: baseDir + '/{{selectedComponentCase name}}/test.jsx',
         templateFile: 'plop-templates/component/test.hbs',
       })
 
+      actions.push({
+        type: 'add',
+        path: baseDir + '/{{selectedComponentCase name}}/index.js',
+        templateFile: 'plop-templates/component/index.hbs',
+      })
+
       return actions
     },
   })

plop-templates/component/index.pure-component.hbs renamed to plop-templates/component/component.pure-component.hbs

@@ -1349,7 +1349,7 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
-plop@^2.1.0:
+plop@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/plop/-/plop-2.3.0.tgz#e9b3ccf9d8fdbce077ee7377b75fcc5f511df562"
   integrity sha512-CfTMYmfeCwlipzVcDWI6edxRwdZx47d8BRL3VSv5g+BB8JcLXaSzATkU0flG/aIVl4cxe1Y0rGkrtPjpDm7ySQ==