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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.10",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,33 +26,35 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "eventemitter2": "^6.4.3",
-    "prop-types": "15.8.1"
+    "use-debounce": "^10.0.4"
   },
   "peerDependencies": {
     "@formio/choices.js": ">=9.0.1",
+    "@tanstack/react-table": ">=8.20.6",
     "formiojs": ">=4.0.0",
     "lodash": ">=4.17.20",
     "moment": ">=2.30.1",
-    "prop-types": ">=15.7.2",
     "react": ">=16.14.0",
     "react-dnd": ">=16.0.1",
     "react-dnd-html5-backend": ">=16.0.1",
     "react-dom": ">=16.14.0",
+    "react-select": ">=5.9.0",
     "react-table": ">=7.6.3",
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind-formio": "3.0.0-alpha.1",
-    "@tsed/typescript": "3.0.0-alpha.1",
+    "@tanstack/react-table": ">=8.20.6",
+    "@tsed/tailwind-formio": "3.0.0-alpha.10",
+    "@tsed/typescript": "3.0.0-alpha.10",
     "microbundle": "0.13.0",
     "vite": "5.4.11",
     "vitest": "2.1.8"
   },
-  "repository": "https://github.com/TypedProject/tsed-formio",
+  "repository": "https://github.com/tsedio/tsed-formio",
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio/tree/master/packages/react-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/react-formio",
   "author": "Romain Lenzotti",
   "publishConfig": {
     "tag": "alpha"

package/readme.md

@@ -37,24 +37,24 @@ See our [storybook](https://formio.tsed.io/?path=/docs/getting-started--docs) to
 
 Many components are provided to build your own backoffice based on Formio.js API:
 
-- [ActionsTable](https://formio.tsed.io/?path=story/reactformio-actionstable--sandbox),
-- [FormAccess](https://formio.tsed.io/?path=story/reactformio-formaccess--sandbox),
-- [FormAction](https://formio.tsed.io/?path=story/reactformio-formaction--sandbox),
-- [Form](https://formio.tsed.io/?path=docs/documentation-form--docs),
-- [FormBuilder](https://formio.tsed.io/?path=docs/documentation-formbuilder--docs),
-- [FormEdit](https://formio.tsed.io/?path=docs/documentation-formedit--docs),
-- [FormsTable](https://formio.tsed.io/?path=docs/documentation-formstable--docs),
-- [InputTags](https://formio.tsed.io/?path=story/reactformio-inputtags--sandbox),
-- [InputText](https://formio.tsed.io/?path=story/reactformio-inputtext--sandbox),
-- [Pagination](https://formio.tsed.io/?path=story/reactformio-pagination--sandbox),
-- [Select](https://formio.tsed.io/?path=/story/reactformio-select--sandbox),
-- [SubmissionsTable](https://formio.tsed.io/?path=/docs/documentation-submissionstable--docs).
-- [Table](https://formio.tsed.io/?path=/story/reactformio-table--sandbox),
+- ActionsTable,
+- FormAccess,
+- FormAction,
+- Form,
+- FormBuilder,
+- FormEdit,
+- FormsTable,
+- InputTags,
+- InputText,
+- Pagination,
+- Select,
+- SubmissionsTable.
+- Table,
 - Predefined Reducers for Actions, Action, Form, Forms, Submission, Submissions, etc...,
 - TypeScript support.
 - Tailwind support.
 
-## Migrate from v1
+## Migrate to v2
 
 If you use redux actions from v1, you have to install `@tsed/redux-formio-stores` and remplace your imports:
 
@@ -63,6 +63,19 @@ If you use redux actions from v1, you have to install `@tsed/redux-formio-stores
 + import { defaultFormioReducer, formsReducer } from "@tsed/react-formio-stores";
 ```
 
+## Migrate to v3
+
+- `@tsed/react-formio` is now build only for ESM environment.
+- `@tsed/react-formio` use tree-shaking to reduce the bundle size, you have to import only what you need from the library.
+- `@tsed/react-formio` drop the support of TailwindCSS v2.
+
+Example:
+
+```diff
+- import { Form } from "@tsed/react-formio";
++ import { Form } from "@tsed/react-formio/organisms/form/Form";
+```
+
 ## Install
 
 `@tsed/react-formio` can be used on the server, or bundled for the client using an

package/src/atoms/icon/Icon.stories.tsx

@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Template from "@tsed/tailwind-formio";
+
+import { Icon } from "./Icon";
+
+/**
+ * Icon component to display icons based on [BxIcons](https://boxicons.com/).
+ *
+ * ## Usage
+ *
+ * ```ts
+ * import {Icon} from "@tsed/react-formio/atoms/icon/Icon";
+ * ```
+ *
+ * ## Override Icon
+ *
+ * This component is registered with the name `Icon` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("Icon", MyIconComponent);
+ * ```
+ */
+export default {
+  title: "Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      control: "text"
+    }
+  },
+  parameters: {
+    children: "Text",
+    variant: "primary"
+  }
+} satisfies Meta<typeof Icon>;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Usage: Story = {
+  args: {
+    name: "save"
+  }
+};
+
+export const Size: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm", "text-large", "text-xl", "text-3xl", "text-8xl"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Colors: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm text-red-600", "text-large text-primary", "text-xl text-secondary", "text-3xl text-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Rounded: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm bg-red-600", "text-large bg-primary", "text-xl bg-secondary", "text-3xl bg-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className + " rounded-full text-white p-3"} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+/**
+ * Formio needs theses icons to be displayed in the form builder and other places.
+ */
+export const PresetsForFormio: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {Object.entries(Template.templates.tailwind.ICONS).map(([icon]) => (
+          <div key={icon} className={"flex gap-3 flex-wrap"}>
+            <div
+              className={"flex flex-col justify-center items-center space-y-3 border-1 border-gray-300 rounded-md"}
+              style={{
+                width: "100px",
+                height: "100px"
+              }}
+            >
+              <div>
+                <Icon name={icon} />
+              </div>
+              <span className='text-sm'>{icon}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};

package/src/atoms/icon/Icon.tsx

@@ -0,0 +1,16 @@
+import cx from "classnames";
+import type { HTMLAttributes } from "react";
+
+import { registerComponent } from "../../registries/components";
+import { iconClass } from "../../utils/iconClass";
+
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+  iconset?: string;
+  name: string;
+}
+
+export function Icon({ iconset, name, className, ...props }: IconProps) {
+  return <i {...props} className={cx(iconClass(iconset, name), className)} />;
+}
+
+registerComponent("Icon", Icon);

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,9 +1,9 @@
 import React from "react";
 
-import { OperationButtonProps } from "../components/table/components/defaultOperationButton.component";
+import type { OperationButtonProps } from "../molecules/table/components/DefaultOperationButton.js";
 
 export type PermissionsResolver<Data = any> = (data: Data, ctx: any) => void;
-export type OnClickOperation<Data = any> = (data: Data, operation: Operation) => void;
+// export type OnClickOperation<Data = any> = (data: Data, operation: Operation) => void;
 
 export interface Operation<Data = any> {
   /**

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": []
+    }
+  ]
+}