@baodev/mini-app-component 1.0.1

package/src/components/DatePicker.tsx

@@ -0,0 +1,334 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { BottomSheet } from "./BottomSheet";
+
+// ================================
+// Types
+// ================================
+interface DatePickerProps {
+  value?: Date;
+  onChange?: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  locale?: "vi" | "en";
+  placeholder?: string;
+  label?: string;
+}
+
+interface WheelColumnProps {
+  items: { label: string; value: number }[];
+  selectedIndex: number;
+  onChange: (index: number) => void;
+  align?: "left" | "right" | "center";
+}
+
+// ================================
+// Wheel Column (Giao diện 3D chuẩn iOS)
+// ================================
+function WheelColumn({
+  items,
+  selectedIndex,
+  onChange,
+  align = "center",
+}: WheelColumnProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const ITEM_HEIGHT = 44;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTop = selectedIndex * ITEM_HEIGHT;
+  }, [selectedIndex, items]);
+
+  // const handleScroll = useCallback(() => {
+  //   const container = containerRef.current;
+  //   if (!container) return;
+  //   const index = Math.round(container.scrollTop / ITEM_HEIGHT);
+  //   const clamped = Math.max(0, Math.min(index, items.length - 1));
+  //   if (clamped !== selectedIndex) onChange(clamped);
+  // }, [items.length, selectedIndex, onChange]);
+
+  const scrollTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleScroll = useCallback(() => {
+  // Debounce — chờ scroll dừng hẳn mới xử lý
+  if (scrollTimer.current) clearTimeout(scrollTimer.current)
+  scrollTimer.current = setTimeout(() => {
+    const container = containerRef.current
+    if (!container) return
+    const index = Math.round(container.scrollTop / ITEM_HEIGHT)
+    const clamped = Math.max(0, Math.min(index, items.length - 1))
+
+    // Snap về đúng vị trí
+    container.scrollTo({
+      top: clamped * ITEM_HEIGHT,
+      behavior: 'smooth',
+    })
+
+    if (clamped !== selectedIndex) onChange(clamped)
+  }, 100) // chờ 100ms sau khi scroll dừng
+}, [items.length, selectedIndex, onChange])
+
+  const alignStyles = {
+    left: "justify-start pl-4",
+    right: "justify-end pr-4",
+    center: "justify-center",
+  };
+
+  return (
+    <div
+      className="relative flex-1 h-full z-10"
+      onTouchStart={(e) => e.stopPropagation()}
+      onTouchMove={(e) => e.stopPropagation()}
+      onTouchEnd={(e) => e.stopPropagation()}
+    >
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="h-full w-full overflow-y-scroll snap-y snap-mandatory overscroll-contain [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+        style={{ touchAction: "pan-y", WebkitOverflowScrolling: 'auto' }}
+      >
+        <div style={{ height: ITEM_HEIGHT * 2 }} />
+        {items.map((item, i) => {
+          const distance = Math.abs(i - selectedIndex);
+          const isSelected = distance === 0;
+          const opacity = isSelected ? 1 : Math.max(0.25, 1 - distance * 0.3);
+          const scale = isSelected ? 1 : Math.max(0.85, 1 - distance * 0.08);
+
+          return (
+            <div
+              key={item.value}
+              className={`flex items-center snap-center cursor-pointer select-none transition-all duration-150 ${alignStyles[align]}`}
+              style={{
+                height: ITEM_HEIGHT,
+                opacity,
+                transform: `scale(${scale})`,
+                transformOrigin:
+                  align === "right"
+                    ? "right center"
+                    : align === "left"
+                      ? "left center"
+                      : "center center",
+              }}
+              onClick={() => {
+                onChange(i);
+                containerRef.current!.scrollTo({
+                  top: i * ITEM_HEIGHT,
+                  behavior: "smooth",
+                });
+              }}
+            >
+              <span
+                className={`text-[19px] ${isSelected ? "text-gray-900 font-semibold" : "text-gray-500 font-medium"}`}
+              >
+                {item.label}
+              </span>
+            </div>
+          );
+        })}
+        <div style={{ height: ITEM_HEIGHT * 2 }} />
+      </div>
+    </div>
+  );
+}
+
+// ================================
+// Helpers
+// ================================
+const VI_MONTHS = Array.from({ length: 12 }, (_, i) => `Tháng ${i + 1}`);
+const EN_MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function getDaysInMonth(month: number, year: number) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function generateDays(month: number, year: number) {
+  return Array.from({ length: getDaysInMonth(month, year) }, (_, i) => ({
+    label: String(i + 1).padStart(2, "0"),
+    value: i + 1,
+  }));
+}
+
+function generateMonths(locale: "vi" | "en") {
+  return (locale === "vi" ? VI_MONTHS : EN_MONTHS).map((name, i) => ({
+    label: locale === "vi" ? name : name.slice(0, 3),
+    value: i,
+  }));
+}
+
+function generateYears(minDate: Date, maxDate: Date) {
+  const years = [];
+  for (let y = minDate.getFullYear(); y <= maxDate.getFullYear(); y++) {
+    years.push({ label: String(y), value: y });
+  }
+  return years;
+}
+
+function formatDate(date: Date, locale: "vi" | "en") {
+  if (locale === "vi") {
+    return `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
+  }
+  return `${EN_MONTHS[date.getMonth()].slice(0, 3)} ${String(date.getDate()).padStart(2, "0")}, ${date.getFullYear()}`;
+}
+
+// ================================
+// DatePicker Component
+// ================================
+export function DatePicker({
+  value,
+  onChange,
+  minDate = new Date(1990, 0, 1),
+  maxDate = new Date(2035, 11, 31),
+  locale = "vi",
+  placeholder,
+  label,
+}: DatePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const today = value ?? new Date();
+
+  const years = generateYears(minDate, maxDate);
+  const months = generateMonths(locale);
+
+  const [yearIndex, setYearIndex] = useState(
+    Math.max(
+      0,
+      years.findIndex((y) => y.value === today.getFullYear()),
+    ),
+  );
+  const [monthIndex, setMonthIndex] = useState(today.getMonth());
+  const [dayIndex, setDayIndex] = useState(today.getDate() - 1);
+
+  const selectedYear = years[yearIndex]?.value ?? today.getFullYear();
+  const days = generateDays(monthIndex, selectedYear);
+
+  // Ép dayIndex về khoảng hợp lệ khi user đổi Tháng/Năm đột ngột
+  useEffect(() => {
+    const maxDay = getDaysInMonth(monthIndex, selectedYear);
+    if (dayIndex >= maxDay) {
+      setDayIndex(maxDay - 1);
+    }
+  }, [monthIndex, selectedYear, dayIndex]);
+
+  const selectedDate = new Date(
+    selectedYear,
+    monthIndex,
+    Math.min(dayIndex + 1, getDaysInMonth(monthIndex, selectedYear)),
+  );
+
+  function handleConfirm() {
+    onChange?.(selectedDate);
+    setIsOpen(false);
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-1.5">
+        {label && (
+          <label className="text-sm font-medium text-gray-700">{label}</label>
+        )}
+        <button
+          onClick={() => setIsOpen(true)}
+          className={[
+            "flex items-center justify-between w-full px-4 py-3 rounded-xl border transition-all bg-white text-left",
+            value
+              ? "border-indigo-300 text-gray-900"
+              : "border-gray-200 text-gray-400",
+            "hover:border-indigo-400 focus:outline-none focus:border-indigo-500",
+          ].join(" ")}
+        >
+          <span className="text-sm">
+            {value
+              ? formatDate(value, locale)
+              : (placeholder ??
+                (locale === "vi" ? "Chọn ngày" : "Select date"))}
+          </span>
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="text-gray-400 flex-shrink-0"
+          >
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <line x1="16" y1="2" x2="16" y2="6" />
+            <line x1="8" y1="2" x2="8" y2="6" />
+            <line x1="3" y1="10" x2="21" y2="10" />
+          </svg>
+        </button>
+      </div>
+
+      <BottomSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={locale === "vi" ? "Chọn ngày" : "Select date"}
+      >
+        <div className="flex flex-col gap-5 pt-2">
+          {/* Toàn bộ khối Picker */}
+          <div className="relative h-[220px] mx-4 rounded-xl overflow-hidden bg-white">
+            {/* Thanh Highlight đè lên 3 cột */}
+            <div className="absolute top-1/2 left-0 right-0 -translate-y-1/2 h-[44px] bg-gray-100/80 rounded-lg pointer-events-none" />
+
+            <div className="absolute inset-0 flex items-center justify-center">
+              {/* Cột Ngày */}
+              <WheelColumn
+                items={days}
+                selectedIndex={Math.min(dayIndex, days.length - 1)}
+                onChange={setDayIndex}
+                align="right"
+              />
+
+              {/* Cột Tháng */}
+              <WheelColumn
+                items={months}
+                selectedIndex={monthIndex}
+                onChange={setMonthIndex}
+                align="center"
+              />
+
+              {/* Cột Năm */}
+              <WheelColumn
+                items={years}
+                selectedIndex={yearIndex}
+                onChange={setYearIndex}
+                align="left"
+              />
+            </div>
+
+            {/* Các lớp Fade che mờ nội dung trên/dưới */}
+            <div className="absolute top-0 left-0 right-0 h-[88px] bg-gradient-to-b from-white via-white/80 to-transparent pointer-events-none z-20" />
+            <div className="absolute bottom-0 left-0 right-0 h-[88px] bg-gradient-to-t from-white via-white/80 to-transparent pointer-events-none z-20" />
+          </div>
+
+          {/* Hộp Preview */}
+          <div className="mx-4 py-3 bg-indigo-50/70 rounded-xl text-center">
+            <span className="text-base font-bold text-indigo-600">
+              {formatDate(selectedDate, locale)}
+            </span>
+          </div>
+
+          {/* Nút Xác nhận */}
+          <button
+            onClick={handleConfirm}
+            className="mx-4 mb-2 py-4 bg-indigo-600 text-white font-semibold rounded-2xl hover:bg-indigo-700 active:bg-indigo-800 active:scale-95 transition-all text-[17px]"
+          >
+            {locale === "vi" ? "Xong" : "Done"}
+          </button>
+        </div>
+      </BottomSheet>
+    </>
+  );
+}

package/src/components/Drawer.tsx

@@ -0,0 +1,63 @@
+import { ReactNode, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  position?: "left" | "right";
+  children: ReactNode;
+}
+
+export function Drawer({
+  isOpen,
+  onClose,
+  position = "right",
+  children,
+}: DrawerProps) {
+  // Khóa cuộn trang khi mở
+  useEffect(() => {
+    if (isOpen) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  const isRight = position === "right";
+
+  return (
+    // AnimatePresence giữ component sống thêm một chút để chạy hiệu ứng Exit
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex">
+          {/* 1. Lớp Overlay (Nền đen mờ) */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 bg-black/40"
+            onClick={onClose}
+          />
+
+          {/* 2. Panel Nội dung (Trượt ra mượt mà với hiệu ứng Spring) */}
+          <motion.div
+            initial={{ x: isRight ? "100%" : "-100%" }}
+            animate={{ x: 0 }}
+            exit={{ x: isRight ? "100%" : "-100%" }}
+            transition={{
+              type: "spring",
+              damping: 25, // Độ hãm phanh (càng thấp càng nảy)
+              stiffness: 250, // Độ căng của lò xo (càng cao chạy càng nhanh)
+            }}
+            className={`absolute top-0 bottom-0 w-[80vw] max-w-sm bg-white shadow-2xl flex flex-col ${
+              isRight ? "right-0" : "left-0"
+            }`}
+          >
+            {children}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/Header.tsx

@@ -0,0 +1,58 @@
+import { ReactNode } from "react";
+
+interface HeaderProps {
+  title: string;
+  subtitle?: string;
+  leftAction?: ReactNode;
+  rightAction?: ReactNode;
+  onBack?: () => void;
+}
+
+export function Header({
+  title,
+  subtitle,
+  leftAction,
+  rightAction,
+  onBack,
+}: HeaderProps) {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100 sticky top-0 z-10">
+      {/* Left */}
+      <div className="w-10 flex items-center">
+        {leftAction ??
+          (onBack ? (
+            <button
+              onClick={onBack}
+              className="flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-colors"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+          ) : null)}
+      </div>
+
+      {/* Center */}
+      <div className="flex-1 text-center">
+        <h1 className="text-base font-semibold text-gray-900 leading-tight">
+          {title}
+        </h1>
+        {subtitle && <p className="text-xs text-gray-500 mt-0.5">{subtitle}</p>}
+      </div>
+
+      {/* Right */}
+      <div className="w-10 flex items-center justify-end">
+        {rightAction ?? null}
+      </div>
+    </div>
+  );
+}

package/src/components/Modal.tsx

@@ -0,0 +1,127 @@
+import { ReactNode, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+
+// ================================
+// Types
+// ================================
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg" | "full";
+  showCloseButton?: boolean;
+  closeOnBackdrop?: boolean;
+  footer?: ReactNode;
+}
+
+const sizeStyles: Record<string, string> = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  full: "max-w-full mx-4",
+};
+
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  showCloseButton = true,
+  closeOnBackdrop = true,
+  footer,
+}: ModalProps) {
+  // Lock scroll
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen) onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+
+  // Để an toàn với SSR/Next.js (nếu sau này dùng), kiểm tra document có tồn tại không
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          {/* Backdrop (Lớp mờ đen) */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 bg-black/50"
+            onClick={closeOnBackdrop ? onClose : undefined}
+          />
+
+          {/* Modal box (Khối nội dung chính) */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 16 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 16 }}
+            transition={{
+              type: "spring",
+              damping: 25,
+              stiffness: 350,
+            }}
+            className={`relative bg-white rounded-2xl shadow-2xl w-full flex flex-col ${sizeStyles[size]}`}
+            onClick={(e) => e.stopPropagation()} // Chặn click xuyên xuống backdrop
+          >
+            {/* Header */}
+            {(title || showCloseButton) && (
+              <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 flex-shrink-0">
+                {title && (
+                  <h3 className="text-base font-semibold text-gray-900">
+                    {title}
+                  </h3>
+                )}
+                {showCloseButton && (
+                  <button
+                    onClick={onClose}
+                    className="ml-auto w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            )}
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto px-5 py-4">{children}</div>
+
+            {/* Footer */}
+            {footer && (
+              <div className="flex-shrink-0 px-5 py-4 border-t border-gray-100">
+                {footer}
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    document.body,
+  );
+}