snippets of michaels atom editor

snippets_atom

# 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.js':
    ## js
    'Flow Function File':
        'prefix': 'fff'
        'body': """
            // @flow
            ${2}

            export default function ${1:myName}() {
                return null;
            }

        """

    ## react
    'componentDidMount()':
        'prefix': 'cdm'
        'body': """
            componentDidMount() {
            	${1}
            }
        """

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

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

    'componentWillReceiveProps()':
        'prefix': 'cwrp'
        'body': """
            componentWillReceiveProps(nextProps) {
            	${1}
            }
        """

    'componentWillUnmount()':
        'prefix': 'cwum'
        'body': """
            componentWillUnmount() {
            	${1}
            }
        """

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

    'React-Native Class':
        'prefix': 'rncc'
        'body': """
            // flow types
            type DefaultProps = {};
            type Props = {};
            type State = {};


            class ${1:Name} extends Component {

                props: Props;
                state: State;
                static defaultProps: DefaultProps;

                static defaultProps = {};

                constructor(props: Props) {
                    super(props);
                }

            	render() {
            		return (
            			<View>${3}</View>
            		);
            	}
            };
            export ${1:Name};
        """

    'React-Native Stateles Component':
        'prefix': 'rnsc'
        'body': """
            // flow types
            type Props = {};

            function ${1:Name}({}: Props) {
                return (
                    <View>${3}</View>
                );
            }
            export default ${1:Name};
        """


    'React-Native File':
        'prefix': 'rnf'
        'body': """
            // @flow

            import React, { Component } from 'react';
            import {
            	StyleSheet,
            	View,
            } from 'react-native';


            // flow types
            type DefaultProps = {};
            type Props = {};
            type State = {};


            class ${1:Name} extends Component {

                props: Props;
                state: State;
                static defaultProps: DefaultProps;

                static defaultProps = {};

                constructor(props: Props) {
                    super(props);
                }


            	render() {
            		return (
            			<View>${3}</View>
            		);
            	}
            }
            export default ${1:Name};



            // var styles = StyleSheet.create({});
        """

    'React-Native File Stateless':
        'prefix': 'rnfs'
        'body': """
            // @flow

            import React from 'react';
            import {
            	StyleSheet,
            	View,
            } from 'react-native';


            // flow types
            type Props = {};


            function ${1:Name}({}: Props) {
                return (
                    <View>${3}</View>
                );
            }
            export default ${1:Name};



            // var styles = StyleSheet.create({});
        """


    ## react-dom
    'React-DOM Class':
        'prefix': 'rdcc'
        'body': """
            // flow types
            type DefaultProps = {};
            type Props = {};
            type State = {};


            class ${1:Name} extends Component {

                props: Props;
                state: State;
                static defaultProps: DefaultProps;

                static defaultProps = {};

                constructor(props: Props) {
                    super(props);
                }

            	render() {
            		return (
            			<div>${3}</div>
            		);
            	}
            };
            export ${1:Name};
        """

    'React-DOM Stateles Component':
        'prefix': 'rdsc'
        'body': """
            // flow types
            type Props = {};

            /**
             * ${1:Name} - ${2:…}
            **/
            function ${1:Name}({}: Props) {
                return (
                    <div>${3}</div>
                );
            }
            ${1:Name}.defaultProps = {};
        """

    'React-DOM File Component':
        'prefix': 'rdfc'
        'body': """
            // @flow

            import React, { Component } from 'react';
            import classNames from 'classnames';


            // flow types
            type DefaultProps = {};
            type Props = {};
            type State = {};


            class ${1:Name} extends Component {

                props: Props;
                state: State;
                static defaultProps: DefaultProps;

                static defaultProps = {};

                constructor(props: Props) {
                    super(props);
                }


            	render() {
            		return (
            			<div className={classNames(${3:'a-you-component'})}>${4}</div>
            		);
            	}
            }
            export default ${1:Name};

        """

    'React-DOM File Stateless':
        'prefix': 'rdfs'
        'body': """
            // @flow

            import React from 'react';
            import classNames from 'classnames';


            // flow types
            type Props = {};


            function ${1:Name}({}: Props) {
                return (
                    <div className={classNames(${3:'a-you-component'})}>${4}</div>
                );
            }
            ${1:Name}.defaultProps = {};
            export default ${1:Name};

        """

    'React-DOM File Stateless Children':
        'prefix': 'rdfsc'
        'body': """
            // @flow

            import React from 'react';
            import type { Children } from 'react';
            import classNames from 'classnames';


            // flow types
            type Props = {
                children?: ?Children,
            };


            function ${1:Name}({ children }: Props) {
                return (
                    <div className={classNames(${3:'a-you-component'})}>{${4:children}}</div>
                );
            }
            ${1:Name}.defaultProps = {
                children: null,
            };
            export default ${1:Name};

        """

    'index.js':
        'prefix': 'index'
        'body': """
            // @flow

            import ${1:Name} from '.${2:/}';

            export { ${1:Name} };

        """


    # react
    'React-Native Flexbox':
        'prefix': 'flexbox'
        'body': """
            flex: 1,
            flexDirection: '${1:row}',
            flexWrap: '${2:nowrap}',
            justifyContent: '${3:flex-start}',
            alignItems: '${4:flex-start}',
            alignSelf: '${5:auto}',
        """

    'getDefaultProps':
        'prefix': 'gdp'
        'body': """
            getDefaultProps() {
            	return {
            		${1}: ${2},
            	};
            }
        """

    'getInitialState':
        'prefix': 'gis'
        'body': """
            getInitialState() {
            	return {
            		${1}: ${2},
            	};
            }
        """

    'setState':
        'prefix': 'ss'
        'body': """
            this.setState({${1: ${2} }});
        """

    'propTypes':
        'prefix': 'pt'
        'body': """
            propTypes: {
            	${1:name}: React.PropTypes.${2:string},
            },
        """

    'propType':
        'prefix': 'ptp'
        'body': '${1:name}: PropTypes.${2:string},'

    'PropTypes.':
        'prefix': 'ptr'
        'body': 'PropTypes.${1:string}'

    'PropTypes.children':
        'prefix': 'ptc'
        'body': """
            PropTypes.oneOfType([${1:
                PropTypes.string,
                PropTypes.number,}
                PropTypes.element,
                PropTypes.arrayOf(PropTypes.element),
            ]),
        """

    'StyleSheet.create()':
        'prefix': 'stylesheet'
        'body': """
            StyleSheet.create({
            	${1}: ${2},
            });
        """

    'import ES6':
        'prefix': 'import'
        'body': "import ${1:Name} from '${2}';${3}"

    'export const ES6':
        'prefix': 'export const'
        'body': "export const ${1:Name}"

    'export default ES6':
        'prefix': 'export default'
        'body': "export default ${1:Name};${2}"


    # PropTypes
    'PropTypes.array${1:.isRequired}':
        'prefix': 'pta'
        'body': 'PropTypes.array${1:.isRequired}'

    'PropTypes.any${1:.isRequired}':
        'prefix': 'ptany'
        'body': 'PropTypes.any${1:.isRequired}'

    'PropTypes.bool${1:.isRequired}':
        'prefix': 'ptb'
        'body': 'PropTypes.bool${1:.isRequired}'

    'PropTypes.element${1:.isRequired}':
        'prefix': 'pte'
        'body': 'PropTypes.element${1:.isRequired}'

    'PropTypes.func${1:.isRequired}':
        'prefix': 'ptf'
        'body': 'PropTypes.func${1:.isRequired}'

    'PropTypes.number${1:.isRequired}':
        'prefix': 'ptn'
        'body': 'PropTypes.number${1:.isRequired}'

    'PropTypes.node${1:.isRequired}':
        'prefix': 'ptnode'
        'body': 'PropTypes.node${1:.isRequired}'

    'PropTypes.object${1:.isRequired}':
        'prefix': 'pto'
        'body': 'PropTypes.object${1:.isRequired}'

    'PropTypes.string${1:.isRequired}':
        'prefix': 'pts'
        'body': 'PropTypes.string${1:.isRequired}'

    'PropTypes.shape({...})${1:.isRequired}':
        'prefix': 'ptshape'
        'body': 'PropTypes.shape({ $2 })${1:.isRequired}'


    # REDUX snippets
    'redux: reducer':
        'prefix': 'reducer'
        'body': """
            // @flow

            import { CHANGE_EXAMPLE } from './../actions/changeExample';
            import { REMOVE_EXAMPLE } from './../actions/removeExample';

            // flow tpyes
            import type { ChangeExampleActionType } from './../actions/changeExample';
            import type { RemoveExampleActionType } from './../actions/removeExample';


            type ActionType = (
                ChangeExampleActionType
                | RemoveExampleActionType
            );


            type StateType = {
                example: ?string,
            };


            // initial state
            const initialState = {
                example: 'example',
            };


            export default (
                state: StateType = initialState,
                { type, payload }: ActionType
            ): StateType => {
                switch (type) {

                    case CHANGE_EXAMPLE:
                        return {
                            ...state,
                            example: payload && payload.example,
                        };

                    case REMOVE_EXAMPLE:
                        return {
                            ...state,
                            example: null,
                        };

                    default:
                        return state;
                }
            };
        """

    'redux: action':
        'prefix': 'action'
        'body': """
            // @flow


            // flow types
            export type ActionType = {
                type: '${2:changeExample}/${1:CHANGE_EXAMPLE}',
                payload: {
                    ${4:example}: ${5:?string},
                },
            }

            const ${1:CHANGE_EXAMPLE} = '${2:changeExample}/${1:CHANGE_EXAMPLE}';

            export default function ${3:changeExample}(${4:example}: ${5:?string}): ActionType {
                return {
                    type: ${1:CHANGE_EXAMPLE},
                    payload: {
                        ${4:example},${6}
                    },
                };
            }
        """


    # TEST snippets
    'Test: Jest File':
        'prefix': 'tjest'
        'body': """
            /* eslint-disable func-names, prefer-arrow-callback */

            // jest.autoMockOff();
            jest.dontMock('${2:../tipValidators}');

            var ${1:tipValidators} = require('${2:../tipValidators}').default; // HACK: es6 jest hack


            describe('${3:describe}', function () {
            	it('${4:should }', function () {
            		${5:expect(true).toBe(true);}
            	});
            });
        """

    'Test: Mocha File':
        'prefix': 'tmocha'
        'body': """
            /* eslint-disable func-names, prefer-arrow-callback */
            import { expect } from 'chai';

            describe('${3:describe}', function () {
            	it('${4:should }', function () {
            		${5:expect(true).to.equal(true);}
            	});
            });
        """

    'Test: describe':
        'prefix': 'tdescribe'
        'body': """
            describe('${1:describe}', function () {
            	it('${2:should }', function () {
            		${3:expect(true).to.equal(true);}
            	});
            });
        """

    'Test: it':
        'prefix': 'tit'
        'body': """
            it('${1:should }', function () {
                ${2:expect(true).to.equal(true);}
            });
        """

    'Test: before':
        'prefix': 'tbefore'
        'body': """
            before(function (${1:}) {
                ${2:}
            });
        """

    'Test: beforeEach':
        'prefix': 'tbEach'
        'body': """
            beforeEach(function (${1:}) {
                ${2:}
            });
        """



    ## meteor.js
    'Meteor Template Helpers':
        'prefix': 'mjs'
        'body': """
            Template.${1:template}.helpers({
            	${2}
            });

            Template.${1:template}.onCreated(function() {

            	var _instance = this;

            });

            Template.${1:template}.onRendered(function() {

            	var _instance = this;

            });

            Template.${1:template}.onDestroyed(function() {

            	var _instance = this;

            });

            Template.${1:template}.events({

            	/*
            		...
            	*/
            	'click .example': function(__event, __instance) {

            		__event.stopImmediatePropagation();
            		__event.preventDefault();

            	}

            });
        """

    ## storybook
    'Storybook: Story':
        'prefix': 'story'
        'body': """
            /* eslint-disable prefer-arrow-callback,
             import/no-extraneous-dependencies, no-unused-vars */

            // storybook imports
            import React from 'react';
            import { storiesOf } from '@storybook/react';
            import { action } from '@storybook/addon-actions';
            import { text, boolean, number, color, object, array, select, date } from '@storybook/addon-knobs';

            // testing
            // import { mount } from 'enzyme';
            // import { expect } from 'chai';
            // import { specs, describe, it } from 'storybook-addon-specifications';

            // your imports
            import ${1:Component} from './../${1:Component}';


            storiesOf('${1:Component}', module)
                .add('${2:default}', () => (
                    <${1:Component} />${3}
                ));
        """
    'Storybook: Add':
        'prefix': 'add-story'
        'body': """
            .add('${1:default}', () => (
                <${2:Component} />${3}
            ))
        """

    ## translation
    'i18next translation':
        'prefix': 'translation'
        'body': """
            export default {
                ${1:de}: {
                    ${2}
                },
            };
        """


#
#   HTML SOCPE
#


'.text.html.basic':
    'Meteor Template':
        'prefix': 'temp'
        'body': """
            <template name="${1:name}">
            	${2:code}
            </template>
        """

    'Meteor Template IF':
        'prefix': 'if'
        'body': """
            {{#if ${1:hasChild}}}
                ${2}
            {{else}}
                ${3}
            {{/if}}
        """






#
#   SCSS SOCPE
#


'.source.css.scss':

    # scss file
    'Scss Webpack File':
        'prefix': 'file'
        'body': """
            @import './../../scss/vars';
            @import './../../scss/media-queries';


            .${1:my-class} {
                ${2}
            }
        """

    'Scss MediaQuery':
        'prefix': 'mq'
        'body': """
            @include mq(${1:tablet}) {
                ${2}
            }
        """