Web Component Library

About this project

• Developed with Storybook
• Bundled with rollup.js
• Testing with test-runner and jest-image-snapshot

Development Setup

1. npm ci to install dependencies
2. npm run storybook for development
3. npm run deploy to build and publish the library to NPM and Storybook application to GitHub Pages. See Publishing for more details.
4. npm run gen to create a new component.

Visual Testing Procedure

1. npm run storybook to have it running, the test-runner will run against this
2. In a separate terminal, run npm test. Failed tests will create a diff image that you can find in each component's respective snapshot diff folder.
3. Determine if the failed tests are intentional based on your changes, or are regressions. If they are intentional, rerun that component's tests and set a new baseline image to test against with npx test-storybook COMPONENT -u. E.g. npx test-storybook Modal -u
4. Be sure to commit the new baseline image(s) with your PR.

See test-runner and jest-image-snapshot for documentation.

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:

1. 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

2. 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/[email protected] --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

1. First merge your feature work without any changes to the package version. You should document the changes in CHANGELOG.md under the Unreleased section.
2. 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.
3. Merge the version PR.
4. 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.
5. 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/