@tigerconnect/web-component-library

Web Component Library

About this project

• Developed with Storybook
• Bundled with rollup.js

Development Setup

• npm ci to install dependencies
• npm run storybook for development
• npm run build to compile the library to update it in external projects that have it installed locally
• npm 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.
  • Ex: https://login.tigerconnect.xyz/feature/oasis-877-gh-pages/app/components/