meteor/chromatic

Name: chromatic

Owner: Meteor

Description: Chromatic component explorer

Created: 2016-03-31 16:39:48.0

Updated: 2018-01-13 05:11:37.0

Pushed: 2017-10-23 04:28:23.0

Homepage: null

Size: 587

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Chromatic

Explore, visualize, and prototype your UI components.

Demo

Usage

or add mdg:chromatic

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

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

Importing Chromatic

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

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

Versions 0.1.x are compatible with Meteor 1.3

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

Installing Component Explorer

Configure the URL:

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

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

Write Component Specs

=======

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

onentName = React.createClass({
 code


Chromatic) {
romatic.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

animations
buttons
callout
code-block
color-grid
date-components
form-components
list
loading-spinner
overlays
sortable
tooltips
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)

ependencies": {
"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:

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