@baodev/mini-app-component 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baodev/mini-app-component",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "description": "WEBVIEW COMPONENT",
   "main": "src/index.ts",
@@ -17,20 +17,23 @@
     "@storybook/addon-docs": "^10.4.1",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/react": "^10.4.1",
     "@storybook/react-vite": "^10.4.1",
     "@types/react": "latest",
     "@vitest/browser-playwright": "^4.1.7",
     "@vitest/coverage-v8": "^4.1.7",
+    "framer-motion": "^12.40.0",
     "playwright": "^1.60.0",
     "storybook": "^10.4.1",
     "tailwindcss": "^3.4.19",
     "tsup": "latest",
     "typescript": "latest",
-    "vitest": "^4.1.7",
-    "@storybook/react": "^10.4.1",
-    "framer-motion": "^12.40.0"
+    "vitest": "^4.1.7"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
   },
-  "dependencies": {},
   "scripts": {
     "build": "tsup",
     "storybook": "storybook dev -p 6006",

package/src/components/{DatePicker.tsx → DataEntry/DatePicker.tsx}

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { BottomSheet } from "./BottomSheet";
+import { BottomSheet } from "../Feedback/BottomSheet";
 
 // ================================
 // Types

package/src/components/{TimePicker.tsx → DataEntry/TimePicker.tsx}

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { BottomSheet } from "./BottomSheet";
+import { BottomSheet } from "../Feedback/BottomSheet";
 
 // ================================
 // Types

package/src/components/Feedback/Sheet/Sheet.tsx

@@ -0,0 +1,152 @@
+import {
+  forwardRef,
+  ComponentPropsWithRef,
+  MouseEvent,
+  useEffect,
+  createContext,
+  useContext,
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  motion,
+  AnimatePresence,
+  useMotionValue,
+  useTransform,
+} from "framer-motion";
+
+// --- BƯỚC ĐỘT PHÁ: Tạo Context để dùng chung state ---
+interface SheetContextType {
+  onClose?: () => void;
+}
+export const SheetContext = createContext<SheetContextType>({});
+export const useSheetContext = () => useContext(SheetContext);
+
+export type ISheetProps = ComponentPropsWithRef<"div"> & {
+  open?: boolean;
+  onBackdropClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  onClose?: () => void;
+  layout?: "docked" | "inset";
+  radius?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+};
+
+export const Sheet = forwardRef<HTMLDivElement, ISheetProps>(
+  (
+    {
+      children,
+      className = "",
+      open = false,
+      onBackdropClick,
+      onClose,
+      layout = "docked",
+      radius = "3xl",
+      ...rest
+    },
+    ref,
+  ) => {
+    const y = useMotionValue(0);
+
+    // Hiệu ứng mờ dần lớp nền đen khi kéo Sheet xuống (Đỉnh cao UX)
+    const dragOverlayOpacity = useTransform(y, [0, 300], [1, 0]);
+
+    useEffect(() => {
+      if (open) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [open]);
+
+    if (typeof document === "undefined") return null;
+
+    const radiusStyles: Record<string, string> = {
+      none: "0px",
+      sm: "8px",
+      md: "12px",
+      lg: "16px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "32px",
+    };
+
+    const borderRadius = radiusStyles[radius] || "32px";
+
+    return createPortal(
+      <SheetContext.Provider value={{ onClose }}>
+        <AnimatePresence>
+          {open && (
+            <div
+              ref={ref}
+              className={`fixed inset-0 z-[1000] flex items-end justify-center ${layout === "inset" ? "p-4 pb-safe-bottom" : "p-0"} ${className}`}
+              {...rest}
+            >
+              {/* Lớp nền đen tĩnh */}
+              <motion.div
+                key="backdrop-static"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+                className="absolute inset-0 z-10 bg-black/40"
+                onClick={(e) => {
+                  onBackdropClick?.(e);
+                  onClose?.();
+                }}
+              />
+
+              {/* Lớp nền phản hồi theo lực kéo */}
+              <motion.div
+                key="backdrop-drag"
+                style={{ opacity: dragOverlayOpacity }}
+                className="absolute inset-0 z-10 bg-black/20 pointer-events-none"
+              />
+
+              {/* Lõi Sheet */}
+              <motion.div
+                key="drawer"
+                style={{
+                  y,
+                  willChange: "transform",
+                  touchAction: "none",
+                  borderTopLeftRadius: borderRadius,
+                  borderTopRightRadius: borderRadius,
+                  borderBottomLeftRadius:
+                    layout === "inset" ? borderRadius : "0px",
+                  borderBottomRightRadius:
+                    layout === "inset" ? borderRadius : "0px",
+                }}
+                initial={{ y: "100%" }}
+                animate={{ y: 0 }}
+                exit={{ y: "100%" }}
+                transition={{
+                  type: "tween",
+                  duration: 0.35,
+                  ease: [0.32, 0.94, 0.6, 1],
+                }}
+                drag="y"
+                dragConstraints={{ top: 0 }}
+                dragElastic={0.08}
+                onDragEnd={(_, info) => {
+                  if (info.offset.y > 80 || info.velocity.y > 400) {
+                    onClose?.();
+                  }
+                }}
+                className="relative w-full max-h-[90vh] z-20 bg-white overflow-hidden flex flex-col shadow-2xl"
+              >
+                {/* Thanh cầm kéo (Drag Handle) */}
+                <div className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mt-3 mb-1 flex-shrink-0 cursor-grab active:cursor-grabbing" />
+
+                {children}
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>
+      </SheetContext.Provider>,
+      document.body,
+    );
+  },
+);
+
+Sheet.displayName = "Sheet";

package/src/components/Feedback/Sheet/SheetBody.tsx

@@ -0,0 +1,24 @@
+import { ComponentPropsWithRef, FC } from "react";
+
+export type ISheetBodyProps = ComponentPropsWithRef<"div"> & {
+  horizontalSpace?: boolean;
+};
+
+export const SheetBody: FC<ISheetBodyProps> = ({
+  horizontalSpace = true,
+  className = "",
+  children,
+  ...rest
+}) => (
+  <div
+    className={`w-full flex-1 overflow-y-auto overscroll-contain pt-2 pb-4 ${horizontalSpace ? "px-4" : ""} ${className}`}
+    // Đảm bảo nội dung không bị che bởi thanh điều hướng vuốt của iPhone
+    style={{
+      paddingBottom:
+        "calc(var(--ejsc-safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px)",
+    }}
+    {...rest}
+  >
+    {children}
+  </div>
+);

package/src/components/Feedback/Sheet/SheetFooter.tsx

@@ -0,0 +1,20 @@
+import { ComponentPropsWithRef, FC } from "react";
+
+export type ISheetFooterProps = ComponentPropsWithRef<"div">;
+
+export const SheetFooter: FC<ISheetFooterProps> = ({
+  className = "",
+  children,
+  ...rest
+}) => (
+  <div
+    className={`w-full flex flex-row items-center gap-3 p-4 border-t border-gray-100 bg-white flex-shrink-0 ${className}`}
+    style={{
+      paddingBottom:
+        "calc(var(--ejsc-safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px)",
+    }}
+    {...rest}
+  >
+    {children}
+  </div>
+);

package/src/components/Feedback/Sheet/SheetHeader.tsx

@@ -0,0 +1,87 @@
+import { ComponentPropsWithRef, FC, ReactNode } from "react";
+import { useSheetContext } from "./Sheet";
+
+export type ISheetHeaderProps = ComponentPropsWithRef<"div"> & {
+  title?: ReactNode;
+  backIcon?: boolean | ReactNode;
+  onBackClick?: () => void;
+  closeIcon?: boolean | ReactNode;
+  onCloseClick?: () => void; // Vẫn cho phép truyền prop này để ghi đè nếu muốn
+};
+
+export const SheetHeader: FC<ISheetHeaderProps> = ({
+  title,
+  backIcon,
+  onBackClick,
+  closeIcon = true, // Mặc định hiện nút Close
+  onCloseClick,
+  className = "",
+  ...rest
+}) => {
+  // Tự động lấy hàm onClose từ Component Sheet bọc ngoài
+  const { onClose } = useSheetContext();
+  const handleClose = onCloseClick || onClose;
+
+  return (
+    <div
+      className={`flex items-center justify-between px-4 py-3 border-b border-gray-100 w-full flex-shrink-0 ${className}`}
+      {...rest}
+    >
+      <div className="w-10 flex items-center justify-start">
+        {backIcon && (
+          <button onClick={onBackClick} className="text-gray-800 p-1">
+            {typeof backIcon === "boolean" ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+            ) : (
+              backIcon
+            )}
+          </button>
+        )}
+      </div>
+
+      <div className="flex-1 text-center font-semibold text-base text-gray-900 truncate">
+        {title}
+      </div>
+
+      <div className="w-10 flex items-center justify-end">
+        {(closeIcon || handleClose) && (
+          <button
+            onClick={handleClose}
+            className="text-gray-500 hover:bg-gray-100 rounded-full p-1 transition-colors"
+          >
+            {closeIcon && typeof closeIcon !== "boolean" ? (
+              closeIcon
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            )}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/Feedback/Sheet/index.ts

@@ -0,0 +1,4 @@
+export * from "./Sheet";
+export * from "./SheetHeader";
+export * from "./SheetBody";
+export * from "./SheetFooter";

package/src/index.ts

@@ -1,14 +1,26 @@
-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'
+// Base
+export { Button } from "./components/Base/Button";
+
+// Data Display
+export * from "./components/DataDisPlay/Toast";
+export * from "./components/DataDisPlay/Card";
+export * from "./components/DataDisPlay/VirtualList";
+export * from "./components/DataDisPlay/Collapse";
+
+// Data Entry
+export * from "./components/DataEntry/DatePicker";
+export * from "./components/DataEntry/TimePicker";
+export * from "./components/DataEntry/SearchBar";
+export * from "./components/DataEntry/OTPInput";
+
+// Feedback
+export * from "./components/Feedback/Modal";
+export * from "./components/Feedback/Drawer";
+export * from "./components/Feedback/Sheet";
+export * from "./components/Feedback/BottomSheet";
+
+// Layout
+export * from "./components/Layout/Tabs";
+
+// Navigation
+export * from "./components/Navigation/Header";

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}