README
Cloudify UI Components
This repository contains React components reusable across Cloudify UI applications.
Table of Contents
Table of contents generated with markdown-toc
Installation
npm install cloudify-ui-components
Usage
To use the package in your environment just import the component you need. For example:
import { ApproveButton } from 'cloudify-ui-components';
export function MyButton() {
return <ApproveButton icon='play' />;
}
Documentation
Documentation of released versions can be found at https://docs.cloudify.co/ui-components/<version>
.
You can get the same StoryBook documentation of the components locally by executing npm run build-storybook
.
Development
Development environment is set up to enforce good practices in JS development (static code analysis, style formatting, code test coverage check, visual regression testing).
General guidelines for adding new components:
- add new code to
src/components
folder - every exported component should be in separate folder
- remember to export new files using
index.js
- build:
npm run build
(production build) ornpm run storybook
(run StoryBook with automatic rebuilding) - test:
npm test
(static analysis, code style check, unit testing with Jest testing framework and coverage check) - use prettier and eslint during development
- document your code by providing general description for component at the top of the component definition and description for all component props (StoryBook recognize react-docgen format)
- write StoryBook stories for every newly added component
- follow Cloudify Brandbook containing Cloudify Brand Guidelines
Testing
There are few different types of tests in this package:
- Static analysis and code style checks -
npm run lint
) - Unit tests -
npm run test:jest
(checks components logic) - Snapshot tests -
jest ./test/HtmlSnapshots.test.js
(checks components HTML structure) - Visual regression tests -
npm run test:loki
(run only in Jenkins and download artifacts generated during execution to update screenshots)
Debugging
Internal
You can debug components with use of StoryBook application (npm run storybook
) or Jest unit tests (npm run test:jest
).
External
If you want to develop/debug cloudify-ui-components
from the package user side (eg. from cloudify-stage), then instead of using cloudify-ui-components
package from NPM registry, you can:
- Use
npm link cloudify-ui-components <local-path-to-cloudify-ui-components>
command in your package user project, - Build
cloudify-ui-components
project (see: Development section), - Run package user project and see changes applied locally in
cloudify-ui-components
.
Deployment
Cloudify UI Components library is published in NPM registry. See cloudify-ui-components@npm.
Cloudify UI Components uses the same mechanism as Cloudify UI Common repository for deployment. Check Deployment section @ cloudify-ui-common for details.