@strictly/react-form 0.0.15 → 0.0.16

package/mantine/hooks.tsx

@@ -44,6 +44,10 @@ import {
   createCheckbox,
   type SuppliedCheckboxProps,
 } from './create_checkbox'
+import {
+  createFieldView,
+  type FieldViewProps,
+} from './create_field_view'
 import {
   createFieldsView,
   type FieldsView,
@@ -93,7 +97,8 @@ export function useMantineFormFields<
   onFieldFocus,
   onFieldSubmit,
   fields,
-}: FieldsViewProps<F>): MantineFormImpl<F> {
+  // should use FieldView rather than observing fields directly from here
+}: FieldsViewProps<F>): Omit<MantineFormImpl<F>, 'fields'> {
   const form = useMemo(
     function () {
       return new MantineFormImpl(fields)
@@ -184,6 +189,12 @@ class MantineFormImpl<
   > = new Cache(
     createList.bind(this),
   )
+  private readonly fieldViewCache: Cache<
+    [keyof AllFieldsOfFields<F>],
+    ComponentType<FieldViewProps<F, Exclude<keyof AllFieldsOfFields<F>, number | symbol>>>
+  > = new Cache(
+    createFieldView.bind(this),
+  )
   private readonly fieldsViewCache: Cache<
     // the cache cannot reference keys, so we just use any
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -392,6 +403,12 @@ class MantineFormImpl<
     >
   }
 
+  fieldView<K extends keyof AllFieldsOfFields<F>>(valuePath: K): ComponentType<FieldViewProps<F, K>> {
+    return this.fieldViewCache.retrieveOrCreate(
+      valuePath,
+    )
+  }
+
   fieldsView<
     K extends keyof AllFieldsOfFields<F>,
     P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>,

package/mantine/specs/__snapshots__/field_view_hooks.tests.tsx.snap

@@ -0,0 +1,153 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`field view hooks > renders Empty 1`] = `
+<div>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
+  <div
+    class="m_4081bf90 mantine-Group-root"
+    style="--group-gap: var(--mantine-spacing-md); --group-align: start; --group-justify: flex-start; --group-wrap: wrap; flex: 1;"
+  >
+    <div
+      class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+      style="flex: 1;"
+    >
+      <div
+        class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+        data-variant="default"
+      >
+        <input
+          aria-invalid="false"
+          class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          data-variant="default"
+          id="mantine-0px4bipx4"
+          value=""
+        />
+      </div>
+    </div>
+    <button
+      class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+      style="--button-color: var(--mantine-color-white);"
+      type="button"
+    >
+      <span
+        class="m_80f1301b mantine-Button-inner"
+      >
+        <span
+          class="m_811560b9 mantine-Button-label"
+        >
+          Submit Field
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`field view hooks > renders Error 1`] = `
+<div>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
+  <div
+    class="m_4081bf90 mantine-Group-root"
+    style="--group-gap: var(--mantine-spacing-md); --group-align: start; --group-justify: flex-start; --group-wrap: wrap; flex: 1;"
+  >
+    <div
+      class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+      data-error="true"
+      style="flex: 1;"
+    >
+      <div
+        class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+        data-error="true"
+        data-variant="default"
+        style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
+      >
+        <input
+          aria-describedby="mantine-0cyk5rcyk-error"
+          aria-invalid="true"
+          class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          data-error="true"
+          data-variant="default"
+          id="mantine-0cyk5rcyk"
+          value="hello"
+        />
+      </div>
+      <p
+        class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
+        id="mantine-0cyk5rcyk-error"
+      >
+        no hellos allowed
+      </p>
+    </div>
+    <button
+      class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+      style="--button-color: var(--mantine-color-white);"
+      type="button"
+    >
+      <span
+        class="m_80f1301b mantine-Button-inner"
+      >
+        <span
+          class="m_811560b9 mantine-Button-label"
+        >
+          Submit Field
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`field view hooks > renders Populated 1`] = `
+<div>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
+  <div
+    class="m_4081bf90 mantine-Group-root"
+    style="--group-gap: var(--mantine-spacing-md); --group-align: start; --group-justify: flex-start; --group-wrap: wrap; flex: 1;"
+  >
+    <div
+      class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+      style="flex: 1;"
+    >
+      <div
+        class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+        data-variant="default"
+      >
+        <input
+          aria-invalid="false"
+          class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          data-variant="default"
+          id="mantine-0cyk5rcyk"
+          value="hello"
+        />
+      </div>
+    </div>
+    <button
+      class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+      style="--button-color: var(--mantine-color-white);"
+      type="button"
+    >
+      <span
+        class="m_80f1301b mantine-Button-inner"
+      >
+        <span
+          class="m_811560b9 mantine-Button-label"
+        >
+          Submit Field
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;

package/mantine/specs/field_view_hooks.stories.tsx

@@ -0,0 +1,112 @@
+import {
+  Button,
+  Group,
+  TextInput,
+} from '@mantine/core'
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FieldsViewProps } from 'core/props'
+import { useMantineFormFields } from 'mantine/hooks'
+import {
+  type ChangeEvent,
+  useCallback,
+} from 'react'
+import { type Field } from 'types/field'
+
+function Component(props: FieldsViewProps<{
+  $: Field<string, string>,
+}>) {
+  const form = useMantineFormFields(props)
+  const FieldView = form.fieldView('$')
+  return (
+    <FieldView>
+      {({
+        error,
+        value,
+        onBlur,
+        onFocus,
+        onSubmit,
+        onValueChange,
+      }) => {
+        // this *is* a component eslint
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const onChange = useCallback(({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+          onValueChange(value)
+        }, [onValueChange])
+        return (
+          <Group
+            align='start'
+            flex={1}
+          >
+            <TextInput
+              error={error}
+              flex={1}
+              onBlur={onBlur}
+              onChange={onChange}
+              onFocus={onFocus}
+              value={value}
+            />
+            {/* normally this would be done on enter, but with a field view you can implement it however you want */}
+            <Button onClick={onSubmit}>
+              Submit Field
+            </Button>
+          </Group>
+        )
+      }}
+    </FieldView>
+  )
+}
+
+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 = StoryObj<typeof Component>
+
+export const Empty: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: '',
+      },
+    },
+  },
+}
+
+export const Populated: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: 'hello',
+      },
+    },
+  },
+}
+
+export const Error: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: 'hello',
+        error: 'no hellos allowed',
+      },
+    },
+  },
+}

package/mantine/specs/field_view_hooks.tests.tsx

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

package/package.json

@@ -70,7 +70,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "exports": {
     ".": {
       "import": {

package/.out/mantine/field_view.d.ts

@@ -1,18 +0,0 @@
-import { type ComponentType } from 'react';
-import { type ErrorOfField } from 'types/error_of_field';
-import { type Fields } from 'types/field';
-import { type ValueTypeOfField } from 'types/value_type_of_field';
-/**
- * Displays current value and error of a field
- */
-export declare function FieldView<F extends Fields, K extends keyof F>({ fields, valuePath, children, }: {
-    fields: F;
-    valuePath: K;
-    children: (props: {
-        value: ValueTypeOfField<F[K]>;
-        error: ErrorOfField<F[K]> | undefined;
-        ErrorSink: ComponentType<{
-            error: ErrorOfField<F[K]>;
-        }>;
-    }) => JSX.Element;
-}): import("react/jsx-runtime").JSX.Element;

package/.out/mantine/field_view.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Observer } from 'mobx-react';
-import { Empty } from 'util/empty';
-/**
- * Displays current value and error of a field
- */
-export function FieldView({ fields, valuePath, children, }) {
-    return (_jsx(Observer, { children: () => {
-            const { value, error, } = fields[valuePath];
-            return children({
-                value,
-                error,
-                ErrorSink: Empty,
-            });
-        } }));
-}

package/mantine/field_view.tsx

@@ -1,39 +0,0 @@
-import { Observer } from 'mobx-react'
-import { type ComponentType } from 'react'
-import { type ErrorOfField } from 'types/error_of_field'
-import { type Fields } from 'types/field'
-import { type ValueTypeOfField } from 'types/value_type_of_field'
-import { Empty } from 'util/empty'
-
-/**
- * Displays current value and error of a field
- */
-export function FieldView<F extends Fields, K extends keyof F>({
-  fields,
-  valuePath,
-  children,
-}: {
-  fields: F,
-  valuePath: K,
-  children: (props: {
-    value: ValueTypeOfField<F[K]>,
-    error: ErrorOfField<F[K]> | undefined,
-    ErrorSink: ComponentType<{ error: ErrorOfField<F[K]> }>,
-  }) => JSX.Element,
-}) {
-  return (
-    <Observer>
-      {() => {
-        const {
-          value,
-          error,
-        } = fields[valuePath]
-        return children({
-          value,
-          error,
-          ErrorSink: Empty,
-        })
-      }}
-    </Observer>
-  )
-}