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

package/src/molecules/forms/select/components/choices.template.tsx

@@ -0,0 +1,38 @@
+import classnames from "classnames";
+import { renderToString } from "react-dom/server";
+
+const ChoiceTemplate = ({ classNames, data, itemSelectText }: { classNames: any; data: any; itemSelectText: string }) => {
+  const Template = data.customProperties?.template;
+
+  return (
+    <div
+      className={classnames(classNames.item, classNames.itemChoice, data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}
+      aria-label={data.label}
+      data-select-text={itemSelectText}
+      data-choice=''
+      data-id={data.id}
+      data-value={data.value}
+      {...(data.disabled
+        ? {
+            "data-choice-disabled": "",
+            "aria-disabled": true
+          }
+        : {
+            "data-choice-selectable": ""
+          })}
+      {...(data.groupId > 0 ? { role: "treeitem" } : { role: "option" })}
+    >
+      {Template ? <Template {...data} data={{ ...data, ...data?.customProperties }} /> : data.label}
+    </div>
+  );
+};
+
+export function callbackOnCreateTemplates(this: { config: { itemSelectText: string } }, strToEl: (template: string) => any) {
+  const itemSelectText = this.config.itemSelectText;
+
+  return {
+    choice: (...args: any) => {
+      return strToEl(renderToString(<ChoiceTemplate itemSelectText={itemSelectText} classNames={args[0]} data={args[1]} />));
+    }
+  };
+}

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

@@ -0,0 +1,154 @@
+import { mapOptions } from "./useOptions";
+
+describe("mapOptions", () => {
+  it("should map options correctly", () => {
+    expect(
+      mapOptions([
+        {
+          label: "Option 1",
+          value: "option-1"
+        },
+        {
+          label: "Option 2",
+          value: "option-2",
+          disabled: true
+        },
+        {
+          label: "Option 3",
+          value: "option-3"
+        }
+      ])
+    ).toEqual([
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]);
+  });
+  it("should map options correctly group (legacy)", () => {
+    expect(
+      mapOptions([
+        {
+          label: "Option 1",
+          group: "group-1",
+          value: "option-1"
+        },
+        {
+          group: "group-1",
+          label: "Option 2",
+          value: "option-2"
+        },
+        {
+          label: "Option 3",
+          group: "group-2",
+          value: "option-3"
+        },
+        {
+          group: "group-2",
+          label: "Option 4",
+          value: "option-4"
+        }
+      ])
+    ).toEqual([
+      {
+        label: "group-1",
+        options: [
+          {
+            label: "Option 1",
+            group: "group-1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            group: "group-1",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "group-2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3",
+            group: "group-2"
+          },
+          {
+            label: "Option 4",
+            value: "option-4",
+            group: "group-2"
+          }
+        ]
+      }
+    ]);
+  });
+
+  it("should map options correctly group (new)", () => {
+    expect(
+      mapOptions([
+        {
+          label: "Group 1",
+          options: [
+            {
+              label: "group-1",
+              value: "option-1"
+            },
+            {
+              label: "Option 2",
+              value: "option-2"
+            }
+          ]
+        },
+        {
+          label: "Group 2",
+          options: [
+            {
+              label: "Option 3",
+              value: "option-3"
+            },
+            {
+              label: "Option 4",
+              value: "option-4"
+            }
+          ]
+        }
+      ])
+    ).toEqual([
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "group-1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "Group 2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3"
+          },
+          {
+            label: "Option 4",
+            value: "option-4"
+          }
+        ]
+      }
+    ]);
+  });
+});

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

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+
+import type { AllSelectProps } from "../Select.interface";
+
+export function mapOptions(options: AllSelectProps["options"]) {
+  if (options.find((item) => item.group)) {
+    let groupsMap = new Map();
+
+    function mapItem(item: AllSelectProps["options"][0]) {
+      return {
+        ...item,
+        customProperties: {
+          ...item.data,
+          template: item.template
+        }
+      };
+    }
+
+    options.forEach((item) => {
+      if (item.group) {
+        // legacy model group
+        const group = groupsMap.get(item.group) || [];
+
+        group.push(item);
+
+        groupsMap.set(item.group, group);
+      } else {
+        const group = groupsMap.get("default") || [];
+        group.push(mapItem(item));
+        groupsMap.set("default", group);
+      }
+    });
+
+    return [...groupsMap.entries()].map(([label, options]) => {
+      return {
+        label,
+        options
+      };
+    });
+  }
+
+  return options;
+}
+
+export function useOptions<Data = string>({ options, choices }: AllSelectProps<Data>) {
+  if (choices) {
+    options = choices;
+  }
+
+  return useMemo(() => {
+    return mapOptions(options);
+  }, [options]);
+}

package/src/{components/loader/loader.component.spec.tsx → molecules/loader/Loader.spec.tsx}

@@ -1,10 +1,10 @@
 import { render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./loader.stories";
+import { Loader } from "./Loader";
 
 describe("Loader", () => {
   it("should render a component (when isActive = true)", () => {
-    render(<Sandbox isActive={true} />);
+    render(<Loader isActive={true} />);
 
     const icon = screen.getByTestId("icon_radio-circle");
 
@@ -13,7 +13,7 @@ describe("Loader", () => {
   });
 
   it("should render a component (when isActive = false)", () => {
-    render(<Sandbox isActive={false} />);
+    render(<Loader isActive={false} />);
 
     const icon = screen.queryByTestId("icon_radio-circle");
 

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import tailwind from "@tsed/tailwind-formio";
+
+import { Loader } from "./Loader";
+
+/**
+ * Component to display loader
+ *
+ * ```tsx
+ * import {Loader} from "@tsed/react-formio/molecules/loader/Loader";
+ * ```
+ */
+export default {
+  title: "Loader",
+  component: Loader,
+  argTypes: {
+    isActive: {
+      control: "boolean"
+    },
+    color: {
+      control: "text"
+    },
+    icon: {
+      control: "select",
+      options: Object.keys(tailwind.templates.tailwind.ICONS)
+    },
+    className: {
+      control: "text"
+    }
+  },
+  parameters: {},
+  tags: ["autodocs"]
+} satisfies Meta<typeof Loader>;
+
+type Story = StoryObj<typeof Loader>;
+
+export const Usage: Story = {
+  args: {
+    icon: "radio-circle",
+    color: "text-blue",
+    isActive: true
+  }
+};

package/src/{components/loader/loader.component.tsx → molecules/loader/Loader.tsx}

@@ -1,5 +1,4 @@
 import classnames from "classnames";
-import PropTypes from "prop-types";
 import { PropsWithChildren } from "react";
 
 import { iconClass } from "../../utils/iconClass";
@@ -11,7 +10,7 @@ export interface LoaderProps {
   className?: string;
 }
 
-export function Loader({ isActive, color = "blue", icon = "radio-circle", className = "" }: PropsWithChildren<LoaderProps>) {
+export function Loader({ isActive, color = "text-primary", icon = "radio-circle", className = "" }: PropsWithChildren<LoaderProps>) {
   if (isActive) {
     return (
       <div
@@ -20,16 +19,9 @@ export function Loader({ isActive, color = "blue", icon = "radio-circle", classN
           className
         )}
       >
-        <span data-testid={`icon_${icon}`} color={color} className={`text-11xl ${iconClass(undefined, icon, true)}`} />
+        <span data-testid={`icon_${icon}`} className={`text-8xl ${color} ${iconClass(undefined, icon, true)}`} />
       </div>
     );
   }
   return null;
 }
-
-Loader.propTypes = {
-  isActive: PropTypes.bool,
-  icon: PropTypes.string,
-  color: PropTypes.string,
-  className: PropTypes.string
-};

package/src/{components/modal/modal.component.spec.tsx → molecules/modal/Modal.spec.tsx}

@@ -1,13 +1,127 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { WithFooter, WithTitle } from "./modal.stories";
+import { Modal, useModal } from "./Modal";
+
+function WithTitle(props: any) {
+  const modal = useModal();
+
+  return (
+    <div>
+      <div>
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
+          Open modal
+        </button>
+      </div>
+      <Modal {...props} {...modal}>
+        <div className={"p-5"} style={{ height: "900px" }}>
+          Hello body
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+function WithFooter(args: any) {
+  const modal = useModal();
+
+  function ModalFooter({ closeModal, onSubmit }: any) {
+    return (
+      <div className={"flex items-center justify-center bg-white p-2"}>
+        <button
+          data-testid='customSubmitModal'
+          className={"btn btn-primary mx-1"}
+          onClick={(e) => {
+            onSubmit(e);
+            closeModal();
+          }}
+        >
+          Save
+        </button>
+
+        <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
+          Close
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div>
+        <button className={"btn btn-primary"} onClick={modal.openModal}>
+          Open modal
+        </button>
+      </div>
+      <Modal {...args} {...modal} footer={ModalFooter}>
+        <div className={"px-5"} style={{ height: "900px" }}>
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+          Hello body
+          <br />
+        </div>
+      </Modal>
+    </div>
+  );
+}
 
 describe("Modal", () => {
   describe("WithTitle", () => {
     it("should display the modal when we click on the button", async () => {
       const onClose = vi.fn();
 
-      render(<WithTitle {...WithTitle.args} onClose={onClose} />);
+      render(<WithTitle title='Modal title' onClose={onClose} />);
 
       expect(screen.queryByTestId("modalTitle")).toBeFalsy();
       expect(screen.queryByTestId("modalBody")).toBeFalsy();
@@ -34,7 +148,13 @@ describe("Modal", () => {
 
   describe("WithFooter", () => {
     it("should display the modal when we click on the button", async () => {
-      render(<WithFooter {...WithFooter.args} />);
+      render(
+        <WithFooter
+          {...{
+            title: "Modal title"
+          }}
+        />
+      );
 
       expect(screen.queryByTestId("modalTitle")).toBeFalsy();
       expect(screen.queryByTestId("modalBody")).toBeFalsy();
@@ -59,7 +179,14 @@ describe("Modal", () => {
     it("should call the onSubmit listener", async () => {
       const onSubmit = vi.fn();
 
-      render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
+      render(
+        <WithFooter
+          {...{
+            title: "Modal title"
+          }}
+          onSubmit={onSubmit}
+        />
+      );
 
       fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 

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

@@ -0,0 +1,178 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Modal, ModalProps, useModal } from "./Modal";
+
+/**
+ * The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
+ *
+ * ```tsx
+ * import {Modal} from "@tsed/react-formio/molecules/modal/Modal";
+ * ```
+ */
+export default {
+  title: "Modal",
+  component: Modal,
+  argTypes: {
+    onSubmit: {
+      title: {
+        control: {
+          type: "text"
+        }
+      },
+      control: {
+        action: "onSubmit"
+      }
+    }
+  },
+  parameters: {},
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal}>
+          <div className={"p-5"} style={{ height: "900px" }}>
+            Hello body
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Modal>;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Sandbox: Story = {};
+
+export const WithTitle: Story = {
+  render: (args: ModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal}>
+          <div className={"p-5"} style={{ height: "900px" }}>
+            Hello body
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  args: {
+    title: "Modal title"
+  }
+};
+
+export const WithFooter = {
+  render: (args: ModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    function ModalFooter({ closeModal, onSubmit }: any) {
+      return (
+        <div className={"flex items-center justify-center bg-white p-2"}>
+          <button
+            data-testid='customSubmitModal'
+            className={"btn btn-primary mx-1"}
+            onClick={(e) => {
+              onSubmit(e);
+              closeModal();
+            }}
+          >
+            Save
+          </button>
+
+          <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
+            Close
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal} footer={ModalFooter}>
+          <div className={"px-5"} style={{ height: "900px" }}>
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  args: {
+    title: "Modal title"
+  }
+};