@codezee/sixtify-brahma 0.1.1

package/apps/docs/stories/Dialog/DeleteDialog.stories.tsx

@@ -0,0 +1,31 @@
+import { Button, DeleteDialog } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta: Meta<typeof DeleteDialog> = {
+  title: "shared-component/Dialog/DeleteDialog",
+  component: DeleteDialog,
+  tags: ["autodocs"],
+  argTypes: {
+    title: { control: "text" },
+  },
+  args: {
+    title: "Do you want to Delete this?",
+  },
+  render: (args) => {
+    const [open, setOpen] = useState(args.open);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Delete Dialog</Button>
+        <DeleteDialog {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultDialog: Story = {};

package/apps/docs/stories/Dialog/Dialog.stories.tsx

@@ -0,0 +1,47 @@
+import { Typography } from "@mui/material";
+import { Button, Dialog } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+const meta: Meta<typeof Dialog> = {
+  title: "shared-component/Dialog/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  argTypes: {
+    title: { control: "text" },
+    children: { control: false },
+    isHideCloseIcon: { control: "boolean" },
+    isHideDividers: { control: "boolean" },
+  },
+  args: {
+    title: "Dialog Heading",
+  },
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <Dialog {...args} open={open} onClose={() => setOpen(false)}>
+          <Typography>Your content goes here 😊!</Typography>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultDialog: Story = {};
+export const WithoutCloseIcon: Story = {
+  args: {
+    isHideCloseIcon: true,
+  },
+};
+export const WithoutDivider: Story = {
+  args: {
+    isHideDividers: true,
+  },
+};

package/apps/docs/stories/Drawer/Drawer.stories.tsx

@@ -0,0 +1,94 @@
+import HomeIcon from "@mui/icons-material/Home";
+import InfoIcon from "@mui/icons-material/Info";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { Box } from "@mui/material";
+import { Drawer, type MenuItem } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+const menuItems: MenuItem[] = [
+  {
+    key: "home",
+    title: "Home",
+    icon: <HomeIcon />,
+    onClick: fn(),
+  },
+  {
+    key: "settings",
+    title: "Settings",
+    icon: <SettingsIcon />,
+    onClick: fn(),
+  },
+  {
+    key: "about",
+    title: "About",
+    icon: <InfoIcon />,
+    onClick: fn(),
+  },
+];
+
+const meta: Meta<typeof Drawer> = {
+  title: "shared-component/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+  argTypes: {
+    currentPathname: {
+      options: ["/home", "/settings", "/about"],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  args: {
+    menuItems,
+    currentPathname: "/home",
+  },
+  render: (args) => {
+    return (
+      <Box sx={{ height: "100vh" }}>
+        <Drawer {...args} />
+      </Box>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+export const OpenDrawer: Story = {
+  args: {
+    open: true,
+  },
+};
+export const ClosedDrawer: Story = {
+  args: {
+    open: false,
+  },
+};
+
+export const DrawerWithSubmenu: Story = {
+  args: {
+    open: true,
+    menuItems: [
+      ...menuItems,
+      {
+        key: "nested",
+        title: "Nested Menu",
+        icon: <SettingsIcon />,
+        menuItems: [
+          {
+            key: "nested-1",
+            title: "Nested Item 1",
+            onClick: fn(),
+          },
+          {
+            key: "nested-2",
+            title: "Nested Item 2",
+            onClick: fn(),
+          },
+        ],
+      },
+    ],
+  },
+};

package/apps/docs/stories/FilterList/FilterList.stories.tsx

@@ -0,0 +1,88 @@
+import { FilterList } from "@repo/shared-components";
+import { FilterListType } from "@repo/shared-components/src/FilterList/FilterTypeWrapper";
+import { Meta, StoryObj } from "@storybook/react";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+
+const filterList: FilterListType[] = [
+  {
+    label: "Single AutoComplete",
+    key: "status",
+    value: "",
+    type: "autoComplete",
+    options: [
+      {
+        value: "active",
+        label: "Active",
+      },
+      {
+        value: "pending",
+        label: "Pending",
+      },
+    ],
+  },
+  {
+    label: "Job Title",
+    key: "jobtitle",
+    value: "",
+    type: "text",
+  },
+  {
+    label: "Multi AutoComplete",
+    key: "persona",
+    value: "",
+    type: "autoComplete",
+    multiSelect: true,
+    options: [
+      {
+        value: "ituser",
+        label: "IT User",
+      },
+      {
+        value: "itadmin",
+        label: "IT Admin",
+      },
+    ],
+  },
+  {
+    label: "Date",
+    key: "date",
+    value: "",
+    type: "date",
+  },
+  {
+    label: "Date Range",
+    key: "dateRange",
+    value: "",
+    type: "dateRange",
+    menuInfo: "Start ~ End",
+  },
+  {
+    key: "switch",
+    label: "Switch",
+    type: "switch",
+    value: "",
+  },
+];
+
+const meta: Meta<typeof FilterList> = {
+  title: "shared-component/FilterList/FilterList",
+  component: FilterList,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+  args: {
+    filterListItems: filterList,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FilterList>;
+
+export const DefaultFilterList: Story = {};

package/apps/docs/stories/FilterList/FilterListV2.stories.tsx

@@ -0,0 +1,92 @@
+import { FilterListV2 } from "@repo/shared-components";
+import { FilterListType } from "@repo/shared-components/src/FilterList/FilterTypeWrapper";
+import { Meta, StoryObj } from "@storybook/react";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { fn } from "@storybook/test";
+
+const filterList: FilterListType[] = [
+  {
+    label: "Single AutoComplete",
+    key: "status",
+    value: "",
+    type: "autoComplete",
+    options: [
+      {
+        value: "active",
+        label: "Active",
+      },
+      {
+        value: "pending",
+        label: "Pending",
+      },
+    ],
+  },
+  {
+    label: "Job Title",
+    key: "jobtitle",
+    value: "",
+    type: "text",
+  },
+  {
+    label: "Multi AutoComplete",
+    key: "persona",
+    value: "",
+    type: "autoComplete",
+    multiSelect: true,
+    options: [
+      {
+        value: "ituser",
+        label: "IT User",
+      },
+      {
+        value: "itadmin",
+        label: "IT Admin",
+      },
+    ],
+  },
+  {
+    label: "Date",
+    key: "date",
+    value: "",
+    type: "date",
+  },
+  {
+    label: "Date Range",
+    key: "dateRange",
+    value: "",
+    type: "dateRange",
+    menuInfo: "Start ~ End",
+  },
+  {
+    key: "switch",
+    label: "Switch",
+    type: "switch",
+    value: "",
+  },
+];
+
+const meta: Meta<typeof FilterListV2> = {
+  title: "shared-component/FilterList/FilterListV2",
+  component: FilterListV2,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+  args: {
+    filterListItems: filterList,
+    onChange: fn(),
+    onApply: fn(),
+    onClear: fn(),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FilterListV2>;
+
+export const DefaultFilterListV2: Story = {};

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

@@ -0,0 +1,87 @@
+import { Autocomplete } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { FieldValues, useForm } from "react-hook-form";
+
+const meta: Meta<typeof Autocomplete> = {
+  title: "shared-component/FormFields/Autocomplete",
+  component: Autocomplete,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    required: { control: "boolean" },
+    isShowAvatar: { control: "boolean" },
+    shouldCloseOnSelect: { control: "boolean" },
+    label: { control: "text" },
+    loading: { control: "boolean" },
+    multiple: { control: "boolean" },
+    error: { control: "boolean" },
+    placeholder: { control: "text" },
+  },
+  args: {
+    required: false,
+    label: "Select Option",
+    loading: false,
+    multiple: false,
+    error: false,
+    isShowAvatar: false,
+    shouldCloseOnSelect: false,
+    disabled: false,
+    placeholder: "Choose an option",
+    options: [
+      {
+        label: "Option 1",
+        value: "option1",
+        avatar:
+          "https://sixtify.s3.amazonaws.com/1723787550246_androgynous-avatar-non-binary-queer-person.jpg",
+      },
+      { label: "Option 2", value: "option2", disabled: true },
+      { label: "Option 3", value: "option3" },
+    ],
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      values: {
+        example: "",
+      },
+    });
+    return <Autocomplete {...args} name="example" control={control} />;
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Autocomplete>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    onAction: fn(),
+  },
+};
+
+export const MultipleSelection: Story = {
+  args: {
+    multiple: true,
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    error: true,
+    required: true,
+    helperText: "This field is required",
+  },
+};

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

@@ -0,0 +1,61 @@
+import { CheckBox } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { FieldValues, useForm } from "react-hook-form";
+
+const meta: Meta<typeof CheckBox> = {
+  title: "shared-component/FormFields/CheckBox",
+  component: CheckBox,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select",
+      },
+    },
+    disabled: { control: "boolean" },
+    loading: { control: "boolean" },
+  },
+  args: {
+    size: "medium",
+    loading: false,
+    disabled: false,
+  },
+  render: (args) => {
+    const { control } = useForm<FieldValues>({
+      defaultValues: {
+        example: false,
+      },
+    });
+    return <CheckBox {...args} name="example" control={control} />;
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof CheckBox>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    size: "small",
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    size: "large",
+  },
+};

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

@@ -0,0 +1,98 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { DatePicker, dateFormats } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { DateTime } from "luxon";
+import { FieldValues, 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,37 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { DateRangePicker, dateFormats } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { DateTime } from "luxon";
+import { FieldValues, 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",
+  },
+};