@codat/orchard-ui v34.13.1

Orchard - React Component Library

React toolkit and design language for Codat internal projects.

View the components in Storybook

Storybook Static Page

You can view the storybook page here:

• Storybook Page

Usage

Importing to your React application

Connect to feed

Follow the project setup instructions on how to authenticate with the Codat npm feed.

Install the library:

yarn add @codat/orchard-ui;

Import the components you need into your app:

import { Button } from "@codat/orchard-ui";

Import the CSS file:

import "../node_modules/@codat/orchard-ui/dist/index.css";

Ensure you have the Axiforma fonts added.

Required peer dependencies

Each UI Kit package comes with some required peer dependencies to be installed by the consumer.

Make sure to have the related peer dependencies installed and matched the specified version.

The required peer dependencies include react, react-dom, both at version 17.0.1

Importing colours

The CSS file should be imported to the root of your project and will include a number of colour-related css variables in the :root, eg var(--color-ui-primary);

To import directly into javascript, you can import a colours object from the Orchard package.

import { colors } from "@codat/orchard-ui";

The object keys correspond to the css variables, eg. colors["color-ui-primary"]

Contributing

Getting Started

This project is created with React and Storybook.

Clone the repo:

https://codat@dev.azure.com/codat/Codat/_git/Orchard

Install dependencies:

yarn install

Run Storybook:

yarn storybook

To run tests:

yarn test yarn test:coverage

To manually publish the library:

yarn publish

To run a production build:

yarn storybook:export

To test a production build locally:

npx http-server storybook-static

Creating a component

To start off, you can create a component from a template with this command:

yarn create-component

You will prompted to name your component and choose where it should be placed. The script will create empty files for the React component, CSS module, spec, and storybook mdx, all placed in the chosen folder.

Local development alongside another React app

While developing components you may wish to view them inside another React application to check your changes.

To avoid publishing to npm and re-installing each time, recommend to use yalc to link to a local package. (This method is preferred over yarn link due to conflicts with multiple react versions.)

Install the yalc package with yarn global add yalc

To link to your local package in another folder:

Navigate to the Orchard folder and run yalc publish

You should see a message that it is successfully registered the @codat/orchard-ui package.

Navigate to your React application folder and run yalc link @codat/orchard-ui. This will create a symlink in your node_modules to the local package. You should be able to import components as if you had installed the package from npm.

To unlink, run yalc installations remove @codat/orchard-ui removes the published package. yalc remove @codat/orchard-ui in your React app.

Making changes

Updating versions is handled automatically in the CI pipeline. For this to work, commit messages must follow semver guidelines - the use of which is enforced with a commit hook to ensure all commits follow the correct specification.

• For fixes, prefix commits with fix: - version bump will be patch, eg. 0.0.1
• For new features, prefix commits with feat: - version bump will be minor, eg. 0.1.0
• For breaking changes, prefix commits with BREAKING CHANGE: - version bump will be major, eg. 1.0.0

Update the changelog

To help users update to new versions of Orchard, add an entry to the top of the CHANGELOG.md file specifying your changes. A guide about how to do this can be found here