rc-gen v1.0.1

react-components-generator

TL;DR

$ npm i -g rc-gen
# or Yarn master race!
$ yarn global add rc-gen
# And... Enjoy saved time!
$ rc-gen -p ./components -n MyComponent

Table of Content

• TL;DR
• Table of Content
• Introduction
• Prerequisites
• Install
• Usage
  • Command example
  • Options
  • Generated file templates
    • React Component template
    • React Stateless Component template
    • Styled Components template
    • Unit Test template
    • Storybook template
• Todo List
• Notes

Introduction

Are you tired of manually creating file structure for each react component module? And are you using React, styled-components, storybook and love unit testing with Enzyme? With react-components-generator you can make it with single CLI command! Feel exited? Read How to use react-components-generator

react-components-generator is best for those who use following dev-stack:

• React
• styled-components
• storybook
• Jest
• Enzyme
• Prettier
• Flow - JavaScript Static Type Checker

Prerequisites

• Node 8+
• npm

Install

npm

$ npm install --global rc-gen

yarn

$ yarn global add rc-gen

Usage

Command example

$ rc-gen -p ./components -n MyComponent -t flow -SUB --verbose

This will generate following file structure according to defined templates:

MyComponent/
    __tests__/
        index.unit.jsx
    stories/
        index.stories.js
    index.jsx
    styledComponents.js

Options

Generated file templates

Following templates are made especially for Flow. Templates for TypeScript or default ES6+ are very similar. You can check them all in lib/templates/.

React Component template

// @flow
import React, { Component } from 'react';

import * as Styled from './styledComponents';

type Props = {};

type State = {};

class MyComponent extends Component<Props, State> {
    static defaultProps = {};

    state = {};

    render() {
        return <Styled.Container>Hello world!</Styled.Container>;
    }
}

export default MyComponent;

React Stateless Component template

// @flow
import React from 'react';

import * as Styled from './styledComponents';

type Props = {};

const MyComponent = (props: Props) => <Styled.Container>Hello world!</Styled.Container>;

MyComponent.defaultProps = {};

export default MyComponent;

Styled Components template

// @flow
import styled from 'styled-components';

export const Container = styled.div``;

Unit Test template

import React from 'react';
import { shallow } from 'enzyme';

import MyComponent from '../index';

const setup = propsOverrides => {
    const props = {
        // TODO: props setup
        ...propsOverrides,
    };

    const wrapper = shallow(<MyComponent {...props} />);

    return {
        wrapper,
    };
};

describe('<MyComponent />', () => {
    test('Is defined', () => {
        expect(MyComponent).toBeDefined();
    });

    test('Renders without crash', () => {
        const { wrapper } = setup();

        expect(wrapper.exists()).toBe(true);
    });

    // TODO: more tests
});

Storybook template

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ThemeProvider } from 'styled-components';

import MyComponent from '../index';
// NOTE: use your path to theme or setup Alias in Webpack
import theme from '@project/theme';

storiesOf('MyComponent', module).add('default', () => (
    <ThemeProvider theme={theme}>
        <MyComponent />
    </ThemeProvider>
));

Todo List

• Flow Support
• Partial TypeScript Support (Feedback welcome)
• Customizable file extensions (js | jsx | ts)
• More options for style engines (css, inline-styles, ...)
• Remove shelljs dependency and rewrite it with Node fs
• Remove imports of styledComponents.js when --with-styled is not set
• Integrate Flow into project
• Refactoring, refactoring, refactoring...

Notes

✅ Used file structure and code style is set by my own preferences and based on my personal experience and is used on project I am working on. Inspired by Airbnb's JavaScript Code Style

🎉 This is my first released open-source project! Yaaay!

✌️ Feedback is welcome!