Skip to content

Commit 583e8bc

Browse files
dpellierdpellier
committed
refactor(form-field): use custom simplier one and apply everywhere
1 parent 6aae609 commit 583e8bc

File tree

64 files changed

+855
-500
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+855
-500
lines changed

‎.eslintrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
"object-curly-spacing": ["error", "always"],
8686
"operator-linebreak": ["error", "before", { "overrides": { "&&": "after" }}],
8787
"quotes": ["error", "single"],
88+
"react/display-name": 0,
8889
"react/prop-types": 0,
8990
"semi": ["error", "always"],
9091
"sort-imports": [

‎packages/examples/vite-app/src/app/components/formFormik/FormFormik.tsx

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
import { Button, FormField, FormFieldError, FormFieldHelper, FormFieldLabel, Textarea } from '@ovhcloud/ods-react';
1+
import { Button, FormField, FormFieldError, FormFieldHelper, FormFieldLabel, Quantity, QuantityControl, QuantityInput, Textarea } from '@ovhcloud/ods-react';
22
import { useFormik } from 'formik';
33
import { type ReactElement } from 'react';
44
import * as yup from 'yup';
55
import styles from './formFormik.module.scss';
66

77
type FormData = {
8+
quantity: string,
89
textarea: string,
910
}
1011

1112
const validationSchema = yup.object<FormData>({
13+
quantity: yup.string().nullable().required(),
1214
textarea: yup.string().nullable().required(),
1315
});
1416

1517
function FormFormik(): ReactElement {
1618
const formik = useFormik<FormData>({
1719
initialValues: {
20+
quantity: '42',
1821
textarea: 'default textarea',
1922
},
2023
onSubmit: (values) => {
@@ -28,6 +31,32 @@ function FormFormik(): ReactElement {
2831
<form
2932
className={ styles['form-formik'] }
3033
onSubmit={ formik.handleSubmit }>
34+
<FormField invalid={ formik.touched.quantity && !!formik.errors.quantity }>
35+
<FormFieldLabel>
36+
Quantity:
37+
</FormFieldLabel>
38+
39+
<Quantity
40+
defaultValue={ formik.initialValues.quantity }
41+
name="quantity"
42+
onValueChange={ ({ value }) => {
43+
formik.setFieldValue('quantity', value);
44+
}}
45+
required={ true }>
46+
<QuantityControl>
47+
<QuantityInput onBlur={ formik.handleBlur } />
48+
</QuantityControl>
49+
</Quantity>
50+
51+
<FormFieldHelper>
52+
This is a quantity to fill
53+
</FormFieldHelper>
54+
55+
<FormFieldError>
56+
Error while filling quantity
57+
</FormFieldError>
58+
</FormField>
59+
3160
<FormField invalid={ formik.touched.textarea && !!formik.errors.textarea }>
3261
<FormFieldLabel>
3362
Textarea:

‎packages/examples/webpack-app/src/app/App.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { type ReactElement } from 'react';
2-
import { FormFormik } from './components/formFormik/FormFormik';
3-
// import { FormHookForm } from './components/formHookForm/FormHookForm';
2+
// import { FormFormik } from './components/formFormik/FormFormik';
3+
import { FormHookForm } from './components/formHookForm/FormHookForm';
44
// import { FormNative } from './components/formNative/FormNative';
55

66
function App(): ReactElement {
77
return (
88
<div>
9-
<FormFormik />
10-
{/*<FormHookForm />*/}
9+
{/*<FormFormik />*/}
10+
<FormHookForm />
1111
{/*<FormNative />*/}
1212
</div>
1313
);

‎packages/examples/webpack-app/src/app/components/formFormik/FormFormik.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
Password,
77
PhoneNumber, PhoneNumberControl, PhoneNumberCountryList,
88
Quantity, QuantityControl, QuantityInput,
9-
Radio, RadioControl, RadioLabel, RadioGroup, RadioGroupLabel,
9+
Radio, RadioControl, RadioLabel, RadioGroup,
1010
Select, SelectContent, SelectControl,
1111
Textarea,
1212
Timepicker, TimepickerControl,
@@ -232,9 +232,9 @@ function FormFormik(): ReactElement {
232232
formik.setFieldValue('radioGroup', value);
233233
}}>
234234
<FormField>
235-
<RadioGroupLabel>
235+
<FormFieldLabel>
236236
Radio group:
237-
</RadioGroupLabel>
237+
</FormFieldLabel>
238238

239239
<Radio
240240
required={ true }

‎packages/examples/webpack-app/src/app/components/formHookForm/FormHookForm.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
Password,
77
PhoneNumber, PhoneNumberControl, PhoneNumberCountryList,
88
Quantity, QuantityControl, QuantityInput,
9-
Radio, RadioControl, RadioLabel, RadioGroup, RadioGroupLabel,
9+
Radio, RadioControl, RadioLabel, RadioGroup,
1010
Select, SelectContent, SelectControl,
1111
Textarea,
1212
Timepicker, TimepickerControl,
@@ -243,9 +243,9 @@ function FormHookForm(): ReactElement {
243243
<RadioGroup
244244
defaultValue={ defaultValue.radioGroup }
245245
onValueChange={ ({ value }) => value && setValue(field.name, value) }>
246-
<RadioGroupLabel>
246+
<FormFieldLabel>
247247
Radio Group:
248-
</RadioGroupLabel>
248+
</FormFieldLabel>
249249

250250
<Radio
251251
invalid={ !!errors.radioGroup }

‎packages/examples/webpack-app/src/app/components/formNative/FormNative.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
Password,
77
PhoneNumber, PhoneNumberControl, PhoneNumberCountryList,
88
Quantity, QuantityControl, QuantityInput,
9-
Radio, RadioControl, RadioLabel, RadioGroup, RadioGroupLabel,
9+
Radio, RadioControl, RadioLabel, RadioGroup,
1010
Select, SelectContent, SelectControl,
1111
Textarea,
1212
Timepicker, TimepickerControl,
@@ -180,9 +180,9 @@ function FormNative(): ReactElement {
180180

181181
<FormField>
182182
<RadioGroup name="radioGroup">
183-
<RadioGroupLabel>
183+
<FormFieldLabel>
184184
Radio group:
185-
</RadioGroupLabel>
185+
</FormFieldLabel>
186186

187187
<Radio
188188
required={ areAllRequired }

‎packages/ods-react/src/components/checkbox/src/components/checkbox/Checkbox.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Checkbox as VendorCheckbox } from '@ark-ui/react/checkbox';
22
import classNames from 'classnames';
33
import { type ComponentPropsWithRef, type FC, type JSX, forwardRef } from 'react';
4+
import { withFormField } from '../../../../form-field/src';
45
import style from './checkbox.module.scss';
56

67
type CheckboxCheckedState = boolean | 'indeterminate';
@@ -20,7 +21,7 @@ interface CheckboxProp extends ComponentPropsWithRef<'label'> {
2021
value?: string,
2122
}
2223

23-
const Checkbox: FC<CheckboxProp> = forwardRef(({
24+
const Checkbox: FC<CheckboxProp> = withFormField(forwardRef(({
2425
checked,
2526
children,
2627
className,
@@ -49,7 +50,7 @@ const Checkbox: FC<CheckboxProp> = forwardRef(({
4950
{ children }
5051
</VendorCheckbox.Root>
5152
);
52-
});
53+
}));
5354

5455
Checkbox.displayName = 'Checkbox';
5556

‎packages/ods-react/src/components/checkbox/src/dev.stories.tsx

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Checkbox, CheckboxControl, CheckboxGroup, CheckboxLabel } from '.';
2-
import { FormField } from '../../form-field/src';
2+
import { FormField, FormFieldError } from '../../form-field/src';
33
import { TEXT_PRESET, Text } from '../../text/src';
44
import style from './dev.module.css';
55

@@ -8,6 +8,40 @@ export default {
88
title: 'Checkbox dev',
99
};
1010

11+
export const CustomStyle = () => (
12+
<>
13+
<h4>Single Checkbox with Custom Style</h4>
14+
<Checkbox className={ style['custom-checkbox'] }>
15+
<CheckboxControl className={ style['custom-checkbox-control'] } />
16+
17+
<CheckboxLabel className={ style['custom-checkbox-label'] }>
18+
Custom styled checkbox
19+
</CheckboxLabel>
20+
</Checkbox>
21+
22+
<h4>Checkbox Group with Custom Style</h4>
23+
<CheckboxGroup
24+
className={ style['custom-checkbox-group'] }
25+
name="custom-group">
26+
<Checkbox className={ style['custom-checkbox'] } value="custom1">
27+
<CheckboxControl className={ style['custom-checkbox-control'] } />
28+
29+
<CheckboxLabel className={ style['custom-checkbox-label'] }>
30+
Custom checkbox 1
31+
</CheckboxLabel>
32+
</Checkbox>
33+
34+
<Checkbox className={ style['custom-checkbox'] } value="custom2">
35+
<CheckboxControl className={ style['custom-checkbox-control'] } />
36+
37+
<CheckboxLabel className={ style['custom-checkbox-label'] }>
38+
Custom checkbox 2
39+
</CheckboxLabel>
40+
</Checkbox>
41+
</CheckboxGroup>
42+
</>
43+
);
44+
1145
export const Default = () => (
1246
<Checkbox>
1347
<CheckboxControl />
@@ -46,14 +80,18 @@ export const InFormField = () => (
4680
Legal considerations:
4781
</Text>
4882

49-
<FormField>
83+
<FormField invalid>
5084
<Checkbox>
5185
<CheckboxControl />
5286

5387
<CheckboxLabel>
5488
I agree to the terms and conditions
5589
</CheckboxLabel>
5690
</Checkbox>
91+
92+
<FormFieldError>
93+
Error
94+
</FormFieldError>
5795
</FormField>
5896

5997
<FormField>
@@ -64,6 +102,10 @@ export const InFormField = () => (
64102
I agree to receive marketing communications
65103
</CheckboxLabel>
66104
</Checkbox>
105+
106+
<FormFieldError>
107+
Error
108+
</FormFieldError>
67109
</FormField>
68110
</div>
69111
);
@@ -102,37 +144,3 @@ export const Group = () => (
102144
</Checkbox>
103145
</CheckboxGroup>
104146
);
105-
106-
export const CustomStyle = () => (
107-
<>
108-
<h4>Single Checkbox with Custom Style</h4>
109-
<Checkbox className={ style['custom-checkbox'] }>
110-
<CheckboxControl className={ style['custom-checkbox-control'] } />
111-
112-
<CheckboxLabel className={ style['custom-checkbox-label'] }>
113-
Custom styled checkbox
114-
</CheckboxLabel>
115-
</Checkbox>
116-
117-
<h4>Checkbox Group with Custom Style</h4>
118-
<CheckboxGroup
119-
className={ style['custom-checkbox-group'] }
120-
name="custom-group">
121-
<Checkbox className={ style['custom-checkbox'] } value="custom1">
122-
<CheckboxControl className={ style['custom-checkbox-control'] } />
123-
124-
<CheckboxLabel className={ style['custom-checkbox-label'] }>
125-
Custom checkbox 1
126-
</CheckboxLabel>
127-
</Checkbox>
128-
129-
<Checkbox className={ style['custom-checkbox'] } value="custom2">
130-
<CheckboxControl className={ style['custom-checkbox-control'] } />
131-
132-
<CheckboxLabel className={ style['custom-checkbox-label'] }>
133-
Custom checkbox 2
134-
</CheckboxLabel>
135-
</Checkbox>
136-
</CheckboxGroup>
137-
</>
138-
);

‎packages/ods-react/src/components/file-upload/src/components/file-upload/FileUpload.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { type FileUploadFileRejectDetails, FileUpload as VendorFileUpload } from '@ark-ui/react/file-upload';
22
import classNames from 'classnames';
33
import { type ComponentPropsWithRef, type FC, type JSX, forwardRef, useCallback } from 'react';
4+
import { withFormField } from '../../../../form-field/src';
45
import { type FILE_REJECTION_CAUSE } from '../../constants/file-error';
56
import { mapErrorCodes } from '../../controller/file-upload';
67
import { FileUploadDropzone } from '../file-upload-dropzone/FileUploadDropzone';
@@ -35,7 +36,7 @@ interface FileUploadProp extends ComponentPropsWithRef<'div'> {
3536
triggerLabel?: string,
3637
}
3738

38-
const FileUpload: FC<FileUploadProp> = forwardRef(({
39+
const FileUpload: FC<FileUploadProp> = withFormField(forwardRef(({
3940
accept,
4041
acceptedFileLabel,
4142
children,
@@ -103,7 +104,7 @@ const FileUpload: FC<FileUploadProp> = forwardRef(({
103104
<VendorFileUpload.HiddenInput />
104105
</VendorFileUpload.Root>
105106
);
106-
});
107+
}));
107108

108109
FileUpload.displayName = 'FileUpload';
109110

‎packages/ods-react/src/components/file-upload/src/dev.stories.tsx

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from 'react';
2-
import { FormField, FormFieldLabel } from '../../form-field/src';
2+
import { FormField, FormFieldError, FormFieldLabel } from '../../form-field/src';
33
import { FileUpload, FileUploadItem, FileUploadList } from '.';
44
import style from './dev.module.css';
55

@@ -143,23 +143,36 @@ export const FakeUpload = () => {
143143

144144
export const InFormField = () => {
145145
const [files, setFiles] = useState<File[]>([]);
146+
const [isInvalid, setIsInvalid] = useState(false);
146147

147148
return (
148-
<FormField>
149-
<FormFieldLabel>Files:</FormFieldLabel>
150-
151-
<FileUpload onFileAccept={ ({ files }) => setFiles(files) }>
152-
<FileUploadList>
153-
{
154-
files.map((file: File, idx) => (
155-
<FileUploadItem
156-
file={ file }
157-
key={ idx } />
158-
))
159-
}
160-
</FileUploadList>
161-
</FileUpload>
162-
</FormField>
149+
<>
150+
<button onClick={ () => setIsInvalid((v) => !v) }>
151+
Toggle validity
152+
</button>
153+
154+
<FormField invalid={ isInvalid }>
155+
<FormFieldLabel>
156+
Files:
157+
</FormFieldLabel>
158+
159+
<FileUpload onFileAccept={ ({ files }) => setFiles(files) }>
160+
<FileUploadList>
161+
{
162+
files.map((file: File, idx) => (
163+
<FileUploadItem
164+
file={ file }
165+
key={ idx } />
166+
))
167+
}
168+
</FileUploadList>
169+
</FileUpload>
170+
171+
<FormFieldError>
172+
Error
173+
</FormFieldError>
174+
</FormField>
175+
</>
163176
);
164177
};
165178

0 commit comments

Comments
 (0)