dst-rg 1.0.0

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

@@ -0,0 +1,174 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Tabs } from ".";
+
+describe("Tabs Component", () => {
+  it("renders with default horizontal direction and dir rtl", () => {
+    const { container } = render(
+      <Tabs className="custom-tabs" defaultValue="tab1">
+        <Tabs.Content value="tab1">Content</Tabs.Content>
+      </Tabs>
+    );
+    const tabsRoot = container.querySelector('[data-slot="tabs"]');
+    expect(tabsRoot).toBeDefined();
+    expect(tabsRoot).toHaveClass("flex-col");
+    expect(tabsRoot).toHaveClass("custom-tabs");
+    expect(tabsRoot).toHaveAttribute("dir", "rtl");
+  });
+
+  it("renders with vertical direction when direction is 'vertical'", () => {
+    const { container } = render(
+      <Tabs direction="vertical" defaultValue="tab1">
+        <Tabs.Content value="tab1">Content</Tabs.Content>
+      </Tabs>
+    );
+    const tabsRoot = container.querySelector('[data-slot="tabs"]');
+    expect(tabsRoot).toBeDefined();
+    expect(tabsRoot).toHaveClass("flex-row");
+  });
+});
+
+describe("Tabs.List Component", () => {
+  it("renders and applies variant styles with fullWidth true", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List fullWidth listVariant="brand" direction="horizontal">
+          <div>List Child</div>
+        </Tabs.List>
+      </Tabs>
+    );
+    const listChild = screen.getByText("List Child");
+    const tabsList = listChild.closest('[data-slot="tabs-list"]');
+    expect(tabsList).toBeDefined();
+    expect(tabsList).toHaveClass("w-full");
+  });
+
+  it("renders and does not include fullWidth class when fullWidth is false", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List fullWidth={false} listVariant="outlined" direction="vertical">
+          <div>List Child</div>
+        </Tabs.List>
+      </Tabs>
+    );
+    const listChild = screen.getByText("List Child");
+    const tabsList = listChild.closest('[data-slot="tabs-list"]');
+    expect(tabsList).toBeDefined();
+    expect(tabsList).not.toHaveClass("w-full");
+  });
+
+  it("merges extra class names provided via className prop", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List
+          className="extra-class"
+          fullWidth={true}
+          listVariant="outlined"
+          direction="horizontal"
+        >
+          <div>List Child</div>
+        </Tabs.List>
+      </Tabs>
+    );
+    const listChild = screen.getByText("List Child");
+    const tabsList = listChild.closest('[data-slot="tabs-list"]');
+    expect(tabsList).toHaveClass("extra-class");
+  });
+});
+
+describe("Tabs.Trigger Component", () => {
+  it("renders and applies variant styles with fullWidth true", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List>
+          <Tabs.Trigger value="tab1" fullWidth triggerVariant="brand">
+            Tab Trigger
+          </Tabs.Trigger>
+        </Tabs.List>
+      </Tabs>
+    );
+    const trigger = screen.getByText("Tab Trigger");
+    expect(trigger).toBeDefined();
+    expect(trigger).toHaveClass("w-full");
+  });
+
+  it("renders without fullWidth and merges extra class names", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List>
+          <Tabs.Trigger
+            value="tab1"
+            fullWidth={false}
+            triggerVariant="minimal"
+            className="trigger-extra"
+          >
+            Tab Trigger
+          </Tabs.Trigger>
+        </Tabs.List>
+      </Tabs>
+    );
+    const trigger = screen.getByText("Tab Trigger");
+    expect(trigger).toBeDefined();
+    expect(trigger).not.toHaveClass("w-full");
+    expect(trigger).toHaveClass("trigger-extra");
+  });
+  it("applies active data-state to selected tab and includes active variant classes", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List>
+          <Tabs.Trigger value="tab1" triggerVariant="brand">
+            Tab One
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab2" triggerVariant="brand">
+            Tab Two
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content One</Tabs.Content>
+        <Tabs.Content value="tab2">Content Two</Tabs.Content>
+      </Tabs>
+    );
+
+    const tabOne = screen.getByText("Tab One");
+    const tabTwo = screen.getByText("Tab Two");
+
+    expect(tabOne).toHaveAttribute("data-state", "active");
+    expect(tabTwo).toHaveAttribute("data-state", "inactive");
+
+    expect(tabOne.className).toContain(
+      "data-[state=active]:bg-rbg-brand-primary-alt"
+    );
+    expect(tabTwo.className).toContain(
+      "data-[state=active]:bg-rbg-brand-primary-alt"
+    );
+  });
+});
+
+describe("Tabs.Content Component", () => {
+  it("renders and has default classes", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.Content value="tab1">
+          <div>Content Body</div>
+        </Tabs.Content>
+      </Tabs>
+    );
+    const contentChild = screen.getByText("Content Body");
+    const tabsContent = contentChild.closest('[data-slot="tabs-content"]');
+    expect(tabsContent).toBeDefined();
+    expect(tabsContent).toHaveClass("flex-1");
+    expect(tabsContent).toHaveClass("outline-none");
+  });
+
+  it("merges extra class names provided via className prop", () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <Tabs.Content value="tab1" className="content-extra">
+          <div>Content Body</div>
+        </Tabs.Content>
+      </Tabs>
+    );
+    const contentChild = screen.getByText("Content Body");
+    const tabsContent = contentChild.closest('[data-slot="tabs-content"]');
+    expect(tabsContent).toHaveClass("content-extra");
+  });
+});

package/src/components/Tabs/_.type.ts

@@ -0,0 +1,19 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+export interface TabsProps
+  extends React.ComponentProps<typeof TabsPrimitive.Root> {
+  direction?: "vertical" | "horizontal";
+  dir?: "rtl" | "ltr";
+}
+export interface TabsListProps
+  extends React.ComponentProps<typeof TabsPrimitive.List> {
+  fullWidth?: boolean;
+  listVariant?: "gray" | "brand" | "outlined" | "bordered" | "minimal";
+  direction?: "vertical" | "horizontal";
+}
+
+export interface TabsTriggerProps
+  extends React.ComponentProps<typeof TabsPrimitive.Trigger> {
+  triggerVariant?: "gray" | "brand" | "outlined" | "bordered" | "minimal";
+  fullWidth?: boolean;
+}

package/src/components/Tabs/index.tsx

@@ -0,0 +1,35 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+import { TabsContentComp } from "../ui/tab-components/tabs-content";
+import { TabsListComp } from "../ui/tab-components/tabs-list";
+import { TabsTriggerComp } from "../ui/tab-components/tabs-trigger";
+import { TabsProps } from "./_.type";
+
+const TabsRoot = ({
+  className,
+  direction = "horizontal",
+  dir = "rtl",
+  ...props
+}: Readonly<TabsProps>) => {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      dir={dir}
+      className={cn(
+        "flex gap-2",
+        direction == "horizontal" ? "flex-col" : "flex-row",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+
+const Tabs = Object.assign(TabsRoot, {
+  List: TabsListComp,
+  Trigger: TabsTriggerComp,
+  Content: TabsContentComp,
+});
+
+export { Tabs };

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tag } from "./index"; // or wherever your component is exported
+import type { TagProps } from "./_.types";
+
+const meta: Meta<TagProps> = {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+    },
+    dir: {
+      control: { type: "radio" },
+      options: ["rtl", "ltr"],
+    },
+    icon: {
+      control: { type: "radio" },
+      options: [undefined, "x-close"],
+    },
+    pin: { control: "boolean" },
+    checkbox: { control: "text" },
+    number: { control: "number" },
+    avatar: { control: "text" },
+  },
+  args: {
+    size: "sm",
+    dir: "rtl",
+    children: "Tag Label",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TagProps>;
+
+export const Default: Story = {};
+
+export const WithIcon: Story = {
+  args: {
+    icon: "x-close",
+  },
+};
+
+export const WithAvatar: Story = {
+  args: {
+    avatar: "https://i.pravatar.cc/40?img=3",
+  },
+};
+
+export const WithNumber: Story = {
+  args: {
+    number: 7,
+  },
+};
+
+export const WithCheckbox: Story = {
+  args: {
+    checkbox: "checkbox-id",
+  },
+};
+
+export const WithPin: Story = {
+  args: {
+    pin: true,
+  },
+};
+
+export const AllFeatures: Story = {
+  args: {
+    pin: true,
+    avatar: "https://i.pravatar.cc/40?img=3",
+    icon: "x-close",
+    number: 99,
+    checkbox: "check-all",
+  },
+};

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

@@ -0,0 +1,71 @@
+import { cva } from "class-variance-authority";
+
+const baseStyles =
+  "inline-flex items-center h-fit min-w-fit bg-white w-fit rounded-md text-rtext-secondary-700 font-medium border border-rborder-primary";
+
+const sizeStyle = {
+  sm: "px-2 py-[3px] text-xs gap-1",
+  md: "px-[9px] py-0.5 text-sm gap-[5px]",
+  lg: "px-2.5 py-1 text-sm gap-1.5",
+};
+
+export const tagVariants = cva(baseStyles, {
+  variants: {
+    size: sizeStyle,
+    dir: {
+      ltr: "flex-row-reverse",
+      rtl: "flex-row",
+    },
+    icon: {
+      "x-close": "x-close",
+    },
+    // pin: {
+    //   true: "[&>span]:relative [&>span]:before:content-[''] [&>span]:ms-3 [&>span]:before:absolute [&>span]:before:-start-3 [&>span]:before:top-1/2 [&>span]:before:-translate-y-1/2 [&>span]:before:w-1.5 [&>span]:before:h-1.5 [&>span]:before:rounded-full [&>span]:before:bg-success-500 [&>span]:before:me-1 [&>span]:before:ltr:ms-1",
+    // },
+  },
+  defaultVariants: {
+    size: "sm",
+    dir: "rtl",
+  },
+});
+// checkbox variants
+export const checkboxVariants = cva("", {
+  variants: {
+    size: {
+      sm: "w-3.5 h-3.5",
+      md: "w-4 h-4",
+      lg: "w-4.5 h-4.5",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+// number variant
+export const numberVariants = cva("", {
+  variants: {
+    size: {
+      sm: "px-1 leading-[var(--line-height-text-xs)]",
+      md: "px-[5px] leading-[var(--line-height-text-xs)]",
+      lg: "px-1.5 leading-[var(--line-height-text-sm)]",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+// remove icon variants
+export const removeIconVariants = cva("", {
+  variants: {
+    size: {
+      sm: "10",
+      md: "12",
+      lg: "14",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});
+
+export { baseStyles, sizeStyle };

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

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, expect, it } from "vitest";
+import { Tag } from ".";
+
+describe("Tag component", () => {
+  it("renders children content", () => {
+    render(<Tag>Test Tag</Tag>);
+    expect(screen.getByText("Test Tag")).toBeInTheDocument();
+  });
+
+  it("renders checkbox if checkbox prop is passed", () => {
+    render(<Tag checkbox="check-1">With Checkbox</Tag>);
+    expect(screen.getByRole("checkbox")).toBeInTheDocument();
+  });
+
+  it("renders avatar if avatar prop is passed", () => {
+    const testAvatar = "/Avatar.png";
+    render(<Tag avatar={testAvatar}>With Avatar</Tag>);
+
+    const img = screen.getByAltText("avatar") as HTMLImageElement;
+    expect(img).toBeInTheDocument();
+    expect(img.src).toContain(testAvatar);
+  });
+
+  it("renders number if number prop is passed", () => {
+    render(<Tag number={42}>With Number</Tag>);
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("renders icon if icon is 'x-close'", () => {
+    render(<Tag icon="x-close">With Icon</Tag>);
+    const icon =
+      screen.getByRole("x-icon", { hidden: true }) ||
+      screen.getByTestId("icon-x-close");
+    expect(icon).toBeInTheDocument();
+  });
+
+  it("applies custom className", () => {
+    render(<Tag className="custom-class">With Class</Tag>);
+    const tagElement = screen.getByText("With Class").parentElement;
+    expect(tagElement?.className).toContain("custom-class");
+  });
+});

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

@@ -0,0 +1,27 @@
+export type TagProps = {
+  pin?: boolean;
+  number?: number;
+  checkbox?: string;
+  checkboxIndex?: number;
+  avatar?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  dir?: "ltr" | "rtl";
+  children?: React.ReactNode;
+  icon?: "x-close";
+};
+
+export type CheckboxProps = {
+  value?: string;
+  disabled?: boolean;
+  checkboxIndex?: number;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  label?: string;
+  id: string;
+  name?: string;
+  onClick?: () => void;
+  onChange?: () => void;
+  size?: "sm" | "md" | "lg";
+  children?: React.ReactNode;
+};

package/src/components/Tag/index.tsx

@@ -0,0 +1,46 @@
+import XClose from "@/icons/general/x-close";
+import { cn } from "@/lib/utils";
+import { Checkbox } from "../Checkbox";
+import Number from "../ui/number";
+import { removeIconVariants, tagVariants } from "./_.style";
+import { TagProps } from "./_.types";
+
+const Tag = ({
+  className,
+  size = "sm",
+  number,
+  pin = false,
+  avatar,
+  children,
+  checkbox,
+  dir = "rtl",
+  icon,
+  checkboxIndex,
+  ...props
+}: Readonly<TagProps>) => {
+  const iconElement = icon === "x-close" && (
+    <XClose
+      width={cn(removeIconVariants({ size }))}
+      height={cn(removeIconVariants({ size }))}
+      stroke="#98A2B3"
+    />
+  );
+
+  return (
+    <div className={cn(tagVariants({ size, dir, icon }), className)} {...props}>
+      {iconElement}
+      {number && <Number number={number} size={size} />}
+      <span>{children}</span>
+      {avatar && (
+        <img src={avatar} alt="avatar" className="w-4 h-4 rounded-full" />
+      )}
+      {pin && <span className="w-1.5 h-1.5 rounded-full bg-current"></span>}
+      {checkbox && (
+        <Checkbox checkboxIndex={checkboxIndex} size={size} id={checkbox} name={checkbox || ""} />
+      )}
+    </div>
+  );
+}
+
+export { Tag };
+

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

@@ -0,0 +1,62 @@
+import { textAreaProps } from "@/components/TextArea/_.types";
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { TextArea } from "./";
+
+export default {
+    title: "Components/TextArea",
+    component: TextArea,
+    tags: ["autodocs"],
+    argTypes: {
+        disabled: {
+            control: { type: "radio" },
+            options: [true, false]
+        },
+        destructive: {
+            control: { type: "radio" },
+            options: [true, false]
+        },
+        helpIcon: {
+            control: { type: "radio" },
+            options: [true, false]
+        },
+    },
+    args: {
+        row: 5,
+        disabled: false,
+        label: "Description",
+        required: true,
+        hintText: "This is a hint text to help user.",
+        placeholder: "Enter a description...",
+        destructive: false,
+        destructiveText: "This is an error message.",
+        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 TextArea>;
+
+type Story = StoryObj<textAreaProps>;
+
+export const Default: Story = {};
+
+export const CustomLabel: Story = {
+    args: {
+        label: "Email",
+        labelClass: "text-blue-600",
+        labelStarClass: "text-red-500",
+    },
+};
+
+export const InputAutoFocus: Story = {
+    args: {
+        label: "توضیحات",
+        placeholder: "توضیحات را وارد کنید",
+        autoFocus: true
+    },
+};

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

@@ -0,0 +1,11 @@
+import {cva} from "class-variance-authority";
+
+const baseStyles =
+    "rounded-md p-2 shadow-xs w-fit bg-white border border-rborder-primary" +
+    " focus:outline-2 focus:outline-rborder-brand disabled:bg-rbg-disabled-subtle disabled:border-rborder-disabled w-full";
+
+const destructiveStyles = "!border-2 !border-rborder-error focus:!outline-0"
+
+const textAreaVariants = cva(baseStyles)
+
+export {baseStyles,destructiveStyles,textAreaVariants};

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

@@ -0,0 +1,43 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TextArea } from "./index";
+
+describe("TextArea component", () => {
+    const defaultProps = {
+        destructive: false,
+        disabled: false,
+        destructiveText: "This is an error message.",
+        label: "Description",
+        helpIcon: true,
+        required: true,
+        hintText: "This is a hint text to help user.",
+        placeholder: "Enter a description...",
+        className: "w-fit",
+        name:"description"
+    };
+
+    it("calls onChange handler", () => {
+        const handleChange = vi.fn();
+        render(<TextArea {...defaultProps} onChange={handleChange} />);
+        const textarea = screen.getByRole("textbox");
+        fireEvent.change(textarea, { target: { value: "Hello world" } });
+        expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders disabled textarea", () => {
+        render(<TextArea {...defaultProps} disabled={true} />);
+        const textarea = screen.getByRole("textbox");
+        expect(textarea).toBeDisabled();
+    });
+
+    it("applies destructive styles when destructive is true", () => {
+        render(
+            <TextArea
+                {...defaultProps}
+                destructive={true}
+            />
+        );
+        const textarea = screen.getByRole("textbox");
+        expect(textarea.className).toMatch(/!border-2/);
+    });
+});

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { Position } from "../Tooltip/_.types";
+
+export type textAreaProps = {
+    className?: string;
+    row?: number;
+    disabled?: boolean;
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    destructive?: boolean;
+    destructiveText?: string;
+    label?: string;
+    required?: boolean;
+    hintText?: string;
+    helpIcon?: boolean;
+    name: string;
+    onChange?: ((e: React.ChangeEvent<HTMLTextAreaElement>) => void) | (() => void);
+    tooltipProps?: {
+        text: string,
+        description?: string,
+        position?: Position,
+        dir?: "rtl" | "ltr",
+        descriptionClassName?: string,
+    };
+    labelClass?: string;
+    labelStarClass?: string;
+    autoFocus?: boolean
+}