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

package/src/organisms/views/FormViews.tsx

@@ -0,0 +1,146 @@
+import type { FormType, JSON, PermissionsResolver } from "../../interfaces/index.js";
+import type { Tab as DefaultTab } from "../../molecules/tabs/Tab.js";
+import type { TabList as DefaultTabList } from "../../molecules/tabs/TabList.js";
+import type { TabPanel as DefaultTabPanel } from "../../molecules/tabs/TabPanel.js";
+import type { Tabs as DefaultTabs } from "../../molecules/tabs/Tabs.js";
+import type { TabsBody as DefaultTabsBody } from "../../molecules/tabs/TabsBody.js";
+import { getComponent } from "../../registries/components.js";
+import { FormAccess, type FormAccessProps } from "../form/access/FormAccess.js";
+import { FormEdit, type FormEditProps } from "../form/builder/FormEdit.js";
+import { FormExport } from "../form/exports/FormExport.js";
+import { FormPreview } from "../form/preview/FormPreview.js";
+import { FormSettings } from "../form/settings/FormSettings.js";
+import { ActionsTable, type ActionsTableProps } from "../table/actions/ActionsTable.js";
+import { SubmissionsTable, type SubmissionsTableProps } from "../table/submissions/SubmissionsTable.js";
+
+export type FormViewsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = {
+  form: FormEditProps["form"];
+  submissions: SubmissionsTableProps<Data>["data"];
+  availableActions: ActionsTableProps["availableActions"];
+  actions: ActionsTableProps["data"];
+  roles?: FormAccessProps["roles"];
+  i18n?: (key: string) => string;
+  onAction: () => void;
+  permissionsResolver?: PermissionsResolver<Data>;
+};
+
+function useSubmissionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(
+  permissionsResolver?: PermissionsResolver<Data>
+) {
+  return [
+    {
+      title: "Edit",
+      action: "submission:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver
+    },
+    {
+      action: "submission:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver
+    }
+  ] as SubmissionsTableProps<Data>["operations"];
+}
+
+function useActionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(
+  permissionsResolver?: PermissionsResolver<Data>
+) {
+  return [
+    {
+      title: "Edit",
+      action: "action:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver
+    },
+    {
+      action: "action:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver
+    }
+  ] as SubmissionsTableProps<Data>["operations"];
+}
+
+export function FormViews<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  form,
+  roles,
+  availableActions,
+  actions,
+  permissionsResolver,
+  submissions,
+  i18n = (f) => f
+}: FormViewsProps<Data>) {
+  const Tabs = getComponent<typeof DefaultTabs>("Tabs");
+  const TabList = getComponent<typeof DefaultTabList>("TabList");
+  const Tab = getComponent<typeof DefaultTab>("Tab");
+  const TabsBody = getComponent<typeof DefaultTabsBody>("TabsBody");
+  const TabPanel = getComponent<typeof DefaultTabPanel>("TabPanel");
+  const submissionsOperations = useSubmissionsOperations<Data>(permissionsResolver);
+  const actionsOperations = useActionsOperations<any>(permissionsResolver);
+
+  return (
+    <Tabs>
+      <TabList>
+        <Tab value={0} icon='edit'>
+          {i18n("Edit")}
+        </Tab>
+        <Tab value={1} icon='data'>
+          {i18n("Data")}
+        </Tab>
+        <Tab value={2} icon='test-tube'>
+          {i18n("Preview")}
+        </Tab>
+        <Tab value={3} icon='paper-plane'>
+          {i18n("Actions")}
+        </Tab>
+        <Tab value={4} icon='lock'>
+          {i18n("Access")}
+        </Tab>
+        <Tab value={5} icon='download'>
+          {i18n("Export")}
+        </Tab>
+        <Tab value={6} icon='cog'>
+          {i18n("Settings")}
+        </Tab>
+      </TabList>
+      <TabsBody>
+        <TabPanel value={0} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>
+          <FormEdit form={form} options={{ i18n }} />
+        </TabPanel>
+        <TabPanel value={1}>
+          <SubmissionsTable<Data>
+            className={"border-top-0"}
+            form={form as FormType}
+            data={submissions}
+            i18n={i18n}
+            operations={submissionsOperations}
+          />
+        </TabPanel>
+        <TabPanel value={2}>
+          <FormPreview form={form as FormType} i18n={i18n} />
+        </TabPanel>
+        <TabPanel value={3}>
+          <ActionsTable
+            className={"border-top-0"}
+            availableActions={availableActions}
+            data={actions}
+            operations={actionsOperations as any}
+            i18n={i18n}
+          />
+        </TabPanel>
+        <TabPanel value={4} className='pt-3'>
+          <FormAccess form={form as FormType} roles={roles} options={{ i18n }} />
+        </TabPanel>
+        <TabPanel value={5} className='pt-3'>
+          <FormExport i18n={i18n} />
+        </TabPanel>
+        <TabPanel value={6} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>
+          <FormSettings form={form as FormType} options={{}} />
+        </TabPanel>
+      </TabsBody>
+    </Tabs>
+  );
+}

package/vite.config.mts

@@ -6,16 +6,16 @@ import {extname, relative} from "path";
 import preserveDirectives from "rollup-preserve-directives";
 import {defineConfig} from "vite";
 import dts from "vite-plugin-dts";
-import {resolve} from "node:path";
 
 import pkg from "./package.json" with {type: "json"};
+import {resolve} from "node:path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     dts({
-      tsconfigPath: "./tsconfig.app.json",
+      tsconfigPath: "../../tsconfig.app.json",
       aliasesExclude: [],
       include: ["src/**/*.{ts,tsx}"],
       exclude: ["**/*.spec.{ts,tsx}", "**/*.stories.{ts,tsx}", "**/__*__/**"]

package/dist/organisms/form/action/FormAction.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormAction.js","sources":["../../../../src/organisms/form/action/FormAction.tsx"],"sourcesContent":["import FormioUtils from \"formiojs/utils\";\nimport { PropsWithChildren, ReactElement } from \"react\";\n\nimport { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from \"../../../interfaces\";\nimport { Form } from \"../../form/Form\";\n\nfunction mapData(options: any, defaults: ActionDefaultsType): any {\n  return {\n    ...defaults,\n    ...options\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction mapSettingsForm({ action, ...settingsForm }: any): any {\n  FormioUtils.eachComponent(settingsForm.components, (component: any) => {\n    const resourceExclude = \"\";\n\n    if (component.type === \"resourcefields\") {\n      component.type = \"select\";\n      component.label = component.title;\n      component.dataSrc = \"url\";\n      component.data = {\n        url: `${component.basePath}?type=resource${resourceExclude}`\n      };\n      component.valueProperty = \"_id\";\n      component.template = \"<span>{{ item.title }}</span>\";\n      component.persistent = true;\n    }\n  });\n\n  return settingsForm;\n}\n\nexport interface FormActionProps {\n  actionInfo: Partial<ActionType>;\n  submission?: Partial<SubmissionType>;\n  onSubmit?: (submission: SubmissionType<ActionType>) => void;\n  options: FormOptions;\n}\n\nexport function FormAction({ actionInfo, children, onSubmit, options, ...props }: PropsWithChildren<FormActionProps>): ReactElement {\n  const { form, submission } = (() => {\n    const submission = mapData(props.submission || {}, actionInfo.defaults!);\n    const form = mapSettingsForm(actionInfo.settingsForm);\n\n    return { form, submission: { data: submission } };\n  })();\n\n  return (\n    <div>\n      {children}\n\n      <Form<ActionType> form={form} submission={submission} onSubmit={onSubmit} options={options} />\n\n      {children}\n    </div>\n  );\n}\n"],"names":["mapData","options","defaults","mapSettingsForm","action","settingsForm","FormioUtils","component","resourceExclude","FormAction","actionInfo","children","onSubmit","props","form","submission","jsx","Form"],"mappings":";;;AAMA,SAASA,EAAQC,GAAcC,GAAmC;AACzD,SAAA;AAAA,IACL,GAAGA;AAAA,IACH,GAAGD;AAAA,EACL;AACF;AAGA,SAASE,EAAgB,EAAE,QAAAC,GAAQ,GAAGC,KAA0B;AAC9D,SAAAC,EAAY,cAAcD,EAAa,YAAY,CAACE,MAAmB;AACrE,UAAMC,IAAkB;AAEpB,IAAAD,EAAU,SAAS,qBACrBA,EAAU,OAAO,UACjBA,EAAU,QAAQA,EAAU,OAC5BA,EAAU,UAAU,OACpBA,EAAU,OAAO;AAAA,MACf,KAAK,GAAGA,EAAU,QAAQ,iBAAiBC,CAAe;AAAA,IAC5D,GACAD,EAAU,gBAAgB,OAC1BA,EAAU,WAAW,iCACrBA,EAAU,aAAa;AAAA,EACzB,CACD,GAEMF;AACT;AASgB,SAAAI,EAAW,EAAE,YAAAC,GAAY,UAAAC,GAAU,UAAAC,GAAU,SAAAX,GAAS,GAAGY,KAA2D;AAClI,QAAM,EAAE,MAAAC,GAAM,YAAAC,EAAW,KAAK,MAAM;AAClC,UAAMA,IAAaf,EAAQa,EAAM,cAAc,CAAC,GAAGH,EAAW,QAAS;AAGvE,WAAO,EAAE,MAFIP,EAAgBO,EAAW,YAAY,GAErC,YAAY,EAAE,MAAMK,IAAa;AAAA,EAAA,GAC/C;AAEH,2BACG,OACE,EAAA,UAAA;AAAA,IAAAJ;AAAA,IAEA,gBAAAK,EAAAC,GAAA,EAAiB,MAAAH,GAAY,YAAAC,GAAwB,UAAAH,GAAoB,SAAAX,GAAkB;AAAA,IAE3FU;AAAA,EAAA,GACH;AAEJ;"}

package/src/organisms/form/action/FormAction.stories.tsx

@@ -1,364 +0,0 @@
-import { FormAction } from "./FormAction";
-
-/**
- *
- * ```tsx
- * import {FormAction} from "@tsed/react-formio/organisms/form/action/FormAction";
- * ```
- */
-export default {
-  title: "form/action/FormAction",
-  component: FormAction,
-  argTypes: {
-    onSubmit: { action: "onSubmit" },
-
-    type: {
-      control: "object"
-    },
-    form: {
-      control: "object"
-    },
-    options: {
-      control: "object"
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: "code"
-      }
-    }
-  }
-};
-
-export const Sandbox = (args: any) => {
-  return <FormAction {...args} />;
-};
-
-Sandbox.args = {
-  actionInfo: {
-    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
-    },
-    settingsForm: {
-      components: [
-        {
-          type: "hidden",
-          input: true,
-          key: "priority"
-        },
-        {
-          type: "hidden",
-          input: true,
-          key: "name"
-        },
-        {
-          type: "textfield",
-          input: true,
-          label: "Title",
-          key: "title"
-        },
-        {
-          type: "fieldset",
-          input: false,
-          tree: true,
-          legend: "Action Settings",
-          components: [
-            {
-              input: false,
-              type: "container",
-              key: "settings",
-              components: [
-                {
-                  type: "resourcefields",
-                  key: "resource",
-                  title: "Save submission to",
-                  placeholder: "This form",
-                  basePath: "/project/5d0797bc872fc7d140559857/form",
-                  form: "62b18b10fbbba513555c6c5e",
-                  required: false
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          input: false,
-          tree: false,
-          key: "conditions",
-          legend: "Action Execution",
-          components: [
-            {
-              type: "select",
-              input: true,
-              key: "handler",
-              label: "Handler",
-              placeholder: "Select which handler(s) you would like to trigger",
-              dataSrc: "json",
-              data: {
-                json: '[{"name":"before","title":"Before"},{"name":"after","title":"After"}]'
-              },
-              template: "<span>{{ item.title }}</span>",
-              valueProperty: "name",
-              multiple: true
-            },
-            {
-              type: "select",
-              input: true,
-              label: "Methods",
-              key: "method",
-              placeholder: "Trigger action on method(s)",
-              dataSrc: "json",
-              data: {
-                json: '[{"name":"create","title":"Create"},{"name":"update","title":"Update"},{"name":"read","title":"Read"},{"name":"delete","title":"Delete"},{"name":"index","title":"Index"}]'
-              },
-              template: "<span>{{ item.title }}</span>",
-              valueProperty: "name",
-              multiple: true
-            }
-          ]
-        },
-        {
-          key: "fieldset",
-          type: "fieldset",
-          input: false,
-          tree: false,
-          legend: "Action Conditions (optional)",
-          components: [
-            {
-              type: "container",
-              key: "condition",
-              input: false,
-              tree: true,
-              components: [
-                {
-                  key: "columns",
-                  type: "columns",
-                  input: false,
-                  columns: [
-                    {
-                      components: [
-                        {
-                          type: "select",
-                          input: true,
-                          label: "Trigger this action only if field",
-                          key: "field",
-                          placeholder: "Select the conditional field",
-                          template: "<span>{{ item.label || item.key }}</span>",
-                          dataSrc: "json",
-                          data: {
-                            json: '[{"key":""},{"label":"Rules","reorder":false,"addAnotherPosition":"bottom","layoutFixed":false,"enableRowGroups":false,"initEmpty":false,"tableView":false,"defaultValue":[{"path":{},"operator":""}],"key":"rules","type":"datagrid","input":true,"components":[{"label":"Path","widget":"choicesjs","tableView":true,"dataSrc":"url","data":{"url":"/test","headers":[{"key":"","value":""}]},"key":"path","type":"select","input":true,"disableLimit":false},{"label":"Operator","widget":"choicesjs","tableView":true,"data":{"values":[{"label":"default","value":"default"},{"label":"Contains","value":"CONTAINS"}]},"key":"operator","type":"select","input":true},{"customClass":"mt-0 mb-0","key":"fieldset","type":"fieldset","label":"Field Set","input":false,"tableView":false,"components":[{"label":"Value","tableView":true,"key":"value1","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true}]},{"label":"Hello","tableView":true,"key":"textField","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true}]},{"label":"Path","widget":"choicesjs","tableView":true,"dataSrc":"url","data":{"url":"/test","headers":[{"key":"","value":""}]},"key":"path","type":"select","input":true,"disableLimit":false},{"label":"Operator","widget":"choicesjs","tableView":true,"data":{"values":[{"label":"default","value":"default"},{"label":"Contains","value":"CONTAINS"}]},"key":"operator","type":"select","input":true},{"label":"Value","tableView":true,"key":"value1","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true},{"label":"Hello","tableView":true,"key":"textField","customConditional":"show = row.operator === \'CONTAINS\'","type":"textfield","input":true},{"type":"button","label":"Submit","key":"submit","disableOnInvalid":true,"input":true,"tableView":false}]'
-                          },
-                          valueProperty: "key",
-                          multiple: false
-                        },
-                        {
-                          type: "select",
-                          input: true,
-                          label: "",
-                          key: "eq",
-                          placeholder: "Select comparison",
-                          template: "<span>{{ item.label }}</span>",
-                          dataSrc: "values",
-                          data: {
-                            values: [
-                              {
-                                value: "",
-                                label: ""
-                              },
-                              {
-                                value: "equals",
-                                label: "Equals"
-                              },
-                              {
-                                value: "notEqual",
-                                label: "Does Not Equal"
-                              }
-                            ],
-                            json: "",
-                            url: "",
-                            resource: ""
-                          },
-                          valueProperty: "value",
-                          multiple: false
-                        },
-                        {
-                          input: true,
-                          type: "textfield",
-                          inputType: "text",
-                          label: "",
-                          key: "value",
-                          placeholder: "Enter value",
-                          multiple: false
-                        }
-                      ]
-                    },
-                    {
-                      components: [
-                        {
-                          key: "well2",
-                          type: "well",
-                          input: false,
-                          components: [
-                            {
-                              key: "html",
-                              type: "htmlelement",
-                              tag: "h4",
-                              input: false,
-                              content:
-                                'Or you can provide your own custom JavaScript or <a href="http://jsonlogic.com" target="_blank">JSON</a> condition logic here',
-                              className: ""
-                            },
-                            {
-                              label: "",
-                              type: "textarea",
-                              input: true,
-                              key: "custom",
-                              editorComponents: [
-                                {
-                                  label: "Rules",
-                                  reorder: false,
-                                  addAnotherPosition: "bottom",
-                                  layoutFixed: false,
-                                  enableRowGroups: false,
-                                  initEmpty: false,
-                                  tableView: false,
-                                  defaultValue: [
-                                    {
-                                      path: {},
-                                      operator: ""
-                                    }
-                                  ],
-                                  key: "rules",
-                                  type: "datagrid",
-                                  input: true,
-                                  components: [
-                                    {
-                                      label: "Path",
-                                      widget: "choicesjs",
-                                      tableView: true,
-                                      dataSrc: "url",
-                                      data: {
-                                        url: "/test",
-                                        headers: [
-                                          {
-                                            key: "",
-                                            value: ""
-                                          }
-                                        ]
-                                      },
-                                      key: "path",
-                                      type: "select",
-                                      input: true,
-                                      disableLimit: false
-                                    },
-                                    {
-                                      label: "Operator",
-                                      widget: "choicesjs",
-                                      tableView: true,
-                                      data: {
-                                        values: [
-                                          {
-                                            label: "default",
-                                            value: "default"
-                                          },
-                                          {
-                                            label: "Contains",
-                                            value: "CONTAINS"
-                                          }
-                                        ]
-                                      },
-                                      key: "operator",
-                                      type: "select",
-                                      input: true
-                                    },
-                                    {
-                                      customClass: "mt-0 mb-0",
-                                      key: "fieldset",
-                                      type: "fieldset",
-                                      label: "Field Set",
-                                      input: false,
-                                      tableView: false,
-                                      components: [
-                                        {
-                                          label: "Value",
-                                          tableView: true,
-                                          key: "value1",
-                                          customConditional: "show = row.operator === 'CONTAINS'",
-                                          type: "textfield",
-                                          input: true
-                                        }
-                                      ]
-                                    },
-                                    {
-                                      label: "Hello",
-                                      tableView: true,
-                                      key: "textField",
-                                      customConditional: "show = row.operator === 'CONTAINS'",
-                                      type: "textfield",
-                                      input: true
-                                    }
-                                  ]
-                                },
-                                {
-                                  type: "button",
-                                  label: "Submit",
-                                  key: "submit",
-                                  disableOnInvalid: true,
-                                  input: true,
-                                  tableView: false
-                                }
-                              ],
-                              placeholder:
-                                '// Example: Only execute if submitted roles has \'authenticated\'.\nJavaScript: execute = (data.roles.indexOf(\'authenticated\') !== -1);\nJSON: { "in": [ "authenticated", { "var": "data.roles" } ] }'
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          key: "html2",
-          type: "htmlelement",
-          tag: "hr",
-          input: false,
-          content: "",
-          className: ""
-        },
-        {
-          type: "button",
-          input: true,
-          label: "Save Action",
-          key: "submit",
-          size: "md",
-          leftIcon: "",
-          rightIcon: "",
-          block: false,
-          action: "submit",
-          disableOnInvalid: true,
-          theme: "primary"
-        }
-      ],
-      action: "/project/5d0797bc872fc7d140559857/form/62b18b10fbbba513555c6c5e/action"
-    }
-  },
-  options: { template: "tailwind", iconset: "bx" }
-};

package/tsconfig.app.json

@@ -1,11 +0,0 @@
-{
-  "extends": "@tsed/typescript/tsconfig.web.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "noEmit": true,
-    "declaration": false,
-    "composite": false
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
-}

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "extends": "@tsed/typescript/tsconfig.web.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "composite": true,
-    "noEmit": true
-  },
-  "include": [],
-  "exclude": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "extends": "@tsed/typescript/tsconfig.web.json",
-  "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "noEmit": true,
-    "declaration": false,
-    "composite": false
-  },
-  "include": ["vite.config.mts"],
-  "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-{
-  "extends": "@tsed/typescript/tsconfig.web.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": ".",
-    "declaration": false,
-    "composite": false,
-    "noEmit": true,
-    "paths": {},
-    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
-  },
-  "include": ["src/**/*.spec.tsx", "src/**/*.spec.ts", "vitest.config.mts"],
-  "exclude": ["node_modules", "dist", "coverage"]
-}