@strictly/react-form 0.0.1

package/types/specs/string_fields_of_fields.tests.ts

@@ -0,0 +1,40 @@
+import { type Field } from 'types/field'
+import { type StringFieldsOfFields } from 'types/string_fields_of_fields'
+
+describe('StringFieldsOfFields', 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<StringFieldsOfFields<F>>().toEqualTypeOf<{
+        s: Field<string, E2>,
+      }>()
+    })
+  })
+
+  describe('string union with null', function () {
+    const e = Symbol()
+    type E = typeof e
+    type F = {
+      s: Field<'a' | 'b' | 'c' | null | undefined, E>,
+    }
+
+    describe('StringFieldsOfFields', function () {
+      it('equals expected type', function () {
+        expectTypeOf<StringFieldsOfFields<F>>().toEqualTypeOf<{
+          s: Field<'a' | 'b' | 'c' | null | undefined, E>,
+        }>()
+      })
+    })
+  })
+})

package/types/specs/value_type_of_field.tests.ts

@@ -0,0 +1,10 @@
+import { type Field } from 'types/field'
+import { type ValueTypeOfField } from 'types/value_type_of_field'
+
+describe('ValueTypeOfField', function () {
+  it('equals expected type', function () {
+    const v = Symbol()
+    type V = typeof v
+    expectTypeOf<ValueTypeOfField<Field<V, unknown>>>().toEqualTypeOf<V>()
+  })
+})

package/types/string_fields_of_fields.ts

@@ -0,0 +1,6 @@
+import { type Fields } from './field'
+import { type ValueTypeOfField } from './value_type_of_field'
+
+export type StringFieldsOfFields<F extends Fields> = {
+  [K in keyof F as ValueTypeOfField<F[K]> extends string | undefined | null ? K : never]: F[K]
+}

package/types/value_type_of_field.ts

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

package/util/partial.tsx

@@ -0,0 +1,200 @@
+import { observer } from 'mobx-react'
+import {
+  type ComponentProps,
+  type ComponentType,
+  type DependencyList,
+  type ForwardedRef,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  useMemo,
+} from 'react'
+
+export type PartialComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps,
+  AdditionalProps = {},
+> = Exclude<keyof CurriedProps, keyof ComponentProps<Component>> extends never
+  ? UnsafePartialComponent<Component, CurriedProps, AdditionalProps>
+  : keyof CurriedProps extends (string | number)
+    ? `unmatched prop: ${Exclude<keyof CurriedProps, keyof ComponentProps<Component>>}`
+  : Exclude<keyof CurriedProps, keyof ComponentProps<Component>>
+
+export type UnsafePartialComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps,
+  AdditionalProps = {},
+> = ForwardRefExoticComponent<
+  PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>
+>
+
+export function createSimplePartialComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps extends Partial<ComponentProps<Component>>,
+>(
+  Component: Component,
+  curriedProps: CurriedProps,
+): PartialComponent<Component, CurriedProps> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return forwardRef(
+    function (
+      exposedProps: PropsWithoutRef<RemainingComponentProps<Component, CurriedProps>>,
+      ref: ForwardedRef<typeof Component>,
+    ) {
+      // forward ref types are really difficult to work with
+      // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
+      const C = Component as ComponentType<any>
+
+      return (
+        <C
+          ref={ref}
+          {...curriedProps}
+          {...exposedProps}
+        />
+      )
+    },
+  ) as PartialComponent<Component, CurriedProps>
+}
+
+export function createPartialComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps extends Partial<ComponentProps<Component>>,
+  AdditionalProps = {},
+>(
+  Component: Component,
+  curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps,
+): PartialComponent<Component, CurriedProps, AdditionalProps> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return forwardRef(
+    function (
+      exposedProps: PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>,
+      ref: ForwardedRef<typeof Component>,
+    ) {
+      // forward ref types are really difficult to work with
+      // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
+      const C = Component as ComponentType<any>
+      // TODO is there any way we can memoize this transformation?
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const curriedProps = curriedPropsSource(exposedProps as AdditionalProps)
+
+      return (
+        <C
+          ref={ref}
+          {...curriedProps}
+          {...exposedProps}
+        />
+      )
+    },
+  ) as PartialComponent<Component, CurriedProps, AdditionalProps>
+}
+
+export function usePartialComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps extends Partial<ComponentProps<Component>>,
+  AdditionalProps = {},
+>(
+  // has to be first so eslint react-hooks/exhaustive-deps can find the callback
+  // has to be a function so eslint react-hooks/exhaustive-deps can reason about it :(
+  createCurriedProps: (additionalProps: AdditionalProps) => CurriedProps,
+  // has to be next so eslint react-hooks/exhaustive-deps can find the deps
+  deps: DependencyList,
+  Component: Component,
+): PartialComponent<Component, CurriedProps, AdditionalProps> {
+  return useMemo(
+    function () {
+      return createPartialComponent<Component, CurriedProps, AdditionalProps>(Component, createCurriedProps)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps,
+      Component,
+    ],
+  )
+}
+
+export function createPartialObserverComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps extends Partial<ComponentProps<Component>>,
+  AdditionalProps = {},
+>(
+  Component: Component,
+  curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps,
+): PartialComponent<Component, CurriedProps, AdditionalProps> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return createUnsafePartialObserverComponent(Component, curriedPropsSource) as PartialComponent<Component,
+    CurriedProps, AdditionalProps>
+}
+
+export function createUnsafePartialObserverComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps,
+  AdditionalProps = {},
+>(
+  Component: Component,
+  curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps,
+): UnsafePartialComponent<Component, CurriedProps, AdditionalProps> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return observer(
+    forwardRef(
+      function (
+        exposedProps: PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>,
+        ref: ForwardedRef<typeof Component>,
+      ) {
+        // forward ref types are really difficult to work with
+        // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
+        const C = Component as ComponentType<any>
+        // TODO is there any way we can memoize this transformation?
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const curriedProps = curriedPropsSource(exposedProps as AdditionalProps)
+
+        return (
+          <C
+            ref={ref}
+            {...curriedProps}
+            {...exposedProps}
+          />
+        )
+      },
+    ),
+  ) as UnsafePartialComponent<Component, CurriedProps, AdditionalProps>
+}
+
+export function usePartialObserverComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component extends ComponentType<any>,
+  CurriedProps extends Partial<ComponentProps<Component>>,
+  AdditionalProps = {},
+>(
+  // has to be first so eslint react-hooks/exhaustive-deps can find the callback
+  curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps,
+  // has to be next so eslint react-hooks/exhaustive-deps can find the deps
+  deps: DependencyList,
+  Component: Component,
+) {
+  return useMemo(
+    function () {
+      return createPartialObserverComponent(Component, curriedPropsSource)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps,
+      Component,
+    ],
+  )
+}
+
+type RemainingComponentProps<Component extends ComponentType, CurriedProps> =
+  & Omit<ComponentProps<Component>, keyof CurriedProps>
+  & JSX.IntrinsicAttributes

package/vitest.workspace.ts

@@ -0,0 +1,26 @@
+import { createVitestUserConfig } from '@strictly/support-vite'
+import {
+  defineWorkspace,
+} from 'vitest/config'
+
+import tsconfig from './tsconfig.json'
+
+const config = createVitestUserConfig(tsconfig)
+export default defineWorkspace([
+  '.',
+  {
+    ...config,
+    extends: './.storybook/vite.config.mts',
+    test: {
+      ...(config.test || {}),
+      environment: 'jsdom',
+      setupFiles: [
+        './.vitest/install_deterministic_random.ts',
+        // install storybook setup for unit tests that import stories directly
+        './.vitest/install_storybook_preview.ts',
+        './.vitest/match_media.ts',
+        './.vitest/resize_observer.ts',
+      ],
+    },
+  },
+] as const)