Skip to main content

Migration Guide Pre-v5 (bit)

info

The latest package is no longer called "bit". The components are not managed by bit anymore and are now deployed directly to nexus.

How to migrate your existing application across to the latest component library

Configure Nexus (npm config)​

Make sure that you have the correct registry setup.

info

Chroma no longer uses bit.dev to manage the components. v5 now deploys directly to Nexus

If you haven't already you should have the following in your .npmrc file

registry=https://nexus3.auiag.corp/repos/repository/iag-npm-all/
legacy-peer-deps=true

If you use yarn then you may need the following in your .yarnrc.yml

nodeLinker: node-modules

npmRegistryServer: "https://nexus3.auiag.corp/repos/repository/iag-npm-all/"

Install​

You can now install all your components using the bundled package. This packages includes all components and utilities in the system.

yarn add @iag/chroma-react-ui.components

Import from the bundled package​

info

All components still have independent packages available so you dont have to make this change immediately.

Now you can import all the required components from a single package.

import { Header, Footer, Input } from "@iag/chroma-react-ui.components";

Brand provider changes​

info

The brand provider no longer requires a version prop to be set.

Remove the version prop from the brand provider component.

<BrandProvider brand={brand} version="1.22.0">

The brand token version is now set within the the brand provider component so you no longer need to manage this in your applications.

<BrandProvider brand={brand} >

Tailwind​

Depending on your configuration you may also need to change your tailwind config.

How to install the Chroma Tailwind config.

Assets​

info

All assets are now versioned. You must use the utlitity functions when using assets (favicons, svgs).

As of v5 all assets will also be versioned as part of the package release (v5 etc).

You will need to use the utility functions in order to target the correct versioned assets.

Favicons​

Find out more in the favicon docs

import { getFavicon } from "@iag/chroma-react-ui.components";

<link
  rel="apple-touch-icon"
  sizes="180x180"
  href={getFavicon({ brand: "chroma", filename: "apple-touch-icon.png" })}
/>;

Svgs​

Find our more in the svg docs

<img src={getAsset({ src: "svgs/flybuys/dark/logo.svg" })} />