cloudify-ui-components

Cloudify UI React components library

Usage no npm install needed!

<script type="module">
  import cloudifyUiComponents from 'https://cdn.skypack.dev/cloudify-ui-components';
</script>

README

Cloudify UI Components

npm jest storybook

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) or npm 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:

  1. Static analysis and code style checks - npm run lint)
  2. Unit tests - npm run test:jest (checks components logic)
  3. Snapshot tests - jest ./test/HtmlSnapshots.test.js (checks components HTML structure)
  4. 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:

  1. Use npm link cloudify-ui-components <local-path-to-cloudify-ui-components> command in your package user project,
  2. Build cloudify-ui-components project (see: Development section),
  3. 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.

Useful links