fix: Add react/no-multi-comp lint rule (#451)

* Make all components default exports

* Rename file

* Rename temp

* Restore original

* Make docs components default exports

* Rename file

* Rename temp

* Restore original

* Rename file

* Rename temp

* Restore original

* Rename file

* Rename temp

* Restore original

* Rename file

* Rename temp

* Restore original

* Rename to private files

* Separate Properties components

* Implement lint rule

Author: cjskillingstad

.eslintrc

@@ -129,7 +129,7 @@ rules:
     react/jsx-wrap-multilines: 2
     react/no-did-mount-set-state: 2
     react/no-did-update-set-state: 2
-    #react/no-multi-comp: 2
+    react/no-multi-comp: 2
     react/no-unknown-property: 2
     react/prop-types: 2
     react/react-in-jsx-scope: 2

src/Alert/Alert.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-export class Alert extends Component {
+class Alert extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -70,6 +70,7 @@ export class Alert extends Component {
         );
     }
 }
+
 Alert.displayName = 'Alert';
 
 Alert.propTypes = {
@@ -88,3 +89,5 @@ Alert.propDescriptions = {
     linkProps: 'Additional props to be spread to the link\'s `<a>` element.',
     linkText: 'Localized display text of the link.'
 };
+
+export default Alert;

src/Alert/Alert.test.js

@@ -1,4 +1,4 @@
-import { Alert } from './Alert';
+import Alert from './Alert';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount, shallow } from 'enzyme';

src/Calendar/Calendar.js

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-export class Calendar extends Component {
+class Calendar extends Component {
 
     constructor(props) {
         super(props);
@@ -547,6 +547,7 @@ export class Calendar extends Component {
     }
 
 }
+
 Calendar.displayName = 'Calendar';
 
 Calendar.basePropTypes = {
@@ -590,3 +591,5 @@ Calendar.propDescriptions = {
     tableProps: 'Additional props to be spread to the `<table>` element.',
     yearListProps: 'Additional props to be spread to the year\'s `<ul>` element.'
 };
+
+export default Calendar;

src/Calendar/Calendar.test.js

@@ -1,4 +1,4 @@
-import { Calendar } from '../Calendar/Calendar';
+import Calendar from '../Calendar/Calendar';
 import { mount } from 'enzyme';
 import React from 'react';
 

src/ComboboxInput/ComboboxInput.js

@@ -1,10 +1,9 @@
 import classnames from 'classnames';
-import { Popover } from '../Popover/Popover';
+import Popover from '../Popover/Popover';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-// ------------------------------------------- Combobox Input ------------------------------------------
-export const ComboboxInput = ({ placeholder, menu, compact, className, popoverProps, inputProps, buttonProps, ...props }) => {
+const ComboboxInput = ({ placeholder, menu, compact, className, popoverProps, inputProps, buttonProps, ...props }) => {
     const comboboxInputClasses = classnames(
         'fd-combobox-input',
         className
@@ -49,6 +48,7 @@ export const ComboboxInput = ({ placeholder, menu, compact, className, popoverPr
         </div>
     );
 };
+
 ComboboxInput.displayName = 'ComboboxInput';
 
 ComboboxInput.propTypes = {
@@ -64,3 +64,5 @@ ComboboxInput.propTypes = {
 ComboboxInput.propDescriptions = {
     menu: 'An object containing a `Menu` component.'
 };
+
+export default ComboboxInput;

src/ComboboxInput/ComboboxInput.test.js

@@ -1,4 +1,4 @@
-import { ComboboxInput } from './ComboboxInput';
+import ComboboxInput from './ComboboxInput';
 import Menu from '../Menu/Menu';
 import { mount } from 'enzyme';
 import React from 'react';

src/DatePicker/DatePicker.js

@@ -1,9 +1,9 @@
-import { Calendar } from '../Calendar/Calendar';
+import Calendar from '../Calendar/Calendar';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-export class DatePicker extends Component {
+class DatePicker extends Component {
     constructor(props) {
         super(props);
 
@@ -342,6 +342,7 @@ export class DatePicker extends Component {
         );
     }
 }
+
 DatePicker.displayName = 'DatePicker';
 
 DatePicker.propTypes = {
@@ -356,3 +357,5 @@ DatePicker.propDescriptions = {
     ...Calendar.propDescriptions,
     enableRangeSelection: 'Set to **true** to enable the selection of a date range (begin and end).'
 };
+
+export default DatePicker;

src/DatePicker/DatePicker.test.js

@@ -1,4 +1,4 @@
-import { DatePicker } from '../DatePicker/DatePicker';
+import DatePicker from '../DatePicker/DatePicker';
 import { mount } from 'enzyme';
 import React from 'react';
 

src/Dropdown/Dropdown.js

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-export const Dropdown = props => {
+const Dropdown = props => {
     const { standard, children, className, ...rest } = props;
 
     const dropdownClasses = classnames(
@@ -19,6 +19,7 @@ export const Dropdown = props => {
         </div>
     );
 };
+
 Dropdown.displayName = 'Dropdown';
 
 Dropdown.propTypes = {
@@ -30,3 +31,5 @@ Dropdown.propTypes = {
 Dropdown.propDescriptions = {
     standard: 'Set to **true** to enable a dropdown for toolbar.'
 };
+
+export default Dropdown;