Cool Snippets for anyone using React and Styled Components

clg.code-snippets

{
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1')",
			"$2"
		],
		"description": "Log output to console"
  },
  "require props": {
    "scope": "javascript,typescript",
    "prefix": "tpr",
    "body": [
      "const {",
      "  $1,",
      "} = this.props"
    ],
    "description": "Get prop"
  },
  "new styled-comp": {
    "scope": "javascript,typescript",
    "prefix": "ponsc",
    "body": [
      "import styled from 'styled-components'",
      "  ",
      "const Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/} = styled.div`",
      "  $1",
      "`",
      " ",
      "export default Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
    ],
    "description": "Generate styled component"
  },
  "import styled-comp": {
    "scope": "javascript,typescript",
    "prefix": "pois",
    "body": [
      "import Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './index.styled'"
    ],
    "description": "Import current component Styled"
  },
  "generate story": {
    "scope": "javascript,typescript",
    "prefix": "ponsb",
    "body": [
      "import React from 'react'",
      "import { storiesOf } from '@storybook/react'",
      "import ${TM_DIRECTORY/^.+\\/(.*)$/$1/} from '.'",
      "",
      "storiesOf('${1|Atoms,Molecules,Organisms,Pages|}/${TM_DIRECTORY/^.+\\/(.*)$/$1/}', module).add('default', () => {",
      "  $2",
      "  return (<${TM_DIRECTORY/^.+\\/(.*)$/$1/} />)",
      "})",

    ],
    "description": "Generate Story"
  },
  "generate es6 method": {
    "scope": "javascript,typescript",
    "prefix": "ponm",
    "body": [
      "const $1 = () => {",
      "  try {",
      "    $2",
      "  } catch (error) {",
      "    console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - $1', error)",
      "  }",
      "}",
    ],
    "description": "Generate new method"
  },
  "generate es6 component method": {
    "scope": "javascript,typescript",
    "prefix": "poncm",
    "body": [
      "$1 = () => {",
      "  try {",
      "    $2",
      "  } catch (error) {",
      "    console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - $1', error)",
      "  }",
      "}",
    ],
    "description": "Generate new react method"
  },
  "get theme prop": {
    "prefix": "gsp",
    "body": [
      "${props => props.theme.$1};",
    ],
    "description": "get theme prop"
  },
  "baseprop": {
    "prefix": "bpp",
    "body": [
      "$1={$1}",
    ],
    "description": "add selfnamed prop"
  },
  "condisc": {
    "prefix": "poncs",
    "body": [
      "${({ $1 }) => ($1 ? '$2' : '$3')};",
    ],
    "description": "add conditionnal prop"
  },
  "setState": {
    "prefix": "sst",
    "body": [
      "this.setState((prevState, props) => ({",
      "  $1",
      "}));"
    ],
    "description": "setState"
  },
  "create Panopli Component": {
    "prefix": "ponpc",
    "body": [
      "import React, { Component } from 'react'",
      "import Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './index.styled'",
      "",
      "class ${TM_DIRECTORY/^.+\\/(.*)$/$1/} extends Component {",
      "  render() {",
      "    try {",
      "      return (",
      "        <Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}>",
      "          $1",
      "        </Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}>",
      "      )  ",
      "    } catch (error) {",
      "      console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - render()', { error })",
      "      return null",
      "    }",
      "  }",
      "}",
      "",
      "export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
    ],
    "description": "create Panopli Component"
  },
  "Create a new reducer": {
    "prefix": "ponr",
    "body": [
      "import { initialState } from './selectors'",
      "import {",
      "  $1,",
      "} from './actions'",
      "",
      "export default (state = initialState, { type, payload }) => {",
      "  switch (type) {",
      "  case $1:",
      "    return {",
      "      ...state,",
      "      $2",
      "    }",
      "  default:",
      "    return state",
      "  }",
      "}",
      ""
    ],
    "description": "Create a new reducer"
  },
  "Create a new reducer case": {
    "prefix": "ponrc",
    "body": [
      "",
      "  case $1:",
      "    return {",
      "      ...state,",
      "    }"
    ],
    "description": "Create a new reducer case"
  },
  "Create new helper": {
    "prefix": "ponh",
    "body": [
      "const ${TM_DIRECTORY/^.+\\/(.*)$/$1/} = ($1) => {",
      "  try {",
      "    $2",
      "  } catch (error) {",
      "    console.log('Error in ${TM_DIRECTORY/^.+\\/(.*)$/$1/}', { error })",
      "    return $3",
      "  }",
      "}",
      "",
      "export {",
      "  ${TM_DIRECTORY/^.+\\/(.*)$/$1/},",
      "}",
      ""
    ],
    "description": "Create new helper"
  },
  "generate es6 errorcatch": {
    "scope": "javascript,typescript",
    "prefix": "pone",
    "body": [
      "console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - $1', { error })",
    ],
    "description": "Generate new error catch"
  },
  "Create new test": {
    "prefix": "pont",
    "body": [
      "import ${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './${TM_DIRECTORY/^.+\\/(.*)$/$1/}'",
      "",
      "describe('${TM_DIRECTORY/^.+\\/(.*)$/$1/}', () => {",
      "  test('Default test', () => {",
      "    expect(${TM_DIRECTORY/^.+\\/(.*)$/$1/}()).toBe()",
      "  })",
      "})",
      ""
    ],
    "description": "Create new test"
  }
}