[docs] Miscellaneous polish

docs/src/pages/components/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    // useful for interactions feedback
+    'no-alert': 'off',
+    // not very friendly to props forwarding
+    'react/jsx-handler-names': 'off',
+  },
+};

docs/src/pages/components/app-bar/ElevateAppBar.js

@@ -1,5 +1,3 @@
-/* eslint-disable prefer-spread */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
@@ -47,7 +45,7 @@ export default function ElevateAppBar(props) {
       <Toolbar />
       <Container>
         <Box my={2}>
-          {Array.apply(null, Array(12))
+          {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
 Cras justo odio, dapibus ac facilisis in, egestas eget quam.

docs/src/pages/components/app-bar/ElevateAppBar.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable prefer-spread */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
@@ -52,7 +50,7 @@ export default function ElevateAppBar(props: Props) {
       <Toolbar />
       <Container>
         <Box my={2}>
-          {Array.apply(null, Array(12))
+          {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
 Cras justo odio, dapibus ac facilisis in, egestas eget quam.

docs/src/pages/components/app-bar/HideAppBar.js

@@ -1,5 +1,3 @@
-/* eslint-disable prefer-spread */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
@@ -46,7 +44,7 @@ export default function HideAppBar(props) {
       <Toolbar />
       <Container>
         <Box my={2}>
-          {Array.apply(null, Array(12))
+          {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
 Cras justo odio, dapibus ac facilisis in, egestas eget quam.

docs/src/pages/components/app-bar/HideAppBar.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable prefer-spread */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
@@ -51,7 +49,7 @@ export default function HideAppBar(props: Props) {
       <Toolbar />
       <Container>
         <Box my={2}>
-          {Array.apply(null, Array(12))
+          {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.
 Cras justo odio, dapibus ac facilisis in, egestas eget quam.

docs/src/pages/components/autocomplete/IntegrationReactSelect.js

@@ -1,5 +1,3 @@
-/* eslint-disable react/prop-types, react/jsx-handler-names */
-
 import React from 'react';
 import clsx from 'clsx';
 import Select from 'react-select';
@@ -12,6 +10,7 @@ import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';
 import CancelIcon from '@material-ui/icons/Cancel';
 import { emphasize } from '@material-ui/core/styles/colorManipulator';
+import PropTypes from 'prop-types';
 
 const suggestions = [
   { label: 'Afghanistan' },
@@ -115,10 +114,20 @@ function NoOptionsMessage(props) {
   );
 }
 
+NoOptionsMessage.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object.isRequired,
+};
+
 function inputComponent({ inputRef, ...props }) {
   return <div ref={inputRef} {...props} />;
 }
 
+inputComponent.propTypes = {
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
 function Control(props) {
   return (
     <TextField
@@ -137,6 +146,13 @@ function Control(props) {
   );
 }
 
+Control.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  selectProps: PropTypes.object.isRequired,
+};
+
 function Option(props) {
   return (
     <MenuItem
@@ -153,6 +169,14 @@ function Option(props) {
   );
 }
 
+Option.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  isFocused: PropTypes.bool,
+  isSelected: PropTypes.bool,
+};
+
 function Placeholder(props) {
   return (
     <Typography
@@ -165,6 +189,12 @@ function Placeholder(props) {
   );
 }
 
+Placeholder.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object.isRequired,
+};
+
 function SingleValue(props) {
   return (
     <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
@@ -173,10 +203,21 @@ function SingleValue(props) {
   );
 }
 
+SingleValue.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object.isRequired,
+};
+
 function ValueContainer(props) {
   return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
 }
 
+ValueContainer.propTypes = {
+  children: PropTypes.node,
+  selectProps: PropTypes.object.isRequired,
+};
+
 function MultiValue(props) {
   return (
     <Chip
@@ -191,6 +232,13 @@ function MultiValue(props) {
   );
 }
 
+MultiValue.propTypes = {
+  children: PropTypes.node,
+  isFocused: PropTypes.bool,
+  removeProps: PropTypes.object.isRequired,
+  selectProps: PropTypes.object.isRequired,
+};
+
 function Menu(props) {
   return (
     <Paper square className={props.selectProps.classes.paper} {...props.innerProps}>
@@ -199,6 +247,12 @@ function Menu(props) {
   );
 }
 
+Menu.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object,
+};
+
 const components = {
   Control,
   Menu,

docs/src/pages/components/autocomplete/IntegrationReactSelect.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/prop-types, react/jsx-handler-names */
-
 import React, { CSSProperties, HTMLAttributes } from 'react';
 import clsx from 'clsx';
 import Select from 'react-select';
@@ -12,6 +10,7 @@ import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';
 import CancelIcon from '@material-ui/icons/Cancel';
 import { emphasize } from '@material-ui/core/styles/colorManipulator';
+import PropTypes from 'prop-types';
 import { ValueContainerProps } from 'react-select/lib/components/containers';
 import { ControlProps } from 'react-select/lib/components/Control';
 import { MenuProps, NoticeProps } from 'react-select/lib/components/Menu';
@@ -130,12 +129,22 @@ function NoOptionsMessage(props: NoticeProps<OptionType>) {
   );
 }
 
+NoOptionsMessage.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object.isRequired,
+} as any;
+
 type InputComponentProps = Pick<BaseTextFieldProps, 'inputRef'> & HTMLAttributes<HTMLDivElement>;
 
 function inputComponent({ inputRef, ...props }: InputComponentProps) {
   return <div ref={inputRef} {...props} />;
 }
 
+inputComponent.propTypes = {
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+} as any;
+
 function Control(props: ControlProps<OptionType>) {
   return (
     <TextField
@@ -154,6 +163,13 @@ function Control(props: ControlProps<OptionType>) {
   );
 }
 
+Control.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  selectProps: PropTypes.object.isRequired,
+} as any;
+
 function Option(props: OptionProps<OptionType>) {
   return (
     <MenuItem
@@ -170,6 +186,14 @@ function Option(props: OptionProps<OptionType>) {
   );
 }
 
+Option.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  isFocused: PropTypes.bool,
+  isSelected: PropTypes.bool,
+} as any;
+
 function Placeholder(props: PlaceholderProps<OptionType>) {
   return (
     <Typography
@@ -182,6 +206,12 @@ function Placeholder(props: PlaceholderProps<OptionType>) {
   );
 }
 
+Placeholder.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object.isRequired,
+} as any;
+
 function SingleValue(props: SingleValueProps<OptionType>) {
   return (
     <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
@@ -190,10 +220,21 @@ function SingleValue(props: SingleValueProps<OptionType>) {
   );
 }
 
+SingleValue.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object.isRequired,
+} as any;
+
 function ValueContainer(props: ValueContainerProps<OptionType>) {
   return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
 }
 
+ValueContainer.propTypes = {
+  children: PropTypes.node,
+  selectProps: PropTypes.object.isRequired,
+} as any;
+
 function MultiValue(props: MultiValueProps<OptionType>) {
   return (
     <Chip
@@ -208,6 +249,13 @@ function MultiValue(props: MultiValueProps<OptionType>) {
   );
 }
 
+MultiValue.propTypes = {
+  children: PropTypes.node,
+  isFocused: PropTypes.bool,
+  removeProps: PropTypes.object.isRequired,
+  selectProps: PropTypes.object.isRequired,
+} as any;
+
 function Menu(props: MenuProps<OptionType>) {
   return (
     <Paper square className={props.selectProps.classes.paper} {...props.innerProps}>
@@ -216,6 +264,12 @@ function Menu(props: MenuProps<OptionType>) {
   );
 }
 
+Menu.propTypes = {
+  children: PropTypes.node,
+  innerProps: PropTypes.object,
+  selectProps: PropTypes.object,
+} as any;
+
 const components = {
   Control,
   Menu,

docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js

@@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 function CollapsedBreadcrumbs() {

docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 function CollapsedBreadcrumbs() {

docs/src/pages/components/breadcrumbs/CustomSeparator.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 function CustomSeparator() {

docs/src/pages/components/breadcrumbs/CustomSeparator.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 function CustomSeparator() {

docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js

@@ -26,7 +26,7 @@ const StyledBreadcrumb = withStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 const useStyles = makeStyles(theme => ({

docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx

@@ -26,7 +26,7 @@ const StyledBreadcrumb = withStyles((theme: Theme) => ({
 
 function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 const useStyles = makeStyles((theme: Theme) =>

docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js

@@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 function IconBreadcrumbs() {

docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+  alert('You clicked a breadcrumb.');
 }
 
 function IconBreadcrumbs() {