Relay-ification

[react-cosmos]

Relay-ification

[dzannotti]

+1

[KyleAMathews]

Another idea. Be able to star and label particular objects that you could come back to e.g. an entity that's prone to bugginess. These could show up where fixtures are now. Store this information in a dot directory in the user's home directory.

[KyleAMathews]

Oooooo... and what if could create a grid wall of component instances. Say assign each component to a 100x200 space and each one pulling in a random entity. Or test a component's responsive design by doing some sort of masonary-style layout where components are assigned random heights and widths (well... random within defined constraints). On a large screen you could have dozens or even hundreds of instances of a component loaded that you're hot-reload editing code and styles. That'd be pretty epic. Something with sliders like I'm doing on my demo here: http://kyleamathews.github.io/react-component-gallery/

This would make it really really easy to test components against tons of scenarios all at once. The brain is really good at picking out breaks in patterns so you could fine-tune components by loading one in this and then scanning for problems.

[ovidiuch]

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

I like the Relay extension. Note that an advantage of the component playground is the offline/isolated dev env. Still, having both offline fixtures and the option to hook up to Relay endpoints would be double useful.

That being said, the easiest way to add this extension at the moment would be in the lib that generates the function tree for ComponentPlayground. There's already a PR to automatically generate an empty fixture if no fixtures are found for a component. So the trend to make previously defined fixtures optional is already emerging!

Then there's the user config that we could extend for broader use.

Another idea. Be able to star and label particular objects that you could come back to e.g. an entity that's prone to bugginess. These could show up where fixtures are now. Store this information in a dot directory in the user's home directory...

I like the concept of fixtures as "bookmarks" as well. But this could be a later stage, right now it's pretty easy to fire up the editor, copy the current props+state and create a fixture file out of it.

Oooooo... and what if could create a grid wall of component instances. Say assign each component to a 100x200 space and each one pulling in a random entity...

As for the grid, I can +1 that it's a real need. Especially for designer-types and CSS development. Not sure about the resizing, since you could do that via browser resize or dev tools viewport emulation, but viewing more states of the same component at the same time is gold.

I see this as a different component alongside ComponentPlayground, (e.g. ComponentGrid). Then Cosmos could just integrate it and have more bin commands like node_modules/.bin/component-playground. The goal of the Cosmos project is to make UI development easier through component design and encapsulation. Sky is the limit :)

Good stuff!

[KyleAMathews]

Not sure about the resizing, since you could do that via browser resize or dev tools viewport emulation

Agreed actually. Most components are responsive based on page width. I was thinking the slider as I have some that keep track of their own width using https://github.com/KyleAMathews/react-component-width-mixin so would render differently if they were full-width for example or if there were two or three in a row. This is easy to setup though so no need to build it into Cosmos.

[KyleAMathews]

And glad you like the proposal :) I'm at least several weeks (more likely a month+) from needing this so don't expect a PR from me anytime soon. If anyone wants to pick this idea up and run with it in the meantime, I'd be happy to help out in a limited fashion.

[ovidiuch]

I'd love it if @KyleAMathews or somebody else revived this thread, but it's 2y old so I'm closing it for now.