@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.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" });

package/src/molecules/__fixtures__/form-schema.json

@@ -79,6 +79,44 @@
       "id": "toa61c",
       "type": "textfield"
     },
+    {
+      "autofocus": false,
+      "input": true,
+      "tableView": true,
+      "inputType": "text",
+      "inputMask": "",
+      "label": "Description",
+      "key": "description",
+      "placeholder": "Enter a description for this product",
+      "prefix": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": "",
+      "protected": false,
+      "unique": false,
+      "persistent": true,
+      "hidden": false,
+      "clearOnHide": true,
+      "spellcheck": true,
+      "validate": {
+        "required": true,
+        "minLength": "",
+        "maxLength": "",
+        "pattern": "",
+        "custom": "",
+        "customPrivate": false
+      },
+      "conditional": {
+        "show": "",
+        "eq": ""
+      },
+      "labelPosition": "top",
+      "inputFormat": "plain",
+      "tags": [],
+      "properties": {},
+      "id": "toa61f",
+      "type": "textfield"
+    },
     {
       "label": "Preferred locale",
       "labelPosition": "top",
@@ -187,214 +225,57 @@
       }
     },
     {
-      "label": "Prefered date format",
-      "labelPosition": "top",
-      "widget": "choicesjs",
-      "placeholder": "",
-      "description": "",
-      "tooltip": "",
-      "customClass": "",
-      "tabindex": "",
-      "hidden": false,
-      "hideLabel": false,
       "autofocus": false,
-      "disabled": false,
-      "alwaysEnabled": false,
-      "tableView": true,
-      "multiple": false,
-      "dataSrc": "values",
-      "defaultValue": "YYYY-MM-DD",
-      "valueProperty": "",
-      "dataType": "",
-      "template": "<span>{{ item.label }}</span>",
-      "searchEnabled": true,
-      "selectThreshold": 0.3,
-      "readOnlyValue": false,
-      "customOptions": {},
-      "persistent": true,
-      "protected": false,
-      "dbIndex": false,
-      "encrypted": false,
-      "clearOnHide": true,
-      "customDefaultValue": "",
-      "calculateValue": "",
-      "allowCalculateOverride": false,
-      "products": [],
-      "categoryServices": [],
-      "validateOn": "change",
-      "validate": {
-        "required": false,
-        "customMessage": "",
-        "custom": "",
-        "customPrivate": false,
-        "json": "",
-        "strictDateValidation": false
-      },
-      "unique": false,
-      "errorLabel": "",
-      "key": "dateFormat",
-      "tags": "",
-      "properties": {},
-      "conditional": {
-        "eq": "",
-        "json": ""
-      },
-      "customConditional": "",
-      "relavi": [],
-      "minSearch": 0,
-      "limit": 100,
       "input": true,
+      "tableView": false,
+      "inputType": "text",
+      "inputMask": "",
+      "label": "Image",
+      "key": "image",
+      "placeholder": "Enter a image url for this product",
       "prefix": "",
       "suffix": "",
-      "refreshOn": "",
-      "redrawOn": "",
-      "attributes": {},
-      "overlay": {
-        "style": "",
-        "left": "",
-        "top": "",
-        "width": "",
-        "height": ""
-      },
-      "showCharCount": false,
-      "showWordCount": false,
-      "allowMultipleMasks": false,
-      "clearOnRefresh": false,
-      "lazyLoad": true,
-      "filter": "",
-      "searchField": "",
-      "authenticate": false,
-      "selectFields": "",
-      "searchThreshold": 0.3,
-      "fuseOptions": {
-        "include": "score",
-        "threshold": 0.3
-      },
-      "id": "e80eyzn",
-      "type": "select",
-      "data": {
-        "values": [
-          {
-            "label": "2019-10-01",
-            "value": "YYYY-MM-DD"
-          },
-          {
-            "label": "01/10/2019",
-            "value": "DD/MM/YYYY"
-          },
-          {
-            "label": "10/01/2019",
-            "value": "MM/DD/YYYY"
-          }
-        ],
-        "resource": "",
-        "json": "",
-        "url": "",
-        "custom": ""
-      }
-    },
-    {
-      "label": "Prefered time format",
-      "labelPosition": "top",
-      "widget": "choicesjs",
-      "placeholder": "",
-      "description": "",
-      "tooltip": "",
-      "customClass": "",
-      "tabindex": "",
-      "hidden": false,
-      "hideLabel": false,
-      "autofocus": false,
-      "disabled": false,
-      "alwaysEnabled": false,
-      "tableView": false,
       "multiple": false,
-      "dataSrc": "values",
-      "defaultValue": "hh:mm:ss a",
-      "valueProperty": "",
-      "dataType": "",
-      "template": "<span>{{ item.label }}</span>",
-      "searchEnabled": true,
-      "selectThreshold": 0.3,
-      "readOnlyValue": false,
-      "customOptions": {},
-      "persistent": true,
+      "defaultValue": "",
       "protected": false,
-      "dbIndex": false,
-      "encrypted": false,
+      "unique": false,
+      "persistent": true,
+      "hidden": false,
       "clearOnHide": true,
-      "customDefaultValue": "",
-      "calculateValue": "",
-      "allowCalculateOverride": false,
-      "products": [],
-      "categoryServices": [],
-      "validateOn": "change",
+      "spellcheck": true,
       "validate": {
-        "required": false,
-        "customMessage": "",
+        "required": true,
+        "minLength": "",
+        "maxLength": "",
+        "pattern": "",
         "custom": "",
-        "customPrivate": false,
-        "json": "",
-        "strictDateValidation": false
+        "customPrivate": false
       },
-      "unique": false,
-      "errorLabel": "",
-      "key": "timeFormat",
-      "tags": "",
-      "properties": {},
       "conditional": {
-        "eq": "",
-        "json": ""
+        "show": "",
+        "eq": ""
       },
-      "customConditional": "",
-      "relavi": [],
-      "minSearch": 0,
-      "limit": 100,
+      "labelPosition": "top",
+      "inputFormat": "plain",
+      "tags": [],
+      "properties": {},
+      "id": "toa61d",
+      "type": "textfield"
+    },
+    {
+      "label": "Price",
+      "applyMaskOn": "change",
+      "mask": false,
+      "spellcheck": true,
+      "tableView": true,
+      "currency": "EUR",
+      "inputFormat": "plain",
+      "truncateMultipleSpaces": false,
+      "validateWhenHidden": false,
+      "key": "price",
+      "type": "currency",
       "input": true,
-      "prefix": "",
-      "suffix": "",
-      "refreshOn": "",
-      "redrawOn": "",
-      "attributes": {},
-      "overlay": {
-        "style": "",
-        "left": "",
-        "top": "",
-        "width": "",
-        "height": ""
-      },
-      "showCharCount": false,
-      "showWordCount": false,
-      "allowMultipleMasks": false,
-      "clearOnRefresh": false,
-      "lazyLoad": true,
-      "filter": "",
-      "searchField": "",
-      "authenticate": false,
-      "selectFields": "",
-      "searchThreshold": 0.3,
-      "fuseOptions": {
-        "include": "score",
-        "threshold": 0.3
-      },
-      "id": "el4mm17",
-      "type": "select",
-      "data": {
-        "values": [
-          {
-            "label": "03:25:50 pm",
-            "value": "hh:mm:ss a"
-          },
-          {
-            "label": "15:25:50",
-            "value": "HH:mm:ss"
-          }
-        ],
-        "resource": "",
-        "json": "",
-        "url": "",
-        "custom": ""
-      }
+      "delimiter": true
     },
     {
       "autofocus": false,