snippets.cson

# GENERAL

# SLIM ==============================================

'.text.slim':
  'link_to':
    'prefix': 'lt'
    'body': "= link_to '$1', '$2'"
    
  'image_tag':
    'prefix': 'it'
    'body': "= image_tag '$1'"
    
  'svg':
    'prefix': 'sv'
    'body': "= svg '$1'"

# CSS ===============================================

'.source.css':

	'background':
    'prefix': 'bg'
    'body': 'background: $1'

	'border-radius':
    'prefix': 'br'
    'body': 'border-radius: $1'

	'$border-radius':
    'prefix': '$br'
    'body': '$border-radius'

	'box-shadow':
    'prefix': 'bx'
    'body': 'box-shadow: $1'

  'breakpoint':
    'prefix': 'bp'
    'body': """
      @include breakpoint(${1:breakpoint}) {
        $2
      }
    """

  'debug':
    'prefix': '2bug'
    'body': ''

  'desktop--sm':
    'prefix': 'dss'
    'body': '$desktop--sm'

	'desktop--md':
    'prefix': 'dsm'
    'body': '$desktop--md'

	'desktop--lg':
    'prefix': 'dsl'
    'body': '$desktop--lg'

	'desktop-xl':
    'prefix': 'dsx'
    'body': '$desktop--xl'

	'flex':
    'prefix': 'f'
    'body': 'flex;$1'

	'flex-1':
    'prefix': 'fl'
    'body': 'flex;$1'

  'fill':
    'prefix': 'fi'
    'body': 'fill: $1'

	'fill-1':
    'prefix': 'fil'
    'body': 'fill: $1'

	'important':
    'prefix': 'imp'
    'body': '!important$1'

	'opacity':
    'prefix': 'op'
    'body': 'opacity: $1'

	'option':
    'prefix': 'opt'
    'body': 'option'

	'order':
    'prefix': 'or'
    'body': 'order: $1;'

	'padding-left':
    'prefix': 'pl'
    'body': 'padding-left: $1'

	'phone--lg':
    'prefix': 'phl'
    'body': '$phone--lg'

  'random':
    'prefix': 'ppp'
    'body': 'polly picked pickles'

  'regular':
    'prefix': 'rg'
    'body': '$regular;$1'

	'rem':
    'prefix': 'rm'
    'body': 'rem($1)'

  'right':
    'prefix': 'ri'
    'body': 'right: $1'

	'scale3d':
    'prefix': 's3'
    'body': 'scale3d($1);'

  'scaleX':
    'prefix': 'sx'
    'body': 'scaleX($1);'

  'scaleY':
    'prefix': 'sy'
    'body': 'scaleY($1);'

  'semibold':
    'prefix': 'se'
    'body': '$semibold;$1'

  'tablet':
    'prefix': 'tab'
    'body': '$tablet--sm'

	'tablet-2':
    'prefix': 'tb'
    'body': '$tablet--sm'
    
	'tablet-3':
    'prefix': 'tbs'
    'body': '$tablet--sm'

	'tablet--lg':
    'prefix': 'tbl'
    'body': '$tablet--lg'

  'text-align':
    'prefix': 'ta'
    'body': 'text-align: $1'

	'text--dark':
    'prefix': 'td'
    'body': '$text--dark'

	'text--dark-$':
    'prefix': '$td'
    'body': '$text--dark'

	'text--light':
    'prefix': 'tl'
    'body': '$text--light'

	'text--light-$':
    'prefix': '$tl'
    'body': '$text--light'

  'todo':
    'prefix': '2do'
    'body': ''

  'top':
    'prefix': 'to'
    'body': 'top: $1'

  'transform':
    'prefix': 'tf'
    'body': 'transform: $1'

  'translate3d':
    'prefix': 't3'
    'body': 'translate3d($1);'

  'translateX':
    'prefix': 'tx'
    'body': 'translateX($1);'

  'translateY':
    'prefix': 'ty'
    'body': 'translateY($1);'

	'width':
    'prefix': 'wi'
    'body': 'width: $1'

# SCSS ==============================================

'.source.css.scss':
  
  'import':
    'prefix': 'ip'
    'body': '@import "${1:fileName}";'
    
  'import-2':
    'prefix': 'im'
    'body': '@import "${1:fileName}";'
  
# JavaScript ========================================

'.source.js':

  "addClass":
    "prefix": "ac"
    "body": "addClass('$1')$2"

  'blur':
    'prefix': 'ob'
    'body': """
      ${1:variableName}.on('blur', function($2) {
        $3
      });
    """

  'change':
    'prefix': 'onch'
    'body': """
      ${1:variableName}.on('change', function($2) {
        $3
      });
    """

  'click':
    'prefix': 'oc'
    'body': """
      ${1:variableName}.on('click', function($2) {
        $3
      });
    """

  'console.log':
    'prefix': 'log'
    'body': 'console.log($1);'

  'event':
    'prefix': 'event'
    'body': 'event'

	"find":
    "prefix": "fi"
    "body": "find('$1')$2"

  'focus':
    'prefix': 'onf'
    'body': """
      ${1:variableName}.on('focus', function($2) {
        $3
      });
    """

  'function':
    'prefix': 'function'
    'body': 'function'

  'function_name':
    'prefix': 'fname'
    'body': """
      function ${1:functionName}($2) {
        $3
      }
    """

	"hasClass":
    "prefix": "hc"
    "body": "hasClass('$1')$2"

	'ready':
		'prefix': 'docr'
		'body': """
			$(document).ready(function() {
				$1
			});
		"""

	# "removeClass":
  #   "prefix": "rc"
  #   "body": "removeClass('$1')$2"

  'resize':
    'prefix': 'onresize'
    'body': """
      $(window).on('resize', function() {
        $1
      });
    """

	'resize-1':
    'prefix': 'or'
    'body': """
      $(window).on('resize', function() {
        $1
      });
    """

  'statement--else':
    'prefix': '2else'
    'body': ''

  'statement--if':
    'prefix': 'if'
    'body': """
      if ( $1 ) {
        $2
      }
    """

  'statement--if/else':
    'prefix': 'ie'
    'body': """
      if ( $1 ) {
        $2
      } else {
        $3
      }
    """

	"toggleClass":
    "prefix": "tc"
    "body": "toggleClass('$1')$2"

  'tt':
    'prefix': 'tt'
    'body': 'var $this = $(this);'
  
  # REACT
  
  'import React Component':
    'prefix': 'im'
    'body': "import ${1:Component} from '${2}';"

  'React ES7 Component':
    'prefix': 'rc'
    'body': """
      import React, { Component } from 'react';

      class ${1:MyComponent} extends Component {

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

      }
      
      export default ${1:MyComponent};
    """

  'React ES7 Component with PropTypes':
    'prefix': 'rcp'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';

      class ${1:MyComponent} extends Component {

        static propTypes = {
          ${2}
        };

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

      }
      
      export default ${1:MyComponent};
    """

  'React ES7 Component with Constructor':
    'prefix': 'rcc'
    'body': """
      import React, { Component } from 'react';

      class ${1:MyComponent} extends Component {

        constructor(props) {
          super(props);

          this.state = {
            ${3}
          };
        }

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

      }
      
      export default ${1:MyComponent};
    """

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

      class ${1:MyComponent} extends Component {

        static propTypes = {
          ${2}
        };

        constructor(props) {
          super(props);

          this.state = {
            ${3}
          };
        }

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

      }
      
      export default ${1:MyComponent};
    """

  'React ES7 Redux Container':
    'prefix': 'rcredux'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';
      import { connect } from 'react-redux';

      class ${1:MyComponent} extends Component {

        static propTypes = {
          ${4}
        };

        constructor(props) {
          super(props);

          this.state = {
            ${5}
          };
        }

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

      }

      const mapStateToProps = (state) => ({
        ${2}
      });

      const mapDispatchToProps = (dispatch) => ({
        ${3}
      });

      export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent});
    """

  'React ES7 Redux Container Decorator':
    'prefix': 'rcreduxd'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';
      import { connect } from 'react-redux';

      @connect(
        state => ({ ${2} }),
      )
      export default class ${1:MyComponent} extends Component {

        static propTypes = {
          ${3}
        };

        constructor(props) {
          super(props);

          this.state = {
            ${4}
          };
        }

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

      }
    """

  'React ES7 Relay Container':
    'prefix': 'rcrelay'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';
      import Relay from 'react-relay';

      class ${1:MyComponent} extends Component {

        static propTypes = {
          ${2:viewer}: PropTypes.object.isRequired,
        };

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

      }

      export default Relay.createContainer(${1:MyComponent}, {
        fragments: {
          ${2:viewer}: () => Relay.QL`
      			fragment on ${3:Viewer} {
      				${4:id}
      			}
          `,
        },
      });
    """

  'React ES7 Relay Container initialVariables':
    'prefix': 'rcrelayv'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';
      import Relay from 'react-relay';

      class ${1:MyComponent} extends Component {

        static propTypes = {
          ${2:viewer}: PropTypes.object.isRequired,
        };

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

      }

      export default Relay.createContainer(${1:MyComponent}, {
        initialVariables: {
          ${4}
        },
        fragments: {
          ${2:viewer}: () => Relay.QL`
      			fragment on ${3:Viewer} {
      				${5:id}
      			}
          `,
        },
      });
    """

  'React ES7 Relay Container prepareVariables':
    'prefix': 'rcrelayvp'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';
      import Relay from 'react-relay';

      class ${1:MyComponent} extends Component {

        static propTypes = {
          ${2:viewer}: PropTypes.object.isRequired,
        };

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

      }

      export default Relay.createContainer(${1:MyComponent}, {
        initialVariables: {
          ${4}
        },
        prepareVariables(prevVariables) {
          const ${5:include} = !!prevVariables.${6:variable};
          return {
            ...prevVariables,
            ${5:include},
          };
        },
        fragments: {
          ${2:viewer}: () => Relay.QL`
      			fragment on ${3:Viewer} {
      				${7:id}
      			}
          `,
        },
      });
    """

  'React ES7 Component export':
    'prefix': 'rce'
    'body': """
      import React, { Component } from 'react';
      import PropTypes from 'prop-types';

      class ${1:Class} extends Component {

        static propTypes = {
          ${2}
        };

        constructor(props) {
          super(props);

          this.state = {
            ${3}
          };
        }

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

      }

      export default ${1:Class};
    """

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


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

      ${1}.propTypes = {
        ${2}
      };
    """

  'React ES7 Functional Arrow Component':
    'prefix': 'rarrow'
    'body': """
      import React from 'react';
      import PropTypes from 'prop-types';


      const $1 = (${3:props}) => (
        ${4:<div />}
      );

      ${1}.propTypes = {
        ${2}
      };

      export default ${1};
    """

  'React ES7 Constructor':
    'prefix': 'rconst'
    'body': """
      constructor(props) {
        super(props);

        ${1}
      }
    """

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

  'React ES7 bind method to this':
    'prefix': 'rbm7',
    'body': """
      this.${1} = ::this.${1};
    """

  'React componentWillMount (ES7)':
    'prefix': 'cwm'
    'body': """
      componentWillMount() {
        ${1}
      }
    """

  'React componentDidMount (ES7)':
    'prefix': 'cdm'
    'body': """
      componentDidMount() {
        ${1}
      }
    """

  'React componentWillReceiveProps (ES7)':
    'prefix': 'cwr'
    'body': """
      componentWillReceiveProps(nextProps) {
        ${1}
      }
    """

  'React shouldComponentUpdate (ES7)':
    'prefix': 'scu'
    'body': """
      shouldComponentUpdate(nextProps, nextState) {
        ${1}
      }
    """

  'React componentWillUpdate (ES7)':
    'prefix': 'cwu'
    'body': """
      componentWillUpdate(nextProps, nextState) {
        ${1}
      }
    """

  'React componentDidUpdate (ES7)':
    'prefix': 'cdu'
    'body': """
      componentDidUpdate(prevProps, prevState) {
        ${1}
      }
    """

  'React componentWillUnmount (ES7)':
    'prefix': 'cwun'
    'body': """
      componentWillUnmount() {
        ${1}
      }
    """

  'React this.props':
    'prefix': 'props'
    'body': 'this.props${1}'

  'React this.state':
    'prefix': 'state'
    'body': 'this.state${1}'

  'React cx({ ... }) (ES7)':
    'prefix': 'cx'
    'body': """
      cx({
        ${1}: ${2},
      });
    """

  'React static defaultProps = { ... } (ES7)':
    'prefix': 'dp'
    'body': """
      static defaultProps = {
        ${1}
      };
    """

  'React static propTypes = { ... } (ES7)':
    'prefix': 'pt'
    'body': """
      static propTypes = {
        ${1}: PropTypes.${2:string},
      };
    """

  'React static contextTypes = { ... } (ES7)':
    'prefix': 'ct'
    'body': """
      static contextTypes = {
        ${1}: PropTypes.${2:string},
      };
    """

  'React static childContextTypes = { ... } (ES7)':
    'prefix': 'cct'
    'body': """
      static childContextTypes = {
        ${1}: PropTypes.${2:string},
      };
    """

  'React getChildContext (ES7)':
    'prefix': 'gcct'
    'body': """
      getChildContext() {
        return ${1}
      }
    """

  'React setState({ ... }) (ES7)':
    'prefix': 'sst'
    'body': """
      this.setState({
        ${1}: ${2},
      });
    """

  # PropType array
  'PropTypes.array':
    'prefix': 'pta'
    'body': 'PropTypes.array'
  'PropTypes.array.isRequired':
    'prefix': 'ptar'
    'body': 'PropTypes.array.isRequired'

  # PropType bool
  'PropTypes.bool':
    'prefix': 'ptb'
    'body': 'PropTypes.bool'
  'PropTypes.bool.isRequired':
    'prefix': 'ptbr'
    'body': 'PropTypes.bool.isRequired'

  # PropType function
  'PropTypes.func':
    'prefix': 'ptf'
    'body': 'PropTypes.func'
  'PropTypes.func.isRequired':
    'prefix': 'ptfr'
    'body': 'PropTypes.func.isRequired'

  # PropType number
  'PropTypes.number':
    'prefix': 'ptn'
    'body': 'PropTypes.number'
  'PropTypes.number.isRequired':
    'prefix': 'ptnr'
    'body': 'PropTypes.number.isRequired'

  # PropType object
  'PropTypes.object':
    'prefix': 'ptobj'
    'body': 'PropTypes.object'
  'PropTypes.object.isRequired':
    'prefix': 'ptobjr'
    'body': 'PropTypes.object.isRequired'

  # PropType string
  'PropTypes.string':
    'prefix': 'pts'
    'body': 'PropTypes.string'
  'PropTypes.string.isRequired':
    'prefix': 'ptsr'
    'body': 'PropTypes.string.isRequired'

  # PropType node
  'PropTypes.node':
    'prefix': 'ptnode'
    'body': 'PropTypes.node'
  'PropTypes.node.isRequired':
    'prefix': 'ptnoder'
    'body': 'PropTypes.node.isRequired'

  # PropType element
  'PropTypes.element':
    'prefix': 'pte'
    'body': 'PropTypes.element'
  'PropTypes.element.isRequired':
    'prefix': 'pter'
    'body': 'PropTypes.element.isRequired'

  # PropType instanceOf
  'PropTypes.instanceOf':
    'prefix': 'pti'
    'body': 'PropTypes.instanceOf(${1})'
  'PropTypes.instanceOf.isRequired':
    'prefix': 'ptir'
    'body': 'PropTypes.instanceOf(${1}).isRequired'

  # PropType oneOf
  'PropTypes.oneOf':
    'prefix': 'ptof'
    'body': 'PropTypes.oneOf([${1}])'
  'PropTypes.oneOf.isRequired':
    'prefix': 'ptofr'
    'body': 'PropTypes.oneOf([${1}]).isRequired'

  # PropType oneOfType
  'PropTypes.oneOfType':
    'prefix': 'ptoft'
    'body': """
      PropTypes.oneOfType([
        ${1}
      ])
    """
  'PropTypes.oneOfType.isRequired':
    'prefix': 'ptoftr'
    'body': """
      PropTypes.oneOfType([
        ${1}
      ]).isRequired
    """

  # PropType arrayOf
  'PropTypes.arrayOf':
    'prefix': 'ptao'
    'body': 'PropTypes.arrayOf(${1})'
  'PropTypes.arrayOf.isRequired':
    'prefix': 'ptaor'
    'body': 'PropTypes.arrayOf(${1}).isRequired'

  # PropType objectOf
  'PropTypes.objectOf':
    'prefix': 'ptobjo'
    'body': 'PropTypes.objectOf(${1})'
  'PropTypes.objectOf.isRequired':
    'prefix': 'ptobjor'
    'body': 'PropTypes.objectOf(${1}).isRequired'

  # PropType shape
  'PropTypes.shape({...})':
    'prefix': 'ptshape'
    'body': """
      PropTypes.shape({
        ${1}
      })
    """
  'PropTypes.shape({...}).isRequired':
    'prefix': 'ptshaper'
    'body': """
      PropTypes.shape({
        ${1}
      }).isRequired
    """

  # PropType any
  'PropTypes.any':
    'prefix': 'ptany'
    'body': 'PropTypes.any'
  'PropTypes.any.isRequired':
    'prefix': 'ptanyr'
    'body': 'PropTypes.any.isRequired'
    
  # JSX -----------------------
  
  'div':
    'prefix': 'div'
    'body': '<div>$1</div>'

  'span':
    'prefix': 'span'
    'body': '<span>$1</span>'

  'p':
    'prefix': 'p'
    'body': '<p>$1</p>'

  'ul':
    'prefix': 'ul'
    'body': '<ul>$1</ul>'

  'li':
    'prefix': 'li'
    'body': '<li>$1</li>'

  'h1':
    'prefix': 'h1'
    'body': '<h1>$1</h1>'

  'h2':
    'prefix': 'h2'
    'body': '<h2>$1</h2>'

  'h3':
    'prefix': 'h3'
    'body': '<h3>$1</h3>'

  'h4':
    'prefix': 'h4'
    'body': '<h4>$1</h4>'

  'h5':
    'prefix': 'h5'
    'body': '<h5>$1</h5>'

  'h6':
    'prefix': 'h6'
    'body': '<h6>$1</h6>'

  'img':
    'prefix': 'img'
    'body': '<img src="$1" alt="$2"/>'

  'section':
    'prefix': 'section'
    'body': '<section>$1</section>'

  'nav':
    'prefix': 'nav'
    'body': '<nav>$1</nav>'

  'header':
    'prefix': 'header'
    'body': '<header>$1</header>'

  'footer':
    'prefix': 'footer'
    'body': '<footer>$1</footer>'

  'button':
    'prefix': 'button'
    'body': '<button>$1</button>'

  'figure':
    'prefix': 'figure'
    'body': '<figure>$1</figure>'

	'className':
    'prefix': 'cn'
    'body': 'className="$1"'

	'id':
    'prefix': 'id'
    'body': 'id="$1"'
  
# ERB ===============================================

'.source.html.erb':
  
  'ruby-tags':
    'prefix': ',5'
    'body': '<%$1 %>'