Migrate TextInput to TypeScript (#2342)

* Migrate textinput to TS

* Add story

* formatting

* organize imports

src/ui/Icon/Icon.tsx

@@ -13,7 +13,7 @@ const iconComponentCollection = {
 type IconCollection = typeof iconComponentCollection
 type Variant = keyof IconCollection
 
-type OutlineIconCollection = typeof svgOutline
+export type OutlineIconCollection = typeof svgOutline
 type SolidIconCollection = typeof svgSolid
 type DeveloperIconCollection = typeof svgDeveloper
 

src/ui/TextInput/TextInput.spec.jsx → src/ui/TextInput/TextInput.spec.tsx

@@ -1,12 +1,18 @@
 import { render, screen } from '@testing-library/react'
 
+import { OutlineIconCollection } from 'ui/Icon/Icon'
+
 import TextInput from './TextInput'
 
-describe('TextInput', () => {
-  let wrapper
+interface TextInputSetupArgs {
+  label?: string
+  icon?: keyof OutlineIconCollection
+  placeholder?: string
+}
 
-  function setup(props) {
-    wrapper = render(<TextInput {...props} />)
+describe('TextInput', () => {
+  function setup(props: TextInputSetupArgs) {
+    render(<TextInput {...props} />)
   }
 
   describe('when rendered', () => {
@@ -17,9 +23,9 @@ describe('TextInput', () => {
     })
 
     it('renders the textbox with the name of the label', () => {
-      screen.getByRole('textbox', {
-        name: /label/i,
-      })
+      expect(
+        screen.getByRole('textbox', { name: /label/i })
+      ).toBeInTheDocument()
     })
   })
 
@@ -31,9 +37,9 @@ describe('TextInput', () => {
     })
 
     it('renders the textbox with the placeholder as the label', () => {
-      screen.getByRole('textbox', {
-        name: /search orgs/i,
-      })
+      expect(
+        screen.getByRole('textbox', { name: /search orgs/i })
+      ).toBeInTheDocument()
     })
   })
 
@@ -45,7 +51,8 @@ describe('TextInput', () => {
     })
 
     it('renders an icon', () => {
-      expect(wrapper.container.querySelector('svg')).not.toBeNull()
+      const icon = screen.getByText(/search.svg/)
+      expect(icon).toBeInTheDocument()
     })
   })
 })

src/ui/TextInput/TextInput.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import TextInput from './TextInput'
+
+export default {
+  title: 'Components/TextInput',
+  component: TextInput,
+} as Meta
+
+type Story = StoryObj<typeof TextInput>
+
+export const TextInputWithLabel: Story = {
+  args: {
+    label: 'Name',
+    placeholder: 'Write your name',
+  },
+  render: (args) => {
+    return <TextInput {...args} />
+  },
+}
+
+export const TextInputWithPlaceholder: Story = {
+  args: {
+    placeholder: 'Type your age',
+    type: 'number',
+  },
+  render: (args) => {
+    return <TextInput {...args} />
+  },
+}
+
+export const TextInputWithIcon: Story = {
+  args: {
+    icon: 'search',
+    placeholder: 'Search',
+  },
+  render: (args) => {
+    return <TextInput {...args} />
+  },
+}

src/ui/TextInput/TextInput.jsx → src/ui/TextInput/TextInput.tsx

@@ -1,11 +1,18 @@
 import cs from 'classnames'
-import defaultTo from 'lodash/defaultTo'
-import uniqueId from 'lodash/uniqueId'
-import PropTypes from 'prop-types'
-import { forwardRef } from 'react'
+import { defaultTo, uniqueId } from 'lodash'
+import { forwardRef, HTMLProps, Ref } from 'react'
 
-import { dataMarketingType } from 'shared/propTypes'
 import Icon from 'ui/Icon'
+import { OutlineIconCollection } from 'ui/Icon/Icon'
+
+
+interface TextInputProps extends HTMLProps<HTMLInputElement> {
+  label?: string
+  icon?: keyof OutlineIconCollection
+  placeholder?: string
+  variant?: 'default' | 'topRounded'
+  dataMarketing?: string
+}
 
 const VariantClasses = {
   default: 'rounded border',
@@ -22,8 +29,15 @@ const styles = {
 
 const TextInput = forwardRef(
   (
-    { type = 'text', icon, label, placeholder, variant = 'default', ...props },
-    ref
+    {
+      type = 'text',
+      icon,
+      label,
+      placeholder,
+      variant = 'default',
+      ...props
+    }: TextInputProps,
+    ref: Ref<HTMLInputElement>
   ) => {
     const id = uniqueId('text-input')
     const { className, dataMarketing, ...newProps } = props
@@ -66,15 +80,4 @@ const TextInput = forwardRef(
 
 TextInput.displayName = 'TextInput'
 
-TextInput.propTypes = {
-  label: PropTypes.string,
-  type: PropTypes.string,
-  icon: PropTypes.string,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  variant: PropTypes.oneOf(['default', 'topRounded']),
-  dataMarketing: dataMarketingType,
-}
-
 export default TextInput