Added feature to allow test file as spec.js & Extended it to create t…

README.md

@@ -67,16 +67,33 @@ myComponent
 ├── myComponent.test.js
 ```
 
+### if story book is enable
+
+```sh
+myComponent
+├── index.js
+├── myComponent.js
+├── myComponent.css
+├── myComponent.test.js
+├── myComponent.stories.js
+```
+
 ## Set default config
 
 There is support for setting default config options, so you only have to set you desired config once. This makes creating your components even easier. All you have to do is follow one of these three options.
 
 In your package.json, add a **"crcf"** property key with array of default config options
 
+"stories" is to enable story book component
+
+"spec" to have the file extensions
+
 ```sh
 "crcf": [
  "scss",
  "proptypes",
+ "stories",
+ "spec"
 ]
 ```
 
@@ -86,6 +103,7 @@ Create a rc file named **.crcfrc** in the root of your project and insert a arra
 [
  "scss",
  "proptypes",
+ "stories"
 ]
 ```
 
@@ -94,7 +112,8 @@ Create a config file named **.crcf.config.js** in the root of your project and i
 ```sh
 [
  "scss",
- "proptypes",
+ "proptypes"
+ "stories"
 ]
 ```
 
@@ -111,7 +130,8 @@ So now all you have to do is type **npx crcf componentName** and you will get al
  "createindex",
  "uppercase",
  "jsx",
- "proptypes"
+ "proptypes",
+ "stories"
 ]
 ```
 
@@ -153,6 +173,7 @@ $ npx crcf --help
  -p, --proptypes Adds prop-types to component
  -u, --uppercase Component files start on uppercase letter
  -h, --help output usage information
+ -sb, --stories Add Storie file to component
 ```
 
 ## Author

examples/button-click/button-click.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class BUTTONCLICK extends Component {
+ render() {
+ return <div>BUTTONCLICK</div>;
+ }
+}
+
+BUTTONCLICK.propTypes = {};
+
+export default BUTTONCLICK;

examples/button-click/button-click.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import BUTTONCLICK from './button-click';
+storiesOf('Button-click', module).add('Button-click', () => (
+ <div>
+ <BUTTONCLICK />
+ </div>
+));

examples/button-click/index.js

@@ -0,0 +1 @@
+export { default } from './button-click';

examples/package.json

@@ -0,0 +1,21 @@
+{
+ "name": "examples",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "create-react-component-folder": "^0.1.26",
+ "lodash": "^4.17.11"
+ },
+ "crcf": [
+ "scss",
+ "proptypes",
+ "stories",
+ "spec"
+ ]
+}

lib/data/componentData.js

@@ -7,7 +7,7 @@ const stringHelper = require('../utils/stringHelper');
  * @returns {String}
  */
 function createReactComponent(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import React, { Component } from 'react';
 
@@ -32,7 +32,7 @@ export default ${name};
  * @returns {String}
  */
 function createReactFunctionalComponent(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import React from 'react';
 
@@ -55,7 +55,7 @@ export default ${name};
  * @returns {String}
  */
 function createReactNativeComponent(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import React, { Component } from 'react';
  import { View, Text } from 'react-native';
@@ -81,7 +81,7 @@ export default ${name};
  * @returns {String}
  */
 function createTypeScriptReactNativeComponent(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import * as React from 'react';
  import { View, Text } from 'react-native';
@@ -107,7 +107,7 @@ export default ${name};
  * @returns {String}
  */
 function createTypeScriptReactComponent(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import * as React from 'react';
 
@@ -132,7 +132,7 @@ export default ${name};
  * @returns {String}
  */
 function createReactComponentWithProps(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -162,7 +162,7 @@ export default ${name};
  * @returns {String}
  */
 function createReactFunctionalComponentWithProps(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import React from 'react';
 import PropTypes from 'prop-types';
@@ -192,7 +192,7 @@ export default ${name};
  */
 function createIndex(componentName, upperCase) {
  return `export { default } from './${
- upperCase === true ? stringHelper.capitalizeFirstLetter(componentName) : componentName
+ upperCase === true ? stringHelper.componentNameWithoutSpecialCharacter(componentName) : componentName
  }';`;
 }
 
@@ -223,7 +223,7 @@ function createIndexForFolders(folders) {
  * @returns {String}
  */
 function createReactNativeComponentWithProps(componentName) {
- const name = stringHelper.capitalizeFirstLetter(componentName);
+ const name = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import React, { Component } from 'react';
 import { View, Text } from 'react-native';
@@ -255,7 +255,7 @@ export default ${name};
  * @returns {String}
  */
 function createTest(componentName, upperCase, isTypeScript) {
- const componentNameUpperCase = stringHelper.capitalizeFirstLetter(componentName);
+ const componentNameUpperCase = stringHelper.componentNameWithoutSpecialCharacter(componentName);
 
  return `import ${isTypeScript ? '* as' : ''} React from 'react';
 import { shallow } from 'enzyme';
@@ -271,6 +271,28 @@ describe('<${componentNameUpperCase} />', () => {
 });
  `;
 }
+/**
+ * Creates Stories for React component 
+ *
+ * @param {String} componentName - Component name
+ * @param {Boolean} upperCase - If true then capitalize first letter
+ * @param {Boolean} isTypeScript - Boolean check for Typescript
+ * @returns {String}
+ */
+function createReactComponentStories(componentName,upperCase,isTypeScript) {
+ const componentNameUpperCase = stringHelper.capitalizeFirstLetter(componentName);
+ const componentNameWithoutSpecialCharacter = stringHelper.componentNameWithoutSpecialCharacter(componentName);
+ return `import ${isTypeScript ? '* as' : ''} React from 'react';
+import { storiesOf } from '@storybook/react'
+import ${componentNameWithoutSpecialCharacter} from './${componentName}';
+storiesOf('${componentNameUpperCase}', module).add('${componentNameUpperCase}', () => (
+ <div>
+ <${componentNameWithoutSpecialCharacter} />
+ </div>
+
+))`;
+}
+
 
 module.exports = {
  createReactComponent,
@@ -284,4 +306,5 @@ module.exports = {
  createIndex,
  createIndexForFolders,
  createTest,
+ createReactComponentStories,
 };

lib/index.js

@@ -16,6 +16,7 @@ const {
  createReactNativeComponentWithProps,
  createIndex,
  createTest,
+ createReactComponentStories,
 } = require('./data/componentData');
 const formatPrettier = require('./utils/format');
 const stringHelper = require('./utils/stringHelper');
@@ -51,6 +52,7 @@ program
  .option('-p, --proptypes', 'Adds prop-types to component')
  .option('-u, --uppercase', 'Component files start on uppercase letter')
  .option('-d, --default', 'Uses a default configuration if available')
+ .option('-sb, --stories', 'Add Storie file to component')
  .parse(process.argv);
 
 // Remove Node process args options
@@ -65,7 +67,7 @@ args = removeOptionsFromArgs(args);
  */
 function createFiles(componentName, componentPath, cssFileExt) {
  const {
- typescript, reactnative, jsx, notest, uppercase, functional, proptypes,
+ typescript, reactnative, jsx, notest, uppercase, functional, proptypes,stories,
  } = program;
 
  return new Promise((resolve) => {
@@ -84,9 +86,15 @@ function createFiles(componentName, componentPath, cssFileExt) {
  const prettierParser = isTypeScript ? 'typescript' : 'babylon';
 
  if (!notest && !(config && config.includes('notest'))) {
- files.push(`${name}.test.${ext}`);
+ if((config && config.includes('spec')))
+ files.push(`${name}.spec.${ext}`);
+ else
+ files.push(`${name}.test.${ext}`);
+ }
+ // Add Storie for storbook
+ if (config && config.includes('stories')) { 
+ files.push(`${name}.stories.${ext}`); 
  }
-
  // Add css | less | sass file if desired
  if (cssFileExt && !isNative) {
  files.push(`${name}.${cssFileExt}`);
@@ -144,7 +152,7 @@ function createFiles(componentName, componentPath, cssFileExt) {
  isTypeScript ? data : formatPrettier(data, prettierParser),
  ),
  );
- } else if (file.indexOf(`.test.${ext}`) > -1) {
+ } else if ((file.indexOf(`.test.${ext}`) || file.indexOf(`.spec.${ext}`)) > -1) {
  data = createTest(
  name,
  uppercase || (config && config.includes('uppercase')),
@@ -159,11 +167,26 @@ function createFiles(componentName, componentPath, cssFileExt) {
  ),
  );
  }
+ } 
+ if ((file.indexOf(`.stories.${ext}`) || file.indexOf(`.stories.${ext}`)) > -1) {
+ data = createReactComponentStories(
+ name,
+ uppercase || (config && config.includes('uppercase')),
+ isTypeScript,
+ );
+ promises.push(
+ fs.writeFileAsync(
+ filePath,
+ isTypeScript ? data : formatPrettier(data, prettierParser),
+ ),
+ );
+
  } else if (
  file.indexOf('.css') > -1
  || file.indexOf('.less') > -1
  || file.indexOf('.scss') > -1
- ) {
+ )
+ {
  promises.push(fs.writeFileAsync(filePath, ''));
  }
  }

lib/utils/stringHelper.js

@@ -1,11 +1,27 @@
+var _ = require('lodash');
+
 /**
  * Capitalize first letter in string
  * @param {String} string
  */
 function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
 }
-
+/**
+ *Capatalize every first letter in component name
+ *button-click --> Button-Click for Stroy book
+ * @param {*} string
+ * @returns
+ */
+function componentNameWithoutSpecialCharacter(string){
+ var filenameslist=_.split(string,'-');
+ var upperCase=filenameslist.map(function(filename) {
+ return filename.toUpperCase(); 
+ });
+ var joinName=upperCase.map(function(elem){return elem;}).join("");; 
+ return joinName;
+}
 module.exports = {
  capitalizeFirstLetter,
+ componentNameWithoutSpecialCharacter,
 };