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

package/dist/organisms/table/forms/components/FormsCell.js

@@ -1,8 +1,8 @@
-import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import { c as t } from "../../../../chunks/index.js";
-import l from "moment";
+import m from "moment";
 import { registerComponent as c } from "../../../../registries/components.js";
-import { iconClass as r } from "../../../../utils/iconClass.js";
+import { iconClass as s } from "../../../../utils/iconClass.js";
 import { stopPropagationWrapper as n } from "../../../../utils/stopPropagationWrapper.js";
 function p(i) {
   const {
@@ -10,8 +10,8 @@ function p(i) {
   } = i;
   return /* @__PURE__ */ e("div", { className: "p-1", children: [
     /* @__PURE__ */ e("h4", { className: "text-primary text-lg flex space-x-2 items-center", children: [
-      /* @__PURE__ */ s("i", { className: t(r(void 0, "server"), "text-secondary") }),
-      /* @__PURE__ */ s("span", { children: a.title })
+      /* @__PURE__ */ r("i", { className: t(s(void 0, "server"), "text-secondary") }),
+      /* @__PURE__ */ r("span", { children: a.title })
     ] }),
     /* @__PURE__ */ e("ul", { className: "reset-list text-gray-500", children: [
       /* @__PURE__ */ e("li", { className: "text-sm", children: [
@@ -20,21 +20,21 @@ function p(i) {
       ] }),
       /* @__PURE__ */ e("li", { className: "mt-5 flex space-x-1", children: [
         /* @__PURE__ */ e("span", { className: "badge bg-light flex space-x-1", children: [
-          /* @__PURE__ */ s("i", { className: r(void 0, "history") }),
+          /* @__PURE__ */ r("i", { className: s(void 0, "history") }),
           /* @__PURE__ */ e("span", { children: [
             "Updated ",
-            l(a.modified).fromNow()
+            m(a.modified).fromNow()
           ] })
         ] }),
-        (a.tags || []).map((m, o) => /* @__PURE__ */ e(
+        (a.tags || []).map((l, o) => /* @__PURE__ */ e(
           "button",
           {
             className: "badge badge-hover bg-secondary flex space-x-1",
             onClick: n(() => {
             }),
             children: [
-              /* @__PURE__ */ s("i", { className: r(void 0, "tags") }),
-              /* @__PURE__ */ s("span", { children: m })
+              /* @__PURE__ */ r("i", { className: s(void 0, "tags") }),
+              /* @__PURE__ */ r("span", { children: l })
             ]
           },
           o

package/dist/organisms/views/FormViews.d.ts

@@ -1,4 +1,4 @@
-import { JSON, PermissionsResolver } from '../../interfaces/index.js';
+import { FormOptions, JSON, PermissionsResolver } from '../../interfaces/index.js';
 import { FormAccessProps } from '../form/access/FormAccess.js';
 import { FormEditProps } from '../form/builder/FormEdit.js';
 import { ActionsTableProps } from '../table/actions/ActionsTable.js';
@@ -13,7 +13,7 @@ export type FormViewsProps<Data extends {
     availableActions: ActionsTableProps["availableActions"];
     actions: ActionsTableProps["data"];
     roles?: FormAccessProps["roles"];
-    i18n?: (key: string) => string;
+    i18n?: FormOptions["i18n"];
     onAction: () => void;
     permissionsResolver?: PermissionsResolver<Data>;
 };
@@ -21,4 +21,4 @@ export declare function FormViews<Data extends {
     [key: string]: JSON;
 } = {
     [key: string]: JSON;
-}>({ form, roles, availableActions, actions, permissionsResolver, submissions, i18n }: FormViewsProps<Data>): import("react/jsx-runtime").JSX.Element;
+}>({ form, roles, availableActions, actions, permissionsResolver, submissions, ...props }: FormViewsProps<Data>): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/views/FormViews.js

@@ -1,96 +1,97 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { getComponent as i } from "../../registries/components.js";
-import { FormAccess as v } from "../form/access/FormAccess.js";
-import { FormEdit as f } from "../form/builder/FormEdit.js";
-import { FormExport as g } from "../form/exports/FormExport.js";
-import { FormPreview as w } from "../form/preview/FormPreview.js";
-import { FormSettings as y } from "../form/settings/FormSettings.js";
-import { ActionsTable as E } from "../table/actions/ActionsTable.js";
-import { SubmissionsTable as F } from "../table/submissions/SubmissionsTable.js";
-function N(t) {
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useI18n as f } from "../../hooks/useI18n.js";
+import { getComponent as a } from "../../registries/components.js";
+import { FormAccess as g } from "../form/access/FormAccess.js";
+import { FormEdit as w } from "../form/builder/FormEdit.js";
+import { FormExport as y } from "../form/exports/FormExport.js";
+import { FormPreview as E } from "../form/preview/FormPreview.js";
+import { FormSettings as F } from "../form/settings/FormSettings.js";
+import { ActionsTable as N } from "../table/actions/ActionsTable.js";
+import { SubmissionsTable as x } from "../table/submissions/SubmissionsTable.js";
+function A(e) {
   return [
     {
       title: "Edit",
       action: "submission:edit",
       alias: "row",
       icon: "edit",
-      permissionsResolver: t
+      permissionsResolver: e
     },
     {
       action: "submission:delete",
       icon: "trash",
       buttonType: "danger",
-      permissionsResolver: t
+      permissionsResolver: e
     }
   ];
 }
-function x(t) {
+function O(e) {
   return [
     {
       title: "Edit",
       action: "action:edit",
       alias: "row",
       icon: "edit",
-      permissionsResolver: t
+      permissionsResolver: e
     },
     {
       action: "action:delete",
       icon: "trash",
       buttonType: "danger",
-      permissionsResolver: t
+      permissionsResolver: e
     }
   ];
 }
-function D({
-  form: t,
+function q({
+  form: e,
   roles: l,
   availableActions: d,
   actions: b,
   permissionsResolver: s,
-  submissions: p,
-  i18n: e = (n) => n
+  submissions: m,
+  ...r
 }) {
-  const n = i("Tabs"), u = i("TabList"), r = i("Tab"), m = i("TabsBody"), a = i("TabPanel"), h = N(s), T = x(s);
-  return /* @__PURE__ */ c(n, { children: [
-    /* @__PURE__ */ c(u, { children: [
-      /* @__PURE__ */ o(r, { value: 0, icon: "edit", children: e("Edit") }),
-      /* @__PURE__ */ o(r, { value: 1, icon: "data", children: e("Data") }),
-      /* @__PURE__ */ o(r, { value: 2, icon: "test-tube", children: e("Preview") }),
-      /* @__PURE__ */ o(r, { value: 3, icon: "paper-plane", children: e("Actions") }),
-      /* @__PURE__ */ o(r, { value: 4, icon: "lock", children: e("Access") }),
-      /* @__PURE__ */ o(r, { value: 5, icon: "download", children: e("Export") }),
-      /* @__PURE__ */ o(r, { value: 6, icon: "cog", children: e("Settings") })
+  const { t: n } = f(r.i18n), u = a("Tabs"), p = a("TabList"), o = a("Tab"), h = a("TabsBody"), t = a("TabPanel"), T = A(s), v = O(s);
+  return /* @__PURE__ */ c(u, { children: [
+    /* @__PURE__ */ c(p, { children: [
+      /* @__PURE__ */ i(o, { value: 0, icon: "edit", children: n("Edit") }),
+      /* @__PURE__ */ i(o, { value: 1, icon: "data", children: n("Data") }),
+      /* @__PURE__ */ i(o, { value: 2, icon: "test-tube", children: n("Preview") }),
+      /* @__PURE__ */ i(o, { value: 3, icon: "paper-plane", children: n("Actions") }),
+      /* @__PURE__ */ i(o, { value: 4, icon: "lock", children: n("Access") }),
+      /* @__PURE__ */ i(o, { value: 5, icon: "download", children: n("Export") }),
+      /* @__PURE__ */ i(o, { value: 6, icon: "cog", children: n("Settings") })
     ] }),
-    /* @__PURE__ */ c(m, { children: [
-      /* @__PURE__ */ o(a, { value: 0, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(f, { form: t, options: { i18n: e } }) }),
-      /* @__PURE__ */ o(a, { value: 1, children: /* @__PURE__ */ o(
-        F,
+    /* @__PURE__ */ c(h, { children: [
+      /* @__PURE__ */ i(t, { value: 0, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ i(w, { form: e }) }),
+      /* @__PURE__ */ i(t, { value: 1, children: /* @__PURE__ */ i(
+        x,
         {
           className: "border-top-0",
-          form: t,
-          data: p,
-          i18n: e,
-          operations: h
+          form: e,
+          data: m,
+          i18n: r.i18n,
+          operations: T
         }
       ) }),
-      /* @__PURE__ */ o(a, { value: 2, children: /* @__PURE__ */ o(w, { form: t, i18n: e }) }),
-      /* @__PURE__ */ o(a, { value: 3, children: /* @__PURE__ */ o(
-        E,
+      /* @__PURE__ */ i(t, { value: 2, children: /* @__PURE__ */ i(E, { form: e, i18n: r.i18n }) }),
+      /* @__PURE__ */ i(t, { value: 3, children: /* @__PURE__ */ i(
+        N,
         {
           className: "border-top-0",
           availableActions: d,
           data: b,
-          operations: T,
-          i18n: e
+          operations: v,
+          i18n: r.i18n
         }
       ) }),
-      /* @__PURE__ */ o(a, { value: 4, className: "pt-3", children: /* @__PURE__ */ o(v, { form: t, roles: l, options: { i18n: e } }) }),
-      /* @__PURE__ */ o(a, { value: 5, className: "pt-3", children: /* @__PURE__ */ o(g, { i18n: e }) }),
-      /* @__PURE__ */ o(a, { value: 6, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(y, { form: t, options: {} }) })
+      /* @__PURE__ */ i(t, { value: 4, className: "pt-3", children: /* @__PURE__ */ i(g, { form: e, roles: l, options: r }) }),
+      /* @__PURE__ */ i(t, { value: 5, className: "pt-3", children: /* @__PURE__ */ i(y, { i18n: r.i18n }) }),
+      /* @__PURE__ */ i(t, { value: 6, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ i(F, { form: e, options: {} }) })
     ] })
   ] });
 }
 export {
-  D as FormViews
+  q as FormViews
 };
 //# sourceMappingURL=FormViews.js.map

package/dist/organisms/views/FormViews.js.map

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

package/dist/utils/iconClass.js

@@ -1,9 +1,8 @@
-import * as e from "formiojs";
-const { Templates: o } = e;
-function s(r, t, n) {
-  return o.current.iconClass(r || o.current.defaultIconset, t, n);
+import { c as t } from "../chunks/index2.js";
+function n(e, r, s) {
+  return t.Templates.current.iconClass(e || t.Templates.current.defaultIconset, r, s);
 }
 export {
-  s as iconClass
+  n as iconClass
 };
 //# sourceMappingURL=iconClass.js.map

package/dist/utils/iconClass.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconClass.js","sources":["../../src/utils/iconClass.ts"],"sourcesContent":["import * as formio from \"formiojs\";\n\nconst { Templates } = formio;\n\nexport function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {\n  return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);\n}\n"],"names":["Templates","formio","iconClass","iconset","name","spinning"],"mappings":";AAEA,MAAM,EAAE,WAAAA,MAAcC;AAEf,SAASC,EAAUC,GAA6BC,GAAcC,GAA4B;AAC/F,SAAOL,EAAU,QAAQ,UAAUG,KAAWH,EAAU,QAAQ,gBAAgBI,GAAMC,CAAQ;AAChG;"}
+{"version":3,"file":"iconClass.js","sources":["../../src/utils/iconClass.ts"],"sourcesContent":["import { Templates } from \"@formio/js\";\n\nexport function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {\n  return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);\n}\n"],"names":["iconClass","iconset","name","spinning","Templates"],"mappings":";AAEO,SAASA,EAAUC,GAA6BC,GAAcC,GAA4B;AAC/F,SAAOC,EAAAA,UAAU,QAAQ,UAAUH,KAAWG,EAAAA,UAAU,QAAQ,gBAAgBF,GAAMC,CAAQ;AAChG;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-alpha.12",
+  "version": "3.0.0-alpha.13",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@tanstack/react-table": ">=8.20.6",
-    "@tsed/tailwind-formio": "3.0.0-alpha.12",
-    "@tsed/typescript": "3.0.0-alpha.12",
+    "@tsed/tailwind-formio": "3.0.0-alpha.13",
+    "@tsed/typescript": "3.0.0-alpha.13",
     "microbundle": "0.13.0",
     "vite": "7.1.5",
     "vitest": "3.2.4"

package/src/all.ts

@@ -0,0 +1,34 @@
+import "./atoms/icon/Icon";
+import "./molecules/tabs/Tab";
+import "./molecules/tabs/TabList";
+import "./molecules/tabs/TabPanel";
+import "./molecules/tabs/Tabs";
+import "./molecules/tabs/TabsBody";
+import "./molecules/button/Button";
+import "./molecules/forms/input-text/InputText";
+import "./molecules/forms/select/Select";
+import "./molecules/forms/select/components/HtmlSelect";
+import "./molecules/forms/select/components/ChoicesSelect";
+import "./molecules/forms/select/components/ReactSelect";
+import "./molecules/forms/input-tags/InputTags";
+import "./molecules/forms/input-tags/components/ReactTags";
+import "./molecules/forms/input-tags/components/ChoicesTags";
+import "./molecules/pagination/Pagination";
+import "./molecules/pagination/PaginationButton";
+import "./organisms/form/builder/FormBuilder";
+import "./organisms/form/builder/FormEdit";
+import "./organisms/form/builder/FormEditCtas";
+import "./organisms/form/builder/FormParameters";
+import "./organisms/form/builder/useFormBuilder";
+import "./organisms/form/builder/useFormEdit";
+import "./molecules/forms/input-tags/InputTags.interface";
+import "./molecules/table/components/DefaultFilter";
+import "./molecules/table/components/DefaultArrowSort";
+import "./molecules/table/components/DefaultCell";
+import "./molecules/table/components/DefaultCellOperations";
+import "./molecules/table/components/DefaultOperationButton";
+import "./molecules/table/components/DefaultCellHeader";
+import "./molecules/table/components/DefaultCellFooter";
+import "./molecules/table/filters/TextFieldFilter";
+import "./molecules/table/filters/SelectFilter";
+import "./molecules/table/filters/RangeFilter";

package/src/contexts/FormioContext.tsx

@@ -0,0 +1,96 @@
+import { Formio as ImportedFormio } from "@formio/js";
+import { createContext, useEffect, useState } from "react";
+
+type BaseConfigurationArgs = {
+  baseUrl?: string;
+  projectUrl?: string;
+  Formio?: typeof ImportedFormio;
+};
+
+const useBaseConfiguration = ({ baseUrl, projectUrl, Formio }: BaseConfigurationArgs) => {
+  if (!Formio) {
+    if (baseUrl) {
+      ImportedFormio.setBaseUrl(baseUrl);
+    }
+    if (projectUrl) {
+      ImportedFormio.setProjectUrl(projectUrl);
+    }
+    return {
+      Formio: ImportedFormio,
+      baseUrl: ImportedFormio.baseUrl,
+      projectUrl: ImportedFormio.projectUrl
+    };
+  }
+
+  if (baseUrl) {
+    Formio.setBaseUrl(baseUrl);
+  }
+  if (projectUrl) {
+    Formio.setProjectUrl(projectUrl);
+  }
+
+  return {
+    Formio,
+    baseUrl: Formio.baseUrl,
+    projectUrl: Formio.projectUrl
+  };
+};
+
+const useAuthentication = ({ Formio }: { Formio: typeof ImportedFormio }) => {
+  const [token, setToken] = useState(Formio.getToken() || null);
+  const [isAuthenticated, setIsAuthenticated] = useState(!!token);
+
+  useEffect(() => {
+    const handleUserEvent = async (user: unknown) => {
+      if (user) {
+        setToken(Formio.getToken());
+        setIsAuthenticated(true);
+      } else if (isAuthenticated) {
+        await Formio.logout();
+        setToken(null);
+        setIsAuthenticated(false);
+      }
+    };
+
+    const handleStaleToken = async () => {
+      if (isAuthenticated) {
+        const user = await Formio.currentUser();
+        if (!user) {
+          setToken(null);
+          setIsAuthenticated(false);
+        }
+      }
+    };
+
+    Formio.events.on("formio.user", handleUserEvent);
+    handleStaleToken();
+
+    return () => {
+      Formio.events.off("formio.user", handleUserEvent);
+    };
+  }, [isAuthenticated, Formio]);
+
+  const logout = async () => {
+    await Formio.logout();
+    setToken(null);
+    setIsAuthenticated(false);
+  };
+
+  return { token, setToken, isAuthenticated, logout };
+};
+
+export const FormioContext = createContext<(ReturnType<typeof useBaseConfiguration> & ReturnType<typeof useAuthentication>) | null>(null);
+
+export function FormioProvider({
+  children,
+  baseUrl,
+  projectUrl,
+  Formio
+}: {
+  children: React.ReactNode;
+} & BaseConfigurationArgs) {
+  const baseConfig = useBaseConfiguration({ baseUrl, projectUrl, Formio });
+  const auth = useAuthentication({ Formio: baseConfig.Formio });
+  const formio = { ...baseConfig, ...auth };
+  return <FormioContext.Provider value={formio}>{children}</FormioContext.Provider>;
+}

package/src/hooks/useFormioContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { FormioContext } from "../contexts/FormioContext";
+
+export function useFormioContext() {
+  const context = useContext(FormioContext);
+
+  if (!context) {
+    throw new Error("useFormioContext must be used within a FormioProvider component.");
+  }
+
+  return context;
+}

package/src/hooks/useI18n.ts

@@ -0,0 +1,9 @@
+import type { FormOptions } from "../interfaces/index.js";
+
+export function useI18n(labels?: FormOptions["i18n"]) {
+  return {
+    t: (key: string, defaultValue: string = key) => {
+      return labels?.[key] || defaultValue;
+    }
+  };
+}

package/src/index.ts

@@ -1,15 +1,19 @@
-import Webform from "formiojs/Webform";
-import WebformBuilder from "formiojs/WebformBuilder";
-import Wizard from "formiojs/Wizard";
-import WizardBuilder from "formiojs/WizardBuilder";
-
+export * from "./interfaces";
 export {
+  Builders,
+  Components,
+  DefaultEvaluator,
+  Displays,
+  EventEmitter,
+  Form,
+  FormBuilder,
+  Formio,
+  Licenses,
+  Providers,
+  registerModule,
+  Templates,
+  useModule,
+  Utils,
   Webform,
-  WebformBuilder,
-  Wizard,
-  WizardBuilder
-  // editFormUtils,
-};
-
-export * from "./interfaces";
-export { Components, Formio, Templates, Utils } from "formiojs";
+  Widgets
+} from "@formio/js";

package/src/interfaces/ComponentType.ts

@@ -1,3 +1,3 @@
-import { ExtendedComponentSchema } from "formiojs";
+import type { Component } from "@formio/core";
 
-export type ComponentType = ExtendedComponentSchema;
+export type ComponentType = Omit<Component, "components"> & { components?: ComponentType[] } & { title?: string } & Record<string, unknown>;

package/src/interfaces/FormBuilderOptions.ts

@@ -0,0 +1,9 @@
+import { FormBuilder } from "@formio/js";
+
+import type { FormOptions } from "./FormOptions.js";
+
+export type FormBuilderOptions = FormBuilder["options"] & {
+  template?: string;
+  iconset?: string;
+  i18n?: FormOptions["i18n"];
+};

package/src/interfaces/FormOptions.ts

@@ -1,14 +1,8 @@
-import type { EventEmitter2 } from "eventemitter2";
+import { EventEmitter, Form } from "@formio/js";
 
-export interface FormOptions {
-  iconset?: string;
-  readOnly?: boolean;
-  noAlerts?: boolean;
-  i18n?: (f: string) => string;
-  template?: string;
-  saveDraft?: boolean;
-  events?: EventEmitter2;
-  hooks?: {
-    customValidation?: Function;
-  };
-}
+import type { FormType } from "./FormType.js";
+
+export type FormOptions = Form["options"] & {
+  events?: EventEmitter;
+  currentForm?: FormType;
+};

package/src/interfaces/FormType.ts

@@ -1,13 +1,7 @@
-import type { ComponentType } from "./ComponentType";
+import type { Form } from "@formio/core";
 
-export type FormType = {
-  _id?: string;
-  title?: string;
-  name?: string;
-  machineName?: string;
+import type { ComponentType } from "./ComponentType.js";
+
+export type FormType = Omit<Form, "components"> & {
   components: ComponentType[];
-  tags?: string[];
-  action?: string;
-  properties?: Record<string, any>;
-  [key: string]: any;
-};
+} & Record<string, unknown>;

package/src/interfaces/SubmissionType.ts

@@ -1,18 +1,19 @@
-import type { ComponentType } from "./ComponentType";
+import type { Component, Submission } from "@formio/core";
 
 export type JSON = unknown | string | number | boolean | null | undefined | JSON[] | { [key: string]: JSON };
 
-export interface SubmissionType<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends Record<string, JSON> {
-  _id?: string;
+export type SubmissionType<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<Partial<Submission>, "data"> & {
   data: Data;
-  metadata?: { [key: string]: JSON };
-  state?: string;
-}
+};
 
-export interface ChangedSubmission<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends SubmissionType<Data> {
+export interface ChangedSubmission<
+  Data extends { [key: string]: JSON } = {
+    [key: string]: JSON;
+  }
+> extends SubmissionType<Data> {
   data: Data;
   changed?: {
-    component: ComponentType;
+    component: Component;
     instance: any;
     value: unknown;
   } & Record<string, JSON>;

package/src/interfaces/index.ts

@@ -1,6 +1,7 @@
 export * from "./ActionType";
 export * from "./ColumnIdentifier";
 export * from "./ComponentType";
+export * from "./FormBuilderOptions";
 export * from "./FormOptions";
 export * from "./FormType";
 export * from "./Operation";

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} />);