dst-rg 1.0.0

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

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Select } from "./";
+import { selectPropsType } from "./_.types";
+
+const meta: Meta<selectPropsType> = {
+    title: "Components/Select",
+    component: Select,
+    tags: ["autodocs"],
+    argTypes: {
+        disabled: {
+            control: { type: "boolean" },
+        },
+        isLoading: {
+            control: { type: "boolean" },
+        },
+        selectedValueLabel: {
+            control: { type: "text" },
+        },
+        onChange: {
+            action: "changed",
+        },
+        labelStarClass: {
+            control: { type: "text" },
+        },
+        labelClass: {
+            control: { type: "text" },
+        },
+    },
+    parameters: {
+        layout: "centered",
+    },
+    args: {
+        config: {
+            label: "Select an option",
+            name: "select",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Choose an option",
+        options: [
+            { title: "Option 1", value: 1 },
+            { title: "Option 2", value: 2 },
+            { title: "Option 3", value: 3 },
+            { title: "Option 4", value: 4 },
+            { title: "Option 5", value: 5 },
+        ],
+        onChange: (value) => console.log("Selected:", value),
+        className: "min-w-[300px]",
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<selectPropsType>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        config: {
+            label: "Choose your country",
+            name: "country",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Select country",
+        options: [
+            { title: "United States", value: 1 },
+            { title: "Canada", value: 2 },
+            { title: "United Kingdom", value: 3 },
+            { title: "Germany", value: 4 },
+            { title: "France", value: 5 },
+            { title: "Japan", value: 6 },
+            { title: "Australia", value: 7 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const Required: Story = {
+    args: {
+        config: {
+            label: "Priority Level",
+            name: "priority",
+            isRequiredInput: true,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Select priority",
+        options: [
+            { title: "Low", value: 1 },
+            { title: "Medium", value: 2 },
+            { title: "High", value: 3 },
+            { title: "Critical", value: 4 },
+        ],
+    },
+};
+
+export const WithHint: Story = {
+    args: {
+        config: {
+            label: "Department",
+            name: "department",
+            isRequiredInput: false,
+            canSelectZero: false,
+            hintText: "Select the department you belong to",
+        },
+        selectedValueLabel: "Choose department",
+        options: [
+            { title: "Engineering", value: 1 },
+            { title: "Design", value: 2 },
+            { title: "Marketing", value: 3 },
+            { title: "Sales", value: 4 },
+            { title: "HR", value: 5 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        config: {
+            label: "Payment Method",
+            name: "payment",
+            isRequiredInput: true,
+            canSelectZero: false,
+            errorText: "Please select a payment method",
+        },
+        selectedValueLabel: "Select payment method",
+        options: [
+            { title: "Credit Card", value: 1 },
+            { title: "Debit Card", value: 2 },
+            { title: "PayPal", value: 3 },
+            { title: "Bank Transfer", value: 4 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const WithTooltip: Story = {
+    args: {
+        config: {
+            label: "Theme Selection",
+            name: "theme",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Choose theme",
+        tooltipTitle: "This will change the appearance of your dashboard",
+        options: [
+            { title: "Light Theme", value: 1 },
+            { title: "Dark Theme", value: 2 },
+            { title: "Auto Theme", value: 3 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        config: {
+            label: "Disabled Select",
+            name: "disabled",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "This is disabled",
+        disabled: true,
+        options: [
+            { title: "Option 1", value: 1 },
+            { title: "Option 2", value: 2 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        config: {
+            label: "Loading Options",
+            name: "loading",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Loading...",
+        isLoading: true,
+        options: [
+            { title: "Option 1", value: 1 },
+            { title: "Option 2", value: 2 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const WithManyOptions: Story = {
+    args: {
+        config: {
+            label: "Select a city",
+            name: "city",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Choose city",
+        options: Array.from({ length: 50 }, (_, i) => ({
+            title: `City ${i + 1}`,
+            value: i + 1,
+        })),
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const CanSelectZero: Story = {
+    args: {
+        config: {
+            label: "Quantity",
+            name: "quantity",
+            isRequiredInput: false,
+            canSelectZero: true,
+        },
+        selectedValueLabel: "Select quantity",
+        options: [
+            { title: "0", value: 0 },
+            { title: "1", value: 1 },
+            { title: "2", value: 2 },
+            { title: "3", value: 3 },
+            { title: "4", value: 4 },
+            { title: "5", value: 5 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const CustomStyling: Story = {
+    args: {
+        config: {
+            label: "Custom Styled Select",
+            name: "custom",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Custom appearance",
+        buttonClass: "border-blue-500 bg-blue-50 text-blue-700",
+        contentClass: "border-blue-200 bg-blue-50",
+        className: "min-w-[350px]",
+        options: [
+            { title: "Custom Option 1", value: 1 },
+            { title: "Custom Option 2", value: 2 },
+            { title: "Custom Option 3", value: 3 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const FullWidth: Story = {
+    args: {
+        config: {
+            label: "Full Width Select",
+            name: "fullwidth",
+            isRequiredInput: false,
+            canSelectZero: false,
+        },
+        selectedValueLabel: "Full width select",
+        className: "w-full",
+        options: [
+            { title: "Option 1", value: 1 },
+            { title: "Option 2", value: 2 },
+            { title: "Option 3", value: 3 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};
+
+export const WithAllFeatures: Story = {
+    args: {
+        config: {
+            label: "Complete Select Example",
+            name: "complete",
+            isRequiredInput: true,
+            canSelectZero: false,
+            hintText: "This select has all features enabled",
+        },
+        selectedValueLabel: "Select an option",
+        tooltipTitle: "This is a comprehensive example with all features",
+        tooltipClass: "bg-blue-600 text-white",
+        buttonClass: "border-green-500 focus:border-green-600",
+        contentClass: "border-green-200 bg-green-50",
+        className: "min-w-[400px]",
+        options: [
+            { title: "Feature Complete Option 1", value: 1 },
+            { title: "Feature Complete Option 2", value: 2 },
+            { title: "Feature Complete Option 3", value: 3 },
+            { title: "Feature Complete Option 4", value: 4 },
+        ],
+        labelStarClass: "text-red-500",
+        labelClass: "text-blue-500",
+    },
+};

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

@@ -0,0 +1,5 @@
+export const tooltipBaseClass = "absolute left-1/2 z-10 max-h-[200px] w-72 -translate-x-1/2 -translate-y-11 transform overflow-auto rounded bg-gray-500 p-3 text-start text-xs text-white shadow-md transition-all duration-200"
+
+export const buttonBaseClass = "flex items-center justify-between w-full bg-white border border-rborder-primary rounded-md px-2 shadow-xs text-sm text-dark/80 focus:outline-2 focus:outline-rborder-brand disabled:bg-rbg-disabled-subtle disabled:border-rborder-disabled disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500 px-4 py-2 text-left"
+
+export const contentBaseClass = "absolute left-0 mt-1 w-full rounded-md bg-gray-50 shadow-lg border border-rborder-primary z-50"

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

@@ -0,0 +1,24 @@
+type configProps = {
+    label?: string,
+    name: string,
+    errorText?: string,
+    hintText?: string,
+    isRequiredInput?: boolean,
+    canSelectZero?: boolean
+}
+
+export type selectPropsType = {
+    config: configProps;
+    isLoading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    tooltipClass?: string;
+    tooltipTitle?: string | React.ReactNode;
+    selectedValueLabel: string
+    onChange: (value: any) => void,
+    options: { title: string, value: number }[],
+    buttonClass?: string
+    contentClass?: string
+    labelClass?: string
+    labelStarClass?: string
+}

package/src/components/Select/index.tsx

@@ -0,0 +1,172 @@
+import { InputLabel } from "@/components/ui/input-component/input-label";
+import { useClickOutside } from "@/hooks/useClickOutside";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { buttonBaseClass, contentBaseClass, tooltipBaseClass } from "./_.style";
+import { selectPropsType } from "./_.types";
+
+const Select = ({
+  config,
+  isLoading = false,
+  disabled = false,
+  className,
+  tooltipClass,
+  tooltipTitle,
+  selectedValueLabel,
+  onChange,
+  options,
+  buttonClass,
+  contentClass,
+  labelClass,
+  labelStarClass
+}: selectPropsType) => {
+  const {
+    label,
+    name,
+    errorText,
+    hintText,
+    isRequiredInput = false,
+    canSelectZero = false,
+  } = config || {};
+
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState(-50);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [visibleOptions, setVisibleOptions] = useState(5);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(dropdownRef, () => setIsOpen(false));
+
+  const handleScroll = (e: React.UIEvent<HTMLUListElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollTop + clientHeight >= scrollHeight - 10) {
+      setVisibleOptions((prev) => Math.min(prev + 5, options?.length));
+    }
+  };
+
+  const handleSelect = (value: string) => {
+    onChange({ name, value })
+    setIsOpen(false);
+  };
+
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  const calculatePosition = () => {
+    if (tooltipRef.current) {
+      const tooltipHeight = tooltipRef.current.offsetHeight;
+      setTooltipPosition(-tooltipHeight + window.scrollY + 40);
+    }
+  };
+
+  useEffect(() => {
+    if (isTooltipVisible) {
+      calculatePosition();
+    }
+  }, [isTooltipVisible]);
+
+  useClickOutside(tooltipRef, () => setIsTooltipVisible(false));
+
+  return (
+    <div className={twMerge("relative flex w-full flex-col gap-1", className)}>
+      {label && (
+        <div className="flex items-center gap-1">
+          <InputLabel
+            labelClass={labelClass}
+            labelStarClass={labelStarClass}
+            id={name} label={label} required={isRequiredInput} />
+          {tooltipTitle && (
+            <button
+              type="button"
+              onClick={
+                tooltipTitle ? () => setIsTooltipVisible((prev) => !prev) : () => { }
+              }
+              // onMouseLeave={title ? () => setIsTooltipVisible(false) : () => {}}
+              className="flex-center h-4 w-4 rounded-full bg-blue-400 text-xs text-white"
+            >
+              i
+            </button>
+          )}
+        </div>
+      )}
+      <div className="relative">
+        <button
+          type="button"
+          className={twMerge(buttonBaseClass, buttonClass)}
+          onClick={() => setIsOpen((prev) => !prev)}
+          disabled={isLoading || disabled}
+        >
+          {selectedValueLabel}
+          {
+            isOpen ?
+              <ChevronUp className="h-4 w-4 opacity-50" /> :
+              <ChevronDown className="h-4 w-4 opacity-50" />
+          }
+        </button>
+
+        {isOpen && (
+          <div
+            ref={dropdownRef}
+            className={twMerge(contentBaseClass, contentClass)}
+          >
+            <ul
+              className="max-h-48 overflow-auto p-2 text-sm text-start"
+              onScroll={handleScroll}
+              style={{ maxHeight: "150px" }} // Adjust the max height as needed
+            >
+              {!canSelectZero && (
+                <li>
+                  <button
+                    type="button"
+                    className="w-full p-2 text-start text-gray-500 cursor-not-allowed"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    -
+                  </button>
+                </li>
+              )}
+
+              {options?.slice(0, visibleOptions)?.map((opt: any) => (
+                <li key={opt.value}>
+                  <button
+                    type="button"
+                    className="w-full p-2 text-start cursor-pointer hover:bg-gray-100"
+                    onClick={() => handleSelect(opt.value)}
+                  >
+                    {opt.title}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+      {tooltipTitle && isTooltipVisible && (
+        <div
+          ref={tooltipRef}
+          className={twMerge(
+            tooltipBaseClass,
+            tooltipClass
+          )}
+          style={{
+            top: `${tooltipPosition}px`,
+          }}
+          dangerouslySetInnerHTML={{ __html: tooltipTitle }}
+        />
+      )}
+      {!errorText && hintText && (
+        <p className="text-sm text-rtext-tertiary-600">{hintText}</p>
+      )}
+      {errorText && (
+        <p className="text-sm text-rtext-error-primary-600">
+          {errorText}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export { Select };
+

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

@@ -0,0 +1,61 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { Meta } from "@storybook/react-vite";
+import { Switch } from ".";
+import { SwitchProps } from "./_.type";
+
+export default {
+  title: "Components/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  argTypes: {
+    direction: {
+      control: { type: "radio" },
+      options: ["ltr", "rtl"],
+    },
+    label: {
+      control: { type: "text" },
+    },
+    description: {
+      control: { type: "text" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    onCheckedChange: {
+      action: "checkedChange",
+    },
+  },
+  args: {
+    label: "Toggle me",
+    description: "This is a switch description",
+    direction: "ltr",
+    disabled: false,
+  },
+} as Meta<typeof Switch>;
+
+type Story = StoryObj<SwitchProps>;
+
+export const Default: Story = {};
+
+export const RTL: Story = {
+  args: {
+    dir: "rtl",
+    label: "روشن/خاموش",
+    description: "توضیحات مربوط به کلید",
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    label: "",
+    description: "",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    label: "Disabled Switch",
+    description: "You can't toggle this",
+  },
+};

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

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Switch } from ".";
+
+describe("Switch component", () => {
+  const createOnToggleMock = () => vi.fn();
+
+  it("renders with label and description", () => {
+    const onToggle = createOnToggleMock();
+    render(
+      <Switch
+        label="Test Label"
+        description="Test Description"
+        onToggle={onToggle}
+      />
+    );
+
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByText("Test Description")).toBeInTheDocument();
+  });
+
+  it("renders correctly in RTL mode", () => {
+    const onToggle = createOnToggleMock();
+    render(
+      <div dir="rtl">
+        <Switch label="برچسب" description="توضیحات" onToggle={onToggle} />
+      </div>
+    );
+
+    expect(screen.getByText("برچسب")).toBeInTheDocument();
+    expect(screen.getByText("توضیحات")).toBeInTheDocument();
+  });
+
+  it("calls onToggle when clicked", () => {
+    const onToggle = createOnToggleMock();
+    render(<Switch onToggle={onToggle} />);
+
+    const toggle = screen.getByRole("switch");
+    fireEvent.click(toggle);
+
+    expect(onToggle).toHaveBeenCalled();
+  });
+
+  it("can be toggled by clicking label wrapper", () => {
+    const onToggle = createOnToggleMock();
+    render(<Switch label="Clickable Label" onToggle={onToggle} />);
+
+    fireEvent.click(screen.getByText("Clickable Label"));
+    expect(onToggle).toHaveBeenCalled();
+  });
+
+  it("supports being disabled", () => {
+    const onToggle = createOnToggleMock();
+    render(<Switch disabled onToggle={onToggle} />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toBeDisabled();
+  });
+
+  it("respects controlled checked state (manual rerender)", () => {
+    const onToggle = createOnToggleMock();
+    const { rerender } = render(<Switch checked={false} onToggle={onToggle} />);
+    const toggle = screen.getByRole("switch");
+
+    expect(toggle.getAttribute("data-state")).toBe("unchecked");
+
+    rerender(<Switch checked={true} onToggle={onToggle} />);
+    expect(toggle.getAttribute("data-state")).toBe("checked");
+  });
+});

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

@@ -0,0 +1,12 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+  thumbClassName?: string;
+  label?: string;
+  labelClassName?: string;
+  description?: string;
+  descriptionClassName?: string;
+  onToggle: () => void;
+}