Merge pull request #1245 from dequelabs/remove-prop-types

feat(react): remove PropTypes from all react components
dequelabs · Dec 5, 2023 · 301c546 · 301c546
2 parents d71c768 + a351d96
commit 301c546
Show file tree

Hide file tree

Showing 70 changed files with 86 additions and 736 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -28,7 +28,6 @@
     "focus-trap-react": "8",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
-    "prop-types": "^15.6.0",
     "react-id-generator": "^3.0.1",
     "react-popper": "^2.2.4",
     "react-syntax-highlighter": "^15.5.0",
@@ -46,7 +45,6 @@
     "@svgr/rollup": "^6.1.2",
     "@types/classnames": "^2.2.10",
     "@types/node": "^17.0.42",
-    "@types/prop-types": "^15.7.3",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "@types/react-syntax-highlighter": "^15.5.2",

diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
@@ -5,7 +5,6 @@ import ExpandCollapsePanel, {
   PanelTrigger
 } from '../ExpandCollapsePanel';
 import { useId } from 'react-id-generator';
-import PropTypes from 'prop-types';
 
 export interface AccordionTriggerProps
   extends React.HTMLAttributes<HTMLButtonElement> {
@@ -116,22 +115,5 @@ Accordion.displayName = 'Accordion';
 AccordionContent.displayName = 'AccordionContent';
 AccordionTrigger.displayName = 'AccordionTrigger';
 
-Accordion.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-AccordionTrigger.propTypes = {
-  children: PropTypes.node,
-  heading: PropTypes.shape({
-    level: PropTypes.number
-  })
-};
-
-AccordionContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
-
 export default Accordion;
 export { Accordion, AccordionTrigger, AccordionContent };
diff --git a/packages/react/src/components/Address/index.tsx b/packages/react/src/components/Address/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 interface AddressProps extends React.HTMLAttributes<HTMLElement> {
@@ -13,12 +12,10 @@ export const Address = ({ children, className, ...other }: AddressProps) => (
 );
 
 Address.displayName = 'Address';
-Address.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
-type AddressLineProps = React.HTMLAttributes<HTMLElement>;
+type AddressLineProps = React.HTMLAttributes<HTMLElement> & {
+  className?: string;
+};
 
 export const AddressLine = ({
   children,
@@ -32,10 +29,6 @@ export const AddressLine = ({
   ) : null;
 
 AddressLine.displayName = 'AddressLine';
-AddressLine.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
 
 interface AddressCityStateZipProps extends React.HTMLAttributes<HTMLElement> {
   city: React.ReactNode;
@@ -62,9 +55,3 @@ export const AddressCityStateZip = ({
   ) : null;
 
 AddressCityStateZip.displayName = 'AddressCityStateZip';
-AddressCityStateZip.propTypes = {
-  city: PropTypes.node,
-  state: PropTypes.node,
-  zip: PropTypes.node,
-  className: PropTypes.string
-};
diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,8 +1,9 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 
-type BreadcrumbItemProps = React.HTMLAttributes<HTMLSpanElement>;
+type BreadcrumbItemProps = React.HTMLAttributes<HTMLSpanElement> & {
+  className?: string;
+};
 
 const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>( // eslint-disable-line react/display-name
   ({ className, children, ...props }: BreadcrumbItemProps, ref) => (
@@ -16,7 +17,4 @@ const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>( // eslint-d
     </span>
   )
 );
-BreadcrumbItem.propTypes = {
-  className: PropTypes.string
-};
 export default BreadcrumbItem;
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -17,9 +16,5 @@ const Card = ({ className, variant, ...other }: CardProps) => (
 );
 
 Card.displayName = 'Card';
-Card.propTypes = {
-  className: PropTypes.string,
-  variant: PropTypes.string
-};
 
 export default Card;
diff --git a/packages/react/src/components/Card/CardContent.tsx b/packages/react/src/components/Card/CardContent.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const CardContent = ({ className, ...other }: CardContentProps) => (
   <div className={classNames('Card__content', className)} {...other} />
 );
 
 CardContent.displayName = 'CardContent';
-CardContent.propTypes = {
-  className: PropTypes.string
-};
 
 export default CardContent;
diff --git a/packages/react/src/components/Card/CardFooter.tsx b/packages/react/src/components/Card/CardFooter.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const CardFooter = ({ className, ...other }: CardFooterProps) => (
   <div className={classNames('Card__footer', className)} {...other} />
 );
 
 CardFooter.displayName = 'CardFooter';
-CardFooter.propTypes = {
-  className: PropTypes.string
-};
 
 export default CardFooter;
diff --git a/packages/react/src/components/Card/CardHeader.tsx b/packages/react/src/components/Card/CardHeader.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const CardHeader = ({ className, ...other }: CardHeaderProps) => (
   <div className={classNames('Card__header', className)} {...other} />
 );
 
 CardHeader.displayName = 'CardHeader';
-CardHeader.propTypes = {
-  className: PropTypes.string
-};
 
 export default CardHeader;
diff --git a/packages/react/src/components/ClickOutsideListener/index.tsx b/packages/react/src/components/ClickOutsideListener/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import setRef from '../../utils/setRef';
 
 export interface ClickOutsideListenerProps<
@@ -12,24 +11,14 @@ export interface ClickOutsideListenerProps<
   target?: T;
 }
 
-export default class ClickOutsideListener extends React.Component<
-  ClickOutsideListenerProps
-> {
+export default class ClickOutsideListener extends React.Component<ClickOutsideListenerProps> {
   static displayName = 'ClickOutsideListener';
 
   static defaultProps = {
     mouseEvent: 'click',
     touchEvent: 'touchend'
   };
 
-  static propTypes = {
-    children: PropTypes.node,
-    target: PropTypes.any,
-    onClickOutside: PropTypes.func.isRequired,
-    mouseEvent: PropTypes.oneOf(['mousedown', 'click', 'mouseup', false]),
-    touchEvent: PropTypes.oneOf(['touchstart', 'touchend', false])
-  };
-
   private nodeRef: HTMLElement | null;
 
   handleEvent = (event: MouseEvent | TouchEvent) => {

diff --git a/packages/react/src/components/Code/index.tsx b/packages/react/src/components/Code/index.tsx
@@ -1,5 +1,4 @@
 import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
 import classNames from 'classnames';
@@ -30,7 +29,7 @@ const Code: React.ComponentType<React.PropsWithChildren<Props>> = ({
   className,
   scrollable = false,
   ...props
-}) => {
+}: Props) => {
   const ref = useRef<HTMLPreElement>(null);
   const [scrollableRegion, setScrollableRegion] = useState(false);
   // react-syntax-highlighter does not provide direct access to its dom elements
@@ -81,12 +80,4 @@ const Code: React.ComponentType<React.PropsWithChildren<Props>> = ({
 
 Code.displayName = 'Code';
 
-Code.propTypes = {
-  children: PropTypes.string.isRequired,
-  language: PropTypes.oneOf(['javascript', 'css', 'html', 'yaml']),
-  className: PropTypes.string,
-  tabIndex: PropTypes.number,
-  scrollable: PropTypes.bool
-};
-
 export default Code;
diff --git a/packages/react/src/components/DescriptionList/index.tsx b/packages/react/src/components/DescriptionList/index.tsx
@@ -1,12 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const commonPropTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
-
 interface DescriptionProps {
   children: React.ReactNode;
   className?: string;
@@ -33,7 +27,6 @@ export const DescriptionList = ({
 );
 
 DescriptionList.displayName = 'DescriptionList';
-DescriptionList.propTypes = commonPropTypes;
 
 export const DescriptionListItem = ({
   children,
@@ -46,7 +39,6 @@ export const DescriptionListItem = ({
 );
 
 DescriptionListItem.displayName = 'DescriptionListItem';
-DescriptionListItem.propTypes = commonPropTypes;
 
 export const DescriptionTerm = ({
   children,
@@ -59,7 +51,6 @@ export const DescriptionTerm = ({
 );
 
 DescriptionTerm.displayName = 'DescriptionTerm';
-DescriptionTerm.propTypes = commonPropTypes;
 
 export const DescriptionDetails = ({
   children,
@@ -72,4 +63,3 @@ export const DescriptionDetails = ({
 );
 
 DescriptionDetails.displayName = 'DescriptionDetails';
-DescriptionDetails.propTypes = commonPropTypes;
diff --git a/packages/react/src/components/Dialog/index.tsx b/packages/react/src/components/Dialog/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import Offscreen from '../Offscreen';
@@ -43,20 +42,6 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     closeButtonText: 'Close'
   };
 
-  static propTypes = {
-    className: PropTypes.string,
-    show: PropTypes.bool,
-    dialogRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    onClose: PropTypes.func,
-    forceAction: PropTypes.bool,
-    heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]).isRequired,
-    closeButtonText: PropTypes.string,
-    portal: PropTypes.any
-  };
-
   private element: HTMLDivElement | null;
   private heading: HTMLHeadingElement | null;
   private headingId: string = nextId('dialog-title-');
@@ -207,7 +192,7 @@ interface DialogAlignmentProps {
 }
 
 export type DialogContentProps = React.HTMLAttributes<HTMLDivElement> &
-  DialogAlignmentProps;
+  DialogAlignmentProps & { className?: string };
 
 const DialogContent = ({
   children,
@@ -227,14 +212,9 @@ const DialogContent = ({
   </div>
 );
 DialogContent.displayName = 'DialogContent';
-DialogContent.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  align: PropTypes.string
-};
 
 export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> &
-  DialogAlignmentProps;
+  DialogAlignmentProps & { className?: string };
 
 const DialogFooter = ({
   children,
@@ -254,9 +234,4 @@ const DialogFooter = ({
   </div>
 );
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  align: PropTypes.string
-};
 export { Dialog, DialogContent, DialogFooter };