Skip to content

Commit 218306b

Browse files
ShchepotinShchepotin
committed
feat(storybook): add storybook for all component
1 parent c851166 commit 218306b

24 files changed

+949
-12
lines changed

‎src/components/form/avatar-input/form-avatar-input.stories.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from "react";
2+
import { Meta, StoryFn } from "@storybook/nextjs";
3+
import { useForm, FormProvider } from "react-hook-form";
4+
import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
5+
import FormAvatarInput from "./form-avatar-input";
6+
7+
type FormAvatarInputProps = Pick<
8+
ControllerProps<FieldValues, FieldPath<FieldValues>>,
9+
"name" | "defaultValue"
10+
> & {
11+
disabled?: boolean;
12+
testId?: string;
13+
};
14+
15+
export default {
16+
title: "Components/Form/AvatarInput",
17+
component: FormAvatarInput,
18+
} as Meta;
19+
20+
const Template: StoryFn<FormAvatarInputProps> = (args) => {
21+
const methods = useForm({
22+
defaultValues: {
23+
sampleAvatar: null,
24+
},
25+
});
26+
27+
return (
28+
<FormProvider {...methods}>
29+
<form>
30+
<FormAvatarInput {...args} />
31+
</form>
32+
</FormProvider>
33+
);
34+
};
35+
36+
export const Default = Template.bind({});
37+
Default.args = {
38+
name: "sampleAvatar",
39+
testId: "sampleAvatar",
40+
};
41+
42+
export const Disabled = Template.bind({});
43+
Disabled.args = {
44+
name: "sampleAvatar",
45+
testId: "disabledAvatar",
46+
disabled: true,
47+
};
48+
49+
export const WithPrefilledValue = Template.bind({});
50+
WithPrefilledValue.args = {
51+
name: "sampleAvatar",
52+
testId: "prefilledAvatar",
53+
defaultValue: {
54+
id: "1",
55+
path: "https://via.placeholder.com/100x100?text=Avatar",
56+
},
57+
};

‎src/components/form/avatar-input/form-avatar-input.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { useTranslation } from "react-i18next";
1818
import IconButton from "@mui/material/IconButton";
1919
import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
2020

21-
type AvatarInputProps = {
21+
export type AvatarInputProps = {
2222
error?: string;
2323
onChange: (value: FileEntity | null) => void;
2424
onBlur: () => void;

‎src/components/form/date-pickers/date-picker.stories.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from "react";
2+
import { Meta, StoryFn } from "@storybook/nextjs";
3+
import { useForm, FormProvider } from "react-hook-form";
4+
import FormDatePickerInput, { DatePickerFieldProps } from "./date-picker";
5+
6+
export default {
7+
title: "Components/Form/DatePickerInput",
8+
component: FormDatePickerInput,
9+
} as Meta;
10+
11+
const Template: StoryFn<DatePickerFieldProps & { name: string }> = (args) => {
12+
const methods = useForm({
13+
defaultValues: {
14+
sampleDate: null,
15+
},
16+
});
17+
18+
return (
19+
<FormProvider {...methods}>
20+
<form>
21+
<FormDatePickerInput {...args} />
22+
</form>
23+
</FormProvider>
24+
);
25+
};
26+
27+
export const Default = Template.bind({});
28+
Default.args = {
29+
label: "Sample Date Picker",
30+
name: "sampleDate",
31+
testId: "sampleDate",
32+
};
33+
34+
export const WithMinMaxDate = Template.bind({});
35+
WithMinMaxDate.args = {
36+
label: "Date Picker with Min/Max",
37+
name: "sampleDate",
38+
minDate: new Date(2020, 0, 1),
39+
maxDate: new Date(2030, 11, 31),
40+
testId: "minMaxDate",
41+
};
42+
43+
export const Disabled = Template.bind({});
44+
Disabled.args = {
45+
label: "Disabled Date Picker",
46+
name: "sampleDate",
47+
disabled: true,
48+
testId: "disabledDate",
49+
};
50+
51+
export const ReadOnly = Template.bind({});
52+
ReadOnly.args = {
53+
label: "Read Only Date Picker",
54+
name: "sampleDate",
55+
readOnly: true,
56+
testId: "readOnlyDate",
57+
};
58+
59+
export const YearMonthView = Template.bind({});
60+
YearMonthView.args = {
61+
label: "Year/Month View",
62+
name: "sampleDate",
63+
views: ["year", "month"],
64+
testId: "yearMonthDate",
65+
};

‎src/components/form/date-pickers/date-picker.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import useLanguage from "@/services/i18n/use-language";
1616
import { getValueByKey } from "@/components/form/date-pickers/helper";
1717

1818
type ValueDateType = Date | null | undefined;
19-
type DatePickerFieldProps = {
19+
export type DatePickerFieldProps = {
2020
disabled?: boolean;
2121
className?: string;
2222
views?: readonly DateView[] | undefined;
@@ -55,6 +55,7 @@ function DatePickerInput(
5555
disabled={props.disabled}
5656
autoFocus={props.autoFocus}
5757
defaultValue={props.defaultValue}
58+
readOnly={props.readOnly}
5859
slotProps={{
5960
textField: {
6061
helperText: props.error,

‎src/components/form/date-pickers/date-time-picker.stories.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from "react";
2+
import { Meta, StoryFn } from "@storybook/nextjs";
3+
import { useForm, FormProvider } from "react-hook-form";
4+
import FormDateTimePickerInput, {
5+
DateTimePickerFieldProps,
6+
} from "./date-time-picker";
7+
8+
export default {
9+
title: "Components/Form/DateTimePickerInput",
10+
component: FormDateTimePickerInput,
11+
} as Meta;
12+
13+
const Template: StoryFn<DateTimePickerFieldProps & { name: string }> = (
14+
args
15+
) => {
16+
const methods = useForm({
17+
defaultValues: {
18+
sampleDateTime: null,
19+
},
20+
});
21+
22+
return (
23+
<FormProvider {...methods}>
24+
<form>
25+
<FormDateTimePickerInput {...args} />
26+
</form>
27+
</FormProvider>
28+
);
29+
};
30+
31+
export const Default = Template.bind({});
32+
Default.args = {
33+
label: "Sample Date Time Picker",
34+
name: "sampleDateTime",
35+
testId: "sampleDateTime",
36+
};
37+
38+
export const WithMinMaxDate = Template.bind({});
39+
WithMinMaxDate.args = {
40+
label: "Date Time Picker with Min/Max",
41+
name: "sampleDateTime",
42+
minDate: new Date(2020, 0, 1),
43+
maxDate: new Date(2030, 11, 31),
44+
testId: "minMaxDateTime",
45+
};
46+
47+
export const Disabled = Template.bind({});
48+
Disabled.args = {
49+
label: "Disabled Date Time Picker",
50+
name: "sampleDateTime",
51+
disabled: true,
52+
testId: "disabledDateTime",
53+
};
54+
55+
export const ReadOnly = Template.bind({});
56+
ReadOnly.args = {
57+
label: "Read Only Date Time Picker",
58+
name: "sampleDateTime",
59+
readOnly: true,
60+
testId: "readOnlyDateTime",
61+
};
62+
63+
export const CustomViews = Template.bind({});
64+
CustomViews.args = {
65+
label: "Custom Views Date Time Picker",
66+
name: "sampleDateTime",
67+
views: ["day", "hours", "minutes"],
68+
testId: "customViewsDateTime",
69+
};

‎src/components/form/date-pickers/date-time-picker.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import useLanguage from "@/services/i18n/use-language";
1616
import { getValueByKey } from "@/components/form/date-pickers/helper";
1717

1818
type ValueDateType = Date | null | undefined;
19-
type DateTimePickerFieldProps = {
19+
export type DateTimePickerFieldProps = {
2020
disabled?: boolean;
2121
className?: string;
2222
views?: readonly DateOrTimeView[];
@@ -55,6 +55,7 @@ function DateTimePickerInput(
5555
disabled={props.disabled}
5656
autoFocus={props.autoFocus}
5757
defaultValue={props.defaultValue}
58+
readOnly={props.readOnly}
5859
slotProps={{
5960
textField: {
6061
helperText: props.error,

‎src/components/form/date-pickers/time-picker.stories.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from "react";
2+
import { Meta, StoryFn } from "@storybook/nextjs";
3+
import { useForm, FormProvider } from "react-hook-form";
4+
import FormTimePickerInput, { TimePickerFieldProps } from "./time-picker";
5+
6+
export default {
7+
title: "Components/Form/TimePickerInput",
8+
component: FormTimePickerInput,
9+
} as Meta;
10+
11+
const Template: StoryFn<TimePickerFieldProps & { name: string }> = (args) => {
12+
const methods = useForm({
13+
defaultValues: {
14+
sampleTime: null,
15+
},
16+
});
17+
18+
return (
19+
<FormProvider {...methods}>
20+
<form>
21+
<FormTimePickerInput {...args} />
22+
</form>
23+
</FormProvider>
24+
);
25+
};
26+
27+
export const Default = Template.bind({});
28+
Default.args = {
29+
label: "Sample Time Picker",
30+
name: "sampleTime",
31+
testId: "sampleTime",
32+
};
33+
34+
export const WithCustomFormat = Template.bind({});
35+
WithCustomFormat.args = {
36+
label: "Custom Format Time Picker",
37+
name: "sampleTime",
38+
format: "HH:mm:ss",
39+
testId: "customFormatTime",
40+
};
41+
42+
export const WithMinMaxTime = Template.bind({});
43+
WithMinMaxTime.args = {
44+
label: "Time Picker with Min/Max",
45+
name: "sampleTime",
46+
minTime: new Date(0, 0, 0, 9, 0),
47+
maxTime: new Date(0, 0, 0, 17, 0),
48+
testId: "minMaxTime",
49+
};
50+
51+
export const Disabled = Template.bind({});
52+
Disabled.args = {
53+
label: "Disabled Time Picker",
54+
name: "sampleTime",
55+
disabled: true,
56+
testId: "disabledTime",
57+
};
58+
59+
export const ReadOnly = Template.bind({});
60+
ReadOnly.args = {
61+
label: "Read Only Time Picker",
62+
name: "sampleTime",
63+
readOnly: true,
64+
testId: "readOnlyTime",
65+
};
66+
67+
export const HoursMinutesView = Template.bind({});
68+
HoursMinutesView.args = {
69+
label: "Hours/Minutes View",
70+
name: "sampleTime",
71+
views: ["hours", "minutes"],
72+
testId: "hoursMinutesTime",
73+
};

‎src/components/form/date-pickers/time-picker.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import useLanguage from "@/services/i18n/use-language";
1717
import { getValueByKey } from "@/components/form/date-pickers/helper";
1818

1919
type ValueDateType = Date | null | undefined;
20-
type TimePickerFieldProps = {
20+
export type TimePickerFieldProps = {
2121
disabled?: boolean;
2222
className?: string;
2323
views?: readonly TimeView[] | undefined;
@@ -57,6 +57,7 @@ function TimePickerInput(
5757
disabled={props.disabled}
5858
autoFocus={props.autoFocus}
5959
defaultValue={props.defaultValue}
60+
readOnly={props.readOnly}
6061
onClose={props.onBlur}
6162
slotProps={{
6263
textField: {

‎src/components/form/image-picker/image-picker.stories.tsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
import { Meta, StoryFn } from "@storybook/nextjs";
3+
import { useForm, FormProvider } from "react-hook-form";
4+
import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
5+
import FormImagePicker from "./image-picker";
6+
7+
type FormImagePickerProps = Pick<
8+
ControllerProps<FieldValues, FieldPath<FieldValues>>,
9+
"name" | "defaultValue"
10+
> & {
11+
disabled?: boolean;
12+
testId?: string;
13+
label?: React.ReactNode;
14+
};
15+
16+
export default {
17+
title: "Components/Form/ImagePicker",
18+
component: FormImagePicker,
19+
} as Meta;
20+
21+
const Template: StoryFn<FormImagePickerProps> = (args) => {
22+
const methods = useForm({
23+
defaultValues: {
24+
sampleImage: null,
25+
},
26+
});
27+
28+
return (
29+
<FormProvider {...methods}>
30+
<form>
31+
<FormImagePicker {...args} />
32+
</form>
33+
</FormProvider>
34+
);
35+
};
36+
37+
export const Default = Template.bind({});
38+
Default.args = {
39+
name: "sampleImage",
40+
testId: "sampleImage",
41+
label: "Upload Image",
42+
};
43+
44+
export const Disabled = Template.bind({});
45+
Disabled.args = {
46+
name: "sampleImage",
47+
testId: "disabledImage",
48+
label: "Disabled Image Upload",
49+
disabled: true,
50+
};
51+
52+
export const WithPrefilledValue = Template.bind({});
53+
WithPrefilledValue.args = {
54+
name: "sampleImage",
55+
testId: "prefilledImage",
56+
label: "Image with Default Value",
57+
defaultValue: {
58+
id: "1",
59+
path: "https://via.placeholder.com/300x200?text=Sample+Image",
60+
},
61+
};

‎src/components/form/image-picker/image-picker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
2020
import ImageListItem from "@mui/material/ImageListItem";
2121
import ImageList from "@mui/material/ImageList";
2222

23-
type ImagePickerProps = {
23+
export type ImagePickerProps = {
2424
error?: string;
2525
onChange: (value: FileEntity | null) => void;
2626
onBlur: () => void;

0 commit comments

Comments
 (0)