CONTRIBUTING.md

Contributing

Commit emojis

• 🐣 — initial commit
• ✨ — new version
• ♻️ — update dependencies
• ✔️ — bug fixed
• 🙈 — stupid bug fixed
• ➕ — new feature
• ➖ — remove feature/file/etc.
• 🔧 — refactoring
• 💄 — cosmetic refactoring
• 👾 — tests
• 📝 — README/docs update

Style Guide

Method order in component classes

1. specification

• displayName

// es6
static get displayName() {
    return 'Component';
}

// old syntax
displayName: 'Component'

• mixins

// es6 (yummies mixins only)
static get mixins() {
    return [ MixinValidate ];
}

// old syntax (traditional mixins only)
mixins: [ DragDropMixin ],

• propTypes

// es6
static get propTypes() {
    return {
       onChange: PropTypes.func.isRequired,
       ...
   };
}

// old syntax
propTypes: {
   onChange: PropTypes.func.isRequired,
   ...
}

2. init

• defaultProps static getter (getDefaultProps method for old syntax)

// es6
static get defaultProps() {
    return {
        initialCount: 0
    };
}

// old syntax
getDefaultProps() {
    return {
        initialCount: 0
    };
}

• getInitialState (old syntax)

// old syntax
getInitialState() {
    return {
        count: 0
    };
}

• constructor with initial state

// es6
constructor(props) {
    super(props);

    // initial state
    this.state = {
        count: 0
    };
}

3. static

• static methods including static getter methods (statics object for old syntax)

// es6
static get configuration() {
    return {
        ...
    };
}

// old syntax
statics: {
    configureDragDrop(registerType) {
        ...
    }
    ...
}

4. lifecycle

React lifecycle methods in the order they're being invoked

• componentWillMount
• componentDidMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount

5. internal

Internal methods (prefixed with underscore _)

_onNewTab() {
    ...
}

_onDeleteTab(i) {
    ...
}

6. external

External API (methods you want to be available when using ref)

getFormData() {
    ...
}

isValid() {
    ...
}

7. render

render() {
    return {
        block: 'awesome',
        ...
    };
}

Props order

1. custom props (prefixed with underscore _)
2. custom callbacks (prefixed with underscore _)
3. BEM props
4. React attributes
5. React callbacks
6. ref
7. key

Price({

    // 1.
    _currency: productInfo.currency,
    
    // 2.
    _onSomething: this._onSomething,
    
    // 3.
    block: 'what',
    elem: 'what',
    mods: {
        visible: this.state.visible
    },
    mix: {
        ...
    },
    
    // 4.
    value: this.state.value,
    
    // 5.
    onChange: this.onPriceChange,
    
    // 6.
    ref: 'price'
    
    // 7.
    key: 'price'
    
}, productInfo.price)