@tsed/react-formio 3.0.0-alpha.9 → 3.0.0-rc.2

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/index.ts

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

package/src/interfaces/ComponentType.ts

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

package/src/interfaces/FormBuilderOptions.ts

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

package/src/interfaces/FormOptions.ts

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

package/src/interfaces/FormType.ts

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

package/src/interfaces/Operation.ts

@@ -1,11 +1,17 @@
 import React from "react";
 
-import type { OperationButtonProps } from "../molecules/table";
+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/interfaces/SubmissionType.ts

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

package/src/interfaces/index.ts

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

package/src/molecules/__fixtures__/build.js

@@ -0,0 +1,28 @@
+import { writeFile } from "node:fs/promises";
+
+import { v4 } from "uuid";
+
+import products from "./products.json" with { type: "json" };
+
+const result = products.map((product) => {
+  return {
+    _id: v4(),
+    owner: null,
+    roles: [],
+    data: {
+      id: product.id,
+      label: product.title,
+      description: product.description_title,
+      image: product.media.immersive_image,
+      price: product.price?.initial_price?.per_trip,
+      currency: product.price?.currency
+    },
+    access: [],
+    externalIds: [],
+    created: new Date().toISOString(),
+    modified: new Date().toISOString(),
+    form: "5e972ae7a1a692917cf54f9e"
+  };
+});
+
+await writeFile("./form-submissions.json", JSON.stringify(result, null, 2), { encoding: "utf-8" });