@dossier/mithra-ui

React component library for the Dossier design system

Usage no npm install needed!

<script type="module">
  import dossierMithraUi from 'https://cdn.skypack.dev/@dossier/mithra-ui';
</script>

README

Mithra UI

React component library for the Dossier design system

Getting started

Set up local development environment:

  1. Run yarn
  2. Run yarn run build-lib to generate the version file.
  3. Run yarn start to start the dev server.

The local dev server gives you a live-reloaded version of the mithra documentation, that you can use to test components while working on them.

If you don't use yarn, you can use npm instead, or install Yarn 1.

Other useful commands:

  • yarn run build-lib
  • yarn run build-doc
  • yarn run import-icons

Technology stack

Development and branches

Development happens in feature branches, for example feature/MU-123-add-context-menu. These are merged by pull request to release branches, for example release/v2.next. There is one combined development/release branch for each major version. Later version branches include changes from earlier versions; for example, v1 is included (merged) into v2, but not vice versa.

When making changes that affect users of the library, please add a concise comment about the change at the top of the CHANGELOG file.

To determine which release branch a feature should be merged to, use SemVer (breaking changes → next major, non-breaking changes → next minor or patch).

Code style

We use automatic code formatting with Prettier. You should set this up with your editor when contributing.

VS Code: The project already contains configuration that makes the editor format on save, but you must install the Prettier extension. This will be prompted when you open the project.

IntelliJ: Intall the Prettier extension, and choose the node_modules Prettier in its settings.

Releasing packages

Don't follow the steps below unless you know what you're doing.

Steps to release on npm:

  • Checkout the correct release branch with your changes.
  • Run the appropriate npm version major|minor|patch to update package.json and create a tagged commit.
  • Push the resulting git tag to bitbucket (git push --tags).
  • This triggers the npm publish pipeline, which is irreversible. It also rebuilds and deploys the docs site.

Image snapshot testing

The image snapshot tests take screenshots of test layouts using puppeteer and jest. The images are then compared with previous snapshots using jest-image-snapshot. If a test fails, you will get a visual diff. These tests run automatically in a bitbucket pipeline for all pull requests. If they fail, you can download the diff images for the failed tests in an artifact from bitbucket.

You can run the tests locally using yarn run test:local, however, you will most likely need to run this command inside a docker container, because font rendering may be different on your machine and the one that generated the snapshot image. There are tasks to build and run a local docker test container that is consistent with the CI pipeline environment in the package.json scripts.

Importing icons from Figma

  1. Select the icons in Figma and batch export everything as svg.
  2. Create a folder in the project root called ./iconBuildSrc
  3. Extract the downloaded zip into the iconBuildSrc
  4. Run yarn run import-icons
  5. Modify src/lib/assets/icons/icons/index.js as needed if the categories have changed
  6. Voilà. Delicious icons.