c8r / kit

Tools for developing, documenting, and testing React component libraries

Home Page:https://compositor.io/kit

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Combine styleguide and devkit components into a single library

jxnblk opened this issue · comments

As discussed, it might make sense for styleguide and my idea for a devkit to be combined into a single library of components for development, documentation, and demos.
Some of the components below would also be useful for building features into the apps and for other potential libraries, like an automatic style guide generator.

Some of the potential components I was thinking of include:

  • XRay
  • Library: some storybook like grid of components with detail view
  • Knobs: form for editing props
  • Fetch: render-prop based fetch for prototyping
  • Frame: iframe for actual isolation (should be zoomable)
  • Responsive: multiple iframes at different sizes
  • Matrix: TBD - shows a grid of the same component with different combinations of props
  • Example/LiveEditor*: live-editable code block
  • Docgen*: list out propTypes and description for a component (would need raw source code)
  • ColorPalette*: displays a color palette from a color object or array
  • ColorContrast: display color contrast between two colors
  • Markdown: already exists in markdown
  • Stateful: like refunk but with a render prop
  • Diff: overlays one component on top of the other and uses CSS blend modes to make a sort of visual diff

* already in styleguide

  • Graphql component

I've broken out the components left to build into their own issues to allow us to claim one when inspired.