aha-web-components

This repo contains common React Web Components for use in other Aim High projects.

Setup

Install dependencies:

yarn

Assets

SVGs

SVGs should be included as components; they can be generated via the SVGR Cli (https://react-svgr.com/docs/cli/).

Single Icon:

npx @svgr/cli -- src/assets/icons/my-icon.svg > src/components/NewComponent/MyIcon.ts

Directory:

npx @svgr/cli --out-dir src/components/NewComponent -- src/assets/icons

Preview

Start a vite server to view/test components before building/publishing the package.

yarn dev

Server running on: (http://localhost:5173/)

Component Groups

Components are available in 2 distinct groups:

• Web: Components to be used on AHA websites.
• Legacy: Components copied from the aha-website repo. Mostly provided for documentation

Note that Legacy components are not included in the preview

Testing

Tests are run via jest:

yarn test

Publishing

1. Build the package yarn build

• For Windows, delete the /dist folder and run tsc --p ./tsconfig-build.json && vite build

2. Login to npm using npm login
3. Increment the version using yarn version --patch|--minor|--major (Note that this will also commit/tag any staged changes - be sure to update the commit message)

• yarn version --patch

4. Dry run the publish to verify everything works npm publish --dry-run
5. Publish using npm publish --access public

Access

Will need to have access to the aimhigh npm organization in order to publish. Access can be requested from any existing member.

Development

Linking can be setup between this and the aha-theme library for live reloaded local development:

aha-theme % yarn link
aha-theme % npm run build:watch

aha-webcomponents % yarn link @aimhigh/theme
aha-webcomponents % yarn dev