Atom snippets for react components

snippets.cson

'.source.js.jsx':
  'ReactJS Component Unit Test Template':
    'prefix': 'compspec'
    'body': """
      /**
       * components/$1.spec.js
       */
      import React from 'react';
      import {shallow} from 'enzyme';
      import $1 from './$1';

      const setup = propOverrides => {
        const minProps = {$2};
        const props = {
          ...minProps,
          ...propOverrides,
        };
        const output = shallow(<$1 {...props} />);
        return {
          props,
          output,
        };
      };

      describe('<$1 />', () => {
        it('does not explode', () => {
          // This will fail if component throws
          const {output} = setup();
          expect(output.exists()).toBeTruthy();
        });
        it('renders a valid react component with minimum props', () => {
          // This will fail if null is returned with valid minProps
          const {output} = setup();
          expect(output.node).toBeTruthy();
        });
      });
    """
    'description': 'Common imports for .spec.js test files'
    'leftLabelHTML': '<span style="color:#61dafb;">ReactJS</span>'
    'rightLabelHTML': '<span style="color:#99424f;">Test</span>'
  'ReactJS Stateless Component Template':
    'prefix': 'compfn'
    'body': """
      /**
       * @module {Function} components/$1
       * @flow
       */
      import React from 'react';
      import {PropTypes} from 'prop-types';

      /**
       *
       * @param {Object} - props
       * @returns {Function} <$1 />
       */
      const $1 = ({$2}: {$2}): React$Element<*> => ;
      $1.propTypes = {$2};
      $1.displayName = '$1';

      export default $1;
    """
    'description': 'Stateless react component template'
    'leftLabelHTML': '<span style="color:#61dafb;">ReactJS</span>'
  'ReactJS Class Component Template':
    'prefix': 'compclass'
    'body': """
      /**
       * @module {Function} components/$1
       * @flow
       */
      import React, {Component} from 'react';
      import {PropTypes} from 'prop-types';

      /**
       * <$1 />
       *
       * @extends React.Component
       */
      export default class $1 extends Component {

        props: {$2}

        static propTypes = {$2}

        static displayName = '$1';

        render(): React$Element<*> {
          const {$2} = this.props;

          return ();
        }
      }
    """
  'ReactJS HOC Template':
    'prefix': 'comphoc'
    'body': """
      /**
       * @module {Function} components/$1
       * @flow
       */
      import React, {Component} from 'react';
      import {getDisplayName} from '../utils';

      /**
       *
       * @alias $1
       * @param {Function} WrappedComponent - component to decorate
       * @returns {Function} Decorated Component
       */
      export default (
        WrappedComponent: Class<React$Component<*, *, *>>,
      ): Class<React$Component<*, *, *>> =>
        class $1 extends Component {

          static displayName = `$1(${getDisplayName(WrappedComponent)})`;

          render(): React$Element<*> {
            return <WrappedComponent {...this.props} />;
          }
        };
    """
    'description': 'Stateful react component template'
    'leftLabelHTML': '<span style="color:#61dafb;">ReactJS</span>'