@strictly/react-form 0.0.1

package/mantine/specs/text_input_hooks.tests.tsx

@@ -0,0 +1,106 @@
+import { composeStories } from '@storybook/react'
+import { toArray } from '@strictly/base'
+import {
+  fireEvent,
+  render,
+  type RenderResult,
+} from '@testing-library/react'
+import {
+  type Mock,
+  vi,
+} from 'vitest'
+import { TEXT_INPUT_LABEL } from './text_input_constants'
+import * as stories from './text_input_hooks.stories'
+
+const composedStories = composeStories(stories)
+const {
+  Populated,
+} = composedStories
+
+describe('mantine checkbox hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+
+  describe('events', function () {
+    let onFieldValueChange: Mock<(path: '$', value: string) => void>
+    let onFieldFocus: Mock<(path: '$') => void>
+    let onFieldBlur: Mock<(path: '$') => void>
+    let onFieldSubmit: Mock<(path: '$') => void>
+    let wrapper: RenderResult
+    let textInput: HTMLElement
+
+    beforeEach(async function () {
+      onFieldValueChange = vi.fn()
+      onFieldFocus = vi.fn()
+      onFieldBlur = vi.fn()
+      onFieldSubmit = vi.fn()
+      wrapper = render((
+        <Populated
+          onFieldBlur={onFieldBlur}
+          onFieldFocus={onFieldFocus}
+          onFieldSubmit={onFieldSubmit}
+          onFieldValueChange={onFieldValueChange}
+        />
+      ))
+      textInput = await wrapper.findByLabelText(TEXT_INPUT_LABEL)
+    })
+
+    it('fires change event', function () {
+      const value = 'new value'
+      fireEvent.change(textInput, {
+        target: {
+          value,
+        },
+      })
+      expect(onFieldValueChange).toHaveBeenCalledOnce()
+      expect(onFieldValueChange).toHaveBeenCalledWith('$', value)
+    })
+
+    it('fires submit event on enter', function () {
+      fireEvent.keyUp(textInput, {
+        key: 'Enter',
+      })
+      expect(onFieldSubmit).toHaveBeenCalledOnce()
+      expect(onFieldSubmit).toHaveBeenLastCalledWith('$')
+    })
+
+    it.each([
+      'Tab',
+      'Space',
+      'x',
+    ])('does not fire submit event on %s', function (key) {
+      fireEvent.keyUp(textInput, {
+        key,
+      })
+      expect(onFieldSubmit).not.toHaveBeenCalled()
+    })
+
+    describe('focus', function () {
+      beforeEach(function () {
+        fireEvent.focus(textInput)
+      })
+
+      it('fires focus event', function () {
+        expect(onFieldFocus).toHaveBeenCalledOnce()
+        expect(onFieldFocus).toHaveBeenCalledWith('$')
+      })
+
+      describe('blur', function () {
+        beforeEach(function () {
+          fireEvent.blur(textInput)
+        })
+
+        it('fires blur event', function () {
+          expect(onFieldBlur).toHaveBeenCalledOnce()
+          expect(onFieldBlur).toHaveBeenCalledWith('$')
+        })
+
+        it('does not refire focus event', function () {
+          expect(onFieldFocus).toHaveBeenCalledOnce()
+        })
+      })
+    })
+  })
+})

package/mantine/specs/value_input_constants.ts

@@ -0,0 +1,2 @@
+export const NUMBER_INPUT_LABEL = 'Number Input'
+export const SLIDER_LABEL = 'Slider'

package/mantine/specs/value_input_hooks.stories.tsx

@@ -0,0 +1,182 @@
+import {
+  JsonInput,
+  type JsonInputProps,
+  NumberInput,
+  type NumberInputProps,
+  Rating,
+  type RatingProps,
+  Slider,
+  type SliderProps,
+} from '@mantine/core'
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FormProps } from 'core/props'
+import { type SuppliedValueInputProps } from 'mantine/create_value_input'
+import { useMantineForm } from 'mantine/hooks'
+import {
+  type ComponentType,
+} from 'react'
+import { type Field } from 'types/field'
+import {
+  NUMBER_INPUT_LABEL,
+  SLIDER_LABEL,
+} from './value_input_constants'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type StoryValueInputProps<V> = SuppliedValueInputProps<V, any>
+
+function Component<
+  V,
+  P extends StoryValueInputProps<V>,
+>({
+  ValueInput,
+  inputs,
+  ...props
+}: FormProps<{
+  $: Field<V, string>,
+}> & {
+  ValueInput: ComponentType<P>,
+} & {
+  inputs: P,
+}) {
+  const form = useMantineForm(props)
+  const ValueInputComponent = form.valueInput<'$', P>('$', ValueInput)
+  return (
+    <ValueInputComponent
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+        ...inputs as any
+      }
+    />
+  )
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    onFieldBlur: action('onFieldBlur'),
+    onFieldFocus: action('onFieldFocus'),
+    onFieldSubmit: action('onFieldSubmit'),
+    onFieldValueChange: action('onFieldValueChange'),
+  },
+}
+
+export default meta
+
+type Story<
+  V,
+  P extends StoryValueInputProps<V>,
+> = StoryObj<typeof Component<V, P>>
+
+export const EmptyNumberInput: Story<number | string, NumberInputProps> = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: true,
+        value: '',
+      },
+    },
+    ValueInput: NumberInput,
+    inputs: {
+      label: NUMBER_INPUT_LABEL,
+    },
+  },
+}
+
+export const PopulatedNumberInput: Story<number | string, NumberInputProps> = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: 3,
+      },
+    },
+    ValueInput: NumberInput,
+    inputs: {
+      label: NUMBER_INPUT_LABEL,
+    },
+  },
+}
+
+export const DisabledNumberInput: Story<number | string, NumberInputProps> = {
+  args: {
+    fields: {
+      $: {
+        disabled: true,
+        required: false,
+        value: 3,
+      },
+    },
+    ValueInput: NumberInput,
+    inputs: {
+      label: NUMBER_INPUT_LABEL,
+    },
+  },
+}
+
+export const AnSlider: Story<number, SliderProps> = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: 3,
+      },
+    },
+    ValueInput: Slider,
+    inputs: {
+      label: SLIDER_LABEL,
+      min: 1,
+      max: 10,
+      marks: [
+        {
+          value: 1,
+          label: 'min',
+        },
+        {
+          value: 5,
+          label: 'mid',
+        },
+        {
+          value: 10,
+          label: 'max',
+        },
+      ],
+    },
+  },
+}
+
+export const AnRating: Story<number, RatingProps> = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: 2,
+      },
+    },
+    ValueInput: Rating,
+    inputs: {},
+  },
+}
+
+export const AnJsonInput: Story<string, JsonInputProps> = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: '{}',
+      },
+    },
+    ValueInput: JsonInput,
+    inputs: {
+      rows: 8,
+    },
+  },
+}

package/mantine/specs/value_input_hooks.tests.tsx

@@ -0,0 +1,14 @@
+import { composeStories } from '@storybook/react'
+import { toArray } from '@strictly/base'
+import {
+  render,
+} from '@testing-library/react'
+import * as stories from './value_input_hooks.stories'
+
+const composedStories = composeStories(stories)
+describe('mantine value input hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+})

package/mantine/types.ts

@@ -0,0 +1,13 @@
+import { type ComponentType } from 'react'
+import { type Fields } from 'types/field'
+import { type UnsafePartialComponent } from 'util/partial'
+
+export type MantineForm<F extends Fields> = {
+  fields: F,
+  onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined,
+  onFieldFocus: ((this: void, key: keyof F) => void) | undefined,
+  onFieldBlur: ((this: void, key: keyof F) => void) | undefined,
+  onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined,
+}
+
+export type MantineFieldComponent<T, P = T> = UnsafePartialComponent<ComponentType<P>, T>

package/package.exports.json

@@ -0,0 +1,18 @@
+{
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "dependencies": {
+    "@strictly/base": "*",
+    "@strictly/define": "*",
+    "mobx": "^6.13.5",
+    "mobx-react": "^9.1.1",
+    "react": "^19.0.0"
+  },
+  "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",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/builder-vite": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test-runner": "^0.19.1",
+    "@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",
+    "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"
+  },
+  "license": "MIT",
+  "name": "@strictly/react-form",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "directory": "packages/react-form",
+    "type": "git",
+    "url": "git+https://github.com/madmaw/de.git"
+  },
+  "scripts": {
+    "build": "tsup",
+    "check-types": "tsc",
+    "clean": "del-cli dist",
+    "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",
+    "test": "vitest run",
+    "test:update": "vitest run -u",
+    "test:watch": "vitest"
+  },
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "extends": "../../tsconfig.build.json",
+  "include": [
+    ".eslintrc.cjs",
+    ".storybook/vite.config.mts",
+    "tsup.config.ts",
+    "vitest.workspace.ts"
+
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./.out"
+  },
+  "extends": "../../tsconfig.json",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx",
+    ".vitest/**/*.ts",
+    "babel.config.cjs",
+    "tsconfig.json"
+  ],
+  "references": [
+    {
+      "path": "../../support/vite"
+    },
+    {
+      "path": "../define"
+    },
+    {
+      "path": "../base"
+    }
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import {
+  defineConfig,
+  type Options,
+} from 'tsup'
+
+export default defineConfig((options: Options) => ({
+  entry: ['index.ts'],
+  tsconfig: './tsconfig.build.json',
+  clean: false,
+  dts: true,
+  format: [
+    'cjs',
+    'esm',
+  ],
+  ...options,
+}))

package/types/all_fields_of_fields.ts

@@ -0,0 +1,9 @@
+import { type Fields } from './field'
+import { type ValueTypeOfField } from './value_type_of_field'
+
+// this is a ridiculous type, but it is used for consistency and it seems to force
+// the keys to be strings
+export type AllFieldsOfFields<F extends Fields> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [K in keyof F as ValueTypeOfField<F[K]> extends any ? K : never]: F[K]
+}

package/types/boolean_fields_of_fields.ts

@@ -0,0 +1,8 @@
+import {
+  type Fields,
+} from './field'
+import { type ValueTypeOfField } from './value_type_of_field'
+
+export type BooleanFieldsOfFields<F extends Fields> = {
+  [K in keyof F as ValueTypeOfField<F[K]> extends boolean ? K : never]: F[K]
+}

package/types/error_type_of_field.ts

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

package/types/field.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Field<V = any, E = any> = {
+  readonly value: V,
+  readonly error?: E | undefined,
+  readonly disabled: boolean,
+  readonly required: boolean,
+}
+
+export type Fields = Readonly<Record<string, Field>>

package/types/field_converters.ts

@@ -0,0 +1,64 @@
+import { type Maybe } from '@strictly/base'
+
+export enum FieldConversionResult {
+  Success = 0,
+  Failure = 1,
+}
+export type FieldConversion<V, E> = {
+  type: FieldConversionResult.Success,
+  value: V,
+} | {
+  type: FieldConversionResult.Failure,
+  error: E,
+  value: Maybe<V>,
+}
+
+// convert to the model type from the display type
+// for example a text field that renders an integer would have
+// 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<
+  From,
+  To,
+  E,
+  ValuePath extends string,
+  Context,
+> = {
+  (from: From, valuePath: ValuePath, context: Context): FieldConversion<To, E>,
+}
+
+export type SafeFieldConverter<
+  From,
+  To,
+  ValuePath extends string,
+  Context,
+> = {
+  (from: From, valuePath: ValuePath, context: Context): To,
+}
+
+export type TwoWayFieldConverter<
+  From,
+  To,
+  E,
+  ValuePath extends string,
+  Context,
+> = {
+  convert: SafeFieldConverter<From, To, ValuePath, Context>,
+
+  revert: FieldConverter<To, From, E, ValuePath, Context>,
+}
+
+export type FieldValueFactory<V, ValuePath extends string, Context> = {
+  (valuePath: ValuePath, context: Context): V,
+}
+
+export type TwoWayFieldConverterWithValueFactory<
+  From,
+  To,
+  E,
+  ValuePath extends string,
+  Context,
+> = TwoWayFieldConverter<From, To, E, ValuePath, Context> & {
+  readonly create: FieldValueFactory<From, ValuePath, Context>,
+}

package/types/field_validator.ts

@@ -0,0 +1,7 @@
+export type FieldValidator<V, E, ValuePath extends string, Context> = {
+  (
+    value: V,
+    valuePath: ValuePath,
+    context: Context,
+  ): E | null,
+}

package/types/flattened_form_fields_of.ts

@@ -0,0 +1,16 @@
+import { type PrintableOf } from '@strictly/base'
+import { type ValueOf } from 'type-fest'
+import { type Field } from './field'
+
+/**
+ * Maps type paths to value paths for
+ */
+export type FlattenedFormFieldsOf<
+  JsonPaths extends Record<string, string>,
+  TypePathsToFormFields extends Partial<Readonly<Record<ValueOf<JsonPaths>, Field>>>,
+> = keyof TypePathsToFormFields extends ValueOf<JsonPaths> ? {
+    readonly [K in keyof JsonPaths as unknown extends TypePathsToFormFields[JsonPaths[K]] ? never : K]:
+      TypePathsToFormFields[JsonPaths[K]]
+  }
+  // TODO is there a better way of enforcing the types are a subset?
+  : `fields missing paths: ${PrintableOf<Exclude<keyof TypePathsToFormFields, ValueOf<JsonPaths>>>}`

package/types/list_fields_of_fields.ts

@@ -0,0 +1,7 @@
+import { type Fields } from './field'
+import { type ValueTypeOfField } from './value_type_of_field'
+
+export type ListFieldsOfFields<F extends Fields> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [K in keyof F as ValueTypeOfField<F[K]> extends readonly any[] ? K : never]: F[K]
+}

package/types/specs/boolean_fields_of_fields.tests.ts

@@ -0,0 +1,23 @@
+import { type BooleanFieldsOfFields } from 'types/boolean_fields_of_fields'
+import { type Field } from 'types/field'
+
+describe('BooleanFieldsOfFields', function () {
+  describe('filtering', function () {
+    const e1 = Symbol()
+    const e2 = Symbol()
+    const e3 = Symbol()
+    type E1 = typeof e1
+    type E2 = typeof e2
+    type E3 = typeof e3
+    type F = {
+      b: Field<boolean, E1>,
+      s: Field<string, E2>,
+      n: Field<number, E3>,
+    }
+    it('equals expected type', function () {
+      expectTypeOf<BooleanFieldsOfFields<F>>().toEqualTypeOf<{
+        b: Field<boolean, E1>,
+      }>()
+    })
+  })
+})

package/types/specs/error_type_of_field.tests.ts

@@ -0,0 +1,10 @@
+import { type ErrorTypeOfField } from 'types/error_type_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>()
+  })
+})

package/types/specs/flattened_form_fields_of.tests.ts

@@ -0,0 +1,43 @@
+import { type Field } from 'types/field'
+import { type FlattenedFormFieldsOf } from 'types/flattened_form_fields_of'
+
+describe('FlattenedFormFieldsOf', function () {
+  describe('subset', function () {
+    it('equals expected type', function () {
+      type T = FlattenedFormFieldsOf<
+        {
+          readonly a: 'x',
+          readonly b: 'y',
+          readonly c: 'z',
+        },
+        {
+          readonly x: Field<1, string>,
+          readonly z: Field<3, string>,
+        }
+      >
+
+      expectTypeOf<T>().toEqualTypeOf<{
+        readonly a: Field<1, string>,
+        readonly c: Field<3, string>,
+      }>()
+    })
+  })
+
+  describe('overlap', function () {
+    it('errors to callee', function () {
+      type T = FlattenedFormFieldsOf<
+        {
+          readonly a: 'x',
+          readonly b: 'y',
+          readonly c: 'z',
+        },
+        {
+          readonly w: Field<0, string>,
+          readonly x: Field<1, string>,
+        }
+      >
+
+      expectTypeOf<T>().toEqualTypeOf<'fields missing paths: w'>()
+    })
+  })
+})