- Atoms
- Can exist on each own
- eg: Label, Input, Button, Text, Link, Logo, Icon
- Molecules
- Combination of atoms
- Organisms
- Combination of molecules
- eg: NavBar, Footer, TopBar
- Templates
- Combinations of organisms
- Representation of what the actual page will be without data.
- Pages
- Combination of templates
Carbon design system by IBM. Fluent UI by Microsoft.
The work of an engineer is to translate the DS in reusable code.
- Organized - fixed code structure
- No specificity issues
- Atomic design principles
- Easy to understand (comments, variables)
- Fully customizable / theme-able
- Reusable across teams / projects
The foundation folder can also be called abstract.
mixins for reusable functionality.
@mixin tablet {
@media (min-width: map-get($breakpoints, "md")) {
@content;
}
}
How to use the mixin:
.body {
font-size: 12px;
@include tablet {
font-size: 14px;
}
}
- yarn add normalize-scss (_check _reset.scss file)
- yarn add --dev stylelint stylelint-config-sass-guidelines stylelint-config-prettier stylelint-prettier prettier (check .stylelintrc.json file and package.json file)
- yarn add --dev husky lint-staged
-
husky is a package that helps us use git hooks, eg if we want to run a command before or after we commit or before we pull or after we push. (check package.json)
-
lint-staged is package that uses husky only on files before committed.
npm uninstall husky
npm install -D husky@4
npm install -D husky
-
- yarn add --dev node-sass
Manage all the packages in one repository.
yarn add --dev lerna
- Lerna will give us some commands that will help us
- publish our packages to npm easily
- commit
- push
- change logs etc
- in combination with yarn workspaces
yarn lerna init
yarn add --dev react @types/react typescript yarn add --dev rollup rollup-plugin-typescript2
- rollup.config.js file and add script in package.json file in react package.
- yarn build
yarn add --dev react react-dom @types/react-dom @types/react typescript parcel-bundler
yarn add --dev nodemon
In the packages/react:
- yarn add --dev jest @types/jest @babel/preset-env @babel/preset-typescript @babel/preset-react @testing-library/react @testing-library/jest-dom jest-environment-jsdom
In the packages/foundation:
- yarn add --dev jest @types/jest @babel/preset-env @babel/preset-typescript jest-environment-jsdom
In the packages/react:
- yarn add --dev @storybook/react
- yarn add --dev @storybook/preset-typescript
- yarn add --dev babel-loader
- yarn add --dev @storybook/addon-controls
- yarn add --dev chromatic
- yarn chromatic --project-token=##############
- Let it add the script command to our package.json file.
-
- Add organization
- Unlimited public packages
- In terminal:
- npm login
- npm publish (but we have 3 packages)
- We have been using lerna
-
Add to the packages package.json file:
"publishConfig": { "access": "public" }
-
To the playground package.json ==> "private": true
-
Lerna will the control the version numbers.
-
npm login (username, password, email)
-
yarn lerna publish
-
We need to follow semantic versioning. (Usually a minor for the first publish)
-
Also makes a commit to github with the new tagged version.
-
- yarn add --dev commitizen cz-conventional-changelog -W (for the top root)
Linting for our commits:
- yarn add --dev @commitlint/cli @commitlint/config-conventional -W For husky to work correctly
- *** yarn add husky --dev -W && npx husky-init && npm exec -- github:typicode husky-4-to-7 --remove-v4-config***