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

package/src/molecules/table/filters/RangeFilter.tsx

@@ -0,0 +1,43 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import { type InputText as DefaultInputText } from "../../forms/input-text/InputText";
+import type { FilterProps } from "../components/DefaultFilter";
+import { FilterRangeOptions } from "./Filters";
+
+export function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {
+  const { column } = header;
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const columnFilterValue = header.column.getFilterValue();
+  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];
+  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];
+  const step = options.step ?? 1;
+
+  return (
+    <div>
+      <div className='flex space-x-2'>
+        <div className='w-1/2'>
+          <InputText
+            type='number'
+            size='small'
+            {...{ min, max, step }}
+            value={(columnFilterValue as [number, number])?.[0] ?? ""}
+            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}
+            placeholder={`Min ${min !== undefined ? `(${min})` : ""}`}
+          />
+        </div>
+        <div className='w-1/2'>
+          <InputText
+            type='number'
+            size='small'
+            {...{ min, max, step }}
+            value={(columnFilterValue as [number, number])?.[1] ?? ""}
+            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}
+            placeholder={`Max ${max ? `(${max})` : ""}`}
+          />
+        </div>
+      </div>
+      <div className='h-1' />
+    </div>
+  );
+}
+
+registerComponent("Filter.range", RangeFilter);

package/src/molecules/table/filters/SelectFilter.tsx

@@ -0,0 +1,47 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { Select as DefaultSelect } from "../../forms/select/Select";
+import { SelectOptionProps } from "../../forms/select/Select.interface";
+import type { FilterProps } from "../components/DefaultFilter";
+import { useUniqValues } from "../hooks/useUniqValues";
+import { FilterSelectOptions } from "./Filters";
+
+export function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {
+  const Select = getComponent<typeof DefaultSelect>("Select");
+  const columnFilterValue = header.column.getFilterValue();
+  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+  console.log(uniqValues);
+  const opts =
+    options.layout === "choicesjs"
+      ? {
+          placeholder: undefined
+        }
+      : {
+          placeholder: `Filter by ${header.column.columnDef.header}`
+        };
+
+  const listOptions = (
+    [
+      {
+        label: `Filter by ${header.column.columnDef.header}`,
+        value: ""
+      }
+    ] as SelectOptionProps[]
+  ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));
+
+  return (
+    <>
+      <Select<string>
+        size='small'
+        {...(options as any)}
+        {...opts}
+        options={listOptions}
+        name={`filter_${header.column.id}`}
+        data-testid={`filter_${header.column.id}`}
+        value={columnFilterValue as string}
+        onChange={(_, value) => header.column.setFilterValue(value)}
+      />
+    </>
+  );
+}
+
+registerComponent("Filter.select", SelectFilter);

package/src/molecules/table/filters/TextFieldFilter.tsx

@@ -0,0 +1,36 @@
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { InputText as DefaultInputText } from "../../forms/input-text/InputText";
+import type { FilterProps } from "../components/DefaultFilter";
+import { useUniqValues } from "../hooks/useUniqValues";
+import { FilterTextOptions } from "./Filters";
+
+export function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const columnFilterValue = header.column.getFilterValue();
+  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+  const datalistId = `data_list_${header.column.id}`;
+
+  return (
+    <>
+      {!options.disableDatalist && (
+        <datalist id={datalistId}>
+          {uniqValues.map((value: any) => (
+            <option value={value} key={value} />
+          ))}
+        </datalist>
+      )}
+      <InputText<string>
+        size='small'
+        placeholder={`Filter by ${header.column.columnDef.header}`}
+        {...options}
+        name={`filter_${header.column.id}`}
+        data-testid={`filter_${header.column.id}`}
+        value={(columnFilterValue ?? "") as string}
+        list={datalistId}
+        onChange={(_, value) => header.column.setFilterValue(value)}
+      />
+    </>
+  );
+}
+
+registerComponent("Filter.text", TextFieldFilter);

package/src/molecules/table/hooks/useTable.tsx

@@ -0,0 +1,75 @@
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type RowData,
+  type TableOptions,
+  type TableState,
+  useReactTable
+} from "@tanstack/react-table";
+import { useEffect } from "react";
+
+import { Operation } from "../../../interfaces";
+import { getComponent } from "../../../registries/components";
+import type { DefaultCellOperations } from "../components/DefaultCellOperations";
+
+export interface UseTableProps<Data extends RowData> extends TableOptions<Data> {
+  operations: Operation<Data>[];
+  metadata?: Record<string, unknown>;
+  i18n?: (i18n: string) => string;
+  onClick?: (data: any, operation: Operation<Data>) => void;
+  manualFaceted?: boolean;
+  onChange?: (query: TableState) => void;
+  pageSizes?: number[];
+}
+
+export function useTable<Data extends RowData>(props: UseTableProps<Data>) {
+  const Operations = getComponent<typeof DefaultCellOperations>("CellOperations");
+  const i18n = props.i18n || ((f: string) => f);
+
+  // const [pagination, setPagination] = useState({
+  //   pageIndex: 0, //initial page index
+  //   pageSize: 10 //default page size
+  // });
+
+  const operations = props.operations.length
+    ? ([
+        {
+          id: "operations",
+          header: i18n("Operations"),
+          cell: (info) => (
+            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={i18n} />
+          )
+        }
+      ] satisfies ColumnDef<Data>[])
+    : [];
+
+  const tableInstance = useReactTable({
+    ...props,
+    columns: [...props.columns, ...operations],
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,
+    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,
+    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting
+    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
+  });
+
+  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =
+    tableInstance.getState();
+
+  useEffect(() => {
+    if (props.onChange) {
+      props.onChange(tableInstance.getState());
+    }
+  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);
+
+  return {
+    i18n,
+    tableInstance
+  };
+}

package/src/molecules/table/hooks/useUniqValues.tsx

@@ -0,0 +1,10 @@
+import type { Header } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+export function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {
+  return useMemo(
+    () => (filterVariant === "range" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),
+
+    [header.column, filterVariant]
+  );
+}

package/src/molecules/table/interfaces/extends.ts

@@ -0,0 +1,18 @@
+import type { RowData } from "@tanstack/react-table";
+import { TdHTMLAttributes } from "react";
+
+import { FilterOptions } from "../filters/Filters";
+
+declare module "@tanstack/react-table" {
+  //allows us to define custom properties for our columns
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filter?: FilterOptions;
+    sort?: string;
+    cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
+    /**
+     * Hide the cell
+     */
+    hidden?: boolean;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,141 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import { Tabs } from "./Tabs";
+
+const useTabs = (args: any) => {
+  const [current, onClick] = useState(args.value);
+
+  return {
+    ...args,
+    current,
+    onClick
+  };
+};
+
+/**
+ * Tabs component
+ *
+ * ```tsx
+ * import {Modal} from "@tsed/react-formio/molecules/tabs/Tabs";
+ * ```
+ */
+export default {
+  title: "Tabs",
+  component: Tabs,
+  argTypes: {},
+  parameters: {},
+  render: (args: any) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const tabs = useTabs(args);
+
+    return (
+      <div className={"border-gray-300 border-1 shadow"}>
+        <Tabs {...tabs} i18n={(f) => f}>
+          <div className={"p-5"}>{tabs?.current?.action}</div>
+        </Tabs>
+      </div>
+    );
+  }
+} satisfies Meta<typeof Tabs>;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Sandbox: Story = {
+  args: {
+    items: [
+      {
+        action: "back",
+        exact: true,
+        icon: "chevron-left",
+        back: true
+      },
+      {
+        action: "edit",
+        exact: true,
+        icon: "edit",
+        label: "Edit"
+      },
+      {
+        action: "submissions",
+        exact: false,
+        icon: "data",
+        label: "Data"
+      },
+      {
+        action: "preview",
+        exact: true,
+        icon: "test-tube",
+        label: "Preview"
+      },
+      {
+        action: "actions",
+        exact: false,
+        icon: "paper-plane",
+        label: "Actions"
+      },
+      {
+        action: "access",
+        exact: true,
+        icon: "lock",
+        label: "Access"
+      },
+      {
+        action: "export",
+        exact: true,
+        icon: "download",
+        label: "Export"
+      },
+      {
+        action: "delete",
+        exact: true,
+        icon: "trash",
+        label: "Delete",
+        roles: ["administrator", "owner"]
+      }
+    ]
+  }
+};
+
+function AddButton({ onCreate }: any) {
+  return (
+    <div>
+      <button onClick={onCreate}>+</button>
+    </div>
+  );
+}
+
+function HeaderChildren() {
+  return <div className={"px-3 bg-gray-100 border-b-1 border-gray-light"}>test</div>;
+}
+
+export const WithCloseable = {
+  render: (args: any) => {
+    args.value = args.value === undefined ? 0 : args.value;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const tabs = useTabs(args);
+
+    return (
+      <div className={"border-gray-300 border-1 shadow"}>
+        <Tabs {...tabs} i18n={(f) => f} AddButton={AddButton} HeaderChildren={HeaderChildren}>
+          <div className={"p-5"}>{tabs?.current?.action}</div>
+        </Tabs>
+      </div>
+    );
+  },
+  args: {
+    reverse: true,
+    items: [
+      {
+        exact: true,
+        action: 0,
+        label: "Test (0)"
+      },
+      {
+        exact: true,
+        action: 1,
+        label: "Test (1)"
+      }
+    ]
+  }
+};

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

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { iconClass } from "../../utils/iconClass";
 

package/src/organisms/__fixtures__/WrapComponent.tsx

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