IBX-10469: Stateful Inputs HOC (#13)

Author: GrabowskiM

packages/components/src/inputs/InputText/InputText.stories.tsx

@@ -1,13 +1,11 @@
-import React, { useState } from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { INPUT_SIZE_VALUES, INPUT_TYPE_VALUES } from './InputText.types';
-import InputText from './InputText';
+import { InputTextStateful } from './InputText';
 
-const meta: Meta<typeof InputText> = {
-    component: InputText,
+const meta: Meta<typeof InputTextStateful> = {
+    component: InputTextStateful,
     parameters: {
         layout: 'centered',
     },
@@ -37,33 +35,11 @@ const meta: Meta<typeof InputText> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
-    decorators: [
-        (Story, { args }) => {
-            const [value, setValue] = useState(args.value ?? '');
-            const onChange = (changedValue: string, event?: React.ChangeEvent<HTMLInputElement>) => {
-                setValue(changedValue);
-
-                if (args.onChange) {
-                    args.onChange(changedValue, event);
-                }
-            };
-
-            return (
-                <Story
-                    args={{
-                        ...args,
-                        onChange,
-                        value,
-                    }}
-                />
-            );
-        },
-    ],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof InputText>;
+type Story = StoryObj<typeof InputTextStateful>;
 
 export const Empty: Story = {
     name: 'Empty',

packages/components/src/inputs/InputText/InputText.test.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import InputText from './InputText';
+import { InputTextStateful } from './InputText';
 
-const meta: Meta<typeof InputText> = {
-    component: InputText,
+const meta: Meta<typeof InputTextStateful> = {
+    component: InputTextStateful,
     parameters: {
         layout: 'centered',
     },
@@ -20,7 +20,7 @@ const meta: Meta<typeof InputText> = {
 
 export default meta;
 
-type Story = StoryObj<typeof InputText>;
+type Story = StoryObj<typeof InputTextStateful>;
 
 export const Default: Story = {
     name: 'Default',
@@ -59,5 +59,14 @@ export const Default: Story = {
             await expect(args.onChange).toHaveBeenCalledTimes(insertTextLength);
             await expect(args.onInput).toHaveBeenCalledTimes(insertTextLength);
         });
+
+        const clearBtn = canvas.getByRole('button');
+
+        await step('InputText handles clear event', async () => {
+            await userEvent.click(clearBtn);
+
+            await expect(args.onChange).toHaveBeenLastCalledWith('');
+            await expect(input).toHaveValue('');
+        });
     },
 };

packages/components/src/inputs/InputText/InputText.tsx

@@ -3,11 +3,12 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import BaseInput from '@ids-internal/partials/BaseInput';
 import ClearBtn from '../../ui/ClearBtn';
 import { createCssClassNames } from '@ids-internal/shared/css.class.names';
+import withStateValue from '@ids-internal/hoc/withStateValue';
 
 import { ComponentEntryDataType } from '@ids-types/general';
 import { InputTextProps } from './InputText.types';
 
-const Input = ({
+const InputText = ({
     name,
     onBlur = () => undefined,
     onChange = () => undefined,
@@ -116,4 +117,6 @@ const Input = ({
     );
 };
 
-export default Input;
+export default InputText;
+
+export const InputTextStateful = withStateValue<string | number>(InputText);

packages/components/src/inputs/InputText/index.ts

@@ -1,5 +1,6 @@
-import InputText from './InputText';
+import InputText, { InputTextStateful } from './InputText';
 import { InputTextProps } from './InputText.types';
 
 export default InputText;
+export { InputTextStateful };
 export type { InputTextProps };

packages/components/src/internal/hoc/withStateValue.tsx

@@ -0,0 +1,29 @@
+import React, { FC, useState } from 'react';
+
+type OnChangeFn<T> = (value: T, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
+interface WrappedComponentProps<T> {
+    onChange?: OnChangeFn<T>;
+    value: T;
+    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default <T,>(WrappedComponent: FC<any>) => {
+    const WrapperComponent = ({ value, onChange, ...restProps }: WrappedComponentProps<T>) => {
+        const [componentValue, setComponentValue] = useState(value);
+
+        const handleChange = (...args: Parameters<OnChangeFn<T>>): ReturnType<OnChangeFn<T>> => {
+            setComponentValue(args[0]);
+
+            if (onChange) {
+                onChange(...args);
+            }
+        };
+
+        return <WrappedComponent {...restProps} onChange={handleChange} value={componentValue} />;
+    };
+
+    WrapperComponent.displayName = `withStateValue(${WrappedComponent.displayName ?? WrappedComponent.name})`;
+
+    return WrapperComponent;
+};