dst-rg 1.0.0

package/src/components/ui/checkbox-group/plan-card/with-header/header.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi } from "vitest";
+import { Header } from "./header";
+
+describe("Header Component", () => {
+  const onChange = vi.fn();
+  const renderFunction = ({
+    type = "checkbox",
+  }: {
+    type?: "checkbox" | "radio";
+  }) => {
+    return render(
+      <Header
+        title="Plan Title"
+        size="sm"
+        disabled={false}
+        checkboxIndex={1}
+        id="plan-id"
+        value="plan-value"
+        onChange={onChange}
+        type={type}
+      />
+    );
+  };
+
+  it("renders correctly with title", () => {
+    renderFunction({ type: "checkbox" });
+    const titleElement = screen.getByText("Plan Title");
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it("renders the correct icon", () => {
+    renderFunction({ type: "checkbox" });
+    const iconElement = screen.getByTestId("layer-icon");
+    expect(iconElement).toBeInTheDocument();
+  });
+
+  it("renders checkbox when type is checkbox", () => {
+    renderFunction({ type: "checkbox" });
+
+    const checkboxElement = screen.getByTestId("checkbox");
+    expect(checkboxElement).toBeInTheDocument();
+  });
+
+  it("renders radio button when type is radio", () => {
+    renderFunction({ type: "radio" });
+
+    const radioElement = screen.getByRole("radio");
+    expect(radioElement).toBeInTheDocument();
+  });
+
+  it("calls onChange when checkbox is clicked", () => {
+    renderFunction({ type: "checkbox" });
+
+    const checkbox = screen.getByTestId("checkbox");
+    fireEvent.click(checkbox);
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("calls onChange when radio button is clicked", () => {
+    renderFunction({ type: "radio" });
+
+    const radio = screen.getByRole("radio");
+    fireEvent.click(radio);
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("does not call onChange when checkbox is clicked and disabled", () => {
+    renderFunction({ type: "checkbox" });
+
+    const checkbox = screen.getByTestId("checkbox");
+    fireEvent.click(checkbox);
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("applies the correct classes when disabled", () => {
+    renderFunction({ type: "checkbox" });
+
+    const header = screen.getByTestId("header");
+    expect(header).toHaveClass(
+      "flex items-center border-b border-rborder-secondary p-4 w-full gap-2 group-focus-within:border-rbg-brand-solid group-focus-within:border-b-2 border-b"
+    );
+  });
+
+  it("applies the correct classes when enabled", () => {
+    renderFunction({ type: "checkbox" });
+    const header = screen.getByTestId("header");
+    expect(header).toHaveClass(
+      "group-focus-within:border-rbg-brand-solid group-focus-within:border-b-2 border-b"
+    );
+  });
+});

package/src/components/ui/checkbox-group/plan-card/with-header/header.tsx

@@ -0,0 +1,74 @@
+import { Checkbox } from "@/components/Checkbox";
+import { CommonCheckboxProps } from "@/components/CheckboxGroup/PlanCard/_.types";
+import { Radio } from "@/components/Radio";
+import IconWrapper from "@/components/ui/icon-wrapper";
+import Layer from "@/icons/general/layer";
+
+export const Header = ({
+  title,
+  size,
+  disabled,
+  checkboxIndex,
+  id,
+  name = "",
+  value = "",
+  onChange,
+  inputProps,
+  checked,
+  type,
+  ...props
+}: {
+  title: string;
+  name?: string;
+  value?: string;
+} & CommonCheckboxProps) => {
+  const bgClass =
+    disabled ||
+    "group-focus-within:border-rbg-brand-solid group-focus-within:border-b-2 border-b";
+
+  return (
+    <div
+      data-testid="header"
+      className={`flex items-center border-b-2 border-rborder-secondary p-4 w-full gap-2 ${bgClass}`}
+      {...props}
+    >
+      <IconWrapper>
+        <Layer width="20" height="20" />
+      </IconWrapper>
+
+      <div className="flex flex-col grow justify-between">
+        <div className="flex text-sm">
+          <h3 className="font-medium text-foreground text-rtext-secondary-700">
+            {title}
+          </h3>
+        </div>
+      </div>
+
+      <div className="flex items-start gap-2">
+        {type === "radio" ? (
+          <Radio
+            onChange={onChange}
+            checked={checked}
+            disabled={disabled}
+            value={value}
+            name={name}
+            size={size}
+            id={id}
+            {...inputProps}
+          />
+        ) : (
+          <Checkbox
+            checkboxIndex={checkboxIndex}
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            size={size}
+            value={value}
+            {...inputProps}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/ui/checkbox-group/plan-card/with-header/index.tsx

@@ -0,0 +1,65 @@
+import { Badge } from "@/components/Badge";
+import { PlanCardProps } from "@/components/CheckboxGroup/PlanCard/_.types";
+import { Header } from "./header";
+
+export function PlanCardWithHeader({
+  per,
+  size = "sm",
+  title = "",
+  price,
+  description,
+  checked,
+  badgeContent,
+  checkboxIndex = 1,
+  id = "",
+  value = "value",
+  name = "",
+  onChange,
+  disabled,
+  type,
+}: Readonly<PlanCardProps>) {
+  return (
+    <>
+      <Header
+        type={type}
+        onChange={onChange}
+        name={name}
+        disabled={disabled}
+        checked={checked}
+        value={value}
+        data-testid="header"
+        checkboxIndex={checkboxIndex}
+        title={title}
+        size={size}
+        id={id}
+      />
+      <div className="p-4 flex w-full">
+        <div className="grow space-y-1">
+          <div className="flex items-end text-sm gap-1">
+            <span className="text-3xl font-semibold text-foreground text-rtext-secondary-700">
+              {price}
+            </span>
+            <span className="h-fit">{per}</span>
+          </div>
+          <div>{description}</div>
+        </div>
+        <span>
+          {badgeContent && (
+            <Badge
+              size="md"
+              type="badgeColor"
+              dir="rtl"
+              color="success"
+              className="!bg-white !border-rborder-primary !text-rtext-secondary-700"
+              icon={
+                <span className="w-1.5 h-1.5 rounded-full bg-rfg-success-primary"></span>
+              }
+            >
+              {badgeContent}
+            </Badge>
+          )}
+        </span>
+      </div>
+    </>
+  );
+}

package/src/components/ui/file-content/File-content.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils";
+
+export const FileContent = ({
+  icon,
+  title,
+  size,
+  sizeFormat,
+  className,
+  dir = "rtl",
+}: {
+  icon: React.ReactNode;
+  title: string;
+  size?: string;
+  className?: string;
+  dir?: "rtl" | "ltr";
+  sizeFormat?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "w-full flex gap-3 py-2.5 px-3.5 border border-rborder-secondary bg-rbg-primary rounded-md",
+        className,
+        dir == "ltr" && "flex-row-reverse "
+      )}
+    >
+      <div className="w-10 h-10">{icon ?? null}</div>
+      <div className="flex flex-col max-w-4/5 ">
+        <span className="text-rtext-secondary-700 font-medium text-sm w-full truncate ">
+          {title}
+        </span>
+        <span
+          className={cn(
+            "text-rtext-tertiary-600 flex gap-0.5 items-center text-sm font-normal truncate",
+            dir == "ltr" && "flex-row-reverse"
+          )}
+        >
+          {size}
+          {sizeFormat}
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/components/ui/file-uploader-components/file-uploader-box.tsx

@@ -0,0 +1,76 @@
+import { Button } from "@/components/Button";
+import { FileUploaderBoxProps } from "@/components/FileUpload/_.types";
+import { cn } from "@/lib/utils";
+import { UploadCloud } from "lucide-react";
+
+export const FileUploaderBox = ({
+  icon,
+  mainText,
+  subText,
+  formatText,
+  acceptableFormats,
+  disable,
+  multiItem,
+  onChange,
+}: FileUploaderBoxProps) => {
+  return (
+    <div
+      className={cn(
+        "relative w-full py-4 px-6 flex justify-center items-center gap-1 rounded-xl border border-rborder-secondary bg-rbg-primary ",
+        disable && "bg-rbg-disabled-subtle",
+        !disable &&
+          "hover:border-rborder-brand focus:border-rborder-brand focus-within:border-rborder-brand"
+      )}
+    >
+      <div className="text-center flex flex-col justify-center items-center gap-2">
+        {icon ?? (
+          <Button
+            variant={"secondaryGray"}
+            aria-hidden="true"
+            disabled={disable}
+          >
+            <UploadCloud data-testid="default-uploadcloud" />
+          </Button>
+        )}
+        <div className="flex flex-col justify-center items-center gap-1">
+          <div className="flex items-center gap-1">
+            <label
+              htmlFor="file-upload"
+              className={cn(
+                " cursor-pointer rounded-md text-rbutton-tertiary-color-fg font-normal text-sm",
+                disable && "text-rbg-disabled-subtle"
+              )}
+            >
+              <span className={cn(disable && "text-rfg-disabled")}>
+                {mainText}
+              </span>
+              <input
+                id="file-upload"
+                name="file-upload"
+                data-testid="file-input"
+                type="file"
+                className="absolute overflow-hidden top-0 left-0 w-full h-full opacity-0 cursor-pointer"
+                disabled={disable}
+                multiple={multiItem}
+                accept={
+                  acceptableFormats
+                    ? Array.isArray(acceptableFormats)
+                      ? acceptableFormats
+                          .map((f) => (f.startsWith(".") ? f : `.${f}`))
+                          .join(", ")
+                      : acceptableFormats
+                    : undefined
+                }
+                onChange={onChange}
+              />
+            </label>
+            <p className="text-rtext-tertiary-600 text-sm">{subText}</p>
+          </div>
+          <p className="text-xs text-rtext-tertiary-600 font-normal">
+            {formatText}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/ui/file-uploader-components/file-uploader-item.tsx

@@ -0,0 +1,64 @@
+import { Button } from "@/components/Button";
+import { FileUploaderItemProps } from "@/components/FileUpload/_.types";
+import { Progress } from "@/components/Progress";
+import { UnkownFormat } from "@/icons/general/unkown-format";
+import { cn } from "@/lib/utils";
+import { Trash2 } from "lucide-react";
+
+export const FileUploaderItem = ({
+  item,
+  loadType,
+  onDelete,
+}: FileUploaderItemProps) => {
+  return (
+    <div
+      className={cn(
+        "p-4 flex gap-3 w-full rounded-xl border border-rborder-secondary bg-rbg-primary",
+        item?.status == "failed" && "border-rborder-error"
+      )}
+    >
+      <div className=" flex justify-start items-start w-10 h-10">
+        {item?.icon ?? (
+          <UnkownFormat width={20} height={20} data-testid="fallback-icon" />
+        )}
+      </div>
+      <div className="flex flex-col gap-1 w-full">
+        <div className="flex justify-between">
+          <div className="flex flex-col w-1/2">
+            <span className="font-medium text-rtext-secondary-700 overflow-hidden text-ellipsis text-sm">
+              {item?.title}
+            </span>
+            <span className="text-rtext-tertiary-600 font-normal text-sm overflow-hidden text-ellipsis">
+              {item?.size}
+            </span>
+          </div>
+          <Button
+            className={cn(
+              "self-centertext-rbutton-tertiary-fg",
+              item?.status == "failed" && "text-rbutton-secondary-error-fg"
+            )}
+            onClick={() => {
+              onDelete(item?.id);
+            }}
+            variant={"linkGray"}
+          >
+            <Trash2 width={20} height={20} />
+          </Button>
+        </div>
+        {loadType == "progressBar" && (
+          <Progress
+            type="line"
+            value={item?.progressValue}
+            label={item?.percentage}
+            size="lg"
+            indicatorVariant="bg-rfg-brand-primary-600"
+            backgroundVariant="bg-rbg-quaternary"
+            dir="rtl"
+            className="h-2"
+            labelClassName="text-end"
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/ui/icon-wrapper/_.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, expect, it } from "vitest";
+
+import IconWrapper from ".";
+// adjust the import based on your file structure
+
+describe("IconWrapper", () => {
+  it("renders children correctly", () => {
+    render(
+      <IconWrapper>
+        <span>Test Icon</span>
+      </IconWrapper>
+    );
+
+    expect(screen.getByText("Test Icon")).toBeInTheDocument();
+  });
+
+  it("applies passed className", () => {
+    render(
+      <IconWrapper className="custom-class">
+        <span>Styled Icon</span>
+      </IconWrapper>
+    );
+
+    const wrapper = screen.getByText("Styled Icon").parentElement;
+    expect(wrapper).toHaveClass("custom-class");
+  });
+
+  it("merges className with default styles", () => {
+    render(
+      <IconWrapper className="custom-class">
+        <span>Check Class Merge</span>
+      </IconWrapper>
+    );
+
+    const wrapper = screen.getByText("Check Class Merge").parentElement;
+    expect(wrapper).toHaveClass("flex items-center justify-center");
+    expect(wrapper).toHaveClass("custom-class");
+    expect(wrapper).toHaveClass(
+      "border",
+      "rounded-md",
+      "shadow-rshadow-sm-01",
+      "p-2.5",
+      "w-fit",
+      "h-fit"
+    );
+  });
+
+  it("forwards props to div element", () => {
+    render(
+      <IconWrapper data-testid="icon-wrapper" aria-label="icon-label">
+        <span>Forward Props</span>
+      </IconWrapper>
+    );
+
+    const wrapper = screen.getByTestId("icon-wrapper");
+    expect(wrapper).toHaveAttribute("aria-label", "icon-label");
+  });
+});

package/src/components/ui/icon-wrapper/index.tsx

@@ -0,0 +1,19 @@
+function IconWrapper({
+  children,
+  className,
+  ...props
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`${className} flex items-center justify-center border border-disabled-subtle-br rounded-md shadow-rshadow-sm-01 p-2.5 w-fit h-fit`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default IconWrapper;

package/src/components/ui/input-component/input-label.tsx

@@ -0,0 +1,11 @@
+import { inputLabelProps } from "@/components/Input/_.types";
+import { twMerge } from "tailwind-merge";
+
+export const InputLabel = ({ id, label, required, labelClass, labelStarClass }: inputLabelProps) => {
+    return (
+        <label htmlFor={id} className={twMerge("text-sm font-medium text-rtext-secondary-700", labelClass)}>
+            {label}
+            {required && <span className={twMerge("dv-required-label text-rtext-brand-tertiary-600 mx-1", labelStarClass)}>*</span>}
+        </label>
+    );
+};

package/src/components/ui/number.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+import { TagProps } from "../Tag/_.types";
+import { numberVariants } from "../Tag/_.style";
+
+function Number({ number, size }: Readonly<TagProps>) {
+  return (
+    <div
+      className={cn(
+        numberVariants({ size }),
+        "bg-gray-light-100 rounded-[3px]"
+      )}
+    >
+      {number}
+    </div>
+  );
+}
+
+export default Number;

package/src/components/ui/pagination/card-minimal-center-align.tsx

@@ -0,0 +1,96 @@
+import ArrowLeft from "@/icons/general/arrow-left";
+import ArrowRight from "@/icons/general/arrow-right";
+import { cn } from "@/lib/utils";
+import { PaginationProps } from "../../Pagination/type";
+import { PaginationContent } from "./pagination-content";
+import { PaginationItem } from "./pagination-item";
+import { PaginationLink } from "./pagination-link";
+
+const PaginationCardMinimalCenter = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  dir = "rtl",
+  labels,
+  previousClassName,
+  nextClassName,
+  className,
+  prevIcon,
+  nextIcon,
+  ...props
+}: PaginationProps) => {
+  const isRtl = dir === "rtl";
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn("", className)}
+      {...props}
+    >
+      <PaginationContent className="flex justify-between items-center">
+        <div className="flex">
+          <PaginationItem className="md:block hidden">
+            <PaginationLink
+              size="default"
+              aria-label="Go to first page"
+              disabled={currentPage === 1}
+              onClick={() => onPageChange?.(1)}
+            >
+              {labels?.first}
+            </PaginationLink>
+          </PaginationItem>
+
+          <PaginationItem>
+            <PaginationLink
+              aria-label="Go to previous page"
+              size="default"
+              className={cn("gap-1", previousClassName)}
+              onClick={() => onPageChange?.(currentPage - 1)}
+              disabled={currentPage === 1}
+            >
+              <div className="md:block hidden">{labels?.prev || "قبلی"}</div>
+              <div className="md:hidden block">
+                {isRtl ? prevIcon || <ArrowRight /> : nextIcon || <ArrowLeft />}
+              </div>
+            </PaginationLink>
+          </PaginationItem>
+        </div>
+
+        <span className="text-sm font-medium">
+          {labels?.page} {currentPage} {labels?.of} {totalPages}
+        </span>
+
+        <div className="flex">
+          <PaginationItem>
+            <PaginationLink
+              aria-label="Go to next page"
+              size="default"
+              className={cn("gap-1", nextClassName)}
+              onClick={() => onPageChange?.(currentPage + 1)}
+              disabled={currentPage === totalPages}
+            >
+              <span className="md:block hidden">{labels?.next || "بعدی"}</span>
+              <div className="md:hidden block">
+                {isRtl ? prevIcon || <ArrowLeft /> : nextIcon || <ArrowRight />}
+              </div>
+            </PaginationLink>
+          </PaginationItem>
+
+          <PaginationItem className="md:block hidden">
+            <PaginationLink
+              size="default"
+              aria-label="Go to last page"
+              disabled={currentPage === totalPages}
+              onClick={() => onPageChange?.(totalPages)}
+            >
+              {labels?.last}
+            </PaginationLink>
+          </PaginationItem>
+        </div>
+      </PaginationContent>
+    </nav>
+  );
+};
+
+export default PaginationCardMinimalCenter;