dst-rg 1.0.0

package/src/components/TextArea/index.tsx

@@ -0,0 +1,83 @@
+import {
+  destructiveStyles,
+  textAreaVariants,
+} from "@/components/TextArea/_.style";
+import { textAreaProps } from "@/components/TextArea/_.types";
+import { InputLabel } from "@/components/ui/input-component/input-label";
+import CircleQuestionMark from "@/icons/general/circle-question-mark";
+import { cn } from "@/lib/utils";
+import { TooltipWrapper } from "../Tooltip";
+
+const TextArea = ({
+  row = 5,
+  label,
+  required = false,
+  destructive = false,
+  disabled = false,
+  destructiveText,
+  hintText,
+  placeholder,
+  helpIcon = false,
+  onChange,
+  id,
+  tooltipProps,
+  className,
+  value,
+  name,
+  labelClass,
+  labelStarClass,
+  autoFocus = false,
+  ...props
+}: Readonly<textAreaProps>) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center">
+        <InputLabel id={id} label={label} required={required}
+          labelClass={labelClass}
+          labelStarClass={labelStarClass}
+        />
+        {helpIcon && tooltipProps && (
+          <TooltipWrapper
+            content={tooltipProps?.text}
+            description={tooltipProps?.description}
+            position={tooltipProps?.position}
+            dir={tooltipProps?.dir}
+            descriptionClassName={tooltipProps?.descriptionClassName}
+          >
+            <div>
+              <CircleQuestionMark />
+            </div>
+          </TooltipWrapper>
+        )}
+      </div>
+      <textarea
+        value={value}
+        name={name}
+        disabled={disabled}
+        rows={row}
+        placeholder={placeholder}
+        id={id}
+        onChange={onChange}
+        className={cn(
+          textAreaVariants(),
+          className,
+          destructive && destructiveStyles,
+          destructive && "bg-rbg-disabled-subtle border-rborder-disabled"
+        )}
+        autoFocus={autoFocus}
+        {...props}
+      />
+      {destructive === false && hintText && (
+        <p className="text-sm text-rtext-tertiary-600">{hintText}</p>
+      )}
+      {destructive && destructiveText && (
+        <p className="text-sm text-rtext-error-primary-600">
+          {destructiveText}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export { TextArea };
+

package/src/components/Toast/_.style.tsx

@@ -0,0 +1,27 @@
+import { AlertTriangle, CheckCircle, Info, XCircle } from "lucide-react";
+
+export const iconMap = {
+    success: <CheckCircle className="text-green-100" size={20} />,
+    error: <XCircle className="text-red-100" size={20} />,
+    info: <Info className="text-blue-100" size={20} />,
+    warning: <AlertTriangle className="text-yellow-100" size={20} />,
+};
+
+export const bgMap = {
+    success: "bg-green-500",
+    error: "bg-red-500",
+    info: "bg-blue-500",
+    warning: "bg-yellow-500 text-black",
+};
+
+export const animationMap = {
+    fade: "transition-all duration-300",
+    slide: "transition-all duration-300 transform translate-x-0",
+    scale: "transition-all duration-300 transform scale-100",
+};
+
+export const hiddenAnimationMap = {
+    fade: "opacity-0",
+    slide: "translate-x-10 opacity-0",
+    scale: "scale-0 opacity-0",
+};

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

@@ -0,0 +1,30 @@
+export type ToastPosition =
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "middle-center"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+
+export interface ToastContainerProps {
+    type?: "success" | "error" | "info" | "warning";
+    duration?: number;
+    animation?: "fade" | "slide" | "scale";
+    position?: ToastPosition;
+    showProgress?: boolean;
+}
+
+export type ToastType = ToastContainerProps & {
+    id: number;
+    message: string;
+};
+
+export type ToastOptions = ToastContainerProps & {
+    message: string;
+};
+
+export type InternalToast = ToastType & {
+    visible: boolean; // حالت انیمیشن
+    progressVisible?: boolean;
+};

package/src/components/Toast/_.utils.ts

@@ -0,0 +1,23 @@
+import { ToastPosition } from "./_.type";
+
+export function positionToClass(position: ToastPosition): string {
+    switch (position) {
+        case "top-left":
+            return "top-4 left-4";
+        case "top-center":
+            return "top-4 left-1/2 -translate-x-1/2";
+        case "top-right":
+            return "top-4 right-4";
+        case "middle-center":
+            return "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+        case "bottom-left":
+            return "bottom-4 left-4";
+        case "bottom-center":
+            return "bottom-4 left-1/2 -translate-x-1/2";
+        case "bottom-right":
+            return "bottom-4 right-4";
+        default:
+            return "top-4 right-4";
+    }
+}
+  

package/src/components/Toast/container.tsx

@@ -0,0 +1,171 @@
+import { X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { setToastDefaults } from ".";
+import { animationMap, bgMap, hiddenAnimationMap, iconMap } from "./_.style";
+import { InternalToast, ToastContainerProps, ToastPosition, ToastType } from "./_.type";
+import { positionToClass } from "./_.utils";
+
+const MAX_VISIBLE_TOASTS = 3;
+
+const positions: ToastPosition[] = [
+    "top-left",
+    "top-center",
+    "top-right",
+    "middle-center",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+];
+
+export const ToastContainer = ({
+    type = "info",
+    position = "top-right",
+    duration = 3000,
+    animation = "fade",
+    showProgress = true,
+}: ToastContainerProps) => {
+    const [toasts, setToasts] = useState<InternalToast[]>([]);
+    const timers = useRef<{ [id: number]: { timeoutId: any; start: number; remaining: number } }>({});
+
+    // set global defaults for toast (only once)
+    useEffect(() => {
+        setToastDefaults({
+            type,
+            duration,
+            animation,
+            position,
+            showProgress,
+        });
+    }, []);
+
+    useEffect(() => {
+        const handler = (e: CustomEvent<ToastType>) => {
+            const id = Date.now();
+            const duration = e.detail.duration ?? 3000;
+
+            const newToast: InternalToast = {
+                ...e.detail,
+                id,
+                visible: true,
+                progressVisible: false,
+                duration,
+                position: e.detail.position ?? "top-right",
+                animation: e.detail.animation ?? "fade",
+                showProgress: e.detail.showProgress ?? false,
+            };
+
+            setToasts((prev) => {
+                if (prev.length >= MAX_VISIBLE_TOASTS) return prev;
+
+                const start = Date.now();
+                timers.current[id] = {
+                    timeoutId: setTimeout(() => hideToast(id), duration),
+                    start,
+                    remaining: duration,
+                };
+
+                return [...prev, newToast];
+            });
+
+            requestAnimationFrame(() => {
+                setToasts((prev) =>
+                    prev.map((t) =>
+                        t.id === id ? { ...t, progressVisible: true } : t
+                    )
+                );
+            });
+        };
+
+
+        window.addEventListener("custom-toast", handler as EventListener);
+        return () => window.removeEventListener("custom-toast", handler as EventListener);
+    }, []);
+
+    const hideToast = (id: number) => {
+        setToasts((prev) =>
+            prev.map((t) => (t.id === id ? { ...t, visible: false } : t))
+        );
+        setTimeout(() => {
+            setToasts((prev) => prev.filter((t) => t.id !== id));
+            delete timers.current[id];
+        }, 300);
+    };
+
+    const pauseToast = (id: number) => {
+        const timer = timers.current[id];
+        if (!timer) return;
+
+        const now = Date.now();
+        const passed = now - timer.start;
+        timer.remaining = Math.max(0, timer.remaining - passed);
+
+        clearTimeout(timer.timeoutId);
+    };
+
+    const resumeToast = (id: number) => {
+        const timer = timers.current[id];
+        if (!timer || timer.remaining <= 0) return;
+
+        timer.start = Date.now();
+        timer.timeoutId = setTimeout(() => hideToast(id), timer.remaining);
+    };
+
+    return (
+        <>
+            {positions.map((pos) => {
+                const group = toasts
+                    .filter((t) => t.position === pos)
+                    .slice(-MAX_VISIBLE_TOASTS);
+
+                if (group.length === 0) return null;
+
+                return (
+                    <div
+                        key={pos}
+                        className={`fixed z-50 space-y-2 w-full sm:w-[320px] px-4 ${positionToClass(pos)}`}
+                    >
+                        {group.map((toast) => {
+                            console.log("toast : ", toast)
+                            return (
+                                <div
+                                    key={toast.id}
+                                    onMouseEnter={() => pauseToast(toast.id)}
+                                    onMouseLeave={() => resumeToast(toast.id)}
+                                    className={twMerge('relative px-4 py-3 pr-10 rounded shadow text-white flex items-start gap-3',
+                                        bgMap[toast.type ?? "info"],
+                                        animationMap[toast.animation ?? "fade"],
+                                        toast.visible ? "" : hiddenAnimationMap[toast.animation ?? "fade"])}
+                                >
+                                    <span>{iconMap[toast.type ?? "info"]}</span>
+                                    <div
+                                        className="flex-1 break-words text-sm"
+                                        dangerouslySetInnerHTML={{
+                                            __html: toast.message,
+                                        }}
+                                    />
+                                    <button
+                                        className="absolute top-2 right-2 text-white hover:opacity-80"
+                                        onClick={() => hideToast(toast.id)}
+                                    >
+                                        <X size={16} />
+                                    </button>
+                                    {toast.showProgress && (
+                                        <div
+                                            className="absolute bottom-0 left-0 h-1 bg-white/50"
+                                            style={{
+                                                width: toast.progressVisible ? "100%" : "0%",
+                                                transition: `width ${toast.duration}ms linear`,
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                            )
+                        })}
+                    </div>
+                );
+            })}
+        </>
+    );
+
+};

package/src/components/Toast/index.tsx

@@ -0,0 +1,29 @@
+import { ToastOptions } from "./_.type";
+import { ToastContainer } from "./container";
+
+// default config to be set by ToastContainer
+let defaultOptions: Partial<Omit<ToastOptions, "message">> = {};
+
+export function setToastDefaults(options: Partial<Omit<ToastOptions, "message">>) {
+    defaultOptions = options;
+}
+
+export function toast(options: ToastOptions): void;
+export function toast(message: string): void;
+export function toast(input: any) {
+    const detail: ToastOptions =
+        typeof input === "string"
+            ? { ...defaultOptions, message: input, type: defaultOptions?.type ?? "info" }
+            : { ...defaultOptions, ...input };
+
+    const event = new CustomEvent("custom-toast", { detail });
+    window.dispatchEvent(event);
+}
+
+// Optional: helper methods for common types
+toast.success = (message: string, opts?: Partial<ToastOptions>) => toast({ ...defaultOptions, ...opts, message, type: "success" });
+toast.error = (message: string, opts?: Partial<ToastOptions>) => toast({ ...defaultOptions, ...opts, message, type: "error" });
+toast.info = (message: string, opts?: Partial<ToastOptions>) => toast({ ...defaultOptions, ...opts, message, type: "info" });
+toast.warning = (message: string, opts?: Partial<ToastOptions>) => toast({ ...defaultOptions, ...opts, message, type: "warning" });
+
+export { ToastContainer };

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

@@ -0,0 +1,106 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { TooltipWrapper } from ".";
+import { Button } from "../Button";
+import { TooltipWrapperProps } from "./_.types";
+
+export default {
+  title: "Components/TooltipWrapper",
+  component: TooltipWrapper,
+  tags: ["autodocs"],
+  argTypes: {
+    dir: {
+      control: { type: "radio" },
+      options: ["ltr", "rtl"],
+    },
+    content: {
+      control: { type: "text" },
+    },
+    description: {
+      control: { type: "text" },
+    },
+    position: {
+      control: { type: "select" },
+      options: ["none", "top", "bottom", "left", "right"],
+    },
+    sideOffset: {
+      control: { type: "number" },
+    },
+    className: {
+      control: false,
+    },
+    contentClassName: {
+      control: false,
+    },
+    descriptionClassName: {
+      control: false,
+    },
+    children: {
+      control: false,
+    },
+  },
+  args: {
+    dir: "ltr",
+    content: "This is a tooltip",
+    description: "Additional description",
+    position: "top",
+    sideOffset: 4,
+  },
+} as Meta<typeof TooltipWrapper>;
+
+type Story = StoryObj<TooltipWrapperProps>;
+
+export const Default: Story = {
+  render: (args) => (
+    <TooltipWrapper {...args}>
+      <Button>Hover me</Button>
+    </TooltipWrapper>
+  ),
+};
+
+export const RTL: Story = {
+  args: {
+    dir: "rtl",
+    content: "تولتیپ فارسی",
+    description: "توضیحات تکمیلی",
+    position: "bottom",
+  },
+  render: (args) => (
+    <TooltipWrapper {...args}>
+      <Button>این یک tooltip است</Button>
+    </TooltipWrapper>
+  ),
+};
+
+export const WithoutDescription: Story = {
+  args: {
+    description: "",
+  },
+  render: (args) => (
+    <TooltipWrapper {...args}>
+      <Button>No description</Button>
+    </TooltipWrapper>
+  ),
+};
+
+export const WithoutArrow: Story = {
+  args: {
+    position: "none",
+  },
+  render: (args) => (
+    <TooltipWrapper {...args}>
+      <Button>No arrow</Button>
+    </TooltipWrapper>
+  ),
+};
+
+export const CustomOffset: Story = {
+  args: {
+    sideOffset: 10,
+  },
+  render: (args) => (
+    <TooltipWrapper {...args}>
+      <Button>Offset 10</Button>
+    </TooltipWrapper>
+  ),
+};

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

@@ -0,0 +1,27 @@
+import { Position } from "./_.types";
+
+export const PositionMap: Record<
+  Position,
+  {
+    side: "top" | "bottom" | "left" | "right";
+    align: "start" | "center" | "end";
+  }
+> = {
+  none: { side: "top", align: "center" },
+  top: { side: "top", align: "center" },
+  topstart: { side: "top", align: "start" },
+  topcenter: { side: "top", align: "center" },
+  topend: { side: "top", align: "end" },
+  bottom: { side: "bottom", align: "center" },
+  bottomstart: { side: "bottom", align: "start" },
+  bottomcenter: { side: "bottom", align: "center" },
+  bottomend: { side: "bottom", align: "end" },
+  left: { side: "left", align: "center" },
+  leftstart: { side: "left", align: "start" },
+  leftcenter: { side: "left", align: "center" },
+  leftend: { side: "left", align: "end" },
+  right: { side: "right", align: "center" },
+  rightstart: { side: "right", align: "start" },
+  rightcenter: { side: "right", align: "center" },
+  rightend: { side: "right", align: "end" },
+};

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

@@ -0,0 +1,54 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect } from "vitest";
+import { TooltipWrapper } from ".";
+import { Button } from "../Button";
+
+describe("TooltipWrapper", () => {
+  it("renders the tooltip content on hover", async () => {
+    render(
+      <TooltipWrapper content="Tooltip Text">
+        <Button>Hover me</Button>
+      </TooltipWrapper>
+    );
+  const trigger = screen.getByText(/Hover me/i); 
+
+  expect(screen.queryByText(/Tooltip Text/i)).not.toBeInTheDocument();
+
+  await userEvent.hover(trigger);
+
+  await waitFor(() => {
+    const tooltips = screen.getAllByText("Tooltip Text");
+    expect(tooltips.length).toBeGreaterThan(0);
+  });
+  });
+
+  it("displays the description if provided", async () => {
+    render(
+      <TooltipWrapper content="Tooltip Text" description="Extra Info">
+        <Button>Hover me</Button>
+      </TooltipWrapper>
+    );
+
+    await userEvent.hover(screen.getByText(/Hover me/i));
+
+    await waitFor(() => {
+      const extras = screen.getAllByText(/Extra Info/i);
+      expect(extras.length).toBeGreaterThan(0);
+    });
+  });
+
+  it("does not render description if not provided", async () => {
+    render(
+      <TooltipWrapper content="Tooltip Only">
+        <Button>Hover me</Button>
+      </TooltipWrapper>
+    );
+
+    await userEvent.hover(screen.getByText(/Hover me/i));
+
+    await waitFor(() => {
+      expect(screen.queryByText(/Extra Info/i)).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+export type Position =
+  | "none"
+  | "top"
+  | "topstart"
+  | "topcenter"
+  | "topend"
+  | "bottom"
+  | "bottomstart"
+  | "bottomcenter"
+  | "bottomend"
+  | "left"
+  | "leftstart"
+  | "leftcenter"
+  | "leftend"
+  | "right"
+  | "rightstart"
+  | "rightcenter"
+  | "rightend";
+
+export interface TooltipWrapperProps {
+  children: ReactNode;
+  content: string;
+  description?: string;
+  className?: string;
+  contentClassName?: string;
+  descriptionClassName?: string;
+  sideOffset?: number;
+  position?: Position;
+  dir?: "rtl" | "ltr";
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
+import { PositionMap } from "./_.style";
+import { TooltipWrapperProps } from "./_.types";
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-black px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props}
+  >
+    {props.children}
+  </TooltipPrimitive.Content>
+)); TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export const TooltipWrapper = ({
+  children,
+  content,
+  description,
+  className,
+  contentClassName,
+  descriptionClassName,
+  sideOffset = 4,
+  position = "none",
+  dir = "rtl",
+}: TooltipWrapperProps & { dir?: "rtl" | "ltr" }) => {
+  const isLTR = dir === "ltr";
+  const Position = PositionMap[position] || {
+    side: "top",
+    align: isLTR ? "start" : "end",
+  };
+  const shouldRenderArrow = position !== "none";
+
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={50}>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipContent
+          className={cn(className)}
+          sideOffset={sideOffset}
+          side={Position.side}
+          align={Position.align}
+          dir={dir}
+        >
+          <div className="flex flex-col" dir={dir}>
+            <span className={cn("text-base font-medium", contentClassName)}>
+              {content}
+            </span>
+            {description && (
+              <span
+                className={cn(
+                  "text-xs opacity-70 mt-1",
+                  isLTR ? "text-start" : "text-end",
+                  descriptionClassName
+                )}
+              >
+                {description}
+              </span>
+            )}
+          </div>
+          {shouldRenderArrow && (
+            <TooltipPrimitive.Arrow
+              className="fill-black"
+              width={16}
+              height={6}
+            />
+          )}
+        </TooltipContent>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+};