dst-rg 1.0.0

package/src/components/Metric/_.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ArrowUpRight, EllipsisVertical } from "lucide-react";
+import { Metrics } from ".";
+import { Button } from "../Button";
+
+const meta = {
+  title: "Components/Metrics",
+  component: Metrics,
+  tags: ["autodocs"],
+  argTypes: {
+    // Optionally add controls for props here
+  },
+} satisfies Meta<typeof Metrics>;
+
+export default meta;
+type Story = StoryObj<typeof Metrics>;
+
+export const Default: Story = {
+  args: {
+    title: "Total Sales",
+    value: "$32,000",
+    description: "12% increase from last month",
+    icon: <ArrowUpRight className="w-6 h-6 text-green-600" />,
+    iconType: "success",
+    toggleBtn: (
+      <button className="underline text-sm text-rtext-tertiary-600">
+        Details
+      </button>
+    ),
+    statistic: <span className="text-xs font-bold text-green-500">+12%</span>,
+    iconPosition: "topWithTitle",
+    statisticPosition: "row-between",
+  },
+};
+
+export const WithChartBottom: Story = {
+  args: {
+    title: "Active Users",
+    value: "8,450",
+    description: "Stable since last week",
+    toggleBtn: (
+      <button className="underline text-sm text-rtext-tertiary-600">
+        View
+      </button>
+    ),
+    chartImg: <img src="/test.png" alt="Chart" className="w-full h-full" />,
+    chartPosition: "bottom",
+    iconPosition: "hidden",
+    statisticPosition: "row-next",
+  },
+};
+
+export const WithChartBottomAndActions: Story = {
+  args: {
+    title: "Total Sales",
+    value: "$32,000",
+    icon: <ArrowUpRight className="w-6 h-6 text-green-600" />,
+    iconType: "secondary",
+    iconPosition: "topWithTitle",
+    statistic: (
+      <span className="text-xs font-medium text-green-700 bg-green-100 rounded px-2 py-0.5">
+        +12%
+      </span>
+    ),
+    toggleBtn: (
+      <Button variant={"primary"}
+        className="px-4 py-1.5"
+        size={"md"}>
+        Details
+      </Button>
+    ),
+    actionBtns: [
+      <Button
+        key="1"
+        variant={"primary"}
+        className="px-4 py-1.5"
+        size={"sm"}
+      >
+        View
+      </Button>,
+      <Button
+        variant={"secondaryColor"}
+        key="2"
+        className="px-4 py-1.5"
+        size={"sm"}
+      >
+        Export
+      </Button>,
+    ],
+    statisticPosition: "row-next",
+    dir: "rtl",
+    chartPosition: "bottom",
+    chartImg: <img src="/test.png" alt="" className="w-full h-full" />,
+    titleType: "bold",
+  },
+};
+export const WithChartSideAndActions: Story = {
+  args: {
+    title: "Total Sales",
+    value: "$32,000",
+    icon: <ArrowUpRight className="w-6 h-6 text-green-600" />,
+    iconType: "secondary",
+    iconPosition: "topWithTitle",
+    statistic: (
+      <span className="text-xs font-medium text-green-700 bg-green-100 rounded px-2 py-0.5">
+        +12%
+      </span>
+    ),
+    toggleBtn: (
+      <Button variant={"linkGray"}
+        className="px-4 py-1.5"
+        onClick={() => alert("dropdown")}
+        size={"md"}>
+        <EllipsisVertical />
+      </Button>
+    ),
+    actionBtns: [
+      <Button
+        key="1"
+        variant={"primary"}
+        className="px-4 py-1.5"
+        size={"sm"}
+      >
+        View
+      </Button>,
+      <Button
+        variant={"secondaryColor"}
+        key="2"
+        className="px-4 py-1.5"
+        size={"sm"}
+      >
+        Export
+      </Button>,
+    ],
+    statisticPosition: "row-next",
+    dir: "rtl",
+    chartPosition: "side",
+    chartImg: <img src="/test.png" alt="" className="w-full h-full" />,
+    titleType: "bold",
+  },
+};

package/src/components/Metric/_.style.ts

@@ -0,0 +1,14 @@
+const baseStyles = "flex flex-col h-full items-end gap-2 w-full";
+const iconStyles = {
+  success:
+    "w-12 h-12 flex items-center justify-center rounded-full bg-rbg-success-secondary",
+  notification:
+    "w-12 h-12 flex items-center justify-center rounded-full bg-rbg-brand-secondary",
+  secondary:
+    "w-12 h-12 flex items-center justify-center  rounded-lg bg-rbg-primary border border-gray-light-200 shadow-xs-skeuomorphic",
+};
+const titleStyle = {
+  normal: "font-medium text-sm text-rtext-tertiary-600",
+  bold: "text-rtext-primary-900 font-normal text-md",
+};
+export { baseStyles, iconStyles, titleStyle };

package/src/components/Metric/_.test.tsx

@@ -0,0 +1,166 @@
+import { render, screen } from "@testing-library/react";
+import { ArrowUpRight } from "lucide-react";
+import { describe, expect, it } from "vitest";
+import { Metrics } from ".";
+
+describe("Metrics Component", () => {
+  it("should render title, value, description and toggle button", () => {
+    render(
+      <Metrics
+        title="Test Title"
+        value="100"
+        description="Test Description"
+        toggleBtn={<button>Toggle</button>}
+      />
+    );
+    expect(screen.getByText("Test Title")).toBeDefined();
+    expect(screen.getByText("100")).toBeDefined();
+    expect(screen.getByText("Test Description")).toBeDefined();
+    expect(screen.getByRole("button", { name: /toggle/i })).toBeDefined();
+  });
+
+  it("should render icon when iconPosition is 'topWithTitle'", () => {
+    render(
+      <Metrics
+        title="Icon Test"
+        value="200"
+        toggleBtn={<button>Toggle</button>}
+        iconPosition="topWithTitle"
+        icon={<ArrowUpRight data-testid="icon" />}
+      />
+    );
+    // the icon should be rendered when iconPosition is either "topWithTitle" or "topAlone"
+    expect(screen.getByTestId("icon")).toBeDefined();
+  });
+  it("should not render icon when iconPosition is 'hidden'", () => {
+    render(
+      <Metrics
+        title="Icon Test"
+        value="200"
+        toggleBtn={<button>Toggle</button>}
+        iconPosition="hidden"
+        icon={<ArrowUpRight data-testid="icon" />}
+      />
+    );
+    // using queryByTestId returns null if the icon is not rendered
+    expect(screen.queryByTestId("icon")).toBeNull();
+  });
+
+  it("should render chart image when chartPosition is 'bottom'", () => {
+    render(
+      <Metrics
+        title="Chart Test"
+        value="300"
+        toggleBtn={<button>Toggle</button>}
+        chartPosition="bottom"
+        chartImg={<img src="/test.png" alt="chart" data-testid="chart" />}
+      />
+    );
+    expect(screen.getByTestId("chart")).toBeDefined();
+    expect(screen.getByTestId("chart")).toHaveAttribute("src", "/test.png");
+  });
+
+  it("should render chart image when chartPosition is 'side'", () => {
+    render(
+      <Metrics
+        title="Chart Side Test"
+        value="400"
+        toggleBtn={<button>Toggle</button>}
+        chartPosition="side"
+        chartImg={
+          <img src="/test.png" alt="chart side" data-testid="chart-side" />
+        }
+      />
+    );
+    expect(screen.getByTestId("chart-side")).toBeDefined();
+    expect(screen.getByTestId("chart-side")).toHaveAttribute(
+      "src",
+      "/test.png"
+    );
+  });
+
+  it("should render action buttons when provided", () => {
+    render(
+      <Metrics
+        title="Actions Test"
+        value="500"
+        toggleBtn={<button>Toggle</button>}
+        actionBtns={[
+          <button key="1">Button 1</button>,
+          <button key="2">Button 2</button>,
+        ]}
+      />
+    );
+    expect(screen.getByText("Button 1")).toBeDefined();
+    expect(screen.getByText("Button 2")).toBeDefined();
+  });
+  it("should render the icon correctly when iconPosition is 'iconSide' (Line 26)", () => {
+    render(
+      <Metrics
+        title="Test"
+        value="100"
+        toggleBtn={<button>Toggle</button>}
+        iconPosition="iconSide"
+        iconType="secondary"
+        icon={<div data-testid="icon">Icon</div>}
+      />
+    );
+    // Line 26: Icon should be rendered inside a div with "self-center" as part of its class.
+    const iconElement = screen.getByTestId("icon");
+    expect(iconElement).toBeInTheDocument();
+    expect(iconElement.parentElement).toHaveClass("self-center");
+  });
+
+  it("should render the title in a span when iconPosition is 'topAlone' (Line 51)", () => {
+    render(
+      <Metrics
+        title="Top Alone Title"
+        value="200"
+        toggleBtn={<button>Toggle</button>}
+        iconPosition="topAlone"
+      />
+    );
+    // Line 51: The title should appear in a span rendered solely for topAlone condition.
+    const titleElement = screen.getByText("Top Alone Title");
+    expect(titleElement).toBeInTheDocument();
+    expect(titleElement.tagName.toLowerCase()).toBe("span");
+  });
+
+  it("should apply 'row-below' classes when statisticPosition is 'row-below' (Line 59)", () => {
+    render(
+      <Metrics
+        title="Stat Test"
+        value="300"
+        toggleBtn={<button>Toggle</button>}
+        statisticPosition="row-below"
+        statistic={<div data-testid="statistic">Stat</div>}
+        description="Description"
+      />
+    );
+    // Locate one of the texts rendered inside the statistic container.
+    const descElement = screen.getByText("Description");
+    // The description is inside the container whose class is built on line 59
+    const statisticContainer = descElement.closest("div");
+    expect(statisticContainer).toBeDefined();
+    // Expect the container to include the classes from statisticPosition 'row-below'
+    expect(statisticContainer?.className).toContain("gap-2");
+  });
+
+  it("should apply 'row-next' classes when statisticPosition is 'row-next' (Line 63)", () => {
+    render(
+      <Metrics
+        title="Stat Next Test"
+        value="400"
+        toggleBtn={<button>Toggle</button>}
+        statisticPosition="row-next"
+        statistic={<div data-testid="statistic">Stat</div>}
+        description="Description"
+      />
+    );
+    const descElement = screen.getByText("Description");
+    const statisticContainer = descElement.closest("div");
+    expect(statisticContainer).toBeDefined();
+    // Expect classes from statisticPosition 'row-next'
+    expect(statisticContainer?.className).toContain("gap-2");
+  });
+});

package/src/components/Metric/_.types.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface MetricProps {
+  title?: string;
+  value: string;
+  description?: string;
+  icon?: React.ReactNode;
+  statistic?: React.ReactNode;
+  chartImg?: React.ReactNode;
+  chartPosition?: "side" | "bottom";
+  actionBtns?: React.ReactNode[];
+  toggleBtn: React.ReactNode;
+  iconPosition?: "topWithTitle" | "topAlone" | "iconSide" | "hidden";
+  statisticPosition?: "row-between" | "row-next" | "row-below";
+  dir?: "rtl" | "ltr";
+  iconType?: "success" | "notification" | "secondary";
+  titleType?: "normal" | "bold";
+}

package/src/components/Metric/index.tsx

@@ -0,0 +1,100 @@
+
+import { Card, CardAction, CardHeader } from "../ui/card";
+import { MetricProps } from "./_.types";
+import { baseStyles, iconStyles, titleStyle } from "./_.style";
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export const Metrics = ({
+  title,
+  value,
+  description,
+  icon,
+  iconType = "secondary",
+  statistic,
+  chartImg,
+  chartPosition,
+  actionBtns,
+  toggleBtn,
+  iconPosition = "hidden",
+  statisticPosition,
+  titleType = "normal",
+}: MetricProps) => {
+  return (
+    <Card className="flex flex-col gap-0 rounded-xl border border-rborder-secondary bg-rbg-primary shadow-xs w-full sm:max-w-[380px] max-w-[311px] h-fit justify-start p-0">
+      <div className="flex gap-5 w-full py-5 px-4 sm:p-6">
+        {iconPosition == "iconSide" && (
+          <div className={cn("self-center", iconStyles[iconType])}>{icon}</div>
+        )}
+        <div
+          className={cn(
+            baseStyles,
+            `${
+              (iconPosition == "topWithTitle" || iconPosition == "topAlone") &&
+              "gap-5 md:gap-6"
+            }`
+          )}
+        >
+          <CardHeader className="flex justify-between w-full px-0">
+            <div className="flex items-center gap-3 ">
+              {(iconPosition == "topWithTitle" ||
+                iconPosition == "topAlone") && (
+                <div className={iconStyles[iconType]}>{icon}</div>
+              )}
+              {iconPosition != "topAlone" && (
+                <span className={titleStyle[titleType]}>{title}</span>
+              )}
+            </div>
+            {toggleBtn}
+          </CardHeader>
+          <div className="flex flex-col w-full gap-2">
+            {iconPosition == "topAlone" && (
+              <span className={titleStyle[titleType]}>{title}</span>
+            )}
+            <div className={"w-full flex justify-between gap-4"}>
+              <div
+                className={cn(
+                  "flex justify-between items-center w-full h-fit px-0",
+                  `${
+                    statisticPosition == "row-below" &&
+                    "flex-col just-start items-start gap-4"
+                  }`,
+                  `${
+                    statisticPosition == "row-next" &&
+                    "flex justify-start items-start gap-2"
+                  }`
+                )}
+              >
+                <span className="text-display-md font-normal text-rtext-primary-900">
+                  {value}
+                </span>
+                <div className="flex gap-2 items-center">
+                  {statistic}
+                  {description && (
+                    <span className="font-medium text-sm text-rtext-tertiary-600">
+                      {description}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {chartPosition == "side" && (
+                <div className="w-full">{chartImg}</div>
+              )}
+            </div>
+          </div>
+          {chartPosition == "bottom" && (
+            <div className="w-full">{chartImg}</div>
+          )}
+        </div>
+      </div>
+      {actionBtns && (
+        <CardAction className="flex flex-row-reverse items-center justify-between py-4 px-6 border-t border-rborder-secondary  gap-1.5 w-full">
+          {actionBtns?.map((btn, index) => (
+            <React.Fragment key={index}>{btn}</React.Fragment>
+          ))}
+        </CardAction>
+      )}
+    </Card>
+  );
+};
+

package/src/components/Modal/_.stories.tsx

@@ -0,0 +1,93 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { Modal } from ".";
+import { modalVariantProps } from "./_.types";
+
+export default {
+  title: "Components/Modal",
+  component: Modal,
+  // tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "radio", defaultValue: "md" },
+      options: ["sm", "md", "lg"],
+    },
+    overflow: {
+      control: { type: "radio", defaultValue: "auto" },
+      options: ["hidden", "auto"],
+    },
+    position: {
+      control: { type: "radio", defaultValue: "center" },
+      options: ["center", "bottom"],
+    },
+    showModal: {
+      control: { type: "boolean", defaultValue: true },
+    },
+    modalTitle: {
+      control: { type: "text" },
+    },
+    onClick: {
+      control: { action: "close" },
+    }
+  },
+  args: {
+    size: "md",
+    overflow: "auto",
+    position: "center",
+    modalTitle: "Main Modal",
+    showModal: true,
+    modalContentStyle: "gap-4",
+  },
+} as Meta<typeof Modal>;
+
+type Story = StoryObj<modalVariantProps>;
+
+export const Default: Story = {
+  args: {
+    children: "Modal Content",
+    overflow: "auto",
+    showModal: true,
+  },
+};
+
+export const Center = {
+  args: {
+    position: "center",
+    children: "Modal Content",
+  },
+};
+
+export const Bottom = {
+  args: {
+    position: "bottom",
+    children: "Modal Content",
+  },
+};
+
+export const WithTitle = {
+  args: {
+    modalTitle: "Modal with Title",
+    children: "Modal Content",
+  },
+};
+
+export const WithCustomCloseIcon = {
+  args: {
+    closeIconStroke: "red",
+    children: "Modal Content",
+  },
+};
+
+export const Size = {
+  args: {
+    size: "sm",
+    children: "Modal Content",
+  },
+};
+
+export const CloseIcon = {
+  args: {
+    showCloseIcon: false,
+    children: "Modal Content",
+  },
+};

package/src/components/Modal/_.style.ts

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+const baseStyles =
+    "modal-container fixed left-1/2 right-auto flex max-h-[80dvh] w-4/5 cursor-default flex-col rounded bg-white text-center";
+
+const sizeStyle = {
+    sm: "max-w-rsm",
+    md: "max-w-rmd",
+    lg: "max-w-rlg",
+}
+
+export const modalVariants = cva(
+    baseStyles,
+    {
+        variants: {
+            size: sizeStyle,
+            overflow: {
+                hidden: "overflow-hidden",
+                auto: "overflow-auto",
+            },
+            position: {
+                center: "top-1/2 -translate-y-1/2 animate-slide-in-center",
+                bottom: "bottom-0 animate-slide-in-bottom"
+            }
+        },
+        defaultVariants: {
+            size: "md",
+        }
+    }
+);
+

package/src/components/Modal/_.test.tsx

@@ -0,0 +1,90 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Modal } from ".";
+
+// Mocking Radix Slot to make it render as span for testing purposes
+vi.mock("@/icons/general/x-close", () => ({
+  default: () => <svg data-testid="x-close-icon" />,
+}));
+vi.mock("react-dom", async () => {
+  const actual = await vi.importActual<typeof import("react-dom")>("react-dom");
+  return {
+    ...actual,
+    default: actual, // ✅ add default for compatibility with ESM
+    createPortal: (node: React.ReactNode) => node,
+  };
+});
+vi.mock("@/lib/zIndexUtils", () => ({
+  getBackdropZIndex: (depth: number) => 40 + depth * 10,
+  getModalZIndex: (depth: number) => 50 + depth * 10,
+}));
+
+describe("Modal Component", () => {
+  const baseProps = {
+    showModal: true,
+    closeHandler: vi.fn(),
+    modalTitle: "Example Modal",
+    children: <div data-testid="modal-content">Test content</div>,
+  };
+
+  beforeEach(() => {
+    document.body.style.overflow = "";
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    document.body.style.overflow = "";
+  });
+
+  it("renders modal correctly when showModal is true", () => {
+    render(<Modal {...baseProps} />);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Example Modal")).toBeInTheDocument();
+    expect(screen.getByTestId("modal-content")).toBeInTheDocument();
+  });
+
+  it("does not render modal when showModal is false", () => {
+    render(<Modal {...baseProps} showModal={false} />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("calls closeHandler on backdrop click", () => {
+    render(<Modal {...baseProps} />);
+    const backdrop = screen.getAllByRole("button");
+    fireEvent.click(backdrop[0]);
+    expect(baseProps.closeHandler).toHaveBeenCalled();
+  });
+
+  it("calls closeHandler on close icon click", () => {
+    render(<Modal {...baseProps} />);
+    const closeButton = screen.getByTestId("x-close-icon");
+    fireEvent.click(closeButton);
+    expect(baseProps.closeHandler).toHaveBeenCalled();
+  });
+
+  it("applies correct z-index from utility functions", () => {
+    render(<Modal {...baseProps} />);
+    const backdrop = screen.getAllByRole("button");
+    const dialog = screen.getByRole("dialog");
+    expect(backdrop[0]).toHaveStyle("z-index: 50");
+    expect(dialog).toHaveStyle("z-index: 60");
+  });
+
+  it("sets and resets document body overflow to prevent scrolling", () => {
+    const { unmount } = render(<Modal {...baseProps} />);
+    expect(document.body.style.overflow).toBe("hidden");
+    unmount();
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("does not render close icon when showCloseIcon is false", () => {
+    render(<Modal {...baseProps} showCloseIcon={false} />);
+    expect(screen.queryByTestId("x-close-icon")).not.toBeInTheDocument();
+  });
+
+  it("renders close icon when showCloseIcon is true", () => {
+    render(<Modal {...baseProps} showCloseIcon={true} />);
+    expect(screen.getByTestId("x-close-icon")).toBeInTheDocument();
+  });
+
+});

package/src/components/Modal/_.types.ts

@@ -0,0 +1,14 @@
+export type modalVariantProps = {
+  size?: "sm" | "md" | "lg";
+  overflow?: "hidden" | "auto";
+  closeHandler: () => void;
+  children: React.ReactNode;
+  modalTitle?: string;
+  closeIconStroke?: string;
+  position?: "center" | "bottom"
+  showModal: boolean,
+  icon?: React.ReactNode;
+  headerIconDir?: "flex-col" | "flex-row";
+  modalContentStyle?: string;
+  showCloseIcon?: boolean;
+}