leoni-test-publish-ui-lib v2.7.0
Overview
This library contains React UI components for Learning platforms.
Components documentation
https://leonimurilo.github.io/test-publish-ui-lib
Getting started
Install dependencies
npm install
There are two easy ways to develop and test the library locally:
Using Storybook Testing on another app
Contributing
It is recommended to perform standardized commits in repository using commitizen. Its main purpose is not only to define a standard way of committing rules and communicating it, but also providing semantic-release
library the ability to automatically calculating the next versions of the library (wheter it is a patch, minor or major version) and generating relase notes based on commit history. Because of that it is also recommended to always rebase and merge instead of merging with a single merging commit. In other words, semantic-release library will use all of the commits to work, so merging without rebasing would not provide it the commit history necessary.
To commit using the standard, we can use a helper tool:
npm run commit
That will prompt a few questions and automatically format the commit message that follows the convention.
Alternatively the following vscode plugin can be used as a commit helper: KnisterPeter.vscode-commitizen
Running Storybook
We can run Storybook locally to test and document our components as Stories:
npm run storybook
Testing locally on another app
Explanation
In order to test this library in other apps you will be using Yalc. Yalc differs from npm link because instead of using symlinks, it creates a copy of the lib inside the target app (like ole-client) root directory, in a folder called .yalc. To push that copy we can use yalc push
every time we need to update the copy. After that copy is made, the only thing we need to do is to make the package.json of the app to point to the .yalc directory instead of node_modules. Luckly Yalc provides a command for that: yalc add <package_name>
.
This solution avoids using symlinks which makes it easier for consumer apps that are containerized, since symbolic links on host machines are difficult to deal with when using containers.
Instructions
1) Install Yalc globally
npm install -g yalc
2) Watch, build and push the built library to Yalc:
In this project we already have a easy way of doing this:
npm run rollup:watch
Under the hood the command above is watching and building the library, and when that finished, it automatically performs
yalc push
3) Go to your app directory and run the following command in the host machine (commands can be later added as npm script):
# yalc add has to be issued on the host machine, not in the container!
yalc add leoni-test-publish-ui-lib && npm install
Now your app will have its package.json pointing to the most up to date library build inside .yalc directory.
Optional: You can also configure you app webpack watch options to watch changes made in this package inside node_modules:
{
...otherWebpackOptions,
watchOptions: {
poll: 1000,
ignored: [
/node_modules([\\]+|\/)+(?!leoni-test-publish-ui-lib)/,
/leoni-test-publish-ui-lib([\\]+|\/)node_modules/,
],
},
}
This way every change made in the library will result in the library being rebuilt, push to yalc and then the webpack of the consumer apps will detect the changes and also refresh the application with the most recent library
How are new versions released?
The library semantic-release
is being used for that. Every time master branch receives one or more commits, a github action job called publish-release
will run doing the following:
- install dependencies
- build the library using rollup
- run semantic-release
Semantic release will analyze the commits and decide whether a new version has to be published or not. If a new version needs to be published, the library will find the next appropriate version number based on the commit history, and then release the library by:
- creating a github release describins all the changes
- publishing the library to NPM registry
- updating the changelog file in the repository
- updating package.json version property
Lastly, one more action job runs to build and publish Storybook documentation to github pages.
NPM Scripts
Command | Description |
---|---|
rollup | Uses rollup to compile and build the library into dist directory |
rollup:watch | Same as rollup, but watching files and automatically pushing changes to yalc |
commit | Starts commitizen commit helper |
test | Runs jest tests |
test:watch | Runs jest tests on watch mode |
semantic-release | Releases a new version of the app |
test | Runs jest tests |
build-storybook | Builds Storybook |
storybook | Starts Storybook for local development |
start | Starts Storybook for local development |
lint | Run ESLint report |
lint:fix | Run ESLint report and make all possible fixes |
format | Format code using prettier |
yalc:push | Pushes build to yalc local repository (local development) |
TechStack
This project uses Typescript, Jest, react-testing library, SASS, CSS Modules, Storybook and rollup. ESLint and prettier are also setup.