Current component conventions

Please feel free to ignore these conventions if they get in your way or you are not sure of how to follow them. These are just "best effort" suggestions

• Always write full words. Length is not a problem
• Use alphabetical order
• Make your components styles overridable
• Put the base CSS class name in a const on the top of the file, after the imports
• Keep components stateless (controlled). If possible, write components that are simply functions instead of React.createClass
• Never use ES6 classes for components. We want to discourage inheritance as much as possible
• Support a custom className override
• Spread the props that you are not capturing over the most significant inner element
• If a component has a constant set of options (such as arrow positions in the Tooltip component) those have to be exposed as a separate named export
• If you have to use a React.createClass component, you should only implement lifecycle methods in the object. Any other function should be defined outside. Using this outside the scope of lifecycle methods is an antipattern. For example, if you need a handler for onClick, you can define a handleClick function outside of the "class" with the signature handleClick( <ReactComponent> ) => ( event )

Also read Patterns and practices

Complex components

• Put the Main component as the first one in the file
• Add a fully qualified displayName to the individual components (such as Checklist.Item to the Item component in the Checklist)
• Do not namespace the individual components with camel case (name the function/class Item, not ChecklistItem) since this is redundant