diff --git a/.changeset/lovely-tips-build.md b/.changeset/lovely-tips-build.md new file mode 100644 index 0000000000..0acdd3a01d --- /dev/null +++ b/.changeset/lovely-tips-build.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/text-input': patch +--- + +Migrate `` to TypeScript diff --git a/packages/components/inputs/text-input/README.md b/packages/components/inputs/text-input/README.md index 9234c3951d..5116d562cd 100644 --- a/packages/components/inputs/text-input/README.md +++ b/packages/components/inputs/text-input/README.md @@ -42,23 +42,23 @@ export default Example; ## Properties -| Props | Type | Required | Default | Description | -| ---------------------- | -------------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | -| `autoComplete` | `string` | | | Used as HTML autocomplete property | -| `className` | `string` | | | | -| `name` | `string` | | | Used as HTML name of the input component. property | -| `value` | `string` | ✅ | | Value of the input component. | -| `onChange` | `custom` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
Signature: `(event) => void` | -| `onBlur` | `func` | | | Called when input is blurred Signature: `(event) => void` | -| `onFocus` | `func` | | | Called when input is focused Signature: `(event) => void` | -| `isAutofocussed` | `bool` | | | Focus the input on initial render | -| `isDisabled` | `bool` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | -| `isReadOnly` | `bool` | | | Indicates that the field is displaying read-only content | -| `hasError` | `bool` | | | Indicates if the input has invalid values | -| `hasWarning` | `bool` | | | | -| `placeholder` | `string` | | | Placeholder text for the input | -| `horizontalConstraint` | `enum`
Possible values:
`3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | +| Props | Type | Required | Default | Description | +| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | +| `autoComplete` | `string` | | | Used as HTML autocomplete property | +| `className` | `string` | | | `className` forwarded to the underlying ``. | +| `name` | `string` | | | Used as HTML name of the input component. property | +| `value` | `string` | ✅ | | Value of the input component. | +| `onChange` | `ChangeEventHandler` | ✅ | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
Signature: `(event) => void` | +| `onBlur` | `FocusEventHandler` | | | Called when input is blurred Signature: `(event) => void` | +| `onFocus` | `FocusEventHandler` | | | Called when input is focused Signature: `(event) => void` | +| `isAutofocussed` | `boolean` | | | Focus the input on initial render | +| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | +| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | +| `hasError` | `boolean` | | | Indicates if the input has invalid values | +| `hasWarning` | `boolean` | | | | +| `placeholder` | `string` | | | Placeholder text for the input | +| `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | ## `data-*` props diff --git a/packages/components/inputs/text-input/index.js b/packages/components/inputs/text-input/index.ts similarity index 100% rename from packages/components/inputs/text-input/index.js rename to packages/components/inputs/text-input/index.ts diff --git a/packages/components/inputs/text-input/package.json b/packages/components/inputs/text-input/package.json index 21916508b7..7f01d4c1f8 100644 --- a/packages/components/inputs/text-input/package.json +++ b/packages/components/inputs/text-input/package.json @@ -31,8 +31,7 @@ "@commercetools-uikit/utils": "12.0.0", "@emotion/react": "^11.1.1", "@emotion/styled": "^11.0.0", - "prop-types": "15.7.2", - "react-required-if": "1.0.3" + "prop-types": "15.7.2" }, "devDependencies": { "react": "17.0.1" diff --git a/packages/components/inputs/text-input/src/index.js b/packages/components/inputs/text-input/src/index.ts similarity index 100% rename from packages/components/inputs/text-input/src/index.js rename to packages/components/inputs/text-input/src/index.ts diff --git a/packages/components/inputs/text-input/src/text-input.js b/packages/components/inputs/text-input/src/text-input.tsx similarity index 65% rename from packages/components/inputs/text-input/src/text-input.js rename to packages/components/inputs/text-input/src/text-input.tsx index 59df492a7a..dd4ea6a15e 100644 --- a/packages/components/inputs/text-input/src/text-input.js +++ b/packages/components/inputs/text-input/src/text-input.tsx @@ -1,127 +1,131 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import requiredIf from 'react-required-if'; +import React, { FocusEventHandler, ChangeEventHandler } from 'react'; import { useTheme } from '@emotion/react'; -import { filterDataAttributes } from '@commercetools-uikit/utils'; +import { filterDataAttributes, warning } from '@commercetools-uikit/utils'; import Constraints from '@commercetools-uikit/constraints'; import { getInputStyles } from '@commercetools-uikit/input-utils'; -const TextInput = (props) => { - const theme = useTheme(); - return ( - - - - ); -}; - -TextInput.displayName = 'TextInput'; - -TextInput.propTypes = { +type TTextInputProps = { /** * Used as HTML id property. An id is auto-generated when it is not specified. */ - id: PropTypes.string, + id?: string; /** * Used as HTML autocomplete property */ - autoComplete: PropTypes.string, - className: PropTypes.string, + autoComplete?: string; + /** + * `className` forwarded to the underlying ``. + */ + className?: string; /** * Used as HTML name of the input component. property */ - name: PropTypes.string, + name?: string; /** * Value of the input component. */ - value: PropTypes.string.isRequired, + value: string; /** * Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. *
- * Signature: `(event) => void` */ - onChange: requiredIf(PropTypes.func, (props) => !props.isReadOnly), + onChange: ChangeEventHandler; /** * Called when input is blurred - * Signature: `(event) => void` */ - onBlur: PropTypes.func, + onBlur?: FocusEventHandler; /** * Called when input is focused - * Signature: `(event) => void` */ - onFocus: PropTypes.func, + onFocus?: FocusEventHandler; /** * Focus the input on initial render */ - isAutofocussed: PropTypes.bool, + isAutofocussed?: boolean; /** * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). */ - isDisabled: PropTypes.bool, + isDisabled?: boolean; /** * Indicates that the field is displaying read-only content */ - isReadOnly: PropTypes.bool, + isReadOnly?: boolean; /** * Indicates if the input has invalid values */ - hasError: PropTypes.bool, - hasWarning: PropTypes.bool, + hasError?: boolean; + hasWarning?: boolean; /** * Placeholder text for the input */ - placeholder: PropTypes.string, + placeholder?: string; /** * Horizontal size limit of the input fields. */ - horizontalConstraint: PropTypes.oneOf([ - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 13, - 14, - 15, - 16, - 'scale', - 'auto', - ]), + horizontalConstraint: + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | 13 + | 14 + | 15 + | 16 + | 'scale' + | 'auto'; }; -TextInput.defaultProps = { +const defaultProps: Pick = { horizontalConstraint: 'scale', }; -TextInput.isEmpty = (value) => !value || value.trim().length === 0; +const TextInput = (props: TTextInputProps) => { + const theme = useTheme(); + if (!props.isReadOnly) { + warning( + Boolean(props.onChange), + 'TextInput: `onChange` is required when is not read only.' + ); + } + return ( + + + + ); +}; + +TextInput.displayName = 'TextInput'; +TextInput.defaultProps = defaultProps; +TextInput.isEmpty = (value: TTextInputProps['value']) => + !value || value.trim().length === 0; export default TextInput; diff --git a/packages/components/inputs/text-input/src/version.js b/packages/components/inputs/text-input/src/version.ts similarity index 100% rename from packages/components/inputs/text-input/src/version.js rename to packages/components/inputs/text-input/src/version.ts