dst-rg 1.0.0

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

@@ -0,0 +1,177 @@
+import { inputProps } from "@/components/Input/_.types";
+import Email from "@/icons/general/email";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input } from "./";
+
+const meta: Meta<inputProps> = {
+    title: "Components/Input",
+    component: Input,
+    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]
+        },
+        inputType: {
+            control: { type: "select" },
+            options: ["default", "iconLeading", "leadingDropdown", "trailingDropdown", "leadingText", "trailingButton", "shaba"],
+        },
+        shabaLabelSize: {
+            control: { type: "select" },
+            options: ["sm", "md", "lg", "xl"],
+        },
+    },
+    parameters: {
+        layout: "centered",
+    },
+    args: {
+        disabled: false,
+        size: "sm",
+        type: "text",
+        label: "Email",
+        inputType: "default",
+        required: true,
+        hintText: "This is a hint text to help user.",
+        placeholder: "Enter your email",
+        destructive: false,
+        destructiveText: "error text",
+        className: "min-w-[400px] max-w-[400px]",
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<inputProps>;
+
+export const Default: Story = {};
+
+export const IconLeading: Story = {
+    args: {
+        inputType: "iconLeading",
+        icon: Email,
+    },
+};
+
+export const TrailingButton: Story = {
+    args: {
+        label: "Tracking Number",
+        inputType: "trailingButton",
+        trailingButtonText: "Copy",
+        value: "1234567890",
+    },
+};
+
+export const LeadingText: Story = {
+    args: {
+        label: "Address",
+        inputType: "leadingText",
+        placeholder: "Enter your site address",
+        leadingTextValue: "https",
+    },
+};
+
+export const TrailingDropdown: Story = {
+    args: {
+        size: "md",
+        type: "number",
+        label: "Price",
+        inputType: "trailingDropdown",
+        required: false,
+        placeholder: "Enter your product price",
+        helpIcon: true,
+        trailingDropdownDefault: { title: "usd", value: 1, icon: "$" },
+        trailingDropdownOptions: [
+            { title: "usd", value: 1, icon: "$" },
+            { title: "pound", value: 2, icon: "£" },
+            { title: "euro", value: 3, icon: "€" },
+        ],
+        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",
+        },
+    },
+};
+
+export const CustomLabel: Story = {
+    args: {
+        inputType: "iconLeading",
+        icon: Email,
+        label: "Email",
+        labelClass: "text-blue-600",
+        labelStarClass: "text-red-500",
+    },
+};
+
+export const Shaba: Story = {
+    args: {
+        label: "شماره شبا",
+        inputType: "shaba",
+        type: "text",
+        placeholder: "Enter شماره شبا",
+        shabaLabelSize: "lg",
+    },
+};
+
+export const ShabaSmall: Story = {
+    args: {
+        label: "شماره شبا (Small)",
+        inputType: "shaba",
+        type: "text",
+        placeholder: "Enter شماره شبا",
+        shabaLabelSize: "sm",
+    },
+};
+
+export const ShabaMedium: Story = {
+    args: {
+        label: "شماره شبا (Medium)",
+        inputType: "shaba",
+        type: "text",
+        placeholder: "Enter شماره شبا",
+        shabaLabelSize: "md",
+    },
+};
+
+export const ShabaLarge: Story = {
+    args: {
+        label: "شماره شبا (Large)",
+        inputType: "shaba",
+        type: "text",
+        placeholder: "Enter شماره شبا",
+        shabaLabelSize: "lg",
+    },
+};
+
+export const ShabaXLarge: Story = {
+    args: {
+        label: "شماره شبا (XLarge)",
+        inputType: "shaba",
+        type: "text",
+        placeholder: "Enter شماره شبا",
+        shabaLabelSize: "xl",
+    },
+};
+
+export const InputAutoFocus: Story = {
+    args: {
+        label: "ایمیل",
+        type: "email",
+        placeholder: "آدرس ایمیل را وارد کنید",
+        autoFocus: true
+    },
+};

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

@@ -0,0 +1,79 @@
+import { cva } from "class-variance-authority";
+
+const baseStyles =
+  "rounded-md px-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";
+
+const leadingTextValueStyles =
+  "h-full absolute text-sm text-rfg-tertiary-600 ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 border-e pe-2" +
+  " w-15 truncate text-center";
+
+const trailingButton =
+  "flex items-center gap-1 h-full absolute text-sm text-rbutton-secondary-fg cursor-pointer" +
+  " ltr:right-3 rtl:left-3 top-1/2 -translate-y-1/2 border-s ps-2";
+
+const trailingShabaLabelBase =
+  "flex items-center h-full absolute text-rfg-tertiary-600" +
+  " ltr:right-0 rtl:left-0 top-1/2 -translate-y-1/2 border-s";
+
+const trailingShabaLabelSizes = {
+  sm: "text-xs ps-2 pe-2",
+  md: "text-sm ps-5 pe-5",
+  lg: "text-base ps-8 pe-8",
+  xl: "text-base ps-11 pe-11",
+};
+
+const sizeStyle = {
+  sm: "h-9.5 py-2.5",
+  md: "h-10.5 pt-3 pb-3",
+};
+
+const destructiveStyles = "!border-2 !border-rborder-error focus:!outline-0";
+
+const disableStyles = "bg-rbg-disabled-subtle border-rborder-disabled";
+
+const iconStyles = "ltr:right-2 rtl:left-2";
+
+const iconTrailingButtonStyles = "ltr:right-20 rtl:left-20";
+
+const iconTrailingDropdownStyles = "ltr:right-20 rtl:left-20";
+
+const iconShabaStyles = "ltr:right-12 rtl:left-12";
+
+const typeStyle = {
+  default: "pe-8",
+  iconLeading: "ps-10",
+  leadingDropdown: "pe-8",
+  trailingDropdown: "pe-8 ps-6",
+  leadingText: "pe-8 ps-20",
+  trailingButton: "pe-8",
+  shaba: "pe-12",
+};
+
+const inputVariants = cva(baseStyles, {
+  variants: {
+    size: sizeStyle,
+    inputType: typeStyle,
+  },
+  defaultVariants: {
+    size: "sm",
+    inputType: "default",
+  },
+});
+
+export {
+  baseStyles,
+  destructiveStyles,
+  disableStyles,
+  iconStyles,
+  iconTrailingButtonStyles,
+  iconTrailingDropdownStyles,
+  iconShabaStyles,
+  inputVariants,
+  leadingTextValueStyles,
+  sizeStyle,
+  trailingButton,
+  trailingShabaLabelBase,
+  trailingShabaLabelSizes,
+  typeStyle,
+};

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

@@ -0,0 +1,146 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Input } from ".";
+import type { inputProps } from "./_.types";
+
+// Mocking clipboard API globally
+Object.assign(navigator, {
+    clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+    },
+});
+
+const DummyIcon = () => <svg data-testid="dummy-icon" />;
+
+const createInputProps = (overrides: Partial<inputProps> = {}): inputProps => ({
+    label: "Email",
+    id: "email-input",
+    size: "sm",
+    type: "text",
+    inputType: "trailingButton",
+    destructive: false,
+    required: true,
+    hintText: "This is a hint text to help user.",
+    placeholder: "Enter your email",
+    helpIcon: true,
+    onChange: vi.fn(),
+    value: "test@example.com",
+    trailingDropdownOptions: [{ title: "Option 1", value: 1, icon: "icon-1" }],
+    trailingDropdownDefault: { title: "Select", value: -1, icon: "" },
+    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("Input Component", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+        vi.runOnlyPendingTimers();
+        vi.useRealTimers();
+        vi.resetAllMocks();
+    });
+
+    it("renders the input with label and placeholder", () => {
+        render(<Input {...createInputProps()} />);
+        const input = screen.getByRole("textbox");
+        expect(input).toBeInTheDocument();
+        expect(screen.getByText("Email")).toBeInTheDocument();
+    });
+
+    it("calls onChange when value changes", () => {
+        const onChange = vi.fn();
+        render(<Input {...createInputProps({ onChange })} />);
+        const input = screen.getByRole("textbox") as HTMLInputElement;
+        fireEvent.change(input, { target: { value: "changed@example.com" } });
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders as disabled when 'disabled' prop is true", () => {
+        render(<Input {...createInputProps({ disabled: true })} />);
+        const input = screen.getByRole("textbox");
+        expect(input).toBeDisabled();
+    });
+
+    it("renders trailing button when inputType is 'trailingButton'", () => {
+        render(<Input {...createInputProps({ inputType: "trailingButton" })} />);
+        const trailingButton = screen.getByLabelText("copyButton");
+        expect(trailingButton).toBeInTheDocument();
+    });
+
+    it("copies text to clipboard when trailing button is clicked", async () => {
+        render(<Input {...createInputProps({ inputType: "trailingButton" })} />);
+        const copyButton = screen.getByLabelText("copyButton");
+        fireEvent.click(copyButton);
+
+        expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1);
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(expect.any(String));
+    });
+
+    // it("handles trailing dropdown selection", () => {
+    //     render(<Input {...createInputProps({ inputType: "trailingDropdown" })} />);
+    //     const selectButton = screen.getByRole("combobox");
+    //     fireEvent.click(selectButton);
+    //     const option = screen.getByText("Option 1");
+    //     fireEvent.click(option);
+    //     expect(screen.getByText("Option 1")).toBeInTheDocument();
+    // });
+
+    it("renders destructive state with destructive text", () => {
+        render(<Input {...createInputProps({ 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(<Input {...createInputProps({ destructive: false })} />);
+        const destructiveText = screen.queryByText("Destructive action");
+        expect(destructiveText).not.toBeInTheDocument();
+    });
+
+    it("renders correct styles when destructive state is true", () => {
+        render(<Input {...createInputProps({ destructive: true, inputType: "default" })} />);  // Ensure inputType is not "tags"
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveClass("bg-rbg-disabled-subtle");
+    });
+
+    it("renders correct icon in leadingText state", () => {
+        render(<Input {...createInputProps({ inputType: "leadingText", leadingTextValue: "Text" })} />);
+        const leadingText = screen.getByText("Text");
+        expect(leadingText).toBeInTheDocument();
+    });
+
+    it("renders icon when inputType is 'iconLeading' and icon is provided", () => {
+        render(<Input {...createInputProps({ inputType: "iconLeading", icon: DummyIcon })} />);
+        const iconWrapper = screen.getByLabelText("iconLeading");
+        const icon = screen.getByTestId("dummy-icon");
+        expect(iconWrapper).toBeInTheDocument();
+        expect(icon).toBeInTheDocument();
+    });
+
+    it("renders leading text value with appropriate styles for non-destructive input", () => {
+        render(<Input {...createInputProps({ inputType: "leadingText", leadingTextValue: "USD", destructive: false })} />);
+        const leadingText = screen.getByLabelText("leadingText");
+
+        expect(leadingText).toBeInTheDocument();
+        expect(leadingText).toHaveClass("border-rborder-primary");
+        expect(leadingText).toHaveClass("pt-2"); // size = sm
+    });
+
+    it("renders leading text value with error style when destructive is true", () => {
+        render(<Input {...createInputProps({ inputType: "leadingText", leadingTextValue: "USD", destructive: true })} />);
+        const leadingText = screen.getByLabelText("leadingText");
+
+        expect(leadingText).toBeInTheDocument();
+        expect(leadingText).toHaveClass("border-rborder-error");
+    });
+
+});

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

@@ -0,0 +1,66 @@
+import { IconPropsType } from "@/icons/icons.type";
+import React, { ComponentType } from "react";
+import { Position } from "../Tooltip/_.types";
+
+export type optionType = { title: string; value: number };
+export type customOptionType = { title: string; value: number; icon: string };
+
+export type inputProps = {
+  className?: string;
+  tooltipProps?: {
+    text: string;
+    description?: string;
+    position?: Position;
+    dir?: "rtl" | "ltr" | undefined;
+    descriptionClassName?: string;
+  };
+  size?: "sm" | "md";
+  type?: "text" | "number" | "password" | "email" | "url" | "tel";
+  inputType?:
+  | "default"
+  | "iconLeading"
+  | "leadingDropdown"
+  | "trailingDropdown"
+  | "leadingText"
+  | "trailingButton"
+  | "shaba";
+  icon?: ComponentType<IconPropsType>;
+  leadingTextValue?: string;
+  destructive?: boolean;
+  destructiveText?: string;
+  dir?: "ltr" | "rtl";
+  label?: string;
+  required?: boolean;
+  hintText?: string;
+  helpIcon?: boolean;
+  iconSwap?: boolean;
+  disabled?: boolean;
+  id?: string;
+  placeholder?: string;
+  trailingButtonText?: string;
+  name?: string;
+  trailingDropdownOptions?: customOptionType[];
+  trailingDropdownDefault?: customOptionType;
+  tagOnChange?: ((tags: string[]) => void) | (() => void);
+  onChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) | (() => void);
+  value?: string;
+  copyHandler?: () => void;
+  labelClass?: string;
+  labelStarClass?: string;
+  shabaLabelSize?: "sm" | "md" | "lg" | "xl";
+  autoFocus?: boolean
+};
+
+export type inputLabelProps = {
+  id?: string;
+  label?: string;
+  required?: boolean;
+  labelClass?: string;
+  labelStarClass?: string;
+};
+
+export type inputSelectProps = {
+  handleSelectChange?: (value: string) => void;
+  trailingDropdownOptions?: customOptionType[];
+  trailingDropdownDefault?: customOptionType;
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,231 @@
+import {
+  destructiveStyles,
+  disableStyles,
+  iconShabaStyles,
+  iconStyles,
+  iconTrailingButtonStyles,
+  iconTrailingDropdownStyles,
+  inputVariants,
+  leadingTextValueStyles,
+  trailingButton,
+  trailingShabaLabelBase,
+  trailingShabaLabelSizes,
+} from "@/components/Input/_.style";
+import { customOptionType, inputProps } from "@/components/Input/_.types";
+import { InputLabel } from "@/components/ui/input-component/input-label";
+import CircleQuestionMark from "@/icons/general/circle-question-mark";
+import { IconPropsType } from "@/icons/icons.type";
+import { cn } from "@/lib/utils";
+import { Copy, Eye, EyeOff } from "lucide-react";
+import React, { useState } from "react";
+import { Button } from "../Button";
+import { Select } from "../Select";
+import { TooltipWrapper } from "../Tooltip";
+
+export const Input = ({
+  size = "sm",
+  type = "text",
+  inputType = "default",
+  disabled = false,
+  id,
+  label,
+  required = false,
+  destructive = false,
+  destructiveText,
+  hintText,
+  placeholder,
+  helpIcon = false,
+  icon,
+  leadingTextValue,
+  className,
+  trailingDropdownOptions,
+  trailingDropdownDefault,
+  onChange,
+  value,
+  tooltipProps,
+  trailingButtonText,
+  name,
+  labelClass,
+  labelStarClass,
+  shabaLabelSize = "lg",
+  autoFocus = false,
+  ...props
+}: Readonly<inputProps>) => {
+  const Icon: React.ComponentType<IconPropsType> | undefined = icon;
+
+  const [selectedItem, setSelectedItem] = useState<customOptionType>();
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleSelectChange = (info: customOptionType) => {
+    const item = trailingDropdownOptions?.find(
+      (elem) => elem?.value === info?.value
+    );
+    setSelectedItem(item ?? info);
+  };
+
+  const copyHandler = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  return (
+    <div className="flex flex-col gap-1 items-start">
+      <InputLabel
+        id={id}
+        label={label}
+        required={required}
+        labelClass={labelClass}
+        labelStarClass={labelStarClass}
+      />
+      <div className="relative w-full">
+        {Icon && inputType == "iconLeading" && (
+          <div
+            aria-label="iconLeading"
+            className="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2"
+          >
+            <Icon />
+          </div>
+        )}
+        {leadingTextValue && inputType == "leadingText" && (
+          <div
+            aria-label="leadingText"
+            className={`${leadingTextValueStyles} ${size === "sm" ? "pt-2" : "pt-2.5"
+              } 
+                        ${destructive === true
+                ? "border-rborder-error"
+                : "border-rborder-primary"
+              }`}
+          >
+            {leadingTextValue}
+          </div>
+        )}
+        {inputType == "trailingDropdown" && (
+          <p className="absolute ltr:left-2 rtl:right-2 top-1/2 -translate-y-1/2">
+            {selectedItem ? selectedItem?.icon : trailingDropdownDefault?.icon}
+          </p>
+        )}
+        <input
+          value={value}
+          name={name}
+          onChange={onChange}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          className={cn(
+            inputVariants({ size, inputType }),
+            className,
+            destructive && "bg-rbg-disabled-subtle",
+            destructive && destructiveStyles,
+            disabled && disableStyles
+          )}
+          type={type === "password" && showPassword ? "text" : type}
+          id={id}
+          disabled={disabled}
+          {...props}
+        />
+
+        {type === "password" && (
+          <div
+            className={
+              "absolute top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2 w-fit h-5 flex items-center justify-center"
+            }
+          >
+            <Button
+              type="button"
+              variant="linkGray"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? (
+                <EyeOff size={18} className="text-rbutton-tertiary-fg" />
+              ) : (
+                <Eye size={18} className="text-rbutton-tertiary-fg" />
+              )}
+            </Button>
+          </div>
+        )}
+
+        {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={`w-fit absolute top-1/2 -translate-y-1/2 
+                            ${inputType == "trailingButton"
+                  ? iconTrailingButtonStyles
+                  : inputType == "trailingDropdown"
+                    ? iconTrailingDropdownStyles
+                    : inputType == "shaba"
+                      ? iconShabaStyles
+                      : iconStyles
+                }`}
+            >
+              <CircleQuestionMark />
+            </div>
+          </TooltipWrapper>
+        )}
+        {/* {destructive && type !== "password" && (
+          <div
+            className={`w-fit absolute top-1/2 -translate-y-1/2 
+                        ${inputType == "trailingButton"
+                ? iconTrailingButtonStyles
+                : inputType == "trailingDropdown"
+                  ? iconTrailingDropdownStyles
+                  : iconStyles
+              }`}
+          >
+            <AttentionMark />
+          </div>
+        )} */}
+        {inputType == "trailingButton" && (
+          <button
+            aria-label="copyButton"
+            onClick={() => copyHandler(String(value))}
+            className={`${trailingButton} ${destructive === true
+              ? "border-rborder-error"
+              : "border-rborder-primary"
+              }`}
+          >
+            <Copy size={20} /> {trailingButtonText}
+          </button>
+        )}
+        {inputType == "trailingDropdown" && (
+          <Select
+            onChange={handleSelectChange}
+            options={trailingDropdownOptions ?? []}
+            selectedValueLabel={trailingDropdownDefault?.title ?? "-"}
+            config={{
+              canSelectZero: true,
+              name: "trailingDropdown",
+            }}
+            className="w-fit absolute rtl:left-0 ltr:right-0 top-0"
+          />
+        )}
+        {inputType == "shaba" && (
+          <div
+            aria-label="shabaLabel"
+            className={cn(
+              trailingShabaLabelBase,
+              trailingShabaLabelSizes[shabaLabelSize],
+              destructive === true
+                ? "border-rborder-error"
+                : "border-rborder-primary"
+            )}
+          >
+            IR
+          </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>
+  );
+};