dst-rg 1.0.0

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

@@ -0,0 +1,51 @@
+import { inputTagsProps } from "@/components/InputTags/_.types";
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { InputTags } from "./";
+
+export default {
+    title: "Components/InputTags",
+    component: InputTags,
+    tags: ["autodocs"],
+    argTypes: {
+        disabled: {
+            control: { type: "radio" },
+            options: [true, false]
+        },
+        helpIcon: {
+            control: { type: "radio" },
+            options: [true, false]
+        },
+        size: {
+            control: { type: "radio" },
+            options: ["sm", "md"],
+        },
+        destructive: {
+            control: { type: "radio" },
+            options: [true, false]
+        },
+    },
+    args: {
+        disabled: false,
+        size: "sm",
+        label: "Email",
+        inputType: "default",
+        required: true,
+        hintText: "This is a hint text to help user.",
+        placeholder: "Enter your email",
+        destructive: false,
+        destructiveText: "error text",
+        helpIcon: true,
+        tooltipProps: {
+            text: "This is a tooltip",
+            description: "Tooltips are used to describe or identify an element. In most scenarios",
+            position: "top",
+            dir: "ltr",
+            descriptionClassName: "max-w-[260px] w-full",
+        },
+    },
+} as Meta<typeof InputTags>;
+
+type Story = StoryObj<inputTagsProps>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,28 @@
+import {cva} from "class-variance-authority";
+
+const baseStyles =
+    "rounded-md px-2 shadow-xs bg-white border border-rborder-primary disabled:border-rborder-disabled flex flex-wrap " +
+    "focus:outline-2 focus:outline-rborder-brand disabled:bg-rbg-disabled-subtle relative min-h-[36px] h-fit w-full gap-2";
+
+const sizeStyle = {
+    sm: "h-9 py-2",
+    md: "h-10 pt-2 pb-2.5",
+};
+
+const destructiveStyles = "!border-2 !border-rborder-error focus:!outline-0"
+
+const disableStyles = "bg-rbg-disabled-subtle border-rborder-disabled"
+
+const inputTagsVariants = cva(
+    baseStyles,
+    {
+        variants: {
+            size: sizeStyle,
+        },
+        defaultVariants: {
+            size: "sm",
+        },
+    }
+)
+
+export {baseStyles, sizeStyle, destructiveStyles,disableStyles, inputTagsVariants};

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

@@ -0,0 +1,123 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { InputTags } from ".";
+import type { inputTagsProps } from "./_.types";
+
+const createInputTagsProps = (overrides: Partial<inputTagsProps> = {}): inputTagsProps => ({
+    label: "Email",
+    id: "email-input",
+    size: "sm",
+    destructive: false,
+    required: true,
+    hintText: "This is a hint text to help user.",
+    placeholder: "Enter your email",
+    helpIcon: true,
+    tooltipProps: {
+        text: "This is a tooltip",
+        description: "Tooltips are used to describe or identify an element. In most scenarios",
+        position: "top",
+        dir: "ltr",
+        descriptionClassName: "max-w-[260px] w-full",
+    },
+    ...overrides,
+});
+
+describe("InputTags Component", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+        vi.runOnlyPendingTimers();
+        vi.useRealTimers();
+        vi.resetAllMocks();
+    });
+
+    it("renders the input with label and placeholder", () => {
+        render(<InputTags {...createInputTagsProps()} />);
+        const input = screen.getByRole("textbox");
+        expect(input).toBeInTheDocument();
+        expect(screen.getByText("Email")).toBeInTheDocument();
+    });
+
+    it("renders as disabled when 'disabled' prop is true", () => {
+        render(<InputTags {...createInputTagsProps({ disabled: true })} />);
+        const input = screen.getByRole("textbox");
+        expect(input).toBeDisabled();
+    });
+
+    it("renders correctly with inputType 'tags'", () => {
+        render(<InputTags {...createInputTagsProps()} />);
+        const input = screen.getByRole("textbox");
+        expect(input).toBeInTheDocument();
+    });
+
+    it("adds a tag when input is not empty and Enter is pressed", () => {
+        render(<InputTags {...createInputTagsProps()} />);
+        const input = screen.getByRole("textbox") as HTMLInputElement;
+        fireEvent.change(input, { target: { value: "tag1" } });
+        fireEvent.keyDown(input, { key: "Enter" });
+        expect(screen.getByText("tag1")).toBeInTheDocument();
+    });
+
+    it("removes a tag when remove button is clicked", () => {
+        render(<InputTags {...createInputTagsProps()} />);
+        const input = screen.getByRole("textbox") as HTMLInputElement;
+
+        fireEvent.change(input, { target: { value: "tag1" } });
+        fireEvent.keyDown(input, { key: "Enter" });
+
+        // Use query by data-testid to target the specific remove button
+        const removeButton = screen.getByTestId("remove-tag-0"); // Update with correct index if necessary
+        fireEvent.click(removeButton);
+
+        // Check that the tag is no longer in the document
+        expect(screen.queryByText("tag1")).not.toBeInTheDocument();
+    });
+
+    it("renders destructive state with destructive text", () => {
+        render(<InputTags {...createInputTagsProps({ destructive: true, destructiveText: "Destructive action" })} />);
+        const destructiveText = screen.getByText("Destructive action");
+        expect(destructiveText).toBeInTheDocument();
+    });
+
+    it("does not render destructive text when destructive is false", () => {
+        render(<InputTags {...createInputTagsProps({ destructive: false })} />);
+        const destructiveText = screen.queryByText("Destructive action");
+        expect(destructiveText).not.toBeInTheDocument();
+    });
+
+    it("adds a tag when 'Enter' key is pressed", () => {
+        render(<InputTags {...createInputTagsProps()} />);
+        const input = screen.getByRole("textbox") as HTMLInputElement;
+
+        // Simulate typing into the input field
+        fireEvent.change(input, { target: { value: "tag1" } });
+
+        // Simulate pressing the 'Enter' key
+        fireEvent.keyDown(input, { key: "Enter" });
+
+        // Check if the tag is added to the document
+        expect(screen.getByText("tag1")).toBeInTheDocument();
+    });
+
+    it("removes a tag when 'Backspace' key is pressed with empty input", () => {
+        render(<InputTags {...createInputTagsProps()} />);
+        const input = screen.getByRole("textbox") as HTMLInputElement;
+
+        // Add a tag first
+        fireEvent.change(input, { target: { value: "tag1" } });
+        fireEvent.keyDown(input, { key: "Enter" });
+
+        // Check if the tag is in the document before Backspace
+        expect(screen.getByText("tag1")).toBeInTheDocument();
+
+        // Simulate pressing the 'Backspace' key when the input is empty
+        fireEvent.change(input, { target: { value: "" } });
+        fireEvent.keyDown(input, { key: "Backspace" });
+
+        // Check if the tag is removed from the document
+        expect(screen.queryByText("tag1")).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,26 @@
+import { Position } from "../Tooltip/_.types";
+
+export type inputTagsProps = {
+    className?: string;
+    tooltipProps?: {
+        text: string,
+        description?: string,
+        position?: Position,
+        dir?: "rtl" | "ltr" | undefined,
+        descriptionClassName?: string,
+    };
+    size?: "sm" | "md";
+    destructive?: boolean;
+    destructiveText?: string;
+    dir?: "ltr" | "rtl";
+    label?: string;
+    required?: boolean;
+    hintText?: string;
+    helpIcon?: boolean;
+    iconSwap?: boolean;
+    disabled?: boolean;
+    id?: string;
+    placeholder?: string;
+    name?: string;
+    onChange?: ((tags: string[]) => void) | (() => void) | undefined;
+};

package/src/components/InputTags/index.tsx

@@ -0,0 +1,140 @@
+import { destructiveStyles, disableStyles, inputTagsVariants } from "@/components/InputTags/_.style";
+import { inputTagsProps } from "@/components/InputTags/_.types";
+import { InputLabel } from "@/components/ui/input-component/input-label";
+import AttentionMark from "@/icons/general/attention-mark";
+import CircleQuestionMark from "@/icons/general/circle-question-mark";
+import Remove from "@/icons/general/remove";
+import { cn } from "@/lib/utils";
+import React, { useCallback, useState } from "react";
+import { TooltipWrapper } from "../Tooltip";
+
+export const InputTags = (
+    {
+        size = "sm",
+        disabled = false,
+        id,
+        label,
+        required = false,
+        destructive = false,
+        destructiveText,
+        hintText,
+        placeholder,
+        helpIcon = false,
+        className,
+        onChange,
+        tooltipProps,
+        name,
+    }: Readonly<inputTagsProps>) => {
+
+    const [tags, setTags] = useState<string[]>([]);
+    const [input, setInput] = useState<string>("");
+
+    const addTag = useCallback(() => {
+        const trimmed = input.trim();
+        if (trimmed && !tags.includes(trimmed)) {
+            const newTags = [...tags, trimmed];
+            setTags(newTags);
+            onChange?.(newTags);
+        }
+        setInput("");
+    }, [input, tags, setTags, setInput, onChange]);
+
+    const removeTag = useCallback((index: number) => {
+        const newTags = tags.filter((_, i) => i !== index);
+        setTags(newTags);
+        onChange?.(newTags);
+    }, [tags, setTags, onChange]);
+
+    const tagOnKeyDownHandler = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            addTag();
+        } else if (e.key === "Backspace" && input === "") {
+            removeTag(tags?.length - 1);
+        }
+    }, [addTag, input, tags, removeTag]);
+
+    return (
+        <div className="flex flex-col gap-1">
+            <InputLabel
+                id={id}
+                label={label}
+                required={required}
+            />
+            <div className="group relative w-full">
+                <div
+                    className={cn(
+                        inputTagsVariants({ size }),
+                        className,
+                        destructive === true && destructiveStyles,
+                        disabled && disableStyles,
+                        "group-focus-within:outline-2 group-focus-within:outline-rborder-brand",
+                        destructive && "bg-rbg-disabled-subtle border-rborder-disabled"
+                    )}
+                >
+                    {
+                        tags?.map((tag, index) => (
+                            <span
+                                key={index}
+                                className="flex items-center text-xs text-rtext-secondary-700 px-1 bg-white
+                                    rounded-sm border border-rborder-primary"
+                            >
+                                <span className="pt-px">{tag}</span>
+                                <button
+                                    onClick={() => removeTag(index)}
+                                    className="ms-1 my-auto cursor-pointer disabled:cursor-not-allowed"
+                                    disabled={disabled}
+                                    data-testid={`remove-tag-${index}`}
+                                >
+                                    <Remove />
+                                </button>
+                            </span>
+                        ))
+                    }
+                    <input
+                        name={name}
+                        disabled={disabled}
+                        className="outline-none text-sm bg-transparent disabled:cursor-not-allowed"
+                        value={input}
+                        onChange={(e) => setInput(e.target.value)}
+                        onKeyDown={tagOnKeyDownHandler}
+                        placeholder={tags?.length === 0 ? placeholder : ""}
+                    />
+
+                    {helpIcon && tooltipProps && destructive === false && (
+                        <TooltipWrapper
+                            content={tooltipProps?.text}
+                            description={tooltipProps?.description}
+                            position={tooltipProps?.position}
+                            dir={tooltipProps?.dir}
+                            descriptionClassName={tooltipProps?.descriptionClassName}
+                        >
+                            <div
+                                data-testid="tooltip-button"
+                                className="absolute top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2 w-fit"
+                            >
+                                <CircleQuestionMark />
+                            </div>
+                        </TooltipWrapper>
+                    )}
+
+                    {
+                        destructive === true &&
+                        <div className="absolute top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2 w-fit">
+                            <AttentionMark />
+                        </div>
+                    }
+
+                </div>
+            </div>
+            {
+                (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>
+    );
+}

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

@@ -0,0 +1,79 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Message } from "./index";
+import { Avatar } from "../Avatar";
+
+const meta: Meta<typeof Message> = {
+  component: Message,
+  title: "Components/Message",
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["primary", "gray", "white"],
+    },
+    sender: {
+      control: "radio",
+      options: ["user", "admin"],
+    },
+    dir: {
+      control: "radio",
+      options: ["ltr", "rtl"],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Message>;
+
+const avatar = (
+  <Avatar
+    type="single"
+    size="md"
+    img={{
+      src: "https://randomuser.me/api/portraits/women/44.jpg",
+      alt: "Alice",
+    }}
+    iconBorder={false}
+    notifyIcon={false}
+  />
+);
+
+export const LTR_User: Story = {
+  args: {
+    variant: "primary",
+    sender: "user",
+    senderName: "Alice",
+    message: "Here's the document you asked for.",
+    date: "April 16, 2025",
+    dir: "ltr",
+    avatar,
+  },
+};
+
+export const RTL_Admin: Story = {
+  args: {
+    variant: "gray",
+    sender: "admin",
+    senderName: "ادمین",
+    message: "لطفاً قبل از ارسال، راهنما را بررسی کنید.",
+    date: "16 آوریل 2025",
+    dir: "rtl",
+    avatar,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    variant: "white",
+    sender: "admin",
+    senderName: "System",
+    date: "Today",
+    dir: "ltr",
+    message: "Message with children:",
+    avatar,
+    children: (
+      <div className="text-sm text-blue-600">Extra content inside message</div>
+    ),
+  },
+};

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

@@ -0,0 +1,87 @@
+import { cva } from "class-variance-authority";
+
+export const baseStyles = "w-full flex flex-col py-2.5 px-3.5 gap-2";
+const variantStyle = {
+  primary: "bg-rbg-brand-solid text-rtext-white text-md font-normal",
+  gray: "bg-rbg-secondary border border-rborder-secondary text-rtext-primary-900 text-md font-normal",
+  white: "bg-rbg-primary border border-rborder-secondary",
+};
+export const messageVariants = cva(baseStyles, {
+  variants: {
+    sender: {
+      admin: "",
+      user: "",
+    },
+    variant: variantStyle,
+    direction: {
+      ltr: "",
+      rtl: "",
+    },
+  },
+  compoundVariants: [
+    {
+      sender: "admin",
+      direction: "ltr",
+      class: "rounded-tl-md rounded-tr-none rounded-br-md rounded-bl-md ",
+    },
+    {
+      sender: "user",
+      direction: "ltr",
+      class: "rounded-tl-none rounded-tr-md rounded-br-md rounded-bl-md",
+    },
+
+    {
+      sender: "admin",
+      direction: "rtl",
+      class: "  rounded-tl-md rounded-tr-none rounded-br-md rounded-bl-md",
+    },
+    {
+      sender: "user",
+      direction: "rtl",
+      class: "rounded-tl-none rounded-tr-md rounded-br-md rounded-bl-md",
+    },
+  ],
+  defaultVariants: {
+    variant: "primary",
+    direction: "rtl", // default fallback
+  },
+});
+export const messageDirectionVariants = cva("", {
+  variants: {
+    direction: {
+      ltr: "",
+      rtl: "",
+    },
+    sender: {
+      admin: "",
+      user: "",
+    },
+  },
+  compoundVariants: [
+    {
+      sender: "admin",
+      direction: "ltr",
+      class: "flex-row-reverse",
+    },
+    {
+      sender: "admin",
+      direction: "rtl",
+      class: "flex-row",
+    },
+    {
+      sender: "user",
+      direction: "ltr",
+      class: "flex-row",
+    },
+
+    {
+      sender: "user",
+      direction: "rtl",
+      class: "flex-row-reverse",
+    },
+  ],
+  defaultVariants: {
+    direction: "ltr",
+    sender: "user",
+  },
+});

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

@@ -0,0 +1,73 @@
+// Message.test.tsx
+import { Avatar } from "@/components/Avatar"; // adjust to match your actual import
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Message } from ".";
+import { MessageProps } from "./_.types";
+
+describe("Message component", () => {
+  const baseProps: MessageProps = {
+    variant: "primary",
+    sender: "user",
+    senderName: "Alice",
+    message: "Hello, world!",
+    date: "April 16, 2025",
+    className: "",
+    children: null,
+    avatar: (
+      <Avatar
+        type="single"
+        size="md"
+        img={{ src: "https://example.com/avatar.jpg", alt: "Alice" }}
+        iconBorder={false}
+        notifyIcon={false}
+        addBtnAction={() => { }}
+      />
+    ),
+  };
+  it("renders message with LTR direction and applies correct classes", () => {
+    render(<Message {...baseProps} dir="ltr" />);
+
+    expect(screen.getByTestId("messageWrapper")).toHaveClass("flex-row");
+  });
+
+  it("renders message with RTL direction and applies correct classes", () => {
+    render(<Message {...baseProps} dir="rtl" />);
+
+    expect(screen.getByTestId("messageWrapper")).toHaveClass(
+      "flex-row-reverse"
+    );
+  });
+
+  it("renders  avatar and/or children", () => {
+    const { container, getByLabelText } = render(
+      <Message
+        {...baseProps}
+        avatar={
+          <Avatar
+            type="single"
+            size="md"
+            img={{ src: "https://example.com/avatar.jpg", alt: "Alice" }}
+            iconBorder={false}
+            notifyIcon={false}
+            addBtnAction={() => { }}
+          />
+        }
+        children={<span aria-label="children">children</span>}
+        message="No avatar or chldrn"
+      />
+    );
+
+    const avatarElement = container.querySelector(
+      'img[src="https://example.com/avatar.jpg"]'
+    );
+    expect(avatarElement).toBeInTheDocument();
+    const childrenElement = getByLabelText("children");
+    expect(childrenElement).toBeInTheDocument();
+  });
+
+  it("falls back to document direction when dir is not passed", () => {
+    render(<Message {...baseProps} dir={undefined} />);
+    expect(screen.getByText("Hello, world!")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { Avatar } from "../Avatar";
+
+export interface MessageProps {
+  variant?: "primary" | "gray" | "white";
+  sender: "user" | "admin";
+  senderName: string;
+  message?: string;
+  children?: React.ReactNode;
+  avatar?: React.ReactElement<typeof Avatar> | null;
+  date: string;
+  className?: string;
+  dir?: "rtl" | "ltr";
+}

package/src/components/Message/index.tsx

@@ -0,0 +1,57 @@
+import { messageDirectionVariants, messageVariants } from "./_.style";
+import { cn } from "@/lib/utils";
+import { MessageProps } from "./_.types";
+
+export const Message = ({
+  variant,
+  sender,
+  senderName,
+  message,
+  children,
+  avatar,
+  date,
+  className,
+  dir,
+}: MessageProps) => {
+  const direction: "ltr" | "rtl" =
+    dir ?? (document?.body?.getAttribute("dir") === "rtl" ? "rtl" : "ltr");
+  return (
+    <div
+      className={cn(
+        "w-full flex ",
+        messageDirectionVariants({ sender, direction })
+      )}
+      data-testid="messageWrapper"
+    >
+      <div
+        className={cn(
+          "w-fit max-w-4/5 flex gap-3",
+          messageDirectionVariants({ sender, direction }),
+          className
+        )}
+        data-testid="messageComp"
+      >
+        {avatar ?? null}
+        <div className="w-full flex flex-col gap-1.5">
+          <div
+            className={cn(
+              "w-full flex justify-between items-center",
+              messageDirectionVariants({ sender, direction })
+            )}
+          >
+            <span className="text-rtext-secondary-700 text-sm font-medium">
+              {senderName}
+            </span>
+            <span className="text-rtext-tertiary-600 text-xs font-normal">
+              {date}
+            </span>
+          </div>
+          <div className={cn(messageVariants({ variant, sender, direction }))}>
+            {message && <span className="">{message}</span>}
+            {children ?? null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};