dst-rg 1.0.0

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

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PriceSlider } from ".";
+
+// Mock ResizeObserver globally for tests
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+describe("Slider Component", () => {
+
+  it("applies custom className to root", () => {
+    render(<PriceSlider className="custom-slider" />);
+    const root = document.querySelector(".custom-slider");
+    expect(root).toBeInTheDocument();
+  });
+
+  it("applies custom className to track", () => {
+    render(<PriceSlider trackClassName="custom-track" />);
+    const track = document.querySelector(".custom-track");
+    expect(track).toBeInTheDocument();
+  });
+
+  it("applies custom className to range", () => {
+    render(<PriceSlider rangeClassName="custom-range" />);
+    const range = document.querySelector(".custom-range");
+    expect(range).toBeInTheDocument();
+  });
+
+  it("applies custom className to thumb", () => {
+    render(<PriceSlider thumbClassName="custom-thumb" />);
+    const thumb = document.querySelector(".custom-thumb");
+    expect(thumb).toBeInTheDocument();
+  });
+
+  it("renders the correct values", () => {
+    render(<PriceSlider defaultValue={[25, 75]} showValue={true} />);
+    const thumb = screen.getAllByRole("slider");
+    expect(thumb).toHaveLength(2); // Two thumbs should be rendered
+    const valueTexts = screen.getAllByText(/%?\d+/); // Look for any numeric values
+    expect(valueTexts).toHaveLength(2); // Should show two values
+  });
+
+  it("displays value as percentage when isPercentage is true", () => {
+    render(
+      <PriceSlider defaultValue={[25, 50]} showValue={true} isPercentage={true} />
+    );
+    const valueText = screen.getByText("٪25");
+    expect(valueText).toBeInTheDocument();
+  });
+
+  it("does not display value as percentage when isPercentage is false", () => {
+    render(
+      <PriceSlider defaultValue={[25, 50]} showValue={true} isPercentage={false} />
+    );
+    const valueText = screen.getByText("25");
+    expect(valueText).toBeInTheDocument();
+  });
+
+
+});

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

@@ -0,0 +1,19 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { ComponentPropsWithoutRef } from "react";
+
+export interface SliderProps
+  extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  defaultValue?: [number, number];
+  className?: string;
+  trackClassName?: string;
+  rangeClassName?: string;
+  thumbClassName?: string;
+  showValue?: boolean;
+  valueClassName?: string;
+  isPercentage?: boolean;
+  valuePosition?: "top" | "bottom";
+  min?: number;
+  max?: number;
+  onValueChange?: (value: [number, number]) => void;
+  dir?: "ltr" | "rtl";
+}

package/src/components/PriceSlider/index.tsx

@@ -0,0 +1,86 @@
+import { cn } from "@/lib/utils";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { SliderProps } from "./_.type";
+
+export function PriceSlider({
+  defaultValue = [0, 1000],
+  min = 0,
+  max = 1000,
+  className = "",
+  trackClassName = "",
+  rangeClassName = "",
+  thumbClassName = "",
+  showValue = false,
+  valueClassName = "",
+  isPercentage = false,
+  valuePosition = "bottom",
+  dir = "ltr",
+  onValueChange,
+  ...props
+}: Readonly<SliderProps>) {
+  const [values, setValues] = React.useState<number[]>(defaultValue);
+
+  const handleValueChange = (newValues: [number, number]) => {
+    const [newMin, newMax] = newValues;
+    const clampedMin = Math.max(min, Math.min(newMin, max));
+    const clampedMax = Math.min(max, Math.max(newMax, min));
+    const finalValues: [number, number] = [clampedMin, clampedMax];
+    setValues(finalValues);
+
+    if (onValueChange) {
+      onValueChange(finalValues);
+    }
+  };
+  return (
+    <SliderPrimitive.Root
+      value={values}
+      onValueChange={handleValueChange}
+      min={min}
+      max={max}
+      dir={dir}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        className={cn(
+          "relative h-2 w-full grow overflow-hidden rounded-full bg-gray-light-200",
+          trackClassName
+        )}
+      >
+        <SliderPrimitive.Range
+          className={cn(
+            "absolute h-full bg-rfg-brand-primary-600",
+            rangeClassName
+          )}
+        />
+      </SliderPrimitive.Track>
+
+      {values.map((value, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          className={cn(
+            "relative block h-5 w-5 rounded-full border-2 border-rfg-brand-primary-600 bg-white",
+            thumbClassName
+          )}
+        >
+          {showValue && (
+            <span
+              className={cn(
+                "absolute left-1/2 -translate-x-1/2 text-xs text-gray-700",
+                valuePosition === "top" ? "bottom-7" : "top-7",
+                valueClassName
+              )}
+              style={{ whiteSpace: "nowrap" }}
+            >
+              {isPercentage ? `٪${value}` : value.toLocaleString()}
+            </span>
+          )}
+        </SliderPrimitive.Thumb>
+      ))}
+    </SliderPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Progress } from ".";
+import { ProgressProps } from "./_.types";
+
+export default {
+  title: "Components/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "radio" },
+      options: ["line", "circle", "half-circle"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    className: {
+      control: { type: "text" },
+      description: "Progress value class",
+    },
+    value: {
+      control: { type: "number" },
+      description: "Progress value in percentage",
+      defaultValue: 50,
+    },
+    label: {
+      control: { type: "number" },
+      description: "Label to show progress value as percentage",
+      defaultValue: 50,
+    },
+    labelClassName: {
+      control: { type: "text" },
+      description: "Custom class for the label",
+    },
+    backgroundVariant: {
+      control: { type: "text" },
+      description: "Custom background variant class",
+    },
+    indicatorVariant: {
+      control: { type: "text" },
+      description: "Custom indicator variant class",
+    },
+    strokeWidth: {
+      control: { type: "number" },
+      description: "Width of the stroke for circle/half-circle progress",
+      defaultValue: 16,
+    },
+    svgClassName: {
+      control: { type: "text" },
+      description: "Custom class for the SVG",
+    },
+  },
+} as Meta<typeof Progress>;
+
+type ProgressStory = StoryObj<ProgressProps>;
+
+export const LineProgress: ProgressStory = {
+  args: {
+    type: "line",
+    value: 75,
+    label: 75,
+    labelClassName: "text-blue-500",
+    backgroundVariant: "bg-gray-200",
+    indicatorVariant: "bg-blue-500",
+    className: "w-full h-4",
+    svgClassName: "rotate-[-90deg]",
+  },
+};
+
+export const CircleProgress: ProgressStory = {
+  args: {
+    type: "circle",
+    value: 60,
+    label: 60,
+    labelClassName: "text-green-500",
+    strokeWidth: 12,
+    svgClassName: "rotate-[-90deg]",
+    indicatorVariant: "stroke-green-500",
+  },
+};
+
+export const HalfCircleProgress: ProgressStory = {
+  args: {
+    type: "half-circle",
+    value: 50,
+    label: 50,
+    labelClassName: "text-yellow-500",
+    strokeWidth: 20,
+    svgClassName: "rotate-[0deg]",
+    indicatorVariant: "stroke-rose-500",
+  },
+};

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

@@ -0,0 +1,15 @@
+export const circleSizeClasses = {
+  xxs: "w-[64px] h-[64px]",
+  xs: "w-[160px] h-[160px]",
+  sm: "w-[200px] h-[200px]",
+  md: "w-[240px] h-[240px]",
+  lg: "w-[280px] h-[280px]",
+};
+
+export const circlePixelMap: Record<string, number> = {
+  xxs: 64,
+  xs: 160,
+  sm: 200,
+  md: 240,
+  lg: 280,
+};

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

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Progress } from ".";
+
+describe("Progress Component", () => {
+  it("renders circle type progress", () => {
+    render(<Progress type="circle" value={75} label={75} size="lg" />);
+    expect(screen.getByText("75%")).toBeInTheDocument();
+
+    const circle = document.querySelector("svg");
+    expect(circle).toBeInTheDocument();
+  });
+
+  it("renders half-circle type progress", () => {
+    render(<Progress type="half-circle" value={25} label={25} size="sm" />);
+    expect(screen.getByText("25%")).toBeInTheDocument();
+
+    const halfCircle = document.querySelector("svg");
+    expect(halfCircle).toBeInTheDocument();
+  });
+
+  it("does not render label when label is undefined", () => {
+    render(<Progress type="line" value={50} />);
+    expect(screen.queryByText("%")).not.toBeInTheDocument();
+  });
+
+  it("applies custom classNames correctly", () => {
+    render(
+      <Progress type="line" value={50} className="test-class" label={50} />
+    );
+    const progressBar = screen.getByRole("progressbar");
+    expect(progressBar).toHaveClass("test-class");
+  });
+});

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

@@ -0,0 +1,17 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { circleSizeClasses } from "./_.style";
+
+export type ProgressProps = React.ComponentPropsWithoutRef<
+  typeof ProgressPrimitive.Root
+> & {
+  value?: number; 
+  label?: number; 
+  labelClassName?: string; 
+  backgroundVariant?: string; 
+  indicatorVariant?: string; 
+  type?: "line" | "circle" | "half-circle";
+  size?: keyof typeof circleSizeClasses; 
+  strokeWidth?: number; 
+  svgClassName?: string;
+  className?: string;
+};

package/src/components/Progress/index.tsx

@@ -0,0 +1,173 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "@/lib/utils";
+import * as React from "react";
+import { circlePixelMap, circleSizeClasses } from "./_.style";
+import { ProgressProps } from "./_.types";
+
+export const Progress = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(
+  (
+    {
+      type = "line",
+      value = 0,
+      label,
+      labelClassName,
+      backgroundVariant,
+      indicatorVariant,
+      className,
+      size = "md",
+      strokeWidth = 16,
+      svgClassName,
+      ...props
+    },
+    ref
+  ) => {
+    const progress = Math.min(Math.max(value ?? 0, 0), 100);
+    const pxSize = circlePixelMap[size] || 240;
+    const radius = (pxSize - strokeWidth) / 2;
+
+    if (type === "half-circle") {
+      const circumference = Math.PI * radius;
+      const offset = circumference - (progress / 100) * circumference;
+      return (
+        <div
+          className={cn(
+            "relative flex items-center justify-center",
+            circleSizeClasses[size],
+            className
+          )}
+          ref={ref as React.Ref<HTMLDivElement>}
+          {...props}
+        >
+          <svg
+            width={pxSize}
+            height={pxSize / 2}
+            className={cn("rotate-[-90deg]", svgClassName)}
+          >
+            <circle
+              stroke="#e5e7eb"
+              fill="transparent"
+              strokeWidth={strokeWidth}
+              r={radius}
+              cx={pxSize / 2}
+              cy={pxSize / 2}
+            />
+            <circle
+              fill="transparent"
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeDasharray={circumference}
+              strokeDashoffset={circumference - offset}
+              r={radius}
+              cx={pxSize / 2}
+              cy={pxSize / 2}
+              style={{ transition: "stroke-dashoffset 0.5s ease" }}
+              className={indicatorVariant}
+            />
+          </svg>
+          {label !== undefined && (
+            <span
+              className={cn(
+                "absolute text-sm font-semibold text-muted-foreground",
+                labelClassName
+              )}
+            >
+              {label}%
+            </span>
+          )}
+        </div>
+      );
+    }
+
+    if (type === "circle") {
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - (progress / 100) * circumference;
+
+      return (
+        <div
+          className={cn(
+            "relative flex items-center justify-center",
+            circleSizeClasses[size],
+            className
+          )}
+          ref={ref as React.Ref<HTMLDivElement>}
+          {...props}
+        >
+          <svg
+            width={pxSize}
+            height={pxSize}
+            className={cn("rotate-[-90deg]", svgClassName)}
+          >
+            <circle
+              stroke="#e5e7eb"
+              fill="transparent"
+              strokeWidth={strokeWidth}
+              r={radius}
+              cx={pxSize / 2}
+              cy={pxSize / 2}
+            />
+            <circle
+              fill="transparent"
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeDasharray={circumference}
+              strokeDashoffset={offset}
+              r={radius}
+              cx={pxSize / 2}
+              cy={pxSize / 2}
+              style={{ transition: "stroke-dashoffset 0.5s ease" }}
+              className={indicatorVariant}
+            />
+          </svg>
+          {label !== undefined && (
+            <span
+              className={cn(
+                "absolute text-sm font-semibold text-muted-foreground",
+                labelClassName
+              )}
+            >
+              {label}%
+            </span>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex items-center gap-4 w-full">
+        <ProgressPrimitive.Root
+          ref={ref}
+          className={cn(
+            "relative h-4 w-full overflow-hidden rounded-full bg-muted",
+            backgroundVariant,
+            className
+          )}
+          {...props}
+        >
+          <ProgressPrimitive.Indicator
+            className={cn(
+              "h-full transition-transform duration-300",
+              indicatorVariant
+            )}
+            style={{ transform: `translateX(-${100 - value}%)` }}
+          />
+        </ProgressPrimitive.Root>
+
+        {typeof label === "number" && (
+          <span
+            className={cn(
+              "text-sm text-muted-foreground min-w-[40px] text-right",
+              labelClassName
+            )}
+          >
+            {label}%
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Progress.displayName = "Progress";