dst-rg 1.0.0

package/src/components/Modal/index.tsx

@@ -0,0 +1,82 @@
+import XClose from "@/icons/general/x-close";
+import { getBackdropZIndex, getModalZIndex } from "@/lib/zIndexUtils";
+import { useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../Button";
+import { modalVariants } from "./_.style";
+import { modalVariantProps } from "./_.types";
+
+// Global variable to track modal depth
+let modalDepth = 0;
+
+export const Modal = ({
+  children,
+  closeHandler,
+  size = "md",
+  modalTitle,
+  overflow,
+  closeIconStroke = "#000",
+  position = "center",
+  icon,
+  headerIconDir = "flex-col",
+  showModal = false,
+  modalContentStyle,
+  showCloseIcon = true,
+}: modalVariantProps) => {
+
+
+  const depthRef = useRef(++modalDepth);
+
+  // Disable scrolling when modal opens, enable when it closes
+  useEffect(() => {
+    if (showModal) {
+      document.body.style.overflow = "hidden"; // Prevent scrolling
+    }
+    return () => {
+      modalDepth--; // Decrease modal depth on unmount
+      document.body.style.overflow = ""; // Restore scrolling
+    };
+  }, [showModal]);
+
+  if (!showModal) return null;
+
+  return ReactDOM.createPortal(
+    <>
+      <button className="fixed left-0 top-0 h-full min-h-screen w-full cursor-default overflow-hidden bg-black/60 duration-0"
+        style={{ zIndex: getBackdropZIndex(depthRef.current) }}
+        onClick={closeHandler} />
+      <dialog
+        open
+        aria-label="modal-container"
+        className={twMerge(modalVariants({ size, overflow, position }), modalContentStyle)}
+        style={{ zIndex: getModalZIndex(depthRef.current) }}
+      >
+        <div
+          className={`${headerIconDir == "flex-col" ? "items-start" : "items-center"}
+             sticky top-0 z-10 flex justify-between gap-6 bg-white py-4`}
+        >
+          <div className={`flex gap-4 justify-start items-start ${headerIconDir}`}>
+            {icon && icon}
+            {modalTitle && (
+              <h2 id="modal-title" className="text-lg font-semibold">{modalTitle}</h2>
+            )}
+          </div>
+
+          {
+            showCloseIcon &&
+            <Button variant="tertiaryGray" size="sm" className="!p-0" onClick={closeHandler}>
+              <XClose width="16" height="16" stroke={closeIconStroke} />
+            </Button>
+          }
+
+        </div>
+        <div className="overflow-y-auto">
+          {children}
+        </div>
+      </dialog>
+    </>,
+    document.body,
+  );
+};
+

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

@@ -0,0 +1,118 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { ArrowLeft, ArrowRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { Pagination } from ".";
+import { PaginationProps } from "./type";
+
+export default {
+  title: "Components/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  argTypes: {
+    hasText: {
+      control: { type: "boolean" },
+    },
+    showFirstLast: {
+      control: { type: "boolean" },
+    },
+    type: {
+      control: { type: "radio" },
+      options: [
+        "default",
+        "card-minimal-right-aligned",
+        "card-minimal-left-aligned",
+        "card-minimal-center-aligned",
+        "card-button-group-right-aligned",
+        "card-button-group-left-aligned",
+        "card-button-group-center-aligned",
+      ],
+    },
+    dir: {
+      control: { type: "radio" },
+      options: ["rtl", "ltr"],
+    },
+    onPageChange: { action: "page changed" },
+  },
+  args: {
+    currentPage: 3,
+    totalPages: 10,
+    type: "default",
+    dir: "ltr",
+  },
+} as Meta<typeof Pagination>;
+
+type Story = StoryObj<PaginationProps & { type?: string }>;
+
+export const Default: Story = {};
+
+export const CardMinimalRightAligned: Story = {
+  args: {
+    type: "card-minimal-right-aligned",
+  },
+};
+
+export const CardMinimalLeftAligned: Story = {
+  args: {
+    type: "card-minimal-left-aligned",
+  },
+};
+
+export const CardMinimalCenterAligned: Story = {
+  args: {
+    type: "card-minimal-center-aligned",
+  },
+};
+
+export const ButtonGroupRightAligned: Story = {
+  args: {
+    type: "card-button-group-right-aligned",
+    hasText: false,
+  },
+};
+
+export const ButtonGroupRightAlignedWithText: Story = {
+  args: {
+    type: "card-button-group-right-aligned",
+    hasText: true,
+  },
+};
+
+export const ButtonGroupLeftAligned: Story = {
+  args: {
+    type: "card-button-group-left-aligned",
+    hasText: false,
+  },
+};
+
+export const ButtonGroupCenterAligned: Story = {
+  args: {
+    type: "card-button-group-center-aligned",
+    hasText: false,
+  },
+};
+
+export const CustomIcons: Story = {
+  args: {
+    type: "default",
+    prevIcon: <ArrowLeft className="w-4 h-4" />,
+    nextIcon: <ArrowRight className="w-4 h-4" />,
+    firstIcon: <ChevronsLeft className="w-4 h-4" />,
+    lastIcon: <ChevronsRight className="w-4 h-4" />,
+  },
+};
+
+export const WithoutFirstLastButtons: Story = {
+  args: {
+    type: "default",
+    showFirstLast: false,
+  },
+};
+
+export const CustomIconsWithoutFirstLast: Story = {
+  args: {
+    type: "default",
+    prevIcon: <ArrowLeft className="w-4 h-4" />,
+    nextIcon: <ArrowRight className="w-4 h-4" />,
+    showFirstLast: false,
+  },
+};

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

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Pagination } from ".";
+
+describe("Pagination Component", () => {
+  const defaultProps = {
+    currentPage: 2,
+    totalPages: 10,
+    onPageChange: vi.fn(),
+  };
+
+  it("renders default pagination", () => {
+    render(<Pagination {...defaultProps} />);
+    expect(screen.getByText("بعدی")).toBeInTheDocument();
+    expect(screen.getByText("قبلی")).toBeInTheDocument();
+  });
+
+  it("renders card-minimal-right-aligned pagination", () => {
+    render(<Pagination {...defaultProps} type="card-minimal-right-aligned" />);
+    expect(screen.getByText("بعدی")).toBeInTheDocument();
+  });
+
+  it("renders card-minimal-left-aligned pagination", () => {
+    render(<Pagination {...defaultProps} type="card-minimal-left-aligned" />);
+    expect(screen.getByText("بعدی")).toBeInTheDocument();
+  });
+
+  it("renders card-button-group-center-aligned pagination with page buttons", () => {
+    render(
+      <Pagination {...defaultProps} type="card-button-group-center-aligned" />
+    );
+    expect(screen.getByText("بعدی")).toBeInTheDocument();
+    expect(screen.getByText("قبلی")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+
+  it("calls onPageChange when a page button is clicked", () => {
+    render(
+      <Pagination {...defaultProps} type="card-button-group-center-aligned" />
+    );
+    const pageButton = screen.getByText("2");
+    pageButton.click();
+    expect(defaultProps.onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it("renders with English labels when direction is ltr", () => {
+    render(<Pagination {...defaultProps} dir="ltr" />);
+    expect(screen.getByText("Next")).toBeInTheDocument();
+    expect(screen.getByText("Previous")).toBeInTheDocument();
+  });
+});

package/src/components/Pagination/index.tsx

@@ -0,0 +1,256 @@
+import { cn } from "@/lib/utils";
+import { twMerge } from "tailwind-merge";
+import PaginationCardMinimalCenter from "../ui/pagination/card-minimal-center-align";
+import PaginationCardMinimalRightAligned from "../ui/pagination/card-minimal-right-aligne";
+import DefaultPagination from "../ui/pagination/default-pagination";
+import PaginationCardButtonGroupAligned from "../ui/pagination/pagination-card-button-group-aligned";
+import PaginationCardMinimalLeftAligned from "../ui/pagination/pagination-card-minimal-left-aligned";
+import { PaginationProps } from "./type";
+
+export const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  type = "default",
+  dir = "rtl",
+  className,
+  activeClassName,
+  previousClassName,
+  nextClassName,
+  prevIcon,
+  nextIcon,
+  firstIcon,
+  lastIcon,
+  showFirstLast = true,
+  labels,
+  hasText = true,
+  ...props
+}: PaginationProps & { type?: string }) => {
+  const isRtl = dir === "rtl";
+
+  const defaultLabels = {
+    next: isRtl ? "بعدی" : "Next",
+    prev: isRtl ? "قبلی" : "Previous",
+    first: isRtl ? "اولین" : "First",
+    last: isRtl ? "آخرین" : "Last",
+    page: isRtl ? "صفحه" : "page",
+    of: isRtl ? "از" : "of",
+  };
+  const mergedLabels = { ...defaultLabels, ...labels };
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  const renderPageNumbers = () => {
+    const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+    const pages: (number | "...")[] = [];
+
+    if (isMobile) {
+      const mobileSet = new Set<number>();
+      mobileSet.add(1);
+      mobileSet.add(2);
+      mobileSet.add(totalPages - 1);
+      mobileSet.add(totalPages);
+
+      if (
+        currentPage !== 1 &&
+        currentPage !== 2 &&
+        currentPage !== totalPages - 1 &&
+        currentPage !== totalPages
+      ) {
+        mobileSet.add(currentPage);
+      }
+
+      const sorted = Array.from(mobileSet).sort((a, b) => a - b);
+      for (let i = 0; i < sorted.length; i++) {
+        pages.push(sorted[i]);
+        if (i < sorted.length - 1 && sorted[i + 1] !== sorted[i] + 1) {
+          pages.push("...");
+        }
+      }
+    } else {
+      if (totalPages <= 6) {
+        for (let i = 1; i <= totalPages; i++) pages.push(i);
+      } else {
+        const showLeftDots = currentPage > 3;
+        const showRightDots = currentPage < totalPages - 2;
+
+        if (!showLeftDots) {
+          for (let i = 1; i <= 3; i++) pages.push(i);
+          pages.push("...", totalPages - 2, totalPages - 1, totalPages);
+        } else if (!showRightDots) {
+          pages.push(1, 2, 3, "...");
+          for (let i = totalPages - 2; i <= totalPages; i++) pages.push(i);
+        } else {
+          pages.push(
+            1,
+            "...",
+            currentPage - 1,
+            currentPage,
+            currentPage + 1,
+            "...",
+            totalPages
+          );
+        }
+      }
+    }
+
+    const finalPages = isRtl ? [...pages].reverse() : pages;
+
+    return (
+      <div className={cn("flex h-full", isRtl && "flex-row-reverse")}>
+        {finalPages.map((page, index) =>
+          page === "..." ? (
+            <span
+              key={`dots-${index}`}
+              className="md:px-3 md:py-1 p-2 text-gray-400 text-sm"
+            >
+              ...
+            </span>
+          ) : (
+            <button
+              key={page}
+              onClick={() => onPageChange?.(page)}
+              className={cn(
+                "px-3 py-1 text-sm border border-gray-200",
+                currentPage === page ? activeClassName : className
+              )}
+            >
+              {page}
+            </button>
+          )
+        )}
+      </div>
+    );
+  };
+
+  if (type === "card-minimal-right-aligned") {
+    return (
+      <PaginationCardMinimalRightAligned
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={onPageChange}
+        dir={dir}
+        labels={mergedLabels}
+        previousClassName={previousClassName}
+        nextClassName={nextClassName}
+        className={className}
+        {...props}
+      />
+    );
+  }
+  if (type === "card-minimal-left-aligned") {
+    return (
+      <PaginationCardMinimalLeftAligned
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={onPageChange}
+        dir={dir}
+        labels={mergedLabels}
+        previousClassName={previousClassName}
+        nextClassName={nextClassName}
+        className={className}
+        {...props}
+      />
+    );
+  }
+
+  if (type === "card-minimal-center-aligned") {
+    return (
+      <PaginationCardMinimalCenter
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={onPageChange}
+        dir={dir}
+        labels={mergedLabels}
+        previousClassName={previousClassName}
+        nextClassName={nextClassName}
+        className={className}
+        prevIcon={prevIcon}
+        nextIcon={nextIcon}
+        {...props}
+      />
+    );
+  }
+
+  if (type === "card-button-group-right-aligned") {
+    return (
+      <PaginationCardButtonGroupAligned
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={onPageChange}
+        dir={dir}
+        labels={mergedLabels}
+        renderPageNumbers={renderPageNumbers}
+        previousClassName={previousClassName}
+        nextClassName={nextClassName}
+        justifyClassName={twMerge(className, 'justify-end')}
+        prevIcon={prevIcon}
+        nextIcon={nextIcon}
+        hasText={hasText}
+        {...props}
+      />
+    );
+  }
+
+  if (type === "card-button-group-left-aligned") {
+    return (
+      <PaginationCardButtonGroupAligned
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={onPageChange}
+        dir={dir}
+        labels={mergedLabels}
+        renderPageNumbers={renderPageNumbers}
+        previousClassName={previousClassName}
+        nextClassName={nextClassName}
+        justifyClassName={twMerge(className, 'justify-start')}
+        prevIcon={prevIcon}
+        nextIcon={nextIcon}
+        hasText={hasText}
+        {...props}
+      />
+    );
+  }
+
+  if (type === "card-button-group-center-aligned") {
+    return (
+      <PaginationCardButtonGroupAligned
+        currentPage={currentPage}
+        totalPages={totalPages}
+        onPageChange={onPageChange}
+        dir={dir}
+        labels={mergedLabels}
+        renderPageNumbers={renderPageNumbers}
+        previousClassName={previousClassName}
+        nextClassName={nextClassName}
+        justifyClassName={twMerge(className, 'justify-center')}
+        prevIcon={prevIcon}
+        nextIcon={nextIcon}
+        hasText={hasText}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <DefaultPagination
+      activeClassName={activeClassName}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      onPageChange={onPageChange}
+      dir={dir}
+      labels={mergedLabels}
+      previousClassName={previousClassName}
+      nextClassName={nextClassName}
+      className={className}
+      prevIcon={prevIcon}
+      nextIcon={nextIcon}
+      firstIcon={firstIcon}
+      lastIcon={lastIcon}
+      showFirstLast={showFirstLast}
+      hasText={hasText}
+    />
+  );
+};

package/src/components/Pagination/type.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+
+export type PaginationType =
+  | "default"
+  | "card-minimal-right-aligned"
+  | "card-minimal-left-aligned"
+  | "card-minimal-center-aligned"
+  | "card-button-group-right-aligned"
+  | "card-button-group-left-aligned"
+  | "card-button-group-center-aligned";
+
+export type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+  type?: PaginationType;
+  className?: string;
+  justifyClassName?: string;
+  activeClassName?: string;
+  previousClassName?: string;
+  nextClassName?: string;
+  prevIcon?: ReactNode;
+  nextIcon?: ReactNode;
+  firstIcon?: ReactNode;
+  lastIcon?: ReactNode;
+  showFirstLast?: boolean;
+  dir?: string;
+  hasText?: boolean;
+  labels?: {
+    next: string;
+    prev: string;
+    first: string;
+    last: string;
+    page: string;
+    of: string;
+  };
+} & React.ComponentProps<"nav">;
+
+export type PaginationLinkProps = {
+  isActive?: boolean;
+  activeClassName?: string;
+  disabled?: boolean;
+  size?: "icon" | "default";
+} & React.ComponentProps<"a">;
+
+export interface PaginationCardButtonGroupAlignedProps extends PaginationProps {
+  renderPageNumbers: () => React.ReactNode;
+}

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

@@ -0,0 +1,107 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { PriceSlider } from ".";
+import { SliderProps } from "./_.type";
+
+export default {
+  title: "Components/PriceSlider",
+  component: PriceSlider,
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      control: { type: "object" },
+      description: "The initial range of values for the slider",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Custom className for the slider wrapper",
+    },
+    trackClassName: {
+      control: { type: "text" },
+      description: "Custom className for the track of the slider",
+    },
+    rangeClassName: {
+      control: { type: "text" },
+      description: "Custom className for the range of the slider",
+    },
+    thumbClassName: {
+      control: { type: "text" },
+      description: "Custom className for the thumbs (sliders) on the range",
+    },
+    showValue: {
+      control: { type: "boolean" },
+      description: "Show the current value next to the thumb",
+    },
+    valueClassName: {
+      control: { type: "text" },
+      description: "Custom className for the value label",
+    },
+    isPercentage: {
+      control: { type: "boolean" },
+      description: "Display the value as a percentage",
+    },
+    valuePosition: {
+      control: { type: "radio" },
+      options: ["top", "bottom"],
+      description: "Position of the value label relative to the thumb",
+    },
+    dir: {
+      control: { type: "radio" },
+      options: ["ltr", "rtl"],
+      description: "Direction of the slider, Left-to-Right or Right-to-Left",
+    },
+  },
+  args: {
+    min: 0,
+    max: 100,
+    defaultValue: [0, 100],
+    className: "",
+    trackClassName: "",
+    rangeClassName: "",
+    thumbClassName: "",
+    showValue: false,
+    valueClassName: "",
+    isPercentage: false,
+    valuePosition: "bottom",
+    dir: "ltr",
+  },
+} as Meta<typeof PriceSlider>;
+
+type Story = StoryObj<SliderProps>;
+
+export const Default: Story = {};
+
+export const WithPercentageValue: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    defaultValue: [0, 50],
+    showValue: true,
+    isPercentage: true,
+  },
+};
+
+export const WithCustomClasses: Story = {
+  args: {
+    min: 0,
+    max: 10000,
+    defaultValue: [2000, 8000],
+    trackClassName: "bg-gray-300",
+    rangeClassName: "bg-green-500",
+    thumbClassName: "bg-blue-500",
+    showValue: true,
+    valueClassName: "text-red-500",
+  },
+};
+
+export const RTLDirection: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    defaultValue: [10, 90],
+    dir: "rtl",
+    showValue: true,
+    isPercentage: true,
+  },
+};
+
+