fix(app): update Inputfield stories (#15084)

* fix(app): update Inputfield stories

Author: koji

app/src/atoms/InputField/InputField.stories.tsx

@@ -1,28 +1,61 @@
 import * as React from 'react'
-import { InputField } from './index'
-import type { Story, Meta } from '@storybook/react'
+import { Flex, SPACING, VIEWPORT } from '@opentrons/components'
+import { InputField as InputFieldComponent } from './index'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof InputFieldComponent> = {
+  // ToDo (kk05/02/2024) this should be in Library but at this moment there is the same name component in components
+  // The unification for this component will be done when the old component is retired completely.
   title: 'App/Atoms/InputField',
-  component: InputField,
-} as Meta
+  component: InputFieldComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+}
+
+export default meta
+type Story = StoryObj<typeof InputFieldComponent>
 
-const Template: Story<React.ComponentProps<typeof InputField>> = args => (
-  <InputField {...args} />
-)
+export const InputField: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex padding={SPACING.spacing16} width="100%">
+      <InputFieldComponent
+        {...args}
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.type !== 'number' ? undefined : args.units}
+      />
+    </Flex>
+  )
+}
 
-export const Primary = Template.bind({})
-Primary.args = {
+InputField.args = {
   value: 200,
   units: 'rpm',
   type: 'number',
   caption: 'example caption',
   max: 200,
-  min: 200,
+  min: 10,
+}
+
+export const InputFieldWithError: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex padding={SPACING.spacing16} width="100%">
+      <InputFieldComponent
+        {...args}
+        value={value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.type !== 'number' ? undefined : args.units}
+      />
+    </Flex>
+  )
 }
 
-export const ErrorMessage = Template.bind({})
-ErrorMessage.args = {
+InputFieldWithError.args = {
   units: 'C',
   type: 'number',
   caption: 'example caption',