rc-styled

This package contains the most powerful components using react with styled components.

Table of Contents

• Usage

Usage

npm i --save rc-styled styled-components

Encapsulate your app into ThemeProvider

Maintainer usage

You should have yalc installed globally to avoid npm link issues

npm i -g yalc

npm run dev

Why using svg over icon font

Easy to:

• Position
• Create custom sizes without losing quality
• Allow animation
• Implement attributes for accessibility Sources: (Ten reasons we switched from an icon font to SVG)https://www.ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/[https://css-tricks.com/svg-use-external-source/]

Vscode Snippets

• CSS.json

{
  "Theme": {
    "prefix": "rcst",
    "body": ["${({theme})=> theme.$1}"]
  },
  "Theme  text variant": {
    "prefix": "rcstv",
    "body": ["${({theme})=> theme.typography.buildTextVariant($1)}"]
  },
  "Theme text variant customized": {
    "prefix": "rcstvc",
    "body": [
      "${({theme})=> theme.typography.buildTextVariant({",
      "...theme.typography.${1:variant},",
      "fontSize: theme.typography.$2,",
      "color: theme.palette.$3,",
      "fontWeight: theme.typography.fontWeight$4,",
      "textTransform: theme.typography.$5,",
      "fontFamily: theme.typography.$6,",
      "lineHeight: theme.typography.$7,",
      "})}"
    ]
  },
  "Destructured styled theme": {
    "prefix": "dst",
    "body": ["${({theme, ${2:prop}})=> theme.${1:property}};"],
    "description": "Destructured styled theme"
  },
  "Destructured styled theme palette": {
    "prefix": "dstp",
    "body": ["${({theme: { palette }, ${2:prop}})=> palette.${1:property}};"],
    "description": "Destructured styled theme palette"
  },
  "Destructured styled theme typography": {
    "prefix": "dstt",
    "body": [
      "${({theme: { typography }, ${2:prop}})=> typography.${1:property}};"
    ],
    "description": "Destructured styled theme typography"
  },
  "Destructured styled theme mixin": {
    "prefix": "dstm",
    "body": ["${({theme: { mixin }, ${2:prop}})=> mixin.${1:property}};"],
    "description": "Destructured styled theme mixin"
  },
  "Destructured styled theme mixin media": {
    "prefix": "dstmm",
    "body": [
      "${({theme: { mixin: { media } }, ${2:prop}})=> media.${1:property}};"
    ],
    "description": "Destructured styled theme mixin media"
  }
}

• Javascript.json

{
  "Prints static PropTypes": {
    "prefix": "stprop",
    "body": ["static propTypes={$1}"],
    "description": "PropTypes static of react class"
  },

  "Theme": {
    "prefix": "rcst",
    "body": ["${({theme})=> theme.$1}"]
  },
  "Theme  text variant": {
    "prefix": "rcstv",
    "body": ["${({theme})=> theme.typography.buildTextVariant($1)}"]
  },
  "Theme text variant customized": {
    "prefix": "rcstvc",
    "body": [
      "${({theme})=> theme.typography.buildTextVariant({",
      "...theme.typography.${1:variant},",
      "fontSize: theme.typography.$2,",
      "color: theme.palette.$3,",
      "fontWeight: theme.typography.fontWeight$4,",
      "textTransform: theme.typography.$5,",
      "fontFamily: theme.typography.$6,",
      "lineHeight: theme.typography.$7,",
      "})}"
    ]
  },
  "Story simple with Sample": {
    "prefix": "stsimple",
    "body": [
      "import React from 'react'",
      "import { story } from 'stories'",
      "import { $1 } from 'rc'",
      "",
      "story('$1').add('Sample', () => <$1></$1>)"
    ]
  },
  "Text knob storybook": {
    "prefix": "sttext",
    "body": ["${1:proptype}={text('${1:proptype}')}"],
    "description": "Facilititates knobs text."
  },
  "Text with defaultknob storybook": {
    "prefix": "stdtext",
    "body": ["${1:proptype}={text('${1:proptype}', '${2:defaultValue}')}"],
    "description": "Facilititates knobs text with default value."
  },
  "Array knob storybook": {
    "prefix": "starray",
    "body": ["${1:proptype}={array('${1:proptype}', [${2:defaultValue}])}"],
    "description": "Facilititates knobs array."
  },
  "Boolean knob storybook": {
    "prefix": "stboolean",
    "body": ["${1:proptype}={boolean('${1:proptype}', ${2:option1})}"],
    "description": "Facilititates knobs boolean."
  },
  "Select knob storybook": {
    "prefix": "stselect",
    "body": [
      "${1:proptype}={select('${1:proptype}', {${2:option1}: '${2:option1}'})}"
    ],
    "description": "Facilititates knobs select."
  },
  "Number knob storybook": {
    "prefix": "stnumber",
    "body": ["${1:proptype}={number('${1:proptype}', ${2:defaultValue})}"],
    "description": "Facilititates knobs numbers."
  },
  "Object knob storybook": {
    "prefix": "stobject",
    "body": [
      "${1:proptype}={object('${1:proptype}', {${2:option1}: '${2:option1}'})}"
    ],
    "description": "Facilititates knobs object."
  },
  "Radio knob storybook": {
    "prefix": "stradios",
    "body": [
      "${1:proptype}={radios('${1:proptype}', {${2:option1}: '${2:option1}', ${3:option1}: '${3:option1}'})}"
    ],
    "description": "Facilititates knobs radios."
  },
  "Files knob storybook": {
    "prefix": "stfiles",
    "body": [
      "${1:proptype}={files('${1:proptype}', accept, [${2:defaultValue}])}"
    ],
    "description": "Facilititates knobs files."
  },
  "Date knob storybook": {
    "prefix": "stdate",
    "body": ["${1:proptype}={date('${1:proptype}')}"],
    "description": "Facilititates knobs date."
  },
  "Date default knob storybook": {
    "prefix": "stddate",
    "body": [
      "${1:proptype}={date('${1:proptype}', new Date(${2:year}, ${3:month}, ${4:day}))}"
    ],
    "description": "Facilititates knobs date."
  },
  "Action default knob storybook": {
    "prefix": "staction",
    "body": ["${1:proptype}={action('${1:proptype}')}"],
    "description": "Facilititates addon actions."
  },
  "JS header comment": {
    "prefix": "hc",
    "body": [
      "/****************************************\n* ${1:header title}\n*/"
    ],
    "description": "Facilititates addon actions."
  },
  "JS header comment with console log green": {
    "prefix": "hcwlg",
    "body": [
      "/****************************************",
      " *  ${2:Section number}.${1:header title}.",
      "*/",
      "console.log('%c ${2:Section number}.${1:header title}', 'font-size: 16px; background: #222; color: #bada55')\n"
    ],
    "description": "JS header comment with console log green"
  },
  "JS sub-header comment with console log green": {
    "prefix": "shcwlg",
    "body": [
      " console.log(",
      "'%c ${1:sub-header}',",
      "'background: rgb(241, 250, 114); color: #000')"
    ],
    "description": "JS sub-header  comment with console log green"
  }
}