From 15f5f88ce28a79f5eeeea24a7f10b6a6f2c618a9 Mon Sep 17 00:00:00 2001
From: Xiaofan Wu <xiaofan2406@gmail.com>
Date: Wed, 10 Jul 2024 15:57:53 +1000
Subject: [PATCH] chore: remove all default props

---
 src/components/Accordion/index.jsx       |  7 +---
 src/components/Alert/index.jsx           |  6 +--
 src/components/Breadcrumb/index.jsx      | 18 +++++----
 src/components/Card/index.jsx            |  8 +---
 src/components/Carousel/index.jsx        | 47 +++++++++++++++---------
 src/components/CountBadge/index.jsx      |  6 +--
 src/components/Empty/index.jsx           |  6 +--
 src/components/FormGroup/index.jsx       |  7 +---
 src/components/Grid/Cell/index.jsx       |  8 +---
 src/components/Grid/Row/index.jsx        | 16 ++++----
 src/components/HelpIconPopover/index.jsx |  6 +--
 src/components/Pill/index.jsx            |  6 +--
 src/components/PrettyDiff/index.jsx      |  6 +--
 src/components/Skeleton/index.jsx        |  7 +---
 src/components/Slicey/Marker/index.jsx   |  5 +--
 src/components/TileGrid/index.jsx        |  6 +--
 src/components/Totals/index.jsx          |  7 +---
 17 files changed, 62 insertions(+), 110 deletions(-)

diff --git a/src/components/Accordion/index.jsx b/src/components/Accordion/index.jsx
index 7ee5ab1ae..121802f27 100644
--- a/src/components/Accordion/index.jsx
+++ b/src/components/Accordion/index.jsx
@@ -5,7 +5,7 @@ import Card from '../Card';
 import Panel from '../Panel';
 import invariant from '../../invariant';
 
-const Accordion = ({ dts, children, maxExpand, defaultActivePanelIds, onPanelClick }) => {
+const Accordion = ({ dts, children, maxExpand = 'max', defaultActivePanelIds = [], onPanelClick }) => {
   const [activePanelIds, setActivePanelIds] = React.useState(() => {
     return maxExpand === 'max' ? defaultActivePanelIds : _.slice(defaultActivePanelIds, 0, maxExpand);
   });
@@ -78,10 +78,5 @@ Accordion.propTypes = {
   maxExpand: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['max'])]),
 };
 
-Accordion.defaultProps = {
-  maxExpand: 'max',
-  defaultActivePanelIds: [],
-};
-
 Accordion.Panel = Panel;
 export default Accordion;
diff --git a/src/components/Alert/index.jsx b/src/components/Alert/index.jsx
index e6105cd0d..b21e60d6c 100644
--- a/src/components/Alert/index.jsx
+++ b/src/components/Alert/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const Alert = ({ type, children, dts }) => (
+const Alert = ({ type = 'info', children, dts }) => (
   <div data-testid="alert-wrapper" className={`alert-component alert-component-${type}`} {...expandDts(dts)}>
     {children}
   </div>
@@ -18,8 +18,4 @@ Alert.propTypes = {
   dts: PropTypes.string,
 };
 
-Alert.defaultProps = {
-  type: 'info',
-};
-
 export default Alert;
diff --git a/src/components/Breadcrumb/index.jsx b/src/components/Breadcrumb/index.jsx
index c7dcd7f14..27b0d73e6 100644
--- a/src/components/Breadcrumb/index.jsx
+++ b/src/components/Breadcrumb/index.jsx
@@ -5,7 +5,16 @@ import PropTypes from 'prop-types';
 import BreadcrumbNode from './Node';
 import './styles.css';
 
-const Breadcrumb = ({ rootNode, className, divider, nodes, onClick, disabled }) => {
+const defaultRootNode = { id: 'all', label: 'All' };
+
+const Breadcrumb = ({
+  rootNode = defaultRootNode,
+  className,
+  divider = '>',
+  nodes = [],
+  onClick,
+  disabled = false,
+}) => {
   const baseClass = 'aui--breadcrumb';
   const classNames = classnames(baseClass, { [`${baseClass}--disabled`]: disabled }, className);
   const onClickFunc = (newActiveId) => !disabled && onClick(newActiveId);
@@ -46,11 +55,4 @@ Breadcrumb.propTypes = {
   className: PropTypes.string,
 };
 
-Breadcrumb.defaultProps = {
-  rootNode: { id: 'all', label: 'All' },
-  divider: '>',
-  nodes: [],
-  disabled: false,
-};
-
 export default Breadcrumb;
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
index 80d004975..463704a88 100644
--- a/src/components/Card/index.jsx
+++ b/src/components/Card/index.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const CardContent = ({ children, className, stretch, fill, append, dts }) => {
+const CardContent = ({ children, className, stretch = false, fill = false, append = false, dts }) => {
   const contentClassNames = classnames('card-component-content', { stretch, fill, append }, className);
   return (
     <div data-testid="card-content-wrapper" className={contentClassNames} {...expandDts(dts)}>
@@ -23,12 +23,6 @@ CardContent.propTypes = {
   dts: PropTypes.string,
 };
 
-CardContent.defaultProps = {
-  fill: false,
-  stretch: false,
-  append: false,
-};
-
 const Card = ({ children, className, accent, dts }) => {
   const baseClass = 'card-component';
   const containerClassNames = classnames(baseClass, { [`accent accent-${accent}`]: accent }, className);
diff --git a/src/components/Carousel/index.jsx b/src/components/Carousel/index.jsx
index c60297ca7..606a78d51 100644
--- a/src/components/Carousel/index.jsx
+++ b/src/components/Carousel/index.jsx
@@ -8,15 +8,36 @@ import './styles.css';
 
 const baseClass = 'aui--carousel-component';
 
-const Carousel = React.forwardRef((props, ref) => {
-  const { className, children } = props;
-
-  return (
-    <Slider {...props} ref={ref} className={classNames(baseClass, className)}>
-      {children}
-    </Slider>
-  );
-});
+const Carousel = React.forwardRef(
+  (
+    {
+      className,
+      children,
+      autoplay = true,
+      variableWidth = true,
+      autoplaySpeed = 10000,
+      slidesToShow = 2,
+      dots = true,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Slider
+        {...rest}
+        ref={ref}
+        autoplay={autoplay}
+        variableWidth={variableWidth}
+        autoplaySpeed={autoplaySpeed}
+        slidesToShow={slidesToShow}
+        dots={dots}
+        className={classNames(baseClass, className)}
+      >
+        {children}
+      </Slider>
+    );
+  }
+);
 
 Carousel.propTypes = {
   className: PropTypes.string,
@@ -28,14 +49,6 @@ Carousel.propTypes = {
   dots: PropTypes.bool,
 };
 
-Carousel.defaultProps = {
-  autoplay: true,
-  variableWidth: true,
-  autoplaySpeed: 10000,
-  slidesToShow: 2,
-  dots: true,
-};
-
 const SWIPE_DELTA = 3;
 
 const usePreventCarouselSwipeClicks = () => {
diff --git a/src/components/CountBadge/index.jsx b/src/components/CountBadge/index.jsx
index 33beac506..bf26235ab 100644
--- a/src/components/CountBadge/index.jsx
+++ b/src/components/CountBadge/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const CountBadge = ({ value, status, dts }) => {
+const CountBadge = ({ value, status = 'default', dts }) => {
   const fontSize = value > 99 ? 'small' : 'normal';
   const classNames = `count-badge status-${status} count-badge-font-size-${fontSize}`;
   return (
@@ -28,8 +28,4 @@ CountBadge.propTypes = {
   dts: PropTypes.string,
 };
 
-CountBadge.defaultProps = {
-  status: 'default',
-};
-
 export default CountBadge;
diff --git a/src/components/Empty/index.jsx b/src/components/Empty/index.jsx
index 2fb0bbbb8..abe17fcfa 100644
--- a/src/components/Empty/index.jsx
+++ b/src/components/Empty/index.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './styles.css';
 
-const Empty = ({ collection, text, icon }) => {
+const Empty = ({ collection, text = 'Nothing to show.', icon }) => {
   if (_.isEmpty(collection)) {
     return (
       <div data-testid="empty-wrapper" className="empty-component">
@@ -24,8 +24,4 @@ Empty.propTypes = {
   icon: PropTypes.node,
 };
 
-Empty.defaultProps = {
-  text: 'Nothing to show.',
-};
-
 export default Empty;
diff --git a/src/components/FormGroup/index.jsx b/src/components/FormGroup/index.jsx
index 686058e0e..33240a4b5 100644
--- a/src/components/FormGroup/index.jsx
+++ b/src/components/FormGroup/index.jsx
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const FormGroup = ({ addon, disabled, helpText, label, onChange, placeholder, value }) => {
+const FormGroup = ({ addon, disabled = false, helpText, label, onChange, placeholder, value = '' }) => {
   const addonElement = addon ? <div className="input-group-addon">{addon}</div> : null;
   const inputId = _.kebabCase(label);
   return (
@@ -42,9 +42,4 @@ FormGroup.propTypes = {
   value: PropTypes.string,
 };
 
-FormGroup.defaultProps = {
-  disabled: false,
-  value: '',
-};
-
 export default FormGroup;
diff --git a/src/components/Grid/Cell/index.jsx b/src/components/Grid/Cell/index.jsx
index a60e8662e..1e54876e5 100644
--- a/src/components/Grid/Cell/index.jsx
+++ b/src/components/Grid/Cell/index.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { expandDts, classSuffixHelper } from '../../../utils';
 import './styles.css';
 
-const GridCell = ({ children, classSuffixes, onClick, stretch, dts, addonClassNames }) => {
+const GridCell = ({ children, classSuffixes = [], onClick, stretch = false, dts, addonClassNames = [] }) => {
   const componentClass = 'grid-component-cell';
   const classesList = classSuffixHelper({
     classSuffixes,
@@ -48,10 +48,4 @@ GridCell.propTypes = {
   stretch: PropTypes.bool,
 };
 
-GridCell.defaultProps = {
-  addonClassNames: [],
-  classSuffixes: [],
-  stretch: false,
-};
-
 export default GridCell;
diff --git a/src/components/Grid/Row/index.jsx b/src/components/Grid/Row/index.jsx
index 930265c1f..365e8a87b 100644
--- a/src/components/Grid/Row/index.jsx
+++ b/src/components/Grid/Row/index.jsx
@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import { classSuffixHelper, expandDts } from '../../../utils';
 import './styles.css';
 
-const GridRow = ({ horizontalBorder, short, type, verticalCellBorder, children, dts }) => {
+const GridRow = ({
+  horizontalBorder = true,
+  short = false,
+  type = 'body',
+  verticalCellBorder = false,
+  children,
+  dts,
+}) => {
   const componentClass = 'grid-component-row';
   const classesList = classSuffixHelper({
     classSuffixes: [type],
@@ -45,11 +52,4 @@ GridRow.propTypes = {
   dts: PropTypes.string,
 };
 
-GridRow.defaultProps = {
-  horizontalBorder: true,
-  short: false,
-  type: 'body',
-  verticalCellBorder: false,
-};
-
 export default GridRow;
diff --git a/src/components/HelpIconPopover/index.jsx b/src/components/HelpIconPopover/index.jsx
index 0f9d7a17b..11bf899c4 100644
--- a/src/components/HelpIconPopover/index.jsx
+++ b/src/components/HelpIconPopover/index.jsx
@@ -4,7 +4,7 @@ import { expandDts } from '../../utils';
 import Popover from '../Popover';
 import './styles.css';
 
-const HelpIconPopover = ({ children, id, placement }) => (
+const HelpIconPopover = ({ children, id, placement = 'right' }) => (
   <div {...expandDts(id)} data-testid="help-icon-popover-wrapper" className="help-icon-popover-component">
     <Popover triggers={['hover']} placement={placement} popoverContent={children}>
       <div data-testid="help-icon-popover-trigger" className="help-icon-popover-component-trigger" />
@@ -18,8 +18,4 @@ HelpIconPopover.propTypes = {
   placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 };
 
-HelpIconPopover.defaultProps = {
-  placement: 'right',
-};
-
 export default HelpIconPopover;
diff --git a/src/components/Pill/index.jsx b/src/components/Pill/index.jsx
index 4e864bf81..bdb55339e 100644
--- a/src/components/Pill/index.jsx
+++ b/src/components/Pill/index.jsx
@@ -6,7 +6,7 @@ import './styles.css';
 
 const sizes = ['large', 'medium', 'small'];
 
-const Pill = ({ className, children, onClick, size, dts }) => (
+const Pill = ({ className, children, onClick, size = sizes[1], dts }) => (
   <div
     className={classnames('aui--pill', `aui--pill-${size}`, { 'aui--pill-clickable': onClick }, className)}
     onClick={onClick}
@@ -16,10 +16,6 @@ const Pill = ({ className, children, onClick, size, dts }) => (
   </div>
 );
 
-Pill.defaultProps = {
-  size: sizes[1],
-};
-
 Pill.propTypes = {
   /**
    * 	Content inside pill
diff --git a/src/components/PrettyDiff/index.jsx b/src/components/PrettyDiff/index.jsx
index 17964a024..4423b18fd 100644
--- a/src/components/PrettyDiff/index.jsx
+++ b/src/components/PrettyDiff/index.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import './styles.css';
 
-const PrettyDiff = ({ newText, oldText }) => {
+const PrettyDiff = ({ newText = '', oldText = '' }) => {
   const dmp = new DiffMatchPatch();
   const diffs = dmp.diff_main(oldText, newText);
 
@@ -34,9 +34,5 @@ PrettyDiff.propTypes = {
   newText: PropTypes.string,
   oldText: PropTypes.string,
 };
-PrettyDiff.defaultProps = {
-  newText: '',
-  oldText: '',
-};
 
 export default PrettyDiff;
diff --git a/src/components/Skeleton/index.jsx b/src/components/Skeleton/index.jsx
index 789012847..84e0915d8 100644
--- a/src/components/Skeleton/index.jsx
+++ b/src/components/Skeleton/index.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const Skeleton = ({ animated, className, dts, height, variant, width }) => {
+const Skeleton = ({ animated = true, className, dts, height, variant = 'text', width }) => {
   const baseClass = 'aui--skeleton';
   const variantClass = () => (_.includes(['rect', 'circle', 'text'], variant) ? `${baseClass}-${variant}` : '');
 
@@ -40,9 +40,4 @@ Skeleton.propTypes = {
   width: PropTypes.string,
 };
 
-Skeleton.defaultProps = {
-  animated: true,
-  variant: 'text',
-};
-
 export default Skeleton;
diff --git a/src/components/Slicey/Marker/index.jsx b/src/components/Slicey/Marker/index.jsx
index 3857eddea..8f9aea196 100644
--- a/src/components/Slicey/Marker/index.jsx
+++ b/src/components/Slicey/Marker/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ROUND, QUARTER, getPointX, getPointY } from '../dataProcessor';
 import './styles.css';
 
-const Marker = ({ fraction }) => {
+const Marker = ({ fraction = 0 }) => {
   const getMarkerPoints = (markerValue) => {
     const pointOnCircle = ROUND * markerValue - QUARTER;
     return `${getPointX(pointOnCircle)},${getPointY(pointOnCircle)} 0,0`;
@@ -17,8 +17,5 @@ const Marker = ({ fraction }) => {
 Marker.propTypes = {
   fraction: PropTypes.number,
 };
-Marker.defaultProps = {
-  fraction: 0,
-};
 
 export default Marker;
diff --git a/src/components/TileGrid/index.jsx b/src/components/TileGrid/index.jsx
index 8e962c0c9..d55a51a1c 100644
--- a/src/components/TileGrid/index.jsx
+++ b/src/components/TileGrid/index.jsx
@@ -9,7 +9,7 @@ const defaultWidth = 204; // 204px
 const defaultMaxWidth = 295; // 295px
 const baseClass = 'tile-grid-component';
 
-const TileGrid = ({ title, items, onItemClick, distributed }) => {
+const TileGrid = ({ title, items, onItemClick, distributed = false }) => {
   const cardList = _.map(items, (item) => {
     const itemClassNames = classnames(`${baseClass}-item`, `${baseClass}-item-${item.classSuffix}`, {
       [`${baseClass}-item-distributed`]: distributed,
@@ -67,10 +67,6 @@ const TileGrid = ({ title, items, onItemClick, distributed }) => {
   );
 };
 
-TileGrid.defaultProps = {
-  distributed: false,
-};
-
 TileGrid.propTypes = {
   title: PropTypes.node,
   /**
diff --git a/src/components/Totals/index.jsx b/src/components/Totals/index.jsx
index 79e59929e..030a67874 100644
--- a/src/components/Totals/index.jsx
+++ b/src/components/Totals/index.jsx
@@ -6,7 +6,7 @@ import Grid from '../Grid';
 import GridCell from '../Grid/Cell';
 import GridRow from '../Grid/Row';
 
-const Totals = ({ toSum, valueFormatter }) => (
+const Totals = ({ toSum = [], valueFormatter = (value) => `${value}` }) => (
   <Grid>
     {_(toSum)
       .reject({ isHidden: true })
@@ -38,9 +38,4 @@ Totals.propTypes = {
   valueFormatter: PropTypes.func,
 };
 
-Totals.defaultProps = {
-  toSum: [],
-  valueFormatter: (value) => `${value}`,
-};
-
 export default Totals;