@baodev/mini-app-component 1.0.1

package/src/components/OTPInput.tsx

@@ -0,0 +1,178 @@
+import { useRef, useState, KeyboardEvent, ClipboardEvent } from "react";
+
+// ================================
+// Types
+// ================================
+interface OTPInputProps {
+  length?: number;
+  onComplete?: (otp: string) => void;
+  onChange?: (otp: string) => void;
+  label?: string;
+  hint?: string;
+  error?: string;
+  disabled?: boolean;
+}
+
+export function OTPInput({
+  length = 6,
+  onComplete,
+  onChange,
+  label,
+  hint,
+  error,
+  disabled = false,
+}: OTPInputProps) {
+  const [values, setValues] = useState<string[]>(Array(length).fill(""));
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  function updateValues(newValues: string[]) {
+    setValues(newValues);
+    const otp = newValues.join("");
+    onChange?.(otp);
+    if (otp.length === length && newValues.every(Boolean)) {
+      onComplete?.(otp);
+    }
+  }
+
+  function handleChange(index: number, val: string) {
+    // Chỉ nhận số
+    const digit = val.replace(/\D/g, "").slice(-1);
+    const newValues = [...values];
+    newValues[index] = digit;
+    updateValues(newValues);
+
+    // Auto focus next
+    if (digit && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  }
+
+  function handleKeyDown(index: number, e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Backspace") {
+      if (values[index]) {
+        const newValues = [...values];
+        newValues[index] = "";
+        updateValues(newValues);
+      } else if (index > 0) {
+        inputRefs.current[index - 1]?.focus();
+        const newValues = [...values];
+        newValues[index - 1] = "";
+        updateValues(newValues);
+      }
+    }
+
+    if (e.key === "ArrowLeft" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+
+    if (e.key === "ArrowRight" && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent<HTMLInputElement>) {
+    e.preventDefault();
+    const pasted = e.clipboardData
+      .getData("text")
+      .replace(/\D/g, "")
+      .slice(0, length);
+    if (!pasted) return;
+
+    const newValues = Array(length).fill("");
+    pasted.split("").forEach((char, i) => {
+      newValues[i] = char;
+    });
+    updateValues(newValues);
+
+    // Focus last filled or next empty
+    const lastIndex = Math.min(pasted.length, length - 1);
+    inputRefs.current[lastIndex]?.focus();
+  }
+
+  function handleFocus(index: number) {
+    setActiveIndex(index);
+    // Select content khi focus
+    inputRefs.current[index]?.select();
+  }
+
+  function handleBlur() {
+    setActiveIndex(-1);
+  }
+
+  const isComplete = values.every(Boolean);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Label */}
+      {label && (
+        <label className="text-sm font-medium text-gray-700">{label}</label>
+      )}
+
+      {/* OTP inputs */}
+      <div className="flex gap-3 justify-center">
+        {Array(length)
+          .fill(null)
+          .map((_, index) => (
+            <input
+              key={index}
+              ref={(el) => {
+                inputRefs.current[index] = el;
+              }}
+              type="text"
+              inputMode="numeric"
+              maxLength={1}
+              value={values[index]}
+              disabled={disabled}
+              onChange={(e) => handleChange(index, e.target.value)}
+              onKeyDown={(e) => handleKeyDown(index, e)}
+              onPaste={handlePaste}
+              onFocus={() => handleFocus(index)}
+              onBlur={handleBlur}
+              className={[
+                "w-12 h-14 text-center text-xl font-bold rounded-2xl border-2 outline-none",
+                "transition-all duration-150 select-none",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                error
+                  ? "border-red-400 bg-red-50 text-red-600"
+                  : activeIndex === index
+                    ? "border-indigo-500 bg-indigo-50 text-indigo-700 scale-105 shadow-md shadow-indigo-100"
+                    : values[index]
+                      ? "border-indigo-300 bg-white text-gray-900"
+                      : "border-gray-200 bg-gray-50 text-gray-900",
+              ].join(" ")}
+            />
+          ))}
+      </div>
+
+      {/* Success state */}
+      {isComplete && !error && (
+        <div className="flex items-center justify-center gap-1.5">
+          <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
+            <svg
+              width="10"
+              height="10"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="3"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          </div>
+          <span className="text-sm text-green-600 font-medium">
+            Xác nhận thành công
+          </span>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && <p className="text-sm text-red-500 text-center">{error}</p>}
+
+      {/* Hint */}
+      {hint && !error && (
+        <p className="text-xs text-gray-400 text-center">{hint}</p>
+      )}
+    </div>
+  );
+}

package/src/components/SearchBar.tsx

@@ -0,0 +1,141 @@
+import { useRef, useState, InputHTMLAttributes, KeyboardEvent } from "react";
+
+// ================================
+// Types
+// ================================
+interface SearchBarProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> {
+  value?: string;
+  onChange?: (val: string) => void;
+  onSearch?: (val: string) => void;
+  onClear?: () => void;
+  onCancel?: () => void;
+  showCancel?: boolean;
+  cancelText?: string;
+}
+
+export function SearchBar({
+  value,
+  onChange,
+  onSearch,
+  onClear,
+  onCancel,
+  showCancel = false,
+  cancelText = "Hủy",
+  placeholder = "Tìm kiếm...",
+  className = "",
+  disabled = false,
+  ...props
+}: SearchBarProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Fallback internal state nếu không truyền value từ ngoài vào
+  const [internalValue, setInternalValue] = useState("");
+  const displayValue = value !== undefined ? value : internalValue;
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const val = e.target.value;
+    setInternalValue(val);
+    onChange?.(val);
+  }
+
+  function handleClear() {
+    setInternalValue("");
+    onChange?.("");
+    onClear?.();
+    // Giữ focus lại vào input sau khi clear để bàn phím không bị thụt xuống
+    inputRef.current?.focus();
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      // Ẩn bàn phím khi submit search trên mobile
+      inputRef.current?.blur();
+      onSearch?.(displayValue);
+    }
+  }
+
+  const isShowCancel = showCancel || (isFocused && onCancel);
+
+  return (
+    <div className={`flex items-center gap-3 w-full ${className}`}>
+      {/* Khung Search */}
+      <div
+        className={[
+          "flex-1 flex items-center h-10 px-3 rounded-xl transition-colors duration-200",
+          disabled
+            ? "bg-gray-100 opacity-60"
+            : "bg-gray-100 focus-within:bg-gray-200/60",
+        ].join(" ")}
+      >
+        {/* Icon Search */}
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          className="text-gray-400 flex-shrink-0"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+
+        {/* Input */}
+        <input
+          ref={inputRef}
+          type="search"
+          enterKeyHint="search"
+          value={displayValue}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={[
+            "flex-1 w-full bg-transparent border-none outline-none px-2 text-[15px] text-gray-900 placeholder:text-gray-500",
+            // Ẩn nút X mặc định cực xấu của Webkit
+            "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
+          ].join(" ")}
+          {...props}
+        />
+
+        {/* Nút Clear (x) */}
+        {displayValue.length > 0 && !disabled && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="w-5 h-5 flex items-center justify-center rounded-full bg-gray-300 hover:bg-gray-400 active:bg-gray-500 text-white transition-colors flex-shrink-0"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Nút Cancel (Thường dùng kiểu iOS) */}
+      {isShowCancel && (
+        <button
+          onClick={onCancel}
+          className="text-[15px] font-medium text-indigo-600 hover:text-indigo-700 active:text-indigo-800 transition-colors animate-in slide-in-from-right-4 fade-in duration-200"
+        >
+          {cancelText}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/Tabs.tsx

@@ -0,0 +1,121 @@
+import { ReactNode, useState } from "react";
+
+// ================================
+// Types
+// ================================
+interface TabItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  badge?: number;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  items: TabItem[];
+  defaultActive?: string;
+  onChange?: (id: string) => void;
+  variant?: "line" | "pill" | "card";
+  children?: (activeId: string) => ReactNode;
+}
+
+// ================================
+// Tabs
+// ================================
+export function Tabs({
+  items,
+  defaultActive,
+  onChange,
+  variant = "line",
+  children,
+}: TabsProps) {
+  const [activeId, setActiveId] = useState(defaultActive ?? items[0]?.id);
+
+  function handleChange(id: string) {
+    setActiveId(id);
+    onChange?.(id);
+  }
+
+  return (
+    <div className="flex flex-col w-full">
+      {/* Tab bar */}
+      <div
+        className={[
+          "flex w-full",
+          variant === "line" ? "border-b border-gray-200" : "",
+          variant === "pill" ? "bg-gray-100 rounded-xl p-1 gap-1" : "",
+          variant === "card" ? "gap-2" : "",
+        ].join(" ")}
+      >
+        {items.map((item) => (
+          <TabButton
+            key={item.id}
+            item={item}
+            isActive={activeId === item.id}
+            variant={variant}
+            onClick={() => !item.disabled && handleChange(item.id)}
+          />
+        ))}
+      </div>
+
+      {/* Content */}
+      {children && <div className="flex-1 mt-4">{children(activeId)}</div>}
+    </div>
+  );
+}
+
+// ================================
+// Tab Button
+// ================================
+interface TabButtonProps {
+  item: TabItem;
+  isActive: boolean;
+  variant: "line" | "pill" | "card";
+  onClick: () => void;
+}
+
+function TabButton({ item, isActive, variant, onClick }: TabButtonProps) {
+  const base =
+    "flex items-center justify-center gap-1.5 transition-all duration-200 select-none relative";
+
+  const styles = {
+    line: [
+      base,
+      "flex-1 py-3 text-sm font-medium border-b-2 -mb-px",
+      isActive
+        ? "border-indigo-600 text-indigo-600"
+        : "border-transparent text-gray-500 hover:text-gray-700",
+      item.disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer",
+    ].join(" "),
+
+    pill: [
+      base,
+      "flex-1 py-2 px-3 text-sm font-medium rounded-lg",
+      isActive
+        ? "bg-white text-indigo-600 shadow-sm"
+        : "text-gray-500 hover:text-gray-700",
+      item.disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer",
+    ].join(" "),
+
+    card: [
+      base,
+      "flex-1 py-3 px-4 text-sm font-medium rounded-xl border-2",
+      isActive
+        ? "border-indigo-600 bg-indigo-50 text-indigo-600"
+        : "border-gray-200 bg-white text-gray-500 hover:border-gray-300",
+      item.disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer",
+    ].join(" "),
+  };
+
+  return (
+    <button className={styles[variant]} onClick={onClick}>
+      {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+      <span>{item.label}</span>
+      {item.badge !== undefined && item.badge > 0 && (
+        <span className="ml-1 min-w-[18px] h-[18px] flex items-center justify-center bg-red-500 text-white text-xs font-bold rounded-full px-1">
+          {item.badge > 99 ? "99+" : item.badge}
+        </span>
+      )}
+    </button>
+  );
+}