diff --git a/mkdocs.yml b/mkdocs.yml index e07315fd2..978398c03 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -131,8 +131,8 @@ nav: - Spacing: 'docs/css-helpers/spacing.md' - Typography: 'docs/css-helpers/typography.md' - JS Helpers: - - Classnames: 'docs/js-helpers/classnames.md' - - Transferring Props: 'docs/js-helpers/transferProps.md' + - ClassNames: 'helpers/classNames/README.md' + - TransferProps: 'helpers/transferProps/README.md' - Guides: - Customize: - Theming: diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx index fd74236dd..8cf8ff7b4 100644 --- a/src/components/Alert/Alert.jsx +++ b/src/components/Alert/Alert.jsx @@ -2,8 +2,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; import { TranslationsContext } from '../../providers/translations'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootColorClassName } from '../_helpers/getRootColorClassName'; import styles from './Alert.module.scss'; diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx index aa887a5ad..67ccda582 100644 --- a/src/components/Badge/Badge.jsx +++ b/src/components/Badge/Badge.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootColorClassName } from '../_helpers/getRootColorClassName'; import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName'; import styles from './Badge.module.scss'; diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx index 320563181..9b4499f6b 100644 --- a/src/components/Button/Button.jsx +++ b/src/components/Button/Button.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootColorClassName } from '../_helpers/getRootColorClassName'; import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; diff --git a/src/components/ButtonGroup/ButtonGroup.jsx b/src/components/ButtonGroup/ButtonGroup.jsx index 450a42ddd..3752f6315 100644 --- a/src/components/ButtonGroup/ButtonGroup.jsx +++ b/src/components/ButtonGroup/ButtonGroup.jsx @@ -3,8 +3,8 @@ import React, { useMemo, } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import styles from './ButtonGroup.module.scss'; diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index 69045a962..2c8c80fe8 100644 --- a/src/components/Card/Card.jsx +++ b/src/components/Card/Card.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootColorClassName } from '../_helpers/getRootColorClassName'; import styles from './Card.module.scss'; diff --git a/src/components/Card/CardBody.jsx b/src/components/Card/CardBody.jsx index 9037f1eca..e14eb8501 100644 --- a/src/components/Card/CardBody.jsx +++ b/src/components/Card/CardBody.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import styles from './Card.module.scss'; export const CardBody = ({ diff --git a/src/components/Card/CardFooter.jsx b/src/components/Card/CardFooter.jsx index 953c8141c..3d08ad38d 100644 --- a/src/components/Card/CardFooter.jsx +++ b/src/components/Card/CardFooter.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import { withGlobalProps } from '../../providers/globalProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import styles from './Card.module.scss'; diff --git a/src/components/CheckboxField/CheckboxField.jsx b/src/components/CheckboxField/CheckboxField.jsx index e23e521c4..d393ce5a5 100644 --- a/src/components/CheckboxField/CheckboxField.jsx +++ b/src/components/CheckboxField/CheckboxField.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { FormLayoutContext } from '../FormLayout'; import styles from './CheckboxField.module.scss'; diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx index 113139c6a..bccae7ef8 100644 --- a/src/components/FileInputField/FileInputField.jsx +++ b/src/components/FileInputField/FileInputField.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { resolveContextOrProp } from '../_helpers/resolveContextOrProp'; import { FormLayoutContext } from '../FormLayout'; diff --git a/src/components/FormLayout/FormLayout.jsx b/src/components/FormLayout/FormLayout.jsx index 2b385c5d1..b6a76f26f 100644 --- a/src/components/FormLayout/FormLayout.jsx +++ b/src/components/FormLayout/FormLayout.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useMemo } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import { FormLayoutContext } from './FormLayoutContext'; import styles from './FormLayout.module.scss'; diff --git a/src/components/FormLayout/FormLayoutCustomField.jsx b/src/components/FormLayout/FormLayoutCustomField.jsx index 933d8210c..095d56d87 100644 --- a/src/components/FormLayout/FormLayoutCustomField.jsx +++ b/src/components/FormLayout/FormLayoutCustomField.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; diff --git a/src/components/Grid/Grid.jsx b/src/components/Grid/Grid.jsx index 3dd7b4902..93b490d56 100644 --- a/src/components/Grid/Grid.jsx +++ b/src/components/Grid/Grid.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties'; import styles from './Grid.module.scss'; diff --git a/src/components/Grid/GridSpan.jsx b/src/components/Grid/GridSpan.jsx index a4f9ad9f8..a64783c38 100644 --- a/src/components/Grid/GridSpan.jsx +++ b/src/components/Grid/GridSpan.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties'; import styles from './Grid.module.scss'; diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx index dcb230bec..cad554b60 100644 --- a/src/components/InputGroup/InputGroup.jsx +++ b/src/components/InputGroup/InputGroup.jsx @@ -4,8 +4,8 @@ import React, { useMemo, } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx index d4c968b49..fded1f0b0 100644 --- a/src/components/Modal/Modal.jsx +++ b/src/components/Modal/Modal.jsx @@ -6,9 +6,9 @@ import React, { useRef, } from 'react'; import { createPortal } from 'react-dom'; +import { classNames } from '../../helpers/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; import { dialogOnCancelHandler } from './_helpers/dialogOnCancelHandler'; import { dialogOnClickHandler } from './_helpers/dialogOnClickHandler'; import { dialogOnCloseHandler } from './_helpers/dialogOnCloseHandler'; diff --git a/src/components/Modal/ModalBody.jsx b/src/components/Modal/ModalBody.jsx index 0f54c497d..5f245c83c 100644 --- a/src/components/Modal/ModalBody.jsx +++ b/src/components/Modal/ModalBody.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import { getScrollingClassName } from './_helpers/getScrollingClassName'; import styles from './ModalBody.module.scss'; diff --git a/src/components/Modal/ModalCloseButton.jsx b/src/components/Modal/ModalCloseButton.jsx index eeecccf64..71ac7622c 100644 --- a/src/components/Modal/ModalCloseButton.jsx +++ b/src/components/Modal/ModalCloseButton.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { TranslationsContext } from '../../providers/translations'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import styles from './ModalCloseButton.module.scss'; export const ModalCloseButton = React.forwardRef((props, ref) => { diff --git a/src/components/Modal/ModalContent.jsx b/src/components/Modal/ModalContent.jsx index 5374987ab..f8a2cf89d 100644 --- a/src/components/Modal/ModalContent.jsx +++ b/src/components/Modal/ModalContent.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import styles from './ModalContent.module.scss'; diff --git a/src/components/Modal/ModalFooter.jsx b/src/components/Modal/ModalFooter.jsx index a4be180a4..2705672b6 100644 --- a/src/components/Modal/ModalFooter.jsx +++ b/src/components/Modal/ModalFooter.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getJustifyClassName } from './_helpers/getJustifyClassName'; import styles from './ModalFooter.module.scss'; diff --git a/src/components/Modal/ModalHeader.jsx b/src/components/Modal/ModalHeader.jsx index 6cf307aa9..102d7087e 100644 --- a/src/components/Modal/ModalHeader.jsx +++ b/src/components/Modal/ModalHeader.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getJustifyClassName } from './_helpers/getJustifyClassName'; import styles from './ModalHeader.module.scss'; diff --git a/src/components/Modal/ModalTitle.jsx b/src/components/Modal/ModalTitle.jsx index bd814062c..b419d8852 100644 --- a/src/components/Modal/ModalTitle.jsx +++ b/src/components/Modal/ModalTitle.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import styles from './ModalTitle.module.scss'; export const ModalTitle = ({ diff --git a/src/components/Paper/Paper.jsx b/src/components/Paper/Paper.jsx index 4780bd119..1dcf60371 100644 --- a/src/components/Paper/Paper.jsx +++ b/src/components/Paper/Paper.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import styles from './Paper.module.scss'; export const Paper = ({ diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx index 44097e85f..74be059ee 100644 --- a/src/components/Popover/Popover.jsx +++ b/src/components/Popover/Popover.jsx @@ -1,9 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import { createPortal } from 'react-dom'; +import { transferProps } from '../../helpers/transferProps'; +import { classNames } from '../../helpers/classNames'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; import cleanPlacementStyle from './_helpers/cleanPlacementStyle'; import getRootSideClassName from './_helpers/getRootSideClassName'; import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName'; diff --git a/src/components/Popover/PopoverWrapper.jsx b/src/components/Popover/PopoverWrapper.jsx index 0c1c6e7b4..118d1ab3c 100644 --- a/src/components/Popover/PopoverWrapper.jsx +++ b/src/components/Popover/PopoverWrapper.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import styles from './PopoverWrapper.module.scss'; export const PopoverWrapper = ({ diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx index 19f080c69..64b0a85e8 100644 --- a/src/components/Radio/Radio.jsx +++ b/src/components/Radio/Radio.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { resolveContextOrProp } from '../_helpers/resolveContextOrProp'; import { FormLayoutContext } from '../FormLayout'; diff --git a/src/components/ScrollView/ScrollView.jsx b/src/components/ScrollView/ScrollView.jsx index 87a73411c..6d51916a8 100644 --- a/src/components/ScrollView/ScrollView.jsx +++ b/src/components/ScrollView/ScrollView.jsx @@ -8,8 +8,8 @@ import React, { } from 'react'; import { TranslationsContext } from '../../providers/translations'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference'; import { useLoadResize } from './_hooks/useLoadResizeHook'; import { useScrollPosition } from './_hooks/useScrollPositionHook'; diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx index e8731e28a..587c7635a 100644 --- a/src/components/SelectField/SelectField.jsx +++ b/src/components/SelectField/SelectField.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { resolveContextOrProp } from '../_helpers/resolveContextOrProp'; diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx index cb2e386ee..090a8e388 100644 --- a/src/components/Table/Table.jsx +++ b/src/components/Table/Table.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import { TableHeaderCell } from './_components/TableHeaderCell'; import { TableBodyCell } from './_components/TableBodyCell'; import styles from './Table.module.scss'; diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx index 5d5b8ceb1..aa9357444 100644 --- a/src/components/Tabs/Tabs.jsx +++ b/src/components/Tabs/Tabs.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import styles from './Tabs.module.scss'; export const Tabs = ({ diff --git a/src/components/Tabs/TabsItem.jsx b/src/components/Tabs/TabsItem.jsx index 74ae2a56b..12502fc66 100644 --- a/src/components/Tabs/TabsItem.jsx +++ b/src/components/Tabs/TabsItem.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import styles from './TabsItem.module.scss'; export const TabsItem = ({ diff --git a/src/components/Text/Text.jsx b/src/components/Text/Text.jsx index 0800f04c2..73145380f 100644 --- a/src/components/Text/Text.jsx +++ b/src/components/Text/Text.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import { getRootClampClassName } from './_helpers/getRootClampClassName'; import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName'; diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx index 4d52943bb..b3c7de74d 100644 --- a/src/components/TextArea/TextArea.jsx +++ b/src/components/TextArea/TextArea.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { resolveContextOrProp } from '../_helpers/resolveContextOrProp'; diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx index 9464ab59f..cfc40b7a5 100644 --- a/src/components/TextField/TextField.jsx +++ b/src/components/TextField/TextField.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { resolveContextOrProp } from '../_helpers/resolveContextOrProp'; diff --git a/src/components/TextLink/TextLink.jsx b/src/components/TextLink/TextLink.jsx index b4ae9e50d..7053e1268 100644 --- a/src/components/TextLink/TextLink.jsx +++ b/src/components/TextLink/TextLink.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { transferProps } from '../../utils/transferProps'; +import { transferProps } from '../../helpers/transferProps'; import styles from './TextLink.module.scss'; export const TextLink = ({ diff --git a/src/components/Toggle/Toggle.jsx b/src/components/Toggle/Toggle.jsx index 44ff357c0..870ebf876 100644 --- a/src/components/Toggle/Toggle.jsx +++ b/src/components/Toggle/Toggle.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; import { FormLayoutContext } from '../FormLayout'; import styles from './Toggle.module.scss'; diff --git a/src/components/Toolbar/Toolbar.jsx b/src/components/Toolbar/Toolbar.jsx index 59ddc121d..f10b5a29e 100644 --- a/src/components/Toolbar/Toolbar.jsx +++ b/src/components/Toolbar/Toolbar.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import { getAlignClassName } from './_helpers/getAlignClassName'; import { getJustifyClassName } from './_helpers/getJustifyClassName'; diff --git a/src/components/Toolbar/ToolbarGroup.jsx b/src/components/Toolbar/ToolbarGroup.jsx index 8c4fd6252..f3085a0a6 100644 --- a/src/components/Toolbar/ToolbarGroup.jsx +++ b/src/components/Toolbar/ToolbarGroup.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import { withGlobalProps } from '../../providers/globalProps'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import { getAlignClassName } from './_helpers/getAlignClassName'; import styles from './Toolbar.module.scss'; diff --git a/src/components/Toolbar/ToolbarItem.jsx b/src/components/Toolbar/ToolbarItem.jsx index 31a7b77e0..6f44a6d0d 100644 --- a/src/components/Toolbar/ToolbarItem.jsx +++ b/src/components/Toolbar/ToolbarItem.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { classNames } from '../../utils/classNames'; -import { transferProps } from '../../utils/transferProps'; +import { classNames } from '../../helpers/classNames/classNames'; +import { transferProps } from '../../helpers/transferProps'; import { withGlobalProps } from '../../providers/globalProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import styles from './Toolbar.module.scss'; diff --git a/src/docs/js-helpers/classnames.md b/src/docs/js-helpers/classnames.md deleted file mode 100644 index 3f66fbcc5..000000000 --- a/src/docs/js-helpers/classnames.md +++ /dev/null @@ -1,28 +0,0 @@ -# Classnames - -The `classNames` helper joins all classnames you pass into the function as -single classname. It automatically filters out empty strings and values that -are not strings, so you can conditionally assemble classnames and `classNames` -function will take care about the single format of classname for you. - -## Basic Usage - -To use `classNames` helper, you need to import it first: - -```js -import { classNames } from '@react-ui-org/react-ui'; -``` - -And use it: - -```docoff-react-preview -
1609455600 && 'text-warning', - Date.now() > 1622498400 ? 'text-secondary' : null, - )} -> - {(new Date()).toLocaleDateString()} -
-``` diff --git a/src/helpers/classNames/README.md b/src/helpers/classNames/README.md new file mode 100644 index 000000000..b8b6f306c --- /dev/null +++ b/src/helpers/classNames/README.md @@ -0,0 +1,65 @@ +# classNames + +The `classNames` helper function simplifies creating a string passable to +the `class` / `className` attribute. + +It accepts multiple arguments, filters out invalid values, and returns a single +string where the remaining parameters are joined by a space. + +## Usage + +To use `classNames` helper, you need to import it first: + +```js +import { classNames } from '@react-ui-org/react-ui'; +``` + +And use it: + +```docoff-react-preview +<> +
+ {(new Date()).toLocaleDateString()} +
+
+ {(new Date()).toLocaleDateString()} +
+ +``` + +## Parameter Filtering + +The `classNames` function: + +* filters out all values that are not strings +* filters out empty strings +* filters out whitespace only strings + + +```docoff-react-preview +{classNames( + 'class-1', + 'class-2 class-3', + ' ', + ' ', // non-breakable space + ' ', // tab + '', + 0, + 1, + null, + undefined, + true, + false, +)} +``` + diff --git a/src/utils/__tests__/classNames.test.js b/src/helpers/classNames/__tests__/classNames.test.js similarity index 53% rename from src/utils/__tests__/classNames.test.js rename to src/helpers/classNames/__tests__/classNames.test.js index 02061094b..030ef8566 100644 --- a/src/utils/__tests__/classNames.test.js +++ b/src/helpers/classNames/__tests__/classNames.test.js @@ -6,6 +6,9 @@ describe('classNames', () => { 'class-1', 'class-2 class-3', ' ', + ' ', // non=-breakable space + ' ', // eslint-disable-line no-tabs + '', 0, 1, null, @@ -17,17 +20,14 @@ describe('classNames', () => { expect(result).toEqual('class-1 class-2 class-3'); }); - it('returns undefined if all class names are filtered out', () => { - const result = classNames( - ' ', - ' ', - 0, - 1, - null, - undefined, - true, - false, - ); + it('returns `undefined` if called with no params', () => { + const result = classNames(); + + expect(result).toEqual(undefined); + }); + + it('returns `undefined` if called with params that get all filtered out', () => { + const result = classNames(false); expect(result).toEqual(undefined); }); diff --git a/src/helpers/classNames/classNames.js b/src/helpers/classNames/classNames.js new file mode 100644 index 000000000..e1f7d69ae --- /dev/null +++ b/src/helpers/classNames/classNames.js @@ -0,0 +1,11 @@ +export const classNames = (...classes) => { + const filteredClassNames = classes.filter( + (className) => typeof className === 'string' + && className.trim().length > 0, + ); + + return filteredClassNames.length > 0 + ? filteredClassNames.join(' ') + // React does not render attributes whose value is `undefined` and we do not want an empty `class` attribute in HTML + : undefined; +}; diff --git a/src/helpers/classNames/index.js b/src/helpers/classNames/index.js new file mode 100644 index 000000000..b27a95c76 --- /dev/null +++ b/src/helpers/classNames/index.js @@ -0,0 +1 @@ +export { classNames } from './classNames'; diff --git a/src/docs/js-helpers/transferProps.md b/src/helpers/transferProps/README.md similarity index 97% rename from src/docs/js-helpers/transferProps.md rename to src/helpers/transferProps/README.md index 3cb698855..0c6618d3c 100644 --- a/src/docs/js-helpers/transferProps.md +++ b/src/helpers/transferProps/README.md @@ -1,4 +1,4 @@ -# Transferring Props +# transferProps The `transferProps` helper controls passing of props from the React component to the HTML element. diff --git a/src/utils/__tests__/transferProps.test.js b/src/helpers/transferProps/__tests__/transferProps.test.js similarity index 100% rename from src/utils/__tests__/transferProps.test.js rename to src/helpers/transferProps/__tests__/transferProps.test.js diff --git a/src/helpers/transferProps/index.js b/src/helpers/transferProps/index.js new file mode 100644 index 000000000..7e3d117d6 --- /dev/null +++ b/src/helpers/transferProps/index.js @@ -0,0 +1 @@ +export { transferProps } from './transferProps'; diff --git a/src/utils/transferProps.js b/src/helpers/transferProps/transferProps.js similarity index 100% rename from src/utils/transferProps.js rename to src/helpers/transferProps/transferProps.js diff --git a/src/index.js b/src/index.js index 8436ff781..061a7ac31 100644 --- a/src/index.js +++ b/src/index.js @@ -61,6 +61,6 @@ export { export { GlobalPropsProvider } from './providers/globalProps'; export { TranslationsProvider } from './providers/translations'; -// Utils -export { classNames } from './utils/classNames'; -export { transferProps } from './utils/transferProps'; +// Helpers +export { classNames } from './helpers/classNames'; +export { transferProps } from './helpers/transferProps'; diff --git a/src/utils/classNames.js b/src/utils/classNames.js deleted file mode 100644 index 0d26a6e96..000000000 --- a/src/utils/classNames.js +++ /dev/null @@ -1,8 +0,0 @@ -export const classNames = (...classes) => { - const filteredClassNames = classes.filter( - (className) => typeof className === 'string' - && className.trim().length > 0, - ); - - return filteredClassNames.length > 0 ? filteredClassNames.join(' ') : undefined; -};