@codezee/sixtify-brahma 0.1.1

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

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FileUpload } from "@repo/shared-components";
+import { useForm, FieldValues } 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}
+        uploadedFiles={[]}
+      />
+    );
+  },
+  args: {
+    label: "Upload Your Files",
+    multiple: false,
+    size: 10,
+    accept: ".png,.jpg,.jpeg,.pdf",
+    uploadedFiles: [],
+  },
+};
+
+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 { 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 { 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/RadioGroupField.stories.tsx

@@ -0,0 +1,170 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RadioGroupField, TextField } from "@repo/shared-components";
+import { useForm, FieldValues } from "react-hook-form";
+import { Box, Stack, Typography } from "@mui/material";
+
+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} />;
+  },
+};

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

@@ -0,0 +1,72 @@
+import { SearchField } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { FieldValues, useForm } from "react-hook-form";
+
+const meta: Meta<typeof SearchField> = {
+  title: "shared-component/FormFields/SearchField",
+  component: SearchField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+    required: {
+      control: "boolean",
+    },
+    loading: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        search: "",
+      },
+    });
+    return <SearchField {...args} name="search" control={control} />;
+  },
+  args: {
+    placeholder: "Search...",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SearchField>;
+
+export const DefaultSearchField: Story = {
+  args: {
+    label: "Default Search",
+    required: false,
+    disabled: false,
+  },
+};
+
+export const DisabledSearchField: Story = {
+  args: {
+    label: "Disabled Search",
+    disabled: true,
+  },
+};
+
+export const LoadingSearchField: Story = {
+  args: {
+    label: "Loading Search",
+    loading: true,
+    disabled: false,
+  },
+};
+
+export const RequiredSearchField: Story = {
+  args: {
+    label: "Required Search",
+    required: true,
+    disabled: false,
+  },
+};

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

@@ -0,0 +1,111 @@
+import { TextField } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { FieldValues, useForm } from "react-hook-form";
+
+const meta: Meta<typeof TextField> = {
+  title: "shared-component/FormFields/TextField",
+  component: TextField,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      options: ["text", "number", "password"],
+      control: { type: "select" },
+    },
+    label: {
+      control: "text",
+    },
+    placeholder: {
+      control: "text",
+    },
+    loading: {
+      control: "boolean",
+    },
+    required: {
+      control: "boolean",
+    },
+    isCapitalize: {
+      control: "boolean",
+    },
+    isTrimStartDisabled: {
+      control: "boolean",
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      values: {
+        example: "",
+      },
+    });
+    return <TextField {...args} name="example" control={control} />;
+  },
+  args: {
+    placeholder: "Type here...",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextField>;
+
+export const DefaultTextField: Story = {
+  args: {
+    label: "Default Label",
+    type: "text",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: false,
+    disabled: false,
+  },
+};
+
+export const NumberField: Story = {
+  args: {
+    label: "Number Field",
+    type: "number",
+    isCapitalize: false,
+    isTrimStartDisabled: true,
+    required: false,
+    disabled: false,
+  },
+};
+
+export const CapitalizedTextField: Story = {
+  args: {
+    label: "Capitalized Text Field",
+    type: "text",
+    isCapitalize: true,
+    isTrimStartDisabled: false,
+    required: false,
+    disabled: false,
+  },
+};
+
+export const LoadingTextField: Story = {
+  args: {
+    label: "Loading State",
+    loading: true,
+    required: false,
+    disabled: true,
+  },
+};
+
+export const PasswordField: Story = {
+  args: {
+    label: "Password",
+    type: "password",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: true,
+  },
+};
+export const TextInputValidation: Story = {
+  args: {
+    label: "Text Input Validation",
+    type: "text",
+    isCapitalize: false,
+    isTrimStartDisabled: false,
+    required: true,
+    error: true,
+    helperText: "This filed is required",
+  },
+};

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

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { useForm, FieldValues } from "react-hook-form";
+import { DateTime } from "luxon";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { TimeField } from "@repo/shared-components";
+
+const meta: Meta<typeof TimeField> = {
+  title: "shared-component/FormFields/TimeField",
+  component: TimeField,
+  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: ["HH:mm", "hh:mm a"],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        timeField: DateTime.now().toISOTime(),
+      },
+    });
+    return <TimeField {...args} name="timeField" control={control} />;
+  },
+  args: {
+    label: "Select Time",
+    required: false,
+    disabled: false,
+    readOnly: false,
+    error: false,
+    helperText: "",
+    loading: false,
+    format: "HH:mm",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimeField>;
+
+export const DefaultTimeField: Story = {
+  args: {
+    label: "Select Time",
+  },
+};
+
+export const RequiredTimeField: Story = {
+  args: {
+    label: "Required Time",
+    required: true,
+    helperText: "This field is required",
+  },
+};
+
+export const DisabledTimeField: Story = {
+  args: {
+    label: "Disabled Time Picker",
+    disabled: true,
+  },
+};
+
+export const ReadOnlyTimeField: Story = {
+  args: {
+    label: "Read-Only Time Picker",
+    readOnly: true,
+  },
+};