Web Component Library
About this project
Development Setup
npm ci
to install dependenciesnpm run storybook
for developmentnpm run deploy
to build and publish the library to NPM and Storybook application to GitHub
Pages. See Publishing for more details.npm run gen
to create a new component.
Using the library in a project locally
There are other methods for developing the project completely locally, however they suffered from caching issues. Instead the recommended approach is to publish a beta version of the project and then npm install
that into the other repo you are working in (e.g. in web-react-ui-toolkit
). This means that each time you make changes and want them to be available in the downstream repo, you will need to publish another beta version.
We follow the following convention for publishing a beta version:
- From inside the
web-component-library
repository
- Increment the version field in
package.json
and append -<initials>.beta.<beta version number>
. E.g. if the current package version is 2.1.0
then the result would be 2.1.1-ms.beta.1
for Mahesh Sundaram's first beta version. - Run
npm run build
- Then
npm publish --tag beta
- Then inside the repository using the library. e.g. inside
web-react-ui-toolkit
- Run
npm install @tigerconnect/web-component-library@<beta version> --save-exact
E.g. @tigerconnect/web-component-library@2.1.1-ms.beta.1 --save-exact
- You will then need to restart the watcher process for
web-react-ui-toolkit
Once you are satisfied with your changes in web-component-library
you should checkout the changes you made to package.json
and first merge your PR as unrelease package changes (see CHANGELOG.md
). Once your PR is merged, you then can create a subsequent PR that increments the package version and moves the unreleased changes to released in the changelog. Finally in the downstream repo you can update the installed web-component-library
package version to the latest published version.
Editor Setup
This project uses PostCSS, which will require some setting changes so that your CSS files will be
understood and formatted auto-correctly:
VS Code
Include in your VSCode editor settings (JSON):
"files.associations": {
"*.css": "scss"
}
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
Vim
As a quick workaround you can use :set ft=scss
.
Publishing
- First merge your feature work without any changes to the package version. You should document the changes in CHANGELOG.md under the
Unreleased
section. - After merging your feature work, create a new PR that increments the package.json version (following proper semantic versioning) higher than what is currently published. Name the branch in the format
feature/major.minor.patch
. Move what is in Unreleased
heading into Released
under a new version and publish date header. - Merge the version PR.
- Pull down latest master and locally run
npm run deploy
. The command will run npm run build
and then npm publish
.
- This command will also build and deploy the latest Storybook application to
GitHub Pages.
- Update any repo using this package to have the newly published version and reinstall
respectively.
Storybook Deployment
We currently deploy three different versions of Storybook to help facilitate sharing changes during
different development phases.
- https://tigertext.github.io/web-component-library/ holds the production version and is deployed
when publishing the library to NPM with
npm run deploy
. - https://login.tigerconnect.xyz/app/components/ holds the latest pre-release version (or is in
sync with the production version) and is deployed when the master branch is updated.
- https://login.tigerconnect.xyz/feature/FEATURE_BRANCH_NAME/app/components/ holds your development
changes and is deployed when your feature branch is updated.