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

1. Install ESLint and create a config file following the instructions here
2. Install Prettier yarn add --dev prettier
3. Install the prettier configuration along ESLint following these instructions
4. 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