@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/organisms/views/FormViews.stories.tsx

@@ -0,0 +1,221 @@
+import "../../molecules/button/Button";
+import "../../molecules/forms/input-text/InputText";
+import "../../molecules/forms/select/all";
+import "../../molecules/forms/form-control/FormControl";
+import "../../molecules/pagination/all";
+import "../../molecules/table/all";
+import "../../molecules/tabs/all";
+import "../../molecules/card/Card";
+import "../form/builder/all";
+import "../form/Form";
+
+import { Meta, StoryObj } from "@storybook/react-vite";
+
+import ActionsTableStory from "../table/actions/ActionsTable.stories.js";
+import SubmissionsTableStory from "../table/submissions/SubmissionsTable.stories.js";
+import { FormViews } from "./FormViews.js";
+
+/**
+ * FormViews component displays a tabbed interface for managing forms with tabs for editing,
+ * viewing submissions, previewing, managing actions, controlling access, exporting, and configuring settings.
+ *
+ * ```tsx
+ * import { FormViews } from "@tsed/react-formio/organisms/views/FormViews";
+ * ```
+ *
+ * ## Implementation
+ *
+ * ```tsx
+ * import type { FormType } 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 = {
+ *   form: FormEditProps["form"];
+ *   submissions: SubmissionsTableProps["data"];
+ *   availableActions: ActionsTableProps["availableActions"];
+ *   actions: ActionsTableProps["data"];
+ *   roles?: FormAccessProps["roles"];
+ *   i18n?: (key: string) => string;
+ *   onAction: () => void;
+ *   operations: SubmissionsTableProps["operations"];
+ * };
+ *
+ * export function FormViews({ form, roles, availableActions, actions, submissions, operations, i18n = (f) => f }: FormViewsProps) {
+ *   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");
+ *
+ *   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 className={"border-top-0"} form={form as FormType} data={submissions} i18n={i18n} operations={operations} />
+ *         </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={[]} 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>
+ *   );
+ * }
+ * ```
+ */
+export default {
+  title: "views/FormViews",
+  component: FormViews,
+  argTypes: {
+    form: {
+      description: "The form object to manage",
+      control: "object"
+    },
+    submissions: {
+      description: "Submission data to display in the Data tab",
+      control: "object"
+    },
+    // operations: {
+    //   description: "Operations available for submissions",
+    //   control: "object"
+    // },
+    roles: {
+      description: "Roles for access control",
+      control: "object"
+    },
+    i18n: {
+      description: "Internationalization function"
+    },
+    onAction: {
+      action: "onAction",
+      description: "Callback when an action is triggered"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Component that displays a tabbed interface for managing forms with tabs for editing, viewing submissions, previewing, managing actions, controlling access, exporting, and configuring settings."
+      }
+    }
+  }
+} satisfies Meta<typeof FormViews>;
+
+type Story = StoryObj<typeof FormViews>;
+
+/**
+ * Basic form view with a simple form
+ */
+export const Usage: Story = {
+  args: {
+    form: SubmissionsTableStory.args.form as any,
+    submissions: SubmissionsTableStory.args.data as any,
+    // operations: SubmissionsTableStory.args.operations,
+    actions: ActionsTableStory.args.data as any,
+    roles: [
+      {
+        _id: "1",
+        title: "Administrator"
+      },
+      {
+        _id: "2",
+        title: "Authenticated"
+      },
+      {
+        _id: "3",
+        title: "Anonymous"
+      }
+    ],
+    i18n: {},
+    onAction: () => console.log("Action triggered")
+  }
+};
+
+/**
+ * Form view with translated labels
+ */
+export const Translated: Story = {
+  args: {
+    form: SubmissionsTableStory.args.form as any,
+    submissions: SubmissionsTableStory.args.data as any,
+    // operations: SubmissionsTableStory.args.operations,
+    actions: ActionsTableStory.args.data as any,
+    roles: [
+      {
+        _id: "1",
+        title: "Administrator"
+      },
+      {
+        _id: "2",
+        title: "Authenticated"
+      },
+      {
+        _id: "3",
+        title: "Anonymous"
+      }
+    ],
+    i18n: {
+      Edit: "Éditer",
+      Data: "Données",
+      Preview: "Aperçu",
+      Actions: "Actions",
+      Access: "Accès",
+      Export: "Exporter",
+      Settings: "Paramètres",
+      "Form with First Name": "Formulaire avec prénom",
+      "First name": "Prénom",
+      "Last name": "Nom de famille",
+      Submit: "Soumettre"
+    },
+    onAction: () => console.log("Action triggered")
+  }
+};

package/src/organisms/views/FormViews.tsx

@@ -0,0 +1,148 @@
+import { useI18n } from "../../hooks/useI18n.js";
+import type { FormOptions, 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?: FormOptions["i18n"];
+  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,
+  ...props
+}: FormViewsProps<Data>) {
+  const { t } = useI18n(props.i18n);
+  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'>
+          {t("Edit")}
+        </Tab>
+        <Tab value={1} icon='data'>
+          {t("Data")}
+        </Tab>
+        <Tab value={2} icon='test-tube'>
+          {t("Preview")}
+        </Tab>
+        <Tab value={3} icon='paper-plane'>
+          {t("Actions")}
+        </Tab>
+        <Tab value={4} icon='lock'>
+          {t("Access")}
+        </Tab>
+        <Tab value={5} icon='download'>
+          {t("Export")}
+        </Tab>
+        <Tab value={6} icon='cog'>
+          {t("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} />
+        </TabPanel>
+        <TabPanel value={1}>
+          <SubmissionsTable<Data>
+            className={"border-top-0"}
+            form={form as FormType}
+            data={submissions}
+            i18n={props.i18n}
+            operations={submissionsOperations}
+          />
+        </TabPanel>
+        <TabPanel value={2}>
+          <FormPreview form={form as FormType} i18n={props.i18n} />
+        </TabPanel>
+        <TabPanel value={3}>
+          <ActionsTable
+            className={"border-top-0"}
+            availableActions={availableActions}
+            data={actions}
+            operations={actionsOperations as any}
+            i18n={props.i18n}
+          />
+        </TabPanel>
+        <TabPanel value={4} className='pt-3'>
+          <FormAccess form={form as FormType} roles={roles} options={props} />
+        </TabPanel>
+        <TabPanel value={5} className='pt-3'>
+          <FormExport i18n={props.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/src/registries/components.ts

@@ -13,5 +13,11 @@ export function getComponent<Cmp>(type: string | string[]): Cmp {
     }
   }
 
-  return components.get(type as string) as unknown as Cmp;
+  const result = components.get(type as string) as unknown as Cmp;
+
+  if (!result) {
+    console.warn(`Missing component for ${type}`);
+  }
+
+  return result;
 }

package/src/utils/iconClass.ts

@@ -1,6 +1,4 @@
-import * as formio from "formiojs";
-
-const { Templates } = formio;
+import { Templates } from "@formio/js";
 
 export function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {
   return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);

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/molecules/forms/select/Select.interfaces.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=Select.interfaces.js.map

package/dist/molecules/forms/select/Select.interfaces.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.interfaces.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/molecules/table/components/DefaultCells.d.ts

@@ -1,4 +0,0 @@
-import { Row } from 'react-table';
-export declare function DefaultCells<Data extends object = {}>({ row }: {
-    row: Row<Data>;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/table/components/DefaultCells.js

@@ -1,23 +0,0 @@
-import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { createElement as o } from "react";
-function c({ row: n }) {
-  return /* @__PURE__ */ a(s, { children: n.cells.map((e, t) => {
-    const { hidden: l, colspan: r } = e.column;
-    return l ? null : /* @__PURE__ */ o(
-      "td",
-      {
-        colSpan: r,
-        ...e.getCellProps({
-          className: e.column.className,
-          style: e.column.style
-        }),
-        key: `tableInstance.page.cells.${e.value || "value"}.${t}`
-      },
-      e.render("Cell")
-    );
-  }) });
-}
-export {
-  c as DefaultCells
-};
-//# sourceMappingURL=DefaultCells.js.map

package/dist/molecules/table/components/DefaultCells.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultCells.js","sources":["../../../../src/molecules/table/components/DefaultCells.tsx"],"sourcesContent":["import { Row } from \"react-table\";\n\nimport type { ExtendedCell } from \"../hooks/useCustomTable\";\n\nexport function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data> }) {\n  return (\n    <>\n      {row.cells.map((cell: ExtendedCell<Data>, i) => {\n        const { hidden, colspan } = cell.column;\n\n        if (hidden) {\n          return null;\n        }\n\n        return (\n          <td\n            colSpan={colspan}\n            {...cell.getCellProps({\n              className: cell.column.className,\n              style: cell.column.style\n            })}\n            key={`tableInstance.page.cells.${cell.value || \"value\"}.${i}`}\n          >\n            {cell.render(\"Cell\") as any}\n          </td>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["DefaultCells","row","cell","i","hidden","colspan","createElement"],"mappings":";;AAIgB,SAAAA,EAAuC,EAAE,KAAAC,KAA2B;AAClF,gCAEK,UAAIA,EAAA,MAAM,IAAI,CAACC,GAA0BC,MAAM;AAC9C,UAAM,EAAE,QAAAC,GAAQ,SAAAC,EAAQ,IAAIH,EAAK;AAEjC,WAAIE,IACK,OAIP,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASD;AAAA,QACR,GAAGH,EAAK,aAAa;AAAA,UACpB,WAAWA,EAAK,OAAO;AAAA,UACvB,OAAOA,EAAK,OAAO;AAAA,QAAA,CACpB;AAAA,QACD,KAAK,4BAA4BA,EAAK,SAAS,OAAO,IAAIC,CAAC;AAAA,MAAA;AAAA,MAE1DD,EAAK,OAAO,MAAM;AAAA,IACrB;AAAA,EAEH,CAAA,GACH;AAEJ;"}

package/dist/molecules/table/components/DefaultRow.d.ts

@@ -1,12 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
-import { Row } from 'react-table';
-export interface DefaultRowProps<Data extends object = {}> extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "onClick" | "onDrag" | "onDrop"> {
-    onClick: (data: any, action: string) => void;
-    row: Row<Data>;
-    index: number;
-    onDrop: (item: Data) => void;
-    onDrag: (index: number, hoverIndex: number) => void;
-    enableDragNDrop?: boolean;
-}
-export declare function DefaultDndRow<Data extends object = {}>(props: DefaultRowProps<Data>): import("react/jsx-runtime").JSX.Element;
-export declare function DefaultRow<Data extends object = {}>({ onClick, row, enableDragNDrop, onDrop, onDrag, ...props }: DefaultRowProps<Data>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/table/components/DefaultRow.js

@@ -1,26 +0,0 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { c as m } from "../../../chunks/index.js";
-import f from "lodash/omit";
-import { iconClass as d } from "../../../utils/iconClass.js";
-import { useDndRow as u } from "../hooks/useDragnDropRow.js";
-import { DefaultCells as n } from "./DefaultCells.js";
-function g(t) {
-  const { isDragging: e, dragRef: o, dropRef: i, opacity: s } = u(t);
-  return /* @__PURE__ */ c("tr", { ref: i, style: { opacity: s }, children: [
-    /* @__PURE__ */ r("td", { ref: o, role: "cell", style: { cursor: e ? "grabbing" : "grab" }, className: "align-middle", children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r("i", { className: m(d(void 0, "dots-vertical-rounded")) }) }) }),
-    /* @__PURE__ */ r(n, { ...t })
-  ] });
-}
-function b({ onClick: t, row: e, enableDragNDrop: o, onDrop: i, onDrag: s, ...a }) {
-  const l = {
-    ...a,
-    onClick: () => t(e.original, "row"),
-    ...e.getRowProps()
-  };
-  return o ? /* @__PURE__ */ r(g, { ...l, row: e, onDrag: s, onDrop: i }) : /* @__PURE__ */ r("tr", { ...f(l, ["key"]), children: /* @__PURE__ */ r(n, { row: e }) });
-}
-export {
-  g as DefaultDndRow,
-  b as DefaultRow
-};
-//# sourceMappingURL=DefaultRow.js.map

package/dist/molecules/table/components/DefaultRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultRow.js","sources":["../../../../src/molecules/table/components/DefaultRow.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport omit from \"lodash/omit\";\nimport { DetailedHTMLProps, HTMLAttributes } from \"react\";\nimport { Row } from \"react-table\";\n\nimport { iconClass } from \"../../../utils/iconClass\";\nimport { useDndRow } from \"../hooks/useDragnDropRow\";\nimport { DefaultCells } from \"./DefaultCells\";\n\nexport interface DefaultRowProps<Data extends object = {}>\n  extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, \"onClick\" | \"onDrag\" | \"onDrop\"> {\n  onClick: (data: any, action: string) => void;\n  row: Row<Data>;\n  index: number;\n  onDrop: (item: Data) => void;\n  onDrag: (index: number, hoverIndex: number) => void;\n  enableDragNDrop?: boolean;\n}\n\nexport function DefaultDndRow<Data extends object = {}>(props: DefaultRowProps<Data>) {\n  const { isDragging, dragRef, dropRef, opacity } = useDndRow(props);\n\n  return (\n    <tr ref={dropRef} style={{ opacity }}>\n      {/* eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role */}\n      <td ref={dragRef} role='cell' style={{ cursor: isDragging ? \"grabbing\" : \"grab\" }} className='align-middle'>\n        <div className='flex items-center justify-center'>\n          <i className={classnames(iconClass(undefined, \"dots-vertical-rounded\"))} />\n        </div>\n      </td>\n      <DefaultCells<Data> {...props} />\n    </tr>\n  );\n}\n\nexport function DefaultRow<Data extends object = {}>({ onClick, row, enableDragNDrop, onDrop, onDrag, ...props }: DefaultRowProps<Data>) {\n  const opts = {\n    ...props,\n    onClick: () => onClick(row.original, \"row\"),\n    ...row.getRowProps()\n  };\n\n  if (enableDragNDrop) {\n    return <DefaultDndRow<Data> {...opts} row={row} onDrag={onDrag} onDrop={onDrop} />;\n  }\n\n  return (\n    <tr {...omit(opts, [\"key\"])}>\n      <DefaultCells<Data> row={row} />\n    </tr>\n  );\n}\n"],"names":["DefaultDndRow","props","isDragging","dragRef","dropRef","opacity","useDndRow","jsx","classnames","iconClass","DefaultCells","DefaultRow","onClick","row","enableDragNDrop","onDrop","onDrag","opts","omit"],"mappings":";;;;;;AAmBO,SAASA,EAAwCC,GAA8B;AACpF,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,SAAAC,GAAS,SAAAC,EAAQ,IAAIC,EAAUL,CAAK;AAEjE,2BACG,MAAG,EAAA,KAAKG,GAAS,OAAO,EAAE,SAAAC,EAEzB,GAAA,UAAA;AAAA,IAAA,gBAAAE,EAAC,MAAG,EAAA,KAAKJ,GAAS,MAAK,QAAO,OAAO,EAAE,QAAQD,IAAa,aAAa,OAAO,GAAG,WAAU,gBAC3F,UAAC,gBAAAK,EAAA,OAAA,EAAI,WAAU,oCACb,UAAC,gBAAAA,EAAA,KAAA,EAAE,WAAWC,EAAWC,EAAU,QAAW,uBAAuB,CAAC,EAAG,CAAA,EAC3E,CAAA,GACF;AAAA,IACA,gBAAAF,EAACG,GAAoB,EAAA,GAAGT,EAAO,CAAA;AAAA,EAAA,GACjC;AAEJ;AAEgB,SAAAU,EAAqC,EAAE,SAAAC,GAAS,KAAAC,GAAK,iBAAAC,GAAiB,QAAAC,GAAQ,QAAAC,GAAQ,GAAGf,KAAgC;AACvI,QAAMgB,IAAO;AAAA,IACX,GAAGhB;AAAA,IACH,SAAS,MAAMW,EAAQC,EAAI,UAAU,KAAK;AAAA,IAC1C,GAAGA,EAAI,YAAY;AAAA,EACrB;AAEA,SAAIC,sBACMd,GAAqB,EAAA,GAAGiB,GAAM,KAAAJ,GAAU,QAAAG,GAAgB,QAAAD,GAAgB,IAI/E,gBAAAR,EAAA,MAAA,EAAI,GAAGW,EAAKD,GAAM,CAAC,KAAK,CAAC,GACxB,UAAA,gBAAAV,EAACG,GAAmB,EAAA,KAAAG,EAAA,CAAU,EAChC,CAAA;AAEJ;"}

package/dist/molecules/table/components/DragNDropContainer.d.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare function DrapNDropContainer({ enableDragNDrop, children }: PropsWithChildren<{
-    enableDragNDrop?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/table/components/DragNDropContainer.js

@@ -1,10 +0,0 @@
-import { jsx as o, Fragment as t } from "react/jsx-runtime";
-import { DndProvider as m } from "react-dnd";
-import { HTML5Backend as e } from "react-dnd-html5-backend";
-function f({ enableDragNDrop: n, children: r }) {
-  return n ? /* @__PURE__ */ o(m, { backend: e, children: r }) : /* @__PURE__ */ o(t, { children: r });
-}
-export {
-  f as DrapNDropContainer
-};
-//# sourceMappingURL=DragNDropContainer.js.map

package/dist/molecules/table/components/DragNDropContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DragNDropContainer.js","sources":["../../../../src/molecules/table/components/DragNDropContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport { DndProvider } from \"react-dnd\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\n\nexport function DrapNDropContainer({ enableDragNDrop, children }: PropsWithChildren<{ enableDragNDrop?: boolean }>) {\n  return enableDragNDrop ? <DndProvider backend={HTML5Backend}>{children}</DndProvider> : <>{children}</>;\n}\n"],"names":["DrapNDropContainer","enableDragNDrop","children","DndProvider","HTML5Backend"],"mappings":";;;AAIO,SAASA,EAAmB,EAAE,iBAAAC,GAAiB,UAAAC,KAA8D;AAC3G,SAAAD,sBAAmBE,GAAY,EAAA,SAASC,GAAe,UAAAF,EAAS,CAAA,2BAAoB,UAAAA,EAAS,CAAA;AACtG;"}

package/dist/molecules/table/filters/DefaultColumnFilter.d.ts

@@ -1,10 +0,0 @@
-import { FilterProps } from 'react-table';
-export declare function DefaultColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D> & {
-    filterId: string;
-    setFilterId: any;
-    column: {
-        id: string;
-        filterValue: any;
-        setFilter: any;
-    };
-}): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/table/filters/DefaultColumnFilter.js

@@ -1,29 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { InputText as c } from "../../forms/input-text/InputText.js";
-function h(o) {
-  const {
-    filterId: r,
-    setFilterId: l,
-    column: { id: e, filterValue: i, setFilter: n }
-  } = o, [a, m] = u(i || "");
-  return /* @__PURE__ */ s(
-    c,
-    {
-      size: "small",
-      id: e,
-      name: e,
-      autoFocus: e === r,
-      value: a,
-      onChange: (f, t) => {
-        m(t), l(e), n(t || void 0);
-      },
-      placeholder: "Search records..."
-    },
-    e
-  );
-}
-export {
-  h as DefaultColumnFilter
-};
-//# sourceMappingURL=DefaultColumnFilter.js.map

package/dist/molecules/table/filters/DefaultColumnFilter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultColumnFilter.js","sources":["../../../../src/molecules/table/filters/DefaultColumnFilter.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { FilterProps } from \"react-table\";\n\nimport { InputText } from \"../../../molecules/forms/input-text/InputText\";\n\nexport function DefaultColumnFilter<D extends Record<string, unknown> = {}>(\n  props: FilterProps<D> & {\n    filterId: string;\n    setFilterId: any;\n    column: { id: string; filterValue: any; setFilter: any };\n  }\n) {\n  const {\n    filterId,\n    setFilterId,\n    column: { id, filterValue, setFilter }\n  } = props;\n\n  const [value, setValue] = useState(filterValue || \"\");\n\n  /* eslint-disable jsx-a11y/no-autofocus */\n  return (\n    <InputText\n      size={\"small\"}\n      id={id}\n      name={id}\n      key={id}\n      autoFocus={id === filterId}\n      value={value}\n      onChange={(name: string, value: any) => {\n        setValue(value);\n        setFilterId(id);\n        setFilter(value || undefined);\n      }}\n      placeholder={\"Search records...\"}\n    />\n  );\n}\n"],"names":["DefaultColumnFilter","props","filterId","setFilterId","id","filterValue","setFilter","value","setValue","useState","jsx","InputText","name"],"mappings":";;;AAKO,SAASA,EACdC,GAKA;AACM,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAQ,EAAE,IAAAC,GAAI,aAAAC,GAAa,WAAAC,EAAU;AAAA,EAAA,IACnCL,GAEE,CAACM,GAAOC,CAAQ,IAAIC,EAASJ,KAAe,EAAE;AAIlD,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,IAAAP;AAAA,MACA,MAAMA;AAAA,MAEN,WAAWA,MAAOF;AAAA,MAClB,OAAAK;AAAA,MACA,UAAU,CAACK,GAAcL,MAAe;AACtC,QAAAC,EAASD,CAAK,GACdJ,EAAYC,CAAE,GACdE,EAAUC,KAAS,MAAS;AAAA,MAC9B;AAAA,MACA,aAAa;AAAA,IAAA;AAAA,IARRH;AAAA,EASP;AAEJ;"}

package/dist/molecules/table/filters/SelectColumnFilter.d.ts

@@ -1,10 +0,0 @@
-import { FilterProps } from 'react-table';
-export declare function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): {
-    value: any;
-    onChange: (_: string, value: any) => void;
-    options: {
-        value: string;
-        label: string;
-    }[];
-};
-export declare function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/table/filters/SelectColumnFilter.js

@@ -1,34 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { Select as m } from "../../forms/select/Select.js";
-function f(t) {
-  const { column: n } = t, { id: l, preFilteredRows: i } = n, { choices: o } = n, { filterValue: c, setFilter: r } = n, u = o ? typeof o == "function" ? o(t) : o : [...new Set(i.map((e) => e.values[l]))].filter((e) => e).map((e) => ({
-    label: e,
-    value: e
-  }));
-  return {
-    value: c,
-    onChange: (e, s) => {
-      r(s || void 0);
-    },
-    options: [{ value: "", label: "All" }].concat(u)
-  };
-}
-function v(t) {
-  const { value: n, options: l, onChange: i } = f(t);
-  return /* @__PURE__ */ a(
-    m,
-    {
-      name: `filter-${t.column.id}`,
-      size: "small",
-      value: n,
-      options: l,
-      onChange: i
-    },
-    `filter-${t.column.id}`
-  );
-}
-export {
-  v as SelectColumnFilter,
-  f as useSelectColumnFilter
-};
-//# sourceMappingURL=SelectColumnFilter.js.map

package/dist/molecules/table/filters/SelectColumnFilter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectColumnFilter.js","sources":["../../../../src/molecules/table/filters/SelectColumnFilter.tsx"],"sourcesContent":["import { FilterProps } from \"react-table\";\n\nimport { Select } from \"../../../molecules/forms/select/Select\";\n\nexport function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {\n  const { column } = props;\n  const { id, preFilteredRows } = column as any;\n  const { choices: customChoices } = column as any;\n  const { filterValue, setFilter } = column as any;\n\n  const choices = (() => {\n    if (customChoices) {\n      if (typeof customChoices === \"function\") {\n        return customChoices(props);\n      }\n      return customChoices;\n    }\n\n    return [...new Set(preFilteredRows.map((row: any) => row.values[id]))]\n      .filter((value) => value)\n      .map((value) => ({\n        label: value,\n        value\n      }));\n  })();\n\n  const onChange = (_: string, value: any) => {\n    setFilter(value || undefined);\n  };\n\n  return {\n    value: filterValue,\n    onChange,\n    options: [{ value: \"\", label: \"All\" }].concat(choices)\n  };\n}\n\nexport function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {\n  const { value, options, onChange } = useSelectColumnFilter(props);\n\n  return (\n    <Select\n      key={`filter-${props.column.id}`}\n      name={`filter-${props.column.id}`}\n      size={\"small\"}\n      value={value}\n      options={options}\n      onChange={onChange}\n    />\n  );\n}\n"],"names":["useSelectColumnFilter","props","column","id","preFilteredRows","customChoices","filterValue","setFilter","choices","row","value","_","SelectColumnFilter","options","onChange","jsx","Select"],"mappings":";;AAIO,SAASA,EAA8DC,GAAuB;AAC7F,QAAA,EAAE,QAAAC,MAAWD,GACb,EAAE,IAAAE,GAAI,iBAAAC,EAAA,IAAoBF,GAC1B,EAAE,SAASG,EAAA,IAAkBH,GAC7B,EAAE,aAAAI,GAAa,WAAAC,EAAA,IAAcL,GAE7BM,IACAH,IACE,OAAOA,KAAkB,aACpBA,EAAcJ,CAAK,IAErBI,IAGF,CAAC,GAAG,IAAI,IAAID,EAAgB,IAAI,CAACK,MAAaA,EAAI,OAAON,CAAE,CAAC,CAAC,CAAC,EAClE,OAAO,CAACO,MAAUA,CAAK,EACvB,IAAI,CAACA,OAAW;AAAA,IACf,OAAOA;AAAA,IACP,OAAAA;AAAA,EAAA,EACA;AAOC,SAAA;AAAA,IACL,OAAOJ;AAAA,IACP,UANe,CAACK,GAAWD,MAAe;AAC1C,MAAAH,EAAUG,KAAS,MAAS;AAAA,IAC9B;AAAA,IAKE,SAAS,CAAC,EAAE,OAAO,IAAI,OAAO,MAAO,CAAA,EAAE,OAAOF,CAAO;AAAA,EACvD;AACF;AAEO,SAASI,EAA2DX,GAAuB;AAChG,QAAM,EAAE,OAAAS,GAAO,SAAAG,GAAS,UAAAC,EAAS,IAAId,EAAsBC,CAAK;AAG9D,SAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,MAAM,UAAUf,EAAM,OAAO,EAAE;AAAA,MAC/B,MAAM;AAAA,MACN,OAAAS;AAAA,MACA,SAAAG;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,IALK,UAAUb,EAAM,OAAO,EAAE;AAAA,EAMhC;AAEJ;"}

package/dist/molecules/table/filters/SliderColumnFilter.d.ts

@@ -1,9 +0,0 @@
-import { FilterProps } from 'react-table';
-export declare function SliderColumnFilter<D extends Record<string, unknown> = {}>({ column: { filterValue, setFilter, preFilteredRows, id } }: FilterProps<D> & {
-    column: {
-        filterValue: any;
-        setFilter: any;
-        preFilteredRows: any[];
-        id: string;
-    };
-}): import("react/jsx-runtime").JSX.Element;