From 1bb0f9d42077bc204923ecd502225c5fa5da3c3a Mon Sep 17 00:00:00 2001 From: Viktor Varland Date: Tue, 10 Mar 2020 09:10:38 +0100 Subject: [PATCH] feat(constants): move and expose the common proptypes --- packages/constants/package.json | 3 + packages/constants/src/colors.js | 79 +++++++++ packages/constants/src/elevations.js | 10 ++ packages/constants/src/index.js | 167 +----------------- packages/constants/src/layers.js | 9 + packages/constants/src/shared-prop-types.js | 93 ++++++++++ packages/constants/src/spacers.js | 42 +++++ packages/constants/src/theme.js | 41 +++++ packages/core/src/Button/Button.js | 12 +- packages/core/src/Checkbox/Checkbox.js | 9 +- .../core/src/CircularLoader/CircularLoader.js | 7 +- .../core/src/DropdownButton/DropdownButton.js | 12 +- packages/core/src/FileInput/FileInput.js | 14 +- packages/core/src/Help/Help.js | 9 +- packages/core/src/Input/Input.js | 10 +- packages/core/src/Modal/Modal.js | 8 +- packages/core/src/Modal/ModalCard.js | 10 +- .../core/src/MultiSelect/FilterableMenu.js | 4 +- packages/core/src/MultiSelect/Input.js | 5 +- packages/core/src/MultiSelect/Menu.js | 4 +- packages/core/src/MultiSelect/MultiSelect.js | 11 +- .../core/src/MultiSelect/SelectionList.js | 4 +- packages/core/src/Popover/Popover.js | 11 +- packages/core/src/Popper/Popper.js | 9 +- packages/core/src/Radio/Radio.js | 9 +- packages/core/src/ScreenCover/ScreenCover.js | 7 +- packages/core/src/Select/FilterableMenu.js | 9 +- packages/core/src/Select/InputWrapper.js | 9 +- packages/core/src/Select/Select.js | 16 +- .../core/src/SingleSelect/FilterableMenu.js | 4 +- packages/core/src/SingleSelect/Input.js | 5 +- packages/core/src/SingleSelect/Menu.js | 4 +- packages/core/src/SingleSelect/Selection.js | 5 +- .../core/src/SingleSelect/SingleSelect.js | 12 +- packages/core/src/SplitButton/SplitButton.js | 14 +- packages/core/src/Switch/Switch.js | 9 +- packages/core/src/TextArea/TextArea.js | 8 +- packages/core/src/ToggleGroup/ToggleGroup.js | 8 +- .../src/CheckboxField/CheckboxField.js | 12 +- .../src/FileInputField/FileInputField.js | 21 +-- .../FileInputFieldWithList.js | 21 +-- packages/widgets/src/InputField/InputField.js | 12 +- .../src/MultiSelectField/MultiSelectField.js | 21 +-- .../SingleSelectField/SingleSelectField.js | 12 +- .../widgets/src/SwitchField/SwitchField.js | 12 +- .../src/TextAreaField/TextAreaField.js | 12 +- .../src/ToggleGroupField/ToggleGroupField.js | 12 +- 47 files changed, 435 insertions(+), 402 deletions(-) create mode 100644 packages/constants/src/colors.js create mode 100644 packages/constants/src/elevations.js create mode 100644 packages/constants/src/layers.js create mode 100644 packages/constants/src/shared-prop-types.js create mode 100644 packages/constants/src/spacers.js create mode 100644 packages/constants/src/theme.js diff --git a/packages/constants/package.json b/packages/constants/package.json index 3a9feb770e..bd30d9fd57 100644 --- a/packages/constants/package.json +++ b/packages/constants/package.json @@ -18,6 +18,9 @@ "scripts": { "build": "d2-app-scripts build" }, + "dependencies": { + "@dhis2/prop-types": "^1.5.0" + }, "files": [ "build" ] diff --git a/packages/constants/src/colors.js b/packages/constants/src/colors.js new file mode 100644 index 0000000000..eeb60e815c --- /dev/null +++ b/packages/constants/src/colors.js @@ -0,0 +1,79 @@ +/** + * @module constants/colors + * @desc DHIS2 color values + */ +export const colors = { + /*blue*/ + blue900: '#093371', + blue800: '#0d47a1', + blue700: '#1565c0', + blue600: '#147cd7', + blue500: '#2196f3', + blue400: '#42a5f5', + blue300: '#90caf9', + blue200: '#c5e3fc', + blue100: '#e3f2fd', + blue050: '#f5fbff', + + /*teal*/ + teal900: '#00332b', + teal800: '#004d40', + teal700: '#00695c', + teal600: '#00796b', + teal500: '#00897b', + teal400: '#009688', + teal300: '#4db6ac', + teal200: '#b2dfdb', + teal100: '#e0f2f1', + teal050: '#f1f9f9', + + /*red*/ + red900: '#330202', + red800: '#891515', + red700: '#b71c1c', + red600: '#c62828', + red500: '#d32f2f', + red400: '#f44336', + red300: '#e57373', + red200: '#ffcdd2', + red100: '#ffe5e8', + red050: '#fff5f6', + + /*yellow*/ + yellow900: '#6f3205', + yellow800: '#bb460d', + yellow700: '#e56408', + yellow600: '#ff8302', + yellow500: '#ff9302', + yellow400: '#ffa902', + yellow300: '#ffc324', + yellow200: '#ffe082', + yellow100: '#ffecb3', + yellow050: '#fff8e1', + + /*green*/ + green900: '#103713', + green800: '#1b5e20', + green700: '#2e7d32', + green600: '#388e3c', + green500: '#43a047', + green400: '#4caf50', + green300: '#a5d6a7', + green200: '#c8e6c9', + green100: '#e8f5e9', + green050: '#f4fbf4', + + /*grey*/ + grey900: '#212934', + grey800: '#404b5a', + grey700: '#4a5768', + grey600: '#6e7a8a', + grey500: '#a0adba', + grey400: '#d5dde5', + grey300: '#e8edf2', + grey200: '#f3f5f7', + grey100: '#f8f9fa', + grey050: '#fbfcfd', + + white: '#ffffff', +} diff --git a/packages/constants/src/elevations.js b/packages/constants/src/elevations.js new file mode 100644 index 0000000000..dc985ea28e --- /dev/null +++ b/packages/constants/src/elevations.js @@ -0,0 +1,10 @@ +/** + * @module constants/elevations + * @desc DHIS2 elevation definitions + */ +export const elevations = { + e100: '0 0 1px 0 rgba(64,75,90,0.20), 0 2px 1px 0 rgba(64,75,90,0.28)', + e200: '0 0 1px 0 rgba(64,75,90,0.29), 0 3px 8px -2px rgba(64,75,90,0.30)', + e300: '0 0 1px 0 rgba(64,75,90,0.30), 0 8px 18px -4px rgba(64,75,90,0.28)', + e400: '0 0 1px 0 rgba(64,75,90,0.30), 0 14px 28px -6px rgba(64,75,90,0.30)', +} diff --git a/packages/constants/src/index.js b/packages/constants/src/index.js index 4fa4908206..2227e75110 100644 --- a/packages/constants/src/index.js +++ b/packages/constants/src/index.js @@ -1,162 +1,7 @@ -export const colors = { - /* colors */ +export * from './colors.js' +export * from './theme.js' +export * from './layers.js' +export * from './spacers.js' +export * from './elevations.js' - /*blue*/ - blue900: '#093371', - blue800: '#0d47a1', - blue700: '#1565c0', - blue600: '#147cd7', - blue500: '#2196f3', - blue400: '#42a5f5', - blue300: '#90caf9', - blue200: '#c5e3fc', - blue100: '#e3f2fd', - blue050: '#f5fbff', - - /*teal*/ - teal900: '#00332b', - teal800: '#004d40', - teal700: '#00695c', - teal600: '#00796b', - teal500: '#00897b', - teal400: '#009688', - teal300: '#4db6ac', - teal200: '#b2dfdb', - teal100: '#e0f2f1', - teal050: '#f1f9f9', - - /*red*/ - red900: '#330202', - red800: '#891515', - red700: '#b71c1c', - red600: '#c62828', - red500: '#d32f2f', - red400: '#f44336', - red300: '#e57373', - red200: '#ffcdd2', - red100: '#ffe5e8', - red050: '#fff5f6', - - /*yellow*/ - yellow900: '#6f3205', - yellow800: '#bb460d', - yellow700: '#e56408', - yellow600: '#ff8302', - yellow500: '#ff9302', - yellow400: '#ffa902', - yellow300: '#ffc324', - yellow200: '#ffe082', - yellow100: '#ffecb3', - yellow050: '#fff8e1', - - /*green*/ - green900: '#103713', - green800: '#1b5e20', - green700: '#2e7d32', - green600: '#388e3c', - green500: '#43a047', - green400: '#4caf50', - green300: '#a5d6a7', - green200: '#c8e6c9', - green100: '#e8f5e9', - green050: '#f4fbf4', - - /*grey*/ - grey900: '#212934', - grey800: '#404b5a', - grey700: '#4a5768', - grey600: '#6e7a8a', - grey500: '#a0adba', - grey400: '#d5dde5', - grey300: '#e8edf2', - grey200: '#f3f5f7', - grey100: '#f8f9fa', - grey050: '#fbfcfd', - - white: '#ffffff', -} - -export const theme = { - /* theme */ - fonts: 'Roboto, sans-serif', - - /*primary*/ - primary900: colors.blue900, - primary800: colors.blue800, - primary700: colors.blue700, - primary600: colors.blue600, - primary500: colors.blue500, - primary400: colors.blue400, - primary300: colors.blue300, - primary200: colors.blue200, - primary100: colors.blue100, - primary050: colors.blue050, - - /*secondary*/ - secondary900: colors.teal900, - secondary800: colors.teal800, - secondary700: colors.teal700, - secondary600: colors.teal600, - secondary500: colors.teal500, - secondary400: colors.teal400, - secondary300: colors.teal300, - secondary200: colors.teal200, - secondary100: colors.teal100, - secondary050: colors.teal050, - - /*status*/ - default: colors.grey700, - error: colors.red500, - valid: colors.blue600, - warning: colors.yellow500, - disabled: colors.grey600, -} - -export const layers = { - applicationTop: 2000, - blocking: 3000, - alert: 9999, -} - -export const spacersNum = { - dp4: 4, - dp8: 8, - dp12: 12, - dp16: 16, - dp24: 24, - dp32: 32, - dp48: 48, - dp64: 64, - dp96: 96, - dp128: 128, - dp192: 192, - dp256: 256, - dp384: 384, - dp512: 512, - dp640: 640, -} - -export const spacers = { - dp4: `${spacersNum.dp4}px`, - dp8: `${spacersNum.dp8}px`, - dp12: `${spacersNum.dp12}px`, - dp16: `${spacersNum.dp16}px`, - dp24: `${spacersNum.dp24}px`, - dp32: `${spacersNum.dp32}px`, - dp48: `${spacersNum.dp48}px`, - dp64: `${spacersNum.dp64}px`, - dp96: `${spacersNum.dp96}px`, - dp128: `${spacersNum.dp128}px`, - dp192: `${spacersNum.dp192}px`, - dp256: `${spacersNum.dp256}px`, - dp384: `${spacersNum.dp384}px`, - dp512: `${spacersNum.dp512}px`, - dp640: `${spacersNum.dp640}px`, -} - -export const elevations = { - e100: '0 0 1px 0 rgba(64,75,90,0.20), 0 2px 1px 0 rgba(64,75,90,0.28)', - e200: '0 0 1px 0 rgba(64,75,90,0.29), 0 3px 8px -2px rgba(64,75,90,0.30)', - e300: '0 0 1px 0 rgba(64,75,90,0.30), 0 8px 18px -4px rgba(64,75,90,0.28)', - e400: '0 0 1px 0 rgba(64,75,90,0.30), 0 14px 28px -6px rgba(64,75,90,0.30)', -} +export * as sharedPropTypes from './shared-prop-types.js' diff --git a/packages/constants/src/layers.js b/packages/constants/src/layers.js new file mode 100644 index 0000000000..a016b36cf7 --- /dev/null +++ b/packages/constants/src/layers.js @@ -0,0 +1,9 @@ +/** + * @module constants/layers + * @desc DHIS2 application layers + */ +export const layers = { + applicationTop: 2000, + blocking: 3000, + alert: 9999, +} diff --git a/packages/constants/src/shared-prop-types.js b/packages/constants/src/shared-prop-types.js new file mode 100644 index 0000000000..f8a948214c --- /dev/null +++ b/packages/constants/src/shared-prop-types.js @@ -0,0 +1,93 @@ +import propTypes from '@dhis2/prop-types' +;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 + +/** + * @module constants/shared-prop-types + * @desc Shared propType definitions for UI components + */ + +/** + * Status propType + * @return {PropType} Mutually exclusive status: valid/warning/error + */ +export const statusPropType = propTypes.mutuallyExclusive( + ['valid', 'warning', 'error'], + propTypes.bool +) + +/** + * Button variant propType + * @return {PropType} Mutually exclusive variants: + * primary/secondary/destructive + */ +export const buttonVariantPropType = propTypes.mutuallyExclusive( + ['primary', 'secondary', 'destructive'], + propTypes.bool +) + +/** + * Size variant propType + * @return {PropType} Mutually exclusive variants: + * small/large + */ +export const sizePropType = propTypes.mutuallyExclusive( + ['small', 'large'], + propTypes.bool +) + +/** + * SingleSelect selected item propType + * @return {PropType} Object with props `label` and `value`. + */ +export const singleSelectedPropType = propTypes.shape({ + label: propTypes.string, + value: propTypes.string, +}) + +/** + * SingleSelect selected item propType + * @return {Array} Array of Objects with props `label` and `value`. + */ +export const multiSelectedPropType = propTypes.arrayOf(singleSelectedPropType) + +/** + * Inside alignment props + * @return {PropType} PropType that validates the inside alignment. + */ +export const insideAlignmentPropType = propTypes.oneOf([ + 'top', + 'middle', + 'bottom', +]) + +/** + * Placement properties against reference element + * @return {PropType} PropType that validates placements. + */ +export const referencePlacementPropType = propTypes.oneOf([ + 'auto', + 'auto-start', + 'auto-end', + 'top', + 'top-start', + 'top-end', + 'bottom', // will be used as default + 'bottom-start', + 'bottom-end', + 'right', + 'right-start', + 'right-end', + 'left', + 'left-start', + 'left-end', +]) + +/** + * Either a functional element or an instance of an Element + * @return {PropType} Validate that prop is either a function or an + * instance of an Element. + */ +export const elementRefPropType = propTypes.oneOfType([ + propTypes.func, + propTypes.shape({ current: propTypes.instanceOf(Element) }), +]) diff --git a/packages/constants/src/spacers.js b/packages/constants/src/spacers.js new file mode 100644 index 0000000000..57b2ee7d9b --- /dev/null +++ b/packages/constants/src/spacers.js @@ -0,0 +1,42 @@ +/** + * @module constants/spacers + * @desc DHIS2 spacer constants + */ + +/** Number values of the spacer definitions */ +export const spacersNum = { + dp4: 4, + dp8: 8, + dp12: 12, + dp16: 16, + dp24: 24, + dp32: 32, + dp48: 48, + dp64: 64, + dp96: 96, + dp128: 128, + dp192: 192, + dp256: 256, + dp384: 384, + dp512: 512, + dp640: 640, +} + +/** Pixel values of the spacer definitions */ +export const spacers = { + dp4: `${spacersNum.dp4}px`, + dp8: `${spacersNum.dp8}px`, + dp12: `${spacersNum.dp12}px`, + dp16: `${spacersNum.dp16}px`, + dp24: `${spacersNum.dp24}px`, + dp32: `${spacersNum.dp32}px`, + dp48: `${spacersNum.dp48}px`, + dp64: `${spacersNum.dp64}px`, + dp96: `${spacersNum.dp96}px`, + dp128: `${spacersNum.dp128}px`, + dp192: `${spacersNum.dp192}px`, + dp256: `${spacersNum.dp256}px`, + dp384: `${spacersNum.dp384}px`, + dp512: `${spacersNum.dp512}px`, + dp640: `${spacersNum.dp640}px`, +} diff --git a/packages/constants/src/theme.js b/packages/constants/src/theme.js new file mode 100644 index 0000000000..9f3acce9e4 --- /dev/null +++ b/packages/constants/src/theme.js @@ -0,0 +1,41 @@ +import { colors } from './colors.js' + +/** + * @module constants/theme + * @desc DHIS2 theme colors + */ +export const theme = { + /* theme */ + fonts: 'Roboto, sans-serif', + + /*primary*/ + primary900: colors.blue900, + primary800: colors.blue800, + primary700: colors.blue700, + primary600: colors.blue600, + primary500: colors.blue500, + primary400: colors.blue400, + primary300: colors.blue300, + primary200: colors.blue200, + primary100: colors.blue100, + primary050: colors.blue050, + + /*secondary*/ + secondary900: colors.teal900, + secondary800: colors.teal800, + secondary700: colors.teal700, + secondary600: colors.teal600, + secondary500: colors.teal500, + secondary400: colors.teal400, + secondary300: colors.teal300, + secondary200: colors.teal200, + secondary100: colors.teal100, + secondary050: colors.teal050, + + /*status*/ + default: colors.grey700, + error: colors.red500, + valid: colors.blue600, + warning: colors.yellow500, + disabled: colors.grey600, +} diff --git a/packages/core/src/Button/Button.js b/packages/core/src/Button/Button.js index 993311c2eb..1f922a5b59 100644 --- a/packages/core/src/Button/Button.js +++ b/packages/core/src/Button/Button.js @@ -2,7 +2,7 @@ import cx from 'classnames' import propTypes from '@dhis2/prop-types' import React, { Component, createRef } from 'react' -import { buttonVariantPropType, sizePropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import styles from './Button.styles.js' /** @@ -137,15 +137,15 @@ Button.propTypes = { children: propTypes.node, className: propTypes.string, dataTest: propTypes.string, - destructive: buttonVariantPropType, + destructive: sharedPropTypes.buttonVariantPropType, disabled: propTypes.bool, icon: propTypes.element, initialFocus: propTypes.bool, - large: sizePropType, + large: sharedPropTypes.sizePropType, name: propTypes.string, - primary: buttonVariantPropType, - secondary: buttonVariantPropType, - small: sizePropType, + primary: sharedPropTypes.buttonVariantPropType, + secondary: sharedPropTypes.buttonVariantPropType, + small: sharedPropTypes.sizePropType, tabIndex: propTypes.string, type: propTypes.oneOf(['submit', 'reset', 'button']), value: propTypes.string, diff --git a/packages/core/src/Checkbox/Checkbox.js b/packages/core/src/Checkbox/Checkbox.js index 4d923fb698..a631efc27c 100644 --- a/packages/core/src/Checkbox/Checkbox.js +++ b/packages/core/src/Checkbox/Checkbox.js @@ -2,9 +2,8 @@ import cx from 'classnames' import propTypes from '@dhis2/prop-types' import React, { Component, createRef } from 'react' -import { statusPropType } from '../common-prop-types.js' import { Regular, Dense } from '@dhis2/ui-icons' -import { colors, theme } from '@dhis2/ui-constants' +import { colors, theme, sharedPropTypes } from '@dhis2/ui-constants' ;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 /** @@ -217,15 +216,15 @@ Checkbox.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, indeterminate: uniqueOnStatePropType, initialFocus: propTypes.bool, label: propTypes.node, name: propTypes.string, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/CircularLoader/CircularLoader.js b/packages/core/src/CircularLoader/CircularLoader.js index 44a7f3e24a..1c524b454a 100644 --- a/packages/core/src/CircularLoader/CircularLoader.js +++ b/packages/core/src/CircularLoader/CircularLoader.js @@ -2,8 +2,7 @@ import cx from 'classnames' import propTypes from '@dhis2/prop-types' import React from 'react' -import { sizePropType } from '../common-prop-types.js' -import { theme, spacers } from '@dhis2/ui-constants' +import { theme, spacers, sharedPropTypes } from '@dhis2/ui-constants' ;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 /** @@ -105,8 +104,8 @@ CircularLoader.defaultProps = { CircularLoader.propTypes = { className: propTypes.string, dataTest: propTypes.string, - large: sizePropType, - small: sizePropType, + large: sharedPropTypes.sizePropType, + small: sharedPropTypes.sizePropType, } export { CircularLoader } diff --git a/packages/core/src/DropdownButton/DropdownButton.js b/packages/core/src/DropdownButton/DropdownButton.js index 42e474f23b..a0d69e755c 100644 --- a/packages/core/src/DropdownButton/DropdownButton.js +++ b/packages/core/src/DropdownButton/DropdownButton.js @@ -9,7 +9,7 @@ import { ArrowDown, ArrowUp } from '@dhis2/ui-icons' import { Backdrop } from '../Backdrop/Backdrop.js' import { Button } from '../Button/Button.js' import { Popper } from '../Popper/Popper.js' -import { buttonVariantPropType, sizePropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' const arrow = resolve` margin-left: ${spacers.dp12}; @@ -153,15 +153,15 @@ DropdownButton.propTypes = { className: propTypes.string, component: propTypes.element, dataTest: propTypes.string, - destructive: buttonVariantPropType, + destructive: sharedPropTypes.buttonVariantPropType, disabled: propTypes.bool, icon: propTypes.element, initialFocus: propTypes.bool, - large: sizePropType, + large: sharedPropTypes.sizePropType, name: propTypes.string, - primary: buttonVariantPropType, - secondary: buttonVariantPropType, - small: sizePropType, + primary: sharedPropTypes.buttonVariantPropType, + secondary: sharedPropTypes.buttonVariantPropType, + small: sharedPropTypes.sizePropType, tabIndex: propTypes.string, type: propTypes.oneOf(['submit', 'reset', 'button']), value: propTypes.string, diff --git a/packages/core/src/FileInput/FileInput.js b/packages/core/src/FileInput/FileInput.js index b66a0063cc..3a621147d4 100644 --- a/packages/core/src/FileInput/FileInput.js +++ b/packages/core/src/FileInput/FileInput.js @@ -3,11 +3,9 @@ import cx from 'classnames' import propTypes from '@dhis2/prop-types' -import { spacers } from '@dhis2/ui-constants' +import { spacers, sharedPropTypes } from '@dhis2/ui-constants' import { Upload, StatusIcon } from '@dhis2/ui-icons' -import { statusPropType, sizePropType } from '../common-prop-types.js' - import { Button } from '../Button/Button.js' ;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 @@ -159,15 +157,15 @@ FileInput.propTypes = { className: propTypes.string, dataTest: propTypes.string, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, initialFocus: propTypes.bool, - large: sizePropType, + large: sharedPropTypes.sizePropType, multiple: propTypes.bool, name: propTypes.string, - small: sizePropType, + small: sharedPropTypes.sizePropType, tabIndex: propTypes.string, - valid: statusPropType, - warning: statusPropType, + valid: sharedPropTypes.statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/Help/Help.js b/packages/core/src/Help/Help.js index 69c71a0c27..4906675047 100644 --- a/packages/core/src/Help/Help.js +++ b/packages/core/src/Help/Help.js @@ -2,8 +2,7 @@ import cx from 'classnames' import propTypes from '@dhis2/prop-types' import React from 'react' -import { statusPropType } from '../common-prop-types.js' -import { spacers, theme } from '@dhis2/ui-constants' +import { spacers, theme, sharedPropTypes } from '@dhis2/ui-constants' ;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 /** @@ -69,9 +68,9 @@ Help.propTypes = { children: propTypes.string, className: propTypes.string, dataTest: propTypes.string, - error: statusPropType, - valid: statusPropType, - warning: statusPropType, + error: sharedPropTypes.statusPropType, + valid: sharedPropTypes.statusPropType, + warning: sharedPropTypes.statusPropType, } export { Help } diff --git a/packages/core/src/Input/Input.js b/packages/core/src/Input/Input.js index e2880ba5b7..7d9459c52b 100644 --- a/packages/core/src/Input/Input.js +++ b/packages/core/src/Input/Input.js @@ -3,11 +3,9 @@ import css from 'styled-jsx/css' import cx from 'classnames' import propTypes from '@dhis2/prop-types' -import { theme, colors, spacers } from '@dhis2/ui-constants' +import { theme, colors, spacers, sharedPropTypes } from '@dhis2/ui-constants' import { StatusIcon } from '@dhis2/ui-icons' -import { statusPropType } from '../common-prop-types.js' - const styles = css` .input { display: flex; @@ -216,7 +214,7 @@ Input.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, initialFocus: propTypes.bool, loading: propTypes.bool, name: propTypes.string, @@ -238,9 +236,9 @@ Input.propTypes = { 'time', 'search', ]), - valid: statusPropType, + valid: sharedPropTypes.statusPropType, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/Modal/Modal.js b/packages/core/src/Modal/Modal.js index 229f14d068..ec45f0552e 100644 --- a/packages/core/src/Modal/Modal.js +++ b/packages/core/src/Modal/Modal.js @@ -3,7 +3,7 @@ import React from 'react' import propTypes from '@dhis2/prop-types' import { ScreenCover } from '../ScreenCover/ScreenCover.js' -import { insideAlignmentPropType, sizePropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { ModalCard } from './ModalCard.js' ;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 @@ -81,9 +81,9 @@ Modal.propTypes = { children: propTypes.node, className: propTypes.string, dataTest: propTypes.string, - large: sizePropType, - position: insideAlignmentPropType, - small: sizePropType, + large: sharedPropTypes.sizePropType, + position: sharedPropTypes.insideAlignmentPropType, + small: sharedPropTypes.sizePropType, // Callback used when clicking on the screen cover onClose: propTypes.func, } diff --git a/packages/core/src/Modal/ModalCard.js b/packages/core/src/Modal/ModalCard.js index 6e5ff9994f..6bc901e023 100644 --- a/packages/core/src/Modal/ModalCard.js +++ b/packages/core/src/Modal/ModalCard.js @@ -3,11 +3,9 @@ import cx from 'classnames' import { resolve } from 'styled-jsx/css' import propTypes from '@dhis2/prop-types' -import { spacersNum } from '@dhis2/ui-constants' +import { spacersNum, sharedPropTypes } from '@dhis2/ui-constants' import { Card } from '../Card/Card.js' -import { insideAlignmentPropType } from '../common-prop-types.js' -import { sizePropType } from '../common-prop-types.js' const cardBoxStyle = resolve` .modal-card { @@ -67,7 +65,7 @@ export const ModalCard = ({ children, small, large, position }) => ( */ ModalCard.propTypes = { children: propTypes.node.isRequired, - position: insideAlignmentPropType.isRequired, - large: sizePropType, - small: sizePropType, + position: sharedPropTypes.insideAlignmentPropType.isRequired, + large: sharedPropTypes.sizePropType, + small: sharedPropTypes.sizePropType, } diff --git a/packages/core/src/MultiSelect/FilterableMenu.js b/packages/core/src/MultiSelect/FilterableMenu.js index 95b45d6009..dff8df3445 100644 --- a/packages/core/src/MultiSelect/FilterableMenu.js +++ b/packages/core/src/MultiSelect/FilterableMenu.js @@ -1,6 +1,6 @@ import React from 'react' import propTypes from '@dhis2/prop-types' -import { multiSelectedPropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { FilterableMenu as CommonFilterableMenu } from '../Select/FilterableMenu.js' import { Menu } from './Menu.js' @@ -37,7 +37,7 @@ FilterableMenu.propTypes = { handleFocusInput: propTypes.func, options: propTypes.node, placeholder: propTypes.string, - selected: multiSelectedPropType, + selected: sharedPropTypes.multiSelectedPropType, onChange: propTypes.func, } diff --git a/packages/core/src/MultiSelect/Input.js b/packages/core/src/MultiSelect/Input.js index 3c562a8d78..7b6480a208 100644 --- a/packages/core/src/MultiSelect/Input.js +++ b/packages/core/src/MultiSelect/Input.js @@ -1,8 +1,7 @@ import React from 'react' import propTypes from '@dhis2/prop-types' import cx from 'classnames' -import { multiSelectedPropType } from '../common-prop-types.js' -import { colors } from '@dhis2/ui-constants' +import { colors, sharedPropTypes } from '@dhis2/ui-constants' import { SelectionList } from './SelectionList.js' import { InputPlaceholder } from '../Select/InputPlaceholder.js' import { InputPrefix } from '../Select/InputPrefix.js' @@ -102,7 +101,7 @@ Input.propTypes = { options: propTypes.node, placeholder: propTypes.string, prefix: propTypes.string, - selected: multiSelectedPropType, + selected: sharedPropTypes.multiSelectedPropType, onChange: propTypes.func, } diff --git a/packages/core/src/MultiSelect/Menu.js b/packages/core/src/MultiSelect/Menu.js index 381615940a..efb3dae4f7 100644 --- a/packages/core/src/MultiSelect/Menu.js +++ b/packages/core/src/MultiSelect/Menu.js @@ -1,6 +1,6 @@ import React from 'react' import propTypes from '@dhis2/prop-types' -import { multiSelectedPropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Empty } from '../Select/Empty.js' import { filterIgnored, @@ -92,7 +92,7 @@ Menu.propTypes = { dataTest: propTypes.string.isRequired, empty: propTypes.node, options: propTypes.node, - selected: multiSelectedPropType, + selected: sharedPropTypes.multiSelectedPropType, onChange: propTypes.func, } diff --git a/packages/core/src/MultiSelect/MultiSelect.js b/packages/core/src/MultiSelect/MultiSelect.js index 115a88c052..06100c3fd7 100644 --- a/packages/core/src/MultiSelect/MultiSelect.js +++ b/packages/core/src/MultiSelect/MultiSelect.js @@ -1,9 +1,8 @@ import React from 'react' import propTypes from '@dhis2/prop-types' -import { spacers } from '@dhis2/ui-constants' +import { spacers, sharedPropTypes } from '@dhis2/ui-constants' import { StatusIcon } from '@dhis2/ui-icons' -import { multiSelectedPropType, statusPropType } from '../common-prop-types.js' import { Select } from '../Select/Select.js' import { Loading } from '../Select/Loading.js' @@ -162,7 +161,7 @@ MultiSelect.propTypes = { dense: propTypes.bool, disabled: propTypes.bool, empty: propTypes.node, - error: statusPropType, + error: sharedPropTypes.statusPropType, filterPlaceholder: propTypes.string, filterable: propTypes.bool, initialFocus: propTypes.bool, @@ -176,10 +175,10 @@ MultiSelect.propTypes = { ), placeholder: propTypes.string, prefix: propTypes.string, - selected: multiSelectedPropType, + selected: sharedPropTypes.multiSelectedPropType, tabIndex: propTypes.string, - valid: statusPropType, - warning: statusPropType, + valid: sharedPropTypes.statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/MultiSelect/SelectionList.js b/packages/core/src/MultiSelect/SelectionList.js index 4822cea12d..8ef79d8cb4 100644 --- a/packages/core/src/MultiSelect/SelectionList.js +++ b/packages/core/src/MultiSelect/SelectionList.js @@ -1,6 +1,6 @@ import React from 'react' import propTypes from '@dhis2/prop-types' -import { multiSelectedPropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Chip } from '../Chip/Chip.js' import { removeOption, findOptionChild } from '../Select/option-helpers.js' @@ -58,7 +58,7 @@ const SelectionList = ({ selected, onChange, disabled, options }) => ( SelectionList.propTypes = { disabled: propTypes.bool, options: propTypes.node, - selected: multiSelectedPropType, + selected: sharedPropTypes.multiSelectedPropType, onChange: propTypes.func, } diff --git a/packages/core/src/Popover/Popover.js b/packages/core/src/Popover/Popover.js index 4b460b0563..4f695cd277 100644 --- a/packages/core/src/Popover/Popover.js +++ b/packages/core/src/Popover/Popover.js @@ -2,12 +2,7 @@ import React from 'react' import { createPortal } from 'react-dom' import propTypes from 'prop-types' -import { colors, elevations } from '@dhis2/ui-constants' - -import { - elementRefPropType, - referencePlacementPropType, -} from '../common-prop-types.js' +import { colors, elevations, sharedPropTypes } from '@dhis2/ui-constants' import { Popper } from '../Popper/Popper.js' import { Backdrop } from '../Backdrop/Backdrop.js' @@ -86,12 +81,12 @@ Popover.defaultProps = { */ Popover.propTypes = { children: propTypes.node.isRequired, - reference: elementRefPropType.isRequired, + reference: sharedPropTypes.elementRefPropType.isRequired, arrow: propTypes.bool, className: propTypes.string, dataTest: propTypes.string, maxWidth: propTypes.number, - placement: referencePlacementPropType, + placement: sharedPropTypes.referencePlacementPropType, onBackdropClick: propTypes.func, } diff --git a/packages/core/src/Popper/Popper.js b/packages/core/src/Popper/Popper.js index 37fd17a3bd..fbe852246e 100644 --- a/packages/core/src/Popper/Popper.js +++ b/packages/core/src/Popper/Popper.js @@ -2,10 +2,7 @@ import React, { Component, createRef } from 'react' import propTypes from '@dhis2/prop-types' import { createPopper } from '@popperjs/core' -import { - elementRefPropType, - referencePlacementPropType, -} from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import * as baseModifiers from './modifiers.js' @@ -99,7 +96,7 @@ Popper.defaultProps = { // Prop names follow the names here: https://popper.js.org/docs/v2/constructors/ Popper.propTypes = { children: propTypes.node.isRequired, - reference: elementRefPropType.isRequired, + reference: sharedPropTypes.elementRefPropType.isRequired, className: propTypes.string, dataTest: propTypes.string, modifiers: propTypes.arrayOf( @@ -108,7 +105,7 @@ Popper.propTypes = { options: propTypes.object, }) ), - placement: referencePlacementPropType, + placement: sharedPropTypes.referencePlacementPropType, strategy: propTypes.oneOf(['absolute', 'fixed']), // defaults to 'absolute' onFirstUpdate: propTypes.func, } diff --git a/packages/core/src/Radio/Radio.js b/packages/core/src/Radio/Radio.js index 3c3373be88..86b8d022bb 100644 --- a/packages/core/src/Radio/Radio.js +++ b/packages/core/src/Radio/Radio.js @@ -2,9 +2,8 @@ import cx from 'classnames' import propTypes from '@dhis2/prop-types' import React, { Component, createRef } from 'react' -import { statusPropType } from '../common-prop-types.js' import { Regular, Dense } from '@dhis2/ui-icons' -import { colors, theme } from '@dhis2/ui-constants' +import { colors, theme, sharedPropTypes } from '@dhis2/ui-constants' ;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 /** @@ -195,14 +194,14 @@ Radio.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, initialFocus: propTypes.bool, label: propTypes.node, name: propTypes.string, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/ScreenCover/ScreenCover.js b/packages/core/src/ScreenCover/ScreenCover.js index 90953e8a49..62bd63e861 100644 --- a/packages/core/src/ScreenCover/ScreenCover.js +++ b/packages/core/src/ScreenCover/ScreenCover.js @@ -1,10 +1,9 @@ import React from 'react' import propTypes from '@dhis2/prop-types' -import { layers, spacers } from '@dhis2/ui-constants' +import { layers, spacers, sharedPropTypes } from '@dhis2/ui-constants' import { Backdrop } from '../Backdrop/Backdrop.js' -import { insideAlignmentPropType } from '../common-prop-types.js' const Content = ({ children, position }) => (
@@ -36,7 +35,7 @@ const Content = ({ children, position }) => ( Content.propTypes = { children: propTypes.node, - position: insideAlignmentPropType, + position: sharedPropTypes.insideAlignmentPropType, } /** @@ -80,7 +79,7 @@ ScreenCover.propTypes = { children: propTypes.node, className: propTypes.string, dataTest: propTypes.string, - position: insideAlignmentPropType, + position: sharedPropTypes.insideAlignmentPropType, onClick: propTypes.func, } diff --git a/packages/core/src/Select/FilterableMenu.js b/packages/core/src/Select/FilterableMenu.js index 00c1b5ddae..bdfa0c0b69 100644 --- a/packages/core/src/Select/FilterableMenu.js +++ b/packages/core/src/Select/FilterableMenu.js @@ -1,9 +1,6 @@ import React, { Component } from 'react' import propTypes from '@dhis2/prop-types' -import { - singleSelectedPropType, - multiSelectedPropType, -} from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { FilterInput } from '../Select/FilterInput.js' import { NoMatch } from '../Select/NoMatch.js' import { filterIgnored, checkIfValidOption } from '../Select/option-helpers.js' @@ -98,8 +95,8 @@ FilterableMenu.propTypes = { dataTest: propTypes.string.isRequired, noMatchText: propTypes.string.isRequired, selected: propTypes.oneOfType([ - singleSelectedPropType, - multiSelectedPropType, + sharedPropTypes.singleSelectedPropType, + sharedPropTypes.multiSelectedPropType, ]).isRequired, empty: propTypes.node, handleClose: propTypes.func, diff --git a/packages/core/src/Select/InputWrapper.js b/packages/core/src/Select/InputWrapper.js index 19d4a1afca..2cfaad96dd 100644 --- a/packages/core/src/Select/InputWrapper.js +++ b/packages/core/src/Select/InputWrapper.js @@ -1,9 +1,8 @@ import React from 'react' import propTypes from '@dhis2/prop-types' import cx from 'classnames' -import { statusPropType } from '../common-prop-types.js' import { ArrowDown } from './ArrowDown.js' -import { colors, theme } from '@dhis2/ui-constants' +import { colors, theme, sharedPropTypes } from '@dhis2/ui-constants' const InputWrapper = ({ dataTest, @@ -107,9 +106,9 @@ InputWrapper.propTypes = { className: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, - valid: statusPropType, - warning: statusPropType, + error: sharedPropTypes.statusPropType, + valid: sharedPropTypes.statusPropType, + warning: sharedPropTypes.statusPropType, } export { InputWrapper } diff --git a/packages/core/src/Select/Select.js b/packages/core/src/Select/Select.js index eb9152a95c..0951a2d440 100644 --- a/packages/core/src/Select/Select.js +++ b/packages/core/src/Select/Select.js @@ -1,11 +1,7 @@ import React, { Component } from 'react' import propTypes from '@dhis2/prop-types' -import { - statusPropType, - singleSelectedPropType, - multiSelectedPropType, -} from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { InputWrapper } from './InputWrapper.js' import { MenuWrapper } from './MenuWrapper.js' @@ -248,20 +244,20 @@ Select.propTypes = { input: propTypes.element.isRequired, menu: propTypes.element.isRequired, selected: propTypes.oneOfType([ - singleSelectedPropType, - multiSelectedPropType, + sharedPropTypes.singleSelectedPropType, + sharedPropTypes.multiSelectedPropType, ]).isRequired, children: propTypes.node, className: propTypes.string, dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, initialFocus: propTypes.bool, maxHeight: propTypes.string, tabIndex: propTypes.string, - valid: statusPropType, - warning: statusPropType, + valid: sharedPropTypes.statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/SingleSelect/FilterableMenu.js b/packages/core/src/SingleSelect/FilterableMenu.js index 2526fa3cc6..e383bc54de 100644 --- a/packages/core/src/SingleSelect/FilterableMenu.js +++ b/packages/core/src/SingleSelect/FilterableMenu.js @@ -1,6 +1,6 @@ import React from 'react' import propTypes from '@dhis2/prop-types' -import { singleSelectedPropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { FilterableMenu as CommonFilterableMenu } from '../Select/FilterableMenu.js' import { Menu } from './Menu.js' @@ -37,7 +37,7 @@ FilterableMenu.propTypes = { handleFocusInput: propTypes.func, options: propTypes.node, placeholder: propTypes.string, - selected: singleSelectedPropType, + selected: sharedPropTypes.singleSelectedPropType, onChange: propTypes.func, } diff --git a/packages/core/src/SingleSelect/Input.js b/packages/core/src/SingleSelect/Input.js index 8149c880b5..91542eb2d6 100644 --- a/packages/core/src/SingleSelect/Input.js +++ b/packages/core/src/SingleSelect/Input.js @@ -1,8 +1,7 @@ import React from 'react' import propTypes from '@dhis2/prop-types' import cx from 'classnames' -import { singleSelectedPropType } from '../common-prop-types.js' -import { colors } from '@dhis2/ui-constants' +import { colors, sharedPropTypes } from '@dhis2/ui-constants' import { Selection } from './Selection.js' import { InputPlaceholder } from '../Select/InputPlaceholder.js' import { InputPrefix } from '../Select/InputPrefix.js' @@ -97,7 +96,7 @@ Input.propTypes = { options: propTypes.node, placeholder: propTypes.string, prefix: propTypes.string, - selected: singleSelectedPropType, + selected: sharedPropTypes.singleSelectedPropType, onChange: propTypes.func, } diff --git a/packages/core/src/SingleSelect/Menu.js b/packages/core/src/SingleSelect/Menu.js index 7f78f97646..8a7e806f80 100644 --- a/packages/core/src/SingleSelect/Menu.js +++ b/packages/core/src/SingleSelect/Menu.js @@ -1,6 +1,6 @@ import React from 'react' import propTypes from '@dhis2/prop-types' -import { singleSelectedPropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Empty } from '../Select/Empty.js' import { filterIgnored, checkIfValidOption } from '../Select/option-helpers.js' @@ -74,7 +74,7 @@ Menu.propTypes = { handleClose: propTypes.func, handleFocusInput: propTypes.func, options: propTypes.node, - selected: singleSelectedPropType, + selected: sharedPropTypes.singleSelectedPropType, onChange: propTypes.func, } diff --git a/packages/core/src/SingleSelect/Selection.js b/packages/core/src/SingleSelect/Selection.js index dad59ecc74..af44182132 100644 --- a/packages/core/src/SingleSelect/Selection.js +++ b/packages/core/src/SingleSelect/Selection.js @@ -1,8 +1,7 @@ import React from 'react' import propTypes from '@dhis2/prop-types' import cx from 'classnames' -import { singleSelectedPropType } from '../common-prop-types.js' -import { spacers } from '@dhis2/ui-constants' +import { spacers, sharedPropTypes } from '@dhis2/ui-constants' import { findOptionChild } from '../Select/option-helpers.js' const Selection = ({ options, selected, className }) => { @@ -45,7 +44,7 @@ const Selection = ({ options, selected, className }) => { Selection.propTypes = { className: propTypes.string, options: propTypes.node, - selected: singleSelectedPropType, + selected: sharedPropTypes.singleSelectedPropType, } export { Selection } diff --git a/packages/core/src/SingleSelect/SingleSelect.js b/packages/core/src/SingleSelect/SingleSelect.js index 21e14b56af..335979d41d 100644 --- a/packages/core/src/SingleSelect/SingleSelect.js +++ b/packages/core/src/SingleSelect/SingleSelect.js @@ -2,9 +2,7 @@ import React from 'react' import propTypes from '@dhis2/prop-types' import { StatusIcon } from '@dhis2/ui-icons' -import { spacers } from '@dhis2/ui-constants' - -import { singleSelectedPropType, statusPropType } from '../common-prop-types.js' +import { spacers, sharedPropTypes } from '@dhis2/ui-constants' import { Select } from '../Select/Select.js' import { Loading } from '../Select/Loading.js' @@ -164,7 +162,7 @@ SingleSelect.propTypes = { dense: propTypes.bool, disabled: propTypes.bool, empty: propTypes.node, - error: statusPropType, + error: sharedPropTypes.statusPropType, filterPlaceholder: propTypes.string, filterable: propTypes.bool, initialFocus: propTypes.bool, @@ -178,10 +176,10 @@ SingleSelect.propTypes = { ), placeholder: propTypes.string, prefix: propTypes.string, - selected: singleSelectedPropType, + selected: sharedPropTypes.singleSelectedPropType, tabIndex: propTypes.string, - valid: statusPropType, - warning: statusPropType, + valid: sharedPropTypes.statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/SplitButton/SplitButton.js b/packages/core/src/SplitButton/SplitButton.js index 1699bb25ec..5c5dc717dc 100644 --- a/packages/core/src/SplitButton/SplitButton.js +++ b/packages/core/src/SplitButton/SplitButton.js @@ -5,9 +5,7 @@ import { createPortal } from 'react-dom' import css from 'styled-jsx/css' import { ArrowDown, ArrowUp } from '@dhis2/ui-icons' -import { spacers } from '@dhis2/ui-constants' - -import { buttonVariantPropType, sizePropType } from '../common-prop-types.js' +import { spacers, sharedPropTypes } from '@dhis2/ui-constants' import { Backdrop } from '../Backdrop/Backdrop.js' import { Button } from '../Button/Button.js' @@ -186,15 +184,15 @@ SplitButton.propTypes = { className: propTypes.string, component: propTypes.element, dataTest: propTypes.string, - destructive: buttonVariantPropType, + destructive: sharedPropTypes.buttonVariantPropType, disabled: propTypes.bool, icon: propTypes.element, initialFocus: propTypes.bool, - large: sizePropType, + large: sharedPropTypes.sizePropType, name: propTypes.string, - primary: buttonVariantPropType, - secondary: buttonVariantPropType, - small: sizePropType, + primary: sharedPropTypes.buttonVariantPropType, + secondary: sharedPropTypes.buttonVariantPropType, + small: sharedPropTypes.sizePropType, tabIndex: propTypes.string, type: propTypes.oneOf(['submit', 'reset', 'button']), value: propTypes.string, diff --git a/packages/core/src/Switch/Switch.js b/packages/core/src/Switch/Switch.js index b7624d1671..85c36236dd 100644 --- a/packages/core/src/Switch/Switch.js +++ b/packages/core/src/Switch/Switch.js @@ -2,9 +2,8 @@ import cx from 'classnames' import propTypes from '@dhis2/prop-types' import React, { Component, createRef } from 'react' -import { statusPropType } from '../common-prop-types.js' import { Regular } from '@dhis2/ui-icons' -import { colors, theme } from '@dhis2/ui-constants' +import { colors, theme, sharedPropTypes } from '@dhis2/ui-constants' ;('') // TODO: https://github.com/jsdoc/jsdoc/issues/1718 /** @@ -193,14 +192,14 @@ Switch.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, initialFocus: propTypes.bool, label: propTypes.node, name: propTypes.string, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/core/src/TextArea/TextArea.js b/packages/core/src/TextArea/TextArea.js index 0b81290a01..55cca1bea3 100644 --- a/packages/core/src/TextArea/TextArea.js +++ b/packages/core/src/TextArea/TextArea.js @@ -2,7 +2,7 @@ import propTypes from '@dhis2/prop-types' import React, { Component } from 'react' import cx from 'classnames' -import { statusPropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { StatusIcon } from '@dhis2/ui-icons' import { styles } from './TextArea.styles.js' @@ -223,7 +223,7 @@ TextArea.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, initialFocus: propTypes.bool, loading: propTypes.bool, name: propTypes.string, @@ -232,9 +232,9 @@ TextArea.propTypes = { resize: propTypes.oneOf(['none', 'both', 'horizontal', 'vertical']), rows: propTypes.number, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, width: propTypes.string, onBlur: propTypes.func, onChange: propTypes.func, diff --git a/packages/core/src/ToggleGroup/ToggleGroup.js b/packages/core/src/ToggleGroup/ToggleGroup.js index 2d1c9399df..7bb29cb27b 100644 --- a/packages/core/src/ToggleGroup/ToggleGroup.js +++ b/packages/core/src/ToggleGroup/ToggleGroup.js @@ -3,7 +3,7 @@ import propTypes from '@dhis2/prop-types' import cx from 'classnames' import { Children, cloneElement } from 'react' -import { statusPropType } from '../common-prop-types.js' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Spacer } from '../ToggleGroup/Spacer.js' /** @@ -76,14 +76,14 @@ ToggleGroup.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, name: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, value: propTypes.oneOfType([ propTypes.string, propTypes.arrayOf(propTypes.string), ]), - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onChange: propTypes.func, } diff --git a/packages/widgets/src/CheckboxField/CheckboxField.js b/packages/widgets/src/CheckboxField/CheckboxField.js index 215090d4e2..c7975b37e4 100644 --- a/packages/widgets/src/CheckboxField/CheckboxField.js +++ b/packages/widgets/src/CheckboxField/CheckboxField.js @@ -1,13 +1,9 @@ import React from 'react' import propTypes from '@dhis2/prop-types' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Field, Help, Checkbox, Required } from '@dhis2/ui-core' -const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - const AddRequired = ({ label, required, dataTest }) => ( {label} @@ -130,17 +126,17 @@ CheckboxField.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, helpText: propTypes.string, initialFocus: propTypes.bool, label: propTypes.node, name: propTypes.string, required: propTypes.bool, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/widgets/src/FileInputField/FileInputField.js b/packages/widgets/src/FileInputField/FileInputField.js index 95304370e2..3b7a485c54 100644 --- a/packages/widgets/src/FileInputField/FileInputField.js +++ b/packages/widgets/src/FileInputField/FileInputField.js @@ -1,6 +1,7 @@ import React from 'react' import propTypes from '@dhis2/prop-types' +import { sharedPropTypes } from '@dhis2/ui-constants' import { FileInput, FileList, @@ -10,16 +11,6 @@ import { Help, } from '@dhis2/ui-core' -const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - -const sizePropType = propTypes.mutuallyExclusive( - ['small', 'large'], - propTypes.bool -) - /** * @module * @param {FileInputField.PropTypes} props @@ -149,20 +140,20 @@ FileInputField.propTypes = { className: propTypes.string, dataTest: propTypes.string, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, helpText: propTypes.string, initialFocus: propTypes.bool, label: propTypes.string, - large: sizePropType, + large: sharedPropTypes.sizePropType, multiple: propTypes.bool, name: propTypes.string, placeholder: propTypes.string, required: propTypes.bool, - small: sizePropType, + small: sharedPropTypes.sizePropType, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/widgets/src/FileInputFieldWithList/FileInputFieldWithList.js b/packages/widgets/src/FileInputFieldWithList/FileInputFieldWithList.js index 8708ffdd84..eea60e69ef 100644 --- a/packages/widgets/src/FileInputFieldWithList/FileInputFieldWithList.js +++ b/packages/widgets/src/FileInputFieldWithList/FileInputFieldWithList.js @@ -1,20 +1,11 @@ import React, { Component } from 'react' import propTypes from '@dhis2/prop-types' +import { sharedPropTypes } from '@dhis2/ui-constants' import { FileInputField } from '../FileInputField/FileInputField.js' import { FileListItemWithRemove } from './FileListItemWithRemove.js' -const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - -const sizePropType = propTypes.mutuallyExclusive( - ['small', 'large'], - propTypes.bool -) - /** * @module * @param {FileInputFieldWithList.PropTypes} props @@ -184,22 +175,22 @@ FileInputFieldWithList.propTypes = { className: propTypes.string, dataTest: propTypes.string, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, files: propTypes.arrayOf(propTypes.instanceOf(File)), helpText: propTypes.string, initialFocus: propTypes.bool, label: propTypes.string, - large: sizePropType, + large: sharedPropTypes.sizePropType, multiple: propTypes.bool, name: propTypes.string, placeholder: propTypes.string, removeText: propTypes.string, required: propTypes.bool, - small: sizePropType, + small: sharedPropTypes.sizePropType, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onFocus: propTypes.func, } diff --git a/packages/widgets/src/InputField/InputField.js b/packages/widgets/src/InputField/InputField.js index c6bd53bf8b..11e94580c1 100644 --- a/packages/widgets/src/InputField/InputField.js +++ b/packages/widgets/src/InputField/InputField.js @@ -1,13 +1,9 @@ import propTypes from '@dhis2/prop-types' import React from 'react' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Field, Label, Input, Help, Box } from '@dhis2/ui-core' -export const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - /** * @module * @param {InputField.PropTypes} props @@ -139,7 +135,7 @@ InputField.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, helpText: propTypes.string, initialFocus: propTypes.bool, inputWidth: propTypes.string, @@ -151,10 +147,10 @@ InputField.propTypes = { required: propTypes.bool, tabIndex: propTypes.string, type: Input.propTypes.type, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/widgets/src/MultiSelectField/MultiSelectField.js b/packages/widgets/src/MultiSelectField/MultiSelectField.js index 75c8308381..bdfa90f003 100644 --- a/packages/widgets/src/MultiSelectField/MultiSelectField.js +++ b/packages/widgets/src/MultiSelectField/MultiSelectField.js @@ -1,20 +1,9 @@ import propTypes from '@dhis2/prop-types' import React from 'react' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Field, Label, Help, Box, MultiSelect } from '@dhis2/ui-core' -const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - -const multiSelectedPropType = propTypes.arrayOf( - propTypes.shape({ - label: propTypes.string, - value: propTypes.string, - }) -) - /** * @module * @@ -169,7 +158,7 @@ MultiSelectField.propTypes = { dense: propTypes.bool, disabled: propTypes.bool, empty: propTypes.node, - error: statusPropType, + error: sharedPropTypes.statusPropType, filterPlaceholder: propTypes.string, filterable: propTypes.bool, helpText: propTypes.string, @@ -187,11 +176,11 @@ MultiSelectField.propTypes = { placeholder: propTypes.string, prefix: propTypes.string, required: propTypes.bool, - selected: multiSelectedPropType, + selected: sharedPropTypes.multiSelectedPropType, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/widgets/src/SingleSelectField/SingleSelectField.js b/packages/widgets/src/SingleSelectField/SingleSelectField.js index c190388c8e..2a40bcc09e 100644 --- a/packages/widgets/src/SingleSelectField/SingleSelectField.js +++ b/packages/widgets/src/SingleSelectField/SingleSelectField.js @@ -2,11 +2,7 @@ import React from 'react' import propTypes from '@dhis2/prop-types' import { Field, Label, Help, SingleSelect, Box } from '@dhis2/ui-core' - -const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) +import { sharedPropTypes } from '@dhis2/ui-constants' /** * @module @@ -162,7 +158,7 @@ SingleSelectField.propTypes = { dense: propTypes.bool, disabled: propTypes.bool, empty: propTypes.node, - error: statusPropType, + error: sharedPropTypes.statusPropType, filterPlaceholder: propTypes.string, filterable: propTypes.bool, helpText: propTypes.string, @@ -185,9 +181,9 @@ SingleSelectField.propTypes = { value: propTypes.string, }), tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/widgets/src/SwitchField/SwitchField.js b/packages/widgets/src/SwitchField/SwitchField.js index b2afc46895..0dac61c63b 100644 --- a/packages/widgets/src/SwitchField/SwitchField.js +++ b/packages/widgets/src/SwitchField/SwitchField.js @@ -1,13 +1,9 @@ import React from 'react' import propTypes from '@dhis2/prop-types' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Field, Switch, Help, Required } from '@dhis2/ui-core' -const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - const AddRequired = ({ label, required, dataTest }) => ( {label} @@ -130,17 +126,17 @@ SwitchField.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, helpText: propTypes.string, initialFocus: propTypes.bool, label: propTypes.node, name: propTypes.string, required: propTypes.bool, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/widgets/src/TextAreaField/TextAreaField.js b/packages/widgets/src/TextAreaField/TextAreaField.js index 58ed860c03..11466e7bcb 100644 --- a/packages/widgets/src/TextAreaField/TextAreaField.js +++ b/packages/widgets/src/TextAreaField/TextAreaField.js @@ -1,13 +1,9 @@ import propTypes from '@dhis2/prop-types' import React from 'react' +import { sharedPropTypes } from '@dhis2/ui-constants' import { Field, Label, TextArea, Help, Box } from '@dhis2/ui-core' -const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - /** * @module * @param {TextAreaField.PropTypes} props @@ -139,7 +135,7 @@ TextAreaField.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, helpText: propTypes.string, initialFocus: propTypes.bool, inputWidth: propTypes.string, @@ -152,10 +148,10 @@ TextAreaField.propTypes = { resize: propTypes.oneOf(['none', 'both', 'horizontal', 'vertical']), rows: propTypes.number, tabIndex: propTypes.string, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, value: propTypes.string, - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onBlur: propTypes.func, onChange: propTypes.func, onFocus: propTypes.func, diff --git a/packages/widgets/src/ToggleGroupField/ToggleGroupField.js b/packages/widgets/src/ToggleGroupField/ToggleGroupField.js index 9139cf1671..e0d3f58c86 100644 --- a/packages/widgets/src/ToggleGroupField/ToggleGroupField.js +++ b/packages/widgets/src/ToggleGroupField/ToggleGroupField.js @@ -1,13 +1,9 @@ import propTypes from '@dhis2/prop-types' import React from 'react' +import { sharedPropTypes } from '@dhis2/ui-constants' import { ToggleGroup, Field, FieldSet, Legend, Help } from '@dhis2/ui-core' -export const statusPropType = propTypes.mutuallyExclusive( - ['valid', 'warning', 'error'], - propTypes.bool -) - /** * @module * @param {ToggleGroupField.PropTypes} props @@ -100,18 +96,18 @@ ToggleGroupField.propTypes = { dataTest: propTypes.string, dense: propTypes.bool, disabled: propTypes.bool, - error: statusPropType, + error: sharedPropTypes.statusPropType, helpText: propTypes.string, label: propTypes.string, name: propTypes.string, required: propTypes.bool, - valid: statusPropType, + valid: sharedPropTypes.statusPropType, validationText: propTypes.string, value: propTypes.oneOfType([ propTypes.string, propTypes.arrayOf(propTypes.string), ]), - warning: statusPropType, + warning: sharedPropTypes.statusPropType, onChange: propTypes.func, }