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

package/dist/utils/getEventValue.js

@@ -0,0 +1,8 @@
+function a(t) {
+  const { target: e } = t;
+  return t.target.multiple && t.target.selectedOptions ? Array.from(t.target.selectedOptions, (r) => r.value) : e.type === "checkbox" ? e.checked : e.value;
+}
+export {
+  a as getEventValue
+};
+//# sourceMappingURL=getEventValue.js.map

package/dist/utils/getEventValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getEventValue.js","sources":["../../src/utils/getEventValue.ts"],"sourcesContent":["export function getEventValue(event: any) {\n  const { target } = event;\n\n  if (event.target.multiple && event.target.selectedOptions) {\n    return Array.from(event.target.selectedOptions, (option: any) => option.value);\n  }\n\n  return target.type === \"checkbox\" ? target.checked : target.value;\n}\n"],"names":["getEventValue","event","target","option"],"mappings":"AAAO,SAASA,EAAcC,GAAY;AAClC,QAAA,EAAE,QAAAC,MAAWD;AAEnB,SAAIA,EAAM,OAAO,YAAYA,EAAM,OAAO,kBACjC,MAAM,KAAKA,EAAM,OAAO,iBAAiB,CAACE,MAAgBA,EAAO,KAAK,IAGxED,EAAO,SAAS,aAAaA,EAAO,UAAUA,EAAO;AAC9D;"}

package/dist/utils/iconClass.d.ts

@@ -1 +1 @@
-export declare function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string;
+export declare function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string;

package/dist/utils/iconClass.js

@@ -0,0 +1,9 @@
+import * as e from "formiojs";
+const { Templates: o } = e;
+function s(r, t, n) {
+  return o.current.iconClass(r || o.current.defaultIconset, t, n);
+}
+export {
+  s as iconClass
+};
+//# sourceMappingURL=iconClass.js.map

package/dist/utils/iconClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconClass.js","sources":["../../src/utils/iconClass.ts"],"sourcesContent":["import * as formio from \"formiojs\";\n\nconst { Templates } = formio;\n\nexport function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {\n  return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);\n}\n"],"names":["Templates","formio","iconClass","iconset","name","spinning"],"mappings":";AAEA,MAAM,EAAE,WAAAA,EAAc,IAAAC;AAEN,SAAAC,EAAUC,GAA6BC,GAAcC,GAA4B;AACxF,SAAAL,EAAU,QAAQ,UAAUG,KAAWH,EAAU,QAAQ,gBAAgBI,GAAMC,CAAQ;AAChG;"}

package/dist/utils/mapPagination.d.ts

@@ -1 +1 @@
-export declare function mapPagination({ skip, limit, serverCount, length }?: any): any;
+export declare function mapPagination({ skip, limit, serverCount, length }?: any): any;

package/dist/utils/mapPagination.js

@@ -0,0 +1,11 @@
+function o({ skip: n, limit: a, serverCount: e, length: g } = {}) {
+  return n = n || 0, a = a || 10, e = e || g, {
+    pageIndex: Math.floor(n / a),
+    pageSize: a,
+    pageCount: Math.ceil(e / a)
+  };
+}
+export {
+  o as mapPagination
+};
+//# sourceMappingURL=mapPagination.js.map

package/dist/utils/mapPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapPagination.js","sources":["../../src/utils/mapPagination.ts"],"sourcesContent":["export function mapPagination({ skip, limit, serverCount, length }: any = {}): any {\n  skip = skip || 0;\n  limit = limit || 10;\n  serverCount = serverCount || length;\n\n  return {\n    pageIndex: Math.floor(skip / limit),\n    pageSize: limit,\n    pageCount: Math.ceil(serverCount / limit)\n  };\n}\n"],"names":["mapPagination","skip","limit","serverCount","length"],"mappings":"AAAgB,SAAAA,EAAc,EAAE,MAAAC,GAAM,OAAAC,GAAO,aAAAC,GAAa,QAAAC,EAAO,IAAS,IAAS;AACjF,SAAAH,IAAOA,KAAQ,GACfC,IAAQA,KAAS,IACjBC,IAAcA,KAAeC,GAEtB;AAAA,IACL,WAAW,KAAK,MAAMH,IAAOC,CAAK;AAAA,IAClC,UAAUA;AAAA,IACV,WAAW,KAAK,KAAKC,IAAcD,CAAK;AAAA,EAC1C;AACF;"}

package/dist/utils/stopPropagationWrapper.d.ts

@@ -1 +1 @@
-export declare const stopPropagationWrapper: (fn: Function) => (event: any) => void;
+export declare const stopPropagationWrapper: (fn: Function) => (event: any) => void;

package/dist/utils/stopPropagationWrapper.js

@@ -0,0 +1,7 @@
+const t = (o) => (p) => {
+  p.stopPropagation(), o();
+};
+export {
+  t as stopPropagationWrapper
+};
+//# sourceMappingURL=stopPropagationWrapper.js.map

package/dist/utils/stopPropagationWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stopPropagationWrapper.js","sources":["../../src/utils/stopPropagationWrapper.ts"],"sourcesContent":["export const stopPropagationWrapper = (fn: Function) => (event: any) => {\n  event.stopPropagation();\n  fn();\n};\n"],"names":["stopPropagationWrapper","fn","event"],"mappings":"AAAO,MAAMA,IAAyB,CAACC,MAAiB,CAACC,MAAe;AACtE,EAAAA,EAAM,gBAAgB,GACnBD,EAAA;AACL;"}

package/package.json

@@ -1,51 +1,62 @@
 {
   "name": "@tsed/react-formio",
-  "version": "2.3.6",
+  "version": "3.0.0-alpha.10",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
+  "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.modern.js",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "tsed-source": "./src/index.ts",
-      "import": "./dist/index.modern.js",
-      "require": "./dist/index.js",
-      "default": "./dist/index.modern.js"
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "tsed-source": "./src/*",
+      "default": "./dist/*.js"
     }
   },
   "source": "src/index.ts",
   "scripts": {
-    "lint:fix": "yarn lint --fix",
-    "test": "cross-env NODE_ENV=test jest --coverage",
-    "test:coverage:update": "write-coverage",
-    "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment --globals react/jsx-runtime=jsx",
-    "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment --globals react/jsx-runtime=jsx"
+    "test": "vitest run --coverage",
+    "build": "vite build",
+    "watch": "vite build --watch"
   },
   "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",
-    "prop-types": ">=15.7.2",
+    "moment": ">=2.30.1",
     "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": "2.3.6",
-    "@tsed/tailwind-formio": "2.3.6",
-    "microbundle": "0.13.0"
+    "@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",
-  "author": "Romain Lenzotti"
+  "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/react-formio",
+  "author": "Romain Lenzotti",
+  "publishConfig": {
+    "tag": "alpha"
+  }
 }

package/readme.md

@@ -1,5 +1,5 @@
 <p style="text-align: center" align="center">
- <a href="https://tsed.dev" target="_blank"><img src="https://tsed.dev/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
+ <a href="https://tsed.io" target="_blank"><img src="https://tsed.io/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
 </p>
 
 <div align="center">
@@ -14,11 +14,11 @@
 </div>
 
 <div align="center">
-  <a href="https://tsed.dev/">Website</a>
+  <a href="https://tsed.io/">Website</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://tsed.dev/tutorials/prisma.html">Tutorial</a>
+  <a href="https://tsed.io/tutorials/prisma.html">Tutorial</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://slack.tsed.dev">Slack</a>
+  <a href="https://api.tsed.io/rest/slack/tsedio/tsed">Slack</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
   <a href="https://twitter.com/TsED_io">Twitter</a>
 </div>
@@ -31,30 +31,30 @@ platform.
 This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
 listed above.
 
-See our [storybook](https://formio.tsed.dev/?path=/docs/getting-started--docs) to see all available components.
+See our [storybook](https://formio.tsed.io/?path=/docs/getting-started--docs) to see all available components.
 
 ## Features
 
 Many components are provided to build your own backoffice based on Formio.js API:
 
-- [ActionsTable](https://formio.tsed.dev/?path=story/reactformio-actionstable--sandbox),
-- [FormAccess](https://formio.tsed.dev/?path=story/reactformio-formaccess--sandbox),
-- [FormAction](https://formio.tsed.dev/?path=story/reactformio-formaction--sandbox),
-- [Form](https://formio.tsed.dev/?path=docs/documentation-form--docs),
-- [FormBuilder](https://formio.tsed.dev/?path=docs/documentation-formbuilder--docs),
-- [FormEdit](https://formio.tsed.dev/?path=docs/documentation-formedit--docs),
-- [FormsTable](https://formio.tsed.dev/?path=docs/documentation-formstable--docs),
-- [InputTags](https://formio.tsed.dev/?path=story/reactformio-inputtags--sandbox),
-- [InputText](https://formio.tsed.dev/?path=story/reactformio-inputtext--sandbox),
-- [Pagination](https://formio.tsed.dev/?path=story/reactformio-pagination--sandbox),
-- [Select](https://formio.tsed.dev/?path=/story/reactformio-select--sandbox),
-- [SubmissionsTable](https://formio.tsed.dev/?path=/docs/documentation-submissionstable--docs).
-- [Table](https://formio.tsed.dev/?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
@@ -91,7 +104,7 @@ function App() {
 export default App;
 ```
 
-See more on http://formio.tsed.dev/?path=/docs/getting-started--docs
+See more on http://formio.tsed.io/?path=/docs/getting-started--docs
 
 ## Contributors
 

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" });