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

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/molecules/forms/input-text/InputText.spec.tsx

@@ -16,7 +16,7 @@ describe("input-text", () => {
     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", () => {

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../utils/iconClass";
 import { useValue } from "../../__fixtures__/useValue.hook";
@@ -111,7 +111,7 @@ export const Debounced: Story = {
 /**
  * Add a prefix to the input text.
  */
-export const WithPrefix: Story = {
+export const AppendBefore: Story = {
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const props = useValue(args);
@@ -127,7 +127,7 @@ export const WithPrefix: Story = {
 /**
  * Add a suffix to the input text.
  */
-export const WithSuffix: Story = {
+export const AppendAfter: Story = {
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const props = useValue(args);

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

@@ -1,42 +1,14 @@
-import classnames from "classnames";
-import { useEffect, useState } from "react";
+import { ComponentType, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
-import { registerComponent } from "../../../registries/components";
+import { getComponent, registerComponent } from "../../../registries/components";
 import { getEventValue } from "../../../utils/getEventValue";
-import { FormControl, FormControlProps } from "../form-control/FormControl";
+import { cleanFormControlProps, FormControl } from "../form-control/FormControl";
+import { InputTextProps } from "./InputText.interface";
 
-export interface InputTextProps<Data = any> extends FormControlProps<Data> {
-  type?: string;
-  value?: Data;
-  /**
-   * The input size
-   */
-  size?: "small" | string;
-  onChange?: (name: string, value: Data) => void;
-  placeholder?: string;
-  debounceDelay?: number;
+function Input<Data = any>(props: InputTextProps<Data>) {
+  const { name, id = name, value, onChange, required, type, placeholder, debounceDelay = 300, ...otherProps } = props;
 
-  [key: string]: any;
-}
-
-export function InputText<T = any>({
-  name,
-  id = name,
-  value,
-  label,
-  onChange,
-  required,
-  size,
-  type,
-  prefix,
-  suffix,
-  description,
-  className,
-  placeholder,
-  debounceDelay = 300,
-  ...props
-}: InputTextProps<T>) {
   const [localValue, setValue] = useState(value);
   const change = useDebouncedCallback(onChange || (() => {}), debounceDelay);
 
@@ -44,33 +16,46 @@ export function InputText<T = any>({
     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}
-      prefix={prefix}
-      suffix={suffix}
+      before={before}
+      after={after}
+      size={size}
       className={className}
     >
-      <input
-        type={type || "text"}
-        {...props}
-        data-testid={`input_${name}`}
-        className={classnames("form-control", size && `form-control-${size}`)}
-        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);
-        }}
-      />
+      <Input {...props} />
     </FormControl>
   );
 }

package/src/molecules/forms/select/{Select.interfaces.ts → Select.interface.ts}

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { SelectHTMLAttributes } from "react";
 
 import { FormControlProps } from "../form-control/FormControl";
 
@@ -17,31 +17,29 @@ export interface SelectOptionProps<Data = string> extends SelectOptionBaseProps<
   options?: SelectOptionProps<Data>[];
 }
 
-export interface SelectProps<Data = string> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
+export interface SelectProps<Data = string> extends FormControlProps<Data, SelectHTMLAttributes<HTMLSelectElement>> {
   layout?: "html5" | "react" | "choicesjs";
   /**
    * Error message
    */
   errorMessage?: string;
-  disabled?: boolean;
   readonly?: boolean;
-  size?: string;
-  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
   disableSearch?: boolean;
   searchEnabled?: boolean;
   customProperties?: Record<string, any>;
+  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
+  /**
+   * @deprecated
+   */
+  choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
 }
 
 export interface SelectSingle<Data = string> extends SelectProps<Data> {
   multiple?: false | undefined;
-  value?: Data;
-  onChange?: (name: string, value: Data) => void;
 }
 
-export interface SelectMultiple<Data = string> extends SelectProps<Data> {
+export interface SelectMultiple<Data = string> extends SelectProps<Data[]> {
   multiple: true;
-  value?: Data[];
-  onChange?: (name: string, value: Data[]) => void;
 }
 
 export type AllSelectProps<Data = string> = SelectSingle<Data> | SelectMultiple<Data>;

package/src/molecules/forms/select/Select.tsx

@@ -1,23 +1,25 @@
 import type { ComponentType } from "react";
 
 import { getComponent, registerComponent } from "../../../registries/components";
-import { FormControl } from "../form-control/FormControl";
+import type { FormControl as DefaultFormControl } from "../form-control/FormControl";
 import { useOptions } from "./hooks/useOptions";
-import { AllSelectProps } from "./Select.interfaces";
+import { AllSelectProps } from "./Select.interface";
 
 let uuid = 0;
 
 export function Select<Data = string>(props: AllSelectProps<Data>) {
   const { className, name = "", id = `field-select-${++uuid}`, label, description = "" } = props;
+
   const options = useOptions<Data>({
     ...props,
     value: (Array.isArray(props.value) ? props.value : [props.value]) as any
   });
 
+  const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
   const Component = getComponent<ComponentType<AllSelectProps<Data>>>(["Select." + props.layout, "Select.html5"]);
 
   return (
-    <FormControl {...props} id={id} description={description} shadow={false} className={className} label={label}>
+    <FormControl {...(props as any)} id={id} description={description} shadow={false} className={className} label={label}>
       <Component {...props} options={options} name={name} id={id} />
     </FormControl>
   );

package/src/molecules/forms/select/all.ts

@@ -1,6 +1,7 @@
+import "../form-control/FormControl";
 import "./components/ReactSelect";
 import "./components/HtmlSelect";
 import "./components/ChoicesSelect";
 
 export * from "./Select";
-export * from "./Select.interfaces";
+export * from "./Select.interface";

package/src/molecules/forms/select/components/ChoicesSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";
@@ -84,7 +84,7 @@ export default {
   }
 } satisfies Meta<typeof Select>;
 
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof Select<string>>;
 /**
  * Basic select component using HTML5 syntax.
  */
@@ -156,6 +156,7 @@ export const WithDisabledOption: Story = {
 
 export const WithSizeOption: Story = {
   args: {
+    label: "Label",
     size: "small",
     options: [
       {
@@ -175,9 +176,9 @@ export const WithSizeOption: Story = {
   }
 };
 
-export const WithPrefix: Story = {
+export const AppendBefore: Story = {
   args: {
-    prefix: <i className={iconClass(undefined, "calendar")} />,
+    before: <i className={iconClass(undefined, "calendar")} />,
     label: "Label",
     value: "",
     size: "",
@@ -186,9 +187,9 @@ export const WithPrefix: Story = {
   }
 };
 
-export const WithSuffix: Story = {
+export const AppendAfter: Story = {
   args: {
-    suffix: <i className={iconClass(undefined, "calendar")} />,
+    after: <i className={iconClass(undefined, "calendar")} />,
     label: "Label",
     value: "",
     size: "",

package/src/molecules/forms/select/components/ChoicesSelect.tsx

@@ -1,11 +1,11 @@
 import Choices from "@formio/choices.js";
 import cx from "classnames";
-import omit from "lodash/omit";
 import { useEffect, useMemo, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
 import { registerComponent } from "../../../../registries/components";
-import type { AllSelectProps } from "../Select.interfaces";
+import { cleanFormControlProps } from "../../form-control/FormControl";
+import type { AllSelectProps } from "../Select.interface";
 import { callbackOnCreateTemplates } from "./choices.template";
 
 export function useChoices({
@@ -58,7 +58,7 @@ export function useChoices({
     return opts;
   }, [options, value, required, multiple, placeholder]);
 
-  const onChangeCallback = useDebouncedCallback((name: string, value: any) => {
+  const onChangeCallback = useDebouncedCallback((name: string | undefined, value: any) => {
     onChange?.(name, value);
   }, 50);
 
@@ -66,23 +66,16 @@ export function useChoices({
     if (choicesRef.current) {
       if (multiple) {
         choicesRef.current.clearStore();
-        choicesRef.current.setChoices(opts, "value", "label", true);
+        choicesRef.current.setChoices(opts as any, "value", "label", true);
       } else {
-        choicesRef.current.setChoices(opts, "value", "label", true);
+        choicesRef.current.setChoices(opts as any, "value", "label", true);
       }
     }
   }, [opts]);
 
   useEffect(() => {
     if (!choicesRef.current) {
-      const {
-        allowHTML = true,
-        silent = true,
-        removeItemButton = true,
-        shouldSort = false,
-        itemSelectText = "",
-        classNames
-      } = customProperties;
+      const { allowHTML = true, silent = true, removeItemButton = true, shouldSort = false, itemSelectText = "" } = customProperties;
       choicesRef.current = new Choices(ref.current, {
         ...customProperties,
         allowHTML,
@@ -94,10 +87,6 @@ export function useChoices({
         placeholderValue: "" as string,
         itemSelectText,
         shouldSort,
-        classNames: {
-          ...classNames,
-          containerOuter: `choices ${size || ""}`
-        },
         callbackOnCreateTemplates
       } as any);
     }
@@ -148,7 +137,9 @@ export function ChoiceSelect(props: AllSelectProps) {
     <select
       ref={ref}
       data-testid={`select_${props.name}`}
-      {...omit(props as any, [
+      {...cleanFormControlProps(props as any, [
+        "className",
+        "size",
         "value",
         "options",
         "placeholder",

package/src/molecules/forms/select/components/HtmlSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "./HtmlSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";
@@ -83,7 +83,7 @@ export default {
   }
 } satisfies Meta<typeof Select>;
 
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof Select<string>>;
 /**
  * Basic select component using HTML5 syntax.
  */
@@ -193,9 +193,9 @@ export const WithSizeOption: Story = {
   }
 };
 
-export const WithPrefix: Story = {
+export const AppendBefore: Story = {
   args: {
-    prefix: <i className={iconClass(undefined, "calendar")} />,
+    before: <i className={iconClass(undefined, "calendar")} />,
     label: "Label",
     value: "",
     size: "",
@@ -204,9 +204,9 @@ export const WithPrefix: Story = {
   }
 };
 
-export const WithSuffix: Story = {
+export const AppendAfter: Story = {
   args: {
-    suffix: <i className={iconClass(undefined, "calendar")} />,
+    after: <i className={iconClass(undefined, "calendar")} />,
     label: "Label",
     value: "",
     size: "",

package/src/molecules/forms/select/components/HtmlSelect.tsx

@@ -2,7 +2,8 @@ import cx from "classnames";
 
 import { registerComponent } from "../../../../registries/components";
 import { getEventValue } from "../../../../utils/getEventValue";
-import { AllSelectProps, SelectOptionBaseProps } from "../Select.interfaces";
+import { cleanFormControlProps } from "../../form-control/FormControl";
+import { AllSelectProps, SelectOptionBaseProps } from "../Select.interface";
 
 function Option({ value, label, ...props }: SelectOptionBaseProps) {
   return (
@@ -18,7 +19,7 @@ export function HTMLSelect({ name, id = name, size, value, multiple, onChange, o
   return (
     <select
       data-testid={`select_${name}`}
-      {...(props as any)}
+      {...cleanFormControlProps(props as any)}
       className={cx("form-control", size && `form-control-${size}`)}
       name={name}
       id={id}

package/src/molecules/forms/select/components/ReactSelect.stories.tsx

@@ -1,7 +1,7 @@
-import "./ReactSelect";
+import "../all";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";
@@ -85,7 +85,7 @@ export default {
   }
 } satisfies Meta<typeof Select>;
 
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof Select<string>>;
 /**
  * Basic select component using HTML5 syntax.
  */
@@ -145,7 +145,9 @@ export const WithDisabledOption: Story = {
 
 export const WithSizeOption: Story = {
   args: {
+    multiple: true,
     size: "small",
+    value: ["option-1"],
     options: [
       {
         label: "Option 1",
@@ -164,9 +166,9 @@ export const WithSizeOption: Story = {
   }
 };
 
-export const WithPrefix: Story = {
+export const AppendBefore: Story = {
   args: {
-    prefix: <i className={iconClass(undefined, "calendar")} />,
+    before: <i className={iconClass(undefined, "calendar")} />,
     label: "Label",
     value: "",
     size: "",
@@ -175,9 +177,9 @@ export const WithPrefix: Story = {
   }
 };
 
-export const WithSuffix: Story = {
+export const AppendAfter: Story = {
   args: {
-    suffix: <i className={iconClass(undefined, "calendar")} />,
+    after: <i className={iconClass(undefined, "calendar")} />,
     label: "Label",
     value: "",
     size: "",

package/src/molecules/forms/select/components/ReactSelect.tsx

@@ -2,7 +2,7 @@ import Select, { OptionsOrGroups } from "react-select";
 import makeAnimated from "react-select/animated";
 
 import { registerComponent } from "../../../../registries/components";
-import { AllSelectProps } from "../Select.interfaces";
+import { AllSelectProps } from "../Select.interface";
 
 const animatedComponents = makeAnimated();
 

package/src/molecules/forms/select/hooks/useOptions.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import type { AllSelectProps } from "../Select.interfaces";
+import type { AllSelectProps } from "../Select.interface";
 
 export function mapOptions(options: AllSelectProps["options"]) {
   if (options.find((item) => item.group)) {
@@ -42,7 +42,11 @@ export function mapOptions(options: AllSelectProps["options"]) {
   return options;
 }
 
-export function useOptions<Data = string>({ options }: AllSelectProps<Data>) {
+export function useOptions<Data = string>({ options, choices }: AllSelectProps<Data>) {
+  if (choices) {
+    options = choices;
+  }
+
   return useMemo(() => {
     return mapOptions(options);
   }, [options]);

package/src/molecules/loader/Loader.spec.tsx

@@ -6,7 +6,7 @@ describe("Loader", () => {
   it("should render a component (when isActive = true)", () => {
     render(<Loader isActive={true} />);
 
-    const icon = screen.getByTestId("icon_radio-circle");
+    const icon = screen.getByTestId("icon_loader");
 
     expect(icon).toBeTruthy();
     expect(icon).toBeInTheDocument();
@@ -15,7 +15,7 @@ describe("Loader", () => {
   it("should render a component (when isActive = false)", () => {
     render(<Loader isActive={false} />);
 
-    const icon = screen.queryByTestId("icon_radio-circle");
+    const icon = screen.queryByTestId("icon_loader");
 
     expect(icon).toBeFalsy();
     expect(icon).not.toBeInTheDocument();

package/src/molecules/loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import tailwind from "@tsed/tailwind-formio";
 
 import { Loader } from "./Loader";
@@ -22,10 +22,14 @@ export default {
     },
     icon: {
       control: "select",
-      options: Object.keys(tailwind.templates.tailwind.ICONS)
+      options: Object.keys(tailwind.templates.tailwind.ICONS["bx"])
     },
     className: {
       control: "text"
+    },
+    iconset: {
+      control: "select",
+      options: ["lu", "bx"]
     }
   },
   parameters: {},
@@ -36,8 +40,7 @@ type Story = StoryObj<typeof Loader>;
 
 export const Usage: Story = {
   args: {
-    icon: "radio-circle",
-    color: "text-blue",
+    color: "text-primary",
     isActive: true
   }
 };

package/src/molecules/loader/Loader.tsx

@@ -1,27 +1,37 @@
 import classnames from "classnames";
-import { PropsWithChildren } from "react";
+import cx from "classnames";
+import { type ComponentPropsWithoutRef, PropsWithChildren } from "react";
 
-import { iconClass } from "../../utils/iconClass";
+import { Icon } from "../../atoms/icon/Icon.js";
 
-export interface LoaderProps {
+export interface LoaderProps extends ComponentPropsWithoutRef<"div"> {
   isActive?: boolean;
   color?: string;
   icon?: string;
-  className?: string;
+  iconset?: string;
 }
 
-export function Loader({ isActive, color = "text-primary", icon = "radio-circle", className = "" }: PropsWithChildren<LoaderProps>) {
+export function Loader({
+  isActive,
+  color = "text-primary",
+  icon = "loader",
+  iconset,
+  className = "",
+  ...props
+}: PropsWithChildren<LoaderProps>) {
   if (isActive) {
     return (
       <div
+        {...props}
         className={classnames(
           "opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white",
           className
         )}
       >
-        <span data-testid={`icon_${icon}`} className={`text-8xl ${color} ${iconClass(undefined, icon, true)}`} />
+        <Icon data-testid={`icon_${icon}`} className={cx("text-8xl", color)} iconset={iconset} name={icon} spinning={true} />
       </div>
     );
   }
+
   return null;
 }

package/src/molecules/modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Modal, ModalProps, useModal } from "./Modal";