Migrate component to TS: Input (#20094)

* Migrating Input component

* Adjusting types and fixing design system import

---------

Co-authored-by: georgewrmarshall <[email protected]>

ui/components/component-library/index.js

@@ -31,7 +31,7 @@ export { PickerNetwork } from './picker-network';
 export { Tag } from './tag';
 export { TagUrl } from './tag-url';
 export { Text, ValidTag, TextDirection, InvisibleCharacter } from './text';
-export { Input, INPUT_TYPES } from './input';
+export { Input, InputType } from './input';
 export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
 export { TextFieldSearch } from './text-field-search';
 export { ModalContent, ModalContentSize } from './modal-content';

ui/components/component-library/input/README.mdx

@@ -12,7 +12,7 @@ import { Input } from './input';
 
 ## Props
 
-The `Input` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `Input` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={Input} />
 
@@ -22,24 +22,24 @@ Use the `type` prop to change the type of input.
 
 Possible types include:
 
-- `INPUT_TYPES.TEXT`
-- `INPUT_TYPES.NUMBER`
-- `INPUT_TYPES.PASSWORD`
-- `INPUT_TYPES.SEARCH`
+- `InputType.Text`
+- `InputType.Number`
+- `InputType.Password`
+- `InputType.Search`
 
-Defaults to `INPUT_TYPES.TEXT`.
+Defaults to `InputType.Text`.
 
 <Canvas>
   <Story id="components-componentlibrary-input--type" />
 </Canvas>
 
 ```jsx
-import { Input, INPUT_TYPES } from '../../component-library';
+import { Input, InputType } from '../../component-library';
 
-<Input type={INPUT_TYPES.TEXT} />
-<Input type={INPUT_TYPES.NUMBER} />
-<Input type={INPUT_TYPES.PASSWORD} />
-<Input type={INPUT_TYPES.SEARCH} />
+<Input type={InputType.Text} />
+<Input type={InputType.Number} />
+<Input type={InputType.Password} />
+<Input type={InputType.Search} />
 ```
 
 ### Ref
@@ -81,9 +81,9 @@ Use the `autoComplete` prop to set the autocomplete html attribute. It allows th
 </Canvas>
 
 ```jsx
-import { Input } from '../../component-library';
+import { Input, InputType } from '../../component-library';
 
-<Input type={INPUT_TYPES.PASSWORD} autoComplete />;
+<Input type={InputType.Password} autoComplete />;
 ```
 
 ### Auto Focus

ui/components/component-library/input/index.ts

@@ -0,0 +1,4 @@
+export { Input } from './input';
+export { InputType } from './input.types';
+
+export type { InputProps } from './input.types';

ui/components/component-library/input/input.stories.js → ui/components/component-library/input/input.stories.tsx

@@ -1,16 +1,16 @@
 import React, { useRef } from 'react';
+import { Meta } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
 
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
 
-import { Button } from '..';
+import { Button, Box, BUTTON_VARIANT } from '..';
 
-import { INPUT_TYPES } from './input.constants';
+import { InputType } from './input.types';
 import { Input } from './input';
 
 import README from './README.mdx';
@@ -92,7 +92,7 @@ export default {
     },
     type: {
       control: 'select',
-      options: Object.values(INPUT_TYPES),
+      options: Object.values(InputType),
     },
     value: {
       control: 'text',
@@ -126,7 +126,7 @@ export default {
     placeholder: 'Placeholder...',
     value: '',
   },
-};
+} as Meta<typeof Input>;
 
 const Template = (args) => {
   const [{ value }, updateArgs] = useArgs();
@@ -141,14 +141,14 @@ DefaultStory.storyName = 'Default';
 
 export const Type = (args) => (
   <Box
-    display={DISPLAY.INLINE_FLEX}
-    flexDirection={FLEX_DIRECTION.COLUMN}
+    display={Display.InlineFlex}
+    flexDirection={FlexDirection.Column}
     gap={4}
   >
     <Input {...args} placeholder="Default" />
-    <Input {...args} type={INPUT_TYPES.PASSWORD} placeholder="Password" />
-    <Input {...args} type={INPUT_TYPES.NUMBER} placeholder="Number" />
-    <Input {...args} type={INPUT_TYPES.SEARCH} placeholder="Search" />
+    <Input {...args} type={InputType.Password} placeholder="Password" />
+    <Input {...args} type={InputType.Number} placeholder="Number" />
+    <Input {...args} type={InputType.Search} placeholder="Search" />
   </Box>
 );
 
@@ -158,17 +158,21 @@ Type.args = {
 
 export const Ref = (args) => {
   const [{ value }, updateArgs] = useArgs();
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const handleOnClick = () => {
-    inputRef.current.focus();
+    inputRef.current?.focus();
   };
   const handleOnChange = (e) => {
     updateArgs({ value: e.target.value });
   };
   return (
-    <Box display={DISPLAY.FLEX}>
+    <Box display={Display.Flex}>
       <Input {...args} ref={inputRef} value={value} onChange={handleOnChange} />
-      <Button marginLeft={1} onClick={handleOnClick}>
+      <Button
+        variant={BUTTON_VARIANT.PRIMARY}
+        marginLeft={1}
+        onClick={handleOnClick}
+      >
         Edit
       </Button>
     </Box>
@@ -178,7 +182,7 @@ export const Ref = (args) => {
 export const AutoComplete = Template.bind({});
 AutoComplete.args = {
   autoComplete: true,
-  type: INPUT_TYPES.PASSWORD,
+  type: InputType.Password,
   placeholder: 'Enter password',
 };
 
@@ -201,8 +205,9 @@ MaxLength.args = { maxLength: 10, placeholder: 'Max length 10' };
 export const ReadOnly = Template.bind({});
 ReadOnly.args = { readOnly: true, value: 'Read only' };
 
-export const Required = Template.bind({});
-Required.args = { required: true, placeholder: 'Required' };
+export const RequiredStory = Template.bind({});
+RequiredStory.args = { required: true, placeholder: 'Required' };
+RequiredStory.storyName = 'Required';
 
 export const DisableStateStyles = Template.bind({});
 DisableStateStyles.args = {
@@ -216,8 +221,8 @@ export const TextVariantStory = (args) => {
   };
   return (
     <Box
-      display={DISPLAY.INLINE_FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.InlineFlex}
+      flexDirection={FlexDirection.Column}
       gap={4}
     >
       <Input

ui/components/component-library/input/input.test.js → ui/components/component-library/input/input.test.tsx

@@ -5,7 +5,7 @@ import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
 
 import { TextVariant } from '../../../helpers/constants/design-system';
 import { Input } from './input';
-import { INPUT_TYPES } from './input.constants';
+import { InputType } from './input.types';
 
 describe('Input', () => {
   it('should render correctly', () => {
@@ -72,9 +72,9 @@ describe('Input', () => {
     const { getByTestId } = render(
       <>
         <Input data-testid="input-text-default" />
-        <Input type={INPUT_TYPES.TEXT} data-testid="input-text" />
-        <Input type={INPUT_TYPES.NUMBER} data-testid="input-number" />
-        <Input type={INPUT_TYPES.PASSWORD} data-testid="input-password" />
+        <Input type={InputType.Text} data-testid="input-text" />
+        <Input type={InputType.Number} data-testid="input-number" />
+        <Input type={InputType.Password} data-testid="input-password" />
       </>,
     );
     expect(getByTestId('input-text-default')).toHaveAttribute('type', 'text');