Design System - Test front of Quero Educação
make with love <3
Important!!!
this project was divided into 2 repositories, one for the design system and another for the implementation of the page with the features.
- 💄 [REPO 1] This one, Design system
- [REPO 2] the features
A Monorepo with multiple packages and a shared build, test, and release process.
- 🐉 Lerna - The Monorepo manager
- 📦 Yarn Workspaces - Sane multi-package management
- 🚀 React - JavaScript library for user interfaces
- 💅 styled-components - CSS in JS elegance
- 🛠 Babel - Compiles next-gen JavaScript
- 📖 Storybook - UI Component Environment
- 🃏 Jest - Unit/Snapshot Testing
Usage
yarn dev
- This starts Storybook for viewing all the components locally.yarn bootstrap
- This installs all of the packages and links dependent packages together.yarn build
- This babelfies all of the packages and creates/lib
folders for each one.yarn test
- Run all linting and unit tests before committing.yarn test -o
- Run only the tests that have changed.yarn test -u
- Update all of the snapshot tests.
Lerna
lerna changed
- Show which packages have changed.lerna diff
- Show specifically what files have cause the packages to change.
Linking
- Run
yarn build
- Run
yarn dev
- Change the
package.json
of the consumer from$YOUR_PACKAGE_NAME
(which lives inside the monorepo) tofile:./../monorepo/packages/$YOUR_PACKAGE_NAME
- Run
rm -rf node_modules && yarn
in the consumer - 🎉
Publish
- Run
npm publish --access public
- Make project public - Run
yarn run lerna-publish
- Send to npm - Run
yarn deploy-storybook
- Make deploy to S3 of AWS