@fieldia/react 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fieldia-dev
+
+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

@@ -1,3 +1,23 @@
-# Temporary Holding Version
+# @fieldia/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[Fieldia](https://fieldia.dev) forms in React 18 and 19: a thin shell over
+`@fieldia/viewer`, so a page looks and behaves the same as in any other framework.
+
+```sh
+npm install @fieldia/react
+```
+
+```tsx
+import { FieldiaForm } from '@fieldia/react';
+import { createMemoryDataSource } from '@fieldia/core';
+import page from './customer.page.json';
+
+const dataSource = createMemoryDataSource();
+
+export function Customer() {
+  return <FieldiaForm page={page} dataSource={dataSource} recordId={1} skin="underline" />;
+}
+```
+
+Custom fields and slot content can be React components (`fieldTypes`, `slots`);
+`useFormState(form)` gives you a form's state as React state. MIT licensed.

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@fieldia/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "React binding for Fieldia: <FieldiaForm> over the plain-DOM viewer, with custom fields and slots as React components.",
+  "license": "MIT",
+  "homepage": "https://fieldia.dev",
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "module": "./src/index.mjs",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./src/index.d.mts",
+        "require": "./src/index.d.ts"
+      },
+      "import": "./src/index.mjs",
+      "require": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@fieldia/core": "0.2.0",
+    "@fieldia/viewer": "0.2.0",
+    "@fieldia/widgets": "0.2.0",
+    "tslib": "^2.8.1"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fieldia-dev/fieldia",
+    "directory": "libs/react"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
 }

package/src/index.d.mts

@@ -0,0 +1,2 @@
+export { FieldiaForm, useFormState, type FieldiaFormProps, type FieldComponentProps, type SlotComponentProps } from './lib/fieldia-form.mjs';
+export type { Skin, ViewerHandle, ViewerLabels } from '@fieldia/viewer';

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldiaForm, useFormState, type FieldiaFormProps, type FieldComponentProps, type SlotComponentProps } from './lib/fieldia-form';
+export type { Skin, ViewerHandle, ViewerLabels } from '@fieldia/viewer';

package/src/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormState = exports.FieldiaForm = void 0;
+var fieldia_form_1 = require("./lib/fieldia-form");
+Object.defineProperty(exports, "FieldiaForm", { enumerable: true, get: function () { return fieldia_form_1.FieldiaForm; } });
+Object.defineProperty(exports, "useFormState", { enumerable: true, get: function () { return fieldia_form_1.useFormState; } });
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/react/src/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyI;AAAhI,2GAAA,WAAW,OAAA;AAAE,4GAAA,YAAY,OAAA"}

package/src/index.mjs

@@ -0,0 +1,2 @@
+export { FieldiaForm, useFormState } from './lib/fieldia-form.mjs';
+//# sourceMappingURL=index.mjs.map

package/src/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/react/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAA4E,MAAM,oBAAoB,CAAC"}

package/src/lib/fieldia-form.d.mts

@@ -0,0 +1,47 @@
+import type { Field, FieldNode, Form, FormState, Value } from '@fieldia/core';
+import { type ViewerHandle, type ViewerOptions } from '@fieldia/viewer';
+import type { WidgetState } from '@fieldia/widgets';
+import { type ComponentType, type CSSProperties } from 'react';
+/**
+ * `<FieldiaForm>` — the React shell.
+ *
+ * Deliberately thin, in the same sense as Quantia's React binding: every
+ * decision a form makes lives in `mountViewer` and `createForm`, which are
+ * framework-neutral and tested without React. This file owns four things:
+ *
+ *   1. a `<div>` React never renders into, handed to `mountViewer`,
+ *   2. props forwarded onto the handle without mounting again,
+ *   3. custom fields and slots written as React components, rendered into
+ *      the viewer's own elements through portals,
+ *   4. teardown.
+ *
+ * `mountViewer` runs only in an effect, so the component renders on a server.
+ */
+/** What a custom field component receives. Call `onChange` to write the value. */
+export interface FieldComponentProps extends Omit<WidgetState, 'value'> {
+    value: Value | undefined;
+    name: string;
+    field: Field;
+    node: FieldNode;
+    /** The id the field's label points at; put it on your input. */
+    id: string;
+    form: Form;
+    onChange(value: Value): void;
+}
+export interface SlotComponentProps {
+    form: Form;
+    name: string;
+}
+export interface FieldiaFormProps extends Omit<ViewerOptions, 'slots'> {
+    /** Custom fields as React components, by `type.widget` or `type`. */
+    fieldTypes?: Record<string, ComponentType<FieldComponentProps>>;
+    /** Slot content as React components, by slot name. */
+    slots?: Record<string, ComponentType<SlotComponentProps>>;
+    className?: string;
+    style?: CSSProperties;
+    /** Called once per mount with the viewer's handle. */
+    onReady?: (handle: ViewerHandle) => void;
+}
+/** A form's state as React state: the component re-renders on every change. */
+export declare function useFormState(form: Form): FormState;
+export declare const FieldiaForm: import("react").ForwardRefExoticComponent<FieldiaFormProps & import("react").RefAttributes<ViewerHandle | null>>;

package/src/lib/fieldia-form.d.ts

@@ -0,0 +1,47 @@
+import type { Field, FieldNode, Form, FormState, Value } from '@fieldia/core';
+import { type ViewerHandle, type ViewerOptions } from '@fieldia/viewer';
+import type { WidgetState } from '@fieldia/widgets';
+import { type ComponentType, type CSSProperties } from 'react';
+/**
+ * `<FieldiaForm>` — the React shell.
+ *
+ * Deliberately thin, in the same sense as Quantia's React binding: every
+ * decision a form makes lives in `mountViewer` and `createForm`, which are
+ * framework-neutral and tested without React. This file owns four things:
+ *
+ *   1. a `<div>` React never renders into, handed to `mountViewer`,
+ *   2. props forwarded onto the handle without mounting again,
+ *   3. custom fields and slots written as React components, rendered into
+ *      the viewer's own elements through portals,
+ *   4. teardown.
+ *
+ * `mountViewer` runs only in an effect, so the component renders on a server.
+ */
+/** What a custom field component receives. Call `onChange` to write the value. */
+export interface FieldComponentProps extends Omit<WidgetState, 'value'> {
+    value: Value | undefined;
+    name: string;
+    field: Field;
+    node: FieldNode;
+    /** The id the field's label points at; put it on your input. */
+    id: string;
+    form: Form;
+    onChange(value: Value): void;
+}
+export interface SlotComponentProps {
+    form: Form;
+    name: string;
+}
+export interface FieldiaFormProps extends Omit<ViewerOptions, 'slots'> {
+    /** Custom fields as React components, by `type.widget` or `type`. */
+    fieldTypes?: Record<string, ComponentType<FieldComponentProps>>;
+    /** Slot content as React components, by slot name. */
+    slots?: Record<string, ComponentType<SlotComponentProps>>;
+    className?: string;
+    style?: CSSProperties;
+    /** Called once per mount with the viewer's handle. */
+    onReady?: (handle: ViewerHandle) => void;
+}
+/** A form's state as React state: the component re-renders on every change. */
+export declare function useFormState(form: Form): FormState;
+export declare const FieldiaForm: import("react").ForwardRefExoticComponent<FieldiaFormProps & import("react").RefAttributes<ViewerHandle | null>>;

package/src/lib/fieldia-form.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldiaForm = void 0;
+exports.useFormState = useFormState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const viewer_1 = require("@fieldia/viewer");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+/** A form's state as React state: the component re-renders on every change. */
+function useFormState(form) {
+    return (0, react_1.useSyncExternalStore)(form.subscribe, form.getState, form.getState);
+}
+function store(initial) {
+    let state = initial;
+    const listeners = new Set();
+    return {
+        get: () => state,
+        set(next) {
+            state = next;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+function CustomField(props) {
+    const state = (0, react_1.useSyncExternalStore)(props.state.subscribe, props.state.get, props.state.get);
+    const Component = props.component();
+    const { context } = props;
+    if (!Component)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(Component, { ...state, name: context.name, field: context.field, node: context.node, id: context.id, form: context.form, onChange: (value) => context.form.setValue(context.name, value) }));
+}
+function SlotContent(props) {
+    const Component = props.component();
+    return Component ? (0, jsx_runtime_1.jsx)(Component, { form: props.form, name: props.name }) : null;
+}
+const EMPTY_STATE = { value: undefined, values: {}, readonly: false, required: false, invalid: false };
+exports.FieldiaForm = (0, react_1.forwardRef)(function FieldiaForm(props, ref) {
+    const host = (0, react_1.useRef)(null);
+    const latest = (0, react_1.useRef)(props);
+    latest.current = props;
+    const [handle, setHandle] = (0, react_1.useState)(null);
+    const [portals, setPortals] = (0, react_1.useState)([]);
+    (0, react_1.useImperativeHandle)(ref, () => handle, [handle]);
+    // Mount again only when the record or what the page is changes. Callbacks
+    // and components are read through `latest`, so a new function each render
+    // costs nothing.
+    const fieldKeys = Object.keys(props.fieldTypes ?? {}).join('|');
+    const slotKeys = Object.keys(props.slots ?? {}).join('|');
+    const labelsKey = JSON.stringify(props.labels ?? {});
+    (0, react_1.useEffect)(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const found = [];
+        const widgets = { ...latest.current.widgets };
+        for (const key of Object.keys(latest.current.fieldTypes ?? {})) {
+            widgets[key] = (context) => {
+                const box = context.document.createElement('div');
+                box.className = 'fd-custom';
+                const state = store(EMPTY_STATE);
+                found.push({
+                    key: `field:${context.node.id}`,
+                    element: box,
+                    node: (0, jsx_runtime_1.jsx)(CustomField, { state: state, context: context, component: () => latest.current.fieldTypes?.[key] }),
+                });
+                return {
+                    element: box,
+                    update: (next) => state.set(next),
+                    focus: () => box.querySelector('input, select, textarea, button, [tabindex]')?.focus(),
+                };
+            };
+        }
+        const slots = {};
+        for (const name of Object.keys(latest.current.slots ?? {})) {
+            slots[name] = (box, context) => {
+                found.push({
+                    key: `slot:${name}:${found.length}`,
+                    element: box,
+                    node: (0, jsx_runtime_1.jsx)(SlotContent, { name: name, form: context.form, component: () => latest.current.slots?.[name] }),
+                });
+            };
+        }
+        const { fieldTypes: _fields, slots: _slots, className: _class, style: _style, onReady: _ready, ...options } = latest.current;
+        const mounted = (0, viewer_1.mountViewer)(element, {
+            ...options,
+            widgets,
+            slots,
+            onAction: (request) => latest.current.onAction?.(request),
+        });
+        setHandle(mounted);
+        setPortals(found);
+        latest.current.onReady?.(mounted);
+        return () => {
+            mounted.destroy();
+            setHandle(null);
+            setPortals([]);
+        };
+    }, [props.page, props.form, props.dataSource, props.recordId, props.dir, labelsKey, fieldKeys, slotKeys]);
+    (0, react_1.useEffect)(() => {
+        handle?.setSkin(props.skin ?? 'underline');
+    }, [handle, props.skin]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: host, className: props.className, style: props.style }), portals.map((portal) => (0, react_dom_1.createPortal)(portal.node, portal.element, portal.key))] }));
+});
+//# sourceMappingURL=fieldia-form.js.map

package/src/lib/fieldia-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldia-form.js","sourceRoot":"","sources":["../../../../../libs/react/src/lib/fieldia-form.tsx"],"names":[],"mappings":"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"}

package/src/lib/fieldia-form.mjs

@@ -0,0 +1,105 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { mountViewer } from '@fieldia/viewer';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore, } from 'react';
+import { createPortal } from 'react-dom';
+/** A form's state as React state: the component re-renders on every change. */
+export function useFormState(form) {
+    return useSyncExternalStore(form.subscribe, form.getState, form.getState);
+}
+function store(initial) {
+    let state = initial;
+    const listeners = new Set();
+    return {
+        get: () => state,
+        set(next) {
+            state = next;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+function CustomField(props) {
+    const state = useSyncExternalStore(props.state.subscribe, props.state.get, props.state.get);
+    const Component = props.component();
+    const { context } = props;
+    if (!Component)
+        return null;
+    return (_jsx(Component, { ...state, name: context.name, field: context.field, node: context.node, id: context.id, form: context.form, onChange: (value) => context.form.setValue(context.name, value) }));
+}
+function SlotContent(props) {
+    const Component = props.component();
+    return Component ? _jsx(Component, { form: props.form, name: props.name }) : null;
+}
+const EMPTY_STATE = { value: undefined, values: {}, readonly: false, required: false, invalid: false };
+export const FieldiaForm = forwardRef(function FieldiaForm(props, ref) {
+    const host = useRef(null);
+    const latest = useRef(props);
+    latest.current = props;
+    const [handle, setHandle] = useState(null);
+    const [portals, setPortals] = useState([]);
+    useImperativeHandle(ref, () => handle, [handle]);
+    // Mount again only when the record or what the page is changes. Callbacks
+    // and components are read through `latest`, so a new function each render
+    // costs nothing.
+    const fieldKeys = Object.keys(props.fieldTypes ?? {}).join('|');
+    const slotKeys = Object.keys(props.slots ?? {}).join('|');
+    const labelsKey = JSON.stringify(props.labels ?? {});
+    useEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const found = [];
+        const widgets = { ...latest.current.widgets };
+        for (const key of Object.keys(latest.current.fieldTypes ?? {})) {
+            widgets[key] = (context) => {
+                const box = context.document.createElement('div');
+                box.className = 'fd-custom';
+                const state = store(EMPTY_STATE);
+                found.push({
+                    key: `field:${context.node.id}`,
+                    element: box,
+                    node: _jsx(CustomField, { state: state, context: context, component: () => latest.current.fieldTypes?.[key] }),
+                });
+                return {
+                    element: box,
+                    update: (next) => state.set(next),
+                    focus: () => box.querySelector('input, select, textarea, button, [tabindex]')?.focus(),
+                };
+            };
+        }
+        const slots = {};
+        for (const name of Object.keys(latest.current.slots ?? {})) {
+            slots[name] = (box, context) => {
+                found.push({
+                    key: `slot:${name}:${found.length}`,
+                    element: box,
+                    node: _jsx(SlotContent, { name: name, form: context.form, component: () => latest.current.slots?.[name] }),
+                });
+            };
+        }
+        const { fieldTypes: _fields, slots: _slots, className: _class, style: _style, onReady: _ready, ...options } = latest.current;
+        const mounted = mountViewer(element, {
+            ...options,
+            widgets,
+            slots,
+            onAction: (request) => latest.current.onAction?.(request),
+        });
+        setHandle(mounted);
+        setPortals(found);
+        latest.current.onReady?.(mounted);
+        return () => {
+            mounted.destroy();
+            setHandle(null);
+            setPortals([]);
+        };
+    }, [props.page, props.form, props.dataSource, props.recordId, props.dir, labelsKey, fieldKeys, slotKeys]);
+    useEffect(() => {
+        handle?.setSkin(props.skin ?? 'underline');
+    }, [handle, props.skin]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: host, className: props.className, style: props.style }), portals.map((portal) => createPortal(portal.node, portal.element, portal.key))] }));
+});
+//# sourceMappingURL=fieldia-form.mjs.map

package/src/lib/fieldia-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldia-form.mjs","sourceRoot":"","sources":["../../../../../libs/react/src/lib/fieldia-form.tsx"],"names":[],"mappings":"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"}