From 86578ab1f9e06653b03db06ed99263fba5e5e279 Mon Sep 17 00:00:00 2001
From: David <david.acevedo@appfolio.com>
Date: Sun, 13 Nov 2022 20:34:49 -0800
Subject: [PATCH] fix: convert functional components to be forwardRef
 components vs redefining them as such

Tests were failing because the top level component was a wrapper vs the actual component that was exposed. This also makes it so defaultProps and PropTypes are attached to the actual component exported.
---
 src/Accordion.js             | 8 ++++----
 src/AccordionBody.js         | 6 +++---
 src/AccordionHeader.js       | 8 ++++----
 src/AccordionItem.js         | 8 ++++----
 src/Alert.js                 | 6 +++---
 src/Badge.js                 | 8 ++++----
 src/Button.js                | 8 ++++----
 src/CardBody.js              | 8 ++++----
 src/CardLink.js              | 8 ++++----
 src/CloseButton.js           | 8 ++++----
 src/Fade.js                  | 8 ++++----
 src/Form.js                  | 2 ++
 src/Placeholder.js           | 8 ++++----
 src/Table.js                 | 6 +++---
 src/Toast.js                 | 8 ++++----
 src/ToastBody.js             | 8 ++++----
 src/UncontrolledAccordion.js | 9 +++++----
 17 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/src/Accordion.js b/src/Accordion.js
index 3b6f93050..647a29536 100644
--- a/src/Accordion.js
+++ b/src/Accordion.js
@@ -29,7 +29,7 @@ const defaultProps = {
   tag: 'div',
 };
 
-function Accordion(props) {
+const Accordion = React.forwardRef((props, ref) => {
   const {
     flush,
     open,
@@ -37,7 +37,7 @@ function Accordion(props) {
     className,
     cssModule,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
   const classes = mapToCssModules(
@@ -57,9 +57,9 @@ function Accordion(props) {
       <Tag {...attributes} className={classes} ref={innerRef} />
     </AccordionContext.Provider>
   );
-}
+})
 
 Accordion.propTypes = propTypes;
 Accordion.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Accordion innerRef={ref} {...props} />);
+export default Accordion;
diff --git a/src/AccordionBody.js b/src/AccordionBody.js
index 51677e3f1..65d1c98ec 100644
--- a/src/AccordionBody.js
+++ b/src/AccordionBody.js
@@ -27,7 +27,7 @@ const defaultProps = {
   tag: 'div',
 };
 
-function AccordionBody(props) {
+const AccordionBody = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
@@ -57,9 +57,9 @@ function AccordionBody(props) {
       <Tag className="accordion-body">{children}</Tag>
     </Collapse>
   );
-}
+})
 
 AccordionBody.propTypes = propTypes;
 AccordionBody.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <AccordionBody innerRef={ref} {...props} />);
+export default AccordionBody;
diff --git a/src/AccordionHeader.js b/src/AccordionHeader.js
index 0556c48f7..1b0cc30ab 100644
--- a/src/AccordionHeader.js
+++ b/src/AccordionHeader.js
@@ -25,12 +25,12 @@ const defaultProps = {
   tag: 'h2',
 };
 
-function AccordionHeader(props) {
+const AccordionHeader = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     children,
     targetId,
     ...attributes
@@ -62,9 +62,9 @@ function AccordionHeader(props) {
       </button>
     </Tag>
   );
-}
+})
 
 AccordionHeader.propTypes = propTypes;
 AccordionHeader.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <AccordionHeader innerRef={ref} {...props} />);
+export default AccordionHeader;
diff --git a/src/AccordionItem.js b/src/AccordionItem.js
index fa47e5516..3fb148a2e 100644
--- a/src/AccordionItem.js
+++ b/src/AccordionItem.js
@@ -22,17 +22,17 @@ const defaultProps = {
   tag: 'div',
 };
 
-function AccordionItem(props) {
-  const { className, cssModule, tag: Tag, innerRef, ...attributes } = props;
+const AccordionItem = React.forwardRef((props, ref) => {
+  const { className, cssModule, tag: Tag, innerRef = ref, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'accordion-item'),
     cssModule,
   );
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+})
 
 AccordionItem.propTypes = propTypes;
 AccordionItem.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <AccordionItem innerRef={ref} {...props} />);
+export default AccordionItem;
diff --git a/src/Alert.js b/src/Alert.js
index 8514f8fd6..db6d8873f 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -46,7 +46,7 @@ const defaultProps = {
   },
 };
 
-function Alert(props) {
+const Alert = React.forwardRef((props, ref) => {
   const {
     className,
     closeClassName,
@@ -103,9 +103,9 @@ function Alert(props) {
       {children}
     </Fade>
   );
-}
+});
 
 Alert.propTypes = propTypes;
 Alert.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Alert innerRef={ref} {...props} />);
+export default Alert;
diff --git a/src/Badge.js b/src/Badge.js
index 9af580b17..633db58a8 100644
--- a/src/Badge.js
+++ b/src/Badge.js
@@ -29,12 +29,12 @@ const defaultProps = {
   tag: 'span',
 };
 
-function Badge(props) {
+const Badge = React.forwardRef((props, ref) => {
   let {
     className,
     cssModule,
     color,
-    innerRef,
+    innerRef = ref,
     pill,
     tag: Tag,
     ...attributes
@@ -55,9 +55,9 @@ function Badge(props) {
   }
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 Badge.propTypes = propTypes;
 Badge.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Badge innerRef={ref} {...props} />);
+export default Badge;
diff --git a/src/Button.js b/src/Button.js
index 53a107421..adef432ca 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -42,7 +42,7 @@ const defaultProps = {
   tag: 'button',
 };
 
-function Button(props) {
+const Button = React.forwardRef((props, ref) => {
   const onClick = useCallback(
     (e) => {
       if (props.disabled) {
@@ -68,7 +68,7 @@ function Button(props) {
     outline,
     size,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -104,9 +104,9 @@ function Button(props) {
       aria-label={ariaLabel}
     />
   );
-}
+});
 
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Button innerRef={ref} {...props} />);
+export default Button;
diff --git a/src/CardBody.js b/src/CardBody.js
index 72f934e40..d974e85fb 100644
--- a/src/CardBody.js
+++ b/src/CardBody.js
@@ -21,17 +21,17 @@ const defaultProps = {
   tag: 'div',
 };
 
-function CardBody(props) {
-  const { className, cssModule, innerRef, tag: Tag, ...attributes } = props;
+const CardBody = React.forwardRef((props, ref) => {
+  const { className, cssModule, innerRef = ref, tag: Tag, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'card-body'),
     cssModule,
   );
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 CardBody.propTypes = propTypes;
 CardBody.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <CardBody innerRef={ref} {...props} />);
+export default CardBody;
diff --git a/src/CardLink.js b/src/CardLink.js
index 502357d1e..dd9386e4e 100644
--- a/src/CardLink.js
+++ b/src/CardLink.js
@@ -18,17 +18,17 @@ const defaultProps = {
   tag: 'a',
 };
 
-function CardLink(props) {
-  const { className, cssModule, tag: Tag, innerRef, ...attributes } = props;
+const CardLink = React.forwardRef((props, ref) => {
+  const { className, cssModule, tag: Tag, innerRef = ref, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'card-link'),
     cssModule,
   );
 
   return <Tag {...attributes} ref={innerRef} className={classes} />;
-}
+})
 
 CardLink.propTypes = propTypes;
 CardLink.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <CardLink innerRef={ref} {...props} />);
+export default CardLink;
diff --git a/src/CloseButton.js b/src/CloseButton.js
index 3729ee066..d09ce2906 100644
--- a/src/CloseButton.js
+++ b/src/CloseButton.js
@@ -25,8 +25,8 @@ const defaultProps = {
   'aria-label': 'close',
 };
 
-function CloseButton(props) {
-  const { className, cssModule, variant, innerRef, ...attributes } = props;
+const CloseButton = React.forwardRef((props, ref) => {
+  const { className, cssModule, variant, innerRef = ref, ...attributes } = props;
 
   const classes = mapToCssModules(
     classNames(className, 'btn-close', variant && `btn-close-${variant}`),
@@ -35,9 +35,9 @@ function CloseButton(props) {
   return (
     <button ref={innerRef} type="button" className={classes} {...attributes} />
   );
-}
+});
 
 CloseButton.propTypes = propTypes;
 CloseButton.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <CloseButton innerRef={ref} {...props} />);
+export default CloseButton;
diff --git a/src/Fade.js b/src/Fade.js
index 131acf0f5..d75b4140e 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -41,7 +41,7 @@ const defaultProps = {
   in: true,
 };
 
-function Fade(props) {
+const Fade = React.forwardRef((props, ref) => {
   const {
     tag: Tag,
     baseClass,
@@ -49,7 +49,7 @@ function Fade(props) {
     className,
     cssModule,
     children,
-    innerRef,
+    innerRef = ref,
     ...otherProps
   } = props;
 
@@ -72,9 +72,9 @@ function Fade(props) {
       }}
     </Transition>
   );
-}
+});
 
 Fade.propTypes = propTypes;
 Fade.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Fade innerRef={ref} {...props} />);
+export default Fade;
diff --git a/src/Form.js b/src/Form.js
index c7b933af5..6cf180d21 100644
--- a/src/Form.js
+++ b/src/Form.js
@@ -17,6 +17,8 @@ const propTypes = {
 const defaultProps = {
   tag: 'form',
 };
+
+// TODO: Simple conversion of functional component "good-first-task"
 class Form extends Component {
   constructor(props) {
     super(props);
diff --git a/src/Placeholder.js b/src/Placeholder.js
index 1e1ffe08d..204cca98e 100644
--- a/src/Placeholder.js
+++ b/src/Placeholder.js
@@ -25,12 +25,12 @@ const defaultProps = {
   tag: 'span',
 };
 
-function Placeholder(props) {
+const Placeholder = React.forwardRef((props, ref) => {
   let {
     className,
     cssModule,
     color,
-    innerRef,
+    innerRef = ref,
     tag: Tag,
     animation,
     size,
@@ -56,9 +56,9 @@ function Placeholder(props) {
   );
 
   return <Tag {...modifiedAttributes} className={classes} ref={innerRef} />;
-}
+})
 
 Placeholder.propTypes = propTypes;
 Placeholder.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Placeholder innerRef={ref} {...props} />);
+export default Placeholder;
diff --git a/src/Table.js b/src/Table.js
index b89500675..eb7fd8340 100644
--- a/src/Table.js
+++ b/src/Table.js
@@ -37,7 +37,7 @@ const defaultProps = {
   responsiveTag: 'div',
 };
 
-function Table(props) {
+const Table = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
@@ -84,9 +84,9 @@ function Table(props) {
   }
 
   return table;
-}
+})
 
 Table.propTypes = propTypes;
 Table.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Table innerRef={ref} {...props} />);
+export default Table;
diff --git a/src/Toast.js b/src/Toast.js
index 26f63304c..7247c32c9 100644
--- a/src/Toast.js
+++ b/src/Toast.js
@@ -29,7 +29,7 @@ const defaultProps = {
   },
 };
 
-function Toast(props) {
+const Toast = React.forwardRef((props, ref) => {
   const {
     className,
     cssModule,
@@ -38,7 +38,7 @@ function Toast(props) {
     children,
     transition,
     fade,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -64,9 +64,9 @@ function Toast(props) {
       {children}
     </Fade>
   );
-}
+})
 
 Toast.propTypes = propTypes;
 Toast.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <Toast innerRef={ref} {...props} />);
+export default Toast;
diff --git a/src/ToastBody.js b/src/ToastBody.js
index 776cc1b90..7256f688c 100644
--- a/src/ToastBody.js
+++ b/src/ToastBody.js
@@ -18,17 +18,17 @@ const defaultProps = {
   tag: 'div',
 };
 
-function ToastBody(props) {
-  const { className, cssModule, innerRef, tag: Tag, ...attributes } = props;
+const ToastBody = React.forwardRef((props, ref) => {
+  const { className, cssModule, innerRef = ref, tag: Tag, ...attributes } = props;
   const classes = mapToCssModules(
     classNames(className, 'toast-body'),
     cssModule,
   );
 
   return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 ToastBody.propTypes = propTypes;
 ToastBody.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <ToastBody innerRef={ref} {...props} />);
+export default ToastBody;
diff --git a/src/UncontrolledAccordion.js b/src/UncontrolledAccordion.js
index 611e16cb9..7ed8f3cde 100644
--- a/src/UncontrolledAccordion.js
+++ b/src/UncontrolledAccordion.js
@@ -21,7 +21,8 @@ const defaultProps = {
   tag: 'div',
 };
 
-function UncontrolledAccordion({ defaultOpen, stayOpen, ...props }) {
+const UncontrolledAccordion = React.forwardRef((props, ref) => {
+  const { defaultOpen, stayOpen, innerRef = ref, ...restProps } = props;
   const [open, setOpen] = useState(defaultOpen || (stayOpen ? [] : undefined));
   const toggle = (id) => {
     if (stayOpen) {
@@ -37,10 +38,10 @@ function UncontrolledAccordion({ defaultOpen, stayOpen, ...props }) {
     }
   };
 
-  return <Accordion {...props} open={open} toggle={toggle} />;
-}
+  return <Accordion {...restProps} open={open} toggle={toggle} ref={innerRef} />;
+})
 
 UncontrolledAccordion.propTypes = propTypes;
 UncontrolledAccordion.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => <UncontrolledAccordion innerRef={ref} {...props} />);
+export default UncontrolledAccordion;