@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/molecules/button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Icon } from "../../atoms/icon/Icon";
 import { Button, BUTTON_VARIANTS } from "./Button";

package/src/molecules/button/Button.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { type ButtonHTMLAttributes, forwardRef, type LegacyRef, type PropsWithChildren } from "react";
+import { type ButtonHTMLAttributes, forwardRef, type PropsWithChildren } from "react";
 
 import { registerComponent } from "../../registries/components";
 
@@ -24,31 +24,50 @@ export const BUTTON_VARIANTS = [
   "outline-link"
 ];
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface BaseButtonProps<T extends HTMLElement> extends ButtonHTMLAttributes<T> {
+  tag?: "button" | "a" | "input" | "div";
   variant?: (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS] | string;
 }
 
-export const Button = forwardRef(
-  ({ variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref: LegacyRef<HTMLButtonElement>) => {
-    return (
-      <button
-        {...props}
-        ref={ref}
-        className={cx(
-          "btn flex gap-1",
-          {
-            disabled: props.disabled
-          },
-          `btn-${variant}`,
-          className
-        )}
-        disabled={props.disabled}
-        onClick={(evt) => !props.disabled && props.onClick?.(evt)}
-      >
-        {children}
-      </button>
-    );
-  }
-);
+interface HTMLAnchorProps extends BaseButtonProps<HTMLAnchorElement> {
+  tag: "a";
+}
+
+interface HTMLButtonProps extends BaseButtonProps<HTMLButtonElement> {
+  tag?: "button";
+}
+
+interface HTMLInputProps extends BaseButtonProps<HTMLInputElement> {
+  tag: "input";
+}
+
+interface HTMLDivProps extends BaseButtonProps<HTMLDivElement> {
+  tag: "div";
+}
+
+export type ButtonProps = HTMLAnchorProps | HTMLButtonProps | HTMLInputProps | HTMLDivProps;
+
+export const Button = forwardRef(({ tag: Tag = "button", variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref) => {
+  return (
+    <Tag
+      {...(props as any)}
+      ref={ref as any}
+      className={cx(
+        "btn flex gap-1",
+        {
+          disabled: props.disabled
+        },
+        `btn-${variant}`,
+        className
+      )}
+      disabled={props.disabled}
+      onClick={(evt) => !props.disabled && props.onClick?.(evt as any)}
+    >
+      {children}
+    </Tag>
+  );
+});
+
+Button.displayName = "Button";
 
 registerComponent("Button", Button);

package/src/molecules/card/Card.tsx

@@ -1,6 +1,8 @@
 import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
+import { registerComponent } from "../../registries/components.js";
+
 export interface CardProps {
   label: string;
   className?: string;
@@ -18,3 +20,5 @@ export function Card({ children, label, className }: PropsWithChildren<CardProps
     </div>
   );
 }
+
+registerComponent("Card", Card);

package/src/molecules/forms/form-control/FormControl.spec.tsx

@@ -1,9 +1,12 @@
+import { Formio } from "@formio/js";
 import { render, screen } from "@testing-library/react";
 
 import { iconClass } from "../../../utils/iconClass";
 import { FormControl } from "./FormControl";
 import { Sandbox } from "./FormControl.stories";
 
+Formio.setProjectUrl("https://api.form.io");
+
 describe("form-control", () => {
   it("should display form control component", () => {
     render(<FormControl {...Sandbox.args} name='test' />);
@@ -34,9 +37,9 @@ describe("form-control", () => {
   });
 
   it("should display prefix", () => {
-    const fontAwsomeCalendarIcon = "fa fa-calendar";
+    const fontAwsomeCalendarIcon = "bi bi-calendar";
     const prefix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
-    render(<FormControl {...Sandbox.args} name='testPrefix' prefix={prefix} />);
+    render(<FormControl {...Sandbox.args} name='testPrefix' before={prefix} />);
 
     const formGroup = screen.getByTestId("form-group-testPrefix") as HTMLFormElement;
     const formControlPrefix = screen.getByTestId("form-control-prefix") as HTMLSpanElement;
@@ -48,9 +51,9 @@ describe("form-control", () => {
   });
 
   it("should display suffix", () => {
-    const fontAwsomeCalendarIcon = "fa fa-calendar";
+    const fontAwsomeCalendarIcon = "bi bi-calendar";
     const suffix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
-    render(<FormControl {...Sandbox.args} name='testSuffix' suffix={suffix} />);
+    render(<FormControl {...Sandbox.args} name='testSuffix' after={suffix} />);
 
     const formGroup = screen.getByTestId("form-group-testSuffix") as HTMLFormElement;
     const formControlSuffix = screen.getByTestId("form-control-suffix") as HTMLSpanElement;

package/src/molecules/forms/form-control/FormControl.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../utils/iconClass";
 import { FormControl } from "./FormControl";
@@ -38,15 +38,15 @@ export const Usage: Story = {
   args: {
     label: "Label",
     children: "[TEXTFIELD]",
-    prefix: <i className={iconClass(undefined, "calendar")} />
+    before: <i className={iconClass(undefined, "calendar")} />
   }
 };
 
-export const WithSuffix: Story = {
+export const AppendAfter: Story = {
   args: {
     label: "Label",
     children: "[TEXTFIELD]",
-    suffix: <i className={iconClass(undefined, "calendar")} />
+    after: <i className={iconClass(undefined, "calendar")} />
   }
 };
 

package/src/molecules/forms/form-control/FormControl.tsx

@@ -1,51 +1,75 @@
 import classnames from "classnames";
-import type { PropsWithChildren, ReactNode } from "react";
+import omit from "lodash/omit";
+import { HTMLAttributes, InputHTMLAttributes, PropsWithChildren, ReactNode } from "react";
 
-export interface FormControlProps<Data = any> {
-  id?: string;
-  name: string;
-  value?: Data;
-  required?: boolean;
+import { registerComponent } from "../../../registries/components";
+
+export type BaseFormControlProps<Value = unknown> = {
   label?: string;
-  className?: string;
-  onChange?: (name: string, value: any) => void;
   description?: string | ReactNode;
-  prefix?: ReactNode | string;
-  suffix?: ReactNode | string;
+  before?: ReactNode | string;
+  after?: ReactNode | string;
   shadow?: boolean;
+  value?: Value;
+  onChange?: (name: string | undefined, value: Value) => void;
+  /**
+   * The input size
+   */
+  size?: "small" | string;
+};
+export type FormControlProps<
+  Value = unknown,
+  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>
+> = BaseFormControlProps<Value> & Omit<Attributes, "onChange" | "value" | "size">;
+
+export function cleanFormControlProps(props: FormControlProps, omitted: string[] = []): any {
+  return omit(props, ["label", "description", "prefix", "suffix", "size", "shadow", ...omitted]);
 }
 
-export function FormControl({
+export function FormControl<Value = unknown>({
   children,
-  name,
+  name = "",
   id = name,
   required,
-  prefix,
-  suffix,
+  before,
+  after,
   description,
   label,
+  size,
   className
-}: PropsWithChildren<FormControlProps>) {
+}: PropsWithChildren<FormControlProps<Value>>) {
   return (
-    <div data-testid={name && `form-group-${name}`} id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
+    <div
+      data-testid={name && `form-group-${name}`}
+      id={`form-group-${name || ""}`}
+      className={classnames(
+        "form-group",
+        {
+          "-with-before": !!before,
+          "-with-after": !!after
+        },
+        size && `-size-${size}`,
+        className
+      )}
+    >
       {label && (
         <label htmlFor={id} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
           {label}
         </label>
       )}
       <div className={"input-group"}>
-        {prefix && (
+        {before && (
           <div className='input-group-prepend'>
             <span className='input-group-text' data-testid='form-control-prefix'>
-              {prefix}
+              {before}
             </span>
           </div>
         )}
         {children}
-        {suffix && (
+        {after && (
           <div className='input-group-append'>
             <span className='input-group-text' data-testid='form-control-suffix'>
-              {suffix}
+              {after}
             </span>
           </div>
         )}
@@ -58,3 +82,5 @@ export function FormControl({
     </div>
   );
 }
+
+registerComponent("FormControl", FormControl);

package/src/molecules/forms/input-tags/InputTags.interface.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes } from "react";
+
+import type { FormControlProps } from "../form-control/FormControl";
+
+export interface InputTagsProps<Data = string> extends FormControlProps<Data[], InputHTMLAttributes<HTMLInputElement>> {
+  layout?: "html5" | "react" | "choicesjs";
+  delimiter?: string;
+  customProperties?: Record<string, any>;
+}

package/src/molecules/forms/input-tags/InputTags.tsx

@@ -1,50 +1,28 @@
-import Choices from "@formio/choices.js";
-import uniq from "lodash/uniq";
-import { useEffect, useRef } from "react";
+import { ComponentType } from "react";
 
-import { registerComponent } from "../../../registries/components";
-import { FormControl, FormControlProps } from "../form-control/FormControl";
+import { getComponent, registerComponent } from "../../../registries/components";
+import { type FormControl as DefaultFormControl } from "../form-control/FormControl";
+import type { InputTagsProps } from "./InputTags.interface";
 
-export interface InputTagsProps<T = any> extends Omit<FormControlProps, "description" | "prefix" | "suffix"> {
-  value?: T;
-  onChange?: (name: string, value: T) => void;
-  placeholder?: string;
+export function InputTags<Data = string>(props: InputTagsProps) {
+  const { name, id = name, label, required, description, before, after, size, className, layout = "choicesjs", ...otherProps } = props;
 
-  [key: string]: any;
-}
-
-export function InputTags({ name, value = [], label, onChange, required, description, prefix, suffix, ...props }: InputTagsProps) {
-  const ref: any = useRef();
-
-  useEffect(() => {
-    const instance = new Choices(ref.current, {
-      delimiter: ",",
-      editItems: true,
-      removeItemButton: true
-    });
-
-    instance.setValue([].concat(value, []));
-
-    instance.passedElement.element.addEventListener("addItem", (event: any) => {
-      onChange && onChange(name, uniq(value.concat(event.detail.value)));
-    });
-
-    instance.passedElement.element.addEventListener("removeItem", (event: any) => {
-      onChange &&
-        onChange(
-          name,
-          value.filter((v: string) => v !== event.detail.value)
-        );
-    });
-
-    return () => {
-      instance.destroy();
-    };
-  }, []);
+  const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
+  const Component = getComponent<ComponentType<InputTagsProps<Data>>>([`InputTags.${layout}`, "Input"]);
 
   return (
-    <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix}>
-      <input ref={ref} type='text' {...props} id={name} required={required} />
+    <FormControl
+      id={id}
+      name={name}
+      label={label}
+      required={required}
+      description={description}
+      before={before}
+      after={after}
+      size={size}
+      className={className}
+    >
+      <Component {...(otherProps as any)} id={id} name={name} required={required} />
     </FormControl>
   );
 }

package/src/molecules/forms/input-tags/all.ts

@@ -0,0 +1,6 @@
+import "../form-control/FormControl";
+import "./components/ChoicesTags";
+import "./components/ReactTags";
+import "../input-text/InputText";
+export * from "./InputTags";
+export * from "./InputTags.interface";

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

@@ -0,0 +1,110 @@
+import "../all";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+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) => {
+        onAdd((event.target as any).value as Data);
+      });
+
+      instance.passedElement.element.addEventListener("removeItem", (event) => {
+        onDelete((event.target as any).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-vite";
+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>
+  }
+};