style-guide

Button.jsx

import classNames from 'classnames';
import getValidProps from '../lib/utils';

class Button extends React.Component {
  render () {
    var classes = classNames('Button', {
      'Button--large': this.props.size === 'large',
      'Button--small': this.props.size === 'small',
      'Button--primary':this.props.primary,
      'Button--hollow': this.props.hollow
    });
    return (
      <button className={classes}
              {...getValidProps(this.props)}>
        {this.props.children}
      </button>
    )
  }
}

export default Button;

Card.jsx

import getValidProps from '../lib/utils';

class Card extends React.Component {
  render () {
    return (
      <div className="Card"
           {...getValidProps(this.props)}>
        {this.props.children}
      </div>
    )
  }
}

export default Card;

myApp.jsx

import {Card, Button} from 'buffer-style-guide';

class MyApp extends React.Component {
  
  handleClickJoin (e) {
    alert('Welcome!');
  }
  
  handleClickClose (e) {
    window.close();
  }
  
  render () {
    return (
      <div className="my-app">
        <h1>This is my app</h1>
        <Card>
          <p>Would you like to join?</p>
          <Button onClick={this.handleClickJoin}
                  primary={true}>
            Yes! I really want to join
          </Button>
          <Button onClick={this.handleClickClose}>
            No :(
          </Button>
        </Card>
      </div>
    )
  }
}

export default MyApp;

utils.js

const VALID_PROPS = [
  'style',
  'onClick',
  'onHover',
  'onSelect',
  'onHover',
  'onChange'
  // etc...
];

export function getValidProps(originalProps) {
  return VALID_PROPS.reduce(function(props, validPropName) {
    if (validPropName in originalProps)
      props[validPropName] = originalProps[validPropName];
    return props;
  }, {});
};