dst-rg 1.0.0

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

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Avatar } from ".";
+import { VerifiedIcon } from "lucide-react";
+
+const meta: Meta<typeof Avatar> = {
+  title: "Components/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "radio",
+      options: ["single", "group", "labled"],
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl", "2xl"],
+    },
+    showAmount: {
+      control: "number",
+      min: 1,
+      max: 10,
+      step: 1,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+const sampleImage = {
+  src: "https://randomuser.me/api/portraits/women/44.jpg",
+  alt: "Jane Doe",
+  label: "Jane",
+};
+
+const sampleImageList = [
+  {
+    src: "https://randomuser.me/api/portraits/men/1.jpg",
+    alt: "User 1",
+  },
+  {
+    src: "https://randomuser.me/api/portraits/women/2.jpg",
+    alt: "User 2",
+  },
+  {
+    src: "https://randomuser.me/api/portraits/men/3.jpg",
+    alt: "User 3",
+  },
+  {
+    src: "https://randomuser.me/api/portraits/women/4.jpg",
+    alt: "User 4",
+  },
+  {
+    src: "https://randomuser.me/api/portraits/men/5.jpg",
+    alt: "User 5",
+  },
+  {
+    src: "https://randomuser.me/api/portraits/women/6.jpg",
+    alt: "User 6",
+  },
+];
+
+export const SingleWithDot: Story = {
+  args: {
+    type: "single",
+    img: sampleImage,
+    size: "md",
+    notifyColor: "bg-red-500",
+  },
+};
+export const SingleWithIcon: Story = {
+  args: {
+    type: "single",
+    img: sampleImage,
+    size: "lg",
+    notifyIcon: <VerifiedIcon />,
+    iconBorder:false
+  },
+};
+
+export const Group: Story = {
+  args: {
+    type: "group",
+    imgList: sampleImageList,
+    showAmount: 3,
+    showAddBtn: true,
+    tooltip: {
+      content: "Add user",
+      description: "Click to add a new team member.",
+      dir: "ltr",
+      position: "top",
+    },
+    size: "md",
+    addBtnAction: () => alert("Add button clicked"),
+  },
+};
+
+export const GroupWithMoreAvatars: Story = {
+  args: {
+    type: "group",
+    imgList: sampleImageList,
+    showAmount: 3,
+    showAddBtn: true,
+    tooltip: {
+      content: "Add user",
+      description: "Click to add a new team member.",
+      dir: "ltr",
+      position: "top",
+    },
+    size: "md",
+    addBtnAction: () => alert("Add button clicked"),
+  },
+};
+
+export const Labled: Story = {
+  args: {
+    type: "labled",
+    img: sampleImage,
+    title: "Jane Doe",
+    description: "UX Designer",
+    size: "md",
+    // notifyIcon: <div className=" rounded-full bg-red-500" />,
+    notifyColor: "bg-red-500",
+  },
+};
+
+export const LabledWithTooltip: Story = {
+  args: {
+    type: "labled",
+    img: sampleImage,
+    title: "Jane Doe",
+    description: "UX Designer",
+    size: "md",
+
+
+    notifyColor: "bg-red-500",
+    tooltip: {
+      content: "More information",
+      description: "This user is an experienced UX designer.",
+      dir: "ltr",
+      position: "right",
+    },
+  },
+};
+
+export const GroupWithLessAvatarsAndShowAddBtn: Story = {
+  args: {
+    type: "group",
+    imgList: sampleImageList,
+    showAmount: 2,
+    showAddBtn: true,
+    tooltip: {
+      content: "Add user",
+      description: "Click to add a new team member.",
+      dir: "ltr",
+      position: "top",
+    },
+    size: "md",
+    addBtnAction: () => alert("Add button clicked"),
+  },
+};
+
+export const GroupWithNotifications: Story = {
+  args: {
+    type: "group",
+    imgList: sampleImageList,
+    showAmount: 3,
+    showAddBtn: true,
+    tooltip: {
+      content: "Add user",
+      description: "Click to add a new team member.",
+      dir: "ltr",
+      position: "top",
+    },
+    size: "md",
+    addBtnAction: () => alert("Add button clicked"),
+  },
+};

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

@@ -0,0 +1,40 @@
+export const sizeStyles = {
+  xs: "w-6 h-6",
+  sm: "w-8 h-8 ",
+  md: "w-10 h-10 ",
+  lg: "w-12 h-12 ",
+  xl: "w-14 h-14 ",
+  "2xl": "w-16 h-16 ",
+};
+export const dotSizeStyle = {
+  xs: "w-1.5 h-1.5",
+  sm: "w-2 h-2 ",
+  md: "w-2.5 h-2.5 ",
+  lg: "w-3 h-3 ",
+  xl: "w-3.5 h-3.5 ",
+  "2xl": "w-4 h-4 ",
+};
+export const iconSizeStyle = {
+  xs: "w-2.5 h-2.5",
+  sm: "w-3 h-3",
+  md: "w-3.5 h-3.5",
+  lg: "w-4 h-4",
+  xl: "w-4.5 h-4.5 ",
+  "2xl": "w-5 h-5 ",
+};
+export const wrapperSizeStyle = {
+  xs: "gap-2",
+  sm: "gap-2.5",
+  md: "gap-3",
+  lg: "gap-3.5",
+  xl: "gap-4",
+  "2xl": "gap-4.5",
+};
+export const textSizeStyle = {
+  xs: "text-sm",
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-md",
+  xl: "text-lg",
+  "2xl": "text-lg",
+};

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

@@ -0,0 +1,150 @@
+// Avatar.test.tsx
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { Avatar } from ".";
+const MockNotifyIcon = () => <svg data-testid="notify-icon" />;
+// Sample data for testing
+const sampleImage = {
+  src: "https://randomuser.me/api/portraits/women/44.jpg",
+  alt: "Jane Doe",
+  label: "Jane",
+};
+
+const sampleImageList = [
+  { src: "https://randomuser.me/api/portraits/men/1.jpg", alt: "User 1" },
+  { src: "https://randomuser.me/api/portraits/women/2.jpg", alt: "User 2" },
+  { src: "https://randomuser.me/api/portraits/men/3.jpg", alt: "User 3" },
+];
+
+describe("Avatar Component", () => {
+  it("renders single avatar when type is single", () => {
+    render(
+      <Avatar
+        type="single"
+        img={sampleImage}
+        size="md"
+        addBtnAction={() => {}}
+      />
+    );
+    // Check if image with alt text is rendered
+    const imgEl = screen.getByAltText(/Jane Doe/i);
+    expect(imgEl).toBeInTheDocument();
+  });
+
+  it("renders avatar group when type is group", () => {
+    render(
+      <Avatar
+        type="group"
+        imgList={sampleImageList}
+        size="sm"
+        showAmount={2}
+        showAddBtn={false}
+        addBtnAction={() => {}}
+      />
+    );
+    // Check if two avatars appear and then a + indicator for extra avatars if applicable.
+    const avatarImages = screen.getAllByRole("img");
+    // Since we limit to 2 avatars using showAmount
+    expect(avatarImages).toHaveLength(2);
+    // Optionally, test the extra count element if one exists (if sampleImageList.length > 2)
+  });
+
+  it("renders labled avatar with description when type is labled", () => {
+    render(
+      <Avatar
+        type="labled"
+        img={sampleImage}
+        size="md"
+        title="Jane Doe"
+        description="UX Designer"
+        addBtnAction={() => {}}
+      />
+    );
+    // Check if title and description text appear
+    expect(screen.getByText(/Jane Doe/i)).toBeInTheDocument();
+    expect(screen.getByText(/UX Designer/i)).toBeInTheDocument();
+  });
+
+  it("calls addBtnAction when add button is clicked in group type", () => {
+    const addBtnAction = vi.fn();
+    render(
+      <Avatar
+        type="group"
+        imgList={sampleImageList}
+        size="sm"
+        showAmount={2}
+        showAddBtn={true}
+        tooltip={{
+          content: "Add user",
+          description: "Click to add a new team member.",
+          dir: "ltr",
+        }}
+        addBtnAction={addBtnAction}
+      />
+    );
+    // Find the add button (assuming the button is rendered with the Plus icon or text)
+    const addBtn = screen.getByRole("button");
+    fireEvent.click(addBtn);
+    expect(addBtnAction).toHaveBeenCalled();
+  });
+  it("renders notification dot when notifyColor is provided", () => {
+    const { container } = render(
+      <Avatar
+        type="single"
+        img={sampleImage}
+        notifyColor="bg-green-500"
+        size="md"
+      />
+    );
+
+    const dot = container.querySelector("span.bg-green-500");
+    expect(dot).toBeInTheDocument();
+    expect(dot?.className).toContain("ring-2");
+  });
+  it("renders notification icon when notifyIcon is provided", () => {
+    render(
+      <Avatar
+        type="single"
+        img={sampleImage}
+        notifyIcon={<MockNotifyIcon />}
+        size="md"
+      />
+    );
+
+    const icon = screen.getByTestId("notify-icon");
+    expect(icon).toBeInTheDocument();
+    expect(icon.parentElement?.className).toContain("absolute");
+    expect(icon.parentElement?.className).toContain("rounded-full");
+  });
+  it("adds ring to notify icon when iconBorder is true", () => {
+    render(
+      <Avatar
+        type="single"
+        img={sampleImage}
+        notifyIcon={<MockNotifyIcon />}
+        iconBorder={true}
+        size="md"
+      />
+    );
+
+    const icon = screen.getByTestId("notify-icon");
+    expect(icon.parentElement?.className).toContain("ring-2");
+    expect(icon.parentElement?.className).toContain("ring-white");
+  });
+  it("does not add ring when iconBorder is false", () => {
+    const NotifyIcon = () => <svg data-testid="notify-icon" />;
+
+    render(
+      <Avatar
+        type="single"
+        img={sampleImage}
+        size="md"
+        notifyIcon={<NotifyIcon />}
+        iconBorder={false}
+      />
+    );
+
+    const wrapper = screen.getByTestId("notify-icon").parentElement!;
+    expect(wrapper.className).not.toContain("ring-2");
+  });
+});

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

@@ -0,0 +1,66 @@
+import { Position } from "../Tooltip/_.types";
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type AvatarType = "single" | "group" | "labled";
+type TooltipDirection = "rtl" | "ltr";
+
+export interface AvatarProps {
+  type?: AvatarType;
+  size?: AvatarSize;
+  imgList?: Image[];
+  img?: Image;
+  showAmount?: number;
+  showAddBtn?: boolean;
+  addBtnAction?: () => void;
+  notifyIcon?: React.ReactNode;
+  notifyColor?: string;
+  title?: string;
+  description?: string;
+  iconBorder?: boolean;
+  tooltip?: {
+    content: string;
+    description?: string;
+    className?: string;
+    contentClassName?: string;
+    descriptionClassName?: string;
+    sideOffset?: number;
+    position?: Position;
+    dir?: TooltipDirection;
+  };
+}export interface Image {
+  src?: string;
+  icon?: React.ReactNode;
+  label?: string;
+  backUpSrc?: string;
+  description?: string;
+  alt?: string;
+}
+export interface AvatarGroupProps {
+  imgList: Image[];
+  showAmount: number;
+  size: AvatarSize;
+  showAddBtn: boolean;
+  tooltip?: {
+    content: string;
+    description?: string;
+    className?: string;
+    contentClassName?: string;
+    descriptionClassName?: string;
+    sideOffset?: number;
+    position?: Position;
+    dir?: TooltipDirection;
+  };
+  addBtnAction: () => void;
+}export interface SingleAvatarProps {
+  img: Image;
+  size: AvatarSize;
+  notifyIcon?: React.ReactNode;
+  notifyColor?: string;
+  iconBorder: boolean;
+}
+
+export interface AvatarDescription {
+  title: string;
+  description: string;
+  size: AvatarSize;
+}

package/src/components/Avatar/index.tsx

@@ -0,0 +1,63 @@
+import { cn } from "@/lib/utils";
+import { AvatarDescription } from "../ui/avatars-component/avatar-description";
+import { AvatarGroup } from "../ui/avatars-component/avatar-groups";
+import { AvatarSingle } from "../ui/avatars-component/avatar-single";
+import { wrapperSizeStyle } from "./_.style";
+import { AvatarProps } from "./_.types";
+
+export const Avatar = ({
+  type,
+  size = "md",
+  imgList = [],
+  img = {},
+  showAmount = 1,
+  showAddBtn = false,
+  notifyColor = "",
+  notifyIcon = "",
+  title = "",
+  description = "",
+  iconBorder = true,
+  tooltip,
+  addBtnAction = () => {},
+}: AvatarProps) => {
+  return (
+    <>
+      {type == "single" && (
+        <AvatarSingle
+          img={img}
+          size={size}
+          notifyColor={notifyColor}
+          notifyIcon={notifyIcon}
+          iconBorder={iconBorder}
+        />
+      )}
+      {type == "group" && (
+        <AvatarGroup
+          imgList={imgList}
+          size={size}
+          showAmount={showAmount}
+          showAddBtn={showAddBtn}
+          tooltip={tooltip}
+          addBtnAction={addBtnAction}
+        />
+      )}
+
+      {type == "labled" && (
+        <div className={cn(`inline-flex items-center`, wrapperSizeStyle[size])}>
+          <AvatarSingle
+            img={img}
+            size={size}
+            notifyColor={notifyColor}
+            notifyIcon={notifyIcon}
+            iconBorder={iconBorder}
+          />
+          <AvatarDescription
+            size={size}
+            title={title}
+            description={description}
+          />
+        </div>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,75 @@
+import Plus from "@/icons/general/plus";
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { Badge } from ".";
+import { BadgeProps } from "./_.types";
+
+export default {
+  title: "Components/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "radio" }, // Enables a dropdown in Storybook UI
+      options: ["pillColor", "pillOutline", "badgeColor", "badgeModern"],
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    color: {
+      control: { type: "select" },
+      options: ["gray", "brand", "error", "success", "grayBlue", "blueLight", "blue", "indigo", "purple", "pink", "orange"],
+    },
+    dir: {
+      control: { type: "radio" },
+      options: ["ltr", "rtl"],
+    },
+    closable: {
+      control: { type: "boolean" },
+    },
+    onClose: {
+      control: { action: "close" },
+    }
+  },
+  args: {
+    size: "sm",
+    type: "pillColor",
+    dir: "rtl",
+    color: "blue",
+    children: "Badge Label",
+  },
+} as Meta<typeof Badge>;
+
+type Story = StoryObj<BadgeProps>;
+
+export const Default: Story = {};
+export const WithAvatar: Story = {
+  args: {
+    icon: <img src="https://i.pravatar.cc/40?img=3" className="w-5 h-5 rounded-full" alt="avatar" />,
+    children: "Badge Label",
+    size: "md",
+  },
+};
+export const WithClose = {
+  args: {
+    type: "badgeModern",
+    color: "blue",
+    children: "Badge Label",
+    closable: true,
+  },
+};
+
+export const WithIcon = {
+  args: {
+    icon: "only",
+    children: <Plus stroke="red" />,
+  },
+}
+
+export const WithDot = {
+  args: {
+    icon: <span className="w-2 h-2 rounded-full bg-current"/>,
+    children: "With Dot",
+  },
+}

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

@@ -0,0 +1,53 @@
+import { cva } from "class-variance-authority";
+
+const baseStyles =
+    "flex items-center font-medium";
+
+const colorStyle = {
+    gray: "bg-utility-gray-50 text-utility-gray-700 border-utility-gray-200 has-[>svg]:stroke-utility-gray-light-400",
+    brand: "bg-utility-brand-50 text-utility-brand-700 border-utility-brand-200 has-[>svg]:stroke-utility-brand-400",
+    error: "bg-utility-error-50 text-utility-error-700 border-utility-error-200 has-[>svg]:stroke-utility-error-400",
+    success: "bg-utility-success-50 text-utility-success-700 border-utility-success-200 has-[>svg]:stroke-utility-success-400",
+    grayBlue: "bg-utility-gray-blue-50 text-utility-gray-blue-700 border-utility-gray-blue-200 has-[>svg]:stroke-utility-gray-blue-400",
+    blueLight: "bg-utility-blue-light-50 text-utility-blue-light-700 border-utility-blue-light-200 has-[>svg]:stroke-utility-blue-light-400",
+    blue: "bg-utility-blue-50 text-utility-blue-700 border-utility-blue-200 has-[>svg]:stroke-utility-blue-400",
+    indigo: "bg-utility-indigo-50 text-utility-indigo-700 border-utility-indigo-200 has-[>svg]:stroke-utility-indigo-400",
+    purple: "bg-utility-purple-50 text-utility-purple-700 border-utility-purple-200 has-[>svg]:stroke-utility-purple-400",
+    pink: "bg-utility-pink-50 text-utility-pink-700 border-utility-pink-200 has-[>svg]:stroke-utility-pink-400",
+    orange: "bg-utility-orange-50 text-utility-orange-700 border-utility-orange-200 has-[>svg]:stroke-utility-orange-400 fill-red-500",
+}
+
+const sizeStyle = {
+    sm: "px-2 py-0.5 gap-1 has-[>svg]:text-sm text-xs",
+    md: "px-2.5 py-0.5 gap-1.5 has-[>svg]:text-md text-sm",
+    lg: "px-3 py-1 gap-2 has-[>svg]:text-lg text-sm",
+}
+
+const typeStyle = {
+    pillColor: "rounded-full border",
+    pillOutline: "rounded-full border-[1.5px]",
+    badgeColor: "rounded-sm border",
+    badgeModern: "rounded-md shadow-sm border has-[>svg]:stroke-current",
+}
+
+export const badgeVariants = cva(
+    baseStyles,
+    {
+        variants: {
+            size: sizeStyle,
+            type: typeStyle,
+            dir: {
+                ltr: "flex-row",
+                rtl: "flex-row-reverse",
+            },
+            color: colorStyle,
+        },
+        defaultVariants: {
+            size: "sm",
+            type: "pillColor",
+            dir: "ltr",
+            color: "blue",
+        }
+    }
+)
+

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

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Badge } from ".";
+
+describe("Button Component", () => {
+  it("renders button with label", () => {
+    render(<Badge>Click Me</Badge>);
+    expect(screen.getByText("Click Me")).toBeDefined();
+  });
+  it("renders button with avatar", () => {
+    const Avatar = "https://i.pravatar.cc/40?img=3";
+    render(<Badge icon={<img src={Avatar} alt="avatar" className="rounded-full w-5 h-5" />} >Username</Badge>);
+    const img = screen.getByAltText("avatar") as HTMLImageElement;
+    expect(img).toBeInTheDocument();
+    expect(img.src).toContain(Avatar);
+  });
+  it("render badge modern type class", () => {
+    render(<Badge type="badgeModern">Click Me</Badge>);
+    const badge = screen.getByText("Click Me");
+    expect(badge).toHaveClass("bg-transparent border-primary text-secondary");
+  });
+  it("render closable icon", () => {
+    render(<Badge closable>Click Me</Badge>);
+    const closeIcon = screen.getByRole("button");
+    expect(closeIcon).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,11 @@
+export type BadgeProps = {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  type?: "pillColor" | "pillOutline" | "badgeColor" | "badgeModern";
+  color?: "gray" | "brand" | "error" | "success" | "grayBlue" | "blueLight" | "blue" | "indigo" | "purple" | "pink" | "orange";
+  dir?: "ltr" | "rtl";
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  closable?: boolean;
+  onClose?: () => void;
+}