@strictly/react-form 0.0.1

package/field_converters/chain_field_converter.ts

@@ -0,0 +1,74 @@
+import {
+  UnreachableError,
+} from '@strictly/base'
+import {
+  type FieldConversion,
+  FieldConversionResult,
+  type FieldConverter,
+  type SafeFieldConverter,
+} from 'types/field_converters'
+
+export function chainFieldConverter<
+  From,
+  Intermediate,
+  To,
+  E1,
+  E2,
+  ValuePath extends string,
+  Context,
+>(
+  from: FieldConverter<From, Intermediate, E1, ValuePath, Context>,
+  to: FieldConverter<Intermediate, To, E2, ValuePath, Context>,
+): FieldConverter<From, To, E1 | E2, ValuePath, Context> {
+  return function (value: From, valuePath: ValuePath, context: Context): FieldConversion<To, E1 | E2> {
+    const fromConversion = from(value, valuePath, context)
+    switch (fromConversion.type) {
+      case FieldConversionResult.Success:
+        return to(fromConversion.value, valuePath, context)
+      case FieldConversionResult.Failure:
+        if (fromConversion.value != null) {
+          const toConversion = to(fromConversion.value[0], valuePath, context)
+          switch (toConversion.type) {
+            case FieldConversionResult.Success:
+              return {
+                type: FieldConversionResult.Failure,
+                error: fromConversion.error,
+                value: [toConversion.value],
+              }
+            case FieldConversionResult.Failure:
+              return {
+                type: FieldConversionResult.Failure,
+                error: fromConversion.error,
+                value: toConversion.value,
+              }
+            default:
+              throw new UnreachableError(toConversion)
+          }
+        } else {
+          return {
+            type: FieldConversionResult.Failure,
+            error: fromConversion.error,
+            value: null,
+          }
+        }
+      default:
+        throw new UnreachableError(fromConversion)
+    }
+  }
+}
+
+export function chainSafeFieldConverter<
+  From,
+  Intermediate,
+  To,
+  ValuePath extends string,
+  Context,
+>(
+  from: SafeFieldConverter<From, Intermediate, ValuePath, Context>,
+  to: SafeFieldConverter<Intermediate, To, ValuePath, Context>,
+): SafeFieldConverter<From, To, ValuePath, Context> {
+  return function (value: From, valuePath: ValuePath, context: Context): To {
+    const intermediate = from(value, valuePath, context)
+    return to(intermediate, valuePath, context)
+  }
+}

package/field_converters/identity_converter.ts

@@ -0,0 +1,39 @@
+import {
+  FieldConversionResult,
+  type FieldConverter,
+  type SafeFieldConverter,
+} from 'types/field_converters'
+
+export function safeIdentityConverter<
+  V,
+  ValuePath extends string,
+  Context,
+>(): SafeFieldConverter<
+  V,
+  V,
+  ValuePath,
+  Context
+> {
+  return function (v: V) {
+    return v
+  }
+}
+
+export function identityConverter<
+  V,
+  ValuePath extends string,
+  Context,
+>(): FieldConverter<
+  V,
+  V,
+  never,
+  ValuePath,
+  Context
+> {
+  return function (value: V) {
+    return {
+      type: FieldConversionResult.Success,
+      value,
+    }
+  }
+}

package/field_converters/integer_to_string_converter.ts

@@ -0,0 +1,32 @@
+import {
+  type FieldConversion,
+  FieldConversionResult,
+  type TwoWayFieldConverter,
+} from 'types/field_converters'
+
+export class IntegerToStringConverter<E, ValuePath extends string, Context>
+  implements TwoWayFieldConverter<number, string, E, ValuePath, Context>
+{
+  constructor(private readonly isNanError: E) {
+  }
+
+  convert(from: number): string {
+    return Math.floor(from).toString()
+  }
+
+  revert(from: string): FieldConversion<number, E> {
+    const value = parseInt(from, 10)
+    if (Number.isNaN(value)) {
+      return {
+        type: FieldConversionResult.Failure,
+        error: this.isNanError,
+        value: null,
+      }
+    } else {
+      return {
+        type: FieldConversionResult.Success,
+        value,
+      }
+    }
+  }
+}

package/field_converters/list_converter.ts

@@ -0,0 +1,15 @@
+import { type SafeFieldConverter } from 'types/field_converters'
+
+export function listConverter<
+  E,
+  K extends string,
+  ValuePath extends string,
+  Context,
+>(): SafeFieldConverter<readonly E[], K[], ValuePath, Context> {
+  return function (from: readonly E[], valuePath: ValuePath) {
+    return from.map(function (_v, i) {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      return `${valuePath as string}.${i}` as K
+    })
+  }
+}

package/field_converters/maybe_identity_converter.ts

@@ -0,0 +1,23 @@
+import {
+  type FieldConversion,
+  type TwoWayFieldConverter,
+} from 'types/field_converters'
+
+export class MaybeIdentityConverter<From, To, E, ValuePath extends string, Context>
+  implements TwoWayFieldConverter<From, From | To, E, ValuePath, Context>
+{
+  constructor(
+    private readonly converter: TwoWayFieldConverter<From, To, E, ValuePath, Context>,
+    private readonly isFrom: (to: From | To) => to is From,
+  ) {
+  }
+
+  convert(from: From, valuePath: ValuePath, context: Context): To | From {
+    return this.converter.convert(from, valuePath, context)
+  }
+
+  revert(from: To | From, valuePath: ValuePath, context: Context): FieldConversion<From, E> {
+    const value = this.isFrom(from) ? this.converter.convert(from, valuePath, context) : from
+    return this.converter.revert(value, valuePath, context)
+  }
+}

package/field_converters/nullable_to_boolean_converter.ts

@@ -0,0 +1,56 @@
+import {
+  copy,
+  type ReadonlyTypeDefOf,
+  type Type,
+  type ValueTypeOf,
+} from '@strictly/define'
+import {
+  type FieldConversion,
+  FieldConversionResult,
+  type TwoWayFieldConverterWithValueFactory,
+} from 'types/field_converters'
+
+export class NullableToBooleanConverter<
+  T extends Type,
+  E,
+  ValuePath extends string,
+  Context,
+> implements TwoWayFieldConverterWithValueFactory<
+  ValueTypeOf<ReadonlyTypeDefOf<T>> | null,
+  boolean,
+  E,
+  ValuePath,
+  Context
+> {
+  readonly defaultValue: ValueTypeOf<ReadonlyTypeDefOf<T>> | null
+
+  constructor(
+    private readonly typeDef: T,
+    private readonly prototype: ValueTypeOf<ReadonlyTypeDefOf<T>>,
+    defaultToNull = true,
+  ) {
+    this.defaultValue = defaultToNull ? null : prototype
+  }
+
+  convert(from: ValueTypeOf<ReadonlyTypeDefOf<T>> | null): boolean {
+    return from != null
+  }
+
+  revert(from: boolean): FieldConversion<ValueTypeOf<ReadonlyTypeDefOf<T>> | null, E> {
+    if (from) {
+      const value: ValueTypeOf<T> = copy(this.typeDef, this.prototype)
+      return {
+        type: FieldConversionResult.Success,
+        value,
+      }
+    }
+    return {
+      type: FieldConversionResult.Success,
+      value: null,
+    }
+  }
+
+  create(): ValueTypeOf<ReadonlyTypeDefOf<T>> | null {
+    return this.defaultValue
+  }
+}

package/field_converters/select_value_type_converter.ts

@@ -0,0 +1,141 @@
+import {
+  reverse,
+  type StringKeyOf,
+} from '@strictly/base'
+import {
+  copy,
+  type LiteralTypeDef,
+  type Type,
+  type UnionTypeDef,
+  type ValueTypeOf,
+  type ValueTypesOfDiscriminatedUnion,
+} from '@strictly/define'
+import {
+  type FieldConversion,
+  FieldConversionResult,
+  type TwoWayFieldConverterWithValueFactory,
+} from 'types/field_converters'
+
+export abstract class AbstractSelectValueTypeConverter<
+  T extends Type,
+  To extends string | null,
+  Values extends Readonly<Record<NonNullable<To>, ValueTypeOf<T>>>,
+  NoSuchValueError,
+  ValuePath extends string,
+  Context,
+> implements TwoWayFieldConverterWithValueFactory<
+  ValueTypeOf<T>,
+  keyof Values | null,
+  NoSuchValueError,
+  ValuePath,
+  Context
+> {
+  constructor(
+    protected readonly typeDef: T,
+    protected readonly values: Values,
+    private readonly defaultValueKey: keyof Values | null,
+    private readonly noSuchValueError: NoSuchValueError | null,
+  ) {
+  }
+
+  revert(from: keyof Values | null): FieldConversion<ValueTypeOf<T>, NoSuchValueError> {
+    const prototype: ValueTypeOf<T> | null = from == null ? null : this.values[from]
+    if (prototype == null && this.noSuchValueError != null) {
+      return {
+        type: FieldConversionResult.Failure,
+        error: this.noSuchValueError,
+        value: null,
+      }
+    }
+    const value = prototype == null ? null : copy(this.typeDef, prototype)
+    // TODO given we are dealing with strings, maybe we should have a check to make sure value is in the record
+    // of values?
+    return {
+      type: FieldConversionResult.Success,
+      value: value!,
+    }
+  }
+
+  convert(from: ValueTypeOf<T>): To {
+    if (from == null) {
+      return null!
+    }
+    return this.doConvert(from)
+  }
+
+  protected abstract doConvert(from: ValueTypeOf<T>): To
+
+  create(): ValueTypeOf<T> {
+    return this.defaultValueKey != null ? this.values[this.defaultValueKey] : null!
+  }
+}
+
+export class SelectDiscriminatedUnionConverter<
+  U extends UnionTypeDef,
+  To extends StringKeyOf<U['unions']> | null,
+  ValuePath extends string,
+  Context,
+> extends AbstractSelectValueTypeConverter<
+  Type<U>,
+  To,
+  ValueTypesOfDiscriminatedUnion<U>,
+  never,
+  ValuePath,
+  Context
+> {
+  constructor(
+    typeDef: Type<U>,
+    values: ValueTypesOfDiscriminatedUnion<U>,
+    defaultValueKey: keyof U['unions'],
+  ) {
+    super(
+      typeDef,
+      values,
+      defaultValueKey,
+      null,
+    )
+  }
+
+  protected override doConvert(from: ValueTypeOf<Type<U>>) {
+    const {
+      definition: {
+        discriminator,
+      },
+    } = this.typeDef
+    return from[discriminator!]
+  }
+}
+
+export class SelectLiteralConverter<
+  L extends string | number | null,
+  To extends string | null,
+  Values extends Record<NonNullable<L>, NonNullable<To>>,
+  NoSuchValueError,
+  ValuePath extends string,
+  Context,
+> extends AbstractSelectValueTypeConverter<
+  Type<LiteralTypeDef<L>>,
+  To,
+  Record<NonNullable<To>, L>,
+  NoSuchValueError,
+  ValuePath,
+  Context
+> {
+  constructor(
+    typeDef: Type<LiteralTypeDef<L>>,
+    private readonly valuesToStrings: Values,
+    defaultValue: L | null,
+    noSuchValueError: NoSuchValueError | null,
+  ) {
+    super(
+      typeDef,
+      reverse(valuesToStrings),
+      defaultValue && valuesToStrings[defaultValue],
+      noSuchValueError,
+    )
+  }
+
+  protected override doConvert(from: L) {
+    return from && this.valuesToStrings[from]
+  }
+}

package/field_converters/trimming_string_converter.ts

@@ -0,0 +1,23 @@
+import {
+  type FieldConversion,
+  FieldConversionResult,
+  type TwoWayFieldConverter,
+} from 'types/field_converters'
+
+export class TrimmingStringConverter<ValuePath extends string, Context>
+  implements TwoWayFieldConverter<string, string, never, ValuePath, Context>
+{
+  constructor() {
+  }
+
+  convert(to: string): string {
+    return to.trim()
+  }
+
+  revert(from: string): FieldConversion<string, never> {
+    return {
+      type: FieldConversionResult.Success,
+      value: from.trim(),
+    }
+  }
+}

package/field_converters/validating_converter.ts

@@ -0,0 +1,35 @@
+import {
+  type FieldConversion,
+  FieldConversionResult,
+  type FieldConverter,
+} from 'types/field_converters'
+import { type FieldValidator } from 'types/field_validator'
+
+export function validatingConverter<
+  V,
+  E,
+  ValuePath extends string,
+  Context,
+>(validators: readonly FieldValidator<V, E, ValuePath, Context>[] = []): FieldConverter<V, V, E, ValuePath, Context> {
+  return function (value: V, valuePath: ValuePath, context: Context): FieldConversion<V, E> {
+    return validators.reduce<FieldConversion<V, E>>(
+      function (acc, validator) {
+        if (acc.type === FieldConversionResult.Success) {
+          const error = validator(value, valuePath, context)
+          if (error != null) {
+            return {
+              type: FieldConversionResult.Failure,
+              error,
+              value: [value],
+            }
+          }
+        }
+        return acc
+      },
+      {
+        type: FieldConversionResult.Success,
+        value,
+      },
+    )
+  }
+}

package/field_validators/minimum_string_length_field_validator.ts

@@ -0,0 +1,13 @@
+import { type FieldValidator } from 'types/field_validator'
+
+export function minimumStringLengthFieldValidatorFactory<E, ValuePath extends string, Context>(
+  minimumLength: number,
+  error: E,
+): FieldValidator<string, E, ValuePath, Context> {
+  return function (value: string) {
+    if (value.length < minimumLength) {
+      return error
+    }
+    return null
+  }
+}

package/field_value_factories/prototyping_field_value_factory.ts

@@ -0,0 +1,11 @@
+import { type FieldValueFactory } from 'types/field_converters'
+
+export function prototypingFieldValueFactory<
+  V,
+  ValuePath extends string,
+  Context,
+>(prototype: V): FieldValueFactory<V, ValuePath, Context> {
+  return function (): V {
+    return prototype
+  }
+}

package/index.ts

@@ -0,0 +1,16 @@
+export * from './core/mobx/field_adapter_builder'
+export * from './core/mobx/flattened_adapters_of_fields'
+export * from './core/mobx/form_presenter'
+export * from './core/mobx/types'
+export * from './core/props'
+export * from './field_converters/integer_to_string_converter'
+export * from './field_converters/nullable_to_boolean_converter'
+export * from './field_converters/select_value_type_converter'
+export * from './field_converters/trimming_string_converter'
+export * from './field_converters/validating_converter'
+export * from './field_validators/minimum_string_length_field_validator'
+export * from './field_value_factories/prototyping_field_value_factory'
+export * from './mantine/hooks'
+export * from './types/field'
+export * from './types/flattened_form_fields_of'
+export * from './util/partial'

package/mantine/create_checkbox.tsx

@@ -0,0 +1,79 @@
+import {
+  type CheckboxProps,
+} from '@mantine/core'
+import { type ComponentType } from 'react'
+import { type BooleanFieldsOfFields } from 'types/boolean_fields_of_fields'
+import { type ErrorTypeOfField } from 'types/error_type_of_field'
+import { type Fields } from 'types/field'
+import { createUnsafePartialObserverComponent } from 'util/partial'
+import { type ErrorRenderer } from './hooks'
+import {
+  type MantineFieldComponent,
+  type MantineForm,
+} from './types'
+
+export type SuppliedCheckboxProps = Pick<
+  CheckboxProps,
+  | 'name'
+  | 'checked'
+  | 'disabled'
+  | 'required'
+  | 'error'
+  | 'onChange'
+  | 'onFocus'
+  | 'onBlur'
+  | 'onKeyUp'
+>
+
+export function createCheckbox<
+  F extends Fields,
+  K extends keyof BooleanFieldsOfFields<F>,
+  Props extends SuppliedCheckboxProps,
+>(
+  this: MantineForm<F>,
+  valuePath: K,
+  Checkbox: ComponentType<Props>,
+  ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>>,
+): MantineFieldComponent<SuppliedCheckboxProps, Props> {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.onFieldValueChange?.(valuePath, e.target.checked)
+  }
+  const onFocus = () => {
+    this.onFieldFocus?.(valuePath)
+  }
+  const onBlur = () => {
+    this.onFieldBlur?.(valuePath)
+  }
+  const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      if (this.onFieldSubmit?.(valuePath)) {
+        e.preventDefault()
+      }
+    }
+  }
+
+  const propSource = () => {
+    const {
+      disabled,
+      required,
+      value,
+      error,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    } = this.fields[valuePath as string]
+    return {
+      name: valuePath,
+      checked: value,
+      disabled,
+      required,
+      error: error && <ErrorRenderer error={error} />,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyUp,
+    }
+  }
+  return createUnsafePartialObserverComponent<typeof Checkbox, SuppliedCheckboxProps>(
+    Checkbox,
+    propSource,
+  )
+}

package/mantine/create_list.tsx

@@ -0,0 +1,58 @@
+import { type ElementOfArray } from '@strictly/base'
+import { type ComponentType } from 'react'
+import { type Fields } from 'types/field'
+import { type ListFieldsOfFields } from 'types/list_fields_of_fields'
+import { type ValueTypeOfField } from 'types/value_type_of_field'
+import { createUnsafePartialObserverComponent } from 'util/partial'
+import {
+  type MantineFieldComponent,
+  type MantineForm,
+} from './types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SuppliedListProps<Value = any> = {
+  values: readonly Value[],
+}
+
+export function createList<
+  F extends Fields,
+  K extends keyof ListFieldsOfFields<F>,
+  Props extends SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>> & {
+    children: (
+      value: ElementOfArray<ValueTypeOfField<F[K]>>,
+      index: number,
+    ) => React.ReactNode,
+  },
+>(
+  this: MantineForm<F>,
+  valuePath: K,
+  List: ComponentType<Props>,
+): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props> {
+  const propSource = () => {
+    const values = [...this.fields[valuePath].value]
+    return {
+      values,
+    }
+  }
+  return createUnsafePartialObserverComponent<
+    typeof List,
+    SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>
+  >(List, propSource)
+}
+
+export function DefaultList<
+  Value,
+>({
+  values,
+  children,
+}: SuppliedListProps<Value> & {
+  children: (value: Value, index: number) => React.ReactNode,
+}) {
+  return (
+    <>
+      {values.map(function (value, index) {
+        return children(value, index)
+      })}
+    </>
+  )
+}

package/mantine/create_pill.tsx

@@ -0,0 +1,43 @@
+import {
+  type PillProps,
+} from '@mantine/core'
+import { type ComponentType } from 'react'
+import { type AllFieldsOfFields } from 'types/all_fields_of_fields'
+import { type Fields } from 'types/field'
+import { createUnsafePartialObserverComponent } from 'util/partial'
+import {
+  type MantineFieldComponent,
+  type MantineForm,
+} from './types'
+
+// TODO should probably supply everything
+export type SuppliedPillProps = Pick<
+  PillProps,
+  | 'children'
+  | 'disabled'
+>
+
+export function createPill<
+  F extends Fields,
+  K extends keyof AllFieldsOfFields<F>,
+  Props extends SuppliedPillProps,
+>(
+  this: MantineForm<F>,
+  valuePath: K,
+  Pill: ComponentType<Props>,
+): MantineFieldComponent<SuppliedPillProps, Props> {
+  const propSource = () => {
+    const {
+      disabled,
+      value,
+      // note: individual pills cannot display an error!
+      // error,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    } = this.fields[valuePath as string]
+    return {
+      children: value,
+      disabled,
+    }
+  }
+  return createUnsafePartialObserverComponent<typeof Pill, SuppliedPillProps>(Pill, propSource)
+}