initial version of the multi line input (#107)

* initial version of the multi select input

* changed direction and fixed tab index

src/components/multi-line-input/MultiLineInput.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { useFieldArray, UseFormMethods } from "react-hook-form";
+import {
+  TextInput,
+  Split,
+  SplitItem,
+  Button,
+  ButtonVariant,
+} from "@patternfly/react-core";
+import { MinusIcon, PlusIcon } from "@patternfly/react-icons";
+
+export type MultiLineInputProps = {
+  form: UseFormMethods;
+  name: string;
+};
+
+export const MultiLineInput = ({ name, form }: MultiLineInputProps) => {
+  const { register, control } = form;
+  const { fields, append, remove } = useFieldArray({
+    name,
+    control,
+  });
+  return (
+    <>
+      {fields.map(({ id, value }, index) => (
+        <Split key={id}>
+          <SplitItem>
+            <TextInput
+              ref={register()}
+              name={`${name}[${index}].value`}
+              defaultValue={value}
+            />
+          </SplitItem>
+          <SplitItem>
+            {index === fields.length - 1 && (
+              <Button
+                variant={ButtonVariant.link}
+                onClick={() => append({})}
+                tabIndex={-1}
+              >
+                <PlusIcon />
+              </Button>
+            )}
+            {index !== fields.length - 1 && (
+              <Button
+                variant={ButtonVariant.link}
+                onClick={() => remove(index)}
+                tabIndex={-1}
+              >
+                <MinusIcon />
+              </Button>
+            )}
+          </SplitItem>
+        </Split>
+      ))}
+    </>
+  );
+};

src/stories/ConfirmationDialog.stories.tsx.bak

@@ -1,21 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import {
-  ConfirmationDialog,
-  ConfirmationDialogProps,
-} from "../components/confirmation-dialog/ConfirmationDialog";
-
-export default {
-  title: "Confirmation dailog",
-  component: ConfirmationDialog,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
-} as Meta;
-
-const Template: Story<ConfirmationDialogProps> = (args) => (
-  <ConfirmationDialog {...args} />
-);
-
-export const Dialog = Template.bind({});
-Dialog.args = {
-  onConfirm: () => "Confirm",
-};

src/stories/MultiLineInput.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { useForm } from "react-hook-form";
+import { Button } from "@patternfly/react-core";
+
+import {
+  MultiLineInput,
+  MultiLineInputProps,
+} from "../components/multi-line-input/MultiLineInput";
+
+export default {
+  title: "MultiLineInput component",
+  component: MultiLineInput,
+} as Meta;
+
+const Template: Story<MultiLineInputProps> = (args) => {
+  const form = useForm({
+    defaultValues: {
+      items: [{ value: "" }],
+    },
+  });
+  return (
+    <form
+      onSubmit={form.handleSubmit((data) => {
+        action("submit")(data);
+      })}
+    >
+      <MultiLineInput {...args} form={form} />
+      <br />
+      <br />
+      <Button type="submit">Submit</Button>
+    </form>
+  );
+};
+
+export const View = Template.bind({});
+View.args = {
+  name: "items",
+};