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

package/src/molecules/table/utils/mapFormToColumns.tsx

@@ -0,0 +1,74 @@
+import "../interfaces/extends";
+
+import { ColumnDef, ColumnDefResolved, createColumnHelper } from "@tanstack/react-table";
+import { Components } from "formiojs";
+import cloneDeep from "lodash/cloneDeep";
+import get from "lodash/get";
+
+import type { ComponentType, FormType } from "../../../interfaces";
+import { getComponent } from "../../../registries/components";
+import type { DefaultCell } from "../components/DefaultCell";
+import type { FilterVariants } from "../filters/Filters.js";
+
+const MAP_TYPES: Record<string, FilterVariants> = {
+  number: "range",
+  currency: "range",
+  checkbox: "boolean"
+};
+
+export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {
+  const columnHelper = createColumnHelper<Data>();
+  const columnsToKeep = cloneDeep(columns);
+
+  const Cell = getComponent<typeof DefaultCell>("Cell");
+
+  const columnsFromComponents = form.components
+    .flatMap((component) => {
+      if (component.type === "tabs") {
+        return component.components.flatMap((subComponent: ComponentType) => subComponent.components);
+      }
+
+      return [component];
+    })
+    .filter((component) => component.tableView)
+    .map((component: ComponentType) => {
+      const cmp: any = Components.create(component, {}, null, true);
+
+      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {
+        return accessorKey === `data.${component.key}`;
+      });
+
+      let column = columnsToKeep[columnIndex];
+
+      if (column) {
+        columnsToKeep.splice(columnIndex, 1);
+      }
+
+      return columnHelper.accessor(`data.${component.key}` as any, {
+        header: (component.label || component.title || component.key)?.replace(/:/, ""),
+        cell: (info) => {
+          return <Cell value={info.getValue() as Data} render={(value: Data) => cmp.asString(value)} />;
+        },
+        meta: {
+          filter: { variant: MAP_TYPES[component.type!] || "text" },
+          ...(column?.meta || {})
+        },
+        ...(column || {})
+      });
+    });
+
+  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({
+    ...column,
+    meta: {
+      ...(column.meta || {}),
+      order: get(column, "meta.order", index * 10)
+    },
+    cell:
+      column.cell ||
+      ((info) => {
+        return <Cell value={info.getValue() as Data} render={(value: Data) => value} />;
+      })
+  }));
+
+  return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];
+}

package/src/{components/tabs/tabs.component.spec.tsx → molecules/tabs/Tabs.spec.tsx}

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { expect, vi } from "vitest";
 
-import { Tabs } from "./tabs.component";
-import { Sandbox } from "./tabs.component.stories";
+import { Tabs } from "./Tabs";
+import { Sandbox } from "./Tabs.stories";
 
-describe("tabs", () => {
+describe("<Tabs>", () => {
   it("should display the tabs component and children", () => {
     const items = [
       {
@@ -21,7 +21,7 @@ describe("tabs", () => {
       }
     ];
 
-    render(<Sandbox {...Sandbox.args} items={items} />);
+    render(<Tabs {...Sandbox.args} items={items} />);
 
     const tabsComponent = screen.getByTestId("tabs-comp");
 

package/src/molecules/tabs/Tabs.stories.tsx

@@ -0,0 +1,141 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import { Tabs } from "./Tabs";
+
+const useTabs = (args: any) => {
+  const [current, onClick] = useState(args.value);
+
+  return {
+    ...args,
+    current,
+    onClick
+  };
+};
+
+/**
+ * Tabs component
+ *
+ * ```tsx
+ * import {Modal} from "@tsed/react-formio/molecules/tabs/Tabs";
+ * ```
+ */
+export default {
+  title: "Tabs",
+  component: Tabs,
+  argTypes: {},
+  parameters: {},
+  render: (args: any) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    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>
+    );
+  }
+} satisfies Meta<typeof Tabs>;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Sandbox: Story = {
+  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 = {
+  render: (args: any) => {
+    args.value = args.value === undefined ? 0 : args.value;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    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>
+    );
+  },
+  args: {
+    reverse: true,
+    items: [
+      {
+        exact: true,
+        action: 0,
+        label: "Test (0)"
+      },
+      {
+        exact: true,
+        action: 1,
+        label: "Test (1)"
+      }
+    ]
+  }
+};

package/src/organisms/__fixtures__/WrapComponent.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren, useRef } from "react";
+
+export function WrapComponent({ children }: PropsWithChildren<any>) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div data-testid='formio-container' ref={ref}>
+      {children(ref)}
+    </div>
+  );
+}

package/src/organisms/__fixtures__/form-actions.json

@@ -0,0 +1,240 @@
+[
+  {
+    "name": "webhook",
+    "title": "Webhook (Premium)",
+    "description": "Allows you to trigger an external interface.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "webhook",
+      "title": "Webhook (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sql",
+    "title": "SQL Query",
+    "description": "Allows you to execute a remote SQL Query.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "sql",
+      "title": "SQL Query"
+    }
+  },
+  {
+    "name": "role",
+    "title": "Role Assignment",
+    "description": "Provides the Role Assignment capabilities.",
+    "priority": 1,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 1,
+      "name": "role",
+      "title": "Role Assignment"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "resetpass",
+    "title": "Reset Password",
+    "description": "Provides a way to reset a password field.",
+    "defaults": {
+      "handler": ["after", "before"],
+      "method": ["form", "create"],
+      "priority": 0,
+      "name": "resetpass",
+      "title": "Reset Password"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "save",
+    "title": "Save Submission",
+    "description": "Saves the submission into the database.",
+    "priority": 10,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create", "update"],
+      "priority": 10,
+      "name": "save",
+      "title": "Save Submission"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "login",
+    "title": "Login",
+    "description": "Provides a way to login to the application.",
+    "priority": 2,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 2,
+      "name": "login",
+      "title": "Login"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "office365contact",
+    "title": "Office 365 Contacts (Premium)",
+    "description": "Allows you to integrate into your Office 365 Contacts.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365contact",
+      "title": "Office 365 Contacts (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "office365calendar",
+    "title": "Office 365 Calendar (Premium)",
+    "description": "Allows you to integrate into your Office 365 Calendar.",
+    "premium": true,
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365calendar",
+      "title": "Office 365 Calendar (Premium)"
+    }
+  },
+  {
+    "name": "hubspotContact",
+    "title": "Hubspot Contact (Premium)",
+    "description": "Allows you to change contact fields in hubspot.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "hubspotContact",
+      "title": "Hubspot Contact (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "oauth",
+    "title": "OAuth (Premium)",
+    "description": "Provides OAuth authentication behavior to this form.",
+    "priority": 20,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["form", "create"],
+      "priority": 20,
+      "name": "oauth",
+      "title": "OAuth (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "ldap",
+    "title": "LDAP Login (Premium)",
+    "description": "Provides ldap login.",
+    "priority": 3,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 3,
+      "name": "ldap",
+      "title": "LDAP Login (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "googlesheet",
+    "title": "Google Sheets (Premium)",
+    "description": "Allows you to integrate data into Google sheets.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "googlesheet",
+      "title": "Google Sheets (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sqlconnector",
+    "title": "SQL Connector (Premium)",
+    "description": "Allows you to execute a remote SQL Query via Resquel.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "sqlconnector",
+      "title": "SQL Connector (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "jira",
+    "title": "Jira (Premium)",
+    "description": "Allows you to create issues within Jira.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "jira",
+      "title": "Jira (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "group",
+    "title": "Group Assignment (Premium)",
+    "premium": true,
+    "description": "Provides the Group Assignment capabilities.",
+    "priority": 5,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 5,
+      "name": "group",
+      "title": "Group Assignment (Premium)"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "twilioSMS",
+    "title": "Twilio SMS (Premium)",
+    "premium": true,
+    "description": "Allows you to send SMS to phone numbers.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "twilioSMS",
+      "title": "Twilio SMS (Premium)"
+    }
+  }
+]