snippets.code-snippets

{
  // docs: https://code.visualstudio.com/docs/editor/userdefinedsnippets

  // Place your risks-client workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. 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": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Ymir React component": {
    "scope": "javascript,typescript",
    "prefix": "ymir-component",
    "body": [
      "// based off of: https://dev.to/selbekk/the-10-component-commandments-2a7f",
      "import React from 'react';",
      "import PropTypes from 'prop-types';",
      "import clsx from 'clsx';",
      "import styled from 'styled-components';",
      "import PrettyPrint from './PrettyPrint';",
      "",
      "export default styled(${1})`",
      "  background-color: red;",
      "`;",
      "",
      "/**",
      " * Tips:",
      " * - make lots of small components!",
      " * - move lists into separate components (https://reactjs.org/docs/lists-and-keys.html#embedding-map-in-jsx)",
      " * - Don't Hardcode Repetitive Markup (https://alexkondov.com/tao-of-react/#dont-hardcode-markup)",
      " * - Pass Objects instead of Primitives OR spread the whole object https://alexkondov.com/tao-of-react/#objects-instead-of-primitives",
      " */",
      "",
      "function ${1:ComponentName}({ as: Element = PrettyPrint, className, ...rest }) {",
      "  // useReducer: have complex state logic that involves multiple sub-values? https://reactjs.org/docs/hooks-reference.html#usereducer",
      "  ${0}",
      "",
      "  return (",
      "    <Element",
      "      className={clsx('${1}', className)}",
      "      data-testid=\"${1}\"",
      "      {...rest}",
      "    />",
      "  );",
      "}",
      "${1:ComponentName}.propTypes = {",
      "  as: PropTypes.node,",
      "  className: PropTypes.string,",
      "};",
      ""
    ],
    "description": "Ymir React component"
  }
}