feat(formik): add generics to checkbox and radio button groups

The core components for RadioButtonGroup supports a generic to narrow
the values (e.g. using an enum). All Formik components should also
support this, but it was missing from the FormikRadioButtonGroup.

In addition the FormikCheckboxGroupField also supports the same generic
constructions as the base FormikCheckboxGroup.

Author: Tigge

packages/formik/src/FormikCheckboxGroup.tsx

@@ -1,7 +1,12 @@
 // Libraries
 import React, { useMemo } from 'react'
 import { FieldConfig, useField } from 'formik'
-import { Checkbox, spacing, withField } from 'practical-react-components-core'
+import {
+  Checkbox,
+  FieldProps,
+  spacing,
+  withField,
+} from 'practical-react-components-core'
 import styled, { css } from 'styled-components'
 
 export interface CheckboxGroupOption<V extends string | number> {
@@ -88,4 +93,6 @@ export function FormikCheckboxGroup<V extends string | number>({
   )
 }
 
-export const FormikCheckboxGroupField = withField(FormikCheckboxGroup)
+export const FormikCheckboxGroupField = <V extends string | number>(
+  props: FieldProps & FormikCheckboxGroupProps<V>
+) => withField<FormikCheckboxGroupProps<V>>(FormikCheckboxGroup)(props)

packages/formik/src/FormikRadioButtonGroup.tsx

@@ -1,24 +1,27 @@
 import React from 'react'
 import { useField, FieldConfig } from 'formik'
 import {
+  FieldProps,
   RadioButtonGroup,
   RadioButtonGroupProps,
   withField,
 } from 'practical-react-components-core'
 
-export interface FormikRadioButtonGroupProps
-  extends Omit<RadioButtonGroupProps, 'name' | 'value'>,
-    Partial<Pick<RadioButtonGroupProps, 'value'>>,
+export interface FormikRadioButtonGroupProps<V extends string = string>
+  extends Omit<RadioButtonGroupProps<V>, 'name' | 'value'>,
+    Partial<Pick<RadioButtonGroupProps<V>, 'value'>>,
     Pick<FieldConfig, 'name' | 'validate'> {}
 
-export const FormikRadioButtonGroup: React.FC<FormikRadioButtonGroupProps> = ({
+export function FormikRadioButtonGroup<V extends string = string>({
   name,
   validate,
   ...props
-}) => {
+}: FormikRadioButtonGroupProps<V>) {
   const [field] = useField({ name, validate })
 
   return <RadioButtonGroup {...field} {...props} />
 }
 
-export const FormikRadioButtonGroupField = withField(FormikRadioButtonGroup)
+export const FormikRadioButtonGroupField = <V extends string = string>(
+  props: FieldProps & FormikRadioButtonGroupProps<V>
+) => withField<FormikRadioButtonGroupProps<V>>(FormikRadioButtonGroup)(props)