web-redux snippets

snippets.cson

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson

'.source.scss':
  'X-Small Breakpoint':
    'prefix': 'bpxs'
    'body': """
      @include breakpoint (xsmall-only) {
        ${1}
      }
    """
  'Medium Breakpoint':
    'prefix': 'bpm'
    'body': """
      @include breakpoint (medium) {
        ${1}
      }
    """
  'Large Breakpoint':
    'prefix': 'bpl'
    'body': """
      @include breakpoint (large) {
        ${1}
      }
    """
  'XLarge Breakpoint':
    'prefix': 'bpxl'
    'body': """
      @include breakpoint (xlarge) {
        ${1}
      }
    """

'.source.js.jsx':
  'React ES6 Component':
    'prefix': 'rc'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';

      export default class ${1:MyComponent} extends Component {
        render() {
          return (${2:<div>MyComponent</div>});
        }
      }

      ${1}.propTypes = {
      };

    """
  'React ES6 Component with Constructor':
    'prefix': 'rcc'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';

      export default class ${1:MyComponent} extends Component {
        constructor(props) {
          super(props);
        }

        render() {
          return (${2:<div>MyComponent</div>});
        }
      }

      ${1}.propTypes = {
      };

    """
  'React ES6 Constructor':
    'prefix': 'rconst'
    'body': """
      constructor(props) {
        super(props);
        ${1}
      }

    """
  'React ES6 Functional Component':
    'prefix': 'rfunc'
    'body': """
      import React from 'react';
      import PropTypes from 'prop-types';

      export default function ${1}(props) {
        return (
          ${2:<div>MyComponent</div>}
        );
      }

      ${1}.propTypes = {
      };
    """
  'React ES6 Component Test':
    'prefix': 'rctest'
    'body': """
      import React from 'react';
      import { shallow } from 'enzyme';
      import ${1} from '${1}';

      describe('TYPE | MODULE | ${1}', () => {


        it('renders the ${1}', () => {

          const props = {
          };

          const component = shallow(
            <${1} {...props} />
          );

          expect(component).toMatchSnapshot();
        });

      });
    """
  'React ES6 bind method to this':
    'prefix': 'rbm',
    'body': """
      this.${1} = this.${1}.bind(this);
    """
  'React ES6 props definition':
    'prefix': 'rpd',
    'body': """
      ${1}.propTypes = {
        ${2}
      };
    """


  # PropType string
  'React PropType string':
    'prefix': 'rpstr',
    'body': "${1:myProp}: PropTypes.string,"
  'React PropType string required':
    'prefix': 'rpstrr',
    'body': "${1:myProp}: PropTypes.string.isRequired,"

  # PropType number
  'React PropType number':
    'prefix': 'rpn',
    'body': "${1:myProp}: PropTypes.number,"
  'React PropType number required':
    'prefix': 'rpnr',
    'body': "${1:myProp}: PropTypes.number.isRequired,"

  # PropType node
  'React PropType node':
    'prefix': 'rpno',
    'body': "${1:myProp}: PropTypes.node,"
  'React PropType node required':
    'prefix': 'rpnor',
    'body': "${1:myProp}: PropTypes.node.isRequired,"

  # PropType object
  'React PropType object':
    'prefix': 'rpo',
    'body': "${1:myProp}: PropTypes.object,"
  'React PropType object required':
    'prefix': 'rpor',
    'body': "${1:myProp}: PropTypes.object.isRequired,"

  # PropType array
  'React PropType array':
    'prefix': 'rpa',
    'body': "${1:myProp}: PropTypes.arrayOf(),"
  'React PropType array required':
    'prefix': 'rpar',
    'body': "${1:myProp}: PropTypes.arrayOf().isRequired,"

  # PropType bool
  'React PropType bool':
    'prefix': 'rpb',
    'body': "${1:myProp}: PropTypes.bool,"
  'React PropType bool required':
    'prefix': 'rpbr',
    'body': "${1:myProp}: PropTypes.bool.isRequired,"

  # PropType element
  'React PropType element':
    'prefix': 'rpe',
    'body': "${1:myProp}: PropTypes.element,"
  'React PropType element required':
    'prefix': 'rper',
    'body': "${1:myProp}: PropTypes.element.isRequired,"

  # PropType function
  'React PropType function':
    'prefix': 'rpf',
    'body': "${1:myProp}: PropTypes.func,"
  'React PropType function required':
    'prefix': 'rpfr',
    'body': "${1:myProp}: PropTypes.func.isRequired,"

  # PropType shape
  'React PropType shape':
    'prefix': 'rps',
    'body': """
      ${1:myProp}: PropTypes.shape({
        ${2}
      }),
    """
  'React PropType shape required':
    'prefix': 'rpsr',
    'body': """
      ${1:myProp}: PropTypes.shape({
        ${2}
      }).isRequired,
    """