ARGO UIKit

Reusable UI components for ARGO projects.

Development

Local Dev

UIKit:

Install dependencies: npm ci
Start watching: npm run watch

Consumer project:

npm i <root_path_to_uikit>/dist --legacy-peer-deps

Notes:

make sure to run watch first as dist folder is used
assets will require a restart of watcher
typescript changes often need vscode to restart the TS server
avoid default exports for anything that needs to be used by 3rd party

Testing

react-testing-lib with Jest test runner see Button.test.tsx for example

Storybook

npm run storybook
npm run build-storybook creates static storybook build in ./storybook-static

Component Boilerplate

creating a new component: npm run create-component

Type checking

npm run type-check: trigger TypeScript type check for whole repo
npm run type-check -- --watch: runs the above with watch mode
- Any npm run type-check triggers tsc, so any flag layed out here can be used
If using vscode (recommended), tsc can also be run as a task in the editor:
- Cmd+Shift+B, then select tsc:build - tsconfig.json
- This will report errors in vscode's PROBLEMS tab

Publish to npm:

Increase version under uikit/package.release.json

Automated process (recommended)
1. Merge that change to develop, and let the Jenkins pipeline handle it
Manual process (discouraged, but available)
1. Run npm run build-uikit which performs the following:
2. Run npm run publish-uikit to publish latest version to npm

Dependencies

react/react-dom are needed as dependencies for storybook project does not work if they are just defined as peerDeps

Storybook

Stories are written in the older storiesOf style https://github.com/storybookjs/storybook/blob/master/lib/core/docs/storiesOf.md

No explicit export from module required
Use a constant string for story name
- Stories can break easily when you use dynamic vars as story name ${__dirname} (too many '/', diff OS)