@xyo-network/react-form-credit-card 3.0.2 → 3.0.4

package/src/components/controls/card/FormControlTextField.tsx

@@ -2,7 +2,9 @@ import type { StandardTextFieldProps } from '@mui/material'
 import { FormControl as MuiFormControl, TextField } from '@mui/material'
 import type { FormControl } from '@xyo-network/react-form-group'
 import { LabeledTextFieldWrapper } from '@xyo-network/react-shared'
-import type { ChangeEventHandler, FocusEventHandler, KeyboardEvent } from 'react'
+import type {
+  ChangeEventHandler, FocusEventHandler, KeyboardEvent,
+} from 'react'
 import React, { forwardRef } from 'react'
 
 export interface FormControlTextFieldProps extends StandardTextFieldProps {
@@ -12,7 +14,9 @@ export interface FormControlTextFieldProps extends StandardTextFieldProps {
 }
 
 export const FormControlTextField = forwardRef<HTMLDivElement, FormControlTextFieldProps>(
-  ({ formControl, formControlError, fieldLabel = '', ...props }, ref) => {
+  ({
+    formControl, formControlError, fieldLabel = '', ...props
+  }, ref) => {
     const { name } = formControl?.props ?? {}
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {

package/src/components/controls/card/Name.tsx

@@ -18,15 +18,21 @@ export const NameWithFormControl: React.FC<NameWithFormControlProps> = ({
   ...props
 }) => {
   const args = useMemo(() => [fieldLabel, autoCompleteLabel, placeholder ?? ''], [autoCompleteLabel, fieldLabel, placeholder])
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args)
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}
+  const {
+    creditCardFormControl, error, inputRef, value,
+  } = useCreditCardFormControl(formControlName, NameFormControl, args)
+  const {
+    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps
+  } = creditCardFormControl?.props ?? {}
   return (
     <FormControlTextField
       fieldLabel={fieldLabel}
       formControl={creditCardFormControl}
       formControlError={error}
       inputMode={inputMode}
-      inputProps={{ 'aria-label': `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex }}
+      inputProps={{
+        'aria-label': `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex,
+      }}
       inputRef={inputRef}
       value={value}
       {...cvcProps}

package/src/components/controls/card/Options.ts

@@ -1,4 +1,6 @@
-import { AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon } from '../../img/index.ts'
+import {
+  AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon,
+} from '../../img/index.ts'
 
 export interface CreditCardInfo {
   icon: string

package/src/components/controls/card/Zip.tsx

@@ -5,9 +5,15 @@ import type { WithFormControlProps } from '../WithFormControlProps.ts'
 import { FormControlTextField } from './FormControlTextField.tsx'
 import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
 
-export const CreditCardZipWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'zip', fieldLabel = 'Zip', ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl)
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}
+export const CreditCardZipWithFormControl: React.FC<WithFormControlProps> = ({
+  formControlName = 'zip', fieldLabel = 'Zip', ...props
+}) => {
+  const {
+    creditCardFormControl, error, inputRef, value,
+  } = useCreditCardFormControl(formControlName, CreditCardZipFormControl)
+  const {
+    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps
+  } = creditCardFormControl?.props ?? {}
 
   return (
     <FormControlTextField
@@ -15,7 +21,9 @@ export const CreditCardZipWithFormControl: React.FC<WithFormControlProps> = ({ f
       formControl={creditCardFormControl}
       formControlError={error}
       inputMode={inputMode}
-      inputProps={{ 'aria-label': `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck }}
+      inputProps={{
+        'aria-label': `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck,
+      }}
       inputRef={inputRef}
       value={value}
       {...cvcProps}

package/src/components/controls/card/cvv/Cvv.tsx

@@ -5,9 +5,15 @@ import type { WithFormControlProps } from '../../WithFormControlProps.ts'
 import { FormControlTextField } from '../FormControlTextField.tsx'
 import { useCreditCardCvvFormControl } from './use.ts'
 
-export const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'cvc', fieldLabel = 'CVC', ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, undefined, CreditCardCvvFormControl)
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}
+export const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({
+  formControlName = 'cvc', fieldLabel = 'CVC', ...props
+}) => {
+  const {
+    creditCardFormControl, error, inputRef, value,
+  } = useCreditCardCvvFormControl(formControlName, undefined, CreditCardCvvFormControl)
+  const {
+    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps
+  } = creditCardFormControl?.props ?? {}
 
   return (
     <FormControlTextField
@@ -15,7 +21,9 @@ export const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({ f
       formControl={creditCardFormControl}
       formControlError={error}
       inputMode={inputMode}
-      inputProps={{ 'aria-label': `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck }}
+      inputProps={{
+        'aria-label': `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck,
+      }}
       inputRef={inputRef}
       value={value}
       {...cvcProps}

package/src/components/controls/card/cvv/use.ts

@@ -11,7 +11,9 @@ export const useCreditCardCvvFormControl = (
   cardNumberControlName = 'cardNumber',
   control?: new () => FormControlBase<StandardTextFieldProps>,
 ) => {
-  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control)
+  const {
+    creditCardFormControl, error, value, inputRef,
+  } = useCreditCardFormControl(formControlName, control)
 
   // only use FormGroupContext when name is passed
   const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)
@@ -29,5 +31,7 @@ export const useCreditCardCvvFormControl = (
     }
   }, [creditCardFormControl, creditCardNumberFormControl])
 
-  return { creditCardFormControl, error, inputRef, value }
+  return {
+    creditCardFormControl, error, inputRef, value,
+  }
 }

package/src/components/controls/card/number/Number.tsx

@@ -12,8 +12,12 @@ export const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = (
   formControlName = 'cardNumber',
   ...props
 }) => {
-  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl)
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {}
+  const {
+    creditCardFormControl, error, inputRef, type, value,
+  } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl)
+  const {
+    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps
+  } = creditCardFormControl?.props ?? {}
 
   return (
     <FormControlTextField
@@ -22,7 +26,9 @@ export const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = (
       formControlError={error}
       inputRef={inputRef}
       inputMode={inputMode}
-      inputProps={{ 'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck }}
+      inputProps={{
+        'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck,
+      }}
       InputProps={{
         startAdornment:
           type.length > 0

package/src/components/controls/card/number/use.ts

@@ -7,7 +7,9 @@ import type { CreditCardOptions } from '../Options.ts'
 import { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'
 
 export const useCreditCardNumberFormControl = (formControlName?: string, control?: new () => FormControlBase<StandardTextFieldProps>) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control)
+  const {
+    creditCardFormControl, error, inputRef, value,
+  } = useCreditCardFormControl(formControlName, control)
   const [type, setType] = useState('' as keyof CreditCardOptions)
 
   useEffect(() => {
@@ -26,5 +28,7 @@ export const useCreditCardNumberFormControl = (formControlName?: string, control
     }
   }, [creditCardFormControl, inputRef])
 
-  return { creditCardFormControl, error, inputRef, type, value }
+  return {
+    creditCardFormControl, error, inputRef, type, value,
+  }
 }

package/src/components/controls/card/useCreditCardFormControl.tsx

@@ -1,18 +1,20 @@
 import type { StandardTextFieldProps } from '@mui/material'
 import type { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'
-import { useMemo, useRef, useState } from 'react'
+import {
+  useMemo, useRef, useState,
+} from 'react'
 
 import { useFormGroupWithCreditCardInput } from '../../../context/index.ts'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const StableDefaultArgs: any[] = []
+const STABLE_DEFAULT_ARGS: any[] = [] as const
 
 export const useCreditCardFormControl = (
   formControlName?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Control?: new (...args: any[]) => FormControlBase<StandardTextFieldProps>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  args: any[] = StableDefaultArgs,
+  args: any[] = STABLE_DEFAULT_ARGS,
 ) => {
   const [error, setError] = useState('')
   const [value, setValue] = useState<ValidControlValue>('')
@@ -32,5 +34,7 @@ export const useCreditCardFormControl = (
     }
   }, [Control, args, formControlName, formGroup])
 
-  return { creditCardFormControl, error, inputRef, value }
+  return {
+    creditCardFormControl, error, inputRef, value,
+  }
 }

package/src/components/form/Form.tsx

@@ -51,7 +51,12 @@ export const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({
   return (
     <>
       <ErrorRender error={error} />
-      <FlexCol sx={{ flexDirection: { md: 'row', xs: 'column' } }} width="100%" gap={2} {...props}>
+      <FlexCol
+        sx={{ flexDirection: { md: 'row', xs: 'column' } }}
+        width="100%"
+        gap={2}
+        {...props}
+      >
         <Stack flexDirection="column" sx={{ width: '100%' }} gap={2}>
           <InputFieldsStack />
           {ConfirmationButton

package/src/components/form/InputFieldsStack.tsx

@@ -18,20 +18,45 @@ export const InputFieldsStack: React.FC<InputFieldsStackProps> = (props) => {
   const { sx } = props
   return (
     <>
-      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>
+      <Stack
+        gap={2}
+        sx={{
+          flexDirection: { md: 'row', xs: 'column' },
+          ...sx,
+        }}
+        {...props}
+      >
         <NameWithFormControl autoCompleteLabel="given-name" fieldLabel="First" formControlName="firstName" placeholder="Jerry" />
         <NameWithFormControl autoCompleteLabel="family-name" fieldLabel="Last" formControlName="lastName" placeholder="Smith" />
       </Stack>
-      <Stack gap={2} sx={{ flexDirection: { lg: 'row', xs: 'column' }, ...sx }} {...props}>
+      <Stack
+        gap={2}
+        sx={{
+          flexDirection: { lg: 'row', xs: 'column' },
+          ...sx,
+        }}
+        {...props}
+      >
         <Stack width={{ lg: '50%', xs: '100%' }}>
           <CreditCardNumberWithFormControl />
         </Stack>
-        <Stack direction={{ lg: 'row', xs: 'column' }} gap={2} width={{ lg: '50%', xs: '100%' }}>
+        <Stack
+          direction={{ lg: 'row', xs: 'column' }}
+          gap={2}
+          width={{ lg: '50%', xs: '100%' }}
+        >
           <CreditCardCvvWithFormControl />
           <CreditCardExpirationWithFormControl />
         </Stack>
       </Stack>
-      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>
+      <Stack
+        gap={2}
+        sx={{
+          flexDirection: { md: 'row', xs: 'column' },
+          ...sx,
+        }}
+        {...props}
+      >
         <Stack width={{ md: '25%', xs: '100%' }}>
           <CreditCardZipWithFormControl />
         </Stack>

package/src/components/form/useFormStorage.tsx

@@ -5,7 +5,7 @@ import { ArchivistFormGroupStorage } from '@xyo-network/react-form-group'
 
 import type { CreditCardInput } from '../../models/index.ts'
 
-const StorageNameSpace = 'credit-card-fields'
+const STORAGE_NAME_SPACE = 'credit-card-fields' as const
 
 const calculateTTL = (months = 6) => {
   const MS_PER_DAY = 24 * 60 * 60 * 1000
@@ -17,11 +17,15 @@ export const useFormStorage = () => {
   return usePromise(async () => {
     const localStorageArchivist = await StorageArchivist.create({
       account: 'random',
-      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'local' },
+      config: {
+        namespace: STORAGE_NAME_SPACE, schema: StorageArchivistConfigSchema, type: 'local',
+      },
     })
     const sessionStorageArchivist = await StorageArchivist.create({
       account: 'random',
-      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'session' },
+      config: {
+        namespace: STORAGE_NAME_SPACE, schema: StorageArchivistConfigSchema, type: 'session',
+      },
     })
 
     const storage = {
@@ -29,6 +33,8 @@ export const useFormStorage = () => {
       storage: new ArchivistFormGroupStorage(localStorageArchivist),
     }
 
-    return { serialize: true, storage, ttlStorage: calculateTTL() } as FormGroupParams<CreditCardInput>
+    return {
+      serialize: true, storage, ttlStorage: calculateTTL(),
+    } as FormGroupParams<CreditCardInput>
   }, [])
 }

package/src/context/FormGroupCreditCardProvider.tsx

@@ -11,15 +11,22 @@ export interface FormGroupCreditCardProviderProps<TStorage extends Payload = Pay
   params?: FormGroupParams<TStorage>
 }
 
-export const FormGroupCreditCardProvider: React.FC<FormGroupCreditCardProviderProps<CreditCardInput>> = ({ children, params, ...props }) => {
+export const FormGroupCreditCardProvider: React.FC<FormGroupCreditCardProviderProps<CreditCardInput>> = ({
+  children, params, ...props
+}) => {
   const formGroup = useMemo(() => {
     const formGroup = new FormGroup<CreditCardInput, CreditCardInput>(params)
     return formGroup
   }, [params])
 
+  const value = useMemo(() => ({ formGroup, provided: true }), [formGroup])
+
   return (
-    // eslint-disable-next-line @eslint-react/no-unstable-context-value
-    <FormGroupCreditCardContext.Provider value={{ formGroup, provided: true }} {...props}>
+
+    <FormGroupCreditCardContext.Provider
+      value={value}
+      {...props}
+    >
       {children}
     </FormGroupCreditCardContext.Provider>
   )

package/src/stories/form.stories.tsx

@@ -5,9 +5,7 @@ import React from 'react'
 import { CreditCardFormFlexboxWithFormGroupProvider } from '../components/index.ts'
 import type { CreditCardInput } from '../models/index.ts'
 
-export default {
-  title: 'form/CreditCardForm',
-} as Meta<typeof CreditCardFormFlexboxWithFormGroupProvider>
+export default { title: 'form/CreditCardForm' } as Meta<typeof CreditCardFormFlexboxWithFormGroupProvider>
 
 const Template: StoryFn<typeof CreditCardFormFlexboxWithFormGroupProvider> = (args) => {
   return <CreditCardFormFlexboxWithFormGroupProvider ConfirmationButton={Button} {...args} />

package/xy.config.ts

@@ -1,9 +1,7 @@
 import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },