devcard-inspired devsheet sketch

devsheet.js

import React from 'react';
import Markdown from 'react-markdown';

const containerStyles = {
  display: 'flex',
  flexDirection: 'column'
}
const propSetStyles = {
  padding: '3em 0',
  margin: 'auto'
}

function devSheet(Component, propSets) {
  return class DevSheet extends React.Component {
    render() {
      return (
        <div style={containerStyles}  >
        {
          propSets.map(({description = '', props}) => (
            <div key={JSON.stringify(props)} style={propSetStyles}>
              <Markdown source={description} />
              <Component {...props} />
            </div>
          ))
        }
        </div>
      )
    }
  }
}


export default devSheet;

modal.js

import React, { Component } from 'react';
import styles from './modal.scss';
import classnames from 'classnames';

class Modal extends Component {
  render() {
    const {dialog, modalType, title, modalActions = []} = this.props;
    const containerStyles = classnames(
      styles.container,
      styles[modalType]
    );

    return (
      <div className={styles.container}>
        <h1 className={styles.title}>{title}</h1>
        <div className={styles.dialog}>
          {dialog}
        </div>
        <div className={styles.actions}>
          {
            modalActions.map(({text, action, type}) =>
              <button key={text} className={classnames(styles.actionButton,
                styles[`${type}Button`])} onClick={action}>
                {text}
              </button>
            )
          }
        </div>
      </div>
    );
  }
}

export default Modal;

setup.js

import devSheet from './devsheet';
import Modal from './components/modal/modal.js';
import loremIpsum from 'lorem-ipsum';

const makeWords = (count) => loremIpsum({count, units: 'words'});
const noop = () => {};

const propSet = [
  {
    description:
`
  # Empty props
`,
    props: {}
  },
  {
    description:
`
  # A notice
  A notice style of modal.
`,
    props: {
      title: makeWords(5),
      dialog: makeWords(30),
      modalType: 'notice',
      modalActions: [
        {
          text: makeWords(1),
          action: noop,
          type: 'confirm'
        },
        {
          text: makeWords(1),
          action: noop,
          type: 'cancel'
        }
      ]
    }
  },
  {
    description:
`
  # An error
  An error style of modal.
`,
    props: {
      title: makeWords(5),
      dialog: makeWords(30),
      modalType: 'error',
      modalActions: [
        {
          text: makeWords(1),
          action: noop,
          type: 'notice'
        }
      ]
    }
  }
];

export default devSheet(Modal, propSet)

Very much a direct product of devcards.

Sketch of the wiring it'd take to get multiple instances of a component rendered based on the different sets of props, to insight into different possible configurations in parallel (heavily facilitated by react-transform). This method seems to pair nicely with scoped styles, where a UI component can be tested in a vacuum, relying only on incoming props to dictate the array of visual states.