React UI components for my personal website, portfolio, CV, etc.
yarn
or
npm install
Do yourself a favor and setup and configure EditorConfig, a linter and Prettier in your editor/IDE before working on this project. Otherwise all of that will be handled by lint-staged
automatically before each commit and might get your commit rejected. This is to avoid avoidable errors and to make sure to have a clean and consistent codebase.
First of all you should create a global link to this module so you can link to it from within consuming projects and make it possible to always work with the latest version without having to publish releases after each change and pollute the npm registry with half-baked versions. To do so open the root folder of this project (i.e. where the README.md you're currently reading is located) in your terminal and run:
yarn link
Then cd
into the folder of the project where you want to use this library and run:
yarn link @manuel-bieh/ui
There are npm scripts for everything else that needs to be done:
yarn start-storybook
or to make it short:
yarn start
This starts a storybook server on port 6006 so you can happily build your UI components and try them out right away.
Storybook can also be deployed publicly by using:
yarn storybook:deploy
You will find it at https://manuelbieh-ui.surge.sh afterwards (given that you have loggedin to Surge and write access to manuelbieh-ui).
When you're done you need to create a build so the UI components can be installed as proper node module. To do so, use:
yarn build
This command:
- minifies all images inside of
./src/assets
and writes them to./assets
- creates a webpack bundle in
./dist
- transpiles all src files and writes them to
./es
(necessary to use tree shaking!)
If you want to work on a project that's consuming this UI library and on the UI library itself simultaneously there's a watch task:
yarn watch
When running in watch mode, all es
modules (incl. CSS) are transpiled on every change. Make sure you're using a linked module (see: Getting started (now really)). Caveat: assets are not included in the watch process so if you change or add any images you must run yarn imagemin
manually!
Nothing to test yet (shame on me). If there are tests one day, you can run them using:
yarn test
When you're done you need to publish your changes to the npm registry. First commit all your work (no need to create a build since semantic-release will take care of it in the release process). That's necessary so semantic-release can determine the next version number based on commit messages.
You need to setup your machine to allow semantic-release to push the new release to Github on your behalf. Follow this instruction: Github Authentication
Once Github access is set up and after committing all your work, run:
yarn release
imagemin-cli
does not preserves subfolders so there's a concurrently task that uses imagemin on all 3 (clients, social-media and tech) folders inside of ./assets/img
. You need to create a new task and add it to the imagemin task if you add a new subfolder inside of ./assets/img
(or anywhere else).
This project uses semantic-release
and semantic-release-conventional-commits
to automatically determine the next version number for new releases. By default every release is a patch release. Prefix your commit messages with minor:
or feature:
for new minor releases and major:
or breaking:
for new major releases. Have a look at .releaserc for more.
All updated files in ./src
are checked using ESLint and lint-staged
. If there are linting errors your commit gets rejected. (You can bypass that check with the --no-verify
flag but but I'd better not catch you doing it).
There is an anaylze task. It can be used for exactly that: analyzing your Webpack build. That's useful if your build gets suspiciously large. So make use of it!