@codezee/sixtify-brahma 0.2.3 → 0.2.6

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",
+  },
+};

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,
+  },
+};