Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(forms/TextareaField): add new textarea field and corresponding formik component #101

Merged
merged 3 commits into from
Jul 17, 2024
Merged

feat(forms/TextareaField): add new textarea field and corresponding formik component #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
675ee34
feat(forms/TextareaField): add new textarea field
sjschlapbach Jul 17, 2024
ff059f3
chore: fix type errors in text field stories
sjschlapbach Jul 17, 2024
888f53a
feat(forms/NewFormikTextareaField): add new formik wrapper component …
sjschlapbach Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/forms/NewFormikTextField.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,11 +171,11 @@ export const OnChangeError = () => (
<div>
<Form>
<FormikTextField
isTouched
error="Error message"
hideError={false}
value={values.name}
onChange={(newValue) => {
setFieldValue('name', newValue.replace(/\s/g, ''))
setFieldValue('name', newValue)
}}
label="Label"
tooltip="Tooltip for this input"
Expand Down
349 changes: 349 additions & 0 deletions src/forms/NewFormikTextareaField.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,349 @@
import { Form, Formik } from 'formik'
import React from 'react'
import * as yup from 'yup'
import Button from '../Button'
import FormikTextareaField from './NewFormikTextareaField'

export const Default = () => (
<div>
<div>The default Formik field works with a "name" input</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values }) => {
return (
<div>
<Form>
<FormikTextareaField
name="name"
label="Label"
tooltip="Tooltip for this input"
className={{ root: 'mb-1' }}
placeholder="Placeholder"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const MaxLength = () => (
<div>
<div>
The Formik field works with a "name" input and maximum length (including
label)
</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values }) => {
return (
<div>
<Form>
<FormikTextareaField
name="name"
label="Label"
tooltip="Tooltip for this input"
className={{ root: 'mb-1' }}
placeholder="Placeholder"
maxLength={20}
maxLengthUnit="characters"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const Disabled = () => (
<div>
<div>The default Formik field works with a "name" input</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values }) => {
return (
<div>
<Form>
<FormikTextareaField
disabled
name="name"
label="Label"
tooltip="Tooltip for a disabled text field"
className={{ root: 'mb-1' }}
placeholder="Placeholder (disabled field)"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const Required = () => (
<div>
<div>
By adding a required attribute, the label of the field changes it
appearance
</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values }) => {
return (
<div>
<Form>
<FormikTextareaField
required
name="name"
label="Label"
tooltip="Tooltip for this input"
className={{ root: 'mb-1' }}
placeholder="Placeholder"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const OnChangeFunction = () => (
<div>
<div>
An alternative version of the text field input allows to work with a
"value" and "onChange" attribute instead of the "name" attribute. This
field is modified in a way that whitespaces are removed from the input on
change.
</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values, setFieldValue }) => {
return (
<div>
<Form>
<FormikTextareaField
value={values.name}
onChange={(newValue) => {
setFieldValue('name', newValue.replace(/\s/g, ''))
}}
label="Label"
tooltip="Tooltip for this input"
className={{ root: 'mb-1' }}
placeholder="Placeholder"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const OnChangeError = () => (
<div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values, setFieldValue }) => {
return (
<div>
<Form>
<FormikTextareaField
isTouched
error="Error message"
value={values.name}
onChange={(newValue) => {
setFieldValue('name', newValue)
}}
label="Label"
tooltip="Tooltip for this input"
className={{ root: 'mb-1' }}
placeholder="Placeholder"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const Styled = () => (
<div>
<div>The default Formik field works with a "name" input</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values }) => {
return (
<div>
<Form>
<FormikTextareaField
name="name"
label="Label"
tooltip="Tooltip for this input"
className={{
root: 'mb-1 w-1/2',
label: 'text-red-500',
input: 'bg-uzh-blue-20',
error: 'text-red-700',
}}
placeholder="Placeholder"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const Validation = () => (
<div>
<div>
This text field should have a maximum length of 10 characters or will
display an error otherwise.
</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
validationSchema={yup.object().shape({
name: yup
.string()
.required('This field is required')
.max(10, 'Max 10 characters'),
})}
>
{({ values }) => {
return (
<div>
<Form>
<FormikTextareaField
name="name"
label="Label"
tooltip="Tooltip for this input"
className={{ root: 'mb-1' }}
placeholder="Placeholder"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)

export const LargeLabel = () => (
<div>
<div>Formik text area component with a large label</div>
<Formik
initialValues={{
name: '',
}}
isInitialValid={false}
onSubmit={async (values, { resetForm }) => {
alert(`Form submitted with value: ${values.name}`)
resetForm()
}}
>
{({ values }) => {
return (
<div>
<Form>
<FormikTextareaField
required
name="name"
label="Label"
labelType="large"
tooltip="Tooltip for this input"
className={{ root: 'mb-1' }}
placeholder="Placeholder"
/>
<Button type="submit">Submit</Button>
</Form>
<div>Value: {values.name}</div>
</div>
)
}}
</Formik>
</div>
)
Loading
Loading