Note: This project is no longer maintained. We suggest using Storybook as your component explorer. The creators of this project now build Chromatic QA an automated visual testing tool for UI components and component libraries.

Chromatic

Explore, visualize, and prototype your UI components.

Demo

Usage

meteor add mdg:chromatic

Make Chromatic available at /styleguide in your app in development mode:

const {ChromaticExplorer} = Package['mdg:chromatic-explorer'] || {};

Importing Chromatic

Versions 0.0.x of these packages are compatible with Meteor 1.2

const { Chromatic } = Package['mdg:chromatic-api'] || {};

Versions 0.1.x are compatible with Meteor 1.3

import { Chromatic } from 'meteor/mdg:chromatic';

Installing Component Explorer

Configure the URL:

import { ChromaticExplorer } from 'meteor/mdg:chromatic';

if (ChromaticExplorer) {
  ChromaticExplorer.configure({ basePath: '/styleguide' });
}

Write Component Specs

=======

import { Chromatic } from 'meteor/mdg:chromatic';

ComponentName = React.createClass({
  // code
});

if (Chromatic) {
  Chromatic.add(ComponentName, {
    specs: [
      new Chromatic.Spec('specName1', {
        props: {
          // props used by your component
        }
      }),
      new Chromatic.Spec('specName2', {
        props: {
          // props used by your component
        }
      })
    ]
  });
}

Component packages

mdg:animations
mdg:buttons
mdg:callout
mdg:code-block
mdg:color-grid
mdg:date-components
mdg:form-components
mdg:list
mdg:loading-spinner
mdg:overlays
mdg:sortable
mdg:tooltips
mdg:outlines

NPM Dependencies

Some of these UI components have NPM dependencies, here is the full list that you may need (taken from Chromatic's package.json)

  "dependencies": {
    "autosize": "3.0.15",
    "classnames": "^2.2.5",
    "react": "^15.1.0",
    "react": "^15.2.1",
    "react-addons-create-fragment": "^15.2.1",
    "react-addons-css-transition-group": "^15.2.1",
    "react-addons-linked-state-mixin": "^15.2.1",
    "react-addons-perf": "^15.2.1",
    "react-addons-pure-render-mixin": "^15.2.1",
    "react-addons-test-utils": "^15.2.1",
    "react-addons-transition-group": "^15.2.1",
    "react-addons-update": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-input-autosize": "^1.1.0",
    "react-input-mask": "^0.7.2",
    "velocity-animate": "^1.2.3",
    "velocity-react": ">=1.1.4"
  }

Circular references

When extending Chromatic itself you may need to import the API directly to avoid circular references:

import { Chromatic } from 'meteor/mdg:chromatic-api';