style-guide.md

Styleguide

Only use functional React components. Structure them like this:

interface Props {
    ...
}
function name(props: Props) {
    return (...)
}

Separate functionality and presentation into different components. Example:

• control-strip.tsx (functional)
• visual-strip.tsx (presentational)
• visual-draft-strip.tsx (presentational)
• visual-published-strip.tsx (presentational)
• visual-button.tsx (presentational)

Use the validators and hints instead of, Example:

const regexIsValid = validators.regex;
const hintIsValid = validators.hint;

... instead of ...

const regexIsValid = (regex: string) => regex.length <= 250;
const hintIsValid = (hint: string) => hint.length <= 120;

By that all validators and hints are in one place and uniform.

Use higher order dispatchers in the redux-connector. Example

const mapStateToProps = (state: stateTypes.ReduxState) => ({
    ...
});
const mapDispatchToProps = (dispatch: any) => ({
    openMessage: dispatchers.openMessage(dispatch),
    closeAllMessages: dispatchers.closeAllMessages(dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Component);

This is the cleanest variant I've found so far.

Sort imports by (not that important):

1. libraries
2. utilities/constants
3. assets
4. standard components
5. relative components