@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/molecules/forms/input-tags/components/ChoicesTags.stories.tsx

@@ -0,0 +1,110 @@
+import "../all";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { InputTags } from "../InputTags";
+
+/**
+ * The InputTags component enables users to create new options in the text field.
+ *
+ * ```tsx
+ * import {InputTags} from "@tsed/react-formio/molecules/forms/input-tags/all";
+ *
+ * or
+ *
+ * import "@tsed/react-formio/molecules/forms/input-tags/components/ChoicesTags";
+ * import "@tsed/react-formio/molecules/forms/input-tags/components/ReactTags";
+ * import "@tsed/react-formio/molecules/forms/input-text/InputText";
+ * import {InputTags} from "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+ *
+ * ```
+ */
+export default {
+  title: "forms/InputTags/ChoicesJs",
+  component: InputTags,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "object"
+    },
+    size: {
+      control: "select",
+      options: ["small", "normal"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    description: {
+      control: "text"
+    },
+    layout: {
+      control: "select",
+      options: ["choicesjs", "react"]
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  parameters: {},
+  args: {
+    layout: "choicesjs"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof InputTags>;
+
+type Story = StoryObj<typeof InputTags>;
+
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: ["test"],
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: ["test"],
+    size: "small",
+    placeholder: "Placeholder"
+  }
+};
+
+export const AppendBefore: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return <InputTags before={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+  },
+  args: {
+    label: "Label",
+    value: [],
+    name: "name",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+
+export const AppendAfter: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return <InputTags after={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+  },
+  args: {
+    label: "Label",
+    value: [],
+    name: "name",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};

package/src/molecules/forms/input-tags/components/ChoicesTags.tsx

@@ -0,0 +1,72 @@
+import Choices from "@formio/choices.js";
+import { useEffect, useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+import { registerComponent } from "../../../../registries/components";
+import { cleanFormControlProps } from "../../form-control/FormControl";
+import type { InputTagsProps } from "../InputTags.interface";
+
+export function useChoiceTags<Data = string>(props: InputTagsProps<Data>) {
+  const { value, onChange, name = "", delimiter, customProperties, ...otherProps } = props;
+  const ref = useRef<HTMLInputElement | null>(null);
+  const instanceRef = useRef<Choices | null>(null);
+
+  const onAdd = useDebouncedCallback((add: Data) => {
+    const values = ((value || []) as Data[]).concat(add);
+
+    onChange?.(name, [...values]);
+  }, 100);
+
+  const onDelete = useDebouncedCallback((remove: Data) => {
+    const values = (value || []).filter((v) => v !== remove);
+
+    onChange?.(name, [...values]);
+  });
+
+  useEffect(() => {
+    if (ref.current) {
+      const instance = new Choices(ref.current!, {
+        duplicateItemsAllowed: false,
+        ...customProperties,
+        delimiter,
+        editItems: true,
+        removeItemButton: true
+      });
+
+      instance.setValue((value || []) as string[]);
+
+      instanceRef.current = instance;
+
+      instance.passedElement.element.addEventListener("addItem", (event: { detail: { value: unknown } }) => {
+        onAdd(event.detail.value as Data);
+      });
+
+      instance.passedElement.element.addEventListener("removeItem", (event: { detail: { value: unknown } }) => {
+        onDelete(event.detail.value as Data);
+      });
+    }
+
+    return () => {
+      if (instanceRef.current) {
+        instanceRef.current.destroy();
+      }
+    };
+  }, [delimiter]);
+
+  return {
+    otherProps: {
+      ...otherProps,
+      name
+    },
+    ref,
+    instanceRef
+  };
+}
+
+export function ChoicesTags<Data = string>(props: InputTagsProps<Data>) {
+  const { ref, otherProps } = useChoiceTags<Data>(props);
+
+  return <input type='text' {...cleanFormControlProps(otherProps)} ref={ref} />;
+}
+
+registerComponent("InputTags.choicesjs", ChoicesTags);

package/src/molecules/forms/input-tags/components/ReactTags.stories.tsx

@@ -0,0 +1,140 @@
+import "../all";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { type CreatableProps } from "react-select/creatable";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { InputTags } from "../InputTags";
+
+/**
+ * The InputTags component enables users to create new options in the text field.
+ *
+ * ```tsx
+ * import {InputTags} from "@tsed/react-formio/molecules/forms/input-tags/all";
+ *
+ * or
+ *
+ * import "@tsed/react-formio/molecules/forms/input-tags/components/ReactTags";
+ * import "@tsed/react-formio/molecules/forms/input-text/InputText";
+ * import {InputTags} from "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+ *
+ * ```
+ */
+export default {
+  title: "forms/InputTags/React",
+  component: InputTags,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "object"
+    },
+    size: {
+      control: "select",
+      options: ["small", "normal"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    description: {
+      control: "text"
+    },
+    layout: {
+      control: "select",
+      options: ["choicesjs", "react"]
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  parameters: {},
+  args: {
+    layout: "react"
+  },
+  tags: ["autodocs"],
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { value, onChange } = useValue(args);
+
+    return <InputTags {...args} value={value} onChange={onChange} />;
+  }
+} satisfies Meta<typeof InputTags>;
+
+type Story = StoryObj<typeof InputTags>;
+
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: ["test"],
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: ["test"],
+    size: "small",
+    placeholder: "Placeholder"
+  }
+};
+
+export const AppendBefore: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return <InputTags before={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+  },
+  args: {
+    label: "Label",
+    value: [],
+    name: "name",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+
+export const AppendAfter: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return <InputTags after={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+  },
+  args: {
+    label: "Label",
+    value: [],
+    name: "name",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+
+/**
+ * InputTags using the [react-select](https://react-select.com/) library can
+ * be customized using the `customProperties` prop.
+ *
+ * For example, you can use the `customProperties` prop to add a list of options.
+ *
+ * See the [react-select documentation](https://react-select.com/creatable) for more information.
+ */
+export const CustomProperties: Story = {
+  args: {
+    value: [],
+    name: "name",
+    label: "Label",
+    placeholder: "Select or Create...",
+    customProperties: {
+      options: [
+        { value: "chocolate", label: "Chocolate" },
+        { value: "strawberry", label: "Strawberry" },
+        { value: "vanilla", label: "Vanilla" }
+      ]
+    } satisfies CreatableProps<unknown, true, any>
+  }
+};

package/src/molecules/forms/input-tags/components/ReactTags.tsx

@@ -0,0 +1,38 @@
+import makeAnimated from "react-select/animated";
+import CreatableSelect from "react-select/creatable";
+
+import { registerComponent } from "../../../../registries/components";
+import { InputTagsProps } from "../InputTags.interface";
+
+const animatedComponents = makeAnimated();
+
+export function ReactTags(props: InputTagsProps) {
+  const { value = [], placeholder, customProperties = {} } = props;
+
+  return (
+    <CreatableSelect
+      {...customProperties}
+      id={props.id}
+      placeholder={placeholder}
+      className='react-select-container'
+      classNamePrefix='react-select'
+      name={props.name || ""}
+      components={animatedComponents}
+      isDisabled={props.disabled}
+      isMulti
+      value={value.map((v) => {
+        return { label: v, value: v };
+      })}
+      onChange={(value) => {
+        props.onChange?.(
+          props.name,
+          value.map(({ value }) => {
+            return value;
+          })
+        );
+      }}
+    />
+  );
+}
+
+registerComponent("InputTags.react", ReactTags);

package/src/molecules/forms/input-text/InputText.interface.ts

@@ -0,0 +1,5 @@
+import type { FormControlProps } from "../form-control/FormControl";
+
+export interface InputTextProps<Data = any> extends FormControlProps<Data> {
+  debounceDelay?: number;
+}

package/src/{components/input-text/inputText.component.spec.tsx → molecules/forms/input-text/InputText.spec.tsx}

@@ -1,27 +1,28 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./inputText.stories";
+import { InputText } from "./InputText";
+import { Usage } from "./InputText.stories";
 
 describe("input-text", () => {
   it("should display the input-text component", () => {
-    render(<Sandbox {...Sandbox.args} name={"test"} />);
+    render(<InputText {...Usage.args} name={"test"} />);
     const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
   });
 
   it("should display the input-text component with a different size", () => {
-    render(<Sandbox {...Sandbox.args} name={"test"} size='small' />);
+    render(<InputText {...Usage.args} name={"test"} size='small' />);
     const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
-    expect(input).toHaveClass("form-control-small");
+    expect(screen.getByTestId("form-group-test")).toHaveClass("-size-small");
   });
 
   it("should display the input-text with placeholder", () => {
     const placeholderTest = "placeholder test";
 
-    render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    render(<InputText {...Usage.args} name={"test"} placeholder={placeholderTest} />);
     const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
@@ -31,7 +32,7 @@ describe("input-text", () => {
   it("should change the value of the input-text", () => {
     const placeholderTest = "placeholder test";
 
-    render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    render(<InputText {...Usage.args} name={"test"} placeholder={placeholderTest} />);
     const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
@@ -43,7 +44,7 @@ describe("input-text", () => {
   it("should NOT change the value of the input-text if the value is NOT of type number", () => {
     const placeholderTest = "placeholder test";
 
-    render(<Sandbox {...Sandbox.args} type='number' name={"test"} placeholder={placeholderTest} />);
+    render(<InputText {...Usage.args} type='number' name={"test"} placeholder={placeholderTest} />);
     const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();

package/src/molecules/forms/input-text/InputText.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
+
+import { iconClass } from "../../../utils/iconClass";
+import { useValue } from "../../__fixtures__/useValue.hook";
+import { InputText } from "./InputText";
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+/**
+ * Text Fields let users enter and edit text.
+ *
+ * ```tsx
+ * import {InputTags} from "@tsed/react-formio/molecules/forms/input-text/InputText";
+ * ```
+ */
+export default {
+  title: "forms/InputText",
+  component: InputText,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    type: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "text"
+    },
+    required: {
+      control: "boolean"
+    },
+    size: {
+      control: "select",
+      options: ["small", "normal"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    description: {
+      control: "text"
+    },
+    onChange: {
+      action: "onChange"
+    },
+    onBlur: {
+      action: "onBlur"
+    },
+    onFocus: {
+      action: "onFocus"
+    }
+  },
+  parameters: {},
+  tags: ["autodocs"]
+} satisfies Meta<typeof InputText>;
+
+type Story = StoryObj<typeof InputText>;
+/**
+ * Basic usage of the InputText.
+ */
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder"
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.getByPlaceholderText("Placeholder");
+    await userEvent.type(input, "Test input", { delay: 100 });
+    await expect(input).toHaveValue("Test input");
+  }
+};
+/**
+ * Debounce the value when the user types.
+ */
+export const Debounced: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const props = useValue(args);
+    return (
+      <div>
+        <InputText {...props} />
+        <div data-testid={"debounced-value"}>Value: {props.value}</div>
+      </div>
+    );
+  },
+  args: {
+    name: "name",
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder"
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.getByPlaceholderText("Placeholder");
+    await userEvent.type(input, "Test input", { delay: 100 });
+
+    expect(canvas.getByTestId("debounced-value")).toHaveTextContent("Value:");
+
+    await delay(500);
+
+    expect(canvas.getByTestId("debounced-value")).toHaveTextContent("Value: Test input");
+  }
+};
+/**
+ * Add a prefix to the input text.
+ */
+export const AppendBefore: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const props = useValue(args);
+    return <InputText prefix={<i className={iconClass(undefined, "calendar")} />} {...props} />;
+  },
+  args: {
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+/**
+ * Add a suffix to the input text.
+ */
+export const AppendAfter: Story = {
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const props = useValue(args);
+    return <InputText suffix={<i className={iconClass(undefined, "calendar")} />} {...props} />;
+  },
+  args: {
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder"
+  }
+};
+/**
+ * Change the type of the input text.
+ */
+export const TypeNumber: Story = {
+  render(args: any) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const props = useValue(args);
+    return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...props} />;
+  },
+  args: {
+    label: "Label",
+    type: "number",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    description: "Use dollars!"
+  }
+};
+/**
+ * Change the size of the input text.
+ */
+export const Sizing: Story = {
+  render(args: any) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const props = useValue(args);
+
+    return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...props} />;
+  },
+  args: {
+    label: "Label",
+    type: "number",
+    value: "",
+    size: "small",
+    placeholder: "Placeholder",
+    description: "Use dollars!"
+  }
+};

package/src/molecules/forms/input-text/InputText.tsx

@@ -0,0 +1,63 @@
+import { ComponentType, useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+import { getComponent, registerComponent } from "../../../registries/components";
+import { getEventValue } from "../../../utils/getEventValue";
+import { cleanFormControlProps, FormControl } from "../form-control/FormControl";
+import { InputTextProps } from "./InputText.interface";
+
+function Input<Data = any>(props: InputTextProps<Data>) {
+  const { name, id = name, value, onChange, required, type, placeholder, debounceDelay = 300, ...otherProps } = props;
+
+  const [localValue, setValue] = useState(value);
+  const change = useDebouncedCallback(onChange || (() => {}), debounceDelay);
+
+  useEffect(() => {
+    setValue(value);
+  }, [value]);
+
+  return (
+    <input
+      {...cleanFormControlProps(otherProps, ["className"])}
+      type={type || "text"}
+      data-testid={`input_${name || ""}`}
+      className={"form-control"}
+      id={id}
+      name={name}
+      required={required}
+      value={(localValue || "") as any}
+      placeholder={placeholder}
+      onChange={(event) => {
+        const value = getEventValue(event);
+        setValue(value);
+
+        return change && change(name, value);
+      }}
+    />
+  );
+}
+
+registerComponent("Input", Input);
+
+export function InputText<Data = any>(props: InputTextProps<Data>) {
+  const { name, id = name, label, required, size, before, after, description, className } = props;
+  const Input = getComponent<ComponentType<InputTextProps<Data>>>("Input");
+
+  return (
+    <FormControl
+      id={id}
+      name={name}
+      label={label}
+      required={required}
+      description={description}
+      before={before}
+      after={after}
+      size={size}
+      className={className}
+    >
+      <Input {...props} />
+    </FormControl>
+  );
+}
+
+registerComponent("InputText", InputText);