dst-rg 1.0.0

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,130 @@
+import { cn } from "@/lib/utils";
+import { getBackdropZIndex } from "@/lib/zIndexUtils";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "../Button";
+import { dropdownPlacementVariants } from "./_.style";
+import { DropdownWrapperProps } from "./_.types";
+
+export const Dropdown = ({
+  children,
+  toggleBtn,
+  direction = "down",
+  alignment = "right",
+  dropDownClassName = "",
+  autoAdjust = true,
+  open: openProp,
+  onOpenChange,
+}: DropdownWrapperProps) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [placement, setPlacement] = useState<"down" | "up" | "left" | "right">(direction);
+  const [placementAlignment, setPlacementAlignment] = useState<"left" | "right" | "top" | "bottom">(alignment);
+  const isControlled =
+    openProp !== undefined && typeof onOpenChange === "function";
+  const open = openProp ?? internalOpen;
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const depthRef = useRef<number>(0);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!autoAdjust) {
+      setPlacement(direction);
+      setPlacementAlignment(alignment);
+      return;
+    }
+    if (open && wrapperRef.current && dropdownRef.current) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      const dropdownRect = dropdownRef.current.getBoundingClientRect();
+      const estWidth = dropdownRect.width || 200;
+      const estHeight = dropdownRect.height || 200;
+
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const spaceRight = window.innerWidth - rect.right;
+      const spaceLeft = rect.left;
+
+      // Determine best direction based on available space
+      if (direction === "down" || direction === "up") {
+        if (spaceBelow < estHeight && spaceAbove > spaceBelow) {
+          setPlacement("up");
+        } else {
+          setPlacement("down");
+        }
+        setPlacementAlignment(alignment);
+      } else if (direction === "left" || direction === "right") {
+        if (direction === "left") {
+          if (spaceLeft < estWidth && spaceRight > spaceLeft) {
+            setPlacement("right");
+          } else {
+            setPlacement("left");
+          }
+        } else if (direction === "right") {
+          if (spaceRight < estWidth && spaceLeft > spaceRight) {
+            setPlacement("left");
+          } else {
+            setPlacement("right");
+          }
+        }
+        setPlacementAlignment(alignment);
+      } else {
+        // Auto-detect best direction
+        const verticalSpace = Math.max(spaceBelow, spaceAbove);
+        const horizontalSpace = Math.max(spaceRight, spaceLeft);
+
+        if (verticalSpace > horizontalSpace) {
+          if (spaceBelow > spaceAbove) {
+            setPlacement("down");
+          } else {
+            setPlacement("up");
+          }
+          setPlacementAlignment(alignment);
+        } else {
+          if (spaceRight > spaceLeft) {
+            setPlacement("right");
+          } else {
+            setPlacement("left");
+          }
+          setPlacementAlignment(alignment);
+        }
+      }
+    }
+  }, [open, direction, alignment, autoAdjust]);
+
+  const setOpen = (val: boolean) => {
+    if (isControlled && onOpenChange) {
+      onOpenChange(val);
+    } else {
+      setInternalOpen(val);
+    }
+  };
+  return (
+    <div className="relative inline-block" ref={wrapperRef}>
+      <Button {...toggleBtn} onClick={() => setOpen(!open)} />
+      {open && (
+        <div
+          ref={dropdownRef}
+          style={{ zIndex: getBackdropZIndex(depthRef.current) }}
+          className={cn(
+            "absolute border border-rborder-secondary w-fit rounded-md shadow-lg bg-rbg-primary",
+            dropdownPlacementVariants({ direction: placement, alignment: placementAlignment }),
+            dropDownClassName
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,74 @@
+// FileUploader.stories.tsx
+
+import React, { useState } from "react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { UploadCloud } from "lucide-react";
+import { UploadItemProps, FileUploaderProps } from "./_.types";
+import { FileUploader } from ".";
+
+export default {
+  title: "Components/FileUploader",
+  component: FileUploader,
+} as Meta<FileUploaderProps>;
+
+const Template: StoryFn<FileUploaderProps> = (args) => {
+  const [items, setItems] = useState<UploadItemProps[]>([]);
+
+  // Handler to simulate file selection/upload
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { files } = e.target;
+    if (!files) return;
+
+    // Create new items from selected files (dummy upload data)
+    const newItems: UploadItemProps[] = Array.from(files).map(
+      (file, index) => ({
+        id: Date.now() + index,
+        title: file.name,
+        progressValue: 50,
+        description: "در حال آپلود...", // "Uploading..."
+        percentage: 50,
+        error: false,
+        size: `${(file.size / 1024).toFixed(2)} KB`,
+        format: "jpeg", // Should be one of "video" | "jpeg" | "pdf" | "unkown"
+        icon: <UploadCloud size={16} />,
+        status: "uploading",
+      })
+    );
+
+    setItems((prev) => [...prev, ...newItems]);
+  };
+
+  // Handler to simulate deletion of an upload item
+  const handleDelete = (id: number) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  return (
+    <div className="p-4">
+      <FileUploader
+        {...args}
+        items={items}
+        onChange={handleChange}
+        onDelete={handleDelete}
+      />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: <UploadCloud size={20} />,
+  mainText: "برای آپلود کلیک کنید",
+  subText: "یا بکشید و رها کنید",
+  formatText: "SVG, PNG, JPG یا GIF (حداکثر 800x400 پیکسل)",
+  acceptableFormats: ["png", "jpeg", "svg"],
+  disable: false,
+  loadType: "progressBar",
+  multiItem: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disable: true,
+};

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

@@ -0,0 +1,222 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { FileUploaderBox } from "../ui/file-uploader-components/file-uploader-box";
+import { FileUploaderItem } from "../ui/file-uploader-components/file-uploader-item";
+import { FileUploader } from ".";
+import { UploadItemProps } from "./_.types";
+
+describe("FileUploader", () => {
+  it("renders uploader box and no items initially", () => {
+    render(
+      <FileUploader
+        mainText="آپلود"
+        subText="کشیدن فایل"
+        formatText="png only"
+        acceptableFormats={["png"]}
+        onChange={() => {}}
+        onDelete={() => {}}
+      />
+    );
+
+    expect(screen.getByText("آپلود")).toBeInTheDocument();
+    expect(screen.getByText("کشیدن فایل")).toBeInTheDocument();
+  });
+
+  it("renders upload items if provided", () => {
+    render(
+      <FileUploader
+        mainText="آپلود"
+        subText="کشیدن فایل"
+        formatText="png only"
+        acceptableFormats={["png"]}
+        items={[
+          {
+            id: 1,
+            title: "file1.png",
+            size: "1MB",
+            description: "",
+            progressValue: 70,
+            percentage: 70,
+            icon: <div>📄</div>,
+            error: false,
+            status: "uploading",
+          },
+        ]}
+        onChange={() => {}}
+        onDelete={() => {}}
+      />
+    );
+
+    expect(screen.getByText("file1.png")).toBeInTheDocument();
+  });
+});
+
+describe("FileUploaderBox", () => {
+  const defaultProps = {
+    mainText: "آپلود کن",
+    subText: "یا بکش و رها کن",
+    formatText: "png, jpg",
+    acceptableFormats: ["png", "jpg"],
+    onChange: vi.fn(),
+    disable: false,
+    multiItem: false,
+  };
+  const baseProps = {
+    mainText: "Upload File",
+    subText: "Drag and drop file",
+    formatText: "Accepts PNG, JPG",
+    onChange: () => {},
+  };
+  it("renders mainText and subText", () => {
+    render(<FileUploaderBox {...defaultProps} />);
+    expect(screen.getByText("آپلود کن")).toBeInTheDocument();
+    expect(screen.getByText("یا بکش و رها کن")).toBeInTheDocument();
+  });
+
+  it("renders default icon when icon prop is not provided", () => {
+    render(<FileUploaderBox {...defaultProps} />);
+    const svgElement = screen.getByTestId("default-uploadcloud");
+    expect(svgElement).toBeInTheDocument();
+  });
+
+  it("renders custom icon when icon prop is provided", () => {
+    const CustomIcon = () => <div data-testid="custom-icon">Custom Icon</div>;
+    render(<FileUploaderBox {...defaultProps} icon={<CustomIcon />} />);
+    expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+    expect(screen.queryByTestId("default-uploadcloud")).toBeNull();
+  });
+
+  it("computes accept attribute correctly when acceptableFormats is an array", () => {
+    render(
+      <FileUploaderBox {...defaultProps} acceptableFormats={["png", "jpeg"]} />
+    );
+    const fileInput = screen.getByTestId("file-input") as HTMLInputElement;
+    expect(fileInput.getAttribute("accept")).toBe(".png, .jpeg");
+  });
+
+  it("computes accept attribute correctly when acceptableFormats is a string", () => {
+    render(<FileUploaderBox {...defaultProps} acceptableFormats="image/*" />);
+    const fileInput = screen.getByTestId("file-input") as HTMLInputElement;
+    expect(fileInput.getAttribute("accept")).toBe("image/*");
+  });
+
+  it("disables input and button when disable prop is true", () => {
+    render(<FileUploaderBox {...defaultProps} disable={true} />);
+    const fileInput = screen.getByTestId("file-input") as HTMLInputElement;
+    expect(fileInput.disabled).toBe(true);
+    const button = fileInput.closest("label")?.querySelector("button");
+    expect(button).toBeDefined();
+    if (button) {
+      expect(button).toBeDisabled();
+    }
+  });
+
+  it("calls onChange when file is uploaded", () => {
+    const onChange = vi.fn();
+    render(<FileUploaderBox {...defaultProps} onChange={onChange} />);
+    const fileInput = screen.getByTestId("file-input") as HTMLInputElement;
+    const file = new File(["test"], "test.png", { type: "image/png" });
+    fireEvent.change(fileInput, { target: { files: [file] } });
+    expect(onChange).toHaveBeenCalled();
+  });
+  it("sets accept attribute correctly when acceptableFormats is an array", () => {
+    const acceptableFormats = ["png", ".jpg"];
+    render(
+      <FileUploaderBox {...baseProps} acceptableFormats={acceptableFormats} />
+    );
+    const fileInput = screen.getByTestId("file-input") as HTMLInputElement;
+    expect(fileInput.getAttribute("accept")).toBe(".png, .jpg");
+  });
+
+  it("sets accept attribute correctly when acceptableFormats is a string", () => {
+    const acceptableFormats = "image/*";
+    render(
+      <FileUploaderBox {...baseProps} acceptableFormats={acceptableFormats} />
+    );
+    const fileInput = screen.getByTestId("file-input") as HTMLInputElement;
+    expect(fileInput.getAttribute("accept")).toBe("image/*");
+  });
+
+  it("does not set accept attribute when acceptableFormats is not provided", () => {
+    render(<FileUploaderBox {...baseProps} />);
+    const fileInput = screen.getByTestId("file-input") as HTMLInputElement;
+    expect(fileInput.getAttribute("accept")).toBeNull();
+  });
+});
+describe("FileUploaderItem", () => {
+  const mockItem: UploadItemProps = {
+    id: 1,
+    title: "sample.png",
+    description: "A sample image",
+    error: false,
+    size: "1MB",
+    icon: <div data-testid="icon">🖼️</div>,
+    status: "uploading",
+    progressValue: 50,
+    percentage: 50,
+  };
+
+  it("renders file info and icon", () => {
+    render(
+      <FileUploaderItem
+        item={mockItem}
+        loadType="progressBar"
+        onDelete={() => {}}
+      />
+    );
+    expect(screen.getByText("sample.png")).toBeInTheDocument();
+    expect(screen.getByText("1MB")).toBeInTheDocument();
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("calls onDelete when trash icon is clicked", () => {
+    const onDelete = vi.fn();
+    render(
+      <FileUploaderItem
+        item={mockItem}
+        loadType="progressBar"
+        onDelete={onDelete}
+      />
+    );
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+    expect(onDelete).toHaveBeenCalledWith(1);
+  });
+  it("applies error class when item.status is 'failed'", () => {
+    const failedItem = { ...mockItem, status: "failed" };
+    const { container } = render(
+      <FileUploaderItem
+        item={failedItem}
+        loadType="progressBar"
+        onDelete={() => {}}
+      />
+    );
+    expect(container.firstChild).toHaveClass("border-rborder-error");
+  });
+  it("renders fallback SVG icon when item.icon is not provided", () => {
+    const mockItemWithNoIcon = {
+      ...mockItem,
+      icon: null,
+      status: "failed",
+    };
+
+    const { container } = render(
+      <FileUploaderItem
+        item={mockItemWithNoIcon}
+        loadType="progressBar"
+        onDelete={() => {}}
+      />
+    );
+    const svgs = container.querySelectorAll("svg");
+
+    const fallbackSvg = svgs[0];
+
+    expect(fallbackSvg).toBeTruthy();
+    expect(fallbackSvg.getAttribute("viewBox")).toBe("0 0 20 20");
+    expect(fallbackSvg.querySelector("path")?.getAttribute("stroke")).toBe(
+      "#98A2B3"
+    );
+    expect(container.firstChild).toHaveClass("border-rborder-error");
+  });
+});

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

@@ -0,0 +1,53 @@
+type AcceptableExtension =
+  | "png"
+  | "jpg"
+  | "jpeg"
+  | "svg"
+  | "gif"
+  | "webp"
+  | "pdf"
+  | "docx"
+  | "xlsx"
+  | "mp4"
+  | "mp3"
+  | "wav";
+export interface UploadItemProps {
+  id: number;
+  title: string;
+  progressValue?: number;
+  description: string;
+  percentage?: number;
+  error: boolean;
+  size: string;
+  icon?: React.ReactNode;
+  status: string;
+}
+export interface FileUploaderProps {
+  icon?: React.ReactNode;
+  mainText: string;
+  subText: string;
+  formatText: string;
+  acceptableFormats?: AcceptableExtension[] | AcceptableExtension | "";
+  disable?: boolean;
+  items?: UploadItemProps[];
+  loadType?: "progressBar" | "progressFill";
+  multiItem?: boolean;
+  onDelete: (id: number) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export interface FileUploaderBoxProps {
+  icon?: React.ReactNode;
+  mainText: string;
+  subText: string;
+  formatText: string;
+  acceptableFormats?: string[] | string;
+  disable?: boolean;
+  multiItem?: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export interface FileUploaderItemProps {
+  item: UploadItemProps;
+  loadType?: "progressBar" | "progressFill";
+  onDelete: (id: number) => void;
+}

package/src/components/FileUpload/index.tsx

@@ -0,0 +1,44 @@
+import { FileUploaderBox } from "../ui/file-uploader-components/file-uploader-box";
+import { FileUploaderItem } from "../ui/file-uploader-components/file-uploader-item";
+import { FileUploaderProps } from "./_.types";
+
+export const FileUploader = ({
+  icon,
+  mainText,
+  subText,
+  formatText,
+  acceptableFormats = "",
+  disable = false,
+  items,
+  loadType = "progressBar",
+  multiItem = false,
+  onChange,
+  onDelete,
+}: FileUploaderProps) => {
+  return (
+    <div className="w-full flex flex-col gap-4">
+      <FileUploaderBox
+        icon={icon}
+        mainText={mainText}
+        subText={subText}
+        formatText={formatText}
+        acceptableFormats={acceptableFormats}
+        disable={disable}
+        multiItem={multiItem}
+        onChange={onChange}
+      />
+      {items && items.length > 0 && (
+        <div className="flex flex-col gap-3">
+          {items.map((item) => (
+            <FileUploaderItem
+              key={item?.title}
+              item={item}
+              loadType={loadType}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};