@baodev/mini-app-component 1.0.1

package/.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-onboarding", "@storybook/addon-docs"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react'
+// @ts-ignore
+import '../src/index.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@baodev/mini-app-component",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "WEBVIEW COMPONENT",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "sideEffects": false,
+  "peerDependencies": {
+    "@types/react-dom": ">=18.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
+    "@types/react": "latest",
+    "@vitest/browser-playwright": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.7",
+    "playwright": "^1.60.0",
+    "storybook": "^10.4.1",
+    "tailwindcss": "^3.4.19",
+    "tsup": "latest",
+    "typescript": "latest",
+    "vitest": "^4.1.7"
+  },
+  "dependencies": {
+    "@storybook/react": "^10.4.1",
+    "framer-motion": "^12.40.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: false

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/react-shim.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export { React };

package/src/components/BottomSheet.tsx

@@ -0,0 +1,113 @@
+import { ReactNode, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence, useDragControls } from "framer-motion";
+
+interface BottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  snapPoints?: "half" | "full" | "auto";
+}
+
+const snapStyles: Record<string, string> = {
+  half: "max-h-[50vh]",
+  full: "max-h-[90vh]",
+  auto: "max-h-[80vh]",
+};
+
+export function BottomSheet({
+  isOpen,
+  onClose,
+  title,
+  children,
+  snapPoints = "auto",
+}: BottomSheetProps) {
+  // Điều khiển vùng vuốt bằng Framer Motion
+  const dragControls = useDragControls();
+
+  // Lock scroll
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className="fixed inset-0 bg-black/40 z-40 pointer-events-auto"
+            onClick={onClose}
+          />
+
+          {/* Sheet */}
+          <motion.div
+            initial={{ y: "100%" }}
+            animate={{ y: 0 }}
+            exit={{ y: "100%" }}
+            transition={{ type: "spring", damping: 25, stiffness: 250 }}
+            // --- LOGIC VUỐT CỦA FRAMER MOTION ---
+            drag="y"
+            dragControls={dragControls}
+            dragListener={false} // Tắt drag toàn sheet, chỉ bật ở handle
+            dragConstraints={{ top: 0 }} // Không cho vuốt lên quá trần
+            dragElastic={0.2} // Độ rít khi cố vuốt lên
+            onDragEnd={(e, info) => {
+              // Vuốt xuống nhanh hoặc dài hơn 100px thì đóng
+              if (info.offset.y > 100 || info.velocity.y > 500) {
+                onClose();
+              }
+            }}
+            // ------------------------------------
+            className={`fixed bottom-0 left-0 right-0 z-50 bg-white rounded-t-3xl shadow-2xl flex flex-col ${snapStyles[snapPoints]}`}
+          >
+            {/* Handle bar — chỉ vùng này mới swipe được */}
+            <div
+              onPointerDown={(e) => dragControls.start(e)} // Kích hoạt kéo ở đây
+              className="flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none"
+            >
+              <div className="w-10 h-1 bg-gray-300 rounded-full" />
+            </div>
+
+            {/* Header */}
+            {title && (
+              <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100 flex-shrink-0">
+                <h3 className="text-base font-semibold text-gray-900">
+                  {title}
+                </h3>
+                <button
+                  onClick={onClose}
+                  className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500 text-lg"
+                >
+                  ✕
+                </button>
+              </div>
+            )}
+
+            {/* Content — scroll độc lập */}
+            <div
+              className="flex-1 overflow-y-auto overscroll-contain px-5 py-4"
+              style={{
+                paddingBottom:
+                  "calc(var(--ejsc-safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px)",
+              }}
+            >
+              {children}
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>,
+    document.body,
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,92 @@
+import { ReactNode, MouseEvent } from "react";
+
+// ================================
+// Types
+// ================================
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: (e: MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+}
+
+// Tối ưu hóa Mobile: Thay vì dùng hover, tập trung vào trạng thái active khi ngón tay chạm vào
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: "bg-indigo-600 text-white active:bg-indigo-700",
+  secondary: "bg-gray-100 text-gray-800 active:bg-gray-200",
+  danger: "bg-red-500 text-white active:bg-red-600",
+  ghost: "bg-transparent text-indigo-600 active:bg-indigo-50",
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "h-8 px-3 text-sm rounded-lg",
+  md: "h-11 px-4 text-base rounded-xl", // Chiều cao 44px chuẩn tap target tối thiểu của iOS
+  lg: "h-13 px-6 text-lg rounded-2xl",
+};
+
+export function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  loading = false,
+  onPress,
+  className = "",
+}: ButtonProps) {
+  return (
+    <button
+      onClick={disabled || loading ? undefined : onPress}
+      disabled={disabled || loading}
+      className={[
+        // Layout & Typography
+        "font-semibold flex items-center justify-center gap-2 select-none outline-none transition-all duration-100",
+
+        // Mobile UX
+        "[-webkit-tap-highlight-color:transparent]", // Xóa khung highlight xấu xí khi tap trên Android
+        "active:scale-[0.97]", // Hiệu ứng lún nút nhẹ khi nhấn giữ giống iOS
+
+        // Trạng thái khóa
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100",
+
+        variantStyles[variant],
+        sizeStyles[size],
+        fullWidth ? "w-full" : "w-auto",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {/* Icon Loading xoay tròn */}
+      {loading && (
+        <svg
+          className="animate-spin h-4 w-4 text-current"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      )}
+      <span>{children}</span>
+    </button>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,102 @@
+import { ReactNode, HTMLAttributes } from "react";
+
+// ================================
+// Types
+// ================================
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  isPressable?: boolean;
+  disabled?: boolean;
+}
+
+// ================================
+// Main Card Component
+// ================================
+function Card({
+  children,
+  isPressable = false,
+  disabled = false,
+  className = "",
+  onClick,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      onClick={disabled ? undefined : onClick}
+      className={[
+        // Layout cơ bản
+        "bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden",
+
+        // Mobile UX: Bỏ hiệu ứng chớp màu xanh/xám mặc định khi tap trên Android/iOS
+        "[-webkit-tap-highlight-color:transparent]",
+
+        // Trạng thái tương tác (nếu Card có thể click)
+        isPressable && !disabled
+          ? "cursor-pointer active:scale-[0.98] active:bg-gray-50/80 transition-all duration-150 ease-out"
+          : "",
+
+        // Trạng thái khóa
+        disabled ? "opacity-60 cursor-not-allowed" : "",
+
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ================================
+// Sub-components
+// ================================
+function Header({
+  children,
+  className = "",
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`px-4 py-3 border-b border-gray-50 flex items-center justify-between ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Body({
+  children,
+  className = "",
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={`px-4 py-4 text-sm text-gray-700 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+function Footer({
+  children,
+  className = "",
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`px-4 py-3 border-t border-gray-50 bg-gray-50/50 flex items-center ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Gắn các sub-components vào Card chính để tiện import
+Card.Header = Header;
+Card.Body = Body;
+Card.Footer = Footer;
+
+export { Card };

package/src/components/Collapse.tsx

@@ -0,0 +1,177 @@
+import { ReactNode, useState, useRef, useEffect } from "react";
+
+// ================================
+// Types
+// ================================
+interface CollapseItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+interface CollapseProps {
+  items: CollapseItem[];
+  defaultOpenId?: string | string[];
+  multiple?: boolean; // cho phép mở nhiều cùng lúc
+  variant?: "default" | "card" | "flush";
+}
+
+// ================================
+// Single Collapse Item
+// ================================
+function CollapsePanel({
+  item,
+  isOpen,
+  onToggle,
+  variant,
+}: {
+  item: CollapseItem;
+  isOpen: boolean;
+  onToggle: () => void;
+  variant: "default" | "card" | "flush";
+}) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number>(0);
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+    if (isOpen) {
+      setHeight(contentRef.current.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [isOpen]);
+
+  const wrapperStyles = {
+    default: "border border-gray-200 rounded-xl overflow-hidden",
+    card: "bg-white rounded-xl shadow-sm overflow-hidden",
+    flush: "border-b border-gray-200 last:border-b-0",
+  };
+
+  const headerStyles = {
+    default: "px-4 py-3.5 bg-white hover:bg-gray-50",
+    card: "px-4 py-3.5 bg-white hover:bg-gray-50",
+    flush: "px-0 py-3.5 hover:bg-transparent",
+  };
+
+  return (
+    <div className={wrapperStyles[variant]}>
+      {/* Header */}
+      <button
+        onClick={onToggle}
+        className={[
+          "w-full flex items-center justify-between gap-3 text-left transition-colors duration-150",
+          headerStyles[variant],
+        ].join(" ")}
+      >
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {item.icon && (
+            <span className="flex-shrink-0 text-indigo-600">{item.icon}</span>
+          )}
+          <div className="flex-1 min-w-0">
+            <p
+              className={[
+                "font-medium text-gray-900 truncate",
+                isOpen ? "text-indigo-600" : "",
+              ].join(" ")}
+            >
+              {item.title}
+            </p>
+            {item.subtitle && (
+              <p className="text-xs text-gray-400 mt-0.5 truncate">
+                {item.subtitle}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Chevron */}
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={[
+            "flex-shrink-0 text-gray-400 transition-transform duration-300",
+            isOpen ? "rotate-180 text-indigo-600" : "",
+          ].join(" ")}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {/* Content với smooth animation */}
+      <div
+        style={{
+          height: `${height}px`,
+          overflow: "hidden",
+          transition: "height 0.3s ease",
+        }}
+      >
+        <div ref={contentRef}>
+          <div
+            className={[
+              "text-sm text-gray-600",
+              variant === "flush" ? "pb-4" : "px-4 pb-4",
+            ].join(" ")}
+          >
+            {item.children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ================================
+// Collapse
+// ================================
+export function Collapse({
+  items,
+  defaultOpenId,
+  multiple = false,
+  variant = "default",
+}: CollapseProps) {
+  const defaultOpen = defaultOpenId
+    ? Array.isArray(defaultOpenId)
+      ? defaultOpenId
+      : [defaultOpenId]
+    : [];
+
+  const [openIds, setOpenIds] = useState<string[]>(defaultOpen);
+
+  function toggle(id: string) {
+    if (multiple) {
+      setOpenIds((prev) =>
+        prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id],
+      );
+    } else {
+      setOpenIds((prev) => (prev.includes(id) ? [] : [id]));
+    }
+  }
+
+  return (
+    <div
+      className={[
+        "w-full",
+        variant !== "flush" ? "flex flex-col gap-2" : "",
+      ].join(" ")}
+    >
+      {items.map((item) => (
+        <CollapsePanel
+          key={item.id}
+          item={item}
+          isOpen={openIds.includes(item.id)}
+          onToggle={() => toggle(item.id)}
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}