/component-library

This module contains reusable React components for the VA.gov design system published as an NPM package for use in the vets-website frontend codebase.

Primary LanguageJavaScript

Component library

Publishing workflow Latest version

This is a monorepo containing two main packages:

  • react-components
  • web-components

The core package is for bundling the two main packages into one for publishing. The storybook package is for the combined story files from each *-components package.

Contributing

Branch naming

This repo uses Chromatic to streamline reviews by publishing your changes online. A link containing your changes is automatically added to pull requests to aid others when reviewing your code. In order for this link to work, please follow these rules when naming your branch:

  • Your branch must contain only lowercase letters, numbers and dashes
  • Your branch must not exceed 37 characters

Publishing

Updating the version

To publish changes from the react-components subpackage, make sure the version number in packages/react-components/package.json and the version number in packages/core/package.json have been updated to be one ahead of the published versions.

To publish changes from the web-components subpackage, make sure the version number in packages/web-components/package.json and the version number in packages/core/package.json have been updated to be one ahead of the published versions.

yarn version is available to use to make changes in the CLI. To change the version of the package you are working on run one of the following commands: yarn version major, yarn version minor, or yarn version patch. For guidance on which command to use please see below.

How to choose a version number

This repo follows semantic versioning. Here are some examples of which changes correspond to which version (MAJOR, MINOR, or PATCH) increase.

Major

  • Component is removed
  • Component API is changed

Minor

  • New component is added
  • New variant is added for a component

Patch

  • Accessibility fix
  • Styling fix

Releasing

If the version numbers have been updated in master and you're ready to publish, draft a new release where the tag follows the vX.Y.Z semantic versioning structure. This tag should match the version found in packages/core/package.json. Be sure to include good release notes describing the changes - GitHub's autogenerated release notes can be helpful.

Once a release is created, an attempt will be made to automatically publish the package(s) to npm using a GitHub action.

Running Build via Storybook

  1. cd packages/web-components/
    1. yarn install
    2. yarn build
  2. cd ../react-components/
    1. yarn install
    2. yarn build
  3. cd ../core/
    1. yarn install
    2. yarn build
  4. cd ../storybook/
    1. yarn install
    2. yarn storybook

This will allow you to run Storybook locally to view all components

Stencil Dev Server for Testing IE11

  1. Update stencil.config.ts line 16 to buildEs5: true,
    1. More information on buildEs5 in Stencil
    2. Stencil Dev Server is run in dev mode
  2. Within component-library/packages/web-components/src/index.html Web Components can be added inside of the <body> tag for testing
    1. Example:
    <body>
    <va-progress-bar label="Add a label here" percent={35}></va-progress-bar>
    <va-segmented-progress-bar current={2} total={6}></va-segmented-progress-bar>
</body>
  3. Run yarn serve inside packages/web-components/ to start the Stencil Dev Server