ovidiuch / react-component-playground

Minimal frame for loading and testing React components in isolation.

Deprecated

This package has been merged into the React Cosmos monorepo.

React Component Playground

Minimal frame for loading and testing React components in isolation.

Working with ComponentPlayground improves the component design because it surfaces any implicit dependencies. It also forces you to define sane inputs for every component, making them more predictable and easier to debug down the road.

React compatibility:

• [email protected] with [email protected] and below
• [email protected] with [email protected] and above

Features include:

• Rendering full-screen components or with the navigation pane on the side.
• Injecting predefined state into components via ComponentTree
• Real-time editing of props and state with instant feedback

Before diving deeper, you need to understand what a component fixture looks like. It's the same thing as a snapshot in the ComponentTree utility. Read more on the project README.

components is by far the most important of the ComponentPlayground props. This is an example:

{
  ComponentOne: {
    class: require('./components/ComponentOne.jsx'),
    fixtures: {
      normal: {
        fooProp: 'bar'
      },
      paused: {
        fooProp: 'bar',
        state: {
          paused: true
        }
      }
    }
  },
  ComponentTwo: {
    class: require('./components/ComponentTwo.jsx'),
    fixtures: {
      //...
    }
  }
};

react-component-playground's Issues

Install Cosmos for development (Component Playground inception)

We already have fixtures. Building a tool using itself fun!

Can't compile a local working bundle

I cloned the repo and I tried to npm run build but the bundle produced doesn't seem to work when linked to cosmos. I locked the versions of all packages in package.json to ensure I use the same vendor code, but it still throws

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

when I run cosmos in browser. When used with the bundle from npm everything works fine. Any ideas?

Handle bad components

Sometimes, you have a bad component which will throw an exception at render.

It seems like that once they throw, you cannot remount any component after it due to the unmountComponent which will itself throw for internalInstance._currentElement (undefined on internalInstance).

I don't really know how we could implement this, maybe by wrapping the render method like react-transform-catch-errors does it.

(I wonder if this should be there or in the Cosmos suite, I believe that it's kind of low-level so it should be for react-component-playground, right?).

Documentation based on propTypes

It would be nice to display auto-generated component API documentation based on the propTypes and optional comments. I have a partial implementation of this using https://github.com/reactjs/react-docgen and their markdown example. I can prepare a pull request if you think this is a good idea.

Upgrade to React 0.14

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

ReactComponentTree is ready: ovidiuch/react-component-tree#15

Split into smaller components

Add lodash to peerDependencies

It's already a webpack external.

Scroll to selected fixture

React 15 compatibility?

Hi there,

Is there a React 15.x compatibility planned for this package?
Could I lend a help?

contextTypes

How to define contextTypes? Have a problem with fluxible-router NavLink component:

warning.js:45Warning: Failed Context Types: Required context `executeAction` was not specified in `NavLink`. Check the render method of `TagPlate`.

Document component API

Poor performance in fullscreen mode

Need

Performance.

Solution

Disable the fixture editor in fullscreen mode.

Too generic class names cause potential conflicts

Continuing on the idea of injecting external styles into cosmos (react-cosmos/react-cosmos#142), I stumbled across a problem with styling of the playground component with Bootstrap injected. It is of course more an issue with Bootstrap global CSS than anything. However, a pragmatic thing to do would be to use something like BEM to ensure that styling of playground is not affected. What do you think? If you're fine with that I can prepare a pull request.

Enable hot reloading

Displaying Flux actions

If your components are strictly props-based and change their state by emitting Flux actions, the usefulness of the playground is somewhat limited.

What if it was possible to display actions (name and payload) emitted by the component in real time?

There are many implementations of Flux, so it would be required to provide a hook to somehow proxy from specific implementation to a common format used for displaying the actions.

What do you think?

Convert component to ES6 class

Filter fixture list

Need

As a developer
I want to be able to filter my fixtures
So that I can get the one that I need with ease

Deliverables

• get all the fixtures that includes the search input value
  - will show the components even if the results are empty (improvement for the future: hide the component which doesn't have fixtures after filtering the whole list) hide component that doesn't have fixtures
• always show the selected fixture even if the search results doesn't include it