node package manager

corkboard

npm [Build status](https://buildkite.c

Corkboard

npm Build status

Corkboard gives you a visual-REPL for your React app. A visual-REPL is an isolated environment where you can quickly prototype and document your components. It's analogous to (and inspired by) Devcards in Clojure.

  1. Getting started
  2. Real world examples
  3. Usage
    1. Cards
    2. Groups
    3. Docs
    4. Titles

Getting started

If you're just getting starting, it's recommended that you copy the Webpack example project. It's a convenient base for you to adapt. Otherwise, you can install corkboard with your favorite package manager:

yarn add corkboard

Real world examples

Usage

The core of Corkboard is very simple. Create cards for displaying data, and organize them into groups.

import { card } from 'corkboard';
 
card('Hello world');

Cards

Cards can take any amount of Markdown strings and React elements. Some examples of valid cards are:

import { card } from 'corkboard';
 
card('Hello _world_');
card('Hello world', <Greeter />);

Cards are the most basic way to use Corkboard. It's common to create lots of cards and to have one card per example.

Groups

Groups are a way of specifying a collection of cards.

import { card, group } from 'corkboard';
 
group('Colors');
card('Corkboard is monochromatic. Use only black and white.');
 
group('Button');
card(<Button color="black" />);

When you use group like this, any subsequent cards will be place in that group it will appear in the navigation.

You can also nest groupings more deeply by passing group a function:

import { card, group } from 'corkboard';
 
group('Basics', () => {
  group('Colors');
  card('Corkboard is monochromatic. Use only black and white.');
});
 
group('Components', () => {
  group('Button');
  card(<Button color="black" />);
});

Docs

You might find yourself writing cards that have lots of text. As our gift to you, there's a convenient helper for that in Corkboard. The doc function is similar to card except that it accepts a Markdown docstring instead of React elements.

import { group, doc } from 'corkboard';
 
group('Button');
 
doc`
# Buttons
 
Buttons are useful because they lets users trigger actions in your system.
They want something to happen so they click a button.
 
    // it defaults to syntax highlighting javascript
    <Button color="black" />
 
`

Titles

As you can see from the previous example, it's a common pattern to create a group, then to have a card with some sort of <h1> to display that group. Well, Corkboard comes with a handy function to combine both of those: title.

import { title, doc } from 'corkboard';
 
title('Button');
 
doc`
Buttons are useful because...
`

This does basically the same thing as the previous example but is just a little bit more 👩‍🎨.