@merify/ui Component library

This repository contains React UI components as well as some other helpful scripts used throughout the Merify ecosystem.

Installation

yarn add @merify/ui

Table of Contents:

• Development
• Deployment

Development

Main development scripts:

yarn storybook
yarn type-check
yarn compile
yarn watch

Storybooks

Making changes to @merify/ui can happen in a few different ways, with the most useful being React Storybooks. Storybooks is a development IDE that allows one to define various component states in isolation as well as write docs using MDX.

To start using storybooks, boot it up with

yarn storybook

Once it's done compiling, a browser window will launch containing all of your stories.

Writing new stories

To add a new story, create a new file following this filenaming convention:

MyComponent.stories.tsx

or

MyComponent.stories.mdx

Storybooks will automatically pick up this file extension and display the story in the sidebar.

See the numerous examples throughout the repo for examples on how to write stories, or refer to the Storybooks docs.

Linking

Another way to develop is by symlinking packages via yarn link, which allows one to make changes in one package that will then picked up by another.

In the main @merify/ui component repo run

yarn link && yarn watch

This creates the symlink and boots the compiler in watch mode.

Then in another terminal window cd into the project your working in and connect the link:

yarn link @merify/ui
yarn dev

At this point changes will be picked up from the component lib and refreshed in the consuming app.

Deploying Canary releases via NPM

A third option is publishing pre-releases (canaries) to NPM, which one can then yarn add in the consuming repo.

1. Open a new branch
2. Make changes
3. Go to GitHub and create a new PR, tagging it with patch/minor/major semver label as well as release
4. Open the PR. At this point a new canary release will be sent out via a Github Action and published to NPM
5. Once the release is complete, the PR description will be updated with the version.
6. Go to consuming app and run yarn add @merify/ui@canary to install the latest release.

Deployment

Deploying new versions of the library to NPM is handled automatically via Auto.rc, via a standard pull-request workflow. Changes are tagged with an appropriate semver PR label (major/minor/patch), which is then picked up by Auto and deployed via a Github action.

To create a new release:

1. Create a new branch
2. Make changes
3. Open a PR and tag it with a semver label
4. Attach a release label. Don't forget this step! This tells things to actually publish
5. Merge PR. Once the release completes a new comment is added to the PR announcing the latest release, and a changelog will be added to the repository releases page.