Skip to content

Commit

Permalink
refactor: replace old formik components through new versions (#128)
Browse files Browse the repository at this point in the history
* fix: replace old formik components through new versions

* chore: fix typo
  • Loading branch information
sjschlapbach authored Aug 16, 2024
1 parent 182a81d commit 6b8c390
Show file tree
Hide file tree
Showing 40 changed files with 1,471 additions and 4,843 deletions.
69 changes: 67 additions & 2 deletions packages/design-system/src/forms/FormikColorPicker.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Form, Formik } from 'formik'
import * as Yup from 'yup'
import Button from '../Button'
import FormikColorPicker from './FormikColorPicker'

Expand All @@ -19,7 +20,12 @@ export const Default = () => (
return (
<div>
<Form>
<FormikColorPicker name="color" className={{ root: 'mb-4' }} />
<FormikColorPicker
name="color"
submitText="Save"
colorLabel="Color"
className={{ root: 'mb-4' }}
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.color}</div>
Expand Down Expand Up @@ -49,7 +55,19 @@ export const Label = () => (
<Form>
<FormikColorPicker
required
label="Color Picker"
submitText="Save"
colorLabel="Color"
label="Picker"
tooltip="This is a tooltip"
name="color"
className={{ root: 'mb-4' }}
/>
<FormikColorPicker
required
submitText="Save"
colorLabel="Color"
label="Picker"
labelType="large"
tooltip="This is a tooltip"
name="color"
className={{ root: 'mb-4' }}
Expand Down Expand Up @@ -85,6 +103,8 @@ export const Disabled = () => (
disabled
name="color"
className={{ root: 'mb-4' }}
submitText="Save"
colorLabel="Color"
/>
<Button type="submit">Submit</Button>
</Form>
Expand Down Expand Up @@ -117,6 +137,51 @@ export const CustomPresets = () => (
name="color"
className={{ root: 'mb-4' }}
presetColors={['#FF0000', '#00FF00', '#0000FF']}
submitText="Save"
colorLabel="Color"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.color}</div>
</div>
)
}}
</Formik>
</div>
)

export const Validation = () => (
<div>
<div>
The selected color has to be red (#FF0000), otherwise an error will be
displayed
</div>
<Formik
initialValues={{
color: '#FF0000',
}}
onSubmit={async (values, { resetForm }) => {
alert(
`Form submitted with color: ${values.color}. The form will be reset.`
)
resetForm()
}}
validationSchema={Yup.object().shape({
color: Yup.string()
.required()
.matches(/^#(?:[fF]{2}[0]{4})$/, 'The color has to be red'),
})}
>
{({ values, validateForm }) => {
return (
<div>
<Form>
<FormikColorPicker
name="color"
submitText="Save"
colorLabel="Color"
validateForm={validateForm}
className={{ root: 'mb-4' }}
/>
<Button type="submit">Submit</Button>
</Form>
Expand Down
133 changes: 66 additions & 67 deletions packages/design-system/src/forms/FormikColorPicker.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,27 @@
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
import { IconDefinition } from '@fortawesome/free-regular-svg-icons'
import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useField } from 'formik'
import React from 'react'
import React, { useEffect } from 'react'
import { twMerge } from 'tailwind-merge'
import ColorPicker, { ColorPickerClassName } from '../ColorPicker'
import Label from './Label'
import FormLabel from '../FormLabel'
import { Tooltip } from '../Tooltip'

export interface FormikColorPickerProps {
id?: string
name: string
label?: string
labelType?: 'small' | 'normal'
labelType?: 'small' | 'large'
validateForm?: () => void
tooltip?: string | React.ReactNode
required?: boolean
hideError?: boolean
disabled?: boolean
triggerIcon?: IconDefinition
presetColors?: string[]
position?: 'bottom' | 'top'
abortText?: string
submitText?: string
className?: {
root?: string
label?: string
field?: string
tooltip?: string
error?: string
colorPicker?: ColorPickerClassName
}
submitText: string
colorLabel: string
colorTooltip?: string
dataTrigger?: {
cy?: string
test?: string
Expand All @@ -35,89 +30,93 @@ export interface FormikColorPickerProps {
cy?: string
test?: string
}
dataAbort?: {
cy?: string
test?: string
}
dataSubmit?: {
cy?: string
test?: string
}
className?: {
root?: string
label?: string
tooltip?: string
picker?: ColorPickerClassName
}
}

export function FormikColorPicker({
id,
name,
label,
labelType,
labelType = 'small',
validateForm,
tooltip,
required = false,
hideError = false,
disabled = false,
disabled,
triggerIcon,
presetColors,
position,
submitText,
className,
colorLabel,
colorTooltip,
dataTrigger,
dataHexInput,
dataSubmit,
className,
}: FormikColorPickerProps) {
const [field, meta, helpers] = useField(name || 'missing')
const [field, meta, helpers] = useField(name)

useEffect(() => {
validateForm?.()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [field.value])

return (
<div className={twMerge('flex flex-col', className?.root)} id={id}>
<div
className={twMerge(
'flex w-full flex-row',
labelType === 'small' && 'flex-col',
className?.field
)}
>
{label && (
<Label
forId={id}
required={required}
label={label}
className={{
root: twMerge(
'my-auto mr-2 min-w-max font-bold',
labelType === 'small' &&
'mt-1 text-sm font-normal leading-6 text-gray-600',
className?.label
),
tooltip: twMerge('text-sm font-normal', className?.tooltip),
tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
}}
tooltip={tooltip}
showTooltipSymbol={typeof tooltip !== 'undefined'}
/>
)}
<div
className={twMerge(
'flex w-full flex-row',
labelType === 'small' && 'flex-col',
className?.root
)}
>
{label && (
<FormLabel
required={required}
label={label}
labelType={labelType}
tooltip={tooltip}
className={className}
/>
)}
<div className="flex flex-row items-center gap-2">
<ColorPicker
color={field.value}
onSubmit={(newColor: string) => helpers.setValue(newColor)}
onSubmit={(newValue) => {
helpers.setValue(newValue)
helpers.setTouched(true)
}}
disabled={disabled}
triggerIcon={triggerIcon}
presetColors={presetColors}
position={position}
submitText={submitText ?? 'Submit'}
colorLabel={label ?? 'Color'}
submitText={submitText}
colorLabel={colorLabel}
tooltip={colorTooltip}
dataTrigger={dataTrigger}
dataHexInput={dataHexInput}
dataSubmit={dataSubmit}
className={className?.colorPicker}
className={className?.picker}
/>
{meta.error && meta.touched && (
<Tooltip
tooltip={meta.error}
delay={0}
className={{ tooltip: 'text-sm' }}
>
<FontAwesomeIcon
icon={faCircleExclamation}
className="mr-1 text-red-600"
/>
</Tooltip>
)}
</div>
{!hideError && meta.touched && meta.error && (
<div
className={twMerge(
'w-full text-right text-sm text-red-400',
className?.error
)}
>
{meta.error}
</div>
)}
</div>
)
}
Expand Down
44 changes: 44 additions & 0 deletions packages/design-system/src/forms/FormikDateChanger.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Form, Formik } from 'formik'
import * as Yup from 'yup'
import Button from '../Button'
import FormikDateChanger from './FormikDateChanger'

Expand Down Expand Up @@ -119,3 +120,46 @@ export const Tooltip = () => (
</Formik>
</div>
)

export const Validation = () => (
<div>
<div>
The date has to be chosen to be after 2020 - otherwise the component
displays an error.
</div>
<Formik
initialValues={{
date: '2023-01-01',
}}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with date: ${values.date}`)
resetForm()
}}
validationSchema={Yup.object().shape({
date: Yup.date().min('2020-01-01', 'Date has to be after 2020'),
})}
>
{({ values, isValid, validateForm }) => {
return (
<div>
<Form>
{String(isValid)}
<FormikDateChanger
required
name="date"
className={{ root: 'mb-2' }}
label="Testlabel"
tooltip="Test Tooltip"
validateField={() => validateForm()}
/>
<Button type="submit" disabled={!isValid}>
Submit
</Button>
</Form>
<div>Value: {values.date}</div>
</div>
)
}}
</Formik>
</div>
)
Loading

0 comments on commit 6b8c390

Please sign in to comment.