@baodev/mini-app-component 1.0.1

package/src/components/TimePicker.tsx

@@ -0,0 +1,271 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { BottomSheet } from "./BottomSheet";
+
+// ================================
+// Types
+// ================================
+interface TimePickerProps {
+  value?: { hour: number; minute: number };
+  onChange?: (time: { hour: number; minute: number }) => void;
+  minuteStep?: 1 | 5 | 10 | 15 | 30;
+  locale?: "vi" | "en";
+  label?: string;
+  placeholder?: string;
+  minHour?: number;
+  maxHour?: number;
+}
+
+interface WheelColumnProps {
+  items: { label: string; value: number }[];
+  selectedIndex: number;
+  onChange: (index: number) => void;
+  align?: "left" | "right" | "center";
+}
+
+// ================================
+// Wheel Column (Giao diện chuẩn iOS)
+// ================================
+function WheelColumn({
+  items,
+  selectedIndex,
+  onChange,
+  align = "center",
+}: WheelColumnProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const ITEM_HEIGHT = 44; // Chiều cao chuẩn xác để tạo độ khít như iOS
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTop = selectedIndex * ITEM_HEIGHT;
+  }, [selectedIndex]);
+
+  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 alignStyles = {
+    left: "justify-start pl-8",
+    right: "justify-end pr-8",
+    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-none"
+        style={{ touchAction: "pan-y" }}
+      >
+        {/* Khoảng trống để có thể cuộn item đầu/cuối vào giữa */}
+        <div style={{ height: ITEM_HEIGHT * 2 }} />
+
+        {items.map((item, i) => {
+          // Tính toán hiệu ứng 3D giả lập dựa trên khoảng cách tới trung tâm
+          const distance = Math.abs(i - selectedIndex);
+          const isSelected = distance === 0;
+          const opacity = isSelected ? 1 : Math.max(0.3, 1 - distance * 0.25);
+          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={`${isSelected ? "text-gray-900 font-semibold" : "text-gray-600 font-medium"}`}
+                style={{ fontSize: 24 }}
+              >
+                {item.label}
+              </span>
+            </div>
+          );
+        })}
+
+        <div style={{ height: ITEM_HEIGHT * 2 }} />
+      </div>
+    </div>
+  );
+}
+
+// ================================
+// Helpers
+// ================================
+function generateHours(min = 0, max = 23) {
+  return Array.from({ length: max - min + 1 }, (_, i) => ({
+    label: String(min + i).padStart(2, "0"),
+    value: min + i,
+  }));
+}
+
+function generateMinutes(step: number) {
+  const items = [];
+  for (let m = 0; m < 60; m += step) {
+    items.push({ label: String(m).padStart(2, "0"), value: m });
+  }
+  return items;
+}
+
+function formatTime(hour: number, minute: number, locale: "vi" | "en") {
+  if (locale === "en") {
+    const period = hour >= 12 ? "PM" : "AM";
+    const h = hour % 12 || 12;
+    return `${String(h).padStart(2, "0")}:${String(minute).padStart(2, "0")} ${period}`;
+  }
+  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
+
+// ================================
+// TimePicker
+// ================================
+export function TimePicker({
+  value,
+  onChange,
+  minuteStep = 1, // Để step=1 cho giống báo thức thực tế
+  locale = "vi",
+  label,
+  placeholder,
+  minHour = 0,
+  maxHour = 23,
+}: TimePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const hours = generateHours(minHour, maxHour);
+  const minutes = generateMinutes(minuteStep);
+
+  const defaultHour = value?.hour ?? new Date().getHours();
+  const defaultMinute = value?.minute ?? 0;
+
+  const [hourIndex, setHourIndex] = useState(
+    Math.max(
+      0,
+      hours.findIndex((h) => h.value === defaultHour),
+    ),
+  );
+  const [minuteIndex, setMinuteIndex] = useState(
+    Math.max(
+      0,
+      minutes.findIndex((m) => m.value === defaultMinute),
+    ),
+  );
+
+  const selectedHour = hours[hourIndex]?.value ?? defaultHour;
+  const selectedMinute = minutes[minuteIndex]?.value ?? 0;
+
+  function handleConfirm() {
+    onChange?.({ hour: selectedHour, minute: selectedMinute });
+    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
+              ? formatTime(value.hour, value.minute, locale)
+              : (placeholder ?? (locale === "vi" ? "Chọn giờ" : "Select time"))}
+          </span>
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="text-gray-400 shrink-0"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12 6 12 12 16 14" />
+          </svg>
+        </button>
+      </div>
+
+      <BottomSheet
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={locale === "vi" ? "Chọn giờ" : "Select time"}
+      >
+        <div className="flex flex-col gap-6 pt-2">
+          {/* ĐÃ SỬA: Thay h-55 thành h-[220px] hoặc h-56 */}
+          <div className="relative h-[220px] mx-4 rounded-xl overflow-hidden bg-white">
+            <div className="absolute top-1/2 left-0 right-0 -translate-y-1/2 h-11 bg-gray-100/80 rounded-lg pointer-events-none" />
+
+            <div className="absolute inset-0 flex items-center justify-center">
+              <WheelColumn
+                items={hours}
+                selectedIndex={hourIndex}
+                onChange={setHourIndex}
+                align="right"
+              />
+
+              <div className="w-10 flex items-center justify-center pb-1 z-10 select-none pointer-events-none">
+                <span className="text-2xl font-bold text-gray-900 animate-pulse">
+                  :
+                </span>
+              </div>
+
+              <WheelColumn
+                items={minutes}
+                selectedIndex={minuteIndex}
+                onChange={setMinuteIndex}
+                align="left"
+              />
+            </div>
+
+            {/* ĐÃ SỬA: Thay h-22 thành h-[88px] hoặc h-24 */}
+            <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>
+
+          <button
+            onClick={handleConfirm}
+            className="mx-4 mb-2 py-4 bg-indigo-600 text-white text-[17px] font-semibold rounded-2xl hover:bg-indigo-700 active:bg-indigo-800 active:scale-95 transition-all"
+          >
+            {locale === "vi" ? "Xong" : "Done"}
+          </button>
+        </div>
+      </BottomSheet>
+    </>
+  );
+}

package/src/components/Toast.tsx

@@ -0,0 +1,133 @@
+import {
+  useEffect,
+  useState,
+  createContext,
+  useContext,
+  ReactNode,
+  useCallback,
+} from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+// ================================
+// Types & Context (Giữ nguyên của bạn)
+// ================================
+type ToastType = "success" | "error" | "warning" | "info";
+
+interface ToastItem {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+interface ToastContextType {
+  show: (message: string, type?: ToastType, duration?: number) => void;
+  success: (message: string) => void;
+  error: (message: string) => void;
+  warning: (message: string) => void;
+  info: (message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast phải dùng trong ToastProvider!");
+  return ctx;
+}
+
+const toastStyles: Record<ToastType, { bg: string; icon: string }> = {
+  success: { bg: "bg-green-500", icon: "✅" },
+  error: { bg: "bg-red-500", icon: "❌" },
+  warning: { bg: "bg-amber-500", icon: "⚠️" },
+  info: { bg: "bg-blue-500", icon: "ℹ️" },
+};
+
+// ================================
+// Single Toast component (Đã gỡ logic dư thừa)
+// ================================
+function ToastMessage({
+  toast,
+  onRemove,
+}: {
+  toast: ToastItem;
+  onRemove: (id: string) => void;
+}) {
+  const { bg, icon } = toastStyles[toast.type];
+
+  // Chỉ lo việc đếm ngược thời gian, animation để Framer lo
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onRemove(toast.id);
+    }, toast.duration ?? 3000);
+    return () => clearTimeout(timer);
+  }, [toast, onRemove]);
+
+  return (
+    <motion.div
+      layout // Giúp các Toast tự động trượt lên lấp chỗ trống khi có 1 cái biến mất
+      initial={{ opacity: 0, y: 30, scale: 0.9 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.2 } }}
+      transition={{ type: "spring", damping: 20, stiffness: 300 }}
+      className={`flex items-center gap-3 px-4 py-3 rounded-2xl shadow-lg text-white text-sm font-medium ${bg}`}
+      style={{ minWidth: 240, maxWidth: 320 }}
+    >
+      <span>{icon}</span>
+      <span className="flex-1">{toast.message}</span>
+      <button
+        onClick={() => onRemove(toast.id)}
+        className="opacity-70 hover:opacity-100 transition-opacity"
+      >
+        ✕
+      </button>
+    </motion.div>
+  );
+}
+
+// ================================
+// Toast Provider
+// ================================
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const remove = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const show = useCallback(
+    (message: string, type: ToastType = "info", duration = 3000) => {
+      const id = Math.random().toString(36).slice(2);
+      setToasts((prev) => [...prev, { id, message, type, duration }]);
+    },
+    [],
+  );
+
+  const success = useCallback((msg: string) => show(msg, "success"), [show]);
+  const error = useCallback((msg: string) => show(msg, "error"), [show]);
+  const warning = useCallback((msg: string) => show(msg, "warning"), [show]);
+  const info = useCallback((msg: string) => show(msg, "info"), [show]);
+
+  return (
+    <ToastContext.Provider value={{ show, success, error, warning, info }}>
+      {children}
+
+      <div
+        className="fixed left-1/2 -translate-x-1/2 z-50 flex flex-col gap-2 items-center pointer-events-none"
+        style={{
+          bottom:
+            "calc(var(--ejsc-safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px)",
+        }}
+      >
+        <AnimatePresence mode="popLayout">
+          {toasts.map((toast) => (
+            // Thêm pointer-events-auto vào từng toast để bắt click được nút ✕
+            <div key={toast.id} className="pointer-events-auto">
+              <ToastMessage toast={toast} onRemove={remove} />
+            </div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </ToastContext.Provider>
+  );
+}

package/src/components/VirtualList.tsx

@@ -0,0 +1,81 @@
+import { useRef, useState, useMemo, ReactNode, UIEvent } from "react";
+
+// ================================
+// Types
+// ================================
+interface VirtualListProps<T> {
+  items: T[];
+  itemHeight: number;
+  renderItem: (item: T, index: number) => ReactNode;
+  containerHeight?: number | string;
+  overscan?: number;
+  className?: string;
+}
+
+export function VirtualList<T>({
+  items,
+  itemHeight,
+  renderItem,
+  containerHeight = "100%",
+  overscan = 3, // Render dư ra 3 item phía trên và dưới để chống chớp trắng khi scroll nhanh
+  className = "",
+}: VirtualListProps<T>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  // Tổng chiều cao giả lập của toàn bộ list (VD: 5000 items * 80px = 400,000px)
+  const totalHeight = items.length * itemHeight;
+
+  // Cập nhật vị trí cuộn mỗi khi user vuốt
+  const handleScroll = (e: UIEvent<HTMLDivElement>) => {
+    // Dùng requestAnimationFrame nếu muốn tối ưu cực độ, nhưng với React 18+ auto-batching thì setState thẳng ở đây vẫn rất mượt
+    setScrollTop(e.currentTarget.scrollTop);
+  };
+
+  // Tính toán chỉ số của các item cần render
+  const { startIndex, endIndex } = useMemo(() => {
+    const start = Math.floor(scrollTop / itemHeight);
+
+    // Nếu chưa render DOM (clientHeight = 0), lấy tạm một giá trị ước lượng cho màn hình mobile (VD: 800px)
+    const clientHeight = containerRef.current?.clientHeight || 800;
+    const visibleNodeCount = Math.ceil(clientHeight / itemHeight);
+
+    const end = Math.min(items.length - 1, start + visibleNodeCount);
+
+    return { startIndex: start, endIndex: end };
+  }, [scrollTop, itemHeight, items.length]);
+
+  // Cộng trừ thêm vùng overscan an toàn
+  const renderStart = Math.max(0, startIndex - overscan);
+  const renderEnd = Math.min(items.length - 1, endIndex + overscan);
+
+  // Cắt mảng data gốc lấy đúng đoạn cần thiết
+  const visibleItems = items.slice(renderStart, renderEnd + 1);
+
+  // Tính độ dời (offset) để đẩy đoạn DOM này xuống đúng vị trí trên thanh cuộn
+  const offsetY = renderStart * itemHeight;
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={handleScroll}
+      className={`overflow-y-auto overscroll-contain [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:hidden ${className}`}
+      style={{ height: containerHeight }}
+    >
+      {/* Container giả lập chiều cao tổng */}
+      <div style={{ height: totalHeight, position: "relative" }}>
+        {/* Khối chứa các phần tử thực sự được render, dùng translateY đẩy xuống để tăng tốc độ GPU */}
+        <div style={{ transform: `translateY(${offsetY}px)` }}>
+          {visibleItems.map((item, index) => {
+            const actualIndex = renderStart + index;
+            return (
+              <div key={actualIndex} style={{ height: itemHeight }}>
+                {renderItem(item, actualIndex)}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.ts

@@ -0,0 +1,14 @@
+export { Button } from "./components/Button";
+export { Header } from "./components/Header";
+export { BottomSheet } from "./components/BottomSheet";
+export { ToastProvider, useToast } from "./components/Toast";
+export { DatePicker } from "./components/DatePicker";
+export { TimePicker } from "./components/TimePicker";
+export { OTPInput } from "./components/OTPInput";
+export { Card } from "./components/Card";
+export { VirtualList } from "./components/VirtualList";
+export { SearchBar } from "./components/SearchBar";
+export { Modal } from './components/Modal'
+export { Tabs } from './components/Tabs'
+export { Collapse } from './components/Collapse'
+export { Drawer } from './components/Drawer'

package/src/stories/Button.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/Button";
+
+const meta: Meta<typeof Button> = {
+  title: "mini-app-component/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Variants: Story = {
+  render: () => (
+    <div
+      style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}
+    >
+      <Button variant="primary" onPress={() => alert("Primary tapped")}>
+        Primary Button
+      </Button>
+      <Button variant="secondary" onPress={() => alert("Secondary tapped")}>
+        Secondary Button
+      </Button>
+      <Button variant="danger" onPress={() => alert("Danger tapped")}>
+        Danger Button
+      </Button>
+      <Button variant="ghost" onPress={() => alert("Ghost tapped")}>
+        Ghost Button
+      </Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div
+      style={{
+        width: 320,
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        flexWrap: "wrap",
+      }}
+    >
+      <Button size="sm">Small (32px)</Button>
+      <Button size="md">Medium (44px)</Button>
+      <Button size="lg">Large (52px)</Button>
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div
+      style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}
+    >
+      <Button loading variant="primary">
+        Đang tải dữ liệu
+      </Button>
+      <Button disabled variant="primary">
+        Không thể tương tác
+      </Button>
+    </div>
+  ),
+};
+
+export const FullWidth: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Button fullWidth variant="primary" size="lg">
+        Thanh toán ngay
+      </Button>
+    </div>
+  ),
+};

package/src/stories/Card.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "../components/Card";
+
+const meta: Meta<typeof Card> = {
+  title: "mini-app-component/Card",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Card>
+        <Card.Header>
+          <h3 className="font-semibold text-gray-900">Chi tiết đơn hàng</h3>
+          <span className="text-xs text-indigo-600 bg-indigo-50 px-2 py-1 rounded-md">
+            Mới
+          </span>
+        </Card.Header>
+        <Card.Body>
+          Đơn hàng #12345 đã được xác nhận và đang chờ giao cho đơn vị vận
+          chuyển.
+        </Card.Body>
+        <Card.Footer>
+          <span className="text-xs text-gray-500">Cập nhật 2 phút trước</span>
+        </Card.Footer>
+      </Card>
+    </div>
+  ),
+};
+
+export const Pressable: Story = {
+  render: () => (
+    <div
+      style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}
+    >
+      <Card isPressable onClick={() => alert("Đã chọn thanh toán MoMo!")}>
+        <Card.Body className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-pink-500 rounded-lg flex items-center justify-center text-white font-bold text-xs">
+            M
+          </div>
+          <span className="font-medium text-gray-900">Thanh toán qua MoMo</span>
+        </Card.Body>
+      </Card>
+
+      <Card isPressable onClick={() => alert("Đã chọn thanh toán ZaloPay!")}>
+        <Card.Body className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-xs">
+            Z
+          </div>
+          <span className="font-medium text-gray-900">
+            Thanh toán qua ZaloPay
+          </span>
+        </Card.Body>
+      </Card>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Card disabled isPressable>
+        <Card.Body className="flex items-center justify-between">
+          <span className="font-medium text-gray-900">Voucher giảm 50K</span>
+          <span className="text-xs text-red-500 bg-red-50 px-2 py-1 rounded-md">
+            Đã hết hạn
+          </span>
+        </Card.Body>
+      </Card>
+    </div>
+  ),
+};