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

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

@@ -2,6 +2,7 @@ import Webform from "formiojs/Webform";
 import WebformBuilder from "formiojs/WebformBuilder";
 import Wizard from "formiojs/Wizard";
 import WizardBuilder from "formiojs/WizardBuilder";
+
 export {
   Webform,
   WebformBuilder,
@@ -10,11 +11,5 @@ export {
   // editFormUtils,
 };
 
-export * from "./components";
-export * from "./hooks/useTooltip";
 export * from "./interfaces";
-export * from "./utils/callLast";
-export * from "./utils/iconClass";
-export * from "./utils/mapPagination";
-export * from "./utils/stopPropagationWrapper";
 export { Components, Formio, Templates, Utils } from "formiojs";

package/src/interfaces/ActionType.ts

@@ -0,0 +1,26 @@
+import { FormType } from "./FormType";
+
+export type ActionDefaultsType = {
+  handler: string[];
+  method: string[];
+  priority: number;
+  name: string;
+  title: string;
+};
+
+export interface ActionInfoType extends Record<string, unknown> {
+  name: string;
+  title: string;
+  description: string;
+  priority: number;
+  defaults: ActionDefaultsType;
+}
+
+export interface ActionType extends ActionInfoType {
+  _id?: string;
+  settingsForm: Partial<FormType>;
+  access?: {
+    handler: boolean;
+    method: boolean;
+  };
+}

package/src/interfaces/ComponentType.ts

@@ -0,0 +1,3 @@
+import { ExtendedComponentSchema } from "formiojs";
+
+export type ComponentType = ExtendedComponentSchema;

package/src/interfaces/FormOptions.ts

@@ -1,4 +1,4 @@
-import { EventEmitter2 } from "eventemitter2";
+import type { EventEmitter2 } from "eventemitter2";
 
 export interface FormOptions {
   iconset?: string;
@@ -8,4 +8,7 @@ export interface FormOptions {
   template?: string;
   saveDraft?: boolean;
   events?: EventEmitter2;
+  hooks?: {
+    customValidation?: Function;
+  };
 }

package/src/interfaces/{FormSchema.ts → FormType.ts}

@@ -1,11 +1,11 @@
-import { ExtendedComponentSchema } from "formiojs";
+import type { ComponentType } from "./ComponentType";
 
-export type FormSchema = {
+export type FormType = {
   _id?: string;
   title?: string;
   name?: string;
   machineName?: string;
-  components: ExtendedComponentSchema[];
+  components: ComponentType[];
   tags?: string[];
   action?: string;
   properties?: Record<string, any>;

package/src/interfaces/Operation.ts

@@ -1,11 +1,17 @@
 import React from "react";
 
-import { OperationButtonProps } from "../components/table/components/defaultOperationButton.component";
+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/{RoleSchema.ts → RoleType.ts}

@@ -1,4 +1,4 @@
-export interface RoleSchema extends Record<string, unknown> {
+export interface RoleType extends Record<string, unknown> {
   _id?: string;
   title: string;
   admin: boolean;

package/src/interfaces/SubmissionType.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from "./ComponentType";
+
+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;
+  data: Data;
+  metadata?: { [key: string]: JSON };
+  state?: string;
+}
+
+export interface ChangedSubmission<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends SubmissionType<Data> {
+  data: Data;
+  changed?: {
+    component: ComponentType;
+    instance: any;
+    value: unknown;
+  } & Record<string, JSON>;
+  isValid: boolean;
+}

package/src/interfaces/index.ts

@@ -1,8 +1,9 @@
-export * from "./ActionSchema";
+export * from "./ActionType";
 export * from "./ColumnIdentifier";
+export * from "./ComponentType";
 export * from "./FormOptions";
-export * from "./FormSchema";
+export * from "./FormType";
 export * from "./Operation";
 export * from "./QueryOptions";
-export * from "./RoleSchema";
-export * from "./Submission";
+export * from "./RoleType";
+export * from "./SubmissionType";

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-firstname.fixture.json

@@ -0,0 +1,256 @@
+{
+  "type": "form",
+  "display": "form",
+  "tags": [],
+  "components": [
+    {
+      "label": "First name",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "",
+      "displayMask": "",
+      "applyMaskOn": "change",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "truncateMultipleSpaces": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateWhenHidden": false,
+      "errorLabel": "",
+      "errors": "",
+      "key": "firstName",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "textfield",
+      "dataGridLabel": false,
+      "input": true,
+      "refreshOn": "",
+      "addons": [],
+      "inputType": "text",
+      "defaultValue": ""
+    },
+    {
+      "label": "Last name",
+      "labelPosition": "top",
+      "placeholder": "",
+      "description": "",
+      "tooltip": "",
+      "prefix": "",
+      "suffix": "",
+      "widget": {
+        "type": "input"
+      },
+      "inputMask": "",
+      "displayMask": "",
+      "applyMaskOn": "change",
+      "allowMultipleMasks": false,
+      "customClass": "",
+      "tabindex": "",
+      "autocomplete": "",
+      "hidden": false,
+      "hideLabel": false,
+      "showWordCount": false,
+      "showCharCount": false,
+      "mask": false,
+      "autofocus": false,
+      "spellcheck": true,
+      "disabled": false,
+      "tableView": true,
+      "modalEdit": false,
+      "multiple": false,
+      "persistent": true,
+      "inputFormat": "plain",
+      "protected": false,
+      "dbIndex": false,
+      "case": "",
+      "truncateMultipleSpaces": false,
+      "encrypted": false,
+      "redrawOn": "",
+      "clearOnHide": true,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "allowCalculateOverride": false,
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "pattern": "",
+        "customMessage": "",
+        "custom": "",
+        "customPrivate": false,
+        "json": "",
+        "minLength": "",
+        "maxLength": "",
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "unique": false,
+      "validateWhenHidden": false,
+      "errorLabel": "",
+      "errors": "",
+      "key": "lastName",
+      "tags": [],
+      "properties": {},
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": "",
+        "json": ""
+      },
+      "customConditional": "",
+      "logic": [],
+      "attributes": {},
+      "overlay": {
+        "style": "",
+        "page": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "type": "textfield",
+      "dataGridLabel": false,
+      "input": true,
+      "refreshOn": "",
+      "addons": [],
+      "inputType": "text",
+      "defaultValue": ""
+    },
+    {
+      "type": "button",
+      "label": "Submit",
+      "key": "submit",
+      "size": "md",
+      "block": false,
+      "action": "submit",
+      "disableOnInvalid": true,
+      "theme": "primary",
+      "input": true,
+      "placeholder": "",
+      "prefix": "",
+      "customClass": "",
+      "suffix": "",
+      "multiple": false,
+      "defaultValue": null,
+      "protected": false,
+      "unique": false,
+      "persistent": false,
+      "hidden": false,
+      "clearOnHide": true,
+      "refreshOn": "",
+      "redrawOn": "",
+      "tableView": false,
+      "modalEdit": false,
+      "labelPosition": "top",
+      "description": "",
+      "errorLabel": "",
+      "tooltip": "",
+      "hideLabel": false,
+      "tabindex": "",
+      "disabled": false,
+      "autofocus": false,
+      "dbIndex": false,
+      "customDefaultValue": "",
+      "calculateValue": "",
+      "calculateServer": false,
+      "widget": {
+        "type": "input"
+      },
+      "attributes": {},
+      "validateOn": "change",
+      "validate": {
+        "required": false,
+        "custom": "",
+        "customPrivate": false,
+        "strictDateValidation": false,
+        "multiple": false,
+        "unique": false
+      },
+      "conditional": {
+        "show": null,
+        "when": null,
+        "eq": ""
+      },
+      "overlay": {
+        "style": "",
+        "left": "",
+        "top": "",
+        "width": "",
+        "height": ""
+      },
+      "allowCalculateOverride": false,
+      "encrypted": false,
+      "showCharCount": false,
+      "showWordCount": false,
+      "properties": {},
+      "allowMultipleMasks": false,
+      "leftIcon": "",
+      "rightIcon": "",
+      "dataGridLabel": true,
+      "addons": []
+    }
+  ]
+}