@dossier/mithra-ui v2.81.0

Mithra UI

React component library for the Dossier design system

• Documentation
• Bitbucket

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

• create-react-app
• SCSS
• TypeScript

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.

Docker images

• Chrome.dockerfile is used to build the docker image with the necessary dependencies for running the tests.
• Test.dockerfile is used to create a local image that is based on Chrome.dockerfile but with the project files included. This image is used to run the tests in a consistent environment outside of the operation system.
• docker-compose.yml is used to start the local docker container with the test image and include the right source code.

Before you start you should make sure your docker is logged into dossier docker repo. You can do this by running the following command:

docker login docker.dossier.no --username {NEXUS_USERNAME} -p {NEXUS_PASSWORD}

Running the tests in the docker container

If you want to run the tests in the docker container, run the following:

# Run tests in the container
yarn test:docker-run

Updating chrome docker image

If you need to add some dependencies to the docker image, you should update the Chrome.dockerfile and then build the image.

Building and publishing the chrome docker image

The image described in Dockerfile.chrome needs to be published to a Docker repository so that it will be available in the Bitbucket pipeline.

To build the docker image, run the following:

yarn test:docker-build

To publish the image, run the following:

yarn test:docker-publish