@codezee/sixtify-brahma 0.2.3 → 0.2.6

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 { 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,264 @@
+import { useTheme } from "@mui/material";
+import { PieChart } from "@repo/shared-components";
+import { 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="" />,
+  },
+};

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

@@ -0,0 +1,18 @@
+import { ChipWithBorder } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ChipWithBorder> = {
+  title: "shared-component/Chips/ChipWithBorder",
+  component: ChipWithBorder,
+  tags: ["autodocs"],
+  args: {
+    label: "P",
+    color: "hsla(136, 59%, 49%, 1)",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChipWithBorder>;
+
+export const DefaultChipWithBorder: Story = {};

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

@@ -0,0 +1,24 @@
+import { FilterPill } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+const meta: Meta<typeof FilterPill> = {
+  title: "shared-component/Chips/FilterPill",
+  component: FilterPill,
+  tags: ["autodocs"],
+  args: {
+    label: "FilterPill",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FilterPill>;
+
+export const DefaultFilterPill: Story = {};
+
+export const FilterPillWithDeleteIcon: Story = {
+  args: {
+    onDelete: fn(),
+  },
+};

package/apps/docs/stories/Color/Color.stories.tsx

@@ -0,0 +1,14 @@
+import { colorPaletteUI } from "@repo/shared-components";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof colorPaletteUI> = {
+  title: "shared-component/Color",
+  component: colorPaletteUI,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof colorPaletteUI>;
+
+export const DefaultColorPaletteUI: Story = {};

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

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