@strictly/react-form 0.0.1 → 0.0.3

package/mantine/specs/value_input_hooks.stories.tsx

@@ -15,6 +15,7 @@ import {
 } from '@storybook/react'
 import { type FormProps } from 'core/props'
 import { type SuppliedValueInputProps } from 'mantine/create_value_input'
+import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineForm } from 'mantine/hooks'
 import {
   type ComponentType,
@@ -33,14 +34,17 @@ function Component<
   P extends StoryValueInputProps<V>,
 >({
   ValueInput,
-  inputs,
+  ErrorRenderer,
+  inputProps,
   ...props
 }: FormProps<{
   $: Field<V, string>,
 }> & {
   ValueInput: ComponentType<P>,
 } & {
-  inputs: P,
+  inputProps: P,
+} & {
+  ErrorRenderer?: ErrorRenderer,
 }) {
   const form = useMantineForm(props)
   const ValueInputComponent = form.valueInput<'$', P>('$', ValueInput)
@@ -48,8 +52,9 @@ function Component<
     <ValueInputComponent
       {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
-        ...inputs as any
+        ...inputProps as any
       }
+      ErrorRenderer={ErrorRenderer}
     />
   )
 }
@@ -75,13 +80,13 @@ export const EmptyNumberInput: Story<number | string, NumberInputProps> = {
   args: {
     fields: {
       $: {
-        disabled: false,
-        required: true,
+        readonly: false,
+        required: false,
         value: '',
       },
     },
     ValueInput: NumberInput,
-    inputs: {
+    inputProps: {
       label: NUMBER_INPUT_LABEL,
     },
   },
@@ -91,13 +96,49 @@ export const PopulatedNumberInput: Story<number | string, NumberInputProps> = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
+        required: false,
+        value: 3,
+      },
+    },
+    ValueInput: NumberInput,
+    inputProps: {
+      label: NUMBER_INPUT_LABEL,
+    },
+  },
+}
+
+export const RequiredNumberInput: Story<number | string, NumberInputProps> = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: true,
+        value: 3,
+      },
+    },
+    ValueInput: NumberInput,
+    inputProps: {
+      label: NUMBER_INPUT_LABEL,
+    },
+  },
+}
+
+export const CustomErrorNumberInput: Story<number | string, NumberInputProps> = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
         required: false,
         value: 3,
+        error: 'an error',
       },
     },
     ValueInput: NumberInput,
-    inputs: {
+    ErrorRenderer: function () {
+      return 'a custom error'
+    },
+    inputProps: {
       label: NUMBER_INPUT_LABEL,
     },
   },
@@ -107,13 +148,13 @@ export const DisabledNumberInput: Story<number | string, NumberInputProps> = {
   args: {
     fields: {
       $: {
-        disabled: true,
+        readonly: true,
         required: false,
         value: 3,
       },
     },
     ValueInput: NumberInput,
-    inputs: {
+    inputProps: {
       label: NUMBER_INPUT_LABEL,
     },
   },
@@ -123,13 +164,13 @@ export const AnSlider: Story<number, SliderProps> = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: 3,
       },
     },
     ValueInput: Slider,
-    inputs: {
+    inputProps: {
       label: SLIDER_LABEL,
       min: 1,
       max: 10,
@@ -155,13 +196,13 @@ export const AnRating: Story<number, RatingProps> = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: 2,
       },
     },
     ValueInput: Rating,
-    inputs: {},
+    inputProps: {},
   },
 }
 
@@ -169,13 +210,13 @@ export const AnJsonInput: Story<string, JsonInputProps> = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: '{}',
       },
     },
     ValueInput: JsonInput,
-    inputs: {
+    inputProps: {
       rows: 8,
     },
   },

package/mantine/types.ts

@@ -1,6 +1,7 @@
 import { type ComponentType } from 'react'
 import { type Fields } from 'types/field'
 import { type UnsafePartialComponent } from 'util/partial'
+import { type ErrorRenderer } from './error_renderer'
 
 export type MantineForm<F extends Fields> = {
   fields: F,
@@ -10,4 +11,7 @@ export type MantineForm<F extends Fields> = {
   onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined,
 }
 
-export type MantineFieldComponent<T, P = T> = UnsafePartialComponent<ComponentType<P>, T>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type MantineFieldComponent<T, P = T, E = any> = UnsafePartialComponent<ComponentType<P>, T, {
+  ErrorRenderer?: ErrorRenderer<E>,
+}>

package/package.json

@@ -1,15 +1,19 @@
 {
+  "author": "Chris <chris.glover@gmail.com> (@madmaw)",
   "dependencies": {
+    "@mantine/core": "^7.13.4",
+    "@mantine/hooks": "^7.13.4",
     "@strictly/base": "*",
     "@strictly/define": "*",
     "mobx": "^6.13.5",
     "mobx-react": "^9.1.1",
-    "react": "^19.0.0"
+    "react": "^19.0.0 || ^18.3.1",
+    "react-dom": "^19.0.0 || ^18.3.1"
   },
+  "description": "Types and utilities for creating React forms",
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/plugin-transform-class-static-block": "^7.26.0",
-    "@mantine/core": "^7.13.4",
     "@storybook/addon-actions": "^8.4.5",
     "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addon-interactions": "^8.4.5",
@@ -18,21 +22,27 @@
     "@storybook/builder-vite": "^8.4.5",
     "@storybook/react": "^8.4.5",
     "@storybook/react-vite": "^8.4.5",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/test-runner": "^0.21.0",
     "@strictly/support-vite": "*",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "concurrently": "^9.1.2",
     "jsdom": "^25.0.1",
-    "react-dom": "^19.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "storybook": "^8.4.5",
     "type-fest": "^4.26.1",
     "vite": "^6.0.5",
     "vitest-matchmedia-mock": "^1.0.6"
   },
+  "homepage": "https://madmaw.github.io/strictly/form",
+  "keywords": [
+    "react",
+    "state management",
+    "types"
+  ],
   "license": "MIT",
   "name": "@strictly/react-form",
   "publishConfig": {
@@ -41,22 +51,25 @@
   "repository": {
     "directory": "packages/react-form",
     "type": "git",
-    "url": "git+https://github.com/madmaw/de.git"
+    "url": "git+https://github.com/madmaw/strictly.git"
   },
   "scripts": {
     "build": "tsup",
     "check-types": "tsc",
-    "clean": "del-cli dist",
+    "clean": "del-cli dist .out .turbo",
     "lint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint . --max-warnings=0",
     "lint:fix": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint . --fix",
     "release:exports": "json -f package.json -f package.exports.json --merge > package.release.json",
     "storybook": "storybook dev",
+    "storybook:build": "storybook build",
+    "storybook:test": "yarn playwright install && yarn storybook:build && concurrently -k -s first -n \"SB,TEST\" \"npx http-server storybook-static --port 6006 --silent\" \"npx wait-on tcp:127.0.0.1:6006 && yarn storybook:test:client\"",
+    "storybook:test:client": "test-storybook",
     "test": "vitest run",
     "test:update": "vitest run -u",
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "exports": {
     ".": {
       "import": {

package/tsconfig.json

@@ -12,6 +12,7 @@
     ".vitest/**/*.ts",
     "babel.config.cjs",
     "tsconfig.json"
+
   ],
   "references": [
     {

package/types/error_of_field.ts

@@ -0,0 +1,3 @@
+import { type Field } from './field'
+
+export type ErrorOfField<F extends Field> = F extends Field<infer _V, infer E> ? E : never

package/types/field.ts

@@ -2,7 +2,7 @@
 export type Field<V = any, E = any> = {
   readonly value: V,
   readonly error?: E | undefined,
-  readonly disabled: boolean,
+  readonly readonly: boolean,
   readonly required: boolean,
 }
 

package/types/field_converters.ts

@@ -1,14 +1,15 @@
 import { type Maybe } from '@strictly/base'
 
-export enum FieldConversionResult {
+export enum UnreliableFieldConversionType {
   Success = 0,
   Failure = 1,
 }
-export type FieldConversion<V, E> = {
-  type: FieldConversionResult.Success,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type UnreliableFieldConversion<V = any, E = any> = {
+  type: UnreliableFieldConversionType.Success,
   value: V,
 } | {
-  type: FieldConversionResult.Failure,
+  type: UnreliableFieldConversionType.Failure,
   error: E,
   value: Maybe<V>,
 }
@@ -18,23 +19,33 @@ export type FieldConversion<V, E> = {
 // a `from` type of `string`, and a `to` type of `number`
 
 // TODO converter can also have the allowable value path as a parameter
-export type FieldConverter<
+export type UnreliableFieldConverter<
   From,
   To,
   E,
   ValuePath extends string,
   Context,
 > = {
-  (from: From, valuePath: ValuePath, context: Context): FieldConversion<To, E>,
+  (from: From, valuePath: ValuePath, context: Context): UnreliableFieldConversion<To, E>,
 }
 
-export type SafeFieldConverter<
+export type Annotation = {
+  readonly required: boolean,
+  readonly readonly: boolean,
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnnotatedFieldConversion<V = any> = {
+  value: V,
+} & Annotation
+
+export type AnnotatedFieldConverter<
   From,
   To,
   ValuePath extends string,
   Context,
 > = {
-  (from: From, valuePath: ValuePath, context: Context): To,
+  (from: From, valuePath: ValuePath, context: Context): AnnotatedFieldConversion<To>,
 }
 
 export type TwoWayFieldConverter<
@@ -44,9 +55,9 @@ export type TwoWayFieldConverter<
   ValuePath extends string,
   Context,
 > = {
-  convert: SafeFieldConverter<From, To, ValuePath, Context>,
+  convert: AnnotatedFieldConverter<From, To, ValuePath, Context>,
 
-  revert: FieldConverter<To, From, E, ValuePath, Context>,
+  revert: UnreliableFieldConverter<To, From, E, ValuePath, Context>,
 }
 
 export type FieldValueFactory<V, ValuePath extends string, Context> = {

package/types/flattened_validators_of_fields.ts

@@ -0,0 +1,34 @@
+import {
+  type ReadonlyTypeOfType,
+  type Type,
+  type Validator,
+  type ValueOfType,
+} from '@strictly/define'
+import {
+  type SimplifyDeep,
+  type ValueOf,
+} from 'type-fest'
+import { type Field } from 'types/field'
+
+export type FlattenedValidatorsOfFields<
+  ValuePathsToTypePaths extends Readonly<Record<string, string>>,
+  FlattenedTypeDefs extends Partial<Readonly<Record<ValueOf<ValuePathsToTypePaths>, Type>>>,
+  FormFields extends Partial<Readonly<Record<keyof ValuePathsToTypePaths, Field>>>,
+> = SimplifyDeep<{
+  readonly [
+    K in keyof ValuePathsToTypePaths as FormFields[K] extends Field ? ValuePathsToTypePaths[K] : never
+  ]: ValidatorOfField<
+    NonNullable<FormFields[K]>,
+    FlattenedTypeDefs[ValuePathsToTypePaths[K]],
+    K
+  >
+}>
+
+type ValidatorOfField<
+  F extends Field,
+  T extends Type | undefined,
+  ValuePath extends string | number | symbol,
+> = ValuePath extends string ? F extends Field<infer V, infer E> ? undefined extends T ? Validator<V, E, ValuePath>
+    : Validator<ValueOfType<ReadonlyTypeOfType<NonNullable<T>>>, E, ValuePath>
+  : never
+  : never

package/types/merge_validators.ts

@@ -0,0 +1,80 @@
+import {
+  annotations,
+  validate,
+  type Validator,
+} from '@strictly/define'
+import { type Simplify } from 'type-fest'
+
+export type MergedOfValidators<
+  Validators1 extends Partial<Readonly<Record<Keys, Validator>>>,
+  Validators2 extends Partial<Readonly<Record<Keys, Validator>>>,
+  Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>,
+> = Simplify<{
+  readonly [K in Keys]: undefined extends Validators1[K] ? undefined extends Validators2[K]
+      // validator1 and validator 2 are undefined
+      ? never
+      // validator 1 is undefined
+    : Validators2[K]
+    : undefined extends Validators2[K]
+    // validator 2 is undefined
+      ? Validators1[K]
+    // validator 2 and validator 2 are defined
+    : MergedOfValidator<NonNullable<Validators1[K]>, NonNullable<Validators2[K]>>
+}>
+
+export type MergedOfValidator<
+  Validator1 extends Validator,
+  Validator2 extends Validator,
+> = Validator1 extends Validator<infer V, infer E1, infer P, infer C>
+  ? Validator2 extends Validator<V, infer E2, P, C> ? Validator<V, E1 | E2, P, C>
+  : never
+  : never
+
+export function mergeValidators<
+  Validators1 extends Partial<Readonly<Record<Keys, Validator>>>,
+  Validators2 extends Partial<Readonly<Record<Keys, Validator>>>,
+  Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>,
+>(
+  validators1: Validators1,
+  validators2: Validators2,
+): MergedOfValidators<Validators1, Validators2, Keys> {
+  const validators = {
+    ...validators1,
+    ...validators2,
+  }
+  const keys1 = new Set(Object.keys(validators1))
+  const keys2 = new Set(Object.keys(validators2))
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return Array.from(keys1.intersection(keys2)).reduce(
+    function (validators, key) {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const validator1 = validators1[key as keyof Validators1]
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const validator2 = validators2[key as keyof Validators2]
+
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      validators[key as Keys] = {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        validate: function (value: any, valuePath: string, context: any) {
+          const error = validate(validator1!, value, valuePath, context)
+          if (error != null) {
+            return error
+          }
+          return validate(validator2!, value, valuePath, context)
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        annotations: function (valuePath: string, context: any) {
+          const annotations1 = annotations(validator1!, valuePath, context)
+          const annotations2 = annotations(validator2!, valuePath, context)
+          return {
+            readonly: annotations1.readonly || annotations2.readonly,
+            required: annotations1.required || annotations2.required,
+          }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any
+      return validators
+    },
+    validators,
+  ) as unknown as MergedOfValidators<Validators1, Validators2, Keys>
+}

package/types/specs/error_type_of_field.tests.ts

@@ -1,10 +1,10 @@
-import { type ErrorTypeOfField } from 'types/error_type_of_field'
+import { type ErrorOfField } from 'types/error_of_field'
 import { type Field } from 'types/field'
 
 describe('ErrorTypeOfField', function () {
   it('equals expected type', function () {
     const e = Symbol()
     type E = typeof e
-    expectTypeOf<ErrorTypeOfField<Field<unknown, E>>>().toEqualTypeOf<E>()
+    expectTypeOf<ErrorOfField<Field<unknown, E>>>().toEqualTypeOf<E>()
   })
 })

package/types/specs/flattened_validators_of_fields.tests.ts

@@ -0,0 +1,93 @@
+import {
+  type booleanType,
+  type numberType,
+  type Validator,
+} from '@strictly/define'
+import { type Field } from 'types/field'
+import { type FlattenedValidatorsOfFields } from 'types/flattened_validators_of_fields'
+
+const error = Symbol()
+type Error = typeof error
+
+describe('FlattenedValidatorsOfFields', function () {
+  it('maps the converter types', function () {
+    type Fields = {
+      a: Field<string, Error>,
+    }
+    type T = FlattenedValidatorsOfFields<
+      {
+        a: 'b',
+      },
+      {
+        b: typeof numberType,
+      },
+      Fields
+    >
+    expectTypeOf<T>().toEqualTypeOf<{
+      readonly b: Validator<number, Error, 'a'>,
+    }>()
+  })
+
+  it('ignores extraneous types not listed in the fields', function () {
+    type FormFields = {
+      a: Field<string, Error>,
+    }
+    type T = FlattenedValidatorsOfFields<
+      {
+        a: 'b',
+        c: 'd',
+      },
+      {
+        b: typeof numberType,
+        d: typeof booleanType,
+      },
+      FormFields
+    >
+    expectTypeOf<T>().toEqualTypeOf<{
+      readonly b: Validator<number, Error, 'a'>,
+    }>()
+  })
+
+  it('handles multiple fields', function () {
+    type FormFields = {
+      a: Field<string, Error>,
+      c: Field<boolean, never>,
+    }
+    type T = FlattenedValidatorsOfFields<
+      {
+        a: 'b',
+        c: 'd',
+      },
+      {
+        b: typeof numberType,
+        d: typeof booleanType,
+      },
+      FormFields
+    >
+    expectTypeOf<T>().toEqualTypeOf<{
+      readonly b: Validator<number, Error, 'a'>,
+      readonly d: Validator<boolean, never, 'c'>,
+    }>()
+  })
+
+  it('allows synthesized fields', function () {
+    type FormFields = {
+      a: Field<string, Error>,
+      c: Field<number, never>,
+    }
+    type T = FlattenedValidatorsOfFields<
+      {
+        a: 'b',
+        c: 'd',
+      },
+      {
+        b: typeof numberType,
+      },
+      FormFields
+    >
+    expectTypeOf<T>().toEqualTypeOf<{
+      readonly b: Validator<number, Error, 'a'>,
+      readonly d: Validator<number, never, 'c'>,
+    }>()
+  })
+})