dst-rg 1.0.0

package/src/components/Badge/index.tsx

@@ -0,0 +1,42 @@
+import XClose from "@/icons/general/x-close";
+import { cn } from "@/lib/utils";
+import { BadgeProps } from "./_.types";
+import { badgeVariants } from "./_.style";
+
+function Badge({
+  className,
+  size = "sm",
+  type = "pillColor",
+  color = "blue",
+  dir = "rtl",
+  icon,
+  closable = false,
+  onClose,
+  children,
+  ...props
+}: Readonly<BadgeProps>) {
+  return (
+    <div
+      className={cn(
+        "w-fit",
+        badgeVariants({ size, type, dir, color }),
+        type === "badgeModern" &&
+        "bg-transparent border-primary text-secondary",
+        className
+      )}
+      {...props}
+    >
+      {icon}
+      {/* Avatar or any other custom icon/image can be passed via children */}
+      {children}
+      {closable && (
+        <button onClick={onClose} className="ml-1">
+          <XClose className="w-3 h-3 stroke-current" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export { Badge };
+

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

@@ -0,0 +1,95 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { Breadcrumb } from ".";
+import { BreadcrumbProps } from "./_.type";
+
+export default {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "radio" },
+      options: ["chevron", "slash"],
+    },
+    dir: {
+      control: { type: "radio" },
+      options: ["ltr", "rtl"],
+    },
+    BreadcrumbProps: {
+      control: { type: "array" },
+    },
+    navClassName: {
+      control: { type: "text" },
+    },
+    listClassName: {
+      control: { type: "text" },
+    },
+    listItemClassName: {
+      control: { type: "text" },
+    },
+    linkClassName: {
+      control: { type: "text" },
+    },
+    separatorClassName: {
+      control: { type: "text" },
+    },
+  },
+  args: {
+    type: "chevron",
+    dir: "ltr",
+    BreadcrumbProps: [
+      { title: "Category", link: "/category" },
+      { title: "Subcategory", link: "/subcategory" },
+    ],
+    navClassName: "",
+    listClassName: "",
+    listItemClassName: "",
+    linkClassName: "text-blue-500",
+    separatorClassName: "ms-2",
+  },
+};
+
+type Story = StoryObj<BreadcrumbProps>;
+
+export const WithSlashSeparator: Story = {
+  args: {
+    type: "slash",
+    breadCrumbLink: [
+      { title: "Home", link: "/" },
+      { title: "Category", link: "/category" },
+      { title: "Product", link: "/product" },
+    ],
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    dir: "rtl",
+    breadCrumbLink: [
+      { title: "خانه", link: "/" },
+      { title: "دسته بندی", link: "/category" },
+      { title: "محصولات", link: "/product" },
+    ],
+  },
+};
+
+export const CustomClassNames: Story = {
+  args: {
+    breadCrumbLink: [
+      { title: "Home", link: "/" },
+      { title: "Category", link: "/category" },
+      { title: "Subcategory", link: "/subcategory" },
+    ],
+    navClassName: "bg-gray-100 p-4",
+    listClassName: "list-none flex gap-x-2",
+    listItemClassName: "text-lg font-semibold",
+    linkClassName: "text-blue-500 hover:underline",
+    separatorClassName: "text-gray-500",
+  },
+};
+
+export const WithEmptyBreadcrumb: Story = {
+  args: {
+    breadCrumbLink: [],
+  },
+};

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

@@ -0,0 +1,29 @@
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Breadcrumb } from ".";
+import { BreadcrumbTypes } from "./_.type";
+
+describe("Breadcrumb Component", () => {
+  const breadCrumbLink: BreadcrumbTypes[] = [
+    { title: "Home", link: "/" },
+    { title: "Category", link: "/category" },
+    { title: "Product", link: "/category/product" },
+  ];
+
+
+  it("renders the correct active breadcrumb based on location", () => {
+    vi.stubGlobal("location", { pathname: "/category/product" });
+
+    render(<Breadcrumb breadCrumbLink={breadCrumbLink} />);
+
+    const activeBreadcrumb = screen.getByText(/Product/i);
+    expect(activeBreadcrumb).toHaveClass("text-rtext-brand-tertiary-600");
+  });
+
+  it("should handle RTL direction correctly", () => {
+    render(<Breadcrumb breadCrumbLink={breadCrumbLink} dir="rtl" />);
+
+    expect(screen.getByRole("navigation")).toHaveAttribute("dir", "rtl");
+  });
+});

package/src/components/Breadcrumbs/_.type.ts

@@ -0,0 +1,15 @@
+export interface BreadcrumbTypes {
+  link?: string;
+  title: string;
+}
+
+export interface BreadcrumbProps {
+  breadCrumbLink: BreadcrumbTypes[];
+  type?: "slash" | "chevron";
+  dir?: "rtl" | "ltr";
+  navClassName?: string;
+  listClassName?: string;
+  listItemClassName?: string;
+  linkClassName?: string;
+  separatorClassName?: string;
+}

package/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,103 @@
+import ChevronLeft from "@/icons/general/chevron-left";
+import ChevronRight from "@/icons/general/chevron-right";
+import Home from "@/icons/general/home";
+import SlashDivider from "@/icons/general/slash-divider";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { BreadcrumbProps } from "./_.type";
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  breadCrumbLink,
+  type = "chevron",
+  dir,
+  navClassName,
+  listClassName,
+  listItemClassName = '',
+  linkClassName,
+  separatorClassName,
+}) => {
+  const [currentPath, setCurrentPath] = useState<string>("");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setCurrentPath(window.location.pathname);
+    }
+  }, []);
+
+  const direction: "ltr" | "rtl" =
+    dir ?? (document?.body?.getAttribute("dir") === "rtl" ? "rtl" : "ltr");
+  const renderSeparator = () => {
+    switch (type) {
+      case "chevron":
+        return direction === "rtl" ? <ChevronLeft /> : <ChevronRight />;
+      case "slash":
+        return <SlashDivider />;
+      default:
+        return <ChevronRight />;
+    }
+  };
+
+  const allItems = [
+    {
+      title: <Home />,
+      link: "/",
+    },
+    ...breadCrumbLink,
+  ];
+
+  const activeIndex = allItems.findIndex((item) => item.link === currentPath);
+
+  const visibleItems =
+    activeIndex >= 0 ? allItems.slice(0, activeIndex + 1) : allItems;
+
+  return (
+    <nav
+      className={`w-full overflow-x-auto scrollbar-thin scrollbar-thumb-gray-400 ${navClassName ?? ""
+        }`}
+      dir={direction}
+    >
+      <ol
+        className={`flex flex-nowrap items-center gap-x-1 lg:gap-x-2 w-max py-2 rounded-md ${listClassName ?? ""
+          }`}
+      >
+        {" "}
+        {visibleItems.map((breadcrumb, index) => {
+          const href = breadcrumb.link ?? "";
+          const showSeparator = index !== visibleItems.length - 1;
+          const isActive = currentPath === href;
+
+          return (
+            <li
+              key={`${href}-${index}`}
+              className={cn(
+                `flex items-center text-sm font-normal leading-normal transition-colors duration-300 `,
+                listItemClassName
+              )}
+            >
+              {breadcrumb.link ? (
+                <a
+                  href={href}
+                  className={`${linkClassName ??
+                    "cursor-pointer transition-colors duration-300"
+                    } ${isActive
+                      ? "text-rtext-brand-tertiary-600"
+                      : "text-rtext-placeholder"
+                    }`}
+                >
+                  {breadcrumb.title}
+                </a>
+              ) : (
+                <span className="text-gray-500">{breadcrumb.title}</span>
+              )}
+              {showSeparator && (
+                <span className={`${separatorClassName ?? "ms-2"}`}>
+                  {renderSeparator()}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

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

@@ -0,0 +1,85 @@
+import Plus from "@/icons/general/plus";
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { ArrowLeft } from "lucide-react";
+import { Button } from ".";
+import { buttonVariants } from "./_.style";
+import { ButtonProps } from "./_.types";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg", "xl", "2xl"],
+    },
+    variant: {
+      control: { type: "radio" }, // Enables a dropdown in Storybook UI
+      options: ["primary", "secondaryGray", "secondaryColor", "tertiaryGray", "tertiaryColor", "linkGray", "linkColor"],
+    },
+    dir: {
+      control: { type: "radio" },
+      options: ["ltr", "rtl"],
+    },
+    fullWidth: {
+      control: { type: "boolean" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    onClick: {
+      control: { action: "close" },
+    }
+  },
+  args: {
+    size: "md",
+    dir: "rtl",
+    variant: "primary",
+    children: "Badge Label",
+  },
+} as Meta<typeof buttonVariants>;
+
+type Story = StoryObj<ButtonProps>;
+
+export const Default: Story = {};
+
+export const FullWidth = {
+  args: {
+    fullWidth: true,
+    children: "Badge Label",
+  },
+};
+
+export const LeftIcon = {
+  args: {
+    leftIcon: <Plus width="16" height="16" stroke="white" />,
+    children: "Badge Label",
+  },
+}
+
+export const RightIcon = {
+  args: {
+    rightIcon: <ArrowLeft stroke="blue" width={16} />,
+    children: "Badge Label",
+    size: "sm",
+    variant: "secondaryColor"
+  },
+}
+
+export const Disabled = {
+  args: {
+    disabled: true,
+    children: "Badge Label",
+    variant: "primary"
+  },
+}
+
+export const Loading = {
+  args: {
+    loading: true,
+    children: "Badge Label",
+    variant: "secondaryColor"
+  },
+}

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

@@ -0,0 +1,56 @@
+import { cva } from "class-variance-authority";
+
+const baseStyles =
+  "inline-flex items-center justify-center font-medium focus:outline-none transition-all w-fit rounded-md border transition-all duration-300 cursor-pointer relative";
+
+const variantStyle = {
+  primary:
+    "border-gradient-border bg-rbutton-primary-bg hover:bg-rbutton-primary-bg-hover focus:bg-rbutton-primary-bg shadow-xs-skeuomorphic focus:shadow-focus-ring-shadow-xs-skeuomorphic text-rbutton-primary-fg has-[>svg]:text-rbutton-primary-fg disabled:bg-rbg-disabled disabled:border-rborder-disabled-subtle disabled:text-rfg-disabled has-[>svg]:disabled:text-rfg-disabled disabled:shadow-xs",
+  secondaryGray:
+    "text-rbutton-secondary-fg has-[>svg]:stroke-rbutton-secondary-fg  border-gradient-border bg-rbutton-secondary-bg hover:bg-rbutton-secondary-bg-hover shadow-xs-skeuomorphic disabled:bg-rbg-primary disabled:border-rborder-disabled-subtle disabled:text-rfg-disabled has-[>svg]:disabled:text-rfg-disabled disabled:shadow-xs",
+  secondaryColor:
+    "text-rbutton-secondary-color-fg bg-rbutton-secondary-color-bg border-rbutton-secondary-color-border hover:text-rbutton-secondary-color-fg-hover hover:bg-rbutton-secondary-color-bg-hover border-rbutton-secondary-color-border-hover disabled:bg-rbg-primary disabled:border-rborder-disabled-subtle disabled:text-rfg-disabled disabled:shadow-xs",
+  tertiaryGray:
+    "border-0 text-rbutton-tertiary-fg hover:text-rbutton-tertiary-fg-hover hover:bg-rbutton-tertiary-bg-hover disabled:text-rfg-disabled",
+  tertiaryColor:
+    "border-0 text-rbutton-tertiary-color-fg hover:text-rbutton-tertiary-color-fg-hover hover:bg-rbutton-tertiary-color-bg-hover disabled:text-rfg-disabled",
+  linkGray:
+    "border-0 text-rbutton-tertiary-fg hover:text-rbutton-tertiary-fg-hover disabled:text-rfg-disabled !p-0",
+  linkColor:
+    "border-0 text-rbutton-tertiary-color-fg hover:text-rbutton-tertiary-color-fg-hover disabled:text-rfg-disabled !p-0",
+};
+
+const sizeStyle = {
+  sm: "text-sm px-3 py-2 gap-1",
+  md: "text-base px-3.5 py-2.5 gap-1",
+  lg: "text-lg px-4 py-2.5 gap-1.5",
+  xl: "text-lg px-4.5 py-3 gap-1.5",
+  "2xl": "rounded-lg text-lg px-5.5 py-4 gap-2",
+};
+
+export const buttonVariants = cva(
+  baseStyles,
+  {
+    variants: {
+      loading: {
+        true: "pointer-events-none",
+      },
+      size: sizeStyle,
+      fullWidth: {
+        true: "w-full",
+      },
+      disabled: {
+        true: "pointer-events-none",
+      },
+      dir: {
+        rtl: "flex-row",
+        ltr: "flex-row-reverse"
+      },
+      variant: variantStyle,
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);

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

@@ -0,0 +1,103 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from ".";
+
+// Mocking Radix Slot to make it render as span for testing purposes
+vi.mock("@radix-ui/react-slot", () => ({
+  Slot: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+}));
+
+describe("Button Component", () => {
+  it("renders button with label", () => {
+    render(<Button>Click Me</Button>);
+    const button = screen.getByText("Click Me")
+    expect(button).not.toBeDisabled();
+    expect(button).toBeDefined();
+  });
+  it("renders with left and right icons", () => {
+    render(<Button leftIcon={<span data-testid="left-icon" />} rightIcon={<span data-testid="right-icon" />}>
+      With Icons
+    </Button>);
+    expect(screen.getByTestId("left-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("right-icon")).toBeInTheDocument();
+    expect(screen.getByText("With Icons")).toBeInTheDocument();
+  });
+
+  it("renders button with disabled state is true", () => {
+    const handleClick = vi.fn();
+    render(<Button disabled onClick={handleClick}>Click Me</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toBeDisabled();
+
+    fireEvent.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("renders button with disabled state is false", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click Me</Button>);
+    const button = screen.getByRole("button");
+    expect(button).not.toBeDisabled();
+
+    fireEvent.click(button);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders button with loading state", () => {
+    render(<Button loading size={"lg"}>Click Me</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("pointer-events-none")
+    expect(screen.getByLabelText("loading")).toBeDefined();
+    expect(screen.getByLabelText("loading")).toHaveClass("w-6 h-6");
+  });
+
+  it("does not call onClick when button is loading", () => {
+    const handleClick = vi.fn();
+    render(
+      <Button loading onClick={handleClick}>
+        Click
+      </Button>
+    );
+    fireEvent.click(screen.getByRole("button"));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("calls onClick handler when clicked", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    fireEvent.click(screen.getByRole("button"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders Spinner with default 'md' size when size prop is omitted", () => {
+    render(<Button loading>Loading</Button>);
+    const spinner = screen.getByLabelText("loading");
+    expect(spinner).toHaveClass("h-5 w-5"); // 'md' corresponds to h-5 w-5
+  });
+
+  it("renders button with custom className", () => {
+    render(<Button className="custom-class">Click Me</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("custom-class");
+  });
+
+  it("renders button with type 'submit'", () => {
+    render(<Button type="submit">Submit</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("type", "submit");
+  });
+
+  it("renders button with tooltip", () => {
+    render(<Button aria-label="Tooltip text">Hover Me</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-label", "Tooltip text");
+  });
+  it("renders as Slot when asChild is true", () => {
+    render(<Button asChild><a href="/test">Link</a></Button>);
+    const slotElement = screen.getByText("Link");
+    expect(slotElement).toBeInTheDocument();
+    // Since we mocked Slot as span, expect a span
+    expect(slotElement.parentElement?.tagName.toLowerCase()).toBe("span");
+  });
+
+});

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

@@ -0,0 +1,14 @@
+export type ButtonProps = {
+  variant?: "primary" | "secondaryGray" | "secondaryColor" | "tertiaryGray" | "tertiaryColor" | "linkGray" | "linkColor";
+  size?: "sm" | "md" | "lg" | "xl" | "2xl";
+  fullWidth?: boolean;
+  loading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onClick?: () => void;
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  type?: "button" | "submit" | "reset";
+};

package/src/components/Button/index.tsx

@@ -0,0 +1,70 @@
+import { Slot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import React from "react";
+import { ButtonProps } from "./_.types";
+import { buttonVariants } from "./_.style";
+
+// Example spinner
+const Spinner = ({ size = "sm" }: { size?: "sm" | "md" | "lg" | "xl" | "2xl" }) => {
+  const sizeMap = {
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6",
+    xl: "h-7 w-7",
+    '2xl': "h-7 w-7",
+  };
+  return (
+    <div
+      aria-label="loading"
+      className={clsx(
+        "border-2 border-t-transparent rounded-full animate-spin",
+        sizeMap[size]
+      )}
+    />
+  );
+};
+
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = "primary",
+  size = "md",
+  fullWidth,
+  disabled = false,
+  loading = false,
+  leftIcon,
+  rightIcon,
+  children,
+  className,
+  onClick,
+  asChild = false,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      className={buttonVariants({
+        variant,
+        size,
+        fullWidth,
+        disabled: disabled,
+        className,
+        loading: loading,
+      })}
+      disabled={disabled}
+      onClick={loading ? () => {} : onClick}
+      {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {loading && (
+        <div className="absolute inset-0 flex justify-center items-center">
+          <Spinner size={size ?? "md"} />
+        </div>
+      )}
+      <span className={clsx({ "invisible": loading }, "flex items-center gap-2")}>
+        {leftIcon}
+        {children}
+        {rightIcon}
+      </span>
+
+    </Comp>
+  );
+};