react-snippets (class 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"
  // }
  "React Component": {
    "prefix": "d2p-component",
    "body": [
      "import React from 'react';",
      "import styles from './${TM_FILENAME_BASE}.module.scss';",
      "",
      "import { mapLooksToStyles } from 'utils';",
      "",
      "class ${TM_FILENAME_BASE} extends React.Component {",
      "\trender () {",
      "\t\t// map looks to a styles[look] string",
      "\t\tconst lookStyles = mapLooksToStyles(this.props.looks, styles);",
      "",
      "\t\treturn (",
      "\t\t\t<div className={`${styles.${TM_FILENAME_BASE/([A-Z])/${1:/downcase}/}} \\${lookStyles}`}>",
      "\t\t\t\t$0",
      "\t\t\t\t{ this.props.children }",
      "\t\t\t</div>",
      "\t\t);",
      "\t}",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};",
    ],
    "description": ""
  },
  "React Stories": {
    "prefix": "d2p-stories",
    "body": [
      "import React from 'react';",
      "",
      "/* STORYBOOK & PLUGINS */",
      "import { storiesOf } from '@storybook/react';",
      "import { withKnobs, text } from '@storybook/addon-knobs/react';",
      "",
      "/* COMPONENTS */",
      "import ${TM_FILENAME_BASE/\\.[A-z]*//g} from './${TM_FILENAME_BASE/\\.[A-z]*//g}';",
      "",
      "/* STORIES */",
      "storiesOf('${TM_FILENAME_BASE/\\.[A-z]*//g}', module)",
      "\t.addDecorator(withKnobs)",
      "\t.add('Default', () => (",
      "\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": ""
  },
  "React Index": {
    "prefix": "d2p-index",
    "body": [
      "export { default } 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"
  // }
  "React SCSS": {
    "prefix": "d2p-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: skyblue;",
      "}",
      ""
    ],
    "description": ""
  }
}