playbook_ui 14.9.0.pre.alpha.PLAY1731inputmasking4927 → 14.9.0.pre.alpha.PLAY16264952

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { render, screen, fireEvent, within } from '../utilities/test-utils'
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
 
 import TextInput from './_text_input'
 
@@ -89,140 +89,3 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} mb_lg`)
 })
-
-
-const TextInputCurrencyMask = (props) => {
-  const [currency, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="currency"
-        onChange={handleOnChange}
-        value={currency}
-        {...props}
-    />
-  )
-}
-
-test('returns masked currency value', () => {
-  render(
-    <TextInputCurrencyMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456' } });
-
-  expect(input.value).toBe('$1,234.56')
-
-  fireEvent.change(input, { target: { value: '1' } });
-
-  expect(input.value).toBe('$0.01')
-
-  fireEvent.change(input, { target: { value: '' } });
-
-  expect(input.value).toBe('')
-})
-
-const TextInputZipCodeMask = (props) => {
-  const [zipCode, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="zipCode"
-        onChange={handleOnChange}
-        value={zipCode}
-        {...props}
-    />
-  )
-}
-
-test('returns masked zip code value', () => {
-  render(
-    <TextInputZipCodeMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456' } });
-
-  expect(input.value).toBe('12345')
-})
-
-const TextInputPostalCodeMask = (props) => {
-  const [postalCode, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="postalCode"
-        onChange={handleOnChange}
-        value={postalCode}
-        {...props}
-    />
-  )
-}
-
-test('returns masked postal code value', () => {
-  render(
-    <TextInputPostalCodeMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456789' } });
-
-  expect(input.value).toBe('12345-6789')
-})
-
-const TextInputSSNMask = (props) => {
-  const [ssn, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="ssn"
-        onChange={handleOnChange}
-        value={ssn}
-        {...props}
-    />
-  )
-}
-
-test('returns masked ssn value', () => {
-  render(
-    <TextInputSSNMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456789' } });
-
-  expect(input.value).toBe('123-45-6789')
-})

data/app/pb_kits/playbook/utilities/hookFormProps.ts

@@ -0,0 +1,22 @@
+import { UseFormRegister, FieldValues, RegisterOptions, Path } from 'react-hook-form'
+
+export type HookFormProps<T extends FieldValues = FieldValues> = {
+  register?: UseFormRegister<T>
+  rules?: RegisterOptions
+  name: Path<T>
+}
+
+export const withHookForm = <T extends FieldValues = FieldValues>(
+  props: HookFormProps<T>
+) => {
+  const { register, name, rules } = props
+  if (!register) return {}
+  
+  const registration = register(name, rules)
+  return {
+    onChange: registration.onChange,
+    onBlur: registration.onBlur,
+    ref: registration.ref,
+    name: registration.name,
+  }
+} 

data/app/pb_kits/playbook/utilities/withReactHookForm.tsx

@@ -0,0 +1,64 @@
+import React from "react"
+import {
+  FieldValues,
+  Path,
+  UseFormRegister,
+  RegisterOptions,
+} from "react-hook-form"
+
+export type WithReactHookFormProps<T extends FieldValues> = {
+  name: Path<T>
+  register?: UseFormRegister<T>
+  rules?: Omit<
+    RegisterOptions<T>,
+    "valueAsNumber" | "valueAsDate" | "setValueAs"
+  >
+  disabled?: boolean
+}
+
+function getDisplayName(WrappedComponent: React.ComponentType<any>): string {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
+}
+
+export function withReactHookForm<
+  P extends {
+    onChange?: (...args: any[]) => void
+    onBlur?: (...args: any[]) => void
+    ref?: any
+  },
+  T extends FieldValues = FieldValues
+>(WrappedComponent: React.ComponentType<P>) {
+  const WithReactHookFormComponent = React.forwardRef<HTMLElement, P & WithReactHookFormProps<T>>(
+    (props, ref) => {
+      const { register, name, rules, disabled, ...rest } = props
+
+      if (!register) {
+        return (<WrappedComponent {...(rest as P)}
+            ref={ref}
+                />)
+      }
+
+      const fieldRegistration = register(name, rules)
+
+      const fieldProps = {
+        ...rest,
+        ...fieldRegistration,
+        disabled: disabled || (rest as any).disabled,
+        ref: ref || fieldRegistration.ref,
+        onChange: (...args: any[]) => {
+          fieldRegistration.onChange?.(...args)
+          ;(rest as P).onChange?.(...args)
+        },
+        onBlur: (...args: any[]) => {
+          fieldRegistration.onBlur?.(...args)
+          ;(rest as P).onBlur?.(...args)
+        },
+      }
+
+      return <WrappedComponent {...(fieldProps as P)} />
+    }
+  )
+
+  WithReactHookFormComponent.displayName = `WithReactHookForm(${getDisplayName(WrappedComponent)})`
+  return WithReactHookFormComponent
+}