Energize

React components (plus some styles) for Materialize CSS

Style Guide

JavaScript

• Use ES6 features wherever possible, but avoid anything that requires es6-shim (Map, Set)
• No jQuery or other large external dependencies
• No direct DOM manipulation

Component State

UI components should strive to be as stateless as possible. However, there cases where this is not possible or desirable.

Any time we provide a stateful component, we should allow it to operate in "controlled" and "uncontrolled" mode, similar to how React handles form inputs.

We should always allow the user to provide one or more onChange (or similar) handlers as props. The component may perform any internal state bookkeeping whether or not change handlers are provided. If a change handler is provided, we should pass back any relevant events unchanged, along with any relevant data. If no change handlers are provided, we should preventDefault on any triggered events.

If a value prop (or whatever is appropriate for the component) is provided, then the component should defer to the given value instead of using its internal state. When a value prop is not provided, the component should track state internally.

Sass

• Align property values on adjacent lines
• Use scss-lint
• Avoid changing Materialize styles wherever possible in order to maintain forward-compatibility

Class names

import cx from 'classnames';

const SpecialDiv = React.createClass({
  render() {
    // any classes we want to apply should come last so they override anything
    // set in this.props.className
    let classes = cx(this.props.className, 'top-nav');

    return (
      <div className={classes}>
        {this.props.children}
      </div>
    );
  }
});