@codezee/sixtify-brahma 0.0.0

package/apps/docs/stories/FormFields/DatePicker.stories.tsx

@@ -0,0 +1,100 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { DatePicker, dateFormats } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DateTime } from "luxon";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "shared-component/FormFields/DatePicker",
+  component: DatePicker,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+  argTypes: {
+    label: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    error: { control: "boolean" },
+    helperText: { control: "text" },
+    loading: { control: "boolean" },
+    format: {
+      options: [dateFormats.dateWithISO8601, dateFormats.dateWithEuropean],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        dateField: DateTime.now().toISODate(),
+      },
+    });
+
+    return <DatePicker {...args} name="dateField" control={control} />;
+  },
+  args: {
+    label: "Select Date",
+    required: false,
+    disabled: false,
+    readOnly: false,
+    error: false,
+    helperText: "",
+    loading: false,
+    format: dateFormats.dateWithEuropean,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const DefaultDatePicker: Story = {
+  args: {
+    label: "Select Date",
+  },
+};
+
+export const RequiredDatePicker: Story = {
+  args: {
+    label: "Required Date",
+    required: true,
+    helperText: "This field is required",
+  },
+};
+
+export const DisabledDatePicker: Story = {
+  args: {
+    label: "Disabled Date",
+    disabled: true,
+    helperText: "This field is disabled",
+  },
+};
+
+export const LoadingDatePicker: Story = {
+  args: {
+    label: "Loading Date Picker",
+    loading: true,
+  },
+};
+
+export const ErrorDatePicker: Story = {
+  args: {
+    label: "Error Date Picker",
+    error: true,
+    helperText: "Invalid date",
+  },
+};
+
+export const ReadOnlyDatePicker: Story = {
+  args: {
+    label: "Read-Only Date Picker",
+    readOnly: true,
+  },
+};

package/apps/docs/stories/FormFields/DateRangePicker.stories.tsx

@@ -0,0 +1,39 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { DateRangePicker } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DateTime } from "luxon";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof DateRangePicker> = {
+  title: "shared-component/FormFields/DateRangePicker",
+  component: DateRangePicker,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        dateField: DateTime.now().toISODate(),
+      },
+    });
+
+    return <DateRangePicker {...args} name="dateField" control={control} />;
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DateRangePicker>;
+
+export const DefaultDateRangerPicker: Story = {
+  args: {
+    label: "Select Date",
+  },
+};

package/apps/docs/stories/FormFields/DateTimePicker.stories.tsx

@@ -0,0 +1,39 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { DateTimePicker } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DateTime } from "luxon";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof DateTimePicker> = {
+  title: "shared-component/FormFields/DateTimePicker",
+  component: DateTimePicker,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        dateField: DateTime.now().toISODate(),
+      },
+    });
+
+    return <DateTimePicker {...args} name="dateTimeField" control={control} />;
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DateTimePicker>;
+
+export const DefaultDateTimePicker: Story = {
+  args: {
+    label: "Select Date and Time",
+  },
+};

package/apps/docs/stories/FormFields/FileUpload.stories.tsx

@@ -0,0 +1,83 @@
+import { FileUpload } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof FileUpload> = {
+  title: "shared-component/FormFields/FileUpload",
+  component: FileUpload,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    multiple: { control: "boolean" },
+    loading: { control: "boolean" },
+    isDisabled: { control: "boolean" },
+    error: { control: "boolean" },
+    helperText: { control: "text" },
+    size: { control: "number" },
+    accept: { control: "text" },
+  },
+  render: (args) => {
+    const { control, setError } = useForm<FieldValues>();
+
+    return (
+      <FileUpload
+        {...args}
+        control={control}
+        name="fileUpload"
+        setError={setError}
+      />
+    );
+  },
+  args: {
+    label: "Upload Your Files",
+    multiple: false,
+    size: 10,
+    accept: ".png,.jpg,.jpeg,.pdf",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FileUpload>;
+
+export const DefaultFileUpload: Story = {
+  args: {
+    label: "Upload Files",
+    isDisabled: false,
+    error: false,
+    helperText: "",
+    multiple: false,
+  },
+};
+
+export const MultipleFileUpload: Story = {
+  args: {
+    label: "Upload Multiple Files",
+    isDisabled: false,
+    multiple: true,
+  },
+};
+
+export const DisabledFileUpload: Story = {
+  args: {
+    label: "File Upload (Disabled)",
+    isDisabled: true,
+    multiple: false,
+  },
+};
+
+export const LoadingFileUpload: Story = {
+  args: {
+    label: "File Upload (Loading)",
+    loading: true,
+  },
+};
+
+export const FileUploadWithError: Story = {
+  args: {
+    label: "File Upload with Error",
+    error: true,
+    helperText: "File size exceeded or invalid file type",
+  },
+};

package/apps/docs/stories/FormFields/ImageUpload.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ImageUpload } from "@repo/shared-components";
+
+const meta: Meta<typeof ImageUpload> = {
+  title: "shared-component/FormFields/ImageUpload",
+  component: ImageUpload,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    isUploading: { control: "boolean" },
+    variant: {
+      control: { type: "select" },
+      options: ["square", "circle"],
+    },
+    isCapture: { control: "boolean" },
+    loading: { control: "boolean" },
+    subTitle: { control: "text" },
+  },
+  args: {
+    label: "Profile Picture",
+    subTitle: "PNG, JPEG under 5 MB",
+    isUploading: false,
+    variant: "square",
+    isCapture: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageUpload>;
+
+export const DefaultImageUpload: Story = {
+  args: {
+    label: "Upload Profile Picture",
+    isUploading: false,
+    variant: "square",
+  },
+};
+
+export const LoadingImageUpload: Story = {
+  args: {
+    label: "Uploading Profile Picture",
+    isUploading: true,
+    loading: true,
+  },
+};
+
+export const CircularImageUpload: Story = {
+  args: {
+    label: "Upload Circular Profile Picture",
+    variant: "circle",
+  },
+};
+
+export const ImageUploadWithCapture: Story = {
+  args: {
+    label: "Upload Profile Picture with Capture",
+    isCapture: true,
+  },
+};
+
+export const ImageUploadWithDefaultImage: Story = {
+  args: {
+    label: "Edit Profile Picture",
+    defaultValue:
+      "https://fps.cdnpk.net/images/home/subhome-ai.webp?w=649&h=649",
+    isCapture: true,
+  },
+};

package/apps/docs/stories/FormFields/ListItemButton.stories.tsx

@@ -0,0 +1,59 @@
+import { Stack } from "@mui/material";
+import {
+  DeleteAction,
+  EditAction,
+  ListItemButton,
+} from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ListItemButton> = {
+  title: "shared-component/FormFields/ListItemButton",
+  component: ListItemButton,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    selected: { control: "boolean" },
+    actions: { control: "object" },
+  },
+  args: {
+    label: "List Item",
+    selected: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItemButton>;
+
+export const DefaultListItemButton: Story = {
+  args: {
+    label: "Default List Item",
+    selected: false,
+  },
+};
+
+export const SelectedListItemButton: Story = {
+  args: {
+    label: "Selected List Item",
+    selected: true,
+  },
+};
+
+export const ListItemButtonWithActions: Story = {
+  args: {
+    label: "List Item with Actions",
+    actions: (
+      <Stack direction="row">
+        <EditAction />
+        <DeleteAction />
+      </Stack>
+    ),
+  },
+};
+
+export const ListItemButtonWithLongLabel: Story = {
+  args: {
+    label:
+      "This is a list item with a very long label that should be truncated or shown in a tooltip",
+  },
+};

package/apps/docs/stories/FormFields/PhoneInputField.stories.tsx

@@ -0,0 +1,84 @@
+import { PhoneInputField } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof PhoneInputField> = {
+  title: "shared-component/FormFields/PhoneInputField",
+  component: PhoneInputField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+    loading: {
+      control: "boolean",
+    },
+    required: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    error: {
+      control: "boolean",
+    },
+    helperText: {
+      control: "text",
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        phone: "",
+      },
+    });
+
+    return <PhoneInputField {...args} name="phone" control={control} />;
+  },
+  args: {
+    placeholder: "Enter phone number...",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PhoneInputField>;
+
+export const DefaultPhoneInput: Story = {
+  args: {
+    label: "Phone Number",
+    required: false,
+    disabled: false,
+    error: false,
+    helperText: "",
+  },
+};
+
+export const DisabledPhoneInput: Story = {
+  args: {
+    label: "Disabled Phone Input",
+    required: false,
+    disabled: true,
+    error: false,
+  },
+};
+
+export const LoadingPhoneInput: Story = {
+  args: {
+    label: "Loading State",
+    loading: true,
+  },
+};
+
+export const ErrorPhoneInput: Story = {
+  args: {
+    label: "Phone Number with Error",
+    required: true,
+    error: true,
+    helperText: "Invalid phone number",
+  },
+};

package/apps/docs/stories/FormFields/RadioGroupField.stories.tsx

@@ -0,0 +1,172 @@
+import { Stack, Typography } from "@mui/material";
+import { RadioGroupField, TextField } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof RadioGroupField> = {
+  title: "shared-component/FormFields/RadioGroupField",
+  component: RadioGroupField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    options: {
+      control: "object",
+    },
+    loading: {
+      control: "boolean",
+    },
+    size: {
+      options: ["small", "medium"],
+      control: { type: "select" },
+    },
+    direction: {
+      options: ["row", "column"],
+      control: { type: "select" },
+    },
+    color: {
+      options: ["primary", "secondary"],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        radioOption: "",
+      },
+    });
+
+    return <RadioGroupField {...args} control={control} name="radioOption" />;
+  },
+  args: {
+    label: "Choose an option",
+    options: [
+      { values: "option1", label: "Option 1", disabled: false },
+      { values: "option2", label: "Option 2", disabled: false },
+      { values: "option3", label: "Option 3", disabled: false },
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroupField>;
+
+export const DefaultRadioGroupField: Story = {
+  args: {
+    label: "Default Radio Group",
+    size: "small",
+    color: "secondary",
+    loading: false,
+  },
+};
+
+export const DisabledRadioOptions: Story = {
+  args: {
+    label: "Radio Group with Disabled Option",
+    size: "small",
+    color: "primary",
+    options: [
+      { values: "option1", label: "Option 1", disabled: true },
+      { values: "option2", label: "Option 2", disabled: true },
+      { values: "option3", label: "Option 3", disabled: true },
+    ],
+  },
+};
+
+export const LoadingRadioGroupField: Story = {
+  args: {
+    label: "Loading Radio Group",
+    loading: true,
+    size: "small",
+    color: "secondary",
+  },
+};
+
+export const RequiredRadioGroupField: Story = {
+  args: {
+    label: "Required Radio Group",
+    size: "medium",
+    color: "primary",
+    required: true,
+  },
+};
+
+export const RadioGroupFieldColumnDirection: Story = {
+  args: {
+    label: "Required Radio Group",
+    size: "medium",
+    color: "primary",
+    required: true,
+  },
+};
+
+export const RadioGroupFieldWithReactNodeOptions: Story = {
+  args: {
+    size: "medium",
+    color: "primary",
+    label: "",
+    options: [
+      {
+        values: "option1",
+        label: (
+          <Typography variant="body1">Radio Button with TextField</Typography>
+        ),
+        disabled: false,
+      },
+    ],
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        textFieldValue: "",
+        radioOption: "",
+      },
+    });
+
+    return (
+      <Stack gap="10px" direction="row">
+        <RadioGroupField {...args} control={control} name="radioOption" />
+        <TextField
+          name="textFieldValue"
+          control={control}
+          variant="outlined"
+          placeholder="Enter additional details"
+        />
+      </Stack>
+    );
+  },
+};
+
+export const RadioGroupFieldPropsWithLabelDescription: Story = {
+  args: {
+    size: "medium",
+    color: "primary",
+    label: "",
+    options: [
+      {
+        values: "option1",
+        label: (
+          <Stack gap="5px">
+            <Typography variant="body1">
+              Radio Button with Description
+            </Typography>
+            <Typography variant="body2">Additional details</Typography>
+          </Stack>
+        ),
+        disabled: false,
+      },
+    ],
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        example: "",
+      },
+    });
+
+    return <RadioGroupField {...args} name="example" control={control} />;
+  },
+};