meteor/chromatic

meteor add mdg:chromatic

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

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

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

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

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

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
        }
      })
    ]
  });
}

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

  "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"
  }

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