crcf2/lib/data/componentData.js

Creates single react component folder structure

const stringHelper = require('../utils/stringHelper');

/**
 * Creates default React component
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createReactComponent(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import React, { Component } from 'react';
  import './${name}.css'

class ${name} extends Component {
  render() {
    return (
      <div>
        ${name}
      </div>
    );
  }
}

export default ${name};
  `;
}

/**
 * Creates React stateless functional component
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createReactFunctionalComponent(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import React from 'react';
  import './${name}.css'

const ${name} = () => {
  return (
    <div>
      ${name}
    </div>
  );
}

export default ${name};
  `;
}

/**
 * Creates Redux container
 *
 * @param {String} containerName - Component name
 * @returns {String}
 */
function createReduxContainer(containerName) {
  const name = stringHelper.capitalizeFirstLetter(containerName);
  const componentName = containerName.substring(0, containerName.indexOf('Container'));

  return `import { connect } from 'react-redux';
import ${componentName} from '../../Components/${componentName}';

const mapStateToProps = state => ({
});

const mapDispatchToProps = { };

const ${name} = connect(mapStateToProps, mapDispatchToProps)(${componentName});

export default ${name};
  `;
}

/**
 * Creates Redux action
 *
 * @param {String} actionName - Component name
 * @returns {String}
 */
function createReduxActions(actionName) {
  const name = stringHelper.capitalizeFirstLetter(actionName);

  return `import 'isomorphic-fetch';
  `;
}

/**
 * Creates default React Native component
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createReactNativeComponent(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import React, { Component } from 'react';
  import { View, Text } from 'react-native';

class ${name} extends Component {
  render() {
    return (
      <View>
        <Text>${name}</Text>
      </View>
    );
  }
}

export default ${name};
  `;
}

/**
 * Creates default Typescript React Native component
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createTypeScriptReactNativeComponent(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import * as React from 'react';
  import { View, Text } from 'react-native';

class ${name} extends React.Component<any, any>  {
  public render() {
    return (
      <View>
        <Text>${name}</Text>
      </View>
    );
  }
}

export default ${name};
  `;
}

/**
 * Creates default Typescript React component
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createTypeScriptReactComponent(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import * as React from 'react';

class ${name} extends React.Component<any, any>  {
  public render() {
    return (
      <div>
        ${name}
      </div>
    );
  }
}

export default ${name};
  `;
}

/**
 * Creates default React component with prop types
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createReactComponentWithProps(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import React, { Component } from 'react';
import './${name}.css'
import PropTypes from 'prop-types';

class ${name} extends Component {
  render() {
    return (
      <div>
        ${name}
      </div>
    );
  }
}

${name}.propTypes = {

};

export default ${name};
  `;
}

/**
 * Creates React stateless functional component with prop types
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createReactFunctionalComponentWithProps(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import React from 'react';
import PropTypes from 'prop-types';

const ${name} = () => {
  return (
    <div>
      ${name}
    </div>
  );
}

${name}.propTypes = {

};

export default ${name};
  `;
}

/**
 * Creates default index file
 *
 * @param {String} componentName - Component name
 * @param {Boolean} upperCase - If true then capitalize first letter
 * @returns {String}
 */
function createIndex(componentName, upperCase) {
  const name = upperCase === true ? stringHelper.capitalizeFirstLetter(componentName) : componentName
  return `import ${name} from './${name}';

  export default ${name};`;
}

/**
 * Creates default index file
 *
 * @param {String} actionName - Action name
 * @param {Boolean} upperCase - If true then capitalize first letter
 * @returns {String}
 */

function createIndexForActions(actionName, upperCase) {
  const name = upperCase === true ? stringHelper.capitalizeFirstLetter(actionName) : actionName
  return `import * as ${name} from './${name}';

  export default ${name};`;
}

/**
 * Creates index file includes all folder
 *
 * @param {Array} folders - folders array
 * @returns {String}
 */
function createIndexForFolders(folders) {
  return `${folders
    .map(folderName => `import ${folderName} from './${folderName}' \n`)
    .join('')}export {
    ${folders
    .map((folderName, index) => {
      if (index === folders.length - 1) return folderName;

      return `${folderName}, \n`;
    })
    .join('')}
}`;
}

/**
 * Creates default React Native component with prop types
 *
 * @param {String} componentName - Component name
 * @returns {String}
 */
function createReactNativeComponentWithProps(componentName) {
  const name = stringHelper.capitalizeFirstLetter(componentName);

  return `import React, { Component } from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';

class ${name} extends Component {
  render() {
    return (
      <View>
        <Text>${name}</Text>
      </View>
    );
  }
}

${name}.propTypes = {

};

export default ${name};
  `;
}
/**
 * Creates default test file for 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 createTest(componentName, upperCase, isTypeScript) {
  const componentNameUpperCase = stringHelper.capitalizeFirstLetter(componentName);

  return `import ${isTypeScript ? '* as' : ''} React from 'react';
import { shallow } from 'enzyme';
import ${componentNameUpperCase} from './${
  upperCase === true ? componentNameUpperCase : componentName
}';

describe('${componentNameUpperCase} ', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<${componentNameUpperCase} />);
  })

  it('renders', () => {
    expect(wrapper).toMatchSnapshot();
  });
});
  `;
}

/**
 * Creates default test file for container
 *
 * @param {String} containerName - Container name
 * @param {Boolean} upperCase - If true then capitalize first letter
 * @returns {String}
 */
function createTestForContainer(containerName, upperCase) {
  const containerNameUpperCase = stringHelper.capitalizeFirstLetter(containerName);

  return `import React from 'react';
import { shallow } from 'enzyme';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import ${containerNameUpperCase} from './${
  upperCase === true ? containerNameUpperCase : containerName
}';

const mockStore = configureStore([thunk]);
const { initialState } = global;

describe('${containerNameUpperCase}', () => {
  let wrapper;
  let store;

  beforeEach(() => {
    store = mockStore(initialState);
    wrapper = shallow(<Provider store={store}><${containerNameUpperCase} /></Provider>);
  });

  it('renders without crashing', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });
});
  `;
}

/**
 * Creates default test file for actions
 *
 * @param {String} actionName - Container name
 * @param {Boolean} upperCase - If true then capitalize first letter
 * @returns {String}
 */
function createTestForActions(actionName, upperCase) {
  const actionNameUpperCase = stringHelper.capitalizeFirstLetter(actionName);

  return `import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fetchMock } from 'fetch-mock';
import * as ${actionNameUpperCase} from './${
  upperCase === true ? actionNameUpperCase : actionName
}';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
  `;
}

module.exports = {
  createReactComponent,
  createReduxContainer,
  createReduxActions,
  createReactFunctionalComponent,
  createReactNativeComponent,
  createTypeScriptReactComponent,
  createTypeScriptReactNativeComponent,
  createReactComponentWithProps,
  createReactFunctionalComponentWithProps,
  createReactNativeComponentWithProps,
  createIndex,
  createIndexForFolders,
  createIndexForActions,
  createTest,
  createTestForContainer,
  createTestForActions,
};