From 6c5c5a3f23a40fbb19d11e7d7226d5d8c6bacf82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20Dombya?=
 <135591453+hervedombya@users.noreply.github.com>
Date: Mon, 18 Dec 2023 15:40:38 +0100
Subject: [PATCH 1/2] Add InputList component and related files

Remove unused import in inputlist.stories.tsx

Fix disabled state in CopyButton component

Add react-hook-form dependency and update input component

Update inputlist stories
---
 package-lock.json                             |  24 +++-
 package.json                                  |   3 +-
 .../buttonv2/CopyButton.component.tsx         |   2 +-
 src/lib/components/inputlist/InputButtons.tsx | 111 ++++++++++++++++++
 .../inputlist/InputList.component.tsx         |  97 +++++++++++++++
 src/lib/components/inputv2/inputv2.tsx        |   8 +-
 src/lib/index.ts                              |   1 +
 stories/inputlist.stories.tsx                 |  57 +++++++++
 8 files changed, 297 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/inputlist/InputButtons.tsx
 create mode 100644 src/lib/components/inputlist/InputList.component.tsx
 create mode 100644 stories/inputlist.stories.tsx

diff --git a/package-lock.json b/package-lock.json
index cb3c9c0d06..dbae1d495b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
       "dependencies": {
         "@floating-ui/dom": "^0.1.10",
         "@storybook/preview-api": "^7.5.3",
-        "framer-motion": "^4.1.17"
+        "framer-motion": "^4.1.17",
+        "react-hook-form": "^7.49.2"
       },
       "devDependencies": {
         "@babel/cli": "^7.17.10",
@@ -23924,6 +23925,22 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.49.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.2.tgz",
+      "integrity": "sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==",
+      "engines": {
+        "node": ">=18",
+        "pnpm": "8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-input-autosize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
@@ -46438,6 +46455,11 @@
         "@babel/runtime": "^7.12.5"
       }
     },
+    "react-hook-form": {
+      "version": "7.49.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.2.tgz",
+      "integrity": "sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA=="
+    },
     "react-input-autosize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
diff --git a/package.json b/package.json
index c58e2fc77f..875df0fe6c 100644
--- a/package.json
+++ b/package.json
@@ -151,6 +151,7 @@
   "dependencies": {
     "@floating-ui/dom": "^0.1.10",
     "@storybook/preview-api": "^7.5.3",
-    "framer-motion": "^4.1.17"
+    "framer-motion": "^4.1.17",
+    "react-hook-form": "^7.49.2"
   }
 }
diff --git a/src/lib/components/buttonv2/CopyButton.component.tsx b/src/lib/components/buttonv2/CopyButton.component.tsx
index dce9beb6bd..ff06b70cee 100644
--- a/src/lib/components/buttonv2/CopyButton.component.tsx
+++ b/src/lib/components/buttonv2/CopyButton.component.tsx
@@ -67,7 +67,7 @@ export const CopyButton = ({
           }
         />
       }
-      disabled={copyStatus === COPY_STATE_SUCCESS}
+      disabled={copyStatus === COPY_STATE_SUCCESS || props.disabled}
       onClick={() => copy(textToCopy)}
       type="button"
       tooltip={
diff --git a/src/lib/components/inputlist/InputButtons.tsx b/src/lib/components/inputlist/InputButtons.tsx
new file mode 100644
index 0000000000..50e8a49ef9
--- /dev/null
+++ b/src/lib/components/inputlist/InputButtons.tsx
@@ -0,0 +1,111 @@
+import styled, { CSSProperties } from 'styled-components';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { useCallback, useMemo } from 'react';
+import { Box } from '../box/Box';
+import { Icon } from '../icon/Icon.component';
+
+const CustomButton = styled(Button)<{ isVisible?: boolean }>`
+  ${(props) =>
+    !props.isVisible
+      ? `
+        display: none;
+    `
+      : ''}
+`;
+const isEmptyItem = (item) => item.key === '' && item.value === '';
+
+type AddButtonProps<T = unknown> = {
+  index: number;
+  items: Array<T>;
+  insertEntry: () => void;
+  disabled?: boolean;
+  iconStyle?: CSSProperties;
+};
+
+export const AddButton = ({
+  index,
+  items,
+  insertEntry,
+  disabled,
+  iconStyle,
+}: AddButtonProps) => {
+  const itemsLength = items.length;
+  const itemsIndex = items[index];
+  const itemsIndexKey = (items[index] as { key: string }).key;
+  const itemsIndexValue = (items[index] as { value: string }).value;
+
+  const isDisabled = useMemo(() => {
+    if (itemsIndex && itemsIndexKey === '' && itemsIndexValue === '') {
+      return true;
+    }
+    return disabled || false;
+  }, [itemsIndex, itemsIndexKey, itemsIndexValue, disabled]);
+
+  const isVisible = useMemo(() => {
+    return !(itemsLength > 0 && index !== itemsLength - 1);
+  }, [itemsLength, index]);
+
+  const onClickFn = useCallback(() => {
+    if (!(itemsLength > 0 && index !== itemsLength - 1)) {
+      insertEntry();
+    }
+  }, [itemsLength, index, insertEntry]);
+
+  return (
+    <>
+      {!isVisible && <Box ml={16} />}
+      <CustomButton
+        isVisible={isVisible}
+        type="button"
+        variant="outline"
+        disabled={isDisabled}
+        name={`addbtn${index}`}
+        id={`addbtn${index}`}
+        onClick={onClickFn}
+        aria-label="Add"
+        tooltip={{
+          overlay: 'Add',
+          placement: 'top',
+        }}
+        icon={<Icon name="Add-plus" />}
+      />
+    </>
+  );
+};
+type SubButtonProps<T = unknown> = {
+  index: number;
+  items: Array<T>;
+  deleteEntry: (arg0: number) => void;
+  disabled?: boolean;
+  iconStyle?: CSSProperties;
+};
+export const SubButton = ({
+  index,
+  items,
+  deleteEntry,
+  disabled,
+  iconStyle,
+}: SubButtonProps) => {
+  let isDisabled = disabled || false;
+
+  if (items.length === 1 && isEmptyItem(items[0])) {
+    isDisabled = true;
+  }
+
+  return (
+    <Button
+      variant="danger"
+      type="button"
+      disabled={isDisabled}
+      aria-label="Remove"
+      name={`delbtn${index}`}
+      id={`delbtn${index}`}
+      onClick={() => deleteEntry(index)}
+      tooltip={{
+        overlay: 'Remove',
+        placement: 'top',
+      }}
+      icon={<Icon name="Remove-minus" />}
+    />
+  );
+};
diff --git a/src/lib/components/inputlist/InputList.component.tsx b/src/lib/components/inputlist/InputList.component.tsx
new file mode 100644
index 0000000000..21b08e1567
--- /dev/null
+++ b/src/lib/components/inputlist/InputList.component.tsx
@@ -0,0 +1,97 @@
+import { HTMLProps, forwardRef } from 'react';
+import { RefCallBack } from 'react-hook-form';
+import { Box } from '../box/Box';
+import { Input } from '../inputv2/inputv2';
+import { AddButton, SubButton } from './InputButtons';
+
+export type InputListProps<T> = HTMLProps<HTMLInputElement> & {
+  ref: RefCallBack;
+  min?: string | number;
+  max?: string | number;
+  maxLength?: number;
+  minLength?: number;
+  pattern?: string;
+  required?: boolean;
+  disabled?: boolean;
+  maxItems?: number;
+  value: T[];
+};
+
+function InternalInputList<
+  T extends string | number | readonly string[] | undefined,
+>({
+  onChange,
+  onBlur,
+  ref,
+  min,
+  max,
+  maxLength,
+  minLength,
+  pattern,
+  required,
+  disabled,
+  maxItems,
+  id,
+  value,
+  ...rest
+}: InputListProps<T>) {
+  const isMaxItemsReached =
+    maxItems !== undefined && maxItems !== null && value.length === maxItems;
+
+  const insertEntry = () => {
+    if (!isMaxItemsReached) {
+      onChange?.({
+        target: { value: [...(value ?? []), ''] },
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
+    }
+  };
+
+  const deleteEntry = (entryIndex: number) => {
+    let tempValues = [...value];
+    tempValues.splice(entryIndex, 1);
+    if (tempValues.length === 0) {
+      tempValues = [''] as T[];
+    }
+    onChange?.({
+      target: { value: tempValues },
+    } as unknown as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  return (
+    <>
+      {value.map((val, index) => (
+        <Box display="flex" gap="0.25rem" alignItems="center" key={index}>
+          <Input
+            id={`${id}[${index}]`}
+            inputSize={'1/2'}
+            value={val}
+            onChange={(evt) => {
+              const tempValues = [...value];
+              tempValues[index] = evt.target.value as T;
+              onChange?.({
+                target: { value: tempValues },
+              } as unknown as React.ChangeEvent<HTMLInputElement>);
+            }}
+            {...rest}
+          />
+          <SubButton
+            index={index}
+            key={`${id}-delete-${value.join(',') + index}`}
+            deleteEntry={deleteEntry}
+            items={value}
+            disabled={value.length === 1 && value[0] === ''}
+          />
+          <AddButton
+            index={index}
+            key={`${id}-add-${value.join(',') + index}`}
+            insertEntry={insertEntry}
+            items={value}
+            disabled={val === '' || isMaxItemsReached}
+          />
+        </Box>
+      ))}
+    </>
+  );
+}
+
+export const InputList = forwardRef(InternalInputList);
diff --git a/src/lib/components/inputv2/inputv2.tsx b/src/lib/components/inputv2/inputv2.tsx
index c453fcf27f..63e8acf4eb 100644
--- a/src/lib/components/inputv2/inputv2.tsx
+++ b/src/lib/components/inputv2/inputv2.tsx
@@ -86,12 +86,14 @@ const SelfCenterredIcon = styled(Icon)`
   align-self: center;
 `;
 
+type InputSize = '1' | '2/3' | '1/2' | '1/3';
+
 type Props = {
   error?: string;
   id: string;
   leftIcon?: IconName;
   rightIcon?: IconName;
-  size?: '1' | '2/3' | '1/2' | '1/3';
+  inputSize?: InputSize;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 export const Input = forwardRef<HTMLInputElement, Props>(
@@ -103,7 +105,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       leftIcon,
       rightIcon,
       placeholder,
-      size,
+      inputSize,
       ...inputProps
     },
     ref,
@@ -119,7 +121,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       <InputBorder
         disabled={!!(disabled || disabledFromFieldContext)}
         hasError={!!(error || errorFromFieldContext)}
-        width={convertSizeToRem(size)}
+        width={convertSizeToRem(inputSize)}
       >
         <InputContainer
           isContextAvailable={isContextAvailable}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 3a7a92ddbc..cdf9a03dfc 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -72,3 +72,4 @@ export { ToastProvider, useToast } from './components/toast/ToastProvider';
 export { useMutationsHandler } from './components/toast/useMutationsHandler';
 export { Stepper } from './components/steppers/Stepper.component';
 export { InfoMessage } from './components/infomessage/InfoMessage.component';
+export { InputList } from './components/inputlist/InputList.component';
diff --git a/stories/inputlist.stories.tsx b/stories/inputlist.stories.tsx
new file mode 100644
index 0000000000..c488d9a418
--- /dev/null
+++ b/stories/inputlist.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { InputList } from '../src/lib/components/inputlist/InputList.component';
+import { Wrapper as StoryWrapper } from './common';
+import { FormSection } from '../src/lib/components/form/Form.component';
+import { Controller, useForm } from 'react-hook-form';
+
+const meta: Meta<typeof InputList> = {
+  tags: ['autodocs'],
+  title: 'Components/Inputs/InputList',
+  component: InputList,
+};
+export default meta;
+
+interface InputListForm {
+  firstNames: string[];
+  lastNames: string[];
+}
+
+const ExampleList = () => {
+  const { control } = useForm<InputListForm>({
+    mode: 'all',
+    defaultValues: {
+      firstNames: [''],
+      lastNames: [''],
+    },
+  });
+
+  return (
+    <FormSection>
+      <Controller
+        control={control}
+        rules={{
+          required: true,
+        }}
+        render={({ field: { onChange, onBlur, value } }) => (
+          <InputList
+            placeholder="First name"
+            onBlur={onBlur}
+            onChange={onChange}
+            value={value}
+          />
+        )}
+        name="firstNames"
+      />
+    </FormSection>
+  );
+};
+type Story = StoryObj<typeof InputList>;
+export const SimpleListOfInputs: Story = {
+  name: 'List of inputs',
+  render: () => (
+    <StoryWrapper>
+      <ExampleList />
+    </StoryWrapper>
+  ),
+};

From ff085d84fc33bc1de77b07864c24c519a274c14c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20Dombya?=
 <135591453+hervedombya@users.noreply.github.com>
Date: Tue, 19 Dec 2023 16:07:04 +0100
Subject: [PATCH 2/2] Update input buttons and input list component

---
 src/lib/components/inputlist/InputButtons.tsx |   4 +-
 .../inputlist/InputList.component.tsx         |  51 ++++-----
 .../components/inputlist/InputList.test.tsx   | 102 ++++++++++++++++++
 3 files changed, 130 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/components/inputlist/InputList.test.tsx

diff --git a/src/lib/components/inputlist/InputButtons.tsx b/src/lib/components/inputlist/InputButtons.tsx
index 50e8a49ef9..6179c773ad 100644
--- a/src/lib/components/inputlist/InputButtons.tsx
+++ b/src/lib/components/inputlist/InputButtons.tsx
@@ -62,7 +62,7 @@ export const AddButton = ({
         name={`addbtn${index}`}
         id={`addbtn${index}`}
         onClick={onClickFn}
-        aria-label="Add"
+        aria-label={`Add${index}`}
         tooltip={{
           overlay: 'Add',
           placement: 'top',
@@ -97,7 +97,7 @@ export const SubButton = ({
       variant="danger"
       type="button"
       disabled={isDisabled}
-      aria-label="Remove"
+      aria-label={`Remove${index}`}
       name={`delbtn${index}`}
       id={`delbtn${index}`}
       onClick={() => deleteEntry(index)}
diff --git a/src/lib/components/inputlist/InputList.component.tsx b/src/lib/components/inputlist/InputList.component.tsx
index 21b08e1567..a453fb9e08 100644
--- a/src/lib/components/inputlist/InputList.component.tsx
+++ b/src/lib/components/inputlist/InputList.component.tsx
@@ -19,22 +19,24 @@ export type InputListProps<T> = HTMLProps<HTMLInputElement> & {
 
 function InternalInputList<
   T extends string | number | readonly string[] | undefined,
->({
-  onChange,
-  onBlur,
-  ref,
-  min,
-  max,
-  maxLength,
-  minLength,
-  pattern,
-  required,
-  disabled,
-  maxItems,
-  id,
-  value,
-  ...rest
-}: InputListProps<T>) {
+>(
+  {
+    onChange,
+    onBlur,
+    min,
+    max,
+    maxLength,
+    minLength,
+    pattern,
+    required,
+    disabled,
+    maxItems,
+    value,
+    name,
+    ...rest
+  }: InputListProps<T>,
+  _,
+) {
   const isMaxItemsReached =
     maxItems !== undefined && maxItems !== null && value.length === maxItems;
 
@@ -47,13 +49,11 @@ function InternalInputList<
   };
 
   const deleteEntry = (entryIndex: number) => {
-    let tempValues = [...value];
-    tempValues.splice(entryIndex, 1);
-    if (tempValues.length === 0) {
-      tempValues = [''] as T[];
-    }
+    const newValues = value.filter((_, index) => index !== entryIndex);
+    const updatedValues = newValues.length === 0 ? ([''] as T[]) : newValues;
+
     onChange?.({
-      target: { value: tempValues },
+      target: { value: updatedValues },
     } as unknown as React.ChangeEvent<HTMLInputElement>);
   };
 
@@ -62,7 +62,8 @@ function InternalInputList<
       {value.map((val, index) => (
         <Box display="flex" gap="0.25rem" alignItems="center" key={index}>
           <Input
-            id={`${id}[${index}]`}
+            id={`${name}[${index}]`}
+            aria-label={`${name}${index}`}
             inputSize={'1/2'}
             value={val}
             onChange={(evt) => {
@@ -76,14 +77,14 @@ function InternalInputList<
           />
           <SubButton
             index={index}
-            key={`${id}-delete-${value.join(',') + index}`}
+            key={`${name}-delete-${value.join(',') + index}`}
             deleteEntry={deleteEntry}
             items={value}
             disabled={value.length === 1 && value[0] === ''}
           />
           <AddButton
             index={index}
-            key={`${id}-add-${value.join(',') + index}`}
+            key={`${name}-add-${value.join(',') + index}`}
             insertEntry={insertEntry}
             items={value}
             disabled={val === '' || isMaxItemsReached}
diff --git a/src/lib/components/inputlist/InputList.test.tsx b/src/lib/components/inputlist/InputList.test.tsx
new file mode 100644
index 0000000000..02a1c71d34
--- /dev/null
+++ b/src/lib/components/inputlist/InputList.test.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { InputList, InputListProps } from './InputList.component';
+import { FormSection } from '../form/Form.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+describe('InputList', () => {
+  const onChangeMock = jest.fn();
+
+  const renderInputList = (props: InputListProps<string[]>) => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <FormSection>
+          <InputList
+            placeholder="Input list Test"
+            onChange={onChangeMock}
+            value={props.value}
+            name="inputListTest"
+          />
+        </FormSection>
+      </QueryClientProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    onChangeMock.mockClear();
+  });
+
+  it('should render an empty input list', () => {
+    renderInputList({
+      value: [''],
+    });
+
+    expect(screen.getByLabelText('inputListTest0')).toHaveValue('');
+  });
+
+  it('should render an input list with initial values', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const inputElements = screen.getAllByRole('textbox');
+
+    expect(inputElements).toHaveLength(initialValues.length);
+
+    inputElements.forEach((input, index) => {
+      expect(input).toHaveValue(initialValues[index]);
+    });
+  });
+
+  it('should add a new input when clicking the add button', () => {
+    const initialValues = ['Value 1', 'Value 2'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const addButton = screen.getByLabelText('Add1');
+
+    fireEvent.click(addButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: [...initialValues, ''] },
+    });
+  });
+
+  it('should delete an input when clicking the delete button', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const deleteButton = screen.getByLabelText('Remove1');
+
+    fireEvent.click(deleteButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: ['Value 1', 'Value 3'] },
+    });
+  });
+
+  it('should update the value of an input', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const inputElements = screen.getAllByRole('textbox');
+
+    const newValue = 'New Value';
+
+    fireEvent.change(inputElements[1], { target: { value: newValue } });
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: ['Value 1', newValue, 'Value 3'] },
+    });
+  });
+});