@homebound/form-state 2.33.0 → 3.1.0

package/README.md

@@ -138,12 +138,12 @@ For submit forms, the expectation is that you should:
 If you do this, you should not have to call `commitChanges` manually, because code like:
 
 ```ts
-  onClick: async () => {
-    const input = formState.changedValue;
-    await saveAuthor(input);
-    // checks if formState.dirty is true before closing
-    closeModal();
-  };
+onClick: async () => {
+  const input = formState.changedValue;
+  await saveAuthor(input);
+  // checks if formState.dirty is true before closing
+  closeModal();
+};
 ```
 
 Will "just work" because the control flow will be:

package/dist/index.d.ts

@@ -1,9 +1,450 @@
-export { f } from "./configBuilders";
-export { type FragmentField } from "./fields/fragmentField";
-export { type ListFieldState } from "./fields/listField";
-export { createObjectState, type Fragment, type ObjectState, fragment } from "./fields/objectField";
-export { type FieldState, type ValueAdapter } from "./fields/valueField";
-export { required, type Rule } from "./rules";
-export { type FormObjectState, useFormState } from "./useFormState";
-export { useFormStates } from "./useFormStates";
-export { type ObjectConfig } from "./config";
+import { Temporal } from "temporal-polyfill";
+//#region src/fields/fragmentField.d.ts
+interface FragmentField<V> {
+  value: V;
+}
+//#endregion
+//#region src/rules.d.ts
+/** A validation rule, given the value and name, return the error string if valid, or undefined if valid. */
+type Rule<V> = (opts: {
+  value: V;
+  key: string;
+  originalValue: V;
+}) => string | undefined;
+/** A rule that validates `value` is not `undefined`, `null`, or empty string. */
+export declare const required: <V>({ value: v }: {
+  value: V;
+}) => string | undefined;
+//#endregion
+//#region src/fields/valueField.d.ts
+/**
+ * Form state for a primitive field in the form, i.e. its value but also touched/validation/etc. state.
+ *
+ * This API also provides hooks for form elements to call into, i.e. `blur()` and `set(...)` that will
+ * update the field state and re-render, i.e. when including in an `ObjectState`-typed literal that is
+ * an mobx `useLocalObservable`/observable.
+ *
+ * Note that `V` will always have `null | undefined` added to it by `FieldStates`, b/c most form fields
+ * i.e. text boxes, can always be cleared out/deleted.
+ */
+interface FieldState<V> {
+  /** The key in the parent object, i.e. `firstName` in `author: { firstName: string }`. */
+  readonly key: string;
+  /** The current value of the field. */
+  value: V;
+  readonly originalValue: V;
+  touched: boolean;
+  readOnly: boolean;
+  loading: boolean;
+  readonly required: boolean;
+  readonly dirty: boolean;
+  readonly valid: boolean;
+  readonly focused: boolean;
+  readonly isNewEntity: boolean;
+  rules: Rule<V>[];
+  readonly errors: string[];
+  /**
+   * Returns a subset of V with only the changed values.
+   *
+   * Reading this also records that the value is probably being put on the wire, so that a later
+   * `refreshing` set can tell a server ack of this value apart from a stale cache refresh.
+   */
+  readonly changedValue: V;
+  /** Focuses the field. Disables changes from `ObjectState.set` calls. */
+  focus(): void;
+  /** Blur marks the field as touched and triggers an auto-save. */
+  blur(): void;
+  /** Triggers an auto-save; the caller (i.e. useFormState) should still dirty & valid check. */
+  maybeAutoSave(): void;
+  set(value: V, opts?: SetOpts): void;
+  /** Reverts back to the original value and resets dirty/touched. */
+  revertChanges(): void;
+  /**
+   * Accepts the current changed value (if any) as the original and resets dirty/touched.
+   *
+   * @deprecated Use `formState.update(ackedServerValue)` instead. `commitChanges` marks all current
+   * changes as saved, which risks discarding a user's in-flight edits. Updating from the server ack gives
+   * form-state a field-by-field audit of which changes were successfully saved.
+   */
+  commitChanges(): void;
+  /** Creates a new FieldState with a transformation of the value, i.e. string to int, or feet to inches. */
+  adapt<V2>(adapter: ValueAdapter<V, V2>): FieldState<V2>;
+  /**
+   * Releases any mobx reactions this field created.
+   *
+   * This only matters when wrapping a mobx observable (i.e. a store or class instance): each field
+   * subscribes to its slot on the store so that external mutations can trigger auto-save, and that
+   * subscription keeps the field alive until it is disposed. Plain objects create no reactions.
+   */
+  dispose(): void;
+}
+/**
+ * Allows changing a type in the formState (like a string) to a different type in the UI (like a number).
+ *
+ * Or doing unit of measure conversions within the same type, like from meters to feet.
+ */
+interface ValueAdapter<V, V2 = V> {
+  /** Converts the original FieldState's value `V` into new `V2` type. */
+  toValue(value: V): V2;
+  /** Converts the adapted FieldState's value `V2` back into the original `V` type. */
+  fromValue(value: V2): V;
+}
+/** Public options for our `set` command. */
+interface SetOpts {
+  /** Whether this `set` should trigger an auto-save; defaults to true. */
+  autoSave?: boolean;
+}
+//#endregion
+//#region src/fields/listField.d.ts
+/** Form state for list of children, i.e. `U` is a `Book` in a form with a `books: Book[]`. */
+interface ListFieldState<U> extends FieldState<U[]> {
+  readonly rows: ReadonlyArray<ObjectState<U>>;
+  add(value: U, index?: number): void;
+  remove(indexOrValue: number | U): void;
+}
+//#endregion
+//#region src/temporal.d.ts
+type SupportedTemporal = Temporal.PlainDate | Temporal.ZonedDateTime;
+//#endregion
+//#region src/useFormState.d.ts
+type Query<I> = {
+  data: I;
+  loading: boolean;
+  error?: any;
+};
+type InputAndMap<T, I> = {
+  input: I;
+  map?: (input: Exclude<I, null | undefined>) => T;
+  ifUndefined?: T;
+  onlyOnce?: boolean;
+};
+type QueryAndMap<T, I> = {
+  query: Query<I>;
+  map: (input: Exclude<I, null | undefined>) => T;
+  ifUndefined?: T;
+};
+/**
+ * The opts has for `useFormState`.
+ *
+ * @typeparam T the form type, which is usually as close as possible to your *GraphQL input*
+ * @typeparam I the *form input* type, which is usually the *GraphQL output* type, i.e. the type of the response from your GraphQL query
+ */
+type UseFormStateOpts<T, I> = {
+  /** The form configuration, should be a module-level const or useMemo'd. */
+  config: ObjectConfig<T>;
+  /**
+   * Provides the form's initial value.
+   *
+   * User's can either:
+   *
+   * - Provide no initial value (don't set `init` at all)
+   * - Provide an initial value that already matches the form type `T` (i.e. set `init: data`)
+   * - Provide an initial value from an object that _almost_ matches the form type `T`,
+   *   but needs to be mapped from it's input type `I` to the form type
+   *   (i.e. set `init: { input: data, map: (data) => ...}`).
+   *
+   * The value of using the 3rd option is that: a) we internally `useMemo` on the identity of the
+   * `init.input` (i.e. a response from an Apollo hook) and don't require the `map` function
+   * to have a stable identity, and also b) we will null-check/undefined-check `init.input` and
+   * only call `init.map` if it's set, otherwise we'll use `init.ifDefined` or `{}`, saving you
+   * from having to null check within your `init.map` function.
+   */
+  init?: InputAndMap<T, I> | QueryAndMap<T, I>;
+  /**
+   * A hook to add custom, cross-field validation rules that can be difficult to setup directly in the config DSL.
+   *
+   * Does not need to be stable/useMemo'd.
+   */
+  addRules?: (state: ObjectState<T>) => void;
+  /** Whether the form should be read only, when changed it won't re-create the whole form. */
+  readOnly?: boolean;
+  /**
+   * Whether the form is loading.
+   *
+   * Note that we also will infer loading from `init.input === undefined` or `init.query.loading`,
+   * so you only need to set this directly if you're not using either of those conventions.
+   */
+  loading?: boolean;
+  /**
+   * Fired when the form should auto-save, i.e. after a) blur and b) all fields are valid.
+   *
+   * Does not need to be stable/useMemo'd.
+   */
+  autoSave?: (state: ObjectState<T>) => Promise<unknown>;
+};
+type FormObjectState<T, I> = ObjectState<T> & {
+  /**
+   * Refreshes the form with a server-acked value, i.e. `form.update(savedAuthor)`.
+   *
+   * This is intended for save callbacks that need `form.dirty` to become `false` immediately, before the
+   * normal query/cache refresh has a chance to rerender `useFormState`. Pass the value returned by the
+   * server so the form can map it through `init.map` and then do a field-by-field refresh of only the
+   * changes the server has acknowledged.
+   */
+  update(input: Exclude<I, null | undefined>): void;
+};
+/**
+ * Creates a formState instance for editing in a form.
+ */
+export declare function useFormState<T, I>(opts: UseFormStateOpts<T, I>): FormObjectState<T, I>;
+//#endregion
+//#region src/utils.d.ts
+type Builtin = Date | Function | SupportedTemporal | Uint8Array | string | number | boolean;
+type OmitIf<Base, Condition> = Pick<Base, { [Key in keyof Base]: Base[Key] extends Condition ? never : Key; }[keyof Base]>;
+//#endregion
+//#region src/fields/objectField.d.ts
+/**
+ * Wraps a given input/on-the-wire type `T` for editing in a form.
+ *
+ * We basically mimic every field in `T` (i.e. `firstName`, `lastName`, etc.) but decorate them
+ * with form-specific state like `touched`, `dirty`, `errors`, etc.
+ *
+ * The intent is that, after ensuring all fields are `valid`/etc., callers can take the
+ * result of this `objectState.value` (or `objectState.originalValue` for the non-proxy version) and
+ * have exactly the on-the-wire type `T` that they need to submit to the backend, without doing the
+ * manual mapping of "data that was in the form controls" into "data that the backend wants".
+ *
+ * Note that this can be hierarchical by having a field of `ListFieldState` that
+ * themselves each wrap an `ObjectState`, i.e.:
+ *
+ * ```
+ * ObjectState for author
+ *   - firstName: FieldState
+ *   - lastName: FieldState
+ *   - rows: ListFieldState
+ *     - [0]: ObjectState for book 1
+ *       - title: FieldState
+ *     - [1]: ObjectState for book 2
+ *       - title: FieldState
+ * ```
+ */
+type ObjectState<T> = FieldStates<T> & FieldState<T> & {
+  /** Sets the state of fields in `state`. */
+  set(state: Partial<T>, opts?: SetOpts): void;
+  /** Returns whether the object can be saved, i.e. is valid, but also as a side-effect marks touched. */
+  canSave(): boolean;
+};
+declare const fragmentSym: unique symbol;
+type Fragment<V> = V & {
+  [fragmentSym]: true;
+};
+export declare function fragment<V>(value: V): Fragment<V>;
+/** For a given input type `T`, decorate each field into the "field state" type that holds our form-relevant state, i.e. valid/touched/etc. */
+type FieldStates<T> = { [K in keyof T]-?: T[K] extends Fragment<infer V> ? FragmentField<V> : T[K] extends Array<infer U> | null | undefined ? [U] extends [Builtin] ? FieldState<T[K]> : ListFieldState<U> : T[K] extends Builtin | null | undefined ? FieldState<T[K]> : ObjectState<T[K]>; };
+/**
+ * Creates a new `ObjectState` for a given form object `T` given config rules in `config`.
+ *
+ * The returned `ObjectState` can be used in a mobx `useLocalObservable` to drive an
+ * interactive form that tracks the current valid/touched/etc. state of both each
+ * individual fields as well as the top-level form/object itself.
+ */
+export declare function createObjectState<T>(config: ObjectConfig<T>, instance: T, opts?: {
+  maybeAutoSave?: () => void;
+}): ObjectState<T>;
+//#endregion
+//#region src/config.d.ts
+/**
+ * Config rules for each field in `T` that we're editing in a form.
+ *
+ * Basically every field is either a value/primitive or a list, and this `ObjectConfig` lets
+ * the caller define field-specific behavior, i.e. validation rules.
+ */
+type ObjectConfig<T> = { [P in keyof OmitIf<T, Function>]: T[P] extends Fragment<infer V> ? FragmentFieldConfig : T[P] extends Array<infer U> | null | undefined ? U extends Builtin ? ValueFieldConfig<T[P]> : ListFieldConfig<U> : ValueFieldConfig<T[P]> | ObjectFieldConfig<T[P]>; };
+/** Field configuration for an opaque value that we don't actually want to include. */
+type FragmentFieldConfig = {
+  type: "fragment";
+};
+/** Field configuration for primitive values, i.e. strings/numbers/Dates/user-defined types. */
+type ValueFieldConfig<V> = {
+  type: "value";
+  rules?: Rule<V | null | undefined>[];
+  /**
+   * If true, marks this field as the id, which will be used for things like "always include in changedValue".
+   *
+   * Defaults to true for fields named `id`.
+   */
+  isIdKey?: boolean;
+  /** If true, and this value is used on an entity in a list, the entity won't count towards the list validity. */
+  isDeleteKey?: boolean;
+  /** If true, the entity that contains this value will be treated as read only. */
+  isReadOnlyKey?: boolean;
+  /** If true, we ignore field in dirty checks. */
+  isLocalOnly?: boolean;
+  /**
+   * Marks a field as being backed by a mobx class computed field.
+   *
+   * Note that it might still be settable (some computed have setters), but we do
+   * exclude from the `reset` operation, i.e. we assume resetting other non-computed fields
+   * will effectively reset this field as well.
+   */
+  computed?: boolean;
+  /** Marks a field as being initially read-only, i.e. `field.readOnly = true/false` can change this default. */
+  readOnly?: boolean;
+  /** Marks an array field to be order agnostic when determining changed/dirty states, defaults true. */
+  strictOrder?: false;
+};
+/** Field configuration for list values, i.e. `U` is `Book` in a form with `books: Book[]`. */
+type ListFieldConfig<U> = {
+  type: "list";
+  /** Rules that can run on the full list of children. */
+  rules?: Rule<readonly ObjectState<U>[]>[];
+  /** Config for each child's form state, i.e. each book. */
+  config: ObjectConfig<U>;
+  /**
+   * What the server-side update behavior is for this collection.
+   *
+   * When exhaustive, we include all rows in `changedValue` so that we
+   * don't orhan unchanged rows.
+   *
+   * When incremental, we only include changed rows in `changedValue`.
+   *
+   * When deep-exhaustive, we include all rows in `changedValue` and also
+   * all fields in the child entities, i.e. not just placeholder `{ id: "b:1" }`
+   * values for otherwise-unchanged children.
+   *
+   * Defaults to `exhaustive` b/c that is the safest and also Joist's
+   * default behavior.
+   */
+  update?: "exhaustive" | "incremental" | "deep-exhaustive";
+  /** Set to not consider the order of the list when evaluating changed/dirty states, defaults true. */
+  strictOrder?: false;
+};
+type ObjectFieldConfig<U> = {
+  type: "object";
+  /** Marks an object as a reference, which means we'll only include it's `id` in `changedValue` output. */
+  reference?: boolean;
+  /** Config for the child's form state, i.e. each book. */
+  config: ObjectConfig<U>;
+};
+//#endregion
+//#region src/configBuilders.d.ts
+/**
+ * Provides a Zod-ish API for building form configs.
+ */
+export declare const f: {
+  /** Creates the top-level config for a form, like an author or book. */
+  config<T>(fields: ObjectConfigBuilderFields<T>): ObjectConfig<T>;
+  /** Creates the config DSL for an object, like an author or book. */
+  object<T>(fields: ObjectConfigBuilderFields<T>): ObjectConfigBuilder<T>;
+  /** Creates the config DSL for an list of objects, like an author's list of books. */
+  list<U>(fields: ObjectConfigBuilderFields<U>): ListFieldConfigBuilder<U>;
+  /** Creates the config DSL for a primitive value, like a first name or phone number. */
+  value<V>(): ValueFieldConfigBuilder<V>;
+  /** A shortcut for creating a child object with a single `id` key. */
+  reference<V extends {
+    id?: unknown;
+  }>(fields?: ObjectConfigBuilderFields<V>): ObjectConfigBuilder<V>;
+  /** A shorthand for creating a computed value. */
+  computed<V>(): ValueFieldConfigBuilder<V>;
+};
+/**
+ * Defines the fields that should be passed into `f.object({ ... })` for fhe form type `T`.
+ *
+ * This is basically a map of `key` in `T` to `f.value()`, `f.list()`, or `f.object()`
+ * DSL objects that define the runtime structure/fields of the form.
+ */
+type ObjectConfigBuilderFields<T> = { [P in keyof OmitIf<T, Function>]: T[P] extends Fragment<infer V> ? FragmentFieldConfigBuilder : T[P] extends Array<infer U> | null | undefined ? U extends Builtin ? ValueFieldConfigBuilder<T[P]> : ListFieldConfigBuilder<U> : ValueFieldConfigBuilder<T[P]> | ObjectConfigBuilder<T[P]>; };
+interface FragmentFieldConfigBuilder {
+  build(): FragmentFieldConfig;
+}
+/** Provides a fluent DSL for building up an object's config. */
+declare class ObjectConfigBuilder<T> {
+  private config;
+  constructor(fields: ObjectConfigBuilderFields<T>);
+  ref(): this;
+  build(): ObjectFieldConfig<T>;
+}
+/** Provides a fluent DSL for building up a value's config. */
+declare class ValueFieldConfigBuilder<V> {
+  private config;
+  /** Marks the field as required, keeping any rules that were already added. */
+  req(): this;
+  /** Marks the field as read only. */
+  readOnly(): this;
+  /** Marks the field as local only. */
+  localOnly(): this;
+  /** Appends `rules` to the field's validation rules. */
+  rules(rules: Rule<V | null | undefined>[]): this;
+  /** Marks the field as computed. */
+  computed(): this;
+  build(): ValueFieldConfig<V>;
+}
+/** Provides a fluent DSL for building up a list's config. */
+declare class ListFieldConfigBuilder<U> {
+  private config;
+  constructor(fields: ObjectConfigBuilderFields<U>);
+  /** Appends `rule` to the field's validation rules. */
+  rule(rule: Rule<readonly ObjectState<U>[]>): this;
+  /** Appends `rules` to the field's validation rules. */
+  rules(rules: Rule<readonly ObjectState<U>[]>[]): this;
+  build(): ListFieldConfig<U>;
+}
+//#endregion
+//#region src/useFormStates.d.ts
+/**
+ * The opts has for `useFormStates`.
+ *
+ * @typeparam T the form type, which is usually as close as possible to your *GraphQL input*
+ * @typeparam I the *form input* type, which is usually the *GraphQL output* type, i.e. the type of the response from your GraphQL query
+ */
+type UseFormStatesOpts<T, I> = {
+  /**
+   * The config to use for each form state.
+   *
+   * Should be stable/useMemo'd.
+   */
+  config: ObjectConfig<T>;
+  /**
+   * Fired for each individual `ObjectState` when it's had a value change.
+   *
+   * Does not need to be stable/useMemo'd.
+   */
+  autoSave?: (state: ObjectState<T>) => Promise<void>;
+  /**
+   * A hook to add custom, cross-field validation rules that can be difficult to setup directly in the config DSL.
+   *
+   * This will be called once-per `ObjectState` instance, and so is effectively a `useEffect` hook with
+   * a `[config, objectState]` dependency.
+   *
+   * Does not need to be stable/useMemo'd.
+   */
+  addRules?: (state: ObjectState<T>) => void;
+  /**
+   * Given an input to `getFormState`, returns the identity value that we'll cache that value's form state on.
+   *
+   * Does not need to be stable/useMemo'd.
+   */
+  getId: (v: I) => string;
+  /**
+   * Maps an input to `getFormState` to the actual form shape `T`.
+   *
+   * Does not need to be stable/useMemo'd.
+   */
+  map?: (input: Exclude<I, null | undefined>) => T;
+  /**
+   * Sets all `ObjectState`s to readOnly.
+   */
+  readOnly?: boolean;
+};
+type UseFormStatesHook<T, I> = {
+  getFormState: (input: I, opts?: {
+    readOnly?: boolean;
+  }) => ObjectState<T>;
+};
+/**
+ * A hook to manage many "mini-forms" on a single page, typically one form per row
+ * in a table.
+ *
+ * This hook basically provides the page/table with a cache, so each table row naively ask "what's
+ * the form state for this given row's data?" and get back a new-or-existing `ObjectState` instance
+ * that, if already existing, still has any of the user's WIP changes.
+ *
+ * Each mini-form/row can have its own autoSave calls, independent of the other rows.
+ *
+ * @typeparam T the form type, which is usually as close as possible to your *GraphQL input*
+ * @typeparam I the *form input* type, which is usually the *GraphQL output* type, i.e. the type of the response from your GraphQL query
+ */
+export declare function useFormStates<T, I = T>(opts: UseFormStatesOpts<T, I>): UseFormStatesHook<T, I>;
+//#endregion
+export type { FieldState, FormObjectState, Fragment, FragmentField, ListFieldState, ObjectConfig, ObjectState, Rule, ValueAdapter };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/fields/fragmentField.ts","../src/rules.ts","../src/fields/valueField.ts","../src/fields/listField.ts","../src/temporal.ts","../src/useFormState.ts","../src/utils.ts","../src/fields/objectField.ts","../src/config.ts","../src/configBuilders.ts","../src/useFormStates.ts"],"mappings":"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"}