fix errors in input component

stasguma · Apr 15, 2024 · 49d8f4d · 49d8f4d
1 parent 0056082
commit 49d8f4d
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 13 deletions.
diff --git a/src/shared/ui/Input/Input.stories.tsx b/src/shared/ui/Input/Input.stories.tsx
@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import Typography from '../Typography';
 import { Input } from './Input';
 
+const { Text } = Typography;
+
 const meta: Meta<typeof Input> = {
   title: 'Shared/Input',
   component: Input,
@@ -12,40 +15,67 @@ export default meta;
 type Story = StoryObj<typeof Input>;
 
 export const Default: Story = {
-  args: {
-    name: 'default',
-  },
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
+        name="default"
+        id="default"
+      />
+    </div>
+  ),
 };
 
 export const WithLabel: Story = {
-  args: {
-    name: 'with-label-1',
-    label: 'Label',
-  },
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
+        name="with-label-1"
+        id="with-label-1"
+        label="Label"
+      />
+    </div>
+  ),
 };
 
 export const WithPlaceholder: Story = {
-  args: {
-    name: 'with-placeholder-1',
-    placeholder: 'Placeholder',
-  },
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
+        name="with-placeholder-1"
+        id="with-placeholder-1"
+        placeholder="Placeholder"
+      />
+    </div>
+  ),
 };
 
 export const InputSizes: Story = {
   name: 'Input sizes',
   render: () => (
     <div style={{ display: 'flex', flexFlow: 'column', gap: 10 }}>
       <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
         name="default-1"
         placeholder="Large Size"
         size="lg"
       />
       <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
         name="default-2"
         placeholder="Medium Size"
         size="md"
       />
       <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
         name="default-3"
         placeholder="Small Size"
         size="sm"
@@ -59,19 +89,40 @@ export const InputValidateStatuses: Story = {
   render: () => (
     <div style={{ display: 'flex', flexFlow: 'column', gap: 10 }}>
       <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
         name="default-1"
         placeholder="Default"
       />
       <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
         name="danger-status"
         placeholder="Danger"
         validateStatus="danger"
       />
       <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
         name="warning-status"
         placeholder="Warning"
         validateStatus="warning"
       />
     </div>
   ),
 };
+
+export const WithErrorText: Story = {
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Input
+        /* @ts-expect-error: Type 'null' is not assignable to type 'UseFormRegisterReturn<any> */
+        register={() => null}
+        name="with-error-1"
+        id="with-error-1"
+        placeholder="Enter the name"
+        errorEl={<Text color="danger">Error message</Text>}
+      />
+    </div>
+  ),
+};
diff --git a/src/shared/ui/Input/Input.tsx b/src/shared/ui/Input/Input.tsx
@@ -17,16 +17,17 @@ const InputSizesMap = {
 } as const;
 
 interface IProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  register: () => UseFormRegisterReturn<any>; /* eslint-disable-line @typescript-eslint/no-explicit-any */
   className?: string;
   label?: string;
   validateStatus?: TInputValidate;
   size?: TInputSizes;
   errorEl?: ReactElement;
-  register: () => UseFormRegisterReturn<any>; /* eslint-disable-line @typescript-eslint/no-explicit-any */
 }
 
 export const Input = memo<IProps>(function Input(props) {
   const {
+    register,
     className,
     size = 'md',
     id,
@@ -35,7 +36,6 @@ export const Input = memo<IProps>(function Input(props) {
     type = 'text',
     validateStatus,
     errorEl,
-    register,
     ...otherProps
   } = props;