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

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

@@ -1,87 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { expect, vi } from "vitest";
-
-import { Tabs } from "./tabs.component";
-import { Sandbox } from "./tabs.component.stories";
-
-describe("tabs", () => {
-  it("should display the tabs component and children", () => {
-    const items = [
-      {
-        action: "back",
-        exact: true,
-        icon: "chevron-left",
-        back: true
-      },
-      {
-        action: "edit",
-        exact: true,
-        icon: "edit",
-        label: "Edit"
-      }
-    ];
-
-    render(<Sandbox {...Sandbox.args} items={items} />);
-
-    const tabsComponent = screen.getByTestId("tabs-comp");
-
-    const buttonsTabWrapper = screen.getAllByTitle("button-wrapper");
-    const chevronLeftButtonTabWrapper = buttonsTabWrapper[0];
-    const editButtonTabWrapper = buttonsTabWrapper[1];
-
-    const buttonsTab = screen.getAllByTitle("button-tab");
-    const chevronLeftButtonTab = buttonsTab[0];
-    const editButtonTab = buttonsTab[1];
-
-    const fontAwsomeChevronLeftIcon = "fa fa-chevron-left";
-    const fontAwsomeEditIcon = "fa fa-edit";
-
-    expect(tabsComponent).toBeInTheDocument();
-
-    expect(chevronLeftButtonTabWrapper).toContainElement(chevronLeftButtonTab);
-    expect(chevronLeftButtonTabWrapper).toContainHTML("-back");
-    expect(chevronLeftButtonTab).toBeInTheDocument();
-    expect(chevronLeftButtonTab).toContainHTML(fontAwsomeChevronLeftIcon);
-    expect(chevronLeftButtonTab).toHaveTextContent("");
-
-    expect(editButtonTabWrapper).toContainElement(editButtonTab);
-    expect(editButtonTabWrapper).not.toContainHTML("-back");
-    expect(editButtonTab).toBeInTheDocument();
-    expect(editButtonTab).toContainHTML(fontAwsomeEditIcon);
-    expect(editButtonTab).toHaveTextContent("Edit");
-  });
-
-  it("should call dispatcher when clicking on a button tab", () => {
-    const items = [
-      {
-        action: "back",
-        exact: true,
-        icon: "chevron-left",
-        back: true
-      },
-      {
-        action: "edit",
-        exact: true,
-        icon: "edit",
-        label: "Edit"
-      }
-    ];
-    const onClick = vi.fn();
-
-    render(<Tabs items={items} onClick={onClick} />);
-
-    const buttonsTab = screen.getAllByTitle("button-tab");
-    const chevronLeftButtonTab = buttonsTab[0];
-    const editButtonTab = buttonsTab[1];
-
-    fireEvent.click(chevronLeftButtonTab);
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith(items[0]);
-
-    fireEvent.click(editButtonTab);
-
-    expect(onClick).toHaveBeenCalledTimes(2);
-    expect(onClick).toHaveBeenCalledWith(items[1]);
-  });
-});

package/src/components/tabs/tabs.component.stories.tsx

@@ -1,127 +0,0 @@
-import { useState } from "react";
-
-import { Tabs } from "./tabs.component";
-
-const useTabs = (args: any) => {
-  const [current, onClick] = useState(args.value);
-
-  return {
-    ...args,
-    current,
-    onClick
-  };
-};
-
-export default {
-  title: "ReactFormio/Tabs",
-  component: Tabs,
-  argTypes: {},
-  parameters: {}
-};
-
-export const Sandbox = (args: any) => {
-  const tabs = useTabs(args);
-
-  return (
-    <div className={"border-gray-300 border-1 shadow"}>
-      <Tabs {...tabs} i18n={(f) => f}>
-        <div className={"p-5"}>{tabs?.current?.action}</div>
-      </Tabs>
-    </div>
-  );
-};
-
-Sandbox.args = {
-  items: [
-    {
-      action: "back",
-      exact: true,
-      icon: "chevron-left",
-      back: true
-    },
-    {
-      action: "edit",
-      exact: true,
-      icon: "edit",
-      label: "Edit"
-    },
-    {
-      action: "submissions",
-      exact: false,
-      icon: "data",
-      label: "Data"
-    },
-    {
-      action: "preview",
-      exact: true,
-      icon: "test-tube",
-      label: "Preview"
-    },
-    {
-      action: "actions",
-      exact: false,
-      icon: "paper-plane",
-      label: "Actions"
-    },
-    {
-      action: "access",
-      exact: true,
-      icon: "lock",
-      label: "Access"
-    },
-    {
-      action: "export",
-      exact: true,
-      icon: "download",
-      label: "Export"
-    },
-    {
-      action: "delete",
-      exact: true,
-      icon: "trash",
-      label: "Delete",
-      roles: ["administrator", "owner"]
-    }
-  ]
-};
-
-function AddButton({ onCreate }: any) {
-  return (
-    <div>
-      <button onClick={onCreate}>+</button>
-    </div>
-  );
-}
-
-function HeaderChildren() {
-  return <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>;
-}
-
-export const WithCloseable = (args: any) => {
-  args.value = args.value === undefined ? 0 : args.value;
-  const tabs = useTabs(args);
-
-  return (
-    <div className={"border-gray-300 border-1 shadow"}>
-      <Tabs {...tabs} i18n={(f) => f} AddButton={AddButton} HeaderChildren={HeaderChildren}>
-        <div className={"p-5"}>{tabs?.current?.action}</div>
-      </Tabs>
-    </div>
-  );
-};
-
-WithCloseable.args = {
-  reverse: true,
-  items: [
-    {
-      exact: true,
-      action: 0,
-      label: "Test (0)"
-    },
-    {
-      exact: true,
-      action: 1,
-      label: "Test (1)"
-    }
-  ]
-};

package/src/components/tabs/tabs.component.tsx

@@ -1,92 +0,0 @@
-import classnames from "classnames";
-import { PropsWithChildren } from "react";
-
-import { iconClass } from "../../utils/iconClass";
-
-export function ButtonTab({ icon, back, onClick, isActive, reverse, children, className, after }: PropsWithChildren<any>) {
-  return (
-    <div
-      title={"button-wrapper"}
-      className={classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)}
-    >
-      <button
-        title={"button-tab"}
-        className={classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : "")}
-        onClick={onClick}
-      >
-        {icon && <i className={classnames(iconClass(undefined, icon), "tw-tabs__button-icon")} />}
-        <span className={"tw-tabs__button-label"}>{children}</span>
-        {after}
-      </button>
-      <div className={classnames("tw-tabs__button-border", isActive ? "-active" : "")} />
-    </div>
-  );
-}
-
-export interface TabsItemProps extends Record<string, any> {
-  label?: string;
-  icon?: string;
-}
-
-export interface TabsProps extends Record<string, any> {
-  headerChildren?: any;
-  AddButton?: any;
-  current?: TabsItemProps;
-  items?: TabsItemProps[];
-  style?: any;
-  className?: string;
-  reverse?: boolean;
-  Button?: any;
-  onClick?: (item: TabsItemProps) => void;
-  i18n?: (f: string) => string;
-}
-
-export function Tabs({
-  style,
-  current,
-  items = [],
-  children,
-  HeaderChildren,
-  AddButton,
-  Button = ButtonTab,
-  className,
-  onClick,
-  i18n = (f) => f,
-  ...additionalProps
-}: PropsWithChildren<TabsProps>) {
-  return (
-    <div data-testid={"tabs-comp"} className={`tw-tabs ${className}`} style={style}>
-      <div>
-        <nav className='tw-tabs__header'>
-          <div className='tw-tabs__header-wrapper'>
-            <div className='tw-tabs__header-border' />
-            {items
-              .filter((item) => item.label || item.icon)
-              .map((item, index) => {
-                return (
-                  <Button
-                    key={index}
-                    back={item.back}
-                    isActive={current?.action === item.action}
-                    exact={item.exact}
-                    onClick={() => {
-                      onClick && onClick(item);
-                    }}
-                    {...additionalProps}
-                    {...item}
-                  >
-                    {i18n(item.label || "")}
-                  </Button>
-                );
-              })}
-            {AddButton && <AddButton {...additionalProps} current={current} />}
-          </div>
-        </nav>
-        {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}
-      </div>
-      <div title={"tab-body"} className={"tw-tabs__body"}>
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/interfaces/ActionSchema.ts

@@ -1,26 +0,0 @@
-import { FormSchema } from "./FormSchema";
-
-export interface ActionDefaultsSchema {
-  handler: string[];
-  method: string[];
-  priority: number;
-  name: string;
-  title: string;
-}
-
-export interface ActionInfoSchema extends Record<string, unknown> {
-  name: string;
-  title: string;
-  description: string;
-  priority: number;
-  defaults: ActionDefaultsSchema;
-}
-
-export interface ActionSchema extends ActionInfoSchema {
-  _id?: string;
-  settingsForm: Partial<FormSchema>;
-  access?: {
-    handler: boolean;
-    method: boolean;
-  };
-}

package/src/interfaces/Submission.ts

@@ -1,5 +0,0 @@
-export interface Submission<T = any> extends Record<string, unknown> {
-  _id?: string;
-  data: T;
-  metadata?: any;
-}

package/src/utils/callLast.ts

@@ -1,12 +0,0 @@
-export function callLast(fn: Function, time: number) {
-  let last: any = null;
-
-  return (...args: any[]) => {
-    if (last) {
-      clearTimeout(last);
-      last = null;
-    }
-
-    last = setTimeout(() => fn(...args), time);
-  };
-}