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

package/src/components/input-text/inputText.stories.tsx

@@ -1,126 +0,0 @@
-import { useState } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-import { InputText } from "./inputText.component";
-
-const useValue = (args: any) => {
-  const [value, setValue] = useState(args.value);
-
-  return {
-    ...args,
-    value,
-    onChange(name: string, value: any) {
-      setValue(value);
-      args.onChange(name, value);
-    }
-  };
-};
-
-export default {
-  title: "ReactFormio/InputText",
-  component: InputText,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    type: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "text"
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    },
-    description: {
-      control: {
-        type: "text"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <InputText {...args} />;
-};
-
-Sandbox.args = {
-  name: "name",
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithPrefix = (args: any) => {
-  return <InputText prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const WithSuffix = (args: any) => {
-  return <InputText suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder"
-};
-
-export const TypeNumber = (args: any) => {
-  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
-};
-
-TypeNumber.args = {
-  label: "Label",
-  type: "number",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  description: "Use dollars!"
-};
-
-export const Sizing = (args: any) => {
-  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
-};
-
-Sizing.args = {
-  label: "Label",
-  type: "number",
-  value: "",
-  size: "sm",
-  placeholder: "Placeholder",
-  description: "Use dollars!"
-};

package/src/components/loader/loader.stories.tsx

@@ -1,16 +0,0 @@
-import { Loader } from "./loader.component";
-
-export default {
-  title: "ReactFormio/Loader",
-  component: Loader,
-  argTypes: {},
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <Loader {...args} />;
-};
-
-Sandbox.args = {
-  isActive: true
-};

package/src/components/modal/modal.stories.tsx

@@ -1,190 +0,0 @@
-import { Modal, ModalProps, useModal } from "./modal.component";
-import { RemoveModal, RemoveModalProps } from "./removeModal.component";
-
-export default {
-  title: "ReactFormio/Modal",
-  component: Modal,
-  argTypes: {
-    onSubmit: {
-      title: {
-        control: {
-          type: "text"
-        }
-      },
-      control: {
-        action: "onSubmit"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: ModalProps) => {
-  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>
-  );
-};
-
-Sandbox.args = {};
-
-export const WithTitle = (args: ModalProps) => {
-  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>
-  );
-};
-
-WithTitle.args = {
-  title: "Modal title"
-};
-
-export const WithFooter = (args: ModalProps) => {
-  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>
-  );
-};
-
-WithFooter.args = {
-  title: "Modal title"
-};
-
-export const WithRemoveModal = (args: RemoveModalProps) => {
-  const modal = useModal();
-
-  return (
-    <div>
-      <div>
-        <button className={"btn btn-primary"} onClick={modal.openModal}>
-          Open modal
-        </button>
-      </div>
-      <RemoveModal
-        {...args}
-        i18n={(f) => f}
-        show={modal.show}
-        onSubmit={modal.closeModal}
-        onClose={modal.closeModal}
-        closeModal={modal.closeModal}
-      />
-    </div>
-  );
-};
-
-WithRemoveModal.args = {
-  valueToCompare: "value",
-  itemType: "form"
-};

package/src/components/pagination/pagination.stories.tsx

@@ -1,40 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { Pagination } from "./pagination.component";
-
-export default {
-  title: "ReactFormio/Pagination",
-  component: Pagination,
-
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
-
-  useEffect(() => {
-    args.gotoPage && args.gotoPage(currentPageIndex);
-  }, [currentPageIndex]);
-
-  return (
-    <div>
-      <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
-    </div>
-  );
-};
-
-Sandbox.args = {
-  pageSizes: [10, 25, 50, 100],
-  pageCount: 50,
-  pageIndex: 1
-  // gotoPage,
-  // canPreviousPage,
-  // previousPage,
-  // nextPage,
-  // canNextPage,
-  // pageCount,
-  // pageIndex,
-  // pageOptions,
-  // pageSize,
-  // setPageSize,
-};

package/src/components/select/select.component.spec.tsx

@@ -1,84 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import { Choicesjs, Sandbox } from "./select.stories";
-
-describe("Select", () => {
-  describe("select component Sandbox version", () => {
-    it("should render the select component", () => {
-      render(<Sandbox {...Sandbox.args} name={"test-sandbox"} />);
-
-      expect(screen.getByTestId("select_test-sandbox")).toBeInTheDocument();
-    });
-
-    it("should render the select component with a different size", () => {
-      render(<Sandbox {...Sandbox.args} size='small' name={"test-sandbox"} />);
-      const select = screen.getByTestId("select_test-sandbox");
-      expect(select).toBeInTheDocument();
-      expect(select).toHaveClass("form-control-small");
-    });
-
-    it("should render select options with 'Placeholder test' as first value", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-
-      const placeHolderTest = "Placeholder test";
-
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
-
-      expect(screen.getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
-      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
-      expect(screen.getByRole("option", { name: "test2" })).toBeInTheDocument();
-    });
-
-    it("should have Placeholder label as selected option by default", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-      const placeHolderTest = "Placeholder test";
-
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
-      const option = screen.getByRole("option", { name: placeHolderTest }) as HTMLOptionElement;
-
-      expect(option.selected).toBeTruthy();
-    });
-
-    it("should change the value of the selected option when you click on another choice", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-      const placeHolderTest = "Placeholder test";
-      const onChange = vi.fn();
-
-      render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />);
-
-      fireEvent.change(screen.getByTestId("select_test-sandbox"), {
-        target: { value: "value1" }
-      });
-
-      const option = screen.getByRole("option", { name: "test1" }) as HTMLOptionElement;
-
-      expect(option.selected).toBeTruthy();
-      expect(onChange).toHaveBeenCalledWith("test-sandbox", "value1");
-    });
-  });
-
-  describe("select component Choicesjs version", () => {
-    it("should render select options with 'test1' as first value", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-      const placeHolderTest = "Placeholder test";
-
-      render(
-        <Choicesjs {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />
-      );
-
-      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
-    });
-  });
-});

package/src/components/select/select.component.tsx

@@ -1,88 +0,0 @@
-import Choices from "@formio/choices.js";
-import classnames from "classnames";
-import { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
-
-import { getEventValue } from "../../utils/getEventValue";
-import { FormControl, FormControlProps } from "../form-control/formControl.component";
-
-export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
-  size?: string;
-  placeholder?: string;
-  choices: { label: string; value: Data }[];
-  layout?: "html5" | "choicesjs";
-  disabled?: boolean;
-  multiple?: boolean;
-}
-
-export function Select<Data = any>({
-  name,
-  label,
-  size,
-  onChange,
-  required,
-  value,
-  choices,
-  description,
-  placeholder,
-  prefix,
-  suffix,
-  multiple,
-  layout,
-  ...props
-}: SelectProps<Data>): ReactElement {
-  const ref = useRef<HTMLSelectElement>(null);
-
-  useEffect(() => {
-    let instance: any;
-
-    if (layout === "choicesjs") {
-      instance = new Choices(ref.current as unknown as HTMLInputElement, {
-        removeItemButton: true,
-        placeholderValue: placeholder
-      });
-    }
-
-    return () => {
-      instance && instance.destroy();
-    };
-  }, []);
-
-  choices =
-    layout === "choicesjs" || multiple || !placeholder
-      ? choices
-      : ([
-          {
-            label: placeholder,
-            value: ""
-          },
-          ...choices
-        ] as any[]);
-
-  return (
-    <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix} shadow={false}>
-      {}
-      <select
-        ref={ref}
-        data-testid={`select_${name}`}
-        {...props}
-        className={classnames("form-control", size && `form-control-${size}`)}
-        name={name}
-        id={name}
-        multiple={multiple}
-        value={value || ("" as any)}
-        placeholder={placeholder}
-        onChange={(event) => {
-          onChange && onChange(name, getEventValue(event));
-        }}
-      >
-        {choices.map(({ label, value }) => {
-          return (
-            <option key={String(value)} label={label} value={value as any}>
-              {label}
-            </option>
-          );
-        })}
-      </select>
-    </FormControl>
-  );
-}

package/src/components/select/select.stories.tsx

@@ -1,173 +0,0 @@
-import { useState } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-import { Select } from "./select.component";
-
-const choices = [
-  { label: "label1", value: "value1" },
-  { label: "label2", value: "value2" }
-];
-
-const useValue = (args: any) => {
-  const [value, setValue] = useState(args.value);
-
-  return {
-    ...args,
-    value,
-    onChange(name: string, value: any) {
-      setValue(value);
-      args.onChange(name, value);
-    }
-  };
-};
-
-export default {
-  title: "ReactFormio/Select",
-  component: Select,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "select",
-        options: choices
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    layout: {
-      control: {
-        type: "select",
-        options: ["html5", "choicesjs"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    }
-  },
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-Sandbox.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const Choicesjs = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-Choicesjs.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const ChoicesjsPrefix = (args: any) => {
-  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-ChoicesjsPrefix.args = {
-  label: "Label",
-  name: "name",
-  value: "",
-  size: "",
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const WithPrefix = (args: any) => {
-  return <Select prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithPrefix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const WithSuffix = (args: any) => {
-  return <Select suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
-};
-
-WithSuffix.args = {
-  label: "Label",
-  value: "",
-  size: "",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const TypeMultiple = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-TypeMultiple.args = {
-  label: "Label",
-  name: "name",
-  value: [],
-  size: "",
-  multiple: true,
-  placeholder: "Placeholder",
-  description: "Select multiple values",
-  choices
-};
-
-export const ChoicesjsMultiple = (args: any) => {
-  return <Select {...useValue(args)} />;
-};
-
-ChoicesjsMultiple.args = {
-  label: "Label",
-  value: [],
-  size: "",
-  multiple: true,
-  layout: "choicesjs",
-  placeholder: "Placeholder",
-  choices
-};
-
-export const Sizing = (args: any) => {
-  return <Select suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
-};
-
-Sizing.args = {
-  label: "Label",
-  value: "",
-  size: "sm",
-  placeholder: "Placeholder",
-  description: "Use dollars!",
-  choices
-};