From 6d062f00610fd95380c9e67c1ad0425f92558a97 Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Thu, 30 Jan 2025 11:49:41 +0100 Subject: [PATCH 1/2] Create dedicated folder fo JS Helpers This commit creates a new folder `src/jsHelpers` for `classNames` and `transferProps` functions. The aim is to have the code organization symetric to the `src/components` folder for better developer orientation. --- mkdocs.yml | 4 ++-- src/components/Alert/Alert.jsx | 4 ++-- src/components/Badge/Badge.jsx | 4 ++-- src/components/Button/Button.jsx | 4 ++-- src/components/ButtonGroup/ButtonGroup.jsx | 4 ++-- src/components/Card/Card.jsx | 4 ++-- src/components/Card/CardBody.jsx | 2 +- src/components/Card/CardFooter.jsx | 2 +- src/components/CheckboxField/CheckboxField.jsx | 4 ++-- src/components/FileInputField/FileInputField.jsx | 4 ++-- src/components/FormLayout/FormLayout.jsx | 4 ++-- src/components/FormLayout/FormLayoutCustomField.jsx | 4 ++-- src/components/Grid/Grid.jsx | 2 +- src/components/Grid/GridSpan.jsx | 2 +- src/components/InputGroup/InputGroup.jsx | 4 ++-- src/components/Modal/Modal.jsx | 4 ++-- src/components/Modal/ModalBody.jsx | 4 ++-- src/components/Modal/ModalCloseButton.jsx | 2 +- src/components/Modal/ModalContent.jsx | 2 +- src/components/Modal/ModalFooter.jsx | 4 ++-- src/components/Modal/ModalHeader.jsx | 4 ++-- src/components/Modal/ModalTitle.jsx | 2 +- src/components/Paper/Paper.jsx | 4 ++-- src/components/Popover/Popover.jsx | 4 ++-- src/components/Popover/PopoverWrapper.jsx | 2 +- src/components/Radio/Radio.jsx | 4 ++-- src/components/ScrollView/ScrollView.jsx | 4 ++-- src/components/SelectField/SelectField.jsx | 4 ++-- src/components/Table/Table.jsx | 2 +- src/components/Tabs/Tabs.jsx | 2 +- src/components/Tabs/TabsItem.jsx | 4 ++-- src/components/Text/Text.jsx | 4 ++-- src/components/TextArea/TextArea.jsx | 4 ++-- src/components/TextField/TextField.jsx | 4 ++-- src/components/TextLink/TextLink.jsx | 2 +- src/components/Toggle/Toggle.jsx | 4 ++-- src/components/Toolbar/Toolbar.jsx | 4 ++-- src/components/Toolbar/ToolbarGroup.jsx | 4 ++-- src/components/Toolbar/ToolbarItem.jsx | 4 ++-- src/index.js | 6 +++--- .../classnames.md => jsHelpers/classNames/README.md} | 0 .../classNames}/__tests__/classNames.test.js | 0 src/{utils => jsHelpers/classNames}/classNames.js | 0 .../transferProps.md => jsHelpers/transferProps/README.md} | 0 .../transferProps}/__tests__/transferProps.test.js | 0 src/{utils => jsHelpers/transferProps}/transferProps.js | 0 46 files changed, 70 insertions(+), 70 deletions(-) rename src/{docs/js-helpers/classnames.md => jsHelpers/classNames/README.md} (100%) rename src/{utils => jsHelpers/classNames}/__tests__/classNames.test.js (100%) rename src/{utils => jsHelpers/classNames}/classNames.js (100%) rename src/{docs/js-helpers/transferProps.md => jsHelpers/transferProps/README.md} (100%) rename src/{utils => jsHelpers/transferProps}/__tests__/transferProps.test.js (100%) rename src/{utils => jsHelpers/transferProps}/transferProps.js (100%) diff --git a/mkdocs.yml b/mkdocs.yml index e07315fd2..32f87b18f 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: 'jsHelpers/classNames/README.md' + - TransferProps: 'jsHelpers/transferProps/README.md' - Guides: - Customize: - Theming: diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx index fd74236dd..cbffb5a24 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..d1cbbc737 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..587001d06 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..cf4d7dd1f 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..30ee60c90 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..5725ed3ca 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 '../../jsHelpers/transferProps/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..554f37a5c 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 '../../jsHelpers/transferProps/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..3bf2e130c 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..30521b5f9 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..8faaa317d 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..05af1d4f9 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..3c09c31e9 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 '../../jsHelpers/transferProps/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..053cea9db 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 '../../jsHelpers/transferProps/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..eb2f568f2 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..d76df0b84 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..6eebae464 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 '../../jsHelpers/transferProps/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..f2160413e 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 '../../jsHelpers/transferProps/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..83b36a3cf 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..4ffa53c73 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..fbd9a4a53 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 '../../jsHelpers/transferProps/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..1dac4b48c 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..75069427a 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 '../../jsHelpers/transferProps/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..97ef4da01 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..4c406ef0b 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..d592b440a 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..18012a9e9 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 '../../jsHelpers/transferProps/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..4349fa1aa 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 '../../jsHelpers/transferProps/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..2df81f4f4 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..c67a252d4 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..476486ccb 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..c2d8562b4 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..eddac4aa9 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 '../../jsHelpers/transferProps/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..a736cfb9f 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..a4aefa1b7 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..854f2472f 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/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..a7dbd4bed 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 '../../jsHelpers/classNames/classNames'; +import { transferProps } from '../../jsHelpers/transferProps/transferProps'; import { withGlobalProps } from '../../providers/globalProps'; import { isChildrenEmpty } from '../_helpers/isChildrenEmpty'; import styles from './Toolbar.module.scss'; diff --git a/src/index.js b/src/index.js index 8436ff781..6b9d3d284 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'; +// JS Helpers +export { classNames } from './jsHelpers/classNames/classNames'; +export { transferProps } from './jsHelpers/transferProps/transferProps'; diff --git a/src/docs/js-helpers/classnames.md b/src/jsHelpers/classNames/README.md similarity index 100% rename from src/docs/js-helpers/classnames.md rename to src/jsHelpers/classNames/README.md diff --git a/src/utils/__tests__/classNames.test.js b/src/jsHelpers/classNames/__tests__/classNames.test.js similarity index 100% rename from src/utils/__tests__/classNames.test.js rename to src/jsHelpers/classNames/__tests__/classNames.test.js diff --git a/src/utils/classNames.js b/src/jsHelpers/classNames/classNames.js similarity index 100% rename from src/utils/classNames.js rename to src/jsHelpers/classNames/classNames.js diff --git a/src/docs/js-helpers/transferProps.md b/src/jsHelpers/transferProps/README.md similarity index 100% rename from src/docs/js-helpers/transferProps.md rename to src/jsHelpers/transferProps/README.md diff --git a/src/utils/__tests__/transferProps.test.js b/src/jsHelpers/transferProps/__tests__/transferProps.test.js similarity index 100% rename from src/utils/__tests__/transferProps.test.js rename to src/jsHelpers/transferProps/__tests__/transferProps.test.js diff --git a/src/utils/transferProps.js b/src/jsHelpers/transferProps/transferProps.js similarity index 100% rename from src/utils/transferProps.js rename to src/jsHelpers/transferProps/transferProps.js From 83ef9990d36c41f716cb67b593c57f82c9d9ca37 Mon Sep 17 00:00:00 2001 From: Martin Bohal Date: Thu, 30 Jan 2025 12:01:06 +0100 Subject: [PATCH 2/2] Improve `classNames` JS helper example --- mkdocs.yml | 4 +- src/components/Alert/Alert.jsx | 4 +- src/components/Badge/Badge.jsx | 4 +- src/components/Button/Button.jsx | 4 +- src/components/ButtonGroup/ButtonGroup.jsx | 4 +- src/components/Card/Card.jsx | 4 +- src/components/Card/CardBody.jsx | 2 +- src/components/Card/CardFooter.jsx | 2 +- .../CheckboxField/CheckboxField.jsx | 4 +- .../FileInputField/FileInputField.jsx | 4 +- src/components/FormLayout/FormLayout.jsx | 4 +- .../FormLayout/FormLayoutCustomField.jsx | 4 +- src/components/Grid/Grid.jsx | 2 +- src/components/Grid/GridSpan.jsx | 2 +- src/components/InputGroup/InputGroup.jsx | 4 +- src/components/Modal/ModalBody.jsx | 4 +- src/components/Modal/ModalCloseButton.jsx | 2 +- src/components/Modal/ModalContent.jsx | 2 +- src/components/Modal/ModalFooter.jsx | 4 +- src/components/Modal/ModalHeader.jsx | 4 +- src/components/Modal/ModalTitle.jsx | 2 +- src/components/Paper/Paper.jsx | 4 +- src/components/Popover/PopoverWrapper.jsx | 2 +- src/components/Radio/Radio.jsx | 4 +- src/components/ScrollView/ScrollView.jsx | 4 +- src/components/SelectField/SelectField.jsx | 4 +- src/components/Table/Table.jsx | 2 +- src/components/Tabs/Tabs.jsx | 2 +- src/components/Tabs/TabsItem.jsx | 4 +- src/components/Text/Text.jsx | 4 +- src/components/TextArea/TextArea.jsx | 4 +- src/components/TextField/TextField.jsx | 4 +- src/components/TextLink/TextLink.jsx | 2 +- src/components/Toggle/Toggle.jsx | 4 +- src/components/Toolbar/Toolbar.jsx | 4 +- src/components/Toolbar/ToolbarGroup.jsx | 4 +- src/components/Toolbar/ToolbarItem.jsx | 4 +- src/helpers/classNames/README.md | 65 +++++++++++++++++++ .../classNames/__tests__/classNames.test.js | 22 +++---- src/helpers/classNames/classNames.js | 11 ++++ src/helpers/classNames/index.js | 1 + .../transferProps/README.md | 2 +- .../__tests__/transferProps.test.js | 0 src/helpers/transferProps/index.js | 1 + .../transferProps/transferProps.js | 0 src/index.js | 6 +- src/jsHelpers/classNames/README.md | 28 -------- src/jsHelpers/classNames/classNames.js | 8 --- 48 files changed, 156 insertions(+), 114 deletions(-) create mode 100644 src/helpers/classNames/README.md rename src/{jsHelpers => helpers}/classNames/__tests__/classNames.test.js (53%) create mode 100644 src/helpers/classNames/classNames.js create mode 100644 src/helpers/classNames/index.js rename src/{jsHelpers => helpers}/transferProps/README.md (97%) rename src/{jsHelpers => helpers}/transferProps/__tests__/transferProps.test.js (100%) create mode 100644 src/helpers/transferProps/index.js rename src/{jsHelpers => helpers}/transferProps/transferProps.js (100%) delete mode 100644 src/jsHelpers/classNames/README.md delete mode 100644 src/jsHelpers/classNames/classNames.js diff --git a/mkdocs.yml b/mkdocs.yml index 32f87b18f..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: 'jsHelpers/classNames/README.md' - - TransferProps: 'jsHelpers/transferProps/README.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 cbffb5a24..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 d1cbbc737..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 587001d06..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 cf4d7dd1f..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 30ee60c90..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 5725ed3ca..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 '../../jsHelpers/transferProps/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 554f37a5c..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 '../../jsHelpers/transferProps/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 3bf2e130c..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 30521b5f9..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 8faaa317d..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 05af1d4f9..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 3c09c31e9..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 '../../jsHelpers/transferProps/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 053cea9db..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 '../../jsHelpers/transferProps/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 eb2f568f2..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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/ModalBody.jsx b/src/components/Modal/ModalBody.jsx index d76df0b84..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 6eebae464..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 '../../jsHelpers/transferProps/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 f2160413e..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 '../../jsHelpers/transferProps/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 83b36a3cf..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 4ffa53c73..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 fbd9a4a53..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 '../../jsHelpers/transferProps/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 1dac4b48c..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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/PopoverWrapper.jsx b/src/components/Popover/PopoverWrapper.jsx index 75069427a..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 '../../jsHelpers/transferProps/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 97ef4da01..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 4c406ef0b..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 d592b440a..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 18012a9e9..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 '../../jsHelpers/transferProps/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 4349fa1aa..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 '../../jsHelpers/transferProps/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 2df81f4f4..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 c67a252d4..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 476486ccb..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 c2d8562b4..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 eddac4aa9..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 '../../jsHelpers/transferProps/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 a736cfb9f..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 a4aefa1b7..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 854f2472f..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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 a7dbd4bed..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 '../../jsHelpers/classNames/classNames'; -import { transferProps } from '../../jsHelpers/transferProps/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/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/jsHelpers/classNames/__tests__/classNames.test.js b/src/helpers/classNames/__tests__/classNames.test.js similarity index 53% rename from src/jsHelpers/classNames/__tests__/classNames.test.js rename to src/helpers/classNames/__tests__/classNames.test.js index 02061094b..030ef8566 100644 --- a/src/jsHelpers/classNames/__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/jsHelpers/transferProps/README.md b/src/helpers/transferProps/README.md similarity index 97% rename from src/jsHelpers/transferProps/README.md rename to src/helpers/transferProps/README.md index 3cb698855..0c6618d3c 100644 --- a/src/jsHelpers/transferProps/README.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/jsHelpers/transferProps/__tests__/transferProps.test.js b/src/helpers/transferProps/__tests__/transferProps.test.js similarity index 100% rename from src/jsHelpers/transferProps/__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/jsHelpers/transferProps/transferProps.js b/src/helpers/transferProps/transferProps.js similarity index 100% rename from src/jsHelpers/transferProps/transferProps.js rename to src/helpers/transferProps/transferProps.js diff --git a/src/index.js b/src/index.js index 6b9d3d284..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'; -// JS Helpers -export { classNames } from './jsHelpers/classNames/classNames'; -export { transferProps } from './jsHelpers/transferProps/transferProps'; +// Helpers +export { classNames } from './helpers/classNames'; +export { transferProps } from './helpers/transferProps'; diff --git a/src/jsHelpers/classNames/README.md b/src/jsHelpers/classNames/README.md deleted file mode 100644 index 3f66fbcc5..000000000 --- a/src/jsHelpers/classNames/README.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/jsHelpers/classNames/classNames.js b/src/jsHelpers/classNames/classNames.js deleted file mode 100644 index 0d26a6e96..000000000 --- a/src/jsHelpers/classNames/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; -};