@object-ui/plugin-form 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,256 @@
+# @object-ui/plugin-form
+
+Form plugin for Object UI - Advanced form components with validation, multi-step forms, and field-level control.
+
+## Features
+
+- **Form Builder** - Create complex forms from schemas
+- **Validation** - Built-in validation with error messages
+- **Multi-Step Forms** - Wizard-style multi-step forms
+- **Field Types** - Support for all standard field types
+- **Form State** - Automatic form state management
+- **Customizable** - Tailwind CSS styling support
+
+## Installation
+
+```bash
+pnpm add @object-ui/plugin-form
+```
+
+## Usage
+
+### Automatic Registration (Side-Effect Import)
+
+```typescript
+// In your app entry point (e.g., App.tsx or main.tsx)
+import '@object-ui/plugin-form';
+
+// Now you can use form types in your schemas
+const schema = {
+  type: 'form',
+  fields: [
+    { name: 'email', type: 'input', label: 'Email', required: true },
+    { name: 'password', type: 'input', inputType: 'password', label: 'Password', required: true }
+  ]
+};
+```
+
+### Manual Registration
+
+```typescript
+import { formComponents } from '@object-ui/plugin-form';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Register form components
+Object.entries(formComponents).forEach(([type, component]) => {
+  ComponentRegistry.register(type, component);
+});
+```
+
+## Schema API
+
+### Form
+
+Complete form with fields and validation:
+
+```typescript
+{
+  type: 'form',
+  fields: FormField[],
+  submitLabel?: string,
+  cancelLabel?: string,
+  onSubmit?: (data) => void,
+  onCancel?: () => void,
+  className?: string
+}
+```
+
+### Form Field
+
+Individual form field configuration:
+
+```typescript
+interface FormField {
+  name: string;
+  type: string;                   // 'input', 'select', 'checkbox', etc.
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  validation?: ValidationRule[];
+  defaultValue?: any;
+  disabled?: boolean;
+  className?: string;
+}
+```
+
+## Examples
+
+### Basic Form
+
+```typescript
+const schema = {
+  type: 'form',
+  fields: [
+    {
+      name: 'name',
+      type: 'input',
+      label: 'Full Name',
+      placeholder: 'Enter your name',
+      required: true
+    },
+    {
+      name: 'email',
+      type: 'input',
+      inputType: 'email',
+      label: 'Email Address',
+      required: true,
+      validation: [
+        { type: 'email', message: 'Invalid email format' }
+      ]
+    },
+    {
+      name: 'country',
+      type: 'select',
+      label: 'Country',
+      options: [
+        { label: 'United States', value: 'us' },
+        { label: 'Canada', value: 'ca' },
+        { label: 'United Kingdom', value: 'uk' }
+      ]
+    },
+    {
+      name: 'subscribe',
+      type: 'checkbox',
+      label: 'Subscribe to newsletter'
+    }
+  ],
+  submitLabel: 'Register',
+  onSubmit: (data) => {
+    console.log('Form submitted:', data);
+  }
+};
+```
+
+### Multi-Step Form
+
+```typescript
+const schema = {
+  type: 'multi-step-form',
+  steps: [
+    {
+      title: 'Personal Info',
+      fields: [
+        { name: 'firstName', type: 'input', label: 'First Name', required: true },
+        { name: 'lastName', type: 'input', label: 'Last Name', required: true }
+      ]
+    },
+    {
+      title: 'Contact Info',
+      fields: [
+        { name: 'email', type: 'input', inputType: 'email', label: 'Email', required: true },
+        { name: 'phone', type: 'input', inputType: 'tel', label: 'Phone' }
+      ]
+    },
+    {
+      title: 'Review',
+      fields: []
+    }
+  ],
+  onSubmit: (data) => {
+    console.log('Multi-step form completed:', data);
+  }
+};
+```
+
+### Form with Validation
+
+```typescript
+const schema = {
+  type: 'form',
+  fields: [
+    {
+      name: 'username',
+      type: 'input',
+      label: 'Username',
+      required: true,
+      validation: [
+        { type: 'minLength', value: 3, message: 'Username must be at least 3 characters' },
+        { type: 'maxLength', value: 20, message: 'Username must be less than 20 characters' },
+        { type: 'pattern', value: '^[a-zA-Z0-9_]+$', message: 'Only letters, numbers, and underscores' }
+      ]
+    },
+    {
+      name: 'password',
+      type: 'input',
+      inputType: 'password',
+      label: 'Password',
+      required: true,
+      validation: [
+        { type: 'minLength', value: 8, message: 'Password must be at least 8 characters' },
+        { type: 'pattern', value: '(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])', message: 'Must contain uppercase, lowercase, and number' }
+      ]
+    }
+  ]
+};
+```
+
+## Integration with Data Sources
+
+Connect forms to backend APIs:
+
+```typescript
+import { createObjectStackAdapter } from '@object-ui/data-objectstack';
+
+const dataSource = createObjectStackAdapter({
+  baseUrl: 'https://api.example.com',
+  token: 'your-auth-token'
+});
+
+const schema = {
+  type: 'form',
+  dataSource,
+  resource: 'users',
+  fields: [/* fields */],
+  onSubmit: async (data) => {
+    await dataSource.create('users', data);
+  }
+};
+```
+
+## TypeScript Support
+
+```typescript
+import type { FormSchema, FormField } from '@object-ui/plugin-form';
+
+const emailField: FormField = {
+  name: 'email',
+  type: 'input',
+  inputType: 'email',
+  label: 'Email',
+  required: true
+};
+
+const loginForm: FormSchema = {
+  type: 'form',
+  fields: [emailField],
+  submitLabel: 'Sign In'
+};
+```
+
+## Field Components
+
+The plugin includes these field components:
+- Text input
+- Email input
+- Password input
+- Number input
+- Textarea
+- Select dropdown
+- Checkbox
+- Radio group
+- Date picker
+- File upload
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './plugin-form/src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,394 @@
+import ie, { useState as O, useEffect as F, useCallback as X } from "react";
+import { ComponentRegistry as Z } from "@object-ui/core";
+import { SchemaRenderer as ae } from "@object-ui/react";
+import { buildValidationRules as le, mapFieldTypeToFormType as se, formatFileSize as ue, evaluateCondition as ce } from "@object-ui/fields";
+var C = { exports: {} }, k = {};
+var H;
+function fe() {
+  if (H) return k;
+  H = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
+  function m(E, d, p) {
+    var v = null;
+    if (p !== void 0 && (v = "" + p), d.key !== void 0 && (v = "" + d.key), "key" in d) {
+      p = {};
+      for (var b in d)
+        b !== "key" && (p[b] = d[b]);
+    } else p = d;
+    return d = p.ref, {
+      $$typeof: r,
+      type: E,
+      key: v,
+      ref: d !== void 0 ? d : null,
+      props: p
+    };
+  }
+  return k.Fragment = u, k.jsx = m, k.jsxs = m, k;
+}
+var S = {};
+var B;
+function de() {
+  return B || (B = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === te ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case c:
+          return "Fragment";
+        case w:
+          return "Profiler";
+        case a:
+          return "StrictMode";
+        case o:
+          return "Suspense";
+        case j:
+          return "SuspenseList";
+        case re:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case I:
+            return "Portal";
+          case D:
+            return e.displayName || "Context";
+          case t:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case A:
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ee:
+            return n = e.displayName || null, n !== null ? n : r(e.type) || "Memo";
+          case Y:
+            n = e._payload, e = e._init;
+            try {
+              return r(e(n));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function u(e) {
+      return "" + e;
+    }
+    function m(e) {
+      try {
+        u(e);
+        var n = !1;
+      } catch {
+        n = !0;
+      }
+      if (n) {
+        n = console;
+        var i = n.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
+          n,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          l
+        ), u(e);
+      }
+    }
+    function E(e) {
+      if (e === c) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === Y)
+        return "<...>";
+      try {
+        var n = r(e);
+        return n ? "<" + n + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function d() {
+      var e = $.A;
+      return e === null ? null : e.getOwner();
+    }
+    function p() {
+      return Error("react-stack-top-frame");
+    }
+    function v(e) {
+      if (z.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function b(e, n) {
+      function i() {
+        M || (M = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          n
+        ));
+      }
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
+        configurable: !0
+      });
+    }
+    function h() {
+      var e = r(this.type);
+      return W[e] || (W[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function _(e, n, i, l, P, V) {
+      var s = i.ref;
+      return e = {
+        $$typeof: N,
+        type: e,
+        key: n,
+        props: i,
+        _owner: l
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: h
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: P
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: V
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function g(e, n, i, l, P, V) {
+      var s = n.children;
+      if (s !== void 0)
+        if (l)
+          if (ne(s)) {
+            for (l = 0; l < s.length; l++)
+              R(s[l]);
+            Object.freeze && Object.freeze(s);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else R(s);
+      if (z.call(n, "key")) {
+        s = r(e);
+        var x = Object.keys(n).filter(function(oe) {
+          return oe !== "key";
+        });
+        l = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", G[s + l] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          l,
+          s,
+          x,
+          s
+        ), G[s + l] = !0);
+      }
+      if (s = null, i !== void 0 && (m(i), s = "" + i), v(n) && (m(n.key), s = "" + n.key), "key" in n) {
+        i = {};
+        for (var q in n)
+          q !== "key" && (i[q] = n[q]);
+      } else i = n;
+      return s && b(
+        i,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), _(
+        e,
+        s,
+        i,
+        d(),
+        P,
+        V
+      );
+    }
+    function R(e) {
+      f(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === Y && (e._payload.status === "fulfilled" ? f(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function f(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === N;
+    }
+    var T = ie, N = /* @__PURE__ */ Symbol.for("react.transitional.element"), I = /* @__PURE__ */ Symbol.for("react.portal"), c = /* @__PURE__ */ Symbol.for("react.fragment"), a = /* @__PURE__ */ Symbol.for("react.strict_mode"), w = /* @__PURE__ */ Symbol.for("react.profiler"), t = /* @__PURE__ */ Symbol.for("react.consumer"), D = /* @__PURE__ */ Symbol.for("react.context"), A = /* @__PURE__ */ Symbol.for("react.forward_ref"), o = /* @__PURE__ */ Symbol.for("react.suspense"), j = /* @__PURE__ */ Symbol.for("react.suspense_list"), ee = /* @__PURE__ */ Symbol.for("react.memo"), Y = /* @__PURE__ */ Symbol.for("react.lazy"), re = /* @__PURE__ */ Symbol.for("react.activity"), te = /* @__PURE__ */ Symbol.for("react.client.reference"), $ = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, z = Object.prototype.hasOwnProperty, ne = Array.isArray, L = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    T = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var M, W = {}, U = T.react_stack_bottom_frame.bind(
+      T,
+      p
+    )(), J = L(E(p)), G = {};
+    S.Fragment = c, S.jsx = function(e, n, i) {
+      var l = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return g(
+        e,
+        n,
+        i,
+        !1,
+        l ? Error("react-stack-top-frame") : U,
+        l ? L(E(e)) : J
+      );
+    }, S.jsxs = function(e, n, i) {
+      var l = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return g(
+        e,
+        n,
+        i,
+        !0,
+        l ? Error("react-stack-top-frame") : U,
+        l ? L(E(e)) : J
+      );
+    };
+  })()), S;
+}
+var Q;
+function pe() {
+  return Q || (Q = 1, process.env.NODE_ENV === "production" ? C.exports = fe() : C.exports = de()), C.exports;
+}
+var y = pe();
+const me = ({
+  schema: r,
+  dataSource: u
+}) => {
+  const [m, E] = O(null), [d, p] = O([]), [v, b] = O(null), [h, _] = O(!0), [g, R] = O(null), f = r.customFields && r.customFields.length > 0;
+  F(() => {
+    f && (b(r.initialData || r.initialValues || {}), _(!1));
+  }, [f, r.initialData, r.initialValues]), F(() => {
+    const c = async () => {
+      try {
+        if (!u)
+          throw new Error("DataSource is required when using ObjectQL schema fetching (inline fields not provided)");
+        const a = await u.getObjectSchema(r.objectName);
+        E(a);
+      } catch (a) {
+        console.error("Failed to fetch object schema:", a), R(a);
+      }
+    };
+    f ? E({
+      name: r.objectName,
+      fields: {}
+    }) : r.objectName && u && c();
+  }, [r.objectName, u, f]), F(() => {
+    m && !f && (async () => {
+      if (!r.recordId || r.mode === "create") {
+        b(r.initialData || r.initialValues || {});
+        return;
+      }
+      if (!f) {
+        if (!u) {
+          R(new Error("DataSource is required for fetching record data (inline data not provided)")), _(!1);
+          return;
+        }
+        _(!0);
+        try {
+          const a = await u.findOne(r.objectName, r.recordId);
+          b(a);
+        } catch (a) {
+          console.error("Failed to fetch record:", a), R(a);
+        } finally {
+          _(!1);
+        }
+      }
+    })();
+  }, [r.objectName, r.recordId, r.mode, r.initialValues, r.initialData, u, m, f]), F(() => {
+    if (f && r.customFields) {
+      p(r.customFields), _(!1);
+      return;
+    }
+    if (!m) return;
+    const c = [];
+    (r.fields || Object.keys(m.fields || {})).forEach((w) => {
+      const t = m.fields?.[w];
+      if (!t) return;
+      const D = !t.permissions || t.permissions.write !== !1;
+      if (r.mode !== "view" && !D) return;
+      const A = r.customFields?.find((o) => o.name === w);
+      if (A)
+        c.push(A);
+      else {
+        const o = {
+          name: w,
+          label: t.label || w,
+          type: se(t.type),
+          required: t.required || !1,
+          disabled: r.readOnly || r.mode === "view" || t.readonly,
+          placeholder: t.placeholder,
+          description: t.help || t.description,
+          validation: le(t)
+        };
+        if ((t.type === "select" || t.type === "lookup" || t.type === "master_detail") && (o.options = t.options || [], o.multiple = t.multiple), (t.type === "number" || t.type === "currency" || t.type === "percent") && (o.min = t.min, o.max = t.max, o.step = t.precision ? Math.pow(10, -t.precision) : void 0), (t.type === "text" || t.type === "textarea" || t.type === "markdown" || t.type === "html") && (o.maxLength = t.max_length, o.minLength = t.min_length), (t.type === "file" || t.type === "image") && (o.multiple = t.multiple, o.accept = t.accept ? t.accept.join(",") : void 0, t.max_size)) {
+          const j = `Max size: ${ue(t.max_size)}`;
+          o.description = o.description ? `${o.description} (${j})` : j;
+        }
+        t.type === "email" && (o.inputType = "email"), t.type === "phone" && (o.inputType = "tel"), t.type === "url" && (o.inputType = "url"), t.type === "password" && (o.inputType = "password"), t.type === "time" && (o.inputType = "time"), (t.type === "formula" || t.type === "summary" || t.type === "auto_number") && (o.disabled = !0), t.visible_on && (o.visible = (j) => ce(t.visible_on, j)), c.push(o);
+      }
+    }), p(c), _(!1);
+  }, [m, r.fields, r.customFields, r.readOnly, r.mode, f]);
+  const T = X(async (c) => {
+    if (f && !u)
+      return r.onSuccess && await r.onSuccess(c), c;
+    if (!u)
+      throw new Error("DataSource is required for form submission (inline mode not configured)");
+    try {
+      let a;
+      if (r.mode === "create")
+        a = await u.create(r.objectName, c);
+      else if (r.mode === "edit" && r.recordId)
+        a = await u.update(r.objectName, r.recordId, c);
+      else
+        throw new Error("Invalid form mode or missing record ID");
+      return r.onSuccess && await r.onSuccess(a), a;
+    } catch (a) {
+      throw console.error("Failed to submit form:", a), r.onError && r.onError(a), a;
+    }
+  }, [r, u, f]), N = X(() => {
+    r.onCancel && r.onCancel();
+  }, [r]);
+  if (g)
+    return /* @__PURE__ */ y.jsxs("div", { className: "p-4 border border-red-300 bg-red-50 rounded-md", children: [
+      /* @__PURE__ */ y.jsx("h3", { className: "text-red-800 font-semibold", children: "Error loading form" }),
+      /* @__PURE__ */ y.jsx("p", { className: "text-red-600 text-sm mt-1", children: g.message })
+    ] });
+  if (h)
+    return /* @__PURE__ */ y.jsxs("div", { className: "p-8 text-center", children: [
+      /* @__PURE__ */ y.jsx("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" }),
+      /* @__PURE__ */ y.jsx("p", { className: "mt-2 text-sm text-gray-600", children: "Loading form..." })
+    ] });
+  const I = {
+    type: "form",
+    fields: d,
+    layout: r.layout === "vertical" || r.layout === "horizontal" ? r.layout : "vertical",
+    columns: r.columns,
+    submitLabel: r.submitText || (r.mode === "create" ? "Create" : "Update"),
+    cancelLabel: r.cancelText,
+    showSubmit: r.showSubmit !== !1 && r.mode !== "view",
+    showCancel: r.showCancel !== !1,
+    resetOnSubmit: r.showReset,
+    defaultValues: v,
+    onSubmit: T,
+    onCancel: N,
+    className: r.className
+  };
+  return /* @__PURE__ */ y.jsx("div", { className: "w-full", children: /* @__PURE__ */ y.jsx(ae, { schema: I }) });
+}, K = ({ schema: r }) => /* @__PURE__ */ y.jsx(me, { schema: r });
+Z.register("object-form", K);
+Z.register("form", K);
+export {
+  me as ObjectForm
+};

package/dist/index.umd.cjs

@@ -0,0 +1,6 @@
+(function(y,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/fields")):typeof define=="function"&&define.amd?define(["exports","react","@object-ui/core","@object-ui/react","@object-ui/fields"],c):(y=typeof globalThis<"u"?globalThis:y||self,c(y.ObjectUIPluginForm={},y.React,y.core,y.react,y.fields))})(this,(function(y,c,W,re,P){"use strict";var A={exports:{}},S={};var J;function te(){if(J)return S;J=1;var r=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function b(v,p,m){var T=null;if(m!==void 0&&(T=""+m),p.key!==void 0&&(T=""+p.key),"key"in p){m={};for(var _ in p)_!=="key"&&(m[_]=p[_])}else m=p;return p=m.ref,{$$typeof:r,type:v,key:T,ref:p!==void 0?p:null,props:m}}return S.Fragment=u,S.jsx=b,S.jsxs=b,S}var k={};var G;function ne(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===le?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case x:return"Profiler";case a:return"StrictMode";case o:return"Suspense";case g:return"SuspenseList";case ae:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case D:return"Portal";case Y:return e.displayName||"Context";case t:return(e._context.displayName||"Context")+".Consumer";case h:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return n=e.displayName||null,n!==null?n:r(e.type)||"Memo";case L:n=e._payload,e=e._init;try{return r(e(n))}catch{}}return null}function u(e){return""+e}function b(e){try{u(e);var n=!1}catch{n=!0}if(n){n=console;var i=n.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),u(e)}}function v(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===L)return"<...>";try{var n=r(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function p(){var e=M.A;return e===null?null:e.getOwner()}function m(){return Error("react-stack-top-frame")}function T(e){if(B.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function _(e,n){function i(){Q||(Q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function I(){var e=r(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,n,i,l,C,z){var s=i.ref;return e={$$typeof:F,type:e,key:n,props:i,_owner:l},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:I}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,n,i,l,C,z){var s=n.children;if(s!==void 0)if(l)if(se(s)){for(l=0;l<s.length;l++)j(s[l]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(s);if(B.call(n,"key")){s=r(e);var O=Object.keys(n).filter(function(ue){return ue!=="key"});l=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",ee[s+l]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,l,s,O,s),ee[s+l]=!0)}if(s=null,i!==void 0&&(b(i),s=""+i),T(n)&&(b(n.key),s=""+n.key),"key"in n){i={};for(var U in n)U!=="key"&&(i[U]=n[U])}else i=n;return s&&_(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,s,i,p(),C,z)}function j(e){d(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===L&&(e._payload.status==="fulfilled"?d(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function d(e){return typeof e=="object"&&e!==null&&e.$$typeof===F}var w=c,F=Symbol.for("react.transitional.element"),D=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),x=Symbol.for("react.profiler"),t=Symbol.for("react.consumer"),Y=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),o=Symbol.for("react.suspense"),g=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),ae=Symbol.for("react.activity"),le=Symbol.for("react.client.reference"),M=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,se=Array.isArray,V=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(e){return e()}};var Q,Z={},K=w.react_stack_bottom_frame.bind(w,m)(),$=V(v(m)),ee={};k.Fragment=f,k.jsx=function(e,n,i){var l=1e4>M.recentlyCreatedOwnerStacks++;return N(e,n,i,!1,l?Error("react-stack-top-frame"):K,l?V(v(e)):$)},k.jsxs=function(e,n,i){var l=1e4>M.recentlyCreatedOwnerStacks++;return N(e,n,i,!0,l?Error("react-stack-top-frame"):K,l?V(v(e)):$)}})()),k}var q;function oe(){return q||(q=1,process.env.NODE_ENV==="production"?A.exports=te():A.exports=ne()),A.exports}var E=oe();const X=({schema:r,dataSource:u})=>{const[b,v]=c.useState(null),[p,m]=c.useState([]),[T,_]=c.useState(null),[I,R]=c.useState(!0),[N,j]=c.useState(null),d=r.customFields&&r.customFields.length>0;c.useEffect(()=>{d&&(_(r.initialData||r.initialValues||{}),R(!1))},[d,r.initialData,r.initialValues]),c.useEffect(()=>{const f=async()=>{try{if(!u)throw new Error("DataSource is required when using ObjectQL schema fetching (inline fields not provided)");const a=await u.getObjectSchema(r.objectName);v(a)}catch(a){console.error("Failed to fetch object schema:",a),j(a)}};d?v({name:r.objectName,fields:{}}):r.objectName&&u&&f()},[r.objectName,u,d]),c.useEffect(()=>{b&&!d&&(async()=>{if(!r.recordId||r.mode==="create"){_(r.initialData||r.initialValues||{});return}if(!d){if(!u){j(new Error("DataSource is required for fetching record data (inline data not provided)")),R(!1);return}R(!0);try{const a=await u.findOne(r.objectName,r.recordId);_(a)}catch(a){console.error("Failed to fetch record:",a),j(a)}finally{R(!1)}}})()},[r.objectName,r.recordId,r.mode,r.initialValues,r.initialData,u,b,d]),c.useEffect(()=>{if(d&&r.customFields){m(r.customFields),R(!1);return}if(!b)return;const f=[];(r.fields||Object.keys(b.fields||{})).forEach(x=>{const t=b.fields?.[x];if(!t)return;const Y=!t.permissions||t.permissions.write!==!1;if(r.mode!=="view"&&!Y)return;const h=r.customFields?.find(o=>o.name===x);if(h)f.push(h);else{const o={name:x,label:t.label||x,type:P.mapFieldTypeToFormType(t.type),required:t.required||!1,disabled:r.readOnly||r.mode==="view"||t.readonly,placeholder:t.placeholder,description:t.help||t.description,validation:P.buildValidationRules(t)};if((t.type==="select"||t.type==="lookup"||t.type==="master_detail")&&(o.options=t.options||[],o.multiple=t.multiple),(t.type==="number"||t.type==="currency"||t.type==="percent")&&(o.min=t.min,o.max=t.max,o.step=t.precision?Math.pow(10,-t.precision):void 0),(t.type==="text"||t.type==="textarea"||t.type==="markdown"||t.type==="html")&&(o.maxLength=t.max_length,o.minLength=t.min_length),(t.type==="file"||t.type==="image")&&(o.multiple=t.multiple,o.accept=t.accept?t.accept.join(","):void 0,t.max_size)){const g=`Max size: ${P.formatFileSize(t.max_size)}`;o.description=o.description?`${o.description} (${g})`:g}t.type==="email"&&(o.inputType="email"),t.type==="phone"&&(o.inputType="tel"),t.type==="url"&&(o.inputType="url"),t.type==="password"&&(o.inputType="password"),t.type==="time"&&(o.inputType="time"),(t.type==="formula"||t.type==="summary"||t.type==="auto_number")&&(o.disabled=!0),t.visible_on&&(o.visible=g=>P.evaluateCondition(t.visible_on,g)),f.push(o)}}),m(f),R(!1)},[b,r.fields,r.customFields,r.readOnly,r.mode,d]);const w=c.useCallback(async f=>{if(d&&!u)return r.onSuccess&&await r.onSuccess(f),f;if(!u)throw new Error("DataSource is required for form submission (inline mode not configured)");try{let a;if(r.mode==="create")a=await u.create(r.objectName,f);else if(r.mode==="edit"&&r.recordId)a=await u.update(r.objectName,r.recordId,f);else throw new Error("Invalid form mode or missing record ID");return r.onSuccess&&await r.onSuccess(a),a}catch(a){throw console.error("Failed to submit form:",a),r.onError&&r.onError(a),a}},[r,u,d]),F=c.useCallback(()=>{r.onCancel&&r.onCancel()},[r]);if(N)return E.jsxs("div",{className:"p-4 border border-red-300 bg-red-50 rounded-md",children:[E.jsx("h3",{className:"text-red-800 font-semibold",children:"Error loading form"}),E.jsx("p",{className:"text-red-600 text-sm mt-1",children:N.message})]});if(I)return E.jsxs("div",{className:"p-8 text-center",children:[E.jsx("div",{className:"inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"}),E.jsx("p",{className:"mt-2 text-sm text-gray-600",children:"Loading form..."})]});const D={type:"form",fields:p,layout:r.layout==="vertical"||r.layout==="horizontal"?r.layout:"vertical",columns:r.columns,submitLabel:r.submitText||(r.mode==="create"?"Create":"Update"),cancelLabel:r.cancelText,showSubmit:r.showSubmit!==!1&&r.mode!=="view",showCancel:r.showCancel!==!1,resetOnSubmit:r.showReset,defaultValues:T,onSubmit:w,onCancel:F,className:r.className};return E.jsx("div",{className:"w-full",children:E.jsx(re.SchemaRenderer,{schema:D})})},H=({schema:r})=>E.jsx(X,{schema:r});W.ComponentRegistry.register("object-form",H),W.ComponentRegistry.register("form",H),y.ObjectForm=X,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));

package/dist/plugin-form/src/ObjectForm.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { ObjectFormSchema, DataSource } from '../../types/src';
+export interface ObjectFormProps {
+    /**
+     * The schema configuration for the form
+     */
+    schema: ObjectFormSchema;
+    /**
+     * Data source (ObjectQL or ObjectStack adapter)
+     * Optional when using inline field definitions (customFields or fields array with field objects)
+     */
+    dataSource?: DataSource;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * ObjectForm Component
+ *
+ * Renders a form for an ObjectQL object with automatic schema integration.
+ *
+ * @example
+ * ```tsx
+ * <ObjectForm
+ *   schema={{
+ *     type: 'object-form',
+ *     objectName: 'users',
+ *     mode: 'create',
+ *     fields: ['name', 'email', 'status']
+ *   }}
+ *   dataSource={dataSource}
+ * />
+ * ```
+ */
+export declare const ObjectForm: React.FC<ObjectFormProps>;

package/dist/plugin-form/src/index.d.ts

@@ -0,0 +1,3 @@
+import { ObjectForm } from './ObjectForm';
+export { ObjectForm };
+export type { ObjectFormProps } from './ObjectForm';

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@object-ui/plugin-form",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Form plugin for Object UI",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "lucide-react": "^0.563.0",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/fields": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
+}

package/src/ObjectForm.tsx

@@ -0,0 +1,349 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * ObjectForm Component
+ * 
+ * A smart form component that generates forms from ObjectQL object schemas.
+ * It automatically creates form fields based on object metadata.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import type { ObjectFormSchema, FormField, FormSchema, DataSource } from '@object-ui/types';
+import { SchemaRenderer } from '@object-ui/react';
+import { mapFieldTypeToFormType, buildValidationRules, evaluateCondition, formatFileSize } from '@object-ui/fields';
+
+export interface ObjectFormProps {
+  /**
+   * The schema configuration for the form
+   */
+  schema: ObjectFormSchema;
+  
+  /**
+   * Data source (ObjectQL or ObjectStack adapter)
+   * Optional when using inline field definitions (customFields or fields array with field objects)
+   */
+  dataSource?: DataSource;
+  
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+
+/**
+ * ObjectForm Component
+ * 
+ * Renders a form for an ObjectQL object with automatic schema integration.
+ * 
+ * @example
+ * ```tsx
+ * <ObjectForm
+ *   schema={{
+ *     type: 'object-form',
+ *     objectName: 'users',
+ *     mode: 'create',
+ *     fields: ['name', 'email', 'status']
+ *   }}
+ *   dataSource={dataSource}
+ * />
+ * ```
+ */
+export const ObjectForm: React.FC<ObjectFormProps> = ({
+  schema,
+  dataSource,
+}) => {
+  const [objectSchema, setObjectSchema] = useState<any>(null);
+  const [formFields, setFormFields] = useState<FormField[]>([]);
+  const [initialData, setInitialData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Check if using inline fields (fields defined as objects, not just names)
+  const hasInlineFields = schema.customFields && schema.customFields.length > 0;
+
+  // Initialize with inline data if provided
+  useEffect(() => {
+    if (hasInlineFields) {
+      setInitialData(schema.initialData || schema.initialValues || {});
+      setLoading(false);
+    }
+  }, [hasInlineFields, schema.initialData, schema.initialValues]);
+
+  // Fetch object schema from ObjectQL/ObjectStack (skip if using inline fields)
+  useEffect(() => {
+    const fetchObjectSchema = async () => {
+      try {
+        if (!dataSource) {
+          throw new Error('DataSource is required when using ObjectQL schema fetching (inline fields not provided)');
+        }
+        const schemaData = await dataSource.getObjectSchema(schema.objectName);
+        setObjectSchema(schemaData);
+      } catch (err) {
+        console.error('Failed to fetch object schema:', err);
+        setError(err as Error);
+      }
+    };
+
+    // Skip fetching if we have inline fields
+    if (hasInlineFields) {
+      // Use a minimal schema for inline fields
+      setObjectSchema({
+        name: schema.objectName,
+        fields: {} as Record<string, any>,
+      });
+    } else if (schema.objectName && dataSource) {
+      fetchObjectSchema();
+    }
+  }, [schema.objectName, dataSource, hasInlineFields]);
+
+  // Fetch initial data for edit/view modes (skip if using inline data)
+  useEffect(() => {
+    const fetchInitialData = async () => {
+      if (!schema.recordId || schema.mode === 'create') {
+        setInitialData(schema.initialData || schema.initialValues || {});
+        return;
+      }
+
+      // Skip fetching if using inline data
+      if (hasInlineFields) {
+        return;
+      }
+
+      if (!dataSource) {
+        setError(new Error('DataSource is required for fetching record data (inline data not provided)'));
+        setLoading(false);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const data = await dataSource.findOne(schema.objectName, schema.recordId);
+        setInitialData(data);
+      } catch (err) {
+        console.error('Failed to fetch record:', err);
+        setError(err as Error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (objectSchema && !hasInlineFields) {
+      fetchInitialData();
+    }
+  }, [schema.objectName, schema.recordId, schema.mode, schema.initialValues, schema.initialData, dataSource, objectSchema, hasInlineFields]);
+
+  // Generate form fields from object schema or inline fields
+  useEffect(() => {
+    // For inline fields, use them directly
+    if (hasInlineFields && schema.customFields) {
+      setFormFields(schema.customFields);
+      setLoading(false);
+      return;
+    }
+
+    if (!objectSchema) return;
+
+    const generatedFields: FormField[] = [];
+    
+    // Determine which fields to include
+    const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
+    
+    fieldsToShow.forEach((fieldName) => {
+      const field = objectSchema.fields?.[fieldName];
+      if (!field) return;
+
+      // Check field-level permissions for create/edit modes
+      const hasWritePermission = !field.permissions || field.permissions.write !== false;
+      if (schema.mode !== 'view' && !hasWritePermission) return; // Skip fields without write permission
+
+      // Check if there's a custom field configuration
+      const customField = schema.customFields?.find(f => f.name === fieldName);
+      
+      if (customField) {
+        generatedFields.push(customField);
+      } else {
+        // Auto-generate field from schema
+        const formField: FormField = {
+          name: fieldName,
+          label: field.label || fieldName,
+          type: mapFieldTypeToFormType(field.type),
+          required: field.required || false,
+          disabled: schema.readOnly || schema.mode === 'view' || field.readonly,
+          placeholder: field.placeholder,
+          description: field.help || field.description,
+          validation: buildValidationRules(field),
+        };
+
+        // Add field-specific properties
+        if (field.type === 'select' || field.type === 'lookup' || field.type === 'master_detail') {
+          formField.options = field.options || [];
+          formField.multiple = field.multiple;
+        }
+
+        if (field.type === 'number' || field.type === 'currency' || field.type === 'percent') {
+          formField.min = field.min;
+          formField.max = field.max;
+          formField.step = field.precision ? Math.pow(10, -field.precision) : undefined;
+        }
+
+        if (field.type === 'text' || field.type === 'textarea' || field.type === 'markdown' || field.type === 'html') {
+          formField.maxLength = field.max_length;
+          formField.minLength = field.min_length;
+        }
+
+        if (field.type === 'file' || field.type === 'image') {
+          formField.multiple = field.multiple;
+          formField.accept = field.accept ? field.accept.join(',') : undefined;
+          // Add validation hints for file size and dimensions
+          if (field.max_size) {
+            const sizeHint = `Max size: ${formatFileSize(field.max_size)}`;
+            formField.description = formField.description 
+              ? `${formField.description} (${sizeHint})` 
+              : sizeHint;
+          }
+        }
+
+        if (field.type === 'email') {
+          formField.inputType = 'email';
+        }
+
+        if (field.type === 'phone') {
+          formField.inputType = 'tel';
+        }
+
+        if (field.type === 'url') {
+          formField.inputType = 'url';
+        }
+
+        if (field.type === 'password') {
+          formField.inputType = 'password';
+        }
+
+        if (field.type === 'time') {
+          formField.inputType = 'time';
+        }
+
+        // Read-only fields for computed types
+        if (field.type === 'formula' || field.type === 'summary' || field.type === 'auto_number') {
+          formField.disabled = true;
+        }
+
+        // Add conditional visibility based on field dependencies
+        if (field.visible_on) {
+          formField.visible = (formData: any) => {
+            return evaluateCondition(field.visible_on, formData);
+          };
+        }
+
+        generatedFields.push(formField);
+      }
+    });
+
+    setFormFields(generatedFields);
+    setLoading(false);
+  }, [objectSchema, schema.fields, schema.customFields, schema.readOnly, schema.mode, hasInlineFields]);
+
+  // Handle form submission
+  const handleSubmit = useCallback(async (formData: any) => {
+    // For inline fields without a dataSource, just call the success callback
+    if (hasInlineFields && !dataSource) {
+      if (schema.onSuccess) {
+        await schema.onSuccess(formData);
+      }
+      return formData;
+    }
+
+    if (!dataSource) {
+      throw new Error('DataSource is required for form submission (inline mode not configured)');
+    }
+
+    try {
+      let result;
+      
+      if (schema.mode === 'create') {
+        result = await dataSource.create(schema.objectName, formData);
+      } else if (schema.mode === 'edit' && schema.recordId) {
+        result = await dataSource.update(schema.objectName, schema.recordId, formData);
+      } else {
+        throw new Error('Invalid form mode or missing record ID');
+      }
+
+      // Call success callback if provided
+      if (schema.onSuccess) {
+        await schema.onSuccess(result);
+      }
+
+      return result;
+    } catch (err) {
+      console.error('Failed to submit form:', err);
+      
+      // Call error callback if provided
+      if (schema.onError) {
+        schema.onError(err as Error);
+      }
+      
+      throw err;
+    }
+  }, [schema, dataSource, hasInlineFields]);
+
+  // Handle form cancellation
+  const handleCancel = useCallback(() => {
+    if (schema.onCancel) {
+      schema.onCancel();
+    }
+  }, [schema]);
+
+  // Render error state
+  if (error) {
+    return (
+      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
+        <h3 className="text-red-800 font-semibold">Error loading form</h3>
+        <p className="text-red-600 text-sm mt-1">{error.message}</p>
+      </div>
+    );
+  }
+
+  // Render loading state
+  if (loading) {
+    return (
+      <div className="p-8 text-center">
+        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+        <p className="mt-2 text-sm text-gray-600">Loading form...</p>
+      </div>
+    );
+  }
+
+  // Convert to FormSchema
+  // Note: FormSchema currently only supports 'vertical' and 'horizontal' layouts
+  // Map 'grid' and 'inline' to 'vertical' as fallback
+  const formSchema: FormSchema = {
+    type: 'form',
+    fields: formFields,
+    layout: (schema.layout === 'vertical' || schema.layout === 'horizontal') 
+      ? schema.layout 
+      : 'vertical',
+    columns: schema.columns,
+    submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
+    cancelLabel: schema.cancelText,
+    showSubmit: schema.showSubmit !== false && schema.mode !== 'view',
+    showCancel: schema.showCancel !== false,
+    resetOnSubmit: schema.showReset,
+    defaultValues: initialData,
+    onSubmit: handleSubmit,
+    onCancel: handleCancel,
+    className: schema.className,
+  };
+
+  return (
+    <div className="w-full">
+      <SchemaRenderer schema={formSchema} />
+    </div>
+  );
+};
+

package/src/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { ObjectForm } from './ObjectForm';
+
+export { ObjectForm };
+export type { ObjectFormProps } from './ObjectForm';
+
+// Register object-form component
+const ObjectFormRenderer: React.FC<{ schema: any }> = ({ schema }) => {
+  return <ObjectForm schema={schema} />;
+};
+
+ComponentRegistry.register('object-form', ObjectFormRenderer);
+ComponentRegistry.register('form', ObjectFormRenderer); // Alias

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginForm',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        '@object-ui/components',
+        '@object-ui/core',
+        '@object-ui/fields',
+        '@object-ui/react',
+        '@object-ui/types',
+        'lucide-react'
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});