Web Component Library
About this project
Development Setup
npm ci
to install dependenciesnpm run storybook
for developmentnpm run build
to compile the library to update it in external projects that have it installed
locallynpm 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
- From inside the
web-component-library
repository
- run
npm run build
to build the latest changes - then run
npm link
.
- Then inside the repository using the library. e.g. inside
web-react-ui-toolkit
- run
npm link @tigerconnect/web-component-library
.
For further changes, only npm run build
is needed (and sometimes restarting the web-react-ui-toolkit
build/watcher, for example)
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
- Bump the package.json version higher than what is currently published, follow proper semantic
versioning, and document the changes in CHANGELOG.md.
- 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.