refactor(react-18): replace remaining defaultProps manually

components/calendar/src/stories/calendar-story-wrapper.js

@@ -1,7 +1,6 @@
 import { constants } from '@dhis2/multi-calendar-dates'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { Calendar } from '../calendar/calendar.js'
 
 const { calendars, numberingSystems } = constants
 export const CalendarStoryWrapper = (props) => {

components/file-input/src/file-input-field-with-list/file-input-field-with-list.js

@@ -2,7 +2,6 @@ import { sharedPropTypes } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { FileInputField } from '../file-input-field/index.js'
-import i18n from '../locales/index.js'
 import { FileListItemWithRemove } from './file-list-item-with-remove.js'
 
 // TODO: i18n

components/file-input/src/file-input-field-with-list/file-input-field-with-list.prod.stories.js

@@ -24,7 +24,11 @@ export default {
     parameters: { docs: { description: { component: description } } },
     args: {
         // Handle default props bug (see Transfer stories)
-        ...FileInputFieldWithList.defaultProps,
+        dataTest: 'dhis2-uiwidgets-fileinputfieldwithlist',
+        files: [],
+        buttonLabel: 'Upload a file',
+        placeholder: 'No file uploaded yet',
+        removeText: 'Remove',
         multiple: true,
         onChange: onChange,
         name: 'uploadName',

components/file-input/src/file-input-field/file-input-field.prod.stories.js

@@ -22,7 +22,9 @@ export default {
     // Default args:
     args: {
         // Handle default values (see comment in Transfer.js)
-        ...FileInputField.defaultProps,
+        accept: '*',
+        dataTest: 'dhis2-uiwidgets-fileinputfield',
+        placeholder: 'No file uploaded yet',
         onChange: onChange,
         name: 'uploadName',
         label: 'Upload something',

components/layer/src/layer.prod.stories.js

@@ -33,7 +33,11 @@ export default {
         },
     },
     // Handle weird treatment of non-literal defaultProps (see Transfer.stories)
-    args: { ...Layer.defaultProps },
+    args: {
+        position: 'fixed',
+        dataTest: 'dhis2-uicore-layer',
+        level: 'auto',
+    },
 }
 
 const Template = (args) => (

components/pagination/src/__tests__/page-summary.test.js

@@ -1,12 +1,12 @@
 import { shallow } from 'enzyme'
 import React from 'react'
+import { getDefaultPageSummaryText } from '../get-default-page-summary-text.js'
 import { PageSummary } from '../page-summary.js'
-import { Pagination } from '../pagination.js'
 
 describe('<PageSummary />', () => {
     const props = {
         dataTest: 'test',
-        pageSummaryText: Pagination.defaultProps.pageSummaryText,
+        pageSummaryText: getDefaultPageSummaryText,
     }
 
     it('renders without errors', () => {

components/popover/src/popover.prod.stories.js

@@ -37,7 +37,13 @@ export default {
         },
     },
     // Handles weird treatment of non-literal args (`elevation: elevations.e200`)
-    args: { ...Popover.defaultProps },
+    args: {
+        arrow: true,
+        dataTest: 'dhis2-uicore-popover',
+        elevation: elevations.e200,
+        maxWidth: 360,
+        placement: 'top',
+    },
     argTypes: {
         reference: { ...sharedPropTypes.popperReferenceArgType },
         placement: { ...sharedPropTypes.popperPlacementArgType },

components/select/src/multi-select-field/multi-select-field.js

@@ -3,7 +3,6 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
-import i18n from '../locales/index.js'
 import { MultiSelect } from '../multi-select/index.js'
 
 // TODO: translate

components/select/src/multi-select-field/multi-select-field.prod.stories.js

@@ -39,7 +39,13 @@ export default {
     // default args for stories
     args: {
         // Fix default prop issues - causes 'i18n is not defined' error
-        ...MultiSelectField.defaultProps,
+        dataTest: 'dhis2-uiwidgets-multiselectfield',
+        clearText: 'Clear',
+        empty: 'No data found',
+        filterPlaceholder: 'Type to filter options',
+        loadingText: 'Loading options',
+        noMatchText: 'No options found',
+
         label: 'Default label',
         selected: ['1'],
         children: options,

components/select/src/single-select-field/single-select-field.js

@@ -3,7 +3,6 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
-import i18n from '../locales/index.js'
 import { SingleSelect } from '../single-select/index.js'
 
 // TODO: translate

components/select/src/single-select-field/single-select-field.prod.stories.js

@@ -39,7 +39,15 @@ export default {
     // default args for stories
     args: {
         // Fix default prop issues - causes 'i18n is not defined' error
-        ...SingleSelectField.defaultProps,
+        dataTest: 'dhis2-uiwidgets-singleselectfield',
+        selected: '',
+
+        clearText: 'Clear',
+        empty: 'No data found',
+        filterPlaceholder: 'Type to filter options',
+        loadingText: 'Loading options',
+        noMatchText: 'No options found',
+
         label: 'Default label',
         children: options,
         onChange: onChange,

components/transfer/src/transfer.prod.stories.js

@@ -150,7 +150,14 @@ export default {
     },
     // Default args:
     args: {
-        ...Transfer.defaultProps,
+        dataTest: 'dhis2-uicore-transfer',
+        height: '240px',
+        initialSearchTerm: '',
+        initialSearchTermPicked: '',
+        maxSelections: Infinity,
+        optionsWidth: '320px',
+        selected: [],
+        selectedWidth: '320px',
         options: options,
     },
 }

docs/src/components/DemoComponent.jsx

@@ -3,7 +3,7 @@ import React, { useRef } from 'react'
 import { DEMO_URL } from '../constants.js'
 import styles from './DemoComponent.module.css'
 
-export const Demo = ({ path, args, height }) => {
+export const Demo = ({ path, args = '', height = '100px' }) => {
     const iframeRef = useRef(null)
 
     const handleReload = () => {
@@ -73,8 +73,3 @@ Demo.propTypes = {
     args: PropTypes.string,
     height: PropTypes.string,
 }
-
-Demo.defaultProps = {
-    args: '',
-    height: '100px',
-}