c8r / kit Goto Github PK

This will allow being able to override a single component.

Currently this works, however the preview is understandably a bit broken. I'm wondering if perhaps we offer an optional Preview component?:

import {
  Provider,
  Library,
  Example,
  Preview,
  Knobs
} from '@compositor/kit'

import Doc from '../docs/components/Button.md'
import { Button } from './ui'

export default () =>
  <Provider>
    <Library>
      <Library.Nav />
      <Example name='Button'>
        <Preview>
          <Button>Button</Button>
        </Preview>

        <Doc />

        <Knobs>
          <Button size='normal'>Hello</Button>
          <Knobs.Input name='children' />
          <Knobs.Select name='size'>
            <option></option>
            <option>small</option>
            <option>normal</option>
            <option>large</option>
          </Knobs.Select>
        </Knobs>
      </Example>
    </Library>
   </Provider>

In this example, only Preview is rendered in the library view, and the remainder is rendered in the component view.

Option to output a cut and paste-able version with html + atomic css based on the theme.

#60

For more in-depth discussion around #73 and subsequent CLI PRs:

Features

• scaffolding (with template support for libraries/tests/components/theme)
• dev server
• static building
• publishing
• design system linting
• snapshot/render diffing
• image publishing
• svg publishing

Arch

The heavy lifting of the CLI should live in logical, separate packages in the packages dir. This will allow for the libraries to be used for other usecases and app contexts. The cli dir in root will server more as the UI for the CLI itself.

#60

• webfont
• restart
• dynamic markdown/mdx implementation

#60

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

#60

This will allow you to render a component on mobile/tablet/desktop (scaled).

#60

This will display html/css code rather than the jsx