react-cosmos/react-cosmos

Sandbox for developing and testing UI components in isolation

React Cosmos

Getting Started

Choose one of the Getting Started guides to dive into React Cosmos.

Check out the Next.js integration to get started with React Server Components.

Visit reactcosmos.org/docs to view the full documentation.

Community

To chat with other community members you can join the React Cosmos Discord.

You can also ask questions, voice ideas, and share your projects on GitHub Discussions.

Our Code of Conduct applies to all React Cosmos community channels.

Contributing

Please see our CONTRIBUTING.md.

Become a Sponsor to support the ongoing development of React Cosmos.

Live Demo

Visit reactcosmos.org/demo/ for a live demo of React Cosmos.

react-cosmos's Issues

No longer exclude ref from props

This is no longer needed in React 0.12.x.

Ideas for types of content with drilldown

• Maps
  • SVG country/city maps
  • Specific user case of maps with screenshots from every step (globe, country, city, street)
• A text where you can click on any word and get a description (you'd need to be able to only scape a specific part to match the text..
• List of mentions, where you can click on mentions, users, etc.
• Photo gallery
• Articles expanding to bottom while zooming (would need support for custom transitions)
• Foodchain
• Raw materials -> finished materials finite
• Period table
• Body anatomy
• Imdb movies and actors

Update docs with registerComponentLookup method

Remove state caused by registerComponentLookup

Please make gitter.im for your project - it is fun!

Have you considered to use smart-css instead of CSS/LESS files?

In this way you have 100% encapsuled components (CSS+HTML+JS in a single JS file). Take a look at this lib here: https://github.com/hackhat/smart-css

Improve demo

Unmounting component in the middle of a data fetch throws

Need

As a user
I want to leave a page
So that I can go elsewhere.

Deliverables

Given I have a component
And it has a pending data fetch request
When I am unmounted
Then the request will be canceled
And no error is thrown.

Solution

Aborting an AJAX request will cause the error callback to be fired. In that callback we set the isFetchingData state key to false. You can't call setState in an unmounting cycle.

Therefore, we need to check that the component is still mounted in the error callback before setting state.

TODO

• tests
  • unmounting a component with a pending request doesn't throw
• implementation
  • use this.isMounted() in the error callback.

/cc @skidding

?component=Person&id=16448 throws error

Uncaught TypeError: Cannot read property 'split' of null

Enable playground to bundle style files as well

Document how to start ComponentPlayground

Hanging on `sass-loader`

I'm trying to overload the loaders as follows:

module.exports.webpack = function (webpackConfig) {
  webpackConfig.module.loaders = [
    {
      test   : /\.scss$/,
      loader : 'style!css?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
    },
    {
      test    : /\.jsx?$/,
      loaders : [ 'react-hot', 'babel?stage=0&optional=runtime' ],
      exclude : /node_modules/
    },
    {
      test   : /\.jpe?g$|\.gif$|\.png$|\.svg$|\.eot$|\.woff$|\.woff2$|\.ttf$/,
      loader : 'file'
    },
    { test: /\.css$/,  loader: 'style-loader!css-loader' },
    { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }
  ];

  webpackConfig.postcss = [
    require('autoprefixer-core')
  ];

  return webpackConfig;
};

When I comment out the scss loader part, it compiles, but will complain about import styles from './stuff.scss'; statements or rather the contents of the file needing their own loader.

I tried setting the resolveLoader.root to my own node_modules folder, tried installing the loaders inside node_modules/cosmos-js, but nothing worked, it's hanging in an infinite loop somehow.

Edit

Reducing this further to:

module.exports.webpack = function (webpackConfig) {
  webpackConfig.module.loaders.push({
    test   : /\.scss$/,
    loader : 'style!css!sass'
  });

  return webpackConfig;
};

Implement a refresh method in the DataFetch mixin

Need

As a developer
I need a way to re-fetch data from the server
So that I can get any updated data.

Deliverables

The DataFetch mixin will expose a public refresh method.

Solution

Rename the resetData method to refreshData.

TODO

• tests
  • calling the refresh method will re-fetch data
• implementation
  • rename the method
  • default the props argument to this.props
  • move the check for dataUrl being the same into the componentWillReceiveProps method
  • do not store dataUrl on the instance
  • update calls to it

@skidding

Playground integration with react-hot-loader

Create mixin for other HTTP requests than GET

Need

In most clients you need more than reading data from API
You need to have helpers for sending data back to the server.

Deliverables

Helper for

• POST request
• PUT request
• PATCH request
• DELETE request

Solution

Name: DataSend

XHR methods:

• _postData(url, options, callback)
• _putData(url, options, callback)
• _patchData(url, options, callback)
• _deleteData(url, options, callback)
• _sendDataToServer(method, options, callback)

Note: all methods are private because it wouldn't make sense for a component to trigger a request on a different component

options param:

• data – payload
• headers – HTTP headers (optional)
• method – HTTP method (specific method will set this implicitly)

Enable source maps by default

This is as easy as setting devtool: 'eval' in webpack config. I'm not sure if its possible to hide cosmos internals from being shown in the dev tools, for this I have asked a question on stackoverflow.

Add jQuery as a dependency

Need

I want Cosmos to not use globals because globals are bad, mkay?

Deliverable

The Cosmos module can be plugged in anywhere.

Solution

Install jQuery as a dependency and add it to the list of dependencies to the Cosmos module.

TODO

• npm install --dev jquery
• add it as a dependency here

Introduce a way to compose components

To test some components, e.g. grid, it is necessary to be able to test their composition,
the code below worked for me for the 1st time, but not after I kicked in the editor.

I understand that there is a limitation in the current implementation, but are there any plans or ideas of supporting this?

// fixtures/row/row/default.js
var React = require('react');
var Cell = require('../../../components/row/cell.jsx');

module.exports = {
    children: [
        React.createElement(Cell, {
            children: 'Col 1 Text',
            key: 'col1'
        }),
        React.createElement(Cell, {
            children: 'Col 2 Text',
            key: 'col2'
        }),
        React.createElement(Cell, {
            children: 'Col 3 Text',
            key: 'col3'
        })
    ]
};

Support arbitrary component folder structure

When project start to grow it became difficult to keep components in one folder, now to use cosmos I have to keep structure flat which is frustrating.

Allow customization of webpack config when building ComponentPlayground

Document .children in PersistState mixin

Move Router to separate repo

Moved to: https://github.com/skidding/react-minimal-router

• No more mixin
• Test routeLink inside Router
• No Cosmos/componentLookup dependencies in Router

Investigate if trakt.tv or Rotten Tomatoes API is better than themoviedb [experiment]

• Must have JSONP support
• See if you can fetch all Movie/Person data in one request
• See how good "also see.." movies are
• See how good "know for" movies for person are
• Check out and acknowledge rate limits
• Compare response times (do N requests every rate limit + small rand for a minute or two and compare averages)

Move initialData in getInitialState

Remaning initialData reference in https://github.com/skidding/cosmos/blob/d3543c5f94a86c1a8c14a0619524d6fe2a124b70/components/list.jsx#L14

It was already removed in #57

Publish npm package

• Ignore demo
• See if https://www.npmjs.org/package/cosmos can be unregistered
• Maybe Bower as well

Is it possible to have a config option for components say in a src directory along with the fixtures

The component playground will not find the components and fixtures if they are not at the root of the project

Add search to ComponentPlayground

Relay-ification

With Relay and the brave new world of colocated component query fragments, I was thinking Cosmos could get an interesting Relay extension.

Basically, for many/most Relay-ified components, a Cosmo fixture wouldn't be necessary. Instead you could wire it directly to your GraphQL endpoint and use live production data.

What would be fun/useful is if by default, Cosmo would load a random entity to populate the component. This would be a real-world stress test for components you're developing/tweaking.

Even cooler is if there was a button that would trigger a new fetch of a random entity. With that you could quickly toggle through live production data and see how your component responds to each. I'd want a list of each component that you'd loaded to maintained so you could quickly toggle back to previous entries as say you found errors in several of them and are cycling through the entities with errors fixing problems.

A stretch goal would be to add an autocomplete field to search (in some flexibly defined way) for entities to view. E.g. when developing a user profile widget, search for specific users by name.

Thoughts?

Configure port and host of the server

I need to dockerize cosmos, but I can't, because it only listens on localhost, not '0.0.0.0'.
What would be a preferred way to set port and host of the server? I am willing to work on this feature.

Improve documentation

• Trim down long readme
• Remove deprecated Cosmos() from documentation
• Document loadChild
• Highlight features and specs before story

props are undefined

I'm trying cosmos and I'm having the following problem:

Uncaught TypeError: Cannot read property '...' of undefined

Where "..." is always one of the props of the components I'm trying to render (I've tried a couple).

Some info:

1. I'm using components with the es6 syntax.
2. cosmos-js: ^0.6.6

✗ node -v
v0.10.36

✗ npm ls react
[email protected] /Users/jm/p/ui-components
└── [email protected]

Components are constantly re-rendered

If you clone cosmos-example and add a console.log in the render method of SimpleButton.jsx you will notice that every component is constantly re-rendered:

Is there any way to prevent that?

Update React to 0.11.0

Remove deep cloning of props

Not responsibility of Cosmos, can be done outside if needed

Data is reset when receiving the same dataURL

Need

As a developer
I want to change props other than <dataUrl> on my component
And not fire new requests
And leave my data untouched
So that my component doesn't go through a 'loading' cycle.

Deliverables

Given I have a component
And it has the <dataUrl> prop set to <foo.com>
And I render the component
And it fetches data from <foo.com>
When I call <setProps> on the component
And pass it <dataUrl> to be <foo.com>
Then no requests are made to <foo.com>
And <state.data> is untouched.

Solution

Remove the concept of initialData.

TODO

• remove getInitialData
• remove resetting data
• remove this test
• remove this test
• use getInitialState here
• use getInitialState here
• add a test for checking that no requests are made when receiving the same dataUrl
• add a test for checking that state.data is left untouched when receiving the same dataUrl

@skidding

Update state of current Component in history after it renders first time

Remove List component from repository

It's of no real use, and reusable components are outside the scope of the Cosmos project.

[Canceled] Move componentLookup outside props

It can be attached on the instance instead and the PersistState can send it to children in the loadChild method. Cosmos functions are already aware of the componentLookup, so keeping it in props only makes them messier and not really serializable.

Edit: Can't attach on instance because before React.render returns the instance the children already try to render. Just doing some routine changes in this issue

PerserveScroll mixin

This is useful even when no transition is involved and relies solely on Component state

Uncaught Error: Invariant Violation: addComponentAsRefTo(...)

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

Just testing a simple component taken from the cosmos-example and I pulled out flux and the store leaving just the simple button.

editor droppings trigger cosmos

cosmos tries to load foo.jsx~ (note tilde) and then reports on it containing something with a file extension it cannot interpret. That's not a surprise as it's an Emacs editor dropping.

I'd be nice if Cosmos only tried to auto-load files that are valid extensions (.js, .jsx) in fixtures, and just ignored the other ones. Or alternatively if I had a way to configure it to ignore particular file patterns entirely, i.e. *~.

Note that emacs creates a tilde file as soon as you start typing, and it was kind of surprising to see cosmos jump into action even though I hadn't saved yet. For a moment I was "how does it even know? is hot loader that magical?" until I realized what was going on. :)

a range of errors

I am having trouble getting cosmos to run reliably. Perhaps some of the dependencies have been updated and that causes trouble? Or perhaps I'm doing something wrong, in which case we can investigate what in Cosmos or its documentation can be improved to avoid this in the future.

First a usability issue. Initially I forgot to export the React component under test as the default of the module. I got some error about type.toUpperCase not being a function. It'd be nicer if this failure case was detected and the error can be more informative, i.e. failed to find component in module, or whatever.

When actually running the system, I am getting a few more errors. After initial load I get one of these:

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 try to edit the fixture data in the browser window, I get a ton of these, I think one for every key press:

Uncaught Error: Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. This usually means that you're trying to remove 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.

probably due to the error the component doesn't update either.

When I edit the .jsx file with the component in it, I get the following message:

It appears that React Hot Loader isn't configured correctly. If you're using NPM, make sure your dependencies don't drag duplicate React distributions into their node_modules and that require("react") corresponds to the React instance you render your app with. If you're using a precompiled version of React, see https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react for integration instructions.

and the component UI does not update properly either. Only a full browser reload will reflect my edit.

Batched fetching

If I nest a Person inside of a Movie, there are going to be 2 serial fetches (which discourages composition due to the perf hit).

Instead, if getDataUrl() were a static function of the route (rather than an instance method of the props) it could be called recursively before the components are rendered so you can fetch all of the data you need to.

Change ClassName mixin to promote single classes

Need

We need to default to a single class
And right now passing a class to a component appends it
And composing classes is against our principles

Deliverables

• Passing a class to a component replaces default one
• Prop should be named className instead of class
• No need for any class properties for the default class. It's more semantic to be called inside the render function

Add option to no longer fetch data if state is cached in PopState event

DataFetch.refreshState: false

Enable hot reloading in ComponentPlayground

Add Contributing section in README

Also add Jump to links to the top

DataFetch events

Need

As a developer
I want to know when data has started being fetched
And I want to know when data has finished being fetched
So that I can react to these events.

Deliverables

Given I have a component
And it includes the DataFetch mixin
When data hasn't started yet to be fetched
Then <state.fetchingData> will be <false>.

Given I have a component
And it includes the DataFetch mixin
When data starts being fetched
Then <state.fetchingData> will be <true>.

Given I have a component
And it includes the DataFetch mixin
When data finished being fetched
Then <state.fetchingData> will be <false>.

Solution

Toggle an attribute on state whenever we start fetching data and whenever the request finishes.

TODO

• tests
  • at the start of a data fetch state.fetchingData is true
  • at the end of a data fetch state.fetchingData is false
• implementation
  • toggle the state var before sending the request here
  • toggle the state var after receiving data here
  • toggle the state var if the request errors here

Multiple components exported

I'm not sure if I'm suppose to ask this here but..

How do write fixtures for modules that export multiple components?

cosmos-js depends on react which could conflict with your node_modules/react

The old solutions was peerDependency, but it seems a new install suggestion for react, react-hot-loader, etc