Feat input tags multiple layout

packages/react-formio-container/src/views/form.routes.tsx

@@ -10,7 +10,7 @@ import { FormPreviewView } from "./formPreview.view";
 import { FormSettingsView } from "./formSettings.view";
 import { SubmissionsView } from "./submissions.view";
 
-export interface FormRoute<User = any> extends TabsItemProps, Record<string, unknown> {
+export interface FormRoute<User extends { [key: string]: unknown } = any> extends TabsItemProps, Record<string, unknown> {
   action: string;
   exact: boolean;
   component?: ComponentType<any>;
@@ -19,7 +19,7 @@ export interface FormRoute<User = any> extends TabsItemProps, Record<string, unk
   when?(ctx: { formAction: string; auth: AuthState<User>; form: Partial<FormType>; item: FormRoute }): boolean;
 }
 
-export interface FormRoutesOptions<User = any> {
+export interface FormRoutesOptions<User extends { [key: string]: unknown } = any> {
   formRoutes: FormRoute[];
   operationsSettings: Record<string, boolean>;
   formAction: string;
@@ -99,7 +99,7 @@ export function findRoute(routes: FormRoute[], formAction: string): FormRoute |
   return routes.find(({ action }) => (formAction === "delete" ? action === "edit" : formAction === action));
 }
 
-export function getFormRoutes<User = any>({
+export function getFormRoutes<User extends { [key: string]: unknown } = any>({
   formRoutes = defaultFormRoutes,
   operationsSettings,
   formAction,

packages/react-formio/src/molecules/forms/form-control/FormControl.spec.tsx

@@ -36,7 +36,7 @@ describe("form-control", () => {
   it("should display prefix", () => {
     const fontAwsomeCalendarIcon = "fa fa-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;
@@ -50,7 +50,7 @@ describe("form-control", () => {
   it("should display suffix", () => {
     const fontAwsomeCalendarIcon = "fa fa-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;

packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx

@@ -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")} />
   }
 };
 

packages/react-formio/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);

packages/react-formio/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>;
+}

packages/react-formio/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;
-
-  [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();
-    };
-  }, []);
+export function InputTags<Data = string>(props: InputTagsProps) {
+  const { name, id = name, label, required, description, before, after, size, className, layout = "choicesjs", ...otherProps } = props;
 
+  const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
+  const Component = getComponent<ComponentType<InputTagsProps<Data>>>([`InputTags.${layout}`, "Input"]);
+  console.log("VALUE", props.value);
   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>
   );
 }

packages/react-formio/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";

packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx → packages/react-formio/src/molecules/forms/input-tags/components/ChoicesTags.stories.tsx

@@ -1,16 +1,28 @@
+import "../all";
+
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { iconClass } from "../../../utils/iconClass";
-import { useValue } from "../../__fixtures__/useValue.hook";
-import { InputTags } from "./InputTags";
+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",
+  title: "forms/InputTags/ChoicesJs",
   component: InputTags,
   argTypes: {
     label: {
@@ -29,14 +41,21 @@ export default {
     placeholder: {
       control: "text"
     },
-    choices: {
-      control: "object"
-    },
     description: {
       control: "text"
+    },
+    layout: {
+      control: "select",
+      options: ["choicesjs", "react"]
+    },
+    onChange: {
+      action: "onChange"
     }
   },
   parameters: {},
+  args: {
+    layout: "choicesjs"
+  },
   tags: ["autodocs"]
 } satisfies Meta<typeof InputTags>;
 
@@ -52,10 +71,20 @@ export const Usage: Story = {
   }
 };
 
-export const WithPrefix: Story = {
+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 prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+    return <InputTags before={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
   },
   args: {
     label: "Label",
@@ -66,10 +95,10 @@ export const WithPrefix: Story = {
   }
 };
 
-export const WithSuffix: Story = {
+export const AppendAfter: Story = {
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return <InputTags suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
+    return <InputTags after={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
   },
   args: {
     label: "Label",