search

carteb / carte-blanche

An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
https://www.youtube.com/watch?v=6g3-TQ6aaw8
MIT License
1.5k stars 47 forks source link

User Interface #246

Open okonet opened 8 years ago

okonet commented 8 years ago

I've been thinking about the UI lately and here are my thoughts.

Problems we are trying to solve

  1. Watch the UI in multiple different states simultaneously
  2. Play with parameters and see how UI changes (i.e. playground)
  3. See how the UI behaves with edge cases (and generate these automatically)
  4. Generate a styleguide that can be used by a team as a reference

    Mockups

    Extended navigation

expanded nav

Collapsed navigation

collapsed nav

Props/State

props

Solutions

  1. Clean navigation not only all components but also their defined states. Also, allow links to a specific state. The idea of the collapsible navigation comes from Dropbox's Paper and I think we could do something similar. 2016-06-01 at 14 25
  2. Show props/state set on the component without side-by-side with the rendered component. I think this is a big deal. Since the UI = f(props, state) it's crucial to see the props and state set to it. I've made it toggleable so you still can preview components on the full canvas. But the more I think about it, the less I think we should hide that. For the interaction part, I'm really looking at the React Dev Tools extensions. I think it solves the case with nested structures nicely. I also like that you can change everything on the fly and see how the component updates. 2016-06-01 at 14 29
  3. Having props/state aside also encourages playing around and try different combinations. Right now it is missing any controls (it's a quick sketch) but IMO playing around with parameters should not be automatically persisted. Same goes to "randomization". So I'd say, you play around with these and then you press a "save" or "duplicate" button that makes it persistent.
  4. I really like the idea of how react-styleguidist allows you to export the styleguide as a static web-site so you can just refer to it when working with a team of devs/designers. That's also what I'm trying to address with the global navigation (1).

I'd like to hear your thoughts on it. Thanks!

adrianmcli commented 8 years ago

I think this is a great direction for the future of carte blanche. I am unsure about the collapsed navigation, because those thin lines don't really provide much useful information and the un-collapsed version doesn't feel particularly intrusive either. I think I would rather have a complete collapse to hide it all rather than those lines, but that's just my personal preference.

I really like seeing the props beside the rendered component similar to the Stripe docs. I also agree that the React Dev Tools do this very well. I wonder how much of that we can incorporate.

Regardless, amazing work @okonet!