Skip to content

Commit 48a85ea

Browse files
ntatoudntatoud
committed
wip: refactor(file-upload): with react-hook-form
1 parent 212ef85 commit 48a85ea

File tree

10 files changed

+1037
-441
lines changed

10 files changed

+1037
-441
lines changed

‎pnpm-lock.yaml

+597-162
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/FieldUpload/FieldUploadPreview.tsx

+107-106
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,121 @@
1-
import React, { FC, useCallback, useEffect, useState } from 'react';
1+
// TODO : Delete file once migration is done
2+
// import React, { FC, useCallback, useEffect, useState } from 'react';
23

3-
import { Box, Flex, FlexProps, IconButton } from '@chakra-ui/react';
4-
import { useFormContext, useFormFields } from '@formiz/core';
5-
import { LuX } from 'react-icons/lu';
4+
// import { Box, Flex, FlexProps, IconButton } from '@chakra-ui/react';
5+
// import { useFormContext, useFormFields } from '@formiz/core';
6+
// import { LuX } from 'react-icons/lu';
67

7-
import { FieldUploadValue } from '@/components/FieldUpload';
8+
// import { FieldUploadValue } from '@/components/FieldUpload';
89

9-
const ImagePreview = ({
10-
image,
11-
onClick,
12-
}: {
13-
image: string;
14-
onClick: React.MouseEventHandler<HTMLButtonElement>;
15-
}) => {
16-
return (
17-
<Box
18-
position="relative"
19-
bg="gray.200"
20-
height="100%"
21-
aspectRatio="1"
22-
overflow="hidden"
23-
rounded="md"
24-
>
25-
<Box as="img" width="100%" height="100%" objectFit="cover" src={image} />
26-
<IconButton
27-
position="absolute"
28-
top="1"
29-
right="1"
30-
icon={<LuX fontSize="sm" />}
31-
aria-label="Remove"
32-
rounded="full"
33-
minWidth="6"
34-
minHeight="6"
35-
width="6"
36-
height="6"
37-
onClick={onClick}
38-
/>
39-
</Box>
40-
);
41-
};
10+
// const ImagePreview = ({
11+
// image,
12+
// onClick,
13+
// }: {
14+
// image: string;
15+
// onClick: React.MouseEventHandler<HTMLButtonElement>;
16+
// }) => {
17+
// return (
18+
// <Box
19+
// position="relative"
20+
// bg="gray.200"
21+
// height="100%"
22+
// aspectRatio="1"
23+
// overflow="hidden"
24+
// rounded="md"
25+
// >
26+
// <Box as="img" width="100%" height="100%" objectFit="cover" src={image} />
27+
// <IconButton
28+
// position="absolute"
29+
// top="1"
30+
// right="1"
31+
// icon={<LuX fontSize="sm" />}
32+
// aria-label="Remove"
33+
// rounded="full"
34+
// minWidth="6"
35+
// minHeight="6"
36+
// width="6"
37+
// height="6"
38+
// onClick={onClick}
39+
// />
40+
// </Box>
41+
// );
42+
// };
4243

43-
export type FieldUploadPreviewProps = FlexProps & {
44-
uploaderName: string;
45-
};
44+
// export type FieldUploadPreviewProps = FlexProps & {
45+
// uploaderName: string;
46+
// };
4647

47-
export const FieldUploadPreview: FC<
48-
React.PropsWithChildren<FieldUploadPreviewProps>
49-
> = ({ uploaderName, ...rest }) => {
50-
const fields = useFormFields({
51-
fields: [uploaderName] as const, // To get the uploader values
52-
});
53-
const form = useFormContext();
48+
// export const FieldUploadPreview: FC<
49+
// React.PropsWithChildren<FieldUploadPreviewProps>
50+
// > = ({ uploaderName, ...rest }) => {
51+
// const fields = useFormFields({
52+
// fields: [uploaderName] as const, // To get the uploader values
53+
// });
54+
// const form = useFormContext();
5455

55-
const [fileToPreview, setFileToPreview] = useState<string>();
56+
// const [fileToPreview, setFileToPreview] = useState<string>();
5657

57-
const previewFile = useCallback(async () => {
58-
const uploaderFieldValue = fields?.[uploaderName]
59-
?.value as FieldUploadValue;
58+
// const previewFile = useCallback(async () => {
59+
// const uploaderFieldValue = fields?.[uploaderName]
60+
// ?.value as FieldUploadValue;
6061

61-
if (
62-
!uploaderFieldValue ||
63-
(!uploaderFieldValue.fileUrl && !uploaderFieldValue.file)
64-
) {
65-
setFileToPreview(undefined);
66-
return;
67-
}
62+
// if (
63+
// !uploaderFieldValue ||
64+
// (!uploaderFieldValue.fileUrl && !uploaderFieldValue.file)
65+
// ) {
66+
// setFileToPreview(undefined);
67+
// return;
68+
// }
6869

69-
const hasUserUploadedAFile = uploaderFieldValue.file;
70-
const hasDefaultFileSet =
71-
uploaderFieldValue.fileUrl && !hasUserUploadedAFile;
70+
// const hasUserUploadedAFile = uploaderFieldValue.file;
71+
// const hasDefaultFileSet =
72+
// uploaderFieldValue.fileUrl && !hasUserUploadedAFile;
7273

73-
if (hasDefaultFileSet) {
74-
setFileToPreview(uploaderFieldValue.fileUrl);
75-
return;
76-
}
74+
// if (hasDefaultFileSet) {
75+
// setFileToPreview(uploaderFieldValue.fileUrl);
76+
// return;
77+
// }
7778

78-
const uploadedFileToPreview = await new Promise<string>(
79-
(resolve, reject) => {
80-
const reader = new FileReader();
81-
reader.onloadend = () => resolve(reader.result?.toString() ?? '');
82-
reader.onerror = reject;
83-
if (uploaderFieldValue.file) {
84-
reader.readAsDataURL(uploaderFieldValue.file);
85-
}
86-
}
87-
);
79+
// const uploadedFileToPreview = await new Promise<string>(
80+
// (resolve, reject) => {
81+
// const reader = new FileReader();
82+
// reader.onloadend = () => resolve(reader.result?.toString() ?? '');
83+
// reader.onerror = reject;
84+
// if (uploaderFieldValue.file) {
85+
// reader.readAsDataURL(uploaderFieldValue.file);
86+
// }
87+
// }
88+
// );
8889

89-
setFileToPreview(uploadedFileToPreview);
90-
}, [fields, uploaderName]);
90+
// setFileToPreview(uploadedFileToPreview);
91+
// }, [fields, uploaderName]);
9192

92-
useEffect(() => {
93-
previewFile();
94-
}, [previewFile]);
93+
// useEffect(() => {
94+
// previewFile();
95+
// }, [previewFile]);
9596

96-
return (
97-
fileToPreview && (
98-
<Flex
99-
mt={2}
100-
background="white"
101-
height="32"
102-
width="full"
103-
rounded="md"
104-
boxShadow="sm"
105-
border="1px solid"
106-
borderColor="gray.200"
107-
alignItems="center"
108-
p={4}
109-
{...rest}
110-
>
111-
<ImagePreview
112-
image={fileToPreview}
113-
onClick={() => {
114-
form.setValues({ [uploaderName]: null });
115-
}}
116-
/>
117-
</Flex>
118-
)
119-
);
120-
};
97+
// return (
98+
// fileToPreview && (
99+
// <Flex
100+
// mt={2}
101+
// background="white"
102+
// height="32"
103+
// width="full"
104+
// rounded="md"
105+
// boxShadow="sm"
106+
// border="1px solid"
107+
// borderColor="gray.200"
108+
// alignItems="center"
109+
// p={4}
110+
// {...rest}
111+
// >
112+
// <ImagePreview
113+
// image={fileToPreview}
114+
// onClick={() => {
115+
// form.setValues({ [uploaderName]: null });
116+
// }}
117+
// />
118+
// </Flex>
119+
// )
120+
// );
121+
// };

‎src/components/FieldUpload/docs.stories.tsx

+69-65
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,84 @@
1-
import React from 'react';
2-
3-
import { Box, Button, Stack } from '@chakra-ui/react';
4-
import { Formiz, useForm } from '@formiz/core';
1+
// TODO : Delete file once migration is done
52
import { Meta } from '@storybook/react';
63

7-
import { FieldUploadPreview } from '@/components/FieldUpload/FieldUploadPreview';
8-
import { useFieldUploadFileFromUrl } from '@/components/FieldUpload/utils';
4+
// import React from 'react';
5+
6+
// import { Box, Button, Stack } from '@chakra-ui/react';
7+
// import { Formiz, useForm } from '@formiz/core';
8+
9+
// import { FieldUploadPreview } from '@/components/FieldUpload/FieldUploadPreview';
10+
// import { useFieldUploadFileFromUrl } from '@/components/FieldUpload/utils';
911

10-
import { FieldUpload, FieldUploadValue } from '.';
12+
// import { FieldUpload, FieldUploadValue } from '.';
1113

1214
export default {
1315
title: 'Fields/FieldUpload',
1416
} satisfies Meta;
15-
1617
export const Default = () => {
17-
const form = useForm({ onSubmit: console.log });
18-
return (
19-
<Formiz connect={form} autoForm>
20-
<Stack spacing={4}>
21-
<FieldUpload name="file" label="File" />
22-
<Box>
23-
<Button type="submit">Submit</Button>
24-
</Box>
25-
</Stack>
26-
</Formiz>
27-
);
18+
return <></>;
2819
};
20+
// export const Default = () => {
21+
// const form = useForm({ onSubmit: console.log });
22+
// return (
23+
// <Formiz connect={form} autoForm>
24+
// <Stack spacing={4}>
25+
// <FieldUpload name="file" label="File" />
26+
// <Box>
27+
// <Button type="submit">Submit</Button>
28+
// </Box>
29+
// </Stack>
30+
// </Formiz>
31+
// );
32+
// };
2933

30-
export const DefaultValue = () => {
31-
const initialFiles = useFieldUploadFileFromUrl(
32-
'https://plus.unsplash.com/premium_photo-1674593231084-d8b27596b134?auto=format&fit=crop&q=60&w=800&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8'
33-
);
34+
// export const DefaultValue = () => {
35+
// const initialFiles = useFieldUploadFileFromUrl(
36+
// 'https://plus.unsplash.com/premium_photo-1674593231084-d8b27596b134?auto=format&fit=crop&q=60&w=800&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8'
37+
// );
3438

35-
const form = useForm({
36-
ready: initialFiles.isSuccess,
37-
initialValues: {
38-
file: initialFiles.data,
39-
},
40-
onSubmit: console.log,
41-
});
39+
// const form = useForm({
40+
// ready: initialFiles.isSuccess,
41+
// initialValues: {
42+
// file: initialFiles.data,
43+
// },
44+
// onSubmit: console.log,
45+
// });
4246

43-
return (
44-
<Formiz connect={form} autoForm>
45-
<Stack spacing={4}>
46-
<FieldUpload name="file" label="File" />
47-
<Box>
48-
<Button type="submit">Submit</Button>
49-
</Box>
50-
</Stack>
51-
</Formiz>
52-
);
53-
};
47+
// return (
48+
// <Formiz connect={form} autoForm>
49+
// <Stack spacing={4}>
50+
// <FieldUpload name="file" label="File" />
51+
// <Box>
52+
// <Button type="submit">Submit</Button>
53+
// </Box>
54+
// </Stack>
55+
// </Formiz>
56+
// );
57+
// };
5458

55-
export const WithPreview = () => {
56-
const file: FieldUploadValue = {
57-
fileUrl:
58-
'https://plus.unsplash.com/premium_photo-1674593231084-d8b27596b134?auto=format&fit=crop&q=60&w=800&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8',
59-
name: 'mon-image',
60-
};
59+
// export const WithPreview = () => {
60+
// const file: FieldUploadValue = {
61+
// fileUrl:
62+
// 'https://plus.unsplash.com/premium_photo-1674593231084-d8b27596b134?auto=format&fit=crop&q=60&w=800&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8',
63+
// name: 'mon-image',
64+
// };
6165

62-
const form = useForm({
63-
initialValues: {
64-
file: file,
65-
},
66-
onSubmit: console.log,
67-
});
66+
// const form = useForm({
67+
// initialValues: {
68+
// file: file,
69+
// },
70+
// onSubmit: console.log,
71+
// });
6872

69-
return (
70-
<Formiz connect={form} autoForm>
71-
<Stack spacing={4}>
72-
<FieldUpload name="file" label="File" />
73-
<FieldUploadPreview uploaderName="file" />
74-
<Box>
75-
<Button type="submit">Submit</Button>
76-
</Box>
77-
</Stack>
78-
</Formiz>
79-
);
80-
};
73+
// return (
74+
// <Formiz connect={form} autoForm>
75+
// <Stack spacing={4}>
76+
// <FieldUpload name="file" label="File" />
77+
// <FieldUploadPreview uploaderName="file" />
78+
// <Box>
79+
// <Button type="submit">Submit</Button>
80+
// </Box>
81+
// </Stack>
82+
// </Formiz>
83+
// );
84+
// };

0 commit comments

Comments
 (0)