react-snippets (function components)

javascript.json

{
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
  "jon: React Component": {
    "prefix": "jon-component",
    "body": [
      "// REACT, STYLE, STORIES & COMPONENT",
      "import React from 'react';",
      "import styles from './${TM_FILENAME_BASE}.module.scss';",
      "",
      "// ASSETS",
      "",
      "// 3RD PARTY",
      "import classNames from 'classnames';",
      "",
      "// OTHER COMPONENTS",
      "",
      "// UTILS",
      "",
      "// STORE",
      "",
      "// CONFIG & DATA",
      "",
      "// COMPONENT: ${TM_FILENAME_BASE}",
      "const ${TM_FILENAME_BASE} = (props) => {",
      "\t// PROPS",
      "\tconst { children$0 } = props;",
      "\t",
      "\t// COMPONENT/UI STATE and REFS",
      "",
      "\t// SPECIAL HOOKS",
      "",
      "\t// EFFECT HOOKS",
      "",
      "\t// STORE HOOKS",
      "",
      "\t// METHODS",
      "",
      "\t// EVENT HANDLES",
      "",
      "\t// HELPERS",
      "",
      "\t// RENDERS",
      "",
      "\t// RENDER: ${TM_FILENAME_BASE}",
      "\treturn (",
      "\t\t<div className={classNames(styles.${TM_FILENAME_BASE/([A-Z])/${1:/downcase}/})}>",
      "\t\t\t{ children }",
      "\t\t</div>",
      "\t);",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};",
    ],
    "description": ""
  },
  "jon: React Stories": {
    "prefix": "jon-stories",
    "body": [
      "import React from 'react';",
      "",
      "/* STORYBOOK & PLUGINS */",
      "import { storiesOf } from '@storybook/react';",
      "import { withKnobs, text } from '@storybook/addon-knobs';",
      "",
      "/* COMPONENTS */",
      "import ${TM_FILENAME_BASE/\\.[A-z]*//g} from './${TM_FILENAME_BASE/\\.[A-z]*//g}';",
      "",
      "/* STORIES */",
      "storiesOf('Basic Components', module)",
      "\t.addDecorator(withKnobs)",
      "\t.add('${TM_FILENAME_BASE/\\.[A-z]*//g}', () => (",
      "\t\t<${TM_FILENAME_BASE/\\.[A-z]*//g}>",
      "\t\t\t{text('text', 'Default ${TM_FILENAME_BASE/\\.[A-z]*//g}')}",
      "\t\t</${TM_FILENAME_BASE/\\.[A-z]*//g}>",
      "\t));",
      ""
    ],
    "description": ""
  },
  "jon: React Index": {
    "prefix": "jon-index",
    "body": [
      "export { default } from './$1.js';",
      "export { default as $1 } from './$1.js';"
    ],
    "description": ""
  }
}

scss.json

{
  // Place your snippets for scss here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
  "jon: React SCSS": {
    "prefix": "jon-scss",
    "body": [
      "@import 'shared.scss';",
      "",
      "/* ${TM_FILENAME_BASE/([A-z]*)\\.[A-z]*/${1:/upcase}/} */",
      ".${TM_FILENAME_BASE/([A-z]{1})([A-z]*)\\.[A-z]*/${1:/downcase}$2/} {",
      "\t$0",
      "\tbackground-color: skyblue;",
      "",
      "\t/* INTERACTION */",
      "",
      "\t/* MODIFIERS */",
      "",
      "\t/* RESPONSIVE */",
      "",
      "\t/* CHILDREN */",
      "}",
      ""
    ],
    "description": ""
  }
}

jon-component: added classnames and moved store imports and component hooks further down.

jon-scss: move children to the bottom

jon-scss: use background-color instead of background

jon-stories: make storiesOf() contain the path and add() the name of the component

jon-scss: add /* RESPONSIVE */