feat(storybook): add storybook for all component

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/nextjs";
+import { useForm, FormProvider } from "react-hook-form";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+import FormAvatarInput from "./form-avatar-input";
+
+type FormAvatarInputProps = Pick<
+  ControllerProps<FieldValues, FieldPath<FieldValues>>,
+  "name" | "defaultValue"
+> & {
+  disabled?: boolean;
+  testId?: string;
+};
+
+export default {
+  title: "Components/Form/AvatarInput",
+  component: FormAvatarInput,
+} as Meta;
+
+const Template: StoryFn<FormAvatarInputProps> = (args) => {
+  const methods = useForm({
+    defaultValues: {
+      sampleAvatar: null,
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <FormAvatarInput {...args} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: "sampleAvatar",
+  testId: "sampleAvatar",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  name: "sampleAvatar",
+  testId: "disabledAvatar",
+  disabled: true,
+};
+
+export const WithPrefilledValue = Template.bind({});
+WithPrefilledValue.args = {
+  name: "sampleAvatar",
+  testId: "prefilledAvatar",
+  defaultValue: {
+    id: "1",
+    path: "https://via.placeholder.com/100x100?text=Avatar",
+  },
+};

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

@@ -18,7 +18,7 @@ import { useTranslation } from "react-i18next";
 import IconButton from "@mui/material/IconButton";
 import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
 
-type AvatarInputProps = {
+export type AvatarInputProps = {
   error?: string;
   onChange: (value: FileEntity | null) => void;
   onBlur: () => void;

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/nextjs";
+import { useForm, FormProvider } from "react-hook-form";
+import FormDatePickerInput, { DatePickerFieldProps } from "./date-picker";
+
+export default {
+  title: "Components/Form/DatePickerInput",
+  component: FormDatePickerInput,
+} as Meta;
+
+const Template: StoryFn<DatePickerFieldProps & { name: string }> = (args) => {
+  const methods = useForm({
+    defaultValues: {
+      sampleDate: null,
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <FormDatePickerInput {...args} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Sample Date Picker",
+  name: "sampleDate",
+  testId: "sampleDate",
+};
+
+export const WithMinMaxDate = Template.bind({});
+WithMinMaxDate.args = {
+  label: "Date Picker with Min/Max",
+  name: "sampleDate",
+  minDate: new Date(2020, 0, 1),
+  maxDate: new Date(2030, 11, 31),
+  testId: "minMaxDate",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: "Disabled Date Picker",
+  name: "sampleDate",
+  disabled: true,
+  testId: "disabledDate",
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  label: "Read Only Date Picker",
+  name: "sampleDate",
+  readOnly: true,
+  testId: "readOnlyDate",
+};
+
+export const YearMonthView = Template.bind({});
+YearMonthView.args = {
+  label: "Year/Month View",
+  name: "sampleDate",
+  views: ["year", "month"],
+  testId: "yearMonthDate",
+};

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

@@ -16,7 +16,7 @@ import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
 
 type ValueDateType = Date | null | undefined;
-type DatePickerFieldProps = {
+export type DatePickerFieldProps = {
   disabled?: boolean;
   className?: string;
   views?: readonly DateView[] | undefined;
@@ -55,6 +55,7 @@ function DatePickerInput(
         disabled={props.disabled}
         autoFocus={props.autoFocus}
         defaultValue={props.defaultValue}
+        readOnly={props.readOnly}
         slotProps={{
           textField: {
             helperText: props.error,

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/nextjs";
+import { useForm, FormProvider } from "react-hook-form";
+import FormDateTimePickerInput, {
+  DateTimePickerFieldProps,
+} from "./date-time-picker";
+
+export default {
+  title: "Components/Form/DateTimePickerInput",
+  component: FormDateTimePickerInput,
+} as Meta;
+
+const Template: StoryFn<DateTimePickerFieldProps & { name: string }> = (
+  args
+) => {
+  const methods = useForm({
+    defaultValues: {
+      sampleDateTime: null,
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <FormDateTimePickerInput {...args} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Sample Date Time Picker",
+  name: "sampleDateTime",
+  testId: "sampleDateTime",
+};
+
+export const WithMinMaxDate = Template.bind({});
+WithMinMaxDate.args = {
+  label: "Date Time Picker with Min/Max",
+  name: "sampleDateTime",
+  minDate: new Date(2020, 0, 1),
+  maxDate: new Date(2030, 11, 31),
+  testId: "minMaxDateTime",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: "Disabled Date Time Picker",
+  name: "sampleDateTime",
+  disabled: true,
+  testId: "disabledDateTime",
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  label: "Read Only Date Time Picker",
+  name: "sampleDateTime",
+  readOnly: true,
+  testId: "readOnlyDateTime",
+};
+
+export const CustomViews = Template.bind({});
+CustomViews.args = {
+  label: "Custom Views Date Time Picker",
+  name: "sampleDateTime",
+  views: ["day", "hours", "minutes"],
+  testId: "customViewsDateTime",
+};

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

@@ -16,7 +16,7 @@ import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
 
 type ValueDateType = Date | null | undefined;
-type DateTimePickerFieldProps = {
+export type DateTimePickerFieldProps = {
   disabled?: boolean;
   className?: string;
   views?: readonly DateOrTimeView[];
@@ -55,6 +55,7 @@ function DateTimePickerInput(
         disabled={props.disabled}
         autoFocus={props.autoFocus}
         defaultValue={props.defaultValue}
+        readOnly={props.readOnly}
         slotProps={{
           textField: {
             helperText: props.error,

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/nextjs";
+import { useForm, FormProvider } from "react-hook-form";
+import FormTimePickerInput, { TimePickerFieldProps } from "./time-picker";
+
+export default {
+  title: "Components/Form/TimePickerInput",
+  component: FormTimePickerInput,
+} as Meta;
+
+const Template: StoryFn<TimePickerFieldProps & { name: string }> = (args) => {
+  const methods = useForm({
+    defaultValues: {
+      sampleTime: null,
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <FormTimePickerInput {...args} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Sample Time Picker",
+  name: "sampleTime",
+  testId: "sampleTime",
+};
+
+export const WithCustomFormat = Template.bind({});
+WithCustomFormat.args = {
+  label: "Custom Format Time Picker",
+  name: "sampleTime",
+  format: "HH:mm:ss",
+  testId: "customFormatTime",
+};
+
+export const WithMinMaxTime = Template.bind({});
+WithMinMaxTime.args = {
+  label: "Time Picker with Min/Max",
+  name: "sampleTime",
+  minTime: new Date(0, 0, 0, 9, 0),
+  maxTime: new Date(0, 0, 0, 17, 0),
+  testId: "minMaxTime",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: "Disabled Time Picker",
+  name: "sampleTime",
+  disabled: true,
+  testId: "disabledTime",
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  label: "Read Only Time Picker",
+  name: "sampleTime",
+  readOnly: true,
+  testId: "readOnlyTime",
+};
+
+export const HoursMinutesView = Template.bind({});
+HoursMinutesView.args = {
+  label: "Hours/Minutes View",
+  name: "sampleTime",
+  views: ["hours", "minutes"],
+  testId: "hoursMinutesTime",
+};

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

@@ -17,7 +17,7 @@ import useLanguage from "@/services/i18n/use-language";
 import { getValueByKey } from "@/components/form/date-pickers/helper";
 
 type ValueDateType = Date | null | undefined;
-type TimePickerFieldProps = {
+export type TimePickerFieldProps = {
   disabled?: boolean;
   className?: string;
   views?: readonly TimeView[] | undefined;
@@ -57,6 +57,7 @@ function TimePickerInput(
         disabled={props.disabled}
         autoFocus={props.autoFocus}
         defaultValue={props.defaultValue}
+        readOnly={props.readOnly}
         onClose={props.onBlur}
         slotProps={{
           textField: {

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/nextjs";
+import { useForm, FormProvider } from "react-hook-form";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+import FormImagePicker from "./image-picker";
+
+type FormImagePickerProps = Pick<
+  ControllerProps<FieldValues, FieldPath<FieldValues>>,
+  "name" | "defaultValue"
+> & {
+  disabled?: boolean;
+  testId?: string;
+  label?: React.ReactNode;
+};
+
+export default {
+  title: "Components/Form/ImagePicker",
+  component: FormImagePicker,
+} as Meta;
+
+const Template: StoryFn<FormImagePickerProps> = (args) => {
+  const methods = useForm({
+    defaultValues: {
+      sampleImage: null,
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <FormImagePicker {...args} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: "sampleImage",
+  testId: "sampleImage",
+  label: "Upload Image",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  name: "sampleImage",
+  testId: "disabledImage",
+  label: "Disabled Image Upload",
+  disabled: true,
+};
+
+export const WithPrefilledValue = Template.bind({});
+WithPrefilledValue.args = {
+  name: "sampleImage",
+  testId: "prefilledImage",
+  label: "Image with Default Value",
+  defaultValue: {
+    id: "1",
+    path: "https://via.placeholder.com/300x200?text=Sample+Image",
+  },
+};

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

@@ -20,7 +20,7 @@ import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
 import ImageListItem from "@mui/material/ImageListItem";
 import ImageList from "@mui/material/ImageList";
 
-type ImagePickerProps = {
+export type ImagePickerProps = {
   error?: string;
   onChange: (value: FileEntity | null) => void;
   onBlur: () => void;