<commit_before># Checklist for a clean component

1. Write the component as a `class` extending `React.Component`.
```javascript
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
```
2. Validate all props staticaly with `Focus.component.types`.
```javascript
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
MyComponent.propTypes = {
    prop1: types('string'),
    //...
}
```
3. Set default props staticaly.
```javascript
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
MyComponent.propTypes = {
    prop1: types('string'),
    //...
}
MyComponent.defaultProps = {
    prop1: 'default prop 1',
    //...
}
```
4. If you need to use a mixin, migrate to the decorator pattern :
```javascript
const MyDecorator = Component => class extends React.Component {
    // Any logic you want
    render() {
        return <Component {'whatever you want to pass as a prop'}/>;
    }
}
@MyDecorator
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
export default MyComponent;
```
5. **Unit test everything**. Use Mocha and Chai for this.
6. Add a `package.json` in your component's root folder, with `npm init`.
7. Write a test in `test/index.js`, as follows :
```javascript
const MyComponent = FocusComponents.path.to.my.component;
// Any logic you want
return <MyComponent {'any props you want'}/>;
```<commit_msg>Update COMPONENT.md<commit_after># Checklist for a clean component

- Write the component as a `class` extending `React.Component`.
```javascript
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
```
- Validate all props staticaly with `Focus.component.types`.
```javascript
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
MyComponent.propTypes = {
    prop1: types('string'),
    //...
}
```
- Set default props staticaly.
```javascript
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
MyComponent.propTypes = {
    prop1: types('string'),
    //...
}
MyComponent.defaultProps = {
    prop1: 'default prop 1',
    //...
}
```
- If you need to use a mixin, migrate to the decorator pattern :
```javascript
const MyDecorator = Component => class extends React.Component {
    // Any logic you want
    render() {
        return <Component {'whatever you want to pass as a prop'}/>;
    }
}
@MyDecorator
class MyComponent extends React.Component {
    render() {
        //my render
    }
}
export default MyComponent;
```
- **Unit test everything**. Use Mocha and Chai for this.
- Add a `package.json` in your component's root folder, with `npm init`.
- Write a test in `test/index.js`, as follows :
```javascript
const MyComponent = FocusComponents.path.to.my.component;
// Any logic you want
return <MyComponent {'any props you want'}/>;
```
{'fraction_non_alphanumeric': 0.13216615173360796, 'fraction_numerical': 0.005149330587023687, 'mean_word_length': 2.9863201094391245, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7012315', 'n_tokens_mistral': 875, 'n_tokens_neox': 846, 'n_words': 298}