0.4.18 • Published 4 years ago
cz-ui v0.4.18
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.