@reformer/ui 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alexandr Bukhtatyy
+
+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,100 @@
+# @reformer/ui
+
+Headless UI components for `@reformer/core` - build accessible, fully customizable form interfaces.
+
+## Features
+
+- **Headless** - No default styles, complete design freedom
+- **Compound Components** - Declarative, composable API
+- **Render Props** - Full control over rendering
+- **TypeScript** - Fully typed with generics support
+- **Tree-shakable** - Import only what you need
+
+## Installation
+
+```bash
+npm install @reformer/ui @reformer/core
+```
+
+## Components
+
+### FormArray
+
+Manage dynamic form arrays with add/remove functionality.
+
+```tsx
+import { FormArray } from '@reformer/ui/form-array';
+
+<FormArray.Root control={form.items}>
+  <FormArray.Empty>
+    <p>No items yet</p>
+  </FormArray.Empty>
+
+  <FormArray.List>
+    {({ control, index, remove }) => (
+      <div>
+        <span>Item #{index + 1}</span>
+        <ItemForm control={control} />
+        <button onClick={remove}>Remove</button>
+      </div>
+    )}
+  </FormArray.List>
+
+  <FormArray.AddButton>Add Item</FormArray.AddButton>
+</FormArray.Root>
+```
+
+### FormNavigation
+
+Build multi-step form wizards with validation.
+
+```tsx
+import { FormNavigation } from '@reformer/ui/form-navigation';
+
+<FormNavigation form={form} config={config}>
+  <FormNavigation.Indicator steps={STEPS}>
+    {({ steps, goToStep }) => (
+      <nav>
+        {steps.map(step => (
+          <button
+            key={step.number}
+            onClick={() => goToStep(step.number)}
+            disabled={!step.canNavigate}
+          >
+            {step.title}
+          </button>
+        ))}
+      </nav>
+    )}
+  </FormNavigation.Indicator>
+
+  <FormNavigation.Step component={Step1} control={form} />
+  <FormNavigation.Step component={Step2} control={form} />
+
+  <FormNavigation.Actions onSubmit={handleSubmit}>
+    {({ prev, next, submit, isFirstStep, isLastStep }) => (
+      <div>
+        {!isFirstStep && <button {...prev}>Back</button>}
+        {!isLastStep ? (
+          <button {...next}>Next</button>
+        ) : (
+          <button {...submit}>Submit</button>
+        )}
+      </div>
+    )}
+  </FormNavigation.Actions>
+</FormNavigation>
+```
+
+## Hooks
+
+For full customization, use the hooks directly:
+
+```tsx
+import { useFormArray } from '@reformer/ui/form-array';
+import { useFormNavigation } from '@reformer/ui/form-navigation';
+```
+
+## License
+
+MIT

package/dist/FormArray-K2YVvq1u.js

@@ -0,0 +1,101 @@
+import { jsx as o, Fragment as m } from "react/jsx-runtime";
+import { useMemo as p, createContext as c, useContext as d, createElement as h, forwardRef as l, useImperativeHandle as v } from "react";
+import { useFormControl as x } from "@reformer/core";
+function C(t) {
+  const { length: r } = x(t);
+  return {
+    items: p(
+      () => t.map((e, n) => ({
+        control: e,
+        index: n,
+        id: e.id ?? n,
+        remove: () => t.removeAt(n)
+      })),
+      [t, r]
+    ),
+    length: r,
+    isEmpty: r === 0,
+    add: (e) => t.push(e),
+    clear: () => t.clear(),
+    insert: (e, n) => t.insert(e, n)
+  };
+}
+const y = c(null), A = c(null);
+function u() {
+  const t = d(y);
+  if (!t)
+    throw new Error("FormArray.* components must be used within FormArray.Root");
+  return t;
+}
+function f() {
+  const t = d(A);
+  if (!t)
+    throw new Error("FormArray.Item* components must be used within FormArray.List");
+  return t;
+}
+function E({
+  children: t,
+  className: r,
+  as: s = "div"
+}) {
+  const { items: e } = u(), n = e.map((i) => /* @__PURE__ */ o(A.Provider, { value: i, children: t(i) }, i.id));
+  return r ? h(s, { className: r }, n) : /* @__PURE__ */ o(m, { children: n });
+}
+function I({ children: t, initialValue: r, ...s }) {
+  const { add: e } = u();
+  return /* @__PURE__ */ o("button", { type: "button", onClick: () => e(r), ...s, children: t });
+}
+function b({ children: t, ...r }) {
+  const { remove: s } = f();
+  return /* @__PURE__ */ o("button", { type: "button", onClick: s, ...r, children: t });
+}
+function w({ children: t }) {
+  const { isEmpty: r } = u();
+  return r ? /* @__PURE__ */ o(m, { children: t }) : null;
+}
+function R({ render: t }) {
+  const { length: r } = u();
+  return t ? /* @__PURE__ */ o(m, { children: t(r) }) : /* @__PURE__ */ o(m, { children: r });
+}
+function g({ render: t }) {
+  const { index: r } = f();
+  return t ? /* @__PURE__ */ o(m, { children: t(r) }) : /* @__PURE__ */ o(m, { children: r + 1 });
+}
+function B({ control: t, children: r }, s) {
+  const e = C(t);
+  return v(
+    s,
+    () => ({
+      add: e.add,
+      clear: e.clear,
+      insert: e.insert,
+      removeAt: (n) => t.removeAt(n),
+      length: e.length,
+      isEmpty: e.isEmpty,
+      at: (n) => t.at(n)
+    }),
+    [e, t]
+  ), /* @__PURE__ */ o(y.Provider, { value: { ...e, control: t }, children: r });
+}
+const F = l(B), a = F;
+a.Root = F;
+a.List = E;
+a.AddButton = I;
+a.RemoveButton = b;
+a.Empty = w;
+a.Count = R;
+a.ItemIndex = g;
+export {
+  a as F,
+  E as a,
+  I as b,
+  b as c,
+  w as d,
+  R as e,
+  g as f,
+  y as g,
+  A as h,
+  u as i,
+  f as j,
+  C as u
+};

package/dist/FormNavigation-3rg4tJyl.js

@@ -0,0 +1,227 @@
+import { jsx as f, Fragment as C } from "react/jsx-runtime";
+import { createContext as $, useContext as z, forwardRef as J, useState as V, useCallback as m, useImperativeHandle as K, useMemo as O, Children as L, isValidElement as U, cloneElement as W } from "react";
+import { validateForm as Y } from "@reformer/core/validators";
+const G = $(null);
+function P() {
+  const e = z(G);
+  if (!e)
+    throw new Error("useFormNavigation must be used within FormNavigation");
+  return e;
+}
+function x({
+  component: e,
+  control: i,
+  _stepIndex: a,
+  ...s
+}) {
+  const { currentStep: o } = P();
+  return a === void 0 || o !== a ? null : /* @__PURE__ */ f(e, { control: i, ...s });
+}
+x.displayName = "FormNavigation.Step";
+function M({ steps: e, children: i }) {
+  if (typeof i != "function")
+    throw new Error(
+      "FormNavigation.Indicator requires children as a render function. Example: <FormNavigation.Indicator steps={STEPS}>{({ steps }) => <YourUI />}</FormNavigation.Indicator>"
+    );
+  const { currentStep: a, totalSteps: s, completedSteps: o, goToStep: u } = P(), c = {
+    steps: e.map((t) => ({
+      ...t,
+      isCurrent: a === t.number,
+      isCompleted: o.includes(t.number),
+      canNavigate: t.number === 1 || o.includes(t.number - 1)
+    })),
+    goToStep: u,
+    currentStep: a,
+    totalSteps: s,
+    completedSteps: o
+  };
+  return /* @__PURE__ */ f(C, { children: i(c) });
+}
+M.displayName = "FormNavigation.Indicator";
+function j({ onSubmit: e, children: i }) {
+  if (typeof i != "function")
+    throw new Error(
+      "FormNavigation.Actions requires children as a render function. Example: <FormNavigation.Actions>{({ prev, next }) => <YourUI />}</FormNavigation.Actions>"
+    );
+  const { isFirstStep: a, isLastStep: s, isValidating: o, isSubmitting: u, goToNextStep: p, goToPreviousStep: c } = P(), t = o || u;
+  return /* @__PURE__ */ f(C, { children: i({
+    prev: {
+      onClick: c,
+      disabled: t
+    },
+    next: {
+      onClick: () => p(),
+      disabled: t
+    },
+    submit: {
+      onClick: () => e?.(),
+      disabled: t,
+      isSubmitting: u
+    },
+    isFirstStep: a,
+    isLastStep: s,
+    isValidating: o,
+    isSubmitting: u
+  }) });
+}
+j.displayName = "FormNavigation.Actions";
+function B({ children: e }) {
+  if (typeof e != "function")
+    throw new Error(
+      "FormNavigation.Progress requires children as a render function. Example: <FormNavigation.Progress>{({ current, total }) => <YourUI />}</FormNavigation.Progress>"
+    );
+  const { currentStep: i, totalSteps: a, completedSteps: s, isFirstStep: o, isLastStep: u } = P(), p = {
+    current: i,
+    total: a,
+    percent: Math.round(i / a * 100),
+    completedCount: s.length,
+    isFirstStep: o,
+    isLastStep: u
+  };
+  return /* @__PURE__ */ f(C, { children: e(p) });
+}
+B.displayName = "FormNavigation.Progress";
+function Q({ form: e, config: i, children: a, onStepChange: s, scrollToTop: o = !0 }, u) {
+  const p = (n) => {
+    let r = 0;
+    return L.forEach(n, (l) => {
+      if (U(l))
+        if (l.type === x)
+          r += 1;
+        else {
+          const q = l.props;
+          q.children && (r += p(q.children));
+        }
+    }), r;
+  }, c = p(a), [t, v] = V(1), [d, D] = V([]), [g, S] = V(!1), E = e.submitting.value, N = m(async () => {
+    const n = i.stepValidations[t];
+    if (!n)
+      return console.warn(`No validation schema for step ${t}`), !0;
+    S(!0);
+    try {
+      return await Y(e, n);
+    } finally {
+      S(!1);
+    }
+  }, [e, t, i.stepValidations]), F = m(async () => {
+    if (!await N())
+      return e.markAsTouched(), !1;
+    if (d.includes(t) || D((r) => [...r, t]), t < c) {
+      const r = t + 1;
+      v(r), s?.(r), o && window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+    return !0;
+  }, [
+    N,
+    t,
+    d,
+    c,
+    e,
+    s,
+    o
+  ]), h = m(() => {
+    if (t > 1) {
+      const n = t - 1;
+      v(n), s?.(n), o && window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, [t, s, o]), b = m(
+    (n) => (n === 1 || d.includes(n - 1)) && n >= 1 && n <= c ? (v(n), s?.(n), o && window.scrollTo({ top: 0, behavior: "smooth" }), !0) : !1,
+    [d, c, s, o]
+  ), A = m(
+    async (n) => {
+      S(!0);
+      try {
+        return await Y(e, i.fullValidation) ? e.submit(n) : (e.markAsTouched(), null);
+      } finally {
+        S(!1);
+      }
+    },
+    [e, i.fullValidation]
+  ), w = t === 1, y = t === c;
+  K(
+    u,
+    () => ({
+      currentStep: t,
+      completedSteps: d,
+      validateCurrentStep: N,
+      goToNextStep: F,
+      goToPreviousStep: h,
+      goToStep: b,
+      submit: A,
+      isFirstStep: w,
+      isLastStep: y,
+      isValidating: g
+    }),
+    [
+      t,
+      d,
+      N,
+      F,
+      h,
+      b,
+      A,
+      w,
+      y,
+      g
+    ]
+  );
+  const H = O(
+    () => ({
+      // State
+      currentStep: t,
+      totalSteps: c,
+      completedSteps: d,
+      isFirstStep: w,
+      isLastStep: y,
+      isValidating: g,
+      isSubmitting: E,
+      form: e,
+      // Navigation methods
+      goToNextStep: F,
+      goToPreviousStep: h,
+      goToStep: b
+    }),
+    [
+      t,
+      c,
+      d,
+      w,
+      y,
+      g,
+      E,
+      e,
+      F,
+      h,
+      b
+    ]
+  );
+  let k = 0;
+  const T = (n) => L.map(n, (r) => {
+    if (!U(r))
+      return r;
+    const l = r.props;
+    return r.type === x ? (k += 1, W(r, {
+      ...l,
+      _stepIndex: k
+      // 1-based indexing
+    })) : typeof l.children == "function" ? r : l.children ? W(r, {
+      ...l,
+      children: T(l.children)
+    }) : r;
+  }), R = T(a);
+  return /* @__PURE__ */ f(G.Provider, { value: H, children: R });
+}
+const X = J(Q), I = X;
+I.Step = x;
+I.Indicator = M;
+I.Actions = j;
+I.Progress = B;
+export {
+  I as F,
+  x as a,
+  M as b,
+  j as c,
+  B as d,
+  G as e,
+  P as u
+};

package/dist/form-array/FormArray.d.ts

@@ -0,0 +1,170 @@
+import type { FormFields, GroupNodeWithControls } from '@reformer/core';
+import { FormArrayList } from './FormArrayList';
+import { FormArrayAddButton } from './FormArrayAddButton';
+import { FormArrayRemoveButton } from './FormArrayRemoveButton';
+import { FormArrayEmpty } from './FormArrayEmpty';
+import { FormArrayCount } from './FormArrayCount';
+import { FormArrayItemIndex } from './FormArrayItemIndex';
+import type { FormArrayRootProps } from './types';
+/**
+ * Handle exposed via ref for external control of FormArray
+ */
+export interface FormArrayHandle<T extends FormFields> {
+    /** Add a new item to the end of the array */
+    add: (value?: Partial<T>) => void;
+    /** Remove all items from the array */
+    clear: () => void;
+    /** Insert a new item at a specific index */
+    insert: (index: number, value?: Partial<T>) => void;
+    /** Remove item at specific index */
+    removeAt: (index: number) => void;
+    /** Current number of items */
+    length: number;
+    /** Whether the array is empty */
+    isEmpty: boolean;
+    /** Get item control at specific index */
+    at: (index: number) => GroupNodeWithControls<T> | undefined;
+}
+declare const FormArrayRoot: <T extends FormFields>(props: FormArrayRootProps<T> & {
+    ref?: React.ForwardedRef<FormArrayHandle<T>>;
+}) => React.ReactElement;
+type FormArrayComponent = typeof FormArrayRoot & {
+    Root: typeof FormArrayRoot;
+    List: typeof FormArrayList;
+    AddButton: typeof FormArrayAddButton;
+    RemoveButton: typeof FormArrayRemoveButton;
+    Empty: typeof FormArrayEmpty;
+    Count: typeof FormArrayCount;
+    ItemIndex: typeof FormArrayItemIndex;
+};
+/**
+ * FormArray - Headless compound component for managing form arrays
+ *
+ * Provides complete flexibility for building array UI while handling
+ * all the form array state and actions internally.
+ *
+ * ## Features
+ * - **Headless** - complete freedom in building UI
+ * - **Compound Components** - declarative API via nested components
+ * - **External Control** - control from outside via ref (useImperativeHandle)
+ * - **Type Safe** - full TypeScript support
+ *
+ * ## Sub-components
+ * - `FormArray.Root` - context provider, accepts ref for external control
+ * - `FormArray.List` - iterates over array items
+ * - `FormArray.AddButton` - button to add item
+ * - `FormArray.RemoveButton` - button to remove item (inside List)
+ * - `FormArray.Empty` - content for empty state
+ * - `FormArray.Count` - display item count
+ * - `FormArray.ItemIndex` - display item index (inside List)
+ *
+ * ## FormArrayHandle API (ref)
+ * - `add(value?)` - add item to the end
+ * - `insert(index, value?)` - insert item at position
+ * - `removeAt(index)` - remove item by index
+ * - `clear()` - clear array
+ * - `at(index)` - get item control by index
+ * - `length` - current item count
+ * - `isEmpty` - empty array flag
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FormArray.Root control={form.properties}>
+ *   <h3>Properties (<FormArray.Count />)</h3>
+ *
+ *   <FormArray.Empty>
+ *     <p className="text-gray-500">No properties added</p>
+ *   </FormArray.Empty>
+ *
+ *   <FormArray.List className="space-y-4">
+ *     {({ control }) => (
+ *       <div className="p-4 border rounded">
+ *         <div className="flex justify-between mb-2">
+ *           <h4>Property #<FormArray.ItemIndex /></h4>
+ *           <FormArray.RemoveButton className="text-red-500">
+ *             Remove
+ *           </FormArray.RemoveButton>
+ *         </div>
+ *         <PropertyForm control={control} />
+ *       </div>
+ *     )}
+ *   </FormArray.List>
+ *
+ *   <FormArray.AddButton className="mt-4 btn-primary">
+ *     + Add Property
+ *   </FormArray.AddButton>
+ * </FormArray.Root>
+ * ```
+ *
+ * @example External control via ref
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { FormArray, FormArrayHandle } from '@reformer/ui/form-array';
+ *
+ * function PropertiesManager() {
+ *   const arrayRef = useRef<FormArrayHandle<Property>>(null);
+ *
+ *   // Programmatic control from outside
+ *   const handleAddApartment = () => {
+ *     arrayRef.current?.add({ type: 'apartment', estimatedValue: 0 });
+ *   };
+ *
+ *   const handleClearAll = () => {
+ *     if (confirm('Delete all items?')) {
+ *       arrayRef.current?.clear();
+ *     }
+ *   };
+ *
+ *   const handleRemoveFirst = () => {
+ *     if (arrayRef.current && arrayRef.current.length > 0) {
+ *       arrayRef.current.removeAt(0);
+ *     }
+ *   };
+ *
+ *   const handleInsertAtStart = () => {
+ *     arrayRef.current?.insert(0, { type: 'house' });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <div className="toolbar">
+ *         <button onClick={handleAddApartment}>+ Apartment</button>
+ *         <button onClick={handleInsertAtStart}>Insert at start</button>
+ *         <button onClick={handleRemoveFirst}>Remove first</button>
+ *         <button onClick={handleClearAll}>Clear all</button>
+ *       </div>
+ *
+ *       <FormArray.Root ref={arrayRef} control={form.properties}>
+ *         <FormArray.List>
+ *           {({ control }) => <PropertyForm control={control} />}
+ *         </FormArray.List>
+ *       </FormArray.Root>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Using useFormArray hook for full customization
+ * ```tsx
+ * import { useFormArray } from '@reformer/ui/form-array';
+ *
+ * function CustomArrayUI() {
+ *   const { items, add, isEmpty, length } = useFormArray(form.properties);
+ *
+ *   return (
+ *     <div>
+ *       <span>Total: {length}</span>
+ *       {items.map(({ control, id, remove }) => (
+ *         <CustomCard key={id} onDelete={remove}>
+ *           <PropertyForm control={control} />
+ *         </CustomCard>
+ *       ))}
+ *       {isEmpty && <EmptyState />}
+ *       <button onClick={() => add()}>Add</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const FormArray: FormArrayComponent;
+export {};

package/dist/form-array/FormArrayAddButton.d.ts

@@ -0,0 +1,19 @@
+import type { FormArrayAddButtonProps } from './types';
+/**
+ * FormArray.AddButton - Button to add new items to the array
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FormArray.AddButton className="btn-primary">
+ *   + Add Item
+ * </FormArray.AddButton>
+ * ```
+ *
+ * @example With initial value
+ * ```tsx
+ * <FormArray.AddButton initialValue={{ status: 'draft' }}>
+ *   Add Draft
+ * </FormArray.AddButton>
+ * ```
+ */
+export declare function FormArrayAddButton({ children, initialValue, ...props }: FormArrayAddButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/form-array/FormArrayContext.d.ts

@@ -0,0 +1,46 @@
+import type { FormFields, ArrayNode } from '@reformer/core';
+import type { FormArrayItem } from './useFormArray';
+/**
+ * Context value for FormArray compound component
+ */
+export interface FormArrayContextValue<T extends FormFields = FormFields> {
+    /** Array of items with their controls and actions */
+    items: FormArrayItem<T>[];
+    /** Current number of items */
+    length: number;
+    /** Whether the array is empty */
+    isEmpty: boolean;
+    /** Add a new item to the array */
+    add: (value?: Partial<T>) => void;
+    /** Remove all items */
+    clear: () => void;
+    /** Insert item at specific index */
+    insert: (index: number, value?: Partial<T>) => void;
+    /** The original ArrayNode control */
+    control: ArrayNode<T>;
+}
+/**
+ * Context value for individual array items
+ */
+export interface FormArrayItemContextValue<T extends FormFields = FormFields> {
+    /** The form control for this item */
+    control: FormArrayItem<T>['control'];
+    /** Zero-based index of the item */
+    index: number;
+    /** Unique identifier for React key */
+    id: string | number;
+    /** Remove this item from the array */
+    remove: () => void;
+}
+export declare const FormArrayContext: import("react").Context<FormArrayContextValue<any> | null>;
+export declare const FormArrayItemContext: import("react").Context<FormArrayItemContextValue<any> | null>;
+/**
+ * Hook to access FormArray context
+ * @throws Error if used outside of FormArray.Root
+ */
+export declare function useFormArrayContext<T extends FormFields = FormFields>(): FormArrayContextValue<T>;
+/**
+ * Hook to access current item context within FormArray.List
+ * @throws Error if used outside of FormArray.List
+ */
+export declare function useFormArrayItemContext<T extends FormFields = FormFields>(): FormArrayItemContextValue<T>;

package/dist/form-array/FormArrayCount.d.ts

@@ -0,0 +1,17 @@
+import type { FormArrayCountProps } from './types';
+/**
+ * FormArray.Count - Displays the number of items in the array
+ *
+ * @example Basic usage
+ * ```tsx
+ * <h3>Items (<FormArray.Count />)</h3>
+ * ```
+ *
+ * @example With custom render
+ * ```tsx
+ * <FormArray.Count render={(count) => (
+ *   count === 0 ? 'No items' : `${count} item${count > 1 ? 's' : ''}`
+ * )} />
+ * ```
+ */
+export declare function FormArrayCount({ render }: FormArrayCountProps): import("react/jsx-runtime").JSX.Element;