@tsed/react-formio 3.0.0-rc.13 → 3.0.0-rc.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/all.js +2 -0
  2. package/dist/all.js.map +1 -1
  3. package/dist/chunks/index2.js +19748 -22277
  4. package/dist/chunks/index2.js.map +1 -1
  5. package/dist/chunks/moment.js +2535 -0
  6. package/dist/chunks/moment.js.map +1 -0
  7. package/dist/molecules/forms/select/Select.interface.d.ts +0 -4
  8. package/dist/molecules/table/all.js +2 -0
  9. package/dist/molecules/table/all.js.map +1 -1
  10. package/dist/molecules/table/components/DefaultBooleanCell.d.ts +2 -0
  11. package/dist/molecules/table/components/DefaultBooleanCell.js +12 -0
  12. package/dist/molecules/table/components/DefaultBooleanCell.js.map +1 -0
  13. package/dist/molecules/table/components/DefaultCell.js +7 -7
  14. package/dist/molecules/table/components/DefaultCell.js.map +1 -1
  15. package/dist/molecules/table/components/DefaultDateCell.d.ts +2 -0
  16. package/dist/molecules/table/components/DefaultDateCell.js +16 -0
  17. package/dist/molecules/table/components/DefaultDateCell.js.map +1 -0
  18. package/dist/molecules/table/components/DefaultFilter.d.ts +5 -7
  19. package/dist/molecules/table/components/DefaultFilter.js +8 -8
  20. package/dist/molecules/table/components/DefaultFilter.js.map +1 -1
  21. package/dist/molecules/table/interfaces/extends.d.ts +3 -0
  22. package/dist/molecules/table/utils/mapFormToColumns.d.ts +5 -1
  23. package/dist/molecules/table/utils/mapFormToColumns.js +54 -26
  24. package/dist/molecules/table/utils/mapFormToColumns.js.map +1 -1
  25. package/dist/organisms/table/forms/components/FormsCell.js +1 -1
  26. package/dist/organisms/table/submissions/SubmissionsTable.js +1 -1
  27. package/dist/organisms/table/submissions/SubmissionsTable.js.map +1 -1
  28. package/package.json +3 -3
  29. package/src/all.ts +2 -0
  30. package/src/molecules/forms/select/Select.interface.ts +0 -4
  31. package/src/molecules/table/Table.stories.tsx +72 -66
  32. package/src/molecules/table/all.ts +2 -0
  33. package/src/molecules/table/components/DefaultBooleanCell.spec.tsx +42 -0
  34. package/src/molecules/table/components/DefaultBooleanCell.tsx +11 -0
  35. package/src/molecules/table/components/DefaultCell.tsx +1 -1
  36. package/src/molecules/table/components/DefaultDateCell.spec.tsx +43 -0
  37. package/src/molecules/table/components/DefaultDateCell.tsx +23 -0
  38. package/src/molecules/table/components/DefaultFilter.tsx +10 -7
  39. package/src/molecules/table/filters/Filters.d.ts +1 -0
  40. package/src/molecules/table/interfaces/extends.ts +3 -0
  41. package/src/molecules/table/utils/mapFormToColumns.spec.tsx +85 -4
  42. package/src/molecules/table/utils/mapFormToColumns.tsx +66 -18
  43. package/src/organisms/table/submissions/SubmissionsTable.tsx +1 -1
@@ -24,10 +24,6 @@ export interface SelectProps<Data = string> extends FormControlProps<Data, Selec
24
24
  searchEnabled?: boolean;
25
25
  customProperties?: Record<string, any>;
26
26
  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
27
- /**
28
- * @deprecated
29
- */
30
- choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
31
27
  }
32
28
  export interface SelectSingle<Data = string> extends SelectProps<Data> {
33
29
  multiple?: false | undefined;
@@ -1,6 +1,8 @@
1
1
  import "./components/DefaultFilter.js";
2
2
  import "./components/DefaultArrowSort.js";
3
3
  import "./components/DefaultCell.js";
4
+ import "./components/DefaultBooleanCell.js";
5
+ import "./components/DefaultDateCell.js";
4
6
  import "./components/DefaultCellOperations.js";
5
7
  import "./components/DefaultOperationButton.js";
6
8
  import "./components/DefaultCellHeader.js";
@@ -1 +1 @@
1
- {"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,2 @@
1
+ import { CellContext } from '@tanstack/react-table';
2
+ export declare function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { registerComponent as o } from "../../../registries/components.js";
3
+ function l({ getValue: t, column: { columnDef: e } }) {
4
+ const n = t();
5
+ return /* @__PURE__ */ r("span", { children: String(n ? e.meta?.labels?.yes || "Yes" : e.meta?.labels?.No || "No") });
6
+ }
7
+ o("Cell.boolean", l);
8
+ o("Cell.checkbox", l);
9
+ export {
10
+ l as DefaultCellBoolean
11
+ };
12
+ //# sourceMappingURL=DefaultBooleanCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DefaultBooleanCell.js","sources":["../../../../src/molecules/table/components/DefaultBooleanCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {\n const value = getValue();\n return <span>{String(value ? columnDef.meta?.labels?.[\"yes\"] || \"Yes\" : columnDef.meta?.labels?.[\"No\"] || \"No\")}</span>;\n}\n\nregisterComponent(\"Cell.boolean\", DefaultCellBoolean);\nregisterComponent(\"Cell.checkbox\", DefaultCellBoolean);\n"],"names":["DefaultCellBoolean","getValue","columnDef","value","registerComponent"],"mappings":";;AAIO,SAASA,EAAwC,EAAE,UAAAC,GAAU,QAAQ,EAAE,WAAAC,EAAA,KAA2C;AACvH,QAAMC,IAAQF,EAAA;AACd,2BAAQ,QAAA,EAAM,UAAA,OAAOE,IAAQD,EAAU,MAAM,QAAS,OAAU,QAAQA,EAAU,MAAM,QAAS,MAAS,IAAI,GAAE;AAClH;AAEAE,EAAkB,gBAAgBJ,CAAkB;AACpDI,EAAkB,iBAAiBJ,CAAkB;"}
@@ -1,14 +1,14 @@
1
- import { jsx as n } from "react/jsx-runtime";
1
+ import { jsx as e } from "react/jsx-runtime";
2
2
  import { registerComponent as t } from "../../../registries/components.js";
3
- function l({ getValue: o, renderValue: i }) {
4
- const e = o();
5
- if (e === void 0)
6
- return /* @__PURE__ */ n("span", {});
3
+ function l({ getValue: i, renderValue: o }) {
7
4
  const r = i();
8
- return r != null && e !== r ? /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: String(r) } }) : /* @__PURE__ */ n("span", { children: String(e) });
5
+ if (r === void 0)
6
+ return /* @__PURE__ */ e("span", {});
7
+ const n = o();
8
+ return n != null && r !== n ? /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: String(n) } }) : /* @__PURE__ */ e("span", { children: String(r) });
9
9
  }
10
10
  t("Cell", l);
11
- t("Cell.text", l);
11
+ t("Cell.string", l);
12
12
  export {
13
13
  l as DefaultCell
14
14
  };
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultCell.js","sources":["../../../../src/molecules/table/components/DefaultCell.tsx"],"sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCell<Data = any>({ getValue, renderValue }: CellContext<Data, any>): JSX.Element {\n const value = getValue();\n if (value === undefined) {\n return <span></span>;\n }\n\n const rendered = renderValue();\n\n if (rendered != null && value !== rendered) {\n return <div dangerouslySetInnerHTML={{ __html: String(rendered) }} />;\n }\n\n return <span>{String(value)}</span>;\n}\n\nregisterComponent(\"Cell\", DefaultCell);\nregisterComponent(\"Cell.text\", DefaultCell);\n"],"names":["DefaultCell","getValue","renderValue","value","rendered","jsx","registerComponent"],"mappings":";;AAIO,SAASA,EAAwB,EAAE,UAAAC,GAAU,aAAAC,KAAoD;AACtG,QAAMC,IAAQF,EAAA;AACd,MAAIE,MAAU;AACZ,6BAAQ,QAAA,EAAK;AAGf,QAAMC,IAAWF,EAAA;AAEjB,SAAIE,KAAY,QAAQD,MAAUC,IACzB,gBAAAC,EAAC,SAAI,yBAAyB,EAAE,QAAQ,OAAOD,CAAQ,KAAK,IAG9D,gBAAAC,EAAC,QAAA,EAAM,UAAA,OAAOF,CAAK,GAAE;AAC9B;AAEAG,EAAkB,QAAQN,CAAW;AACrCM,EAAkB,aAAaN,CAAW;"}
1
+ {"version":3,"file":"DefaultCell.js","sources":["../../../../src/molecules/table/components/DefaultCell.tsx"],"sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultCell<Data = any>({ getValue, renderValue }: CellContext<Data, any>): JSX.Element {\n const value = getValue();\n if (value === undefined) {\n return <span></span>;\n }\n\n const rendered = renderValue();\n\n if (rendered != null && value !== rendered) {\n return <div dangerouslySetInnerHTML={{ __html: String(rendered) }} />;\n }\n\n return <span>{String(value)}</span>;\n}\n\nregisterComponent(\"Cell\", DefaultCell);\nregisterComponent(\"Cell.string\", DefaultCell);\n"],"names":["DefaultCell","getValue","renderValue","value","rendered","jsx","registerComponent"],"mappings":";;AAIO,SAASA,EAAwB,EAAE,UAAAC,GAAU,aAAAC,KAAoD;AACtG,QAAMC,IAAQF,EAAA;AACd,MAAIE,MAAU;AACZ,6BAAQ,QAAA,EAAK;AAGf,QAAMC,IAAWF,EAAA;AAEjB,SAAIE,KAAY,QAAQD,MAAUC,IACzB,gBAAAC,EAAC,SAAI,yBAAyB,EAAE,QAAQ,OAAOD,CAAQ,KAAK,IAG9D,gBAAAC,EAAC,QAAA,EAAM,UAAA,OAAOF,CAAK,GAAE;AAC9B;AAEAG,EAAkB,QAAQN,CAAW;AACrCM,EAAkB,eAAeN,CAAW;"}
@@ -0,0 +1,2 @@
1
+ import { CellContext } from '@tanstack/react-table';
2
+ export declare function DefaultDateCell<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,16 @@
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { h as o } from "../../../chunks/moment.js";
3
+ import { registerComponent as n } from "../../../registries/components.js";
4
+ function a({ getValue: i, column: { columnDef: l } }) {
5
+ const e = i();
6
+ if (!e)
7
+ return /* @__PURE__ */ t("span", {});
8
+ const r = o.parseZone(e, o.ISO_8601, !0);
9
+ return r.isValid() ? /* @__PURE__ */ t("span", { children: r.format(l.meta?.format || "L") }) : /* @__PURE__ */ t("span", { children: String(e) });
10
+ }
11
+ n("Cell.date", a);
12
+ n("Cell.datetime", a);
13
+ export {
14
+ a as DefaultDateCell
15
+ };
16
+ //# sourceMappingURL=DefaultDateCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DefaultDateCell.js","sources":["../../../../src/molecules/table/components/DefaultDateCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\nimport moment from \"moment\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport function DefaultDateCell<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, string>) {\n const value = getValue();\n\n if (!value) {\n return <span />;\n }\n\n const date = moment.parseZone(value, moment.ISO_8601, true);\n\n if (!date.isValid()) {\n return <span>{String(value)}</span>;\n }\n\n return <span>{date.format(columnDef.meta?.format || \"L\")}</span>;\n}\n\nregisterComponent(\"Cell.date\", DefaultDateCell);\nregisterComponent(\"Cell.datetime\", DefaultDateCell);\n"],"names":["DefaultDateCell","getValue","columnDef","value","date","moment","jsx","registerComponent"],"mappings":";;;AAKO,SAASA,EAAqC,EAAE,UAAAC,GAAU,QAAQ,EAAE,WAAAC,EAAA,KAA0C;AACnH,QAAMC,IAAQF,EAAA;AAEd,MAAI,CAACE;AACH,6BAAQ,QAAA,EAAK;AAGf,QAAMC,IAAOC,EAAO,UAAUF,GAAOE,EAAO,UAAU,EAAI;AAE1D,SAAKD,EAAK,YAIH,gBAAAE,EAAC,UAAM,UAAAF,EAAK,OAAOF,EAAU,MAAM,UAAU,GAAG,EAAA,CAAE,IAHhD,gBAAAI,EAAC,QAAA,EAAM,UAAA,OAAOH,CAAK,GAAE;AAIhC;AAEAI,EAAkB,aAAaP,CAAe;AAC9CO,EAAkB,iBAAiBP,CAAe;"}
@@ -1,11 +1,9 @@
1
- import { Header } from '@tanstack/react-table';
2
- export interface DefaultFilterProps<Data = any> {
3
- header: Header<Data, unknown>;
1
+ import { Header, RowData } from '@tanstack/react-table';
2
+ export interface DefaultFilterProps<Data extends RowData = any, TValue = unknown> {
3
+ header: Header<Data, TValue>;
4
4
  i18n?: (f: string) => string;
5
5
  }
6
- export interface FilterProps<Data = any, Opts = Record<string, unknown>> {
7
- header: Header<Data, unknown>;
6
+ export interface FilterProps<Data extends RowData = any, Opts = Record<string, unknown>> extends DefaultFilterProps<Data> {
8
7
  options: Opts;
9
- i18n?: (f: string) => string;
10
8
  }
11
- export declare function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<Data>): import("react/jsx-runtime").JSX.Element | null;
9
+ export declare function DefaultFilter<Data extends RowData = any, TValue = unknown>(props: DefaultFilterProps<Data, TValue>): import("react/jsx-runtime").JSX.Element | null;
@@ -1,15 +1,15 @@
1
1
  import { jsx as l } from "react/jsx-runtime";
2
- import { registerComponent as o, getComponent as c } from "../../../registries/components.js";
3
- function m({ header: t, i18n: n }) {
4
- const {
5
- filter: r = {
2
+ import { registerComponent as a, getComponent as c } from "../../../registries/components.js";
3
+ function s(n) {
4
+ const { header: t, i18n: o } = n, {
5
+ filter: e = {
6
6
  variant: "text"
7
7
  }
8
- } = t.column.columnDef.meta || {}, { variant: i } = r, e = c([`Filter.${t.column.id}`, `Filter.${i}`, "Filter.text"]);
9
- return e ? /* @__PURE__ */ l("div", { className: "table-cell-header__filter", children: /* @__PURE__ */ l(e, { header: t, options: r, i18n: n }) }) : (console.warn("Missing filter for `Filter." + t.column.id + "` or `Filter." + i + "`"), null);
8
+ } = t.column.columnDef.meta || {}, { variant: r } = e, i = c([`Filter.${t.column.id}`, `Filter.${r}`, "Filter.text"]);
9
+ return i ? e.disabled ? null : /* @__PURE__ */ l("div", { className: "table-cell-header__filter", children: /* @__PURE__ */ l(i, { header: t, options: e, i18n: o }) }) : (console.warn("Missing filter for `Filter." + t.column.id + "` or `Filter." + r + "`"), null);
10
10
  }
11
- o("Filter", m);
11
+ a("Filter", s);
12
12
  export {
13
- m as DefaultFilter
13
+ s as DefaultFilter
14
14
  };
15
15
  //# sourceMappingURL=DefaultFilter.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultFilter.js","sources":["../../../../src/molecules/table/components/DefaultFilter.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { Header } from \"@tanstack/react-table\";\nimport type { ComponentType } from \"react\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface DefaultFilterProps<Data = any> {\n header: Header<Data, unknown>;\n i18n?: (f: string) => string;\n}\n\nexport interface FilterProps<Data = any, Opts = Record<string, unknown>> {\n header: Header<Data, unknown>;\n options: Opts;\n i18n?: (f: string) => string;\n}\n\nexport function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<Data>) {\n const {\n filter = {\n variant: \"text\"\n }\n } = header.column.columnDef.meta || {};\n\n const { variant: filterVariant } = filter;\n const Filter = getComponent<ComponentType<FilterProps>>([`Filter.${header.column.id}`, `Filter.${filterVariant}`, \"Filter.text\"]);\n\n if (!Filter) {\n console.warn(\"Missing filter for `Filter.\" + header.column.id + \"` or `Filter.\" + filterVariant + \"`\");\n\n return null;\n }\n\n return (\n <div className='table-cell-header__filter'>\n <Filter header={header} options={filter} i18n={i18n} />\n </div>\n );\n}\n\nregisterComponent(\"Filter\", DefaultFilter);\n"],"names":["DefaultFilter","header","i18n","filter","filterVariant","Filter","getComponent","jsx","registerComponent"],"mappings":";;AAkBO,SAASA,EAA0B,EAAE,QAAAC,GAAQ,MAAAC,KAAkC;AACpF,QAAM;AAAA,IACJ,QAAAC,IAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,EACX,IACEF,EAAO,OAAO,UAAU,QAAQ,CAAA,GAE9B,EAAE,SAASG,EAAA,IAAkBD,GAC7BE,IAASC,EAAyC,CAAC,UAAUL,EAAO,OAAO,EAAE,IAAI,UAAUG,CAAa,IAAI,aAAa,CAAC;AAEhI,SAAKC,IAOH,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA,gBAAAA,EAACF,KAAO,QAAAJ,GAAgB,SAASE,GAAQ,MAAAD,EAAA,CAAY,EAAA,CACvD,KARA,QAAQ,KAAK,gCAAgCD,EAAO,OAAO,KAAK,kBAAkBG,IAAgB,GAAG,GAE9F;AAQX;AAEAI,EAAkB,UAAUR,CAAa;"}
1
+ {"version":3,"file":"DefaultFilter.js","sources":["../../../../src/molecules/table/components/DefaultFilter.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { Header, RowData } from \"@tanstack/react-table\";\nimport type { ComponentType } from \"react\";\n\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface DefaultFilterProps<Data extends RowData = any, TValue = unknown> {\n header: Header<Data, TValue>;\n i18n?: (f: string) => string;\n}\n\nexport interface FilterProps<Data extends RowData = any, Opts = Record<string, unknown>> extends DefaultFilterProps<Data> {\n options: Opts;\n}\n\nexport function DefaultFilter<Data extends RowData = any, TValue = unknown>(props: DefaultFilterProps<Data, TValue>) {\n const { header, i18n } = props;\n const {\n filter = {\n variant: \"text\"\n }\n } = header.column.columnDef.meta || {};\n\n const { variant: filterVariant } = filter;\n const Filter = getComponent<ComponentType<FilterProps>>([`Filter.${header.column.id}`, `Filter.${filterVariant}`, \"Filter.text\"]);\n\n if (!Filter) {\n console.warn(\"Missing filter for `Filter.\" + header.column.id + \"` or `Filter.\" + filterVariant + \"`\");\n\n return null;\n }\n\n if (filter.disabled) {\n return null;\n }\n\n return (\n <div className='table-cell-header__filter'>\n <Filter header={header} options={filter} i18n={i18n} />\n </div>\n );\n}\n\nregisterComponent(\"Filter\", DefaultFilter);\n"],"names":["DefaultFilter","props","header","i18n","filter","filterVariant","Filter","getComponent","jsx","registerComponent"],"mappings":";;AAgBO,SAASA,EAA4DC,GAAyC;AACnH,QAAM,EAAE,QAAAC,GAAQ,MAAAC,EAAA,IAASF,GACnB;AAAA,IACJ,QAAAG,IAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,EACX,IACEF,EAAO,OAAO,UAAU,QAAQ,CAAA,GAE9B,EAAE,SAASG,EAAA,IAAkBD,GAC7BE,IAASC,EAAyC,CAAC,UAAUL,EAAO,OAAO,EAAE,IAAI,UAAUG,CAAa,IAAI,aAAa,CAAC;AAEhI,SAAKC,IAMDF,EAAO,WACF,OAIP,gBAAAI,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA,gBAAAA,EAACF,KAAO,QAAAJ,GAAgB,SAASE,GAAQ,MAAAD,EAAA,CAAY,EAAA,CACvD,KAZA,QAAQ,KAAK,gCAAgCD,EAAO,OAAO,KAAK,kBAAkBG,IAAgB,GAAG,GAE9F;AAYX;AAEAI,EAAkB,UAAUT,CAAa;"}
@@ -3,6 +3,9 @@ import { TdHTMLAttributes } from 'react';
3
3
  import { FilterOptions } from '../filters/Filters';
4
4
  declare module "@tanstack/react-table" {
5
5
  interface ColumnMeta<TData extends RowData, TValue> {
6
+ type?: "string" | "number" | "boolean" | "date" | string;
7
+ format?: string;
8
+ labels?: Record<string, string>;
6
9
  filter?: FilterOptions;
7
10
  sort?: string;
8
11
  cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
@@ -1,3 +1,7 @@
1
1
  import { ColumnDef, ColumnDefResolved } from '@tanstack/react-table';
2
2
  import { FormType } from '../../../interfaces';
3
- export declare function mapFormToColumns<Data = any>(form: FormType, columns?: ColumnDefResolved<Data, any>[]): ColumnDef<Data, any>[];
3
+ export declare function mapFormToColumns<Data = any>({ form, columns, prefix }: {
4
+ form: FormType;
5
+ columns?: ColumnDefResolved<Data, any>[];
6
+ prefix?: string;
7
+ }): ColumnDef<Data, any>[];
@@ -1,38 +1,66 @@
1
- import { createColumnHelper as p } from "@tanstack/react-table";
2
- import { c as u } from "../../../chunks/cloneDeep.js";
3
- import { g as i } from "../../../chunks/_commonjsHelpers.js";
4
- import { r as f } from "../../../chunks/get.js";
5
- import { getComponent as d } from "../../../registries/components.js";
6
- var C = f();
7
- const g = /* @__PURE__ */ i(C), x = {
1
+ import { createColumnHelper as f } from "@tanstack/react-table";
2
+ import { c as y } from "../../../chunks/cloneDeep.js";
3
+ import { g as C } from "../../../chunks/_commonjsHelpers.js";
4
+ import { r as g } from "../../../chunks/get.js";
5
+ import { getComponent as b } from "../../../registries/components.js";
6
+ var x = g();
7
+ const h = /* @__PURE__ */ C(x), K = {
8
8
  number: "range",
9
9
  currency: "range",
10
10
  checkbox: "boolean"
11
+ }, k = {
12
+ date: "date",
13
+ datetime: "date",
14
+ number: "number",
15
+ currency: "currency",
16
+ checkbox: "boolean"
11
17
  };
12
- function h(a, l = []) {
13
- const c = p(), o = u(l), n = d("Cell");
14
- return a.components.flatMap((e) => e.type === "tabs" ? e.components?.flatMap((t) => t.components) : [e]).filter((e) => e?.tableView).map((e) => {
15
- const t = e, m = o.findIndex(({ accessorKey: s }) => s === `data.${t.key}`);
16
- let r = o[m];
17
- return r && o.splice(m, 1), c.accessor(`data.${t.key}`, {
18
+ function m(r) {
19
+ if ("id" in r && typeof r.id == "string")
20
+ return r.id;
21
+ if ("accessorKey" in r && typeof r.accessorKey == "string")
22
+ return r.accessorKey;
23
+ }
24
+ function S({
25
+ form: r,
26
+ columns: p = [],
27
+ prefix: l = "data."
28
+ }) {
29
+ const d = f(), n = y(p);
30
+ return [...r.components.flatMap((e) => e.type === "tabs" ? e.components?.flatMap((t) => t.components) : [e]).filter((e) => e?.tableView).map((e) => {
31
+ const t = e, o = `${l}${t.key}`, a = /* @__PURE__ */ new Set([t.key, o]), i = n.findIndex((u) => {
32
+ const c = m(u);
33
+ return c ? a.has(c) : !1;
34
+ });
35
+ let s = n[i];
36
+ return s && n.splice(i, 1), d.accessor(o, {
18
37
  header: (t.label || t.title || t.key)?.replace(/:/, ""),
19
- cell: n,
20
38
  meta: {
21
- filter: { variant: x[t.type] || "text" },
22
- ...r?.meta || {}
39
+ type: k[t.type] || t.type,
40
+ filter: {
41
+ ...s?.meta?.filter,
42
+ variant: K[t.type] || "text"
43
+ },
44
+ ...s?.meta || {}
23
45
  },
24
- ...r || {}
46
+ ...s || {}
25
47
  });
26
- }).concat(o).map((e, t) => ({
27
- ...e,
28
- meta: {
29
- ...e.meta || {},
30
- order: g(e, "meta.order", t * 10)
31
- },
32
- cell: e.cell || n
33
- })).sort((e, t) => e.meta.order > t.meta.order ? 1 : -1);
48
+ }), ...n].reduce((e, t) => {
49
+ const o = m(t);
50
+ return o && e.some((a) => m(a) === o) || e.push(t), e;
51
+ }, []).map((e, t) => {
52
+ const o = b([`Cell.${e.id}`, `Cell.${e.meta?.type}`, "Cell"]);
53
+ return {
54
+ ...e,
55
+ meta: {
56
+ ...e?.meta,
57
+ order: h(e, "meta.order", t * 10)
58
+ },
59
+ cell: e.cell || o
60
+ };
61
+ }).sort((e, t) => e.meta.order > t.meta.order ? 1 : -1);
34
62
  }
35
63
  export {
36
- h as mapFormToColumns
64
+ S as mapFormToColumns
37
65
  };
38
66
  //# sourceMappingURL=mapFormToColumns.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters.js\";\n\nconst MAP_TYPES: Record<string, FilterVariants> = {\n number: \"range\",\n currency: \"range\",\n checkbox: \"boolean\"\n};\n\nexport function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {\n const columnHelper = createColumnHelper<Data>();\n const columnsToKeep = cloneDeep(columns);\n\n const Cell = getComponent<typeof DefaultCell>(\"Cell\");\n\n const columnsFromComponents = form.components\n .flatMap((component) => {\n if (component.type === \"tabs\") {\n return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);\n }\n\n return [component];\n })\n .filter((component) => component?.tableView)\n .map((c) => {\n const component = c as ComponentType;\n\n const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {\n return accessorKey === `data.${component.key}`;\n });\n\n let column = columnsToKeep[columnIndex];\n\n if (column) {\n columnsToKeep.splice(columnIndex, 1);\n }\n\n return columnHelper.accessor(`data.${component.key}` as any, {\n header: (component.label || component.title || component.key)?.replace(/:/, \"\"),\n cell: Cell,\n meta: {\n filter: { variant: MAP_TYPES[component.type!] || \"text\" },\n ...(column?.meta || {})\n },\n ...(column || {})\n });\n });\n\n const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({\n ...column,\n meta: {\n ...(column.meta || {}),\n order: get(column, \"meta.order\", index * 10)\n },\n cell: column.cell || Cell\n }));\n\n return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];\n}\n"],"names":["MAP_TYPES","mapFormToColumns","form","columns","columnHelper","createColumnHelper","columnsToKeep","cloneDeep","Cell","getComponent","component","subComponent","c","columnIndex","accessorKey","column","index","get","a","b"],"mappings":";;;;;;gCAWMA,IAA4C;AAAA,EAChD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,SAASC,EAA6BC,GAAgBC,IAA0C,IAA4B;AACjI,QAAMC,IAAeC,EAAA,GACfC,IAAgBC,EAAUJ,CAAO,GAEjCK,IAAOC,EAAiC,MAAM;AA4CpD,SA1C8BP,EAAK,WAChC,QAAQ,CAACQ,MACJA,EAAU,SAAS,SACdA,EAAU,YAAY,QAAQ,CAACC,MAAgCA,EAAa,UAAU,IAGxF,CAACD,CAAS,CAClB,EACA,OAAO,CAACA,MAAcA,GAAW,SAAS,EAC1C,IAAI,CAACE,MAAM;AACV,UAAMF,IAAYE,GAEZC,IAAcP,EAAc,UAAU,CAAC,EAAE,aAAAQ,QACtCA,MAAgB,QAAQJ,EAAU,GAAG,EAC7C;AAED,QAAIK,IAAST,EAAcO,CAAW;AAEtC,WAAIE,KACFT,EAAc,OAAOO,GAAa,CAAC,GAG9BT,EAAa,SAAS,QAAQM,EAAU,GAAG,IAAW;AAAA,MAC3D,SAASA,EAAU,SAASA,EAAU,SAASA,EAAU,MAAM,QAAQ,KAAK,EAAE;AAAA,MAC9E,MAAMF;AAAA,MACN,MAAM;AAAA,QACJ,QAAQ,EAAE,SAASR,EAAUU,EAAU,IAAK,KAAK,OAAA;AAAA,QACjD,GAAIK,GAAQ,QAAQ,CAAA;AAAA,MAAC;AAAA,MAEvB,GAAIA,KAAU,CAAA;AAAA,IAAC,CAChB;AAAA,EACH,CAAC,EAEyC,OAAOT,CAAsB,EAAE,IAAI,CAACS,GAAQC,OAAW;AAAA,IACjG,GAAGD;AAAA,IACH,MAAM;AAAA,MACJ,GAAIA,EAAO,QAAQ,CAAA;AAAA,MACnB,OAAOE,EAAIF,GAAQ,cAAcC,IAAQ,EAAE;AAAA,IAAA;AAAA,IAE7C,MAAMD,EAAO,QAAQP;AAAA,EAAA,EACrB,EAEmB,KAAK,CAACU,GAAGC,MAAOD,EAAE,KAAK,QAAQC,EAAE,KAAK,QAAQ,IAAI,EAAG;AAC5E;"}
1
+ {"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters.js\";\n\nconst MAP_FILTER_TYPES: Record<string, FilterVariants> = {\n number: \"range\",\n currency: \"range\",\n checkbox: \"boolean\"\n} as const;\n\nconst MAP_TYPES = {\n date: \"date\",\n datetime: \"date\",\n number: \"number\",\n currency: \"currency\",\n checkbox: \"boolean\"\n} as const;\n\nfunction getColumnIdentity<Data>(column: ColumnDef<Data, any> | ColumnDefResolved<Data, any>) {\n if (\"id\" in column && typeof column.id === \"string\") {\n return column.id;\n }\n\n if (\"accessorKey\" in column && typeof column.accessorKey === \"string\") {\n return column.accessorKey;\n }\n\n return undefined;\n}\n\nexport function mapFormToColumns<Data = any>({\n form,\n columns = [],\n prefix = \"data.\"\n}: {\n form: FormType;\n columns?: ColumnDefResolved<Data, any>[];\n prefix?: string;\n}): ColumnDef<Data, any>[] {\n const columnHelper = createColumnHelper<Data>();\n const columnsToKeep = cloneDeep(columns);\n\n const columnsFromComponents = form.components\n .flatMap((component) => {\n if (component.type === \"tabs\") {\n return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);\n }\n\n return [component];\n })\n .filter((component) => component?.tableView)\n .map((c) => {\n const component = c as ComponentType;\n const componentColumnKey = `${prefix}${component.key}`;\n const matchingKeys = new Set([component.key, componentColumnKey]);\n\n const columnIndex = columnsToKeep.findIndex((column) => {\n const identity = getColumnIdentity(column);\n\n return identity ? matchingKeys.has(identity) : false;\n });\n\n let column = columnsToKeep[columnIndex];\n\n if (column) {\n columnsToKeep.splice(columnIndex, 1);\n }\n\n return columnHelper.accessor(componentColumnKey as any, {\n header: (component.label || component.title || component.key)?.replace(/:/, \"\"),\n meta: {\n type: (MAP_TYPES[component.type as keyof typeof MAP_TYPES] || component.type) as any,\n filter: {\n ...column?.meta?.filter,\n variant: MAP_FILTER_TYPES[component.type as keyof typeof MAP_FILTER_TYPES] || \"text\"\n },\n ...(column?.meta || {})\n },\n ...(column || {})\n });\n });\n\n const dedupedColumns = [...columnsFromComponents, ...(columnsToKeep as any[])].reduce<ColumnDef<Data, any>[]>((acc, column) => {\n const identity = getColumnIdentity(column);\n\n if (identity && acc.some((existingColumn) => getColumnIdentity(existingColumn) === identity)) {\n return acc;\n }\n\n acc.push(column);\n return acc;\n }, []);\n\n const mergedColumns = dedupedColumns.map((column, index) => {\n const Cell = getComponent<typeof DefaultCell>([`Cell.${column.id}`, `Cell.${column.meta?.type}`, \"Cell\"]);\n\n return {\n ...column,\n meta: {\n ...column?.meta,\n order: get(column, \"meta.order\", index * 10)\n },\n cell: column.cell || Cell\n };\n });\n\n return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];\n}\n"],"names":["MAP_FILTER_TYPES","MAP_TYPES","getColumnIdentity","column","mapFormToColumns","form","columns","prefix","columnHelper","createColumnHelper","columnsToKeep","cloneDeep","component","subComponent","c","componentColumnKey","matchingKeys","columnIndex","identity","acc","existingColumn","index","Cell","getComponent","get","a","b"],"mappings":";;;;;;gCAWMA,IAAmD;AAAA,EACvD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ,GAEMC,IAAY;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,SAASC,EAAwBC,GAA6D;AAC5F,MAAI,QAAQA,KAAU,OAAOA,EAAO,MAAO;AACzC,WAAOA,EAAO;AAGhB,MAAI,iBAAiBA,KAAU,OAAOA,EAAO,eAAgB;AAC3D,WAAOA,EAAO;AAIlB;AAEO,SAASC,EAA6B;AAAA,EAC3C,MAAAC;AAAA,EACA,SAAAC,IAAU,CAAA;AAAA,EACV,QAAAC,IAAS;AACX,GAI2B;AACzB,QAAMC,IAAeC,EAAA,GACfC,IAAgBC,EAAUL,CAAO;AAkEvC,SAxBuB,CAAC,GAxCMD,EAAK,WAChC,QAAQ,CAACO,MACJA,EAAU,SAAS,SACdA,EAAU,YAAY,QAAQ,CAACC,MAAgCA,EAAa,UAAU,IAGxF,CAACD,CAAS,CAClB,EACA,OAAO,CAACA,MAAcA,GAAW,SAAS,EAC1C,IAAI,CAACE,MAAM;AACV,UAAMF,IAAYE,GACZC,IAAqB,GAAGR,CAAM,GAAGK,EAAU,GAAG,IAC9CI,IAAe,oBAAI,IAAI,CAACJ,EAAU,KAAKG,CAAkB,CAAC,GAE1DE,IAAcP,EAAc,UAAU,CAACP,MAAW;AACtD,YAAMe,IAAWhB,EAAkBC,CAAM;AAEzC,aAAOe,IAAWF,EAAa,IAAIE,CAAQ,IAAI;AAAA,IACjD,CAAC;AAED,QAAIf,IAASO,EAAcO,CAAW;AAEtC,WAAId,KACFO,EAAc,OAAOO,GAAa,CAAC,GAG9BT,EAAa,SAASO,GAA2B;AAAA,MACtD,SAASH,EAAU,SAASA,EAAU,SAASA,EAAU,MAAM,QAAQ,KAAK,EAAE;AAAA,MAC9E,MAAM;AAAA,QACJ,MAAOX,EAAUW,EAAU,IAA8B,KAAKA,EAAU;AAAA,QACxE,QAAQ;AAAA,UACN,GAAGT,GAAQ,MAAM;AAAA,UACjB,SAASH,EAAiBY,EAAU,IAAqC,KAAK;AAAA,QAAA;AAAA,QAEhF,GAAIT,GAAQ,QAAQ,CAAA;AAAA,MAAC;AAAA,MAEvB,GAAIA,KAAU,CAAA;AAAA,IAAC,CAChB;AAAA,EACH,CAAC,GAE+C,GAAIO,CAAuB,EAAE,OAA+B,CAACS,GAAKhB,MAAW;AAC7H,UAAMe,IAAWhB,EAAkBC,CAAM;AAEzC,WAAIe,KAAYC,EAAI,KAAK,CAACC,MAAmBlB,EAAkBkB,CAAc,MAAMF,CAAQ,KAI3FC,EAAI,KAAKhB,CAAM,GACRgB;AAAA,EACT,GAAG,CAAA,CAAE,EAEgC,IAAI,CAAChB,GAAQkB,MAAU;AAC1D,UAAMC,IAAOC,EAAiC,CAAC,QAAQpB,EAAO,EAAE,IAAI,QAAQA,EAAO,MAAM,IAAI,IAAI,MAAM,CAAC;AAExG,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,MAAM;AAAA,QACJ,GAAGA,GAAQ;AAAA,QACX,OAAOqB,EAAIrB,GAAQ,cAAckB,IAAQ,EAAE;AAAA,MAAA;AAAA,MAE7C,MAAMlB,EAAO,QAAQmB;AAAA,IAAA;AAAA,EAEzB,CAAC,EAEoB,KAAK,CAACG,GAAGC,MAAOD,EAAE,KAAK,QAAQC,EAAE,KAAK,QAAQ,IAAI,EAAG;AAC5E;"}
@@ -1,6 +1,6 @@
1
1
  import { jsxs as e, jsx as a } from "react/jsx-runtime";
2
2
  import { c as t } from "../../../../chunks/index.js";
3
- import { h as m } from "../../../../chunks/index2.js";
3
+ import { h as m } from "../../../../chunks/moment.js";
4
4
  import { registerComponent as c } from "../../../../registries/components.js";
5
5
  import { iconClass as r } from "../../../../utils/iconClass.js";
6
6
  import { stopPropagationWrapper as n } from "../../../../utils/stopPropagationWrapper.js";
@@ -2,7 +2,7 @@ import { jsx as n } from "react/jsx-runtime";
2
2
  import { Table as s } from "../../../molecules/table/Table.js";
3
3
  import { mapFormToColumns as t } from "../../../molecules/table/utils/mapFormToColumns.js";
4
4
  function e({ form: o, ...m }) {
5
- const r = o && t(o);
5
+ const r = o && t({ form: o });
6
6
  return /* @__PURE__ */ n(s, { ...m, columns: r });
7
7
  }
8
8
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, SubmissionType } from \"../../../interfaces\";\nimport type { JSONRecord } from \"../../../interfaces/JSONRecord\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps<Data extends object = JSONRecord> = Omit<TableProps<SubmissionType<Data>>, \"columns\"> & {\n form?: FormType;\n};\n\nexport function SubmissionsTable<Data extends object = JSONRecord>({ form, ...props }: SubmissionsTableProps<Data>) {\n const columns: any[] | undefined = form && mapFormToColumns(form);\n\n return <Table {...(props as any)} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AASO,SAASA,EAAmD,EAAE,MAAAC,GAAM,GAAGC,KAAsC;AAClH,QAAMC,IAA6BF,KAAQG,EAAiBH,CAAI;AAEhE,SAAO,gBAAAI,EAACC,GAAA,EAAO,GAAIJ,GAAe,SAAAC,EAAA,CAAmB;AACvD;"}
1
+ {"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, SubmissionType } from \"../../../interfaces\";\nimport type { JSONRecord } from \"../../../interfaces/JSONRecord\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps<Data extends object = JSONRecord> = Omit<TableProps<SubmissionType<Data>>, \"columns\"> & {\n form?: FormType;\n};\n\nexport function SubmissionsTable<Data extends object = JSONRecord>({ form, ...props }: SubmissionsTableProps<Data>) {\n const columns: any[] | undefined = form && mapFormToColumns({ form: form });\n\n return <Table {...(props as any)} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AASO,SAASA,EAAmD,EAAE,MAAAC,GAAM,GAAGC,KAAsC;AAClH,QAAMC,IAA6BF,KAAQG,EAAiB,EAAE,MAAAH,GAAY;AAE1E,SAAO,gBAAAI,EAACC,GAAA,EAAO,GAAIJ,GAAe,SAAAC,EAAA,CAAmB;AACvD;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsed/react-formio",
3
- "version": "3.0.0-rc.13",
3
+ "version": "3.0.0-rc.15",
4
4
  "description": "Provide a react formio wrapper. Written in TypeScript.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -44,8 +44,8 @@
44
44
  },
45
45
  "devDependencies": {
46
46
  "@tanstack/react-table": ">=8.20.6",
47
- "@tsed/tailwind-formio": "3.0.0-rc.13",
48
- "@tsed/typescript": "3.0.0-rc.13",
47
+ "@tsed/tailwind-formio": "3.0.0-rc.15",
48
+ "@tsed/typescript": "3.0.0-rc.15",
49
49
  "microbundle": "0.13.0",
50
50
  "vite": "7.1.5",
51
51
  "vitest": "3.2.4"
package/src/all.ts CHANGED
@@ -25,6 +25,8 @@ import "./molecules/forms/input-tags/InputTags.interface";
25
25
  import "./molecules/table/components/DefaultFilter";
26
26
  import "./molecules/table/components/DefaultArrowSort";
27
27
  import "./molecules/table/components/DefaultCell";
28
+ import "./molecules/table/components/DefaultBooleanCell";
29
+ import "./molecules/table/components/DefaultDateCell";
28
30
  import "./molecules/table/components/DefaultCellOperations";
29
31
  import "./molecules/table/components/DefaultOperationButton";
30
32
  import "./molecules/table/components/DefaultCellHeader";
@@ -28,10 +28,6 @@ export interface SelectProps<Data = string> extends FormControlProps<Data, Selec
28
28
  searchEnabled?: boolean;
29
29
  customProperties?: Record<string, any>;
30
30
  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
31
- /**
32
- * @deprecated
33
- */
34
- choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
35
31
  }
36
32
 
37
33
  export interface SelectSingle<Data = string> extends SelectProps<Data> {
@@ -74,7 +74,7 @@ type Story = StoryObj<typeof Table<ProductSubmission>>;
74
74
  export const Usage: Story = {
75
75
  args: {
76
76
  data: formSubmissions as unknown as ProductSubmission[],
77
- columns: mapFormToColumns(FormType as any),
77
+ columns: mapFormToColumns({ form: FormType as any }),
78
78
  operations: [
79
79
  {
80
80
  title: "Edit",
@@ -183,17 +183,20 @@ export const Usage: Story = {
183
183
  export const WithFilters: Story = {
184
184
  args: {
185
185
  data: formSubmissions as unknown as ProductSubmission[],
186
- columns: mapFormToColumns(FormType as any, [
187
- {
188
- accessorKey: "data.id",
189
- meta: {
190
- filter: {
191
- variant: "select",
192
- layout: "react"
186
+ columns: mapFormToColumns({
187
+ form: FormType as any,
188
+ columns: [
189
+ {
190
+ accessorKey: "data.id",
191
+ meta: {
192
+ filter: {
193
+ variant: "select",
194
+ layout: "react"
195
+ }
193
196
  }
194
197
  }
195
- }
196
- ]),
198
+ ]
199
+ }),
197
200
  operations: [
198
201
  {
199
202
  title: "Edit",
@@ -220,7 +223,7 @@ export const WithFilters: Story = {
220
223
  export const WithPaginationOptions: Story = {
221
224
  args: {
222
225
  data: formSubmissions as unknown as ProductSubmission[],
223
- columns: mapFormToColumns(FormType as any),
226
+ columns: mapFormToColumns({ form: FormType as any }),
224
227
  operations: [
225
228
  {
226
229
  title: "Edit",
@@ -246,67 +249,70 @@ export const WithPaginationOptions: Story = {
246
249
  export const WithCustomCell: Story = {
247
250
  args: {
248
251
  data: formSubmissions as unknown as ProductSubmission[],
249
- columns: mapFormToColumns<ProductSubmission>(FormType as any, [
250
- {
251
- accessorKey: "data.id",
252
- meta: {
253
- filter: {
254
- variant: "select",
255
- layout: "react"
252
+ columns: mapFormToColumns<ProductSubmission>({
253
+ form: FormType as any,
254
+ columns: [
255
+ {
256
+ accessorKey: "data.id",
257
+ meta: {
258
+ filter: {
259
+ variant: "select",
260
+ layout: "react"
261
+ },
262
+ cellProps: {
263
+ colSpan: 2
264
+ }
256
265
  },
257
- cellProps: {
258
- colSpan: 2
266
+ cell: (context) => {
267
+ return (
268
+ <div className='flex space-x-4 align-items-center'>
269
+ <div className='max-w-[80px]'>
270
+ <img className='max-w-[80px] rounded-md' src={context.row.original.data.image} alt={context.row.original.data.label} />
271
+ </div>
272
+ <div>
273
+ <div className='text-lg text-primary'>{context.row.original.data.label}</div>
274
+ <div className='text-xs'>{context.getValue()}</div>
275
+ </div>
276
+ </div>
277
+ );
259
278
  }
260
279
  },
261
- cell: (context) => {
262
- return (
263
- <div className='flex space-x-4 align-items-center'>
264
- <div className='max-w-[80px]'>
265
- <img className='max-w-[80px] rounded-md' src={context.row.original.data.image} alt={context.row.original.data.label} />
266
- </div>
267
- <div>
268
- <div className='text-lg text-primary'>{context.row.original.data.label}</div>
269
- <div className='text-xs'>{context.getValue()}</div>
270
- </div>
271
- </div>
272
- );
273
- }
274
- },
275
- {
276
- accessorKey: "data.label",
277
- meta: {
278
- hidden: true
279
- }
280
- },
281
- {
282
- accessorKey: "data.description",
283
- meta: {
284
- filter: {
285
- variant: "text",
286
- disableDatalist: true
280
+ {
281
+ accessorKey: "data.label",
282
+ meta: {
283
+ hidden: true
287
284
  }
288
- }
289
- },
290
- {
291
- accessorKey: "data.price",
292
- cell: (context) => {
293
- const value = context.getValue();
294
-
295
- if (value === undefined) {
296
- return "-";
285
+ },
286
+ {
287
+ accessorKey: "data.description",
288
+ meta: {
289
+ filter: {
290
+ variant: "text",
291
+ disableDatalist: true
292
+ }
293
+ }
294
+ },
295
+ {
296
+ accessorKey: "data.price",
297
+ cell: (context) => {
298
+ const value = context.getValue();
299
+
300
+ if (value === undefined) {
301
+ return "-";
302
+ }
303
+
304
+ return (
305
+ <div className='text-right'>
306
+ {Intl.NumberFormat("fr-FR", {
307
+ style: "currency",
308
+ currency: context.row.original.data.currency
309
+ }).format(context.getValue())}
310
+ </div>
311
+ );
297
312
  }
298
-
299
- return (
300
- <div className='text-right'>
301
- {Intl.NumberFormat("fr-FR", {
302
- style: "currency",
303
- currency: context.row.original.data.currency
304
- }).format(context.getValue())}
305
- </div>
306
- );
307
313
  }
308
- }
309
- ]),
314
+ ]
315
+ }),
310
316
  operations: [
311
317
  {
312
318
  title: "Edit",
@@ -1,6 +1,8 @@
1
1
  import "./components/DefaultFilter";
2
2
  import "./components/DefaultArrowSort";
3
3
  import "./components/DefaultCell";
4
+ import "./components/DefaultBooleanCell";
5
+ import "./components/DefaultDateCell";
4
6
  import "./components/DefaultCellOperations";
5
7
  import "./components/DefaultOperationButton";
6
8
  import "./components/DefaultCellHeader";
@@ -0,0 +1,42 @@
1
+ import { render, screen } from "@testing-library/react";
2
+
3
+ import { DefaultCellBoolean } from "./DefaultBooleanCell";
4
+
5
+ function createCellContext(value: boolean, labels?: Record<string, string>) {
6
+ return {
7
+ getValue: () => value,
8
+ column: {
9
+ columnDef: {
10
+ meta: {
11
+ labels
12
+ }
13
+ }
14
+ }
15
+ } as any;
16
+ }
17
+
18
+ describe("DefaultCellBoolean", () => {
19
+ it("should render the default yes label for true values", () => {
20
+ render(<DefaultCellBoolean {...createCellContext(true)} />);
21
+
22
+ expect(screen.getByText("Yes", { selector: "span" })).toBeInTheDocument();
23
+ });
24
+
25
+ it("should render the default no label for false values", () => {
26
+ render(<DefaultCellBoolean {...createCellContext(false)} />);
27
+
28
+ expect(screen.getByText("No", { selector: "span" })).toBeInTheDocument();
29
+ });
30
+
31
+ it("should render custom labels from column metadata", () => {
32
+ render(<DefaultCellBoolean {...createCellContext(true, { yes: "Enabled", No: "Disabled" })} />);
33
+
34
+ expect(screen.getByText("Enabled", { selector: "span" })).toBeInTheDocument();
35
+ });
36
+
37
+ it("should render the custom false label from column metadata", () => {
38
+ render(<DefaultCellBoolean {...createCellContext(false, { yes: "Enabled", No: "Disabled" })} />);
39
+
40
+ expect(screen.getByText("Disabled", { selector: "span" })).toBeInTheDocument();
41
+ });
42
+ });
@@ -0,0 +1,11 @@
1
+ import { CellContext } from "@tanstack/react-table";
2
+
3
+ import { registerComponent } from "../../../registries/components";
4
+
5
+ export function DefaultCellBoolean<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, boolean>) {
6
+ const value = getValue();
7
+ return <span>{String(value ? columnDef.meta?.labels?.["yes"] || "Yes" : columnDef.meta?.labels?.["No"] || "No")}</span>;
8
+ }
9
+
10
+ registerComponent("Cell.boolean", DefaultCellBoolean);
11
+ registerComponent("Cell.checkbox", DefaultCellBoolean);