Install and run

npm run dev:pattern-lib

Navigate to http://localhost:3001/

test

npm run test:pattern-lib
npm run test:pattern-lib:watch # runs tests in watch mode

Runs the unit and component tests in /pattern-lib/test/ with mocha-webpack and enzyme.

npm run test:pattern-lib:coverage

Runs the unit tests with coverage mode using instanbul/nyc, ouputs a text-summary on the CLI and html report in /pattern-lib/coverage/lcov-report/index.html.

Structure

Place components in /pattern-lib/src/app/components/...type.../..folder.../ComponentName/index.js.

The ...type... is part of the atomic design type (atom, molecule, organism)

The ...folder... part divides the components in structured sections (UI, layout, form, etc).

The component folder name is Capitalized, since the index.js inside that folder exports a class.

Files:

• index.js // The main component file

  Example Button/index.js:

  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import './button.scss';
  
  /**
   * This is a button component
   */
  export default class Button extends Component {
    render() {
      return (
        <button className={`component-button size-${this.props.size}`}>
          {this.props.children}
        </button>
      );
    }
  }
  
  Button.propTypes = {
    /** Size of the buttons */
    size: PropTypes.oneOf(['large', 'medium', 'small']),
    children: PropTypes.node,
  };
  
  Button.defaultProps = {
    size: 'medium',
  };
  

• {component-name}.scss // The component styles

  Example Button/button.scss:

  .component-button {
    background: #282828;
    color: #fff;
  
    &.size-small {
      font-size: 12px;
    }
    &.size-medium {
      font-size: 20px;
    }
    &.size-large {
      font-size: 30px;
    }
  }
  

• presets.js // example usages of the component (using different property values)

  Example Button/presets.js:

  import React from 'react';
  import Button from './index';
  
  export default [
    {
      name: 'Medium test',
      preset: <Button size="medium">test</Button>,
      usage: '<Button size="medium">test</Button>',
    },
    {
      name: 'Small foobar',
      preset: <Button size="small">foobar</Button>,
      usage: '<Button size="small">foobar</Button>',
    },
  ];