rc-styled
This package contains the most powerful components using react with styled components.
Table of Contents
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"
}
}