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

package/src/hooks/useKeyboardControls.spec.tsx

@@ -0,0 +1,208 @@
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import { useKeyboardControls } from "./useKeyboardControls";
+
+describe("useKeyboardControls()", () => {
+  const activate = vi.fn();
+  const start = vi.fn();
+  const end = vi.fn();
+  const up = vi.fn();
+  const down = vi.fn();
+  const left = vi.fn();
+  const right = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  const Test = () => {
+    const handle = useKeyboardControls({ activate, start, end, up, down, left, right });
+
+    return (
+      <div tabIndex={0} role='button' onKeyDown={handle}>
+        Test
+      </div>
+    );
+  };
+
+  describe("on Enter", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Enter]{Enter}");
+
+      expect(activate).toHaveBeenCalledTimes(2);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Spacebar", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Space]{ }{Spacebar}");
+
+      expect(activate).toHaveBeenCalledTimes(3);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Home", () => {
+    it('call the "start" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Home]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).toHaveBeenCalledTimes(1);
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on End", () => {
+    it('call the "end" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[End]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).toHaveBeenCalledTimes(1);
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Up", () => {
+    it('call the "up" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).toHaveBeenCalledTimes(1);
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Down", () => {
+    it('call the "down" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowDown]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).toHaveBeenCalledTimes(1);
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Left", () => {
+    it('call the "left" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowLeft]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).toHaveBeenCalledTimes(1);
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Right", () => {
+    it('call the "right" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowRight]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("without any callback", () => {
+    it("does nothing", async () => {
+      const Test = () => {
+        const handle = useKeyboardControls({ activate });
+
+        return (
+          <div tabIndex={0} role='button' onKeyDown={handle}>
+            Test
+          </div>
+        );
+      };
+
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp][ArrowUp][ArrowDown][ArrowDown][ArrowLeft][ArrowRight][ArrowLeft][ArrowRight]{b}{a}[Enter]");
+
+      expect(activate).toHaveBeenCalledTimes(1);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/hooks/useKeyboardControls.ts

@@ -0,0 +1,84 @@
+"use client";
+
+import { type KeyboardEvent, useCallback } from "react";
+
+import { CODE, KEY } from "./keyboard.constants";
+
+interface Options {
+  up?: VoidFunction;
+  down?: VoidFunction;
+  left?: VoidFunction;
+  right?: VoidFunction;
+  start?: VoidFunction;
+  end?: VoidFunction;
+  activate?: VoidFunction;
+}
+
+const isActivateKey = (event: KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
+  return (
+    event.key === KEY.ENTER ||
+    event.key === KEY.SPACE ||
+    event.key === KEY.SPACEBAR ||
+    event.code === CODE.ENTER ||
+    event.code === CODE.SPACE
+  );
+};
+
+const voidFn = () => {};
+
+export const useKeyboardControls = ({
+  up = voidFn,
+  down = voidFn,
+  left = voidFn,
+  right = voidFn,
+  start = voidFn,
+  end = voidFn,
+  activate = voidFn
+}: Options) => {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
+      if (isActivateKey(event)) {
+        return activate();
+      }
+
+      if (event.code === CODE.HOME) {
+        event.preventDefault();
+
+        return start();
+      }
+
+      if (event.code === CODE.END) {
+        event.preventDefault();
+
+        return end();
+      }
+
+      if (event.code === CODE.ARROW_UP) {
+        event.preventDefault();
+
+        return up();
+      }
+
+      if (event.code === CODE.ARROW_DOWN) {
+        event.preventDefault();
+
+        return down();
+      }
+
+      if (event.code === CODE.ARROW_RIGHT) {
+        event.preventDefault();
+
+        return right();
+      }
+
+      if (event.code === CODE.ARROW_LEFT) {
+        event.preventDefault();
+
+        return left();
+      }
+    },
+    [activate, down, end, left, right, start, up]
+  );
+
+  return handleKeyDown;
+};

package/src/interfaces/Operation.ts

@@ -1,11 +1,17 @@
 import React from "react";
 
 import type { OperationButtonProps } from "../molecules/table/components/DefaultOperationButton.js";
+import type { JSON } from "./SubmissionType.js";
 
-export type PermissionsResolver<Data = any> = (data: Data, ctx: any) => void;
-// export type OnClickOperation<Data = any> = (data: Data, operation: Operation) => void;
+export type CellMetadata = Record<string, unknown>;
 
-export interface Operation<Data = any> {
+export type PermissionsResolver<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = (
+  data: Data,
+  metadata: CellMetadata,
+  operation: Operation<Data>
+) => void;
+
+export interface Operation<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
   /**
    * Action identifier
    */

package/src/molecules/button/Button.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { type ButtonHTMLAttributes, forwardRef, type LegacyRef, type PropsWithChildren } from "react";
+import { type ButtonHTMLAttributes, forwardRef, type PropsWithChildren } from "react";
 
 import { registerComponent } from "../../registries/components";
 
@@ -24,31 +24,50 @@ export const BUTTON_VARIANTS = [
   "outline-link"
 ];
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface BaseButtonProps<T extends HTMLElement> extends ButtonHTMLAttributes<T> {
+  tag?: "button" | "a" | "input" | "div";
   variant?: (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS] | string;
 }
 
-export const Button = forwardRef(
-  ({ variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref: LegacyRef<HTMLButtonElement>) => {
-    return (
-      <button
-        {...props}
-        ref={ref}
-        className={cx(
-          "btn flex gap-1",
-          {
-            disabled: props.disabled
-          },
-          `btn-${variant}`,
-          className
-        )}
-        disabled={props.disabled}
-        onClick={(evt) => !props.disabled && props.onClick?.(evt)}
-      >
-        {children}
-      </button>
-    );
-  }
-);
+interface HTMLAnchorProps extends BaseButtonProps<HTMLAnchorElement> {
+  tag: "a";
+}
+
+interface HTMLButtonProps extends BaseButtonProps<HTMLButtonElement> {
+  tag?: "button";
+}
+
+interface HTMLInputProps extends BaseButtonProps<HTMLInputElement> {
+  tag: "input";
+}
+
+interface HTMLDivProps extends BaseButtonProps<HTMLDivElement> {
+  tag: "div";
+}
+
+export type ButtonProps = HTMLAnchorProps | HTMLButtonProps | HTMLInputProps | HTMLDivProps;
+
+export const Button = forwardRef(({ tag: Tag = "button", variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref) => {
+  return (
+    <Tag
+      {...(props as any)}
+      ref={ref as any}
+      className={cx(
+        "btn flex gap-1",
+        {
+          disabled: props.disabled
+        },
+        `btn-${variant}`,
+        className
+      )}
+      disabled={props.disabled}
+      onClick={(evt) => !props.disabled && props.onClick?.(evt as any)}
+    >
+      {children}
+    </Tag>
+  );
+});
+
+Button.displayName = "Button";
 
 registerComponent("Button", Button);

package/src/molecules/card/Card.tsx

@@ -1,6 +1,8 @@
 import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
+import { registerComponent } from "../../registries/components.js";
+
 export interface CardProps {
   label: string;
   className?: string;
@@ -18,3 +20,5 @@ export function Card({ children, label, className }: PropsWithChildren<CardProps
     </div>
   );
 }
+
+registerComponent("Card", Card);

package/src/molecules/forms/input-tags/InputTags.tsx

@@ -9,7 +9,7 @@ export function InputTags<Data = string>(props: InputTagsProps) {
 
   const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
   const Component = getComponent<ComponentType<InputTagsProps<Data>>>([`InputTags.${layout}`, "Input"]);
-  console.log("VALUE", props.value);
+
   return (
     <FormControl
       id={id}

package/src/molecules/pagination/Pagination.stories.tsx

@@ -12,18 +12,11 @@ import { Pagination } from "./all";
  *
  * ```tsx
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/all"
- * import {Pagination} from "@tsed/react-formio/molecules/form/select/Select/all"
  *
  * or
  *
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
  * import "@tsed/react-formio/molecules/pagination/PaginationButton";
- *
- * or
- *
- * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
- *
- * registerComponent("PaginationButton", MyPaginationButton);
  * ```
  *
  * Pagination component support DI container and can be used with custom PaginationButton component.

package/src/molecules/table/Table.stories.tsx

@@ -19,7 +19,40 @@ type ProductSubmission = SubmissionType<{
   price?: number;
   currency?: string;
 }>;
-
+/**
+ * Table component.
+ *
+ * You can import this component and use it like:
+ *
+ * ```tsx
+ * import {Table} from "@tsed/react-formio/molecules/table/all"
+ *
+ * or
+ *
+ * import {Table} from "@tsed/react-formio/molecules/table/Table";
+ * ```
+ *
+ * Table component support DI container and can be used with custom component. Here is the list of components that you can override:
+ *
+ * - DefaultFilter
+ * - DefaultArrowSort
+ * - DefaultCell
+ * - DefaultCellOperations
+ * - DefaultOperationButton
+ * - DefaultCellHeader
+ * - DefaultCellFooter
+ * - TextFieldFilter
+ * - SelectFilter
+ * - RangeFilter
+ *
+ * ```tsx
+ * function CustomDefaultFilter() {
+ *
+ * }
+ *
+ * registerComponent("DefaultFilter", DefaultFilter);
+ * ```
+ */
 export default {
   title: "Table",
   component: Table,

package/src/molecules/table/Table.tsx

@@ -1,14 +1,15 @@
-import { flexRender, RowData } from "@tanstack/react-table";
+import { flexRender } from "@tanstack/react-table";
 import cx from "classnames";
 import { PropsWithChildren } from "react";
 
+import type { JSON } from "../../interfaces/index.js";
 import { getComponent } from "../../registries/components";
 import type { Pagination as DefaultPagination } from "../pagination/Pagination";
 import type { DefaultCellFooter } from "./components/DefaultCellFooter";
 import type { DefaultCellHeader } from "./components/DefaultCellHeader";
 import { useTable, UseTableProps } from "./hooks/useTable";
 
-export interface TableProps<Data extends RowData = any> extends UseTableProps<Data> {
+export interface TableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseTableProps<Data> {
   className?: string;
 
   enableFooter?: boolean;
@@ -16,8 +17,13 @@ export interface TableProps<Data extends RowData = any> extends UseTableProps<Da
   pageSizes?: number[];
 }
 
-export function Table<Data extends RowData = any>({ className, enableFooter, children, ...props }: PropsWithChildren<TableProps<Data>>) {
-  const { tableInstance, i18n } = useTable(props);
+export function Table<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  className,
+  enableFooter,
+  children,
+  ...props
+}: PropsWithChildren<TableProps<Data>>) {
+  const { tableInstance, i18n } = useTable<Data>(props);
   const CellHeader = getComponent<typeof DefaultCellHeader>("CellHeader");
   const CellFooter = getComponent<typeof DefaultCellFooter>("CellFooter");
   const Pagination = getComponent<typeof DefaultPagination>("Pagination");
@@ -76,7 +82,7 @@ export function Table<Data extends RowData = any>({ className, enableFooter, chi
         )}
       </table>
       <div className={"overflow-hidden flex flex-wrap"}>
-        {props.data.length && pagination && (
+        {props.data.length && pagination ? (
           <Pagination
             className={"flex-1"}
             canNextPage={tableInstance.getCanNextPage()}
@@ -92,7 +98,7 @@ export function Table<Data extends RowData = any>({ className, enableFooter, chi
             onClickNextPage={() => tableInstance.nextPage()}
             onPageSizeChange={(pageSize) => tableInstance.setPageSize(pageSize)}
           />
-        )}
+        ) : null}
         <div>{children}</div>
       </div>
     </div>

package/src/molecules/table/components/DefaultCellOperations.tsx

@@ -1,24 +1,30 @@
 import type { CellContext } from "@tanstack/react-table";
 
-import type { Operation } from "../../../interfaces";
+import type { CellMetadata, JSON, Operation } from "../../../interfaces";
 import { getComponent, registerComponent } from "../../../registries/components";
 import type { DefaultOperationButton } from "./DefaultOperationButton";
 
-export interface DefaultCellOperationsProps<Data = any> {
+export interface DefaultCellOperationsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
   info: CellContext<Data, unknown>;
   operations: Operation<Data>[];
-  metadata?: Record<string, unknown>;
+  metadata?: CellMetadata;
   i18n: (i18n: string) => string;
   onClick?: (data: any, operation: Operation<Data>) => void;
 }
 
-export function DefaultCellOperations({ info, metadata, operations, i18n, onClick }: DefaultCellOperationsProps) {
-  const Button = getComponent<typeof DefaultOperationButton>("OperationButton");
+export function DefaultCellOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  info,
+  metadata,
+  operations,
+  i18n,
+  onClick
+}: DefaultCellOperationsProps<Data>) {
+  const Button = getComponent<typeof DefaultOperationButton<Data>>("OperationButton");
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }) => {
-          return !permissionsResolver || permissionsResolver(info.row.original, metadata);
+        .filter(({ permissionsResolver, ...operation }) => {
+          return !permissionsResolver || permissionsResolver(info.row.original, metadata || {}, operation);
         })
         .map((operation) => {
           return (

package/src/molecules/table/components/DefaultOperationButton.tsx

@@ -2,20 +2,21 @@ import { CellContext } from "@tanstack/react-table";
 import cx from "classnames";
 import { HTMLAttributes } from "react";
 
-import { Operation } from "../../../interfaces";
+import { type CellMetadata, type JSON, Operation } from "../../../interfaces";
 import { registerComponent } from "../../../registries/components";
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps<Data = any> extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+export interface OperationButtonProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
   operation: Operation<Data>;
   info: CellContext<Data, unknown>;
-  metadata?: Record<string, unknown>;
+  metadata?: CellMetadata;
   onClick: () => void;
   i18n?: (i18n: string) => string;
 }
 
-export function DefaultOperationButton(props: OperationButtonProps) {
+export function DefaultOperationButton<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: OperationButtonProps<Data>) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { i18n = (f: string) => f, onClick, operation, info, ...extraProps } = props;
   const { className = "btn", buttonSize = "xs", buttonType = "primary", buttonOutline, action, title = "", icon = "" } = operation;

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

@@ -6,18 +6,18 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  type RowData,
   type TableOptions,
   type TableState,
   useReactTable
 } from "@tanstack/react-table";
 import { useEffect } from "react";
 
-import { Operation } from "../../../interfaces";
+import { type JSON, Operation } from "../../../interfaces";
 import { getComponent } from "../../../registries/components";
 import type { DefaultCellOperations } from "../components/DefaultCellOperations";
 
-export interface UseTableProps<Data extends RowData> extends TableOptions<Data> {
+export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
   operations: Operation<Data>[];
   metadata?: Record<string, unknown>;
   i18n?: (i18n: string) => string;
@@ -27,8 +27,8 @@ export interface UseTableProps<Data extends RowData> extends TableOptions<Data>
   pageSizes?: number[];
 }
 
-export function useTable<Data extends RowData>(props: UseTableProps<Data>) {
-  const Operations = getComponent<typeof DefaultCellOperations>("CellOperations");
+export function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {
+  const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
   const i18n = props.i18n || ((f: string) => f);
 
   // const [pagination, setPagination] = useState({