0.0.5 • Published 2 years ago
@zeroui/components v0.0.5
Cero To Production
Awesome custom library to components
Cero To Production
Course Outline
Hello World
Storybook configuration Components
yarn add typescript react react-dom
npx sb init
- if you before installed react and react-dom Storybook know's your use react
- install @storybook/addon-postcss postcss css-loader
- configure .tsconfig.json
- allow use nodejs and jsx
yarn add -D @storybook/addon-postcss postcss css-loader
- configuration main.js (.storybook)
addons: [ { name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: require('postcss'), }, }, }, ] }
- create postcss.config.js
module.exports = { // Add your installed PostCSS plugins here: plugins: [ // require('autoprefixer'), // require('postcss-color-rebeccapurple'), ], };
Design Tokens (Components)
- Create designToken.js file
- Create script to transform the tokens into custom properties
Atoms & Molecules (Components)
- Create Button Molecule
- Create Paragraph Atom
- Create Heading Atom
- Create Icon Atom
- Create Picture Atom*
- Create ButtonIcon Molecule
Lint & styling (Components,Web)
- Add ESLlint rules and Prettier
- Add a modified version of EditorConfig
- Install ESLint and create a config file following the instructions here
- Install Prettier
yarn add --dev prettier
- Install the prettier configuration along ESLint following these instructions
- Finally configure the precommit hook with lint-staged here
- create two files .eslintrc.json and .prettierrc.json
- install how dev dependency eslint and prettier
- run eslint app
./node_modules/.bin/eslint --init
- delete some values in package.json lint-staged property to prettier use lint in eslint and run
yarn add eslint-plugin-prettier
yarn add eslint-prettier-config
yarn add eslint-config-prettier
npx mrm@2 lint-staged
- create a simle script
"lint":"eslint ."
- and for final enjoy debug your app
Redux Configuration (Web)
Folder Structure (Web)
Environment Variables (Web)
Notes
Atomic Design
- Atom: atom is a component that composed by an unique Atom with or without HTML tags or just HTML tags
- Molecule: A molecule is a component that is a composed by at least 2 atoms
- i