Skip to content
Tools for developing, documenting, and testing React component libraries
Branch: master
Clone or download
Latest commit bd1e9d9 Aug 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cli
core Update snapshots Aug 3, 2018
create-kit
dev
docs Add docs for Library component Jun 19, 2018
md-loader
md v1.0.34 May 26, 2018
site
snapshot Update jest configs Aug 3, 2018
storybook v1.0.24 May 22, 2018
templates
webfont
.editorconfig Hello, world Nov 23, 2017
.gitignore
.npmrc Hello, world Nov 23, 2017
.travis.yml Merge pull request #201 from DanielRuf/chore/test-nodejs-8-10 Jun 25, 2018
README.md Edit cli docs Jun 6, 2018
lerna.json
license Don't forget licenses Apr 17, 2018
package.json Run prettier on all the things May 22, 2018

README.md

Compositor Kit

Tools for developing, documenting, and testing React component libraries

  • Zero-config development server
  • Component library mode
  • Utility components for demos and development
  • Reuse component examples for development, documentation, and testing
  • Read more about Kit on our blog

Getting Started

Install the Kit CLI to get started with isolated component development.

npm i -g @compositor/kit-cli

Create an examples folder for your components. This folder can be used for development, documentation, and testing purposes.

An example file should export a single default component for rendering.

// Button.js example
import React from 'react'
import { Button } from '../src'

export default props =>
  <Button>Button</Button>

Be sure to install any local dependencies, including react, and start the development server.

kit examples

The index will show a list of links to each example. Each example will have its own route where it can be viewed in isolation.

Library Mode

To view all examples in library mode with persistent navigation, use the --mode flag.

kit examples --mode library

Utility Components

If you already have an existing development setup, or want to enhance your examples, use the Kit components directly in any React setup.

npm i @compositor/kit

Library

Use the Library, Example, and Detail components to create a custom component library view.

import React from 'react'
import { Library, Example } from '@compositor/kit'
import { Button } from '../src'

export default props =>
  <Library>
    <Example name='Button'>
      <Button>Button</Button>
    </Example>
  </Library>

XRay

Use the XRay component to outline HTML elements and display a grid to help ensure your UI is visually aligned.

import React from 'react'
import { XRay } from '@compositor/kit'
import { Button } from '../src'

export default props =>
  <XRay>
    <Button>Button</Button>
  </XRay>

Cartesian

Use the Cartesian component to render the cartesian product of props.

import React from 'react'
import { Cartesian } from '@compositor/kit'
import Button from '../src/Button'

export default props => (
  <Cartesian
    component={Button}
    m={4}
    fontSize={[1, 2, 3]}
    bg={['blue', 'pink', 'tomato', 'purple']}
    children={['Hello, world!', 'Beep']}
  />
)

Responsive

Use the Responsive component to render components in multiple iframes at different viewport sizes.

import React from 'react'
import { Responsive } from '@compositor/kit'
import PageHeader from '../src/PageHeader'

const example = (
  <Responsive>
    <PageHeader />
  </Responsive>
)

Other Components

See the Kit components package for more components.

Kit Init

Use the kit init command to create a new project based on a growing set of templates.

Utilities

  • kit-snapshot: run Jest snapshot tests for example components

Related

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Made by Compositor | MIT License

You can’t perform that action at this time.