dst-rg 1.0.0

package/src/components/ui/accordion.tsx

@@ -0,0 +1,162 @@
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import React, { useState } from "react";
+import { AccordionProps } from "../Accordion/type";
+
+function Accordion({
+  type = "single",
+  collapsible = false,
+  className,
+  children,
+  ...props
+}: Readonly<AccordionProps>) {
+  const [openValue, setOpenValue] = useState<string | string[]>(
+    type === "multiple" ? [] : ""
+  );
+
+  if (type === "multiple") {
+    return (
+      <AccordionPrimitive.Root
+        type="multiple"
+        className={className}
+        value={openValue as string[]}
+        onValueChange={(val: string[] | string) => setOpenValue(val)}
+        data-slot="accordion"
+        {...props}
+      >
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<{ openValue?: string | string[] }>, {
+                openValue,
+              })
+            : child
+        )}
+      </AccordionPrimitive.Root>
+    );
+  }
+
+  return (
+    <AccordionPrimitive.Root
+      type="single"
+      collapsible={collapsible}
+      className={className}
+      value={openValue as string}
+      onValueChange={(val: string | string[]) => setOpenValue(val)}
+      data-slot="accordion"
+      {...props}
+    >
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as React.ReactElement<{ openValue?: string | string[] }>, {
+              ...(child.props ?? {}),
+              openValue,
+            })
+          : child
+      )}
+    </AccordionPrimitive.Root>
+  );
+}
+
+
+type AccordionItemProps = {
+  className?: string;
+  children?: React.ReactNode;
+  value: string;
+  openValue?: string | string[];
+};
+
+function AccordionItem({
+  className,
+  openValue,
+  value,
+  children,
+  ...props
+}: Readonly<AccordionItemProps>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      value={value}
+      {...props}
+    >
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as React.ReactElement<{ itemValue?: string; openValue?: string | string[] }>, {
+              itemValue: value,
+              openValue,
+            })
+          : child
+      )}
+    </AccordionPrimitive.Item>
+  );
+}
+
+interface AccordionTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+  iconOpen?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  iconClosed?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  itemValue?: string;
+  openValue?: string | string[];
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  iconOpen: IconOpen = ChevronUpIcon,
+  iconClosed: IconClosed = ChevronDownIcon,
+  itemValue,
+  openValue,
+  ...props
+}: Readonly<AccordionTriggerProps>) {
+  const isOpen =
+    Array.isArray(openValue) && itemValue
+      ? openValue.includes(itemValue)
+      : openValue === itemValue;
+
+  return (
+    <AccordionPrimitive.Header className="flex w-full">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+          className,
+          isOpen ? "rounded-t-md" : "rounded-md"
+        )}
+        {...props}
+      >
+        {children}
+        {isOpen ? (
+          <IconOpen className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+        ) : (
+          <IconClosed className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+        )}
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+interface AccordionContentProps
+  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: Readonly<AccordionContentProps>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/avatars-component/avatar-description.tsx

@@ -0,0 +1,30 @@
+import { textSizeStyle } from "@/components/Avatar/_.style";
+import { AvatarDescription as AvatarDescriptionType } from "@/components/Avatar/_.types";
+import { cn } from "@/lib/utils";
+
+export const AvatarDescription = ({
+  title,
+  description,
+  size,
+}: AvatarDescriptionType) => {
+  return (
+    <div className="flex flex-col">
+      <span
+        className={cn(
+          `text-rtext-secondary-700 font-semibold`,
+          textSizeStyle[size]
+        )}
+      >
+        {title}
+      </span>
+      <span
+        className={cn(
+          `font-normal text-rtext-tertiary-600`,
+          textSizeStyle[size]
+        )}
+      >
+        {description}
+      </span>
+    </div>
+  );
+};

package/src/components/ui/avatars-component/avatar-groups.tsx

@@ -0,0 +1,68 @@
+import { sizeStyles } from "@/components/Avatar/_.style";
+import { AvatarGroupProps } from "@/components/Avatar/_.types";
+import { TooltipWrapper } from "@/components/Tooltip";
+import Plus from "@/icons/general/plus";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  imgList,
+  size,
+  showAmount = 5,
+  showAddBtn = false,
+  tooltip,
+  addBtnAction,
+}) => {
+  const visibleAvatars = imgList.slice(0, showAmount);
+  const extraCount = imgList.length - showAmount;
+  return (
+    <div className="flex -space-x-1 w-full">
+      {visibleAvatars.map((img, index) => (
+        <img
+          key={index}
+          alt=""
+          className={cn(
+            "inline-block rounded-full ring-2 ring-white",
+            sizeStyles[size]
+          )}
+          style={{ zIndex: index }}
+          {...img}
+        />
+      ))}
+      {extraCount > 0 && (
+        <div
+          className={cn(
+            "inline-flex items-center justify-center rounded-full bg-gray-100 border-2 border-white font-medium text-gray-700 shadow-2xs align-middle hover:bg-gray-200 focus:outline-hidden focus:bg-gray-300 text-sm dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600 dark:focus:bg-neutral-600 dark:border-neutral-800",
+            sizeStyles[size]
+          )}
+          style={{ zIndex: showAmount }}
+        >
+          <span className="font-medium text-xs">+{extraCount}</span>
+        </div>
+      )}
+      {showAddBtn && tooltip ? (
+        <TooltipWrapper {...tooltip}>
+          <button
+            className={cn(
+              `mx-2 p-1 flex justify-center items-center cursor-pointer stroke-rfg-quinary-400 rounded-full bg-rbg-primary border border-dashed border-rborder-primary hover:bg-rbg-primary-hover disabled:bg-rbg-disabled-subtle disabled:cur`,
+              sizeStyles[size]
+            )}
+            onClick={addBtnAction}
+          >
+            <Plus />
+          </button>
+        </TooltipWrapper>
+      ) : (
+        <button
+          className={cn(
+            `mx-2 p-1 flex justify-center items-center cursor-pointer stroke-rfg-quinary-400 rounded-full bg-rbg-primary border border-dashed border-rborder-primary hover:bg-rbg-primary-hover disabled:bg-rbg-disabled-subtle disabled:cur`,
+            sizeStyles[size]
+          )}
+          onClick={addBtnAction}
+        >
+          <Plus />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/ui/avatars-component/avatar-single.tsx

@@ -0,0 +1,50 @@
+import {
+  dotSizeStyle,
+  iconSizeStyle,
+  sizeStyles,
+} from "@/components/Avatar/_.style";
+import { SingleAvatarProps } from "@/components/Avatar/_.types";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+export const AvatarSingle: React.FC<SingleAvatarProps> = ({
+  img,
+  size,
+  notifyColor = "",
+  notifyIcon = "",
+  iconBorder,
+}) => {
+  return (
+    <div className={cn(`relative inline-block`, sizeStyles[size])}>
+      <img
+        alt=""
+        {...img}
+        className={cn(
+          `rounded-full object-cover  ring-2 ring-white`,
+          sizeStyles[size]
+        )}
+      />
+      {notifyColor && (
+        <span
+          className={cn(
+            `absolute bottom-0 right-1 block  rounded-full ${notifyColor} ring-2 ring-white`,
+            dotSizeStyle[size]
+          )}
+        />
+      )}
+      {notifyIcon && (
+        <span
+          className={cn(
+            `absolute bottom-0 right-1 block  rounded-full`,
+            iconSizeStyle[size],
+            `has-[>svg]:${iconSizeStyle[size]} ${
+              iconBorder && "ring-2 ring-white"
+            }`
+          )}
+        >
+          {notifyIcon}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/checkbox-group/plan-card/basic/_.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, expect, it, vi } from "vitest";
+import { PlanCardBasic } from ".";
+import { iconSizeStyle } from "@/components/CheckboxGroup/PlanCard/_.style";
+
+describe("PlanCardBasic", () => {
+  const baseProps = {
+    per: "month",
+    title: "Basic Plan",
+    description: "This is a test plan",
+    price: "$10",
+    id: "plan-1",
+    checkboxIndex: 0,
+    name: "plan",
+    value: "basic",
+    onChange: vi.fn(),
+  };
+
+  it("renders title, price, per, and description", () => {
+    render(<PlanCardBasic {...baseProps} />);
+
+    expect(screen.getByText("Basic Plan")).toBeInTheDocument();
+    expect(screen.getByText("$10/month")).toBeInTheDocument();
+    expect(screen.getByText("This is a test plan")).toBeInTheDocument();
+  });
+
+  it("renders IconWrapper and Layer with correct size", () => {
+    render(<PlanCardBasic {...baseProps} size="md" />);
+    const iconWrapper = screen.getByTestId("icon-wrapper");
+    expect(iconWrapper).toBeInTheDocument();
+    const svg = iconWrapper.querySelector("svg");
+    expect(svg).toHaveAttribute("width", iconSizeStyle["md"]);
+    expect(svg).toHaveAttribute("height", iconSizeStyle["md"]);
+  });
+
+  it("renders a radio input when type is 'radio'", () => {
+    render(<PlanCardBasic {...baseProps} type="radio" />);
+    const radio = screen.getByRole("radio");
+    expect(radio).toBeInTheDocument();
+    fireEvent.click(radio);
+    expect(baseProps.onChange).toHaveBeenCalled();
+  });
+
+  it("renders a checkbox input when type is not 'radio'", () => {
+    render(<PlanCardBasic {...baseProps} type="checkbox" />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeInTheDocument();
+    fireEvent.click(checkbox);
+    expect(baseProps.onChange).toHaveBeenCalled();
+  });
+
+  it("renders disabled radio input correctly", () => {
+    render(<PlanCardBasic {...baseProps} type="radio" disabled checked />);
+    const radio = screen.getByRole("radio") as HTMLInputElement;
+    expect(radio).toBeDisabled();
+    expect(radio.checked).toBe(true);
+  });
+
+  it("renders disabled checkbox input correctly", () => {
+    render(<PlanCardBasic {...baseProps} type="checkbox" disabled checked />);
+    const checkbox = screen.getByRole("checkbox") as HTMLInputElement;
+    expect(checkbox).toBeDisabled();
+    expect(checkbox.checked).toBe(true);
+  });
+});

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

@@ -0,0 +1,70 @@
+import { Checkbox } from "@/components/Checkbox";
+import { iconSizeStyle } from "@/components/CheckboxGroup/PlanCard/_.style";
+import { PlanCardProps } from "@/components/CheckboxGroup/PlanCard/_.types";
+import { Radio } from "@/components/Radio";
+import Layer from "@/icons/general/layer";
+import IconWrapper from "../../../icon-wrapper";
+
+export function PlanCardBasic({
+  per,
+  size = "sm",
+  title = "",
+  description,
+  price,
+  id,
+  checkboxIndex,
+  checked,
+  name = "",
+  value = "",
+  inputProps,
+  onChange,
+  type,
+  onCardClick,
+  disabled,
+}: Readonly<PlanCardProps>) {
+  return (
+    <>
+      <IconWrapper data-testid="icon-wrapper">
+        <Layer width={iconSizeStyle[size]} height={iconSizeStyle[size]} />
+      </IconWrapper>
+      <div onClick={onCardClick} className="flex flex-col grow justify-between">
+        <div className="flex">
+          <h3 className="font-medium text-foreground text-rtext-secondary-700">
+            {title}
+          </h3>
+          &nbsp;
+          <span>
+            {price}/{per}
+          </span>
+        </div>
+        <div className="text-muted-foreground">{description}</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
+            {...inputProps}
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            size={size}
+            value={value}
+            checkboxIndex={checkboxIndex}
+            checked={checked}
+          />
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,110 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect, vi } from "vitest";
+import { ReactNode } from "react";
+import { PlanCardWithHeader } from ".";
+
+// Mock the Header and Badge components to avoid actual component logic
+vi.mock("./header", () => ({
+  Header: ({
+    title,
+    price,
+    onChange,
+  }: {
+    title: string;
+    price: string;
+    onChange?: () => void; // required
+  }) => (
+    <div
+      data-testid="header"
+      onClick={onChange} // Mock the onClick event to trigger onChange
+    >
+      {title} - {price}
+    </div>
+  ),
+}));
+
+vi.mock("@/components/Badge", () => ({
+  Badge: ({ children }: { children: ReactNode }) => (
+    <div data-testid="badge">{children}</div>
+  ),
+}));
+
+describe("PlanCardWithHeader", () => {
+  it("calls onChange when input is checked or unchecked", () => {
+    const onChange = vi.fn();
+
+    // Render PlanCardWithHeader with a mock onChange handler
+    render(
+      <PlanCardWithHeader
+        title="Basic Plan"
+        price="$99"
+        per="month"
+        description="Plan description"
+        onChange={onChange}
+        checked={false}
+        size={"sm"}
+        checkboxIndex={1}
+        id={"name"}
+        value={"name2"}
+        name={"group"}
+      />
+    );
+
+    // Find the header element that triggers the change
+    const header = screen.getByTestId("header");
+
+    // Trigger the click event on the header
+    fireEvent.click(header);
+
+    // Assert that onChange was called when the header is clicked
+    expect(onChange).toHaveBeenCalled();
+  });
+  it("renders Badge with the correct content and styles when badgeContent is provided", () => {
+    const badgeContent = "New!";
+
+    render(
+      <PlanCardWithHeader
+        title="Basic Plan"
+        price="$99"
+        per="month"
+        description="Plan description"
+        badgeContent={badgeContent}
+        checked={false}
+        size="sm"
+        checkboxIndex={1}
+        id="name"
+        value="name2"
+        name="group"
+      />
+    );
+
+    // Check if Badge is rendered
+    const badge = screen.getByText("New!");
+    expect(badge).toBeInTheDocument();
+
+    // Check if Badge contains the correct content (badgeContent)
+    expect(badge).toHaveTextContent(badgeContent);
+  });
+
+  it("does not render Badge when badgeContent is not provided", () => {
+    render(
+      <PlanCardWithHeader
+        title="Basic Plan"
+        price="$99"
+        per="month"
+        description="Plan description"
+        checked={false}
+        size="sm"
+        checkboxIndex={1}
+        id="name"
+        value="name2"
+        name="group"
+      />
+    );
+
+    // Check if Badge is not rendered when no badgeContent is passed
+    const badge = screen.queryByTestId("badge");
+    expect(badge).toBeNull();
+  });
+});