search

react-cosmos / rfcs

Change requests for React Cosmos
MIT License
1 stars 2 forks source link

Minimum display of a component: required props #21

Open EdmundsEcho opened 3 years ago

EdmundsEcho commented 3 years ago

When I don't first remember how to instantiate a component, I have to look up the component to find the PropTypes property. The cosmos display just shows a blank screen.

Is there a way to display what the prop-types are/require? This would improve the workflow, and allow for more aggressive fixture making - the minute something goes wrong, instead of having to look at the console (sloooowww), I can just verify the work against the what is already presented by cosmos.

ovidiuch commented 3 years ago

This would be nice to have, indeed. This is something we've considered since as long as 2016 I believe. I think in time people migrated to using TypeScript or Flow for static typing instead of PropTypes (runtime validation) so interest slowly declined.

EdmundsEcho commented 3 years ago

Got it. Where would I look in the code base to assess feasibility? Low priority but if low hanging fruit I’d be happy to contribute.

ovidiuch commented 3 years ago

Got it. Where would I look in the code base to assess feasibility? Low priority but if low hanging fruit I’d be happy to contribute.

I think the main part is figuring out how to extract the prop types from your component, which is decoupled from Cosmos. I think there are some existing projects for this but I can't recall what they are. I'd say find a solution that you're happy with for extracting the prop types into a simple data format first (like a JSON description that can be turned into a table view).

On the Cosmos side, the Playground UI is composed of many plugins. One example is the Props panel. The way plugin slots are composed is not documented, but I think that can be overlooked for now as 99% of the code is just React components composing each other.

If you're interested I would be up for a brief live conversation to hash out a potential plan and share more info about 1) what you're envision and 2) how to approach it. You can find me on Slack.