SSR safe IDs, remove PropTypes

.eslintrc.json

@@ -42,11 +42,10 @@
         "message": "`with` is disallowed in strict mode because it makes code impossible to predict and optimize."
       }
     ],
-    "react/default-props-match-prop-types": ["error", { "allowRequiredDefaults": true }],
     "react/no-array-index-key": "error",
     "react/no-find-dom-node": "error",
     "react/prefer-stateless-function": "off",
-    "react/prop-types": "off", // This will be unnecessary once everything is a function component
+    "react/prop-types": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "require-jsdoc": "off"

package.json

@@ -47,7 +47,6 @@
     "classnames": "^2.2.6",
     "credit-card-type": "^5.0.1",
     "date-fns": "^1.30.1",
-    "deprecated-prop-type": "^1.0.0",
     "fast-deep-equal": "^3.1.3",
     "fecha": "^2.3.3",
     "imask": "^6.2.2",
@@ -65,7 +64,6 @@
     "lodash.uniqueid": "^4.0.1",
     "lodash.without": "^4.4.0",
     "memoize-one": "^5.1.1",
-    "prop-types": "^15.7.2",
     "react-imask": "^6.2.2",
     "react-resize-detector": "^4.2.3",
     "react-select-plus": "1.2.0",

src/components/Address/CountryInput.tsx

@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { FC } from 'react';
 import { InputProps } from 'reactstrap';
 import Input from '../Input/Input';
@@ -43,16 +42,6 @@ const CountryInput: FC<CountryInputProps> = ({
   );
 };
 
-CountryInput.propTypes = {
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-};
-
 CountryInput.defaultProps = defaultProps;
 
 CountryInput.displayName = 'CountryInput';

src/components/Address/StateInput.tsx

@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { FC } from 'react';
 import { InputProps } from 'reactstrap';
 import Input from '../Input/Input';
@@ -68,17 +67,6 @@ const StateInput: FC<StateInputProps> = ({
   );
 };
 
-StateInput.propTypes = {
-  className: PropTypes.string,
-  countries: PropTypes.arrayOf(PropTypes.string.isRequired),
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-};
-
 StateInput.defaultProps = defaultProps;
 StateInput.displayName = 'StateInput';
 

src/components/Callout/Callout.tsx

@@ -61,6 +61,7 @@ Callout.defaultProps = {
   className: '',
   color: 'primary',
   background: 'light',
+  // eslint-disable-next-line react/default-props-match-prop-types
   placement: 'bottom',
 };
 

src/components/Carousel/ImageCarousel.js

@@ -1,25 +1,10 @@
-/* eslint-disable react/default-props-match-prop-types */
-// Enable the above rule when the following is addressed https://github.com/yannickcr/eslint-plugin-react/issues/1674
-
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from '../Icon/Icon';
 import Modal from '../Modal/Modal';
 import UncontrolledCarousel from './UncontrolledCarousel';
 
 export default class ImageCarousel extends React.Component {
-  static propTypes = {
-    items: PropTypes.array.isRequired,
-    indicators: PropTypes.bool,
-    controls: PropTypes.bool,
-    autoPlay: PropTypes.bool,
-    defaultActiveIndex: PropTypes.number,
-    activeIndex: PropTypes.number,
-    slide: PropTypes.bool,
-    ...Modal.propTypes,
-  };
-
   static defaultProps = {
     autoPlay: false,
     backdrop: true,

src/components/Carousel/UncontrolledCarousel.js

@@ -1,23 +1,10 @@
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Carousel from './Carousel';
 import CarouselCaption from './CarouselCaption';
 import CarouselControl from './CarouselControl';
 import CarouselIndicators from './CarouselIndicators';
 import CarouselItem from './CarouselItem';
 
-const propTypes = {
-  items: PropTypes.array.isRequired,
-  indicators: PropTypes.bool,
-  controls: PropTypes.bool,
-  autoPlay: PropTypes.bool,
-  defaultActiveIndex: PropTypes.number,
-  activeIndex: PropTypes.number,
-  next: PropTypes.func,
-  previous: PropTypes.func,
-  goToIndex: PropTypes.func,
-};
-
 class UncontrolledCarousel extends Component {
   constructor(props) {
     super(props);
@@ -123,7 +110,6 @@ class UncontrolledCarousel extends Component {
   }
 }
 
-UncontrolledCarousel.propTypes = propTypes;
 UncontrolledCarousel.defaultProps = {
   controls: true,
   indicators: true,

src/components/Checkbox/CheckboxBooleanInput.tsx

@@ -1,66 +1,45 @@
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import type { InputProps } from 'reactstrap';
+import { getUniqueId } from '../../util/uniqueId';
 import FormGroup from '../Form/FormGroup';
 import Input from '../Input/Input';
 import Label from '../Label/Label';
 
-interface CheckboxBooleanInputSpecificProps {
+export type CheckboxBooleanInputProps = Omit<InputProps, 'onChange' | 'value'> & {
   checkboxLabel?: React.ReactNode;
   onChange?: (isChecked: boolean) => void;
   value?: boolean;
+};
+
+function CheckboxBooleanInput({
+  checkboxLabel,
+  className,
+  onChange,
+  value,
+  ...inputProps
+}: CheckboxBooleanInputProps) {
+  const [generatedId] = useState(() => getUniqueId('checkbox-boolean-input-'));
+  const id = inputProps.id || generatedId;
+  const classNames = classnames('pt-2', className);
+  return (
+    <FormGroup check className={classNames}>
+      <Input
+        {...inputProps}
+        id={id}
+        type="checkbox"
+        checked={value}
+        onChange={(e) => onChange && onChange(e.target.checked)}
+      />
+      {checkboxLabel && (
+        <Label check for={id}>
+          {checkboxLabel}
+        </Label>
+      )}
+    </FormGroup>
+  );
 }
-type ExtendsWithTypeOverrides<T, U> = U & Omit<T, keyof U>;
-export type CheckboxBooleanInputProps = ExtendsWithTypeOverrides<
-  InputProps,
-  CheckboxBooleanInputSpecificProps
->;
 
-let count = 0;
-
-function getID() {
-  return `checkbox-boolean-input-${count++}`;
-}
-
-class CheckboxBooleanInput extends React.Component<CheckboxBooleanInputProps> {
-  static propTypes = {
-    id: PropTypes.string,
-    checkboxLabel: PropTypes.node,
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.bool,
-  };
-
-  id = getID();
-
-  constructor(props: CheckboxBooleanInputProps) {
-    super(props);
-
-    this.id = props.id || this.id;
-  }
-
-  render() {
-    const { checkboxLabel, className, onChange, value, ...inputProps } = this.props;
-    const classNames = classnames('pt-2', className);
-
-    return (
-      <FormGroup check className={classNames}>
-        <Input
-          id={this.id}
-          {...inputProps}
-          type="checkbox"
-          checked={value}
-          onChange={(e) => onChange && onChange(e.target.checked)}
-        />
-        {checkboxLabel && (
-          <Label check for={this.id}>
-            {checkboxLabel}
-          </Label>
-        )}
-      </FormGroup>
-    );
-  }
-}
+CheckboxBooleanInput.displayName = 'CheckboxBooleanInput';
 
 export default CheckboxBooleanInput;

src/components/Checkbox/CheckboxListInput.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 export interface CheckboxListInputProps {
@@ -9,13 +8,6 @@ export interface CheckboxListInputProps {
 }
 
 class CheckboxListInput extends React.Component<CheckboxListInputProps> {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.array,
-  };
-
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (this.props.onChange) {
       const { checked, value } = e.target;

src/components/CollapsableText/CollapsableText.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unused-prop-types */
 import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
 import { useIntervalRef } from '../../hooks/useIntervalRef';
@@ -23,7 +22,7 @@ export interface CollapsableTextProps {
   collapsed?: boolean;
   lessLabel?: React.ReactNode;
   moreLabel?: React.ReactNode;
-  /**  @deprecated maxLength has no effect. Use maxLines instead */
+  /**  @deprecated maxLength has no effect. Use maxLines instead */ // eslint-disable-next-line react/no-unused-prop-types
   maxLength?: number;
   maxLines?: number;
   alignToggleButton?: AlignToggleButton;

src/components/FilterList/FilterList.js

@@ -1,15 +1,7 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import LabelBadge from '../LabelBadge/LabelBadge';
 
 export default class FilterList extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    filters: PropTypes.array.isRequired,
-    maxWidth: PropTypes.number,
-    onRemove: PropTypes.func,
-  };
-
   static defaultProps = {
     maxWidth: 14,
   };

src/components/Form/BoundForm.js

@@ -1,26 +1,18 @@
 import noop from 'lodash.noop';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Form from './Form';
 
 class BoundForm extends React.Component {
-  static propTypes = {
-    errors: PropTypes.object,
-    object: PropTypes.object.isRequired,
-    onSubmit: PropTypes.func,
-    onChange: PropTypes.func,
-  };
-
   static defaultProps = {
     errors: {},
     onSubmit: noop,
     onChange: noop,
   };
 
   static childContextTypes = {
-    value: PropTypes.object,
-    errors: PropTypes.object,
-    onChange: PropTypes.func,
+    value: noop,
+    errors: noop,
+    onChange: noop,
   };
 
   constructor(props) {