Zengine UI React
npm install @zenginehq/zengine-ui-react> Atomic design Components for Zengine Plugins built in React.
```
npm i @zenginehq/zengine-ui @zenginehq/zengine-ui-react
``
npm run storybook `Publishing Changes
`
npm postpublish
#### Add Font Awesome Icons
In index.html or equivalent:
``
#### Import and Use
In your component.js file:
`
// Add styles. In the future this might be available on a CDN, for now include it locally.
import '@zenginehq/zengine-ui/style.css';
// Use components.
import { Button, TextField, NumberField, Form } from '@zenginehq/zengine-ui-react';
// Tree-shaking friendly imports also available.
import Button from '@zenginehq/zengine-ui-react/lib/atoms/Button';
function MyComponent() {
const myCallback = values => {
console.warn('submitted values', values);
};
return (
For more information see the Storybook.
Explanation of NPM scripts
-
storybook: starts the local dev version of the Storybook
- test: starts the Jest interactive test runner
- test:save: runs tests in CI mode (non-interactive just run all tests once) and logs output to a file
- test:cover: runs tests in CI mode (see test:save) and generates code a coverage report (only considers api folder)
- storybook:build: runs tests to generate the log output and builds the Storybook
- storybook:publish: deploys the Storybook to Github Pages
- build: builds the redistributable output for Zengine UI React; this is what people will get when they npm install this in their projects
- build:js: helper script to build JS artifacts, gets called by npm run build
- build:css: helper script to build CSS artifacts, gets called by npm run build
- 'postpublish': 'test build and publish all in one command'Directory Structure Guide
-
.cache is an internal directory used by React, ignore it
- .storybook contains Storybook configuration
- lib is where the generated package code goes when npm run build is executed; this directory won't exist unless you've run the command
- public contains static assets to be served with the Storybook
- src contains the actual Zengine UI React source code
- storybook-static is where the generated Storybook code when npm run build-storybook` is executed; this directory won't exist unless you've run the command