@codezee/sixtify-brahma 0.0.0

package/apps/docs/stories/Button/ButtonGroup.stories.tsx

@@ -0,0 +1,120 @@
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import HomeIcon from "@mui/icons-material/Home";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { ButtonGroup as MuiButtonGroup, Stack } from "@mui/material";
+import { Button, ButtonGroup } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+type StoryProps = React.ComponentProps<typeof ButtonGroup>;
+
+const meta: Meta<StoryProps> = {
+  title: "shared-component/Button/ButtonGroup",
+  component: ButtonGroup,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const DefaultButtonGroup: Story = {
+  args: {
+    renderButtons: [
+      {
+        icon: <HomeIcon />,
+        value: "home",
+        label: "Home",
+        selected: true,
+        onClick: fn(),
+      },
+      {
+        icon: <FavoriteIcon />,
+        value: "favorites",
+        label: "Favorites",
+        selected: false,
+        onClick: fn(),
+      },
+      {
+        icon: <SettingsIcon />,
+        value: "settings",
+        label: "Settings",
+        selected: false,
+        onClick: fn(),
+      },
+    ],
+  },
+};
+
+export const NoSelectedButton: Story = {
+  args: {
+    renderButtons: [
+      {
+        icon: <HomeIcon />,
+        value: "home",
+        label: "Home",
+        selected: false,
+        onClick: fn(),
+      },
+      {
+        icon: <FavoriteIcon />,
+        value: "favorites",
+        label: "Favorites",
+        selected: false,
+        onClick: fn(),
+      },
+      {
+        icon: <SettingsIcon />,
+        value: "settings",
+        label: "Settings",
+        selected: false,
+        onClick: fn(),
+      },
+    ],
+  },
+};
+
+export const DisabledButtons: Story = {
+  args: {
+    renderButtons: [
+      {
+        icon: <HomeIcon />,
+        value: "home",
+        label: "Home",
+        selected: false,
+        onClick: fn(),
+      },
+      {
+        icon: <FavoriteIcon />,
+        value: "favorites",
+        label: "Favorites",
+        selected: false,
+        onClick: fn(),
+      },
+      {
+        icon: <SettingsIcon />,
+        value: "settings",
+        label: "Settings",
+        selected: false,
+        onClick: fn(),
+      },
+    ],
+  },
+  decorators: [
+    () => (
+      <Stack direction="row" gap="10px">
+        <MuiButtonGroup aria-label="Disabled button group">
+          <Button variant="outlined" disabled>
+            Home
+          </Button>
+          <Button variant="outlined" disabled>
+            Favorites
+          </Button>
+          <Button variant="outlined" disabled>
+            Settings
+          </Button>
+        </MuiButtonGroup>
+      </Stack>
+    ),
+  ],
+};

package/apps/docs/stories/Button/button.stories.tsx

@@ -0,0 +1,99 @@
+import { Stack } from "@mui/material";
+import { Button } from "@repo/shared-components";
+import type { Meta as MetaTypes, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import type { ComponentProps } from "react";
+
+type StoryProps = ComponentProps<typeof Button> & {
+  variant: string;
+  size: "small" | "medium" | "large";
+};
+
+const meta: MetaTypes<StoryProps> = {
+  title: "shared-component/Button/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    loading: { control: "boolean" },
+    disabled: { control: "boolean" },
+    children: { control: "text" },
+    variant: {
+      options: ["outlined", "contained"],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select",
+      },
+    },
+    sx: { control: "object" },
+    color: {
+      options: ["primary", "secondary"],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  args: {
+    onClick: fn(),
+    children: "Button",
+    size: "medium",
+  },
+  render: (args) => (
+    <Stack direction="row" gap="10px">
+      <Button {...args} size="large">
+        Large
+      </Button>
+      <Button {...args} size="medium">
+        Medium (Default)
+      </Button>
+      <Button {...args} size="small">
+        Small
+      </Button>
+    </Stack>
+  ),
+};
+
+// eslint-disable-next-line import/no-default-export
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    variant: "contained",
+  },
+};
+
+export const Contained: Story = {
+  args: {
+    variant: "contained",
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    variant: "outlined",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    color: "primary",
+  },
+};
+export const Secondary: Story = {
+  args: {
+    color: "secondary",
+  },
+};

package/apps/docs/stories/Card/AttendanceCard.stories.tsx

@@ -0,0 +1,36 @@
+import { AttendanceCard } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AttendanceCard> = {
+  title: "shared-component/Card/AttendanceCard",
+  component: AttendanceCard,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    value: { control: "text" },
+    variant: {
+      control: "select",
+      options: [
+        "holiday",
+        "weekly_off",
+        "paid_leave",
+        "absent",
+        "unpaid_leave",
+      ],
+    },
+  },
+  args: {
+    variant: "holiday",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AttendanceCard>;
+
+export const DefaultIndicator: Story = {
+  args: {
+    label: "Holiday",
+    value: "03 Days",
+  },
+};

package/apps/docs/stories/Card/Card.stories.tsx

@@ -0,0 +1,39 @@
+import { Stack, Typography } from "@mui/material";
+import { Card, DeleteAction, EditAction } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Card> = {
+  title: "shared-component/Card/Card",
+  component: Card,
+  tags: ["autodocs"],
+  argTypes: {
+    heading: { control: "text" },
+    action: { control: false },
+    children: { control: false },
+  },
+  args: {
+    heading: "Card Heading",
+  },
+  render: (args) => (
+    <Card {...args}>
+      <Typography>This is the card content</Typography>
+    </Card>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultCard: Story = {};
+
+export const ActionCard: Story = {
+  args: {
+    action: (
+      <Stack direction="row">
+        <EditAction />
+        <DeleteAction />
+      </Stack>
+    ),
+  },
+};

package/apps/docs/stories/Charts/PieChart.stories.tsx

@@ -0,0 +1,265 @@
+import { PieChart } from "@repo/shared-components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof PieChart> = {
+  title: "shared-component/Charts/PieChart",
+  component: PieChart,
+  tags: ["autodocs"],
+  argTypes: {
+    height: {
+      description: "Height of the PieChart",
+      control: {
+        type: "number",
+      },
+      defaultValue: 235,
+    },
+    width: {
+      description: "Width of the PieChart",
+      control: {
+        type: "number",
+      },
+      defaultValue: 235,
+    },
+    skipAnimation: {
+      description: "Disables animation if true",
+      control: {
+        type: "boolean",
+      },
+      defaultValue: false,
+    },
+    tooltip: {
+      description: "Tooltip behavior ('item', 'axis', 'none')",
+      control: {
+        type: "select",
+        options: ["item", "axis", "none"],
+      },
+      defaultValue: "item",
+      mapping: {
+        item: { trigger: "item" },
+        axis: { trigger: "axis" },
+        none: { trigger: "none" },
+      },
+    },
+    label: {
+      description: "Center label text",
+      control: {
+        type: "text",
+      },
+      defaultValue: "Center",
+    },
+    series: {
+      description: "Pie chart series configuration",
+      control: {
+        type: "object",
+      },
+      defaultValue: {
+        type: "pie",
+        data: [
+          { label: "A", value: 40 },
+          { label: "B", value: 30 },
+          { label: "C", value: 20 },
+          { label: "D", value: 10 },
+        ],
+        innerRadius: 0,
+        outerRadius: 100,
+        startAngle: 0,
+        endAngle: 360,
+        paddingAngle: 0,
+        arcLabel: "label",
+        arcLabelMinAngle: 0,
+        cx: "50%",
+        cy: "50%",
+        highlightScope: { fade: "global", highlight: "item" },
+        faded: { innerRadius: 30, additionalRadius: -30, color: "gray" },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PieChart>;
+
+export const DefaultPieChart: Story = {
+  args: {
+    series: {
+      type: "pie",
+      data: [
+        { label: "A", value: 40 },
+        { label: "B", value: 30 },
+        { label: "C", value: 20 },
+        { label: "D", value: 10 },
+      ],
+    },
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    height: 300,
+    width: 300,
+    series: {
+      type: "pie",
+      data: [
+        { label: "A", value: 40 },
+        { label: "B", value: 30 },
+        { label: "C", value: 20 },
+        { label: "D", value: 10 },
+      ],
+    },
+  },
+};
+
+export const NoAnimation: Story = {
+  args: {
+    skipAnimation: true,
+    series: {
+      type: "pie",
+      data: [
+        { label: "A", value: 40 },
+        { label: "B", value: 30 },
+        { label: "C", value: 20 },
+        { label: "D", value: 10 },
+      ],
+    },
+  },
+};
+
+export const CustomRadii: Story = {
+  args: {
+    series: {
+      type: "pie",
+      data: [
+        { label: "A", value: 40 },
+        { label: "B", value: 30 },
+        { label: "C", value: 20 },
+        { label: "D", value: 10 },
+      ],
+      innerRadius: 90,
+      outerRadius: "90%",
+      cornerRadius: 0,
+    },
+  },
+};
+
+export const NoTooltip: Story = {
+  args: {
+    tooltip: { trigger: "none" },
+    series: {
+      type: "pie",
+      data: [
+        { label: "A", value: 40 },
+        { label: "B", value: 30 },
+        { label: "C", value: 20 },
+        { label: "D", value: 10 },
+      ],
+    },
+  },
+};
+
+export const CustomAngles: Story = {
+  args: {
+    series: {
+      type: "pie",
+      data: [
+        {
+          value: 50,
+          color: "#F39C12",
+          id: "A",
+          label: "A",
+        },
+        {
+          value: 50,
+          color: "#2980B9",
+          id: "B",
+          label: "B",
+        },
+      ],
+      startAngle: 45,
+      endAngle: 270,
+    },
+  },
+};
+
+export const CustomArcLabel: Story = {
+  args: {
+    series: {
+      type: "pie",
+      data: [
+        {
+          value: 60,
+          color: "#1ABC9C",
+          id: "A",
+          label: "A",
+        },
+        {
+          value: 40,
+          color: "#E74C3C",
+          id: "B",
+          label: "B",
+        },
+      ],
+      arcLabel: (item) => `${item.label}: ${item.value}%`,
+    },
+  },
+};
+
+export const HighlightedSeries: Story = {
+  args: {
+    series: {
+      type: "pie",
+      data: [
+        {
+          value: 50,
+          color: "#F39C12",
+          id: "A",
+          label: "A",
+        },
+        {
+          value: 50,
+          color: "#2980B9",
+          id: "B",
+          label: "B",
+        },
+      ],
+      highlightScope: { fade: "global", highlight: "item" },
+    },
+  },
+};
+
+export const FadedSeries: Story = {
+  args: {
+    series: {
+      type: "pie",
+      data: [
+        { label: "A", value: 70, color: "#1ABC9C" },
+        { label: "B", value: 30, color: "#E74C3C" },
+      ],
+      faded: { innerRadius: 30, additionalRadius: -30, color: "gray" },
+    },
+  },
+};
+
+export const MixedSeries: Story = {
+  args: {
+    series: {
+      type: "pie",
+      data: [
+        {
+          value: 50,
+          color: "#F39C12",
+          id: "A",
+          label: "A",
+        },
+        {
+          value: 50,
+          color: "#2980B9",
+          id: "B",
+          label: "B",
+        },
+      ],
+      highlightScope: { fade: "global", highlight: "item" },
+      faded: { innerRadius: 30, additionalRadius: -30, color: "gray" },
+    },
+  },
+};

package/apps/docs/stories/Chips/Chip.stories.tsx

@@ -0,0 +1,141 @@
+import { Delete as DeleteIcon } from "@mui/icons-material";
+import { Avatar, Box, Stack, Typography } from "@mui/material";
+import { Chip } from "@repo/shared-components";
+import type { Meta as MetaTypes, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import type { ComponentProps } from "react";
+
+type StoryProps = ComponentProps<typeof Chip> & {
+  variant: string;
+  size: "small" | "medium";
+};
+
+const meta: MetaTypes<StoryProps> = {
+  title: "shared-component/Chips/Chip",
+  component: Chip,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    children: { control: "text" },
+    variant: {
+      options: ["outlined", "filled"],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "medium"],
+      control: {
+        type: "select",
+      },
+    },
+    sx: { control: "object" },
+    color: {
+      options: ["secondary", "info", "success", "warning", "error", "primary"],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  args: {
+    onClick: fn(),
+    size: "medium",
+    variant: "filled",
+  },
+  render: (args) => (
+    <Stack alignItems="center" direction="row" gap="50px">
+      <Stack gap="33px">
+        <Typography fontWeight="bold">Color</Typography>
+        <Typography>secondary</Typography>
+        <Typography>info</Typography>
+        <Typography>success</Typography>
+        <Typography>warning</Typography>
+        <Typography>error</Typography>
+        <Typography>primary</Typography>
+      </Stack>
+      <Stack gap="25px">
+        <Typography fontWeight="bold">Medium [Default]</Typography>
+        <Box>
+          <Chip color="secondary" label="Secondary" {...args} />
+        </Box>
+        <Box>
+          <Chip color="info" label="Info" {...args} />
+        </Box>
+        <Box>
+          <Chip color="success" label="Success" {...args} />
+        </Box>
+        <Box>
+          <Chip color="warning" label="Warning" {...args} />
+        </Box>
+        <Box>
+          <Chip color="error" label="Error" {...args} />
+        </Box>
+        <Box>
+          <Chip color="primary" label="Primary" {...args} />
+        </Box>
+      </Stack>
+      <Stack gap="33px">
+        <Typography fontWeight="bold">small</Typography>
+        <Box>
+          <Chip
+            variant="filled"
+            label="Secondary"
+            size="small"
+            color="secondary"
+          />
+        </Box>
+        <Box>
+          <Chip variant="filled" label="Info" size="small" color="info" />
+        </Box>
+        <Box>
+          <Chip variant="filled" label="Success" size="small" color="success" />
+        </Box>
+        <Box>
+          <Chip variant="filled" label="Warning" size="small" color="warning" />
+        </Box>
+        <Box>
+          <Chip variant="filled" label="Error" size="small" color="error" />
+        </Box>
+        <Box>
+          <Chip variant="filled" label="Primary" size="small" color="primary" />
+        </Box>
+      </Stack>
+    </Stack>
+  ),
+};
+
+// eslint-disable-next-line import/no-default-export
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    variant: "filled",
+  },
+};
+
+export const Contained: Story = {
+  args: {
+    variant: "filled",
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    variant: "outlined",
+  },
+};
+export const WithDeleteIcon: Story = {
+  args: {
+    deleteIcon: <DeleteIcon sx={{ color: "white" }} />,
+    onDelete: fn(),
+  },
+};
+
+export const WithAvatar: Story = {
+  args: {
+    avatar: <Avatar alt="User Avatar" src="" />,
+  },
+};