Skip to content

icgc-argo/uikit

Repository files navigation

ARGO UIKit

Netlify Status Storybook npm version TypeScript

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)

    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)