czUI

A starter kit for CZI and Biohub Projects.

Installation

npm install cz-ui

Usage

Just add the wrapper for the the desired theme around your root component. You can then import React components directly from the cx-ui package for use in your project.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  CZUI,
  PageTitle
} from 'cz-ui';

const App = function() {
  return (
    <CZUI>
      <div role="main">
        <PageTitle>Hello World</PageTitle>
      </div>
    </CZUI>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

Using Mixins

czUI exports SASS mixin files so that you can use the theme fonts on your own custom components. For example:

@import "cz-ui/mixins/typography.scss";

.customComponent {
  @include font-accent;
}

Available Themes

The following theme components are available:

• theme name: czi, root component: <CZUI />
• theme name: biohub, root component: <BiohubUI />

See the Theme Catalog

To launch the Storybook catalog run:

1. npm install
2. npm run storybook-<theme_name>

Developer

Publishing

To publish a new version;

1. Add/update code and merge to master.
2. Bump the version in the package.json.
3. npm publish will clean and build a new lib/ folder.