meteor / chromatic

Chromatic component explorer

---

Meteor is an ultra-simple environment for building modern web applications.

---

• Official Website
• Installation
• Documentation

---

📚 Create your applications using modern JavaScript

Benefit from the latest technology updates to rapidly prototype and develop your applications.

---

✨ Integrate technologies you already use

Use popular frameworks and tools right out-of-the-box. Focus on building features instead of configuring disparate components yourself.

---

💻 Build apps for any device

Use the same code whether you’re developing for web, iOS, Android, or desktop for a seamless update experience for your users.

---

🔥 Getting Started

How about trying a tutorial to get started with your favorite technology?

React
Blaze
Vue
Svelte

Next, read the documentation and get some examples.

🚀 Quick Start

On your platform, use this line:

> npm install -g meteor

🚀 To create a project:

> meteor create my-app

☄️ Run it:

cd my-app
meteor

🧱 Developer Resources

Building an application with Meteor?

• Deploy on Meteor Cloud
• Discuss on Forums
• Join the Meteor community Slack by clicking this invite link.
• Announcement list. Subscribe in the footer.

Interested in helping or contributing to Meteor? These resources will help:

• Core development guide
• Contribution guidelines
• Feature requests
• Issue tracker

To uninstall Meteor:

• If installed via npm, run:

  meteor-installer uninstall

• If installed via curl, run:

  rm -rf ~/.meteor 
  sudo rm /usr/local/bin/meteor

To find more information about installation, read here.

chromatic's Issues

Demo!

If only meteor deploy still worked!

Possible router conflict?

When I added mdg:chromatic and open up the browser, I saw an error of something like

The route '/' doesn't match any of the routes

I noticed this package has Flow-Router as a dependency, and I'm currently using react-router to do routing in my project. I wonder if using this package requires to use flow-router to do the routing?

Also, the dependencies of react-runtime caused some other errors in the console too. I know you are in the progress of publishing the package on npm, and I assume at that time the react-runtime dependency will be removed, right?

BTW, thanks for this beautifully designed package 🎆

Form error handling is not compatible with errors from mdg:validation-error

The form should be able to handle validation errors with {details: [Array]} as well as {details: {name: value,...}}

Add Support for React 15

Peer requirements are not satisfied if react is upgraded to 15.x

unable to see anything at /styleguide as stated in the documentation at the github link..

After adding mdg:chromatic as noted at https://github.com/meteor/chromatic13, I'm unable to see anything at /styleguide as stated in the documentation at the github link..

In github, under 'usage' section for mdg:chromatic, it says: "Chromatic is available at /styleguide in your app in development mode".

?

Chromatic without MeteorJS

Is it possible to run Chromatic without MeteorJS or with a low amount of extra code?

Make Meteor components on opt in?

Some included packages conflict with other style, like bootstrap buttons, can we make them an opt in?

/styleguide empty

I ran:
meteor add mdg:chromatic
meteor add mdg:chromatic-explorer

The log shows these errors after accessing http://localhost:3000/styleguide:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value) is not a function
Uncaught TypeError: Cannot read property 'Form' of undefined
There is no route for the path: /styleguide

(I'm using the simple-todos-react updated to Meteor 1.3)

Where is mdg:borealis?

This looks to be the package with all the less styling, but can't find it.

Build error in 1.3

After installing mdg:chromatic and updating npm and meteor packages I get the following error on meteor startup at console:

[[[[[ /Volumes/PNYUSB128 RAID Set 1/galaxy/examples/simple-todos ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
=> Errors prevented startup:                  

   While building for web.browser:
   error: no plugin found for classnames.browserify.js in mdg:classnames; a plugin for
   *.browserify.js was active when it was published but none is now
   error: no plugin found for autosize.browserify.js in mdg:form-components; a plugin for
   *.browserify.js was active when it was published but none is now
   error: no plugin found for AutosizeInput.browserify.js in mdg:form-components; a plugin for
   *.browserify.js was active when it was published but none is now
   error: no plugin found for AutosizeInput.browserify.options.json in mdg:form-components; a
   plugin for *.browserify.options.json was active when it was published but none is now

=> Your application has errors. Waiting for file change.                                              

Meteor Version: 1.3

Project: it's just the initial simple-todos-react app from the main meteor tutorials page, w/ chromatic added to it.

Meteor Package Versions:

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
cosmos:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
kadira:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
mdg:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
percolate:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
tmeasday:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

/package.json

{
  "name": "simple-todos",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "meteor-node-stubs": "~0.2.0",
    "react": "^0.14.8",
    "react-dom": "^0.14.8"
  }
}

P.s. Great talk @ Meteor Live! Can't wait to check it out.

React.PropTypes is deprecated in React 15.5

See here: https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes.

This issue causes client-side warnings for anyone using a chromatic component package (e.g. mdg:buttons). I can submit a PR for this if necessary.

React.createClass is deprecated

This issue causes a development-only warning in projects using the mdg:flow-router-extensions package.
Warning: ReactClassPrototypePrototype: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

This issue is a bit tricky, because we already correctly extend the React.Component class instead of using React.createClass when making components. The only time React.createClass is called is here. It appears that this code snippet follows the discussion in this thread. This hack is necessary is to account for the subtle differences between classes created by React.createClass and the React.Component class.

There are a number of solutions that should work, including:

• Use the create-react-class package (which can be used as a drop-in replacement)
• Use the undocumented prototype property React.Component.prototype.isReactComponent

Essence.io integration

Chromatic + Essence could be a real winner. Take a look. Essence has a Bootstrap-like library of React components that could extend Chromatic to be complete UI framework.

http://getessence.io/

Conversely, Chromatic has the Meteor integration that Essence is missing.

Meteor 1.4

Does chromatic work in 1.4?
Having trouble getting anything to display at /styleguide.

ReactLayoutRenderer doesn't work with React.createClass layouts

(Such as used in galaxy-server.)

The check added in 8b85b53 thinks it's a function to call.