@tigerconnect/web-component-library

Web Component Library

About this project

• Developed with Storybook
• Bundled with rollup.js

Development Setup

1. npm ci to install dependencies
2. npm run storybook for development
3. npm run build to compile the library to update it in external projects that have it installed locally
4. npm 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:

1. In the project folder, run npm i <location of web-component-library>
2. 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

1. Bump the package.json version higher than what is currently published, follow proper semantic versioning, and document the changes in CHANGELOG.md.
2. 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.
3. 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.

1. https://tigertext.github.io/web-component-library/ holds the production version and is deployed when publishing the library to NPM with npm run deploy.
2. 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.
3. https://login.tigerconnect.xyz/feature/FEATURE_BRANCH_NAME/app/components holds your development changes and is deployed when your feature branch is updated.
   • Ex: https://login.tigerconnect.xyz/feature/oasis-877-gh-pages/app/components/