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.
Using the library in a project locally
The current solution for this is not pretty, but it'll suffice:
- In the project folder, run
npm i <location of web-component-library>
- Rename the react folder within web-component-library's node_modules to avoid it being used
Important!
Remember to keep these changes out of your commits, as this will break deployments to other
environments.
VSCode Setup
This project uses PostCSS, which will require a few things so that your CSS files will be understood
and formatted auto-correctly:
Include in your VSCode editor settings (JSON):
"files.associations": {
"*.css": "scss"
}
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
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.