refactor(react-18): replace defaultProps with JS default params

dhis2 · Sep 14, 2024 · 018c2fc · 018c2fc
1 parent fc45bbb
commit 018c2fc
Show file tree

Hide file tree

Showing 122 changed files with 306 additions and 777 deletions.
diff --git a/components/alert/src/alert-bar/alert-bar.js b/components/alert/src/alert-bar/alert-bar.js
@@ -13,10 +13,10 @@ const AlertBar = ({
     children,
     className,
     critical,
-    dataTest,
-    duration,
+    dataTest = 'dhis2-uicore-alertbar',
+    duration = 8000,
     hidden,
-    icon,
+    icon = true,
     permanent,
     success,
     warning,
@@ -142,12 +142,6 @@ const alertTypePropType = mutuallyExclusive(
     PropTypes.bool
 )
 
-AlertBar.defaultProps = {
-    duration: 8000,
-    dataTest: 'dhis2-uicore-alertbar',
-    icon: true,
-}
-
 AlertBar.propTypes = {
     /** An array of 0-2 action objects 
 `[{label: "Save", onClick: clickHandler}]`*/

diff --git a/components/alert/src/alert-bar/icon.js b/components/alert/src/alert-bar/icon.js
@@ -9,7 +9,7 @@ import {
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
+const StatusIcon = ({ error, warning, valid, info, defaultTo = null }) => {
     if (error) {
         return <IconErrorFilled24 color={colors.white} />
     }
@@ -26,10 +26,6 @@ const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
     return defaultTo
 }
 
-StatusIcon.defaultProps = {
-    defaultTo: null,
-}
-
 StatusIcon.propTypes = {
     defaultTo: PropTypes.element,
     error: PropTypes.bool,

diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js
@@ -4,7 +4,11 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const AlertStack = ({ className, children, dataTest }) => (
+export const AlertStack = ({
+    className,
+    children,
+    dataTest = 'dhis2-uicore-alertstack',
+}) => (
     <Portal>
         <div className={cx(className)} data-test={dataTest}>
             {children}
@@ -33,10 +37,6 @@ export const AlertStack = ({ className, children, dataTest }) => (
     </Portal>
 )
 
-AlertStack.defaultProps = {
-    dataTest: 'dhis2-uicore-alertstack',
-}
-
 AlertStack.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/components/box/src/box.js b/components/box/src/box.js
@@ -11,7 +11,7 @@ export const Box = ({
     maxWidth,
     marginTop,
     children,
-    dataTest,
+    dataTest = 'dhis2-uicore-box',
     className,
 }) => (
     <div data-test={dataTest} className={className}>
@@ -31,10 +31,6 @@ export const Box = ({
     </div>
 )
 
-Box.defaultProps = {
-    dataTest: 'dhis2-uicore-box',
-}
-
 Box.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/components/button/src/button-strip/button-strip.js b/components/button/src/button-strip/button-strip.js
@@ -4,7 +4,13 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Children } from 'react'
 
-const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
+const ButtonStrip = ({
+    className,
+    children,
+    middle,
+    end,
+    dataTest = 'dhis2-uicore-buttonstrip',
+}) => (
     <div
         className={cx(className, { start: !middle && !end, middle, end })}
         data-test={dataTest}
@@ -39,10 +45,6 @@ const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
 
 const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool)
 
-ButtonStrip.defaultProps = {
-    dataTest: 'dhis2-uicore-buttonstrip',
-}
-
 ButtonStrip.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
@@ -8,7 +8,7 @@ import styles from './button.styles.js'
 export const Button = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-button',
     destructive,
     disabled,
     icon,
@@ -20,7 +20,7 @@ export const Button = ({
     small,
     tabIndex,
     toggled,
-    type,
+    type = 'button',
     value,
     onBlur,
     onClick,
@@ -94,11 +94,6 @@ export const Button = ({
     )
 }
 
-Button.defaultProps = {
-    type: 'button',
-    dataTest: 'dhis2-uicore-button',
-}
-
 Button.propTypes = {
     /** Component to render inside the button */
     children: PropTypes.node,

diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
@@ -181,10 +181,6 @@ class DropdownButton extends Component {
     }
 }
 
-DropdownButton.defaultProps = {
-    dataTest: 'dhis2-uicore-dropdownbutton',
-}
-
 DropdownButton.propTypes = {
     /** Children to render inside the buton */
     children: PropTypes.node,

diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
@@ -159,10 +159,6 @@ class SplitButton extends Component {
     }
 }
 
-SplitButton.defaultProps = {
-    dataTest: 'dhis2-uicore-splitbutton',
-}
-
 SplitButton.propTypes = {
     children: PropTypes.string,
     className: PropTypes.string,

diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
@@ -143,9 +143,6 @@ export const CalendarInput = ({
     )
 }
 
-CalendarInput.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-calendar-inputfield',
-}
 CalendarInput.propTypes = {
     ...CalendarProps,
     ...InputFieldProps,

diff --git a/components/calendar/src/calendar/calendar.js b/components/calendar/src/calendar/calendar.js
@@ -15,10 +15,10 @@ export const Calendar = ({
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize,
+    width = '240px',
+    cellSize = '32px',
 }) => {
     const wrapperBorderColor = colors.grey300
     const backgroundColor = 'none'
@@ -85,12 +85,6 @@ export const Calendar = ({
     )
 }
 
-Calendar.defaultProps = {
-    cellSize: '32px',
-    width: '240px',
-    weekDayFormat: 'narrow',
-}
-
 export const CalendarProps = {
     /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
     calendar: PropTypes.any.isRequired,

diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -159,12 +159,6 @@ export const CalendarStoryWrapper = (props) => {
     )
 }
 
-CalendarStoryWrapper.defaultProps = {
-    calendar: 'gregorian',
-    component: Calendar,
-    weekDayFormat: 'narrow',
-}
-
 CalendarStoryWrapper.propTypes = {
     calendar: PropTypes.string.isRequired,
     component: PropTypes.elementType.isRequired,

diff --git a/components/card/src/card.js b/components/card/src/card.js
@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Card = ({ className, children, dataTest }) => (
+const Card = ({ className, children, dataTest = 'dhis2-uicore-card' }) => (
     <div className={cx(className)} data-test={dataTest}>
         {children}
 
@@ -23,10 +23,6 @@ const Card = ({ className, children, dataTest }) => (
     </div>
 )
 
-Card.defaultProps = {
-    dataTest: 'dhis2-uicore-card',
-}
-
 Card.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/components/center/src/center.js b/components/center/src/center.js
@@ -37,11 +37,6 @@ export const Center = forwardRef(
 
 Center.displayName = 'Center'
 
-Center.defaultProps = {
-    dataTest: 'dhis2-uicore-centeredcontent',
-    position: 'middle',
-}
-
 Center.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/components/checkbox/src/checkbox-field/checkbox-field.js b/components/checkbox/src/checkbox-field/checkbox-field.js
@@ -5,7 +5,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Checkbox } from '../checkbox/index.js'
 
-const AddRequired = ({ label, required, dataTest }) => (
+const AddRequired = ({
+    label,
+    required,
+    dataTest = 'dhis2-uiwidgets-checkboxfield',
+}) => (
     <React.Fragment>
         {label}
         {required && <Required dataTest={`${dataTest}-required`} />}
@@ -37,7 +41,7 @@ const CheckboxField = ({
     required,
     helpText,
     validationText,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-checkboxfield',
 }) => (
     <Field
         className={className}
@@ -75,10 +79,6 @@ const CheckboxField = ({
     </Field>
 )
 
-CheckboxField.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-checkboxfield',
-}
-
 CheckboxField.propTypes = {
     checked: PropTypes.bool,
     className: PropTypes.string,

diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js
@@ -178,12 +178,6 @@ class Checkbox extends Component {
     }
 }
 
-Checkbox.defaultProps = {
-    checked: false,
-    indeterminate: false,
-    dataTest: 'dhis2-uicore-checkbox',
-}
-
 const uniqueOnStatePropType = mutuallyExclusive(
     ['checked', 'indeterminate'],
     PropTypes.bool

diff --git a/components/chip/src/chip.js b/components/chip/src/chip.js
@@ -19,11 +19,11 @@ const Chip = ({
     onRemove,
     onClick,
     icon,
-    dataTest,
-    marginBottom,
+    dataTest = 'dhis2-uicore-chip',
+    marginBottom = 4,
     marginLeft,
     marginRight,
-    marginTop,
+    marginTop = 4,
     marginInlineStart,
     marginInlineEnd,
 }) => (
@@ -114,12 +114,6 @@ const Chip = ({
     </span>
 )
 
-Chip.defaultProps = {
-    dataTest: 'dhis2-uicore-chip',
-    marginBottom: 4,
-    marginTop: 4,
-}
-
 Chip.propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,

diff --git a/components/cover/src/cover.js b/components/cover/src/cover.js
@@ -10,7 +10,13 @@ const createClickHandler = (onClick) => (event) => {
     }
 }
 
-const Cover = ({ children, className, dataTest, onClick, translucent }) => (
+const Cover = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-componentcover',
+    onClick,
+    translucent,
+}) => (
     <div
         className={cx(className, { translucent })}
         onClick={createClickHandler(onClick)}
@@ -33,10 +39,6 @@ const Cover = ({ children, className, dataTest, onClick, translucent }) => (
     </div>
 )
 
-Cover.defaultProps = {
-    dataTest: 'dhis2-uicore-componentcover',
-}
-
 Cover.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

diff --git a/components/css/src/css-variables/css-variables.js b/components/css/src/css-variables/css-variables.js
@@ -15,7 +15,13 @@ const toCustomPropertyString = (themeSection) =>
         .map(([key, value]) => `--${key}: ${value};`)
         .join('\n')
 
-const CssVariables = ({ colors, theme, layers, spacers, elevations }) => {
+const CssVariables = ({
+    colors = false,
+    theme = false,
+    layers = false,
+    spacers = false,
+    elevations = false,
+}) => {
     const allowedProps = { colors, theme, layers, spacers, elevations }
     const variables = Object.keys(allowedProps)
         // Filter all props that are false
@@ -36,14 +42,6 @@ const CssVariables = ({ colors, theme, layers, spacers, elevations }) => {
     )
 }
 
-CssVariables.defaultProps = {
-    colors: false,
-    theme: false,
-    layers: false,
-    spacers: false,
-    elevations: false,
-}
-
 CssVariables.propTypes = {
     colors: PropTypes.bool,
     elevations: PropTypes.bool,