Manuel Bieh UI Components
React UI components for my personal website, portfolio, CV, etc.
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.
Getting started (now really)
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:
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:
or to make it short:
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:
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:
- minifies all images inside of
./src/assetsand writes them to
- creates a webpack bundle in
- 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:
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:
Release when done
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:
Things you should know
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-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
feature: for new minor releases and
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).
Analyze your build
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!