@tsed/react-formio 3.0.0-alpha.9 → 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,7 +37,7 @@ 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' before={prefix} />);
 
@@ -48,7 +51,7 @@ 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' after={suffix} />);
 

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";

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

@@ -9,7 +9,7 @@ export function InputTags<Data = string>(props: InputTagsProps) {
 
   const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
   const Component = getComponent<ComponentType<InputTagsProps<Data>>>([`InputTags.${layout}`, "Input"]);
-  console.log("VALUE", props.value);
+
   return (
     <FormControl
       id={id}

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

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

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

@@ -37,12 +37,12 @@ export function useChoiceTags<Data = string>(props: InputTagsProps<Data>) {
 
       instanceRef.current = instance;
 
-      instance.passedElement.element.addEventListener("addItem", (event: { detail: { value: unknown } }) => {
-        onAdd(event.detail.value as Data);
+      instance.passedElement.element.addEventListener("addItem", (event) => {
+        onAdd((event.target as any).value as Data);
       });
 
-      instance.passedElement.element.addEventListener("removeItem", (event: { detail: { value: unknown } }) => {
-        onDelete(event.detail.value as Data);
+      instance.passedElement.element.addEventListener("removeItem", (event) => {
+        onDelete((event.target as any).value as Data);
       });
     }
 

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

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { type CreatableProps } from "react-select/creatable";
 
 import { iconClass } from "../../../../utils/iconClass";

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";

package/src/molecules/forms/select/Select.interface.ts

@@ -27,16 +27,19 @@ export interface SelectProps<Data = string> extends FormControlProps<Data, Selec
   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;
-  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
 }
 
 export interface SelectMultiple<Data = string> extends SelectProps<Data[]> {
   multiple: true;
-  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
 }
 
 export type AllSelectProps<Data = string> = SelectSingle<Data> | SelectMultiple<Data>;

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";

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

@@ -66,9 +66,9 @@ 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]);

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";

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

@@ -1,7 +1,7 @@
 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";

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

@@ -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";
 

package/src/molecules/pagination/Pagination.spec.tsx

@@ -22,9 +22,9 @@ describe("Pagination", () => {
     expect(allBtnBlocks[allBtnBlocks.length - 1]).toBe("Next");
   });
 
-  it("should call previousPage() callback", () => {
+  it("should call onClickPreviousPage() callback", () => {
     const previousPageSpy = vi.fn();
-    render(<Pagination {...args} previousPage={previousPageSpy} canPreviousPage={true} />);
+    render(<Pagination {...args} onClickPreviousPage={previousPageSpy} canPreviousPage={true} />);
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
 
@@ -33,20 +33,20 @@ describe("Pagination", () => {
     expect(previousPageSpy).toHaveBeenCalledTimes(1);
   });
 
-  it("should call nextPage() callback", () => {
+  it("should call onClickNextPage() callback", () => {
     const nextPageSpy = vi.fn();
-    render(<Pagination {...args} nextPage={nextPageSpy} canNextPage={true} />);
+    render(<Pagination {...args} onClickNextPage={nextPageSpy} canNextPage={true} />);
 
     fireEvent.click(screen.getByText(/Next/i));
 
     expect(nextPageSpy).toHaveBeenCalledTimes(1);
   });
 
-  it("should call gotoPage() callback when cliking on a button page", () => {
+  it("should call onPageIndexChange() callback when cliking on a button page", () => {
     const gotoPageSpy = vi.fn();
     let page: number;
 
-    render(<Pagination {...args} gotoPage={gotoPageSpy} />);
+    render(<Pagination {...args} onPageIndexChange={gotoPageSpy} />);
 
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const buttonsPage = paginationBtn.filter((btn) => btn.textContent !== "Previous" && btn.textContent !== "Next");
@@ -63,7 +63,7 @@ describe("Pagination", () => {
 
   it("should have Previous button disabled and not clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Pagination canPreviousPage={false} previousPage={previousPageSpy} {...args} />);
+    render(<Pagination canPreviousPage={false} onClickPreviousPage={previousPageSpy} {...args} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -74,7 +74,7 @@ describe("Pagination", () => {
 
   it("should have Previous button NOT disabled and clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Pagination {...args} canPreviousPage={true} previousPage={previousPageSpy} />);
+    render(<Pagination {...args} canPreviousPage={true} onClickPreviousPage={previousPageSpy} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -85,7 +85,7 @@ describe("Pagination", () => {
 
   it("should have Next button disabled and not clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Pagination canNextPage={false} nextPage={nextPageSpy} {...args} />);
+    render(<Pagination canNextPage={false} onClickNextPage={nextPageSpy} {...args} />);
 
     const nextButton = screen.getByText("Next");
     expect(nextButton).toHaveAttribute("disabled");
@@ -95,7 +95,7 @@ describe("Pagination", () => {
 
   it("should have Next button NOT disabled and clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Pagination canNextPage={true} nextPage={nextPageSpy} {...args} />);
+    render(<Pagination canNextPage={true} onClickNextPage={nextPageSpy} {...args} />);
     const nextButton = screen.getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");
     fireEvent.click(nextButton);
@@ -118,7 +118,7 @@ describe("Pagination", () => {
   it("should display total length", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    render(<Pagination {...args} pageSizes={pageSizes} totalLength={1000} />);
+    render(<Pagination {...args} pageSizes={pageSizes} rowCount={1000} />);
 
     expect(screen.getByTestId("pagination-total-items")).toHaveTextContent("1,000 items");
   });

package/src/molecules/pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import "../forms/select/all";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { useEffect, useState } from "react";
 
 import { Pagination } from "./all";
@@ -12,18 +12,11 @@ import { Pagination } from "./all";
  *
  * ```tsx
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/all"
- * import {Pagination} from "@tsed/react-formio/molecules/form/select/Select/all"
  *
  * or
  *
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
  * import "@tsed/react-formio/molecules/pagination/PaginationButton";
- *
- * or
- *
- * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
- *
- * registerComponent("PaginationButton", MyPaginationButton);
  * ```
  *
  * Pagination component support DI container and can be used with custom PaginationButton component.
@@ -42,18 +35,47 @@ export default {
   title: "Pagination",
   component: Pagination,
   parameters: {},
+  argTypes: {
+    pageSizes: {
+      description: "Pagination steps list"
+    },
+    pageCount: {
+      description: "Total number of pages",
+      control: "number"
+    },
+    pageIndex: {
+      description: "Current page index",
+      control: "number"
+    },
+    onPageIndexChange: {
+      description: "Change page index event",
+      action: "onPageIndexChange"
+    },
+    onClickPreviousPage: {
+      description: "Click previous page event",
+      action: "onClickPreviousPage"
+    },
+    onClickNextPage: {
+      description: "Click next page event",
+      action: "onClickNextPage"
+    },
+    onPageSizeChange: {
+      description: "Change page size event",
+      action: "onPageSizeChange"
+    }
+  },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-      args.gotoPage && args.gotoPage(currentPageIndex);
+      args.onPageIndexChange && args.onPageIndexChange(currentPageIndex);
     }, [currentPageIndex]);
 
     return (
       <div>
-        <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
+        <Pagination {...args} pageIndex={currentPageIndex} onPageIndexChange={setPageIndex} />
       </div>
     );
   }