icgc-argo/uikit

Re-usable React Components for ICGC-ARGO sites

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:

1. Increase version under uikit/package.release.json

• Automated process (recommended)

  2. Merge that change to develop, and let the Jenkins pipeline handle it

• Manual process (discouraged, but available)

  2. Run npm run build-uikit which performs the following:
  3. 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)