@v-miniapp/ui-react 1.0.41 → 1.0.45

package/dist-storybook/assets/PAGE_LAYOUT-BuOpN-1Y.js

@@ -0,0 +1,192 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as t}from"./index-CgMRTj-o.js";import{b as s,M as r}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function o(a){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...a.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(s,{title:"App Framework/Page Layout"}),`
+`,n.jsx(e.h1,{id:"page-layout",children:"Page Layout"}),`
+`,n.jsx(e.p,{children:"Page Layout config cho phép bạn cấu hình layout cho các pages với các thuộc tính như spacing, safe area offsets, pull-to-refresh, và scroll restoration."}),`
+`,n.jsx(e.h2,{id:"cấu-trúc",children:"Cấu trúc"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IAppPageLayoutState = IPageBaseProps & {
+  hidden?: boolean
+  scrollRestoration?: boolean
+}
+
+type IPageBaseProps = {
+  hasSpacing?: boolean
+  headerOffset?: boolean
+  safeAreaTopOffset?: boolean
+  safeAreaBottomOffset?: boolean
+  contentClassName?: string
+  pullToRefresh?: IPullToRefreshBasProps
+  onEndReached?: () => void
+  onEndReachedThreshold?: number
+  id?: string
+  className?: string
+  style?: React.CSSProperties
+}
+`})}),`
+`,n.jsx(e.h2,{id:"thuộc-tính",children:"Thuộc tính"}),`
+`,n.jsx(r,{children:"\n| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `hidden` | `boolean` | `false` | Không render page layout wrapper (chỉ render children trực tiếp) |\n| `scrollRestoration` | `boolean` | `true` | Giữ scroll position khi navigate (kết hợp với keep-alive) |\n| `hasSpacing` | `boolean` | `true` | Thêm padding cho content |\n| `headerOffset` | `boolean` | `false` | Thêm offset cho header |\n| `safeAreaTopOffset` | `boolean` | `true` | Thêm safe area top inset padding |\n| `safeAreaBottomOffset` | `boolean` | `true` | Thêm safe area bottom inset padding |\n| `contentClassName` | `string` | - | CSS class name cho content wrapper |\n| `pullToRefresh` | `IPullToRefreshBasProps` | - | Cấu hình pull-to-refresh |\n| `onEndReached` | `() => void` | - | Callback khi scroll đến cuối page |\n| `onEndReachedThreshold` | `number` | `50` | Khoảng cách (px) từ cuối để trigger `onEndReached` |\n| `className` | `string` | - | CSS class name cho page wrapper |\n| `style` | `React.CSSProperties` | - | Inline styles cho page wrapper |\n| `id` | `string` | - | HTML id cho page wrapper |\n"}),`
+`,n.jsx(e.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
+`,n.jsxs(e.ol,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Page Layout Wrapper"}),": Mỗi page được wrap bởi ",n.jsx(e.code,{children:"PageLayout"})," component, cung cấp các tính năng như safe area, spacing, và scroll restoration"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Scroll Restoration"}),": Khi ",n.jsx(e.code,{children:"scrollRestoration: true"})," và keep-alive enabled, scroll position sẽ được giữ khi navigate back/forward"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Safe Area"}),": Tự động thêm padding cho safe area top/bottom (quan trọng trên iOS với notch)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Hidden"}),": Khi ",n.jsx(e.code,{children:"hidden: true"}),", page layout wrapper sẽ không render, chỉ render children trực tiếp"]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"cấu-hình",children:"Cấu hình"}),`
+`,n.jsx(e.h3,{id:"app-level-config",children:"App-level Config"}),`
+`,n.jsx(e.p,{children:"Cấu hình page layout mặc định cho tất cả pages:"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  pageLayout: {
+    hasSpacing: true,
+    safeAreaTopOffset: true,
+    safeAreaBottomOffset: true,
+    scrollRestoration: true,
+    contentClassName: 'p-4',
+  },
+  pages: [
+    // Tất cả pages sẽ dùng config này
+  ],
+}
+`})}),`
+`,n.jsx(e.h3,{id:"page-level-config",children:"Page-level Config"}),`
+`,n.jsx(e.p,{children:"Override page layout cho từng page:"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  pageLayout: {
+    hasSpacing: true,
+    scrollRestoration: true,
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Page này dùng app-level config
+    },
+    {
+      pathname: '/detail',
+      Component: DetailPage,
+      // Override page layout cho page này
+      pageLayout: {
+        hasSpacing: false, // Không có spacing
+        contentClassName: 'p-0', // Không có padding
+        scrollRestoration: false, // Reset scroll khi vào page này
+      },
+    },
+    {
+      pathname: '/fullscreen',
+      Component: FullscreenPage,
+      // Ẩn page layout wrapper
+      pageLayout: {
+        hidden: true, // Không wrap với PageLayout
+      },
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h2,{id:"ví-dụ-với-pull-to-refresh",children:"Ví dụ với Pull-to-Refresh"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  pageLayout: {
+    pullToRefresh: {
+      onRefresh: async () => {
+        // Refresh data
+        await fetchData()
+      },
+      pullingText: 'Kéo xuống để làm mới',
+      canReleaseText: 'Thả ra để làm mới',
+      refreshingText: 'Đang làm mới...',
+      completeText: 'Hoàn thành',
+    },
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h2,{id:"ví-dụ-với-infinite-scroll",children:"Ví dụ với Infinite Scroll"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  pageLayout: {
+    onEndReached: () => {
+      // Load more data
+      loadMore()
+    },
+    onEndReachedThreshold: 100, // Trigger khi còn 100px từ cuối
+  },
+  pages: [
+    {
+      pathname: '/list',
+      Component: ListPage,
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h2,{id:"ví-dụ-với-custom-styling",children:"Ví dụ với Custom Styling"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  pageLayout: {
+    contentClassName: 'bg-gray-50 min-h-screen',
+    className: 'custom-page-wrapper',
+    style: {
+      backgroundColor: '#f5f5f5',
+    },
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Override với custom styling
+      pageLayout: {
+        contentClassName: 'bg-white p-6',
+      },
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h2,{id:"scroll-restoration-với-keep-alive",children:"Scroll Restoration với Keep-Alive"}),`
+`,n.jsx(e.p,{children:"Khi kết hợp với keep-alive, scroll restoration sẽ giữ scroll position:"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  keepAlive: {
+    enable: true,
+  },
+  pageLayout: {
+    scrollRestoration: true, // Giữ scroll position
+  },
+  pages: [
+    {
+      pathname: '/list',
+      Component: ListPage,
+      // Khi navigate back, scroll position sẽ được giữ
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h2,{id:"safe-area-offsets",children:"Safe Area Offsets"}),`
+`,n.jsx(e.p,{children:"Safe area offsets tự động điều chỉnh dựa trên navigation bar và bottom tab bar:"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  navigationBar: {
+    hidden: false, // Navigation bar hiển thị
+  },
+  bottomTabBar: {
+    items: [{ id: 'home', name: 'Home', path: '/home' }],
+  },
+  pageLayout: {
+    // safeAreaTopOffset tự động = true khi navigationBar.hidden = false
+    // safeAreaBottomOffset tự động = false khi bottomTabBar hiển thị
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      bottomTabBarId: 'home',
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Scroll Restoration"}),": Chỉ hoạt động tốt khi kết hợp với keep-alive. Khi ",n.jsx(e.code,{children:"scrollRestoration: false"}),", scroll sẽ reset về top khi navigate"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Safe Area"}),": Safe area offsets tự động điều chỉnh dựa trên navigation bar và bottom tab bar visibility"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Hidden"}),": Khi ",n.jsx(e.code,{children:"hidden: true"}),", tất cả các tính năng của page layout (safe area, spacing, scroll restoration) sẽ không hoạt động"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Content ClassName"}),": ",n.jsx(e.code,{children:"contentClassName"})," được áp dụng cho content wrapper bên trong page, không phải page wrapper"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Pull-to-Refresh"}),": Pull-to-refresh chỉ hoạt động khi page có thể scroll"]}),`
+`]})]})}function g(a={}){const{wrapper:e}={...t(),...a.components};return e?n.jsx(e,{...a,children:n.jsx(o,{...a})}):o(a)}export{g as default};

package/dist-storybook/assets/ROUTING_NAVIGATION-BCPHXNto.js

@@ -0,0 +1,335 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as c}from"./index-CgMRTj-o.js";import{b as r,M as o}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function s(i){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...c(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(r,{title:"App Framework/Routing & Navigation"}),`
+`,n.jsx(e.h1,{id:"routing--navigation",children:"Routing & Navigation"}),`
+`,n.jsxs(e.p,{children:["Hệ thống routing và navigation của ",n.jsx(e.code,{children:"App"})," framework cung cấp các hooks và utilities để quản lý navigation, truy cập thông tin page, và xử lý các lifecycle events."]}),`
+`,n.jsx(e.h2,{id:"routing",children:"Routing"}),`
+`,n.jsxs(e.p,{children:["Hệ thống routing sử dụng ",n.jsx(e.strong,{children:"exact path matching"})," - mỗi page được định nghĩa với một ",n.jsx(e.code,{children:"pathname"})," cụ thể và chỉ match khi pathname khớp chính xác."]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Lưu ý:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["Không hỗ trợ dynamic pathname như ",n.jsx(e.code,{children:"/:id"})," hoặc nested routes"]}),`
+`,n.jsxs(e.li,{children:["Hỗ trợ query parameters thông qua ",n.jsx(e.code,{children:"params"})," trong navigate options"]}),`
+`,n.jsx(e.li,{children:"Sử dụng browser history API để quản lý navigation stack"}),`
+`]}),`
+`,n.jsx(e.h2,{id:"navigation",children:"Navigation"}),`
+`,n.jsxs(e.p,{children:["Navigation được thực hiện thông qua function ",n.jsx(e.code,{children:"navigate"})," từ hook ",n.jsx(e.code,{children:"useNavigate()"}),". Có 2 cách navigate:"]}),`
+`,n.jsxs(e.ol,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Navigate bằng pathname"}),": ",n.jsx(e.code,{children:"navigate('/pathname', options)"})]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Navigate bằng delta"}),": ",n.jsx(e.code,{children:"navigate(delta)"})," - điều hướng trong history stack (back/forward)"]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"hooks",children:"Hooks"}),`
+`,n.jsx(e.h3,{id:"usenavigate",children:"useNavigate"}),`
+`,n.jsxs(e.p,{children:["Hook để lấy function ",n.jsx(e.code,{children:"navigate"})," để điều hướng giữa các pages."]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useNavigate } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate"}),": Function để điều hướng với type ",n.jsx(e.code,{children:"INavigate"}),":",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate(pathname: string, options?: INavigatePathnameOptions): void"})," - Navigate bằng pathname"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate(delta: number, options?: INavigateDeltaOptions): void"})," - Navigate bằng delta (back/forward)"]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useNavigate } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const navigate = useNavigate()
+  
+  const handleClick = () => {
+    // Navigate đến page khác
+    navigate('/settings', {
+      params: { id: '123' },
+      state: { from: 'home' },
+      replace: false, // true để replace thay vì push
+    })
+  }
+  
+  const handleBack = () => {
+    // Navigate back
+    navigate(-1)
+  }
+  
+  return <button onClick={handleClick}>Go to Settings</button>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usenavigate--docs",children:"useNavigate Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usehistory",children:"useHistory"}),`
+`,n.jsx(e.p,{children:"Hook để lấy history entry hiện tại của page."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useHistory } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"history"}),": ",n.jsx(e.code,{children:"IHistory"})," object chứa:",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"action"}),": ",n.jsx(e.code,{children:"'PUSH' | 'REPLACE' | 'POP'"})]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"location"}),": ",n.jsx(e.code,{children:"ILocation"})," object chứa ",n.jsx(e.code,{children:"key"}),", ",n.jsx(e.code,{children:"pathname"}),", ",n.jsx(e.code,{children:"params?"}),", ",n.jsx(e.code,{children:"state?"})]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useHistory } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const history = useHistory()
+  
+  console.log(history.location.pathname) // '/home'
+  console.log(history.location.params)   // { id: '123' }
+  console.log(history.action)            // 'PUSH' | 'REPLACE' | 'POP'
+  
+  return <div>Current path: {history.location.pathname}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usehistory--docs",children:"useHistory Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usehistories",children:"useHistories"}),`
+`,n.jsx(e.p,{children:"Hook để lấy toàn bộ history stack."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useHistories } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"histories"}),": ",n.jsx(e.code,{children:"IHistory[]"})," - Mảng các history entries"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useHistories } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const histories = useHistories()
+  
+  console.log(histories.length) // Số lượng pages trong stack
+  
+  return <div>History stack length: {histories.length}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usehistories--docs",children:"useHistories Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"uselocation",children:"useLocation"}),`
+`,n.jsx(e.p,{children:"Hook để lấy location object hiện tại (pathname, params, state, key)."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useLocation } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"location"}),": ",n.jsx(e.code,{children:"ILocation"})," object hoặc ",n.jsx(e.code,{children:"undefined"})," chứa:",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"key"}),": ",n.jsx(e.code,{children:"string"})]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"pathname"}),": ",n.jsx(e.code,{children:"string"})]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"params?"}),": ",n.jsx(e.code,{children:"Record<string, string>"})]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"state?"}),": ",n.jsx(e.code,{children:"any"})]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useLocation } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const location = useLocation()
+  
+  console.log(location.pathname) // '/home'
+  console.log(location.params)   // { id: '123' }
+  console.log(location.state)    // { from: 'home' }
+  console.log(location.key)      // Unique key cho location này
+  
+  return <div>Path: {location.pathname}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-uselocation--docs",children:"useLocation Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usepageconfig",children:"usePageConfig"}),`
+`,n.jsx(e.p,{children:"Hook để lấy config của page hiện tại."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { usePageConfig } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"pageConfig"}),": ",n.jsx(e.code,{children:"IPageConfig"})," của page hiện tại hoặc ",n.jsx(e.code,{children:"undefined"})]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { usePageConfig } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const pageConfig = usePageConfig()
+  
+  if (!pageConfig) return null
+  
+  console.log(pageConfig.pathname)      // '/home'
+  console.log(pageConfig.Component)      // Component của page
+  console.log(pageConfig.navigationBar) // Navigation bar config
+  
+  return <div>Page: {pageConfig.pathname}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usepageconfig--docs",children:"usePageConfig Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usenavigationtype",children:"useNavigationType"}),`
+`,n.jsx(e.p,{children:"Hook để lấy navigation action type (PUSH, REPLACE, POP)."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useNavigationType } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"action"}),": ",n.jsx(e.code,{children:"'PUSH' | 'REPLACE' | 'POP'"})," hoặc ",n.jsx(e.code,{children:"undefined"})]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useNavigationType } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const action = useNavigationType()
+  
+  console.log(action) // 'PUSH' | 'REPLACE' | 'POP'
+  
+  return <div>Navigation type: {action}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usenavigationtype--docs",children:"useNavigationType Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usedidshow",children:"useDidShow"}),`
+`,n.jsx(e.p,{children:"Hook để xử lý khi page được hiển thị (show)."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useDidShow } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Parameters:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"func?: () => void"}),": Callback function được gọi khi page show"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"didShow"}),": Boolean cho biết page có đang được hiển thị không"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useDidShow } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const didShow = useDidShow(() => {
+    console.log('Page is shown')
+    // Fetch data, track analytics, etc.
+  })
+  
+  return <div>Page is {didShow ? 'visible' : 'hidden'}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usedidshow--docs",children:"useDidShow Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usedidhide",children:"useDidHide"}),`
+`,n.jsx(e.p,{children:"Hook để xử lý khi page bị ẩn (hide)."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useDidHide } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Parameters:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"func?: () => void"}),": Callback function được gọi khi page hide"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"didHide"}),": Boolean cho biết page có đang bị ẩn không"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useDidHide } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const didHide = useDidHide(() => {
+    console.log('Page is hidden')
+    // Cleanup, pause timers, etc.
+  })
+  
+  return <div>Page is {didHide ? 'hidden' : 'visible'}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usedidhide--docs",children:"useDidHide Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usepagescroll",children:"usePageScroll"}),`
+`,n.jsx(e.p,{children:"Hook để lắng nghe sự kiện scroll của page."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { usePageScroll } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Parameters:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"callback: (target: HTMLDivElement, event: Event) => void"}),": Callback được gọi khi scroll"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"options?: IUsePageScrollOptions"}),": Options cho throttle"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { usePageScroll } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  usePageScroll((target, event) => {
+    console.log('Scroll position:', target.scrollTop)
+    // Handle scroll event
+  }, {
+    throttle: {
+      wait: 200, // Throttle 200ms
+    }
+  })
+  
+  return <div>Scroll me</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usepagescroll--docs",children:"usePageScroll Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h3,{id:"usepagestate",children:"usePageState"}),`
+`,n.jsx(e.p,{children:"Hook để quản lý state của page hiện tại."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Import:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { usePageState } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Returns:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"pageState"}),": ",n.jsx(e.code,{children:"IPageState"})," của page hiện tại hoặc ",n.jsx(e.code,{children:"undefined"})]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"setPageState"}),": ",n.jsx(e.code,{children:"Dispatch<SetStateAction<IPageState | undefined>>"})," - Function để update page state"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Cách sử dụng:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { usePageState } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const { pageState, setPageState } = usePageState()
+  
+  const updateNavigationBar = () => {
+    setPageState({
+      navigationBar: {
+        title: 'New Title',
+      },
+    })
+  }
+  
+  return <button onClick={updateNavigationBar}>Update Title</button>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Xem chi tiết:"})," ",n.jsx(e.a,{href:"?path=/docs/hooks-usepagestate--docs",children:"usePageState Hook"})]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h2,{id:"navigate-options",children:"Navigate Options"}),`
+`,n.jsxs(e.p,{children:["Khi sử dụng ",n.jsx(e.code,{children:"navigate(pathname, options)"}),", bạn có thể truyền các options sau:"]}),`
+`,n.jsx(o,{children:"\n| Option | Type | Mô tả |\n| :--- | :--- | :--- |\n| `params` | `Record&lt;string, string&gt;` | Query parameters (sẽ được thêm vào URL) |\n| `state` | `any` | State object (không hiển thị trong URL, lưu trong history) |\n| `replace` | `boolean` | Nếu `true`, replace history entry thay vì push mới |\n| `animation` | `IAppAnimationState` | Override animation cho navigation này |\n| `navigationBar` | `IAppNavigationBarState` | Override navigation bar cho page này |\n| `bottomTabBar` | `IAppBottomTabBarState` | Override bottom tab bar cho page này |\n| `keepAlive` | `boolean | IAppKeepAliveState` | Override keep-alive cho page này |\n| `pageLayout` | `IAppPageLayoutState` | Override page layout cho page này |\n"}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Lưu ý:"})," ",n.jsx(e.code,{children:"INavigatePathnameOptions"})," extends ",n.jsx(e.code,{children:"IPageState"}),", nên bạn có thể truyền các page-level config trong navigate options để override config cho page mới."]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Ví dụ:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const navigate = useNavigate()
+
+// Navigate với params và state
+navigate('/detail', {
+  params: { id: '123' },        // ?id=123
+  state: { from: 'home' },      // Không hiển thị trong URL
+  replace: false,               // Push vào history stack
+})
+
+// Navigate back
+navigate(-1)  // Quay lại 1 page
+
+// Navigate forward
+navigate(1)    // Tiến tới 1 page
+`})}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h2,{id:"lifecycle-events",children:"Lifecycle Events"}),`
+`,n.jsx(e.p,{children:"Khi navigate giữa các pages, các lifecycle events được trigger:"}),`
+`,n.jsxs(e.ol,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"beforeLocationChangeP1"}),": Trigger trước khi location thay đổi (phase 1)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"beforeLocationChangeP2"}),": Trigger trước khi location thay đổi (phase 2)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"useDidShow"}),": Trigger khi page được hiển thị"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"useDidHide"}),": Trigger khi page bị ẩn"]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Thứ tự:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["Page A hide → ",n.jsx(e.code,{children:"useDidHide"})," của Page A"]}),`
+`,n.jsxs(e.li,{children:["Page B show → ",n.jsx(e.code,{children:"useDidShow"})," của Page B"]}),`
+`]})]})}function g(i={}){const{wrapper:e}={...c(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(s,{...i})}):s(i)}export{g as default};

package/dist-storybook/assets/TAILWIND_INTEGRATION-_T-VfvkM.js

@@ -0,0 +1,87 @@
+import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as c}from"./index-CgMRTj-o.js";import{b as t}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function e(s){const i={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...c(),...s.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(t,{title:"Use Cases/Tailwind Integration"}),`
+`,n.jsx(i.h1,{id:"tích-hợp-với-tailwind-css",children:"Tích hợp với Tailwind CSS"}),`
+`,n.jsxs(i.p,{children:["Khi sử dụng Tailwind CSS, bạn có thể tích hợp với ",n.jsx(i.code,{children:"@v-miniapp/ui-react"})," để tránh conflict và sử dụng chung design tokens."]}),`
+`,n.jsx(i.h2,{id:"import-tailwind-integration",children:"Import Tailwind Integration"}),`
+`,n.jsxs(i.p,{children:["Thêm import vào file CSS chính của bạn (thường là ",n.jsx(i.code,{children:"tailwind.css"})," hoặc ",n.jsx(i.code,{children:"index.css"}),"):"]}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-css",children:`/* tailwind.css hoặc file CSS chính */
+@import '@v-miniapp/ui-react/tailwind';
+`})}),`
+`,n.jsxs(i.p,{children:[n.jsx(i.strong,{children:"Lưu ý quan trọng:"})," Khi sử dụng Tailwind integration, bạn ",n.jsx(i.strong,{children:"không cần"})," import ",n.jsx(i.code,{children:"@v-miniapp/ui-react/styles.css"})," nữa."]}),`
+`,n.jsx(i.h2,{id:"design-tokens",children:"Design Tokens"}),`
+`,n.jsxs(i.p,{children:["Khi tích hợp với Tailwind, bạn có thể sử dụng các design tokens từ ",n.jsx(i.code,{children:"@v-miniapp/ui-react"}),":"]}),`
+`,n.jsx(i.h3,{id:"colors",children:"Colors"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`// Sử dụng color tokens trong Tailwind
+<div className="bg-alias-layer-01 text-alias-text-primary">
+  Content
+</div>
+`})}),`
+`,n.jsx(i.p,{children:"Các color tokens có sẵn:"}),`
+`,n.jsxs(i.ul,{children:[`
+`,n.jsxs(i.li,{children:[n.jsx(i.code,{children:"alias-layer-*"})," - Layer colors (background)"]}),`
+`,n.jsxs(i.li,{children:[n.jsx(i.code,{children:"alias-text-*"})," - Text colors"]}),`
+`,n.jsxs(i.li,{children:[n.jsx(i.code,{children:"alias-object-*"})," - Object colors (buttons, badges, etc.)"]}),`
+`,n.jsxs(i.li,{children:[n.jsx(i.code,{children:"alias-border-*"})," - Border colors"]}),`
+`]}),`
+`,n.jsx(i.h3,{id:"spacing--sizing",children:"Spacing & Sizing"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`// Sử dụng spacing tokens
+<div className="p-4 m-2">
+  Content
+</div>
+`})}),`
+`,n.jsx(i.h3,{id:"typography",children:"Typography"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`// Sử dụng typography tokens
+<h1 className="text-base font-medium">
+  Title
+</h1>
+`})}),`
+`,n.jsx(i.h2,{id:"tránh-conflict",children:"Tránh Conflict"}),`
+`,n.jsx(i.p,{children:"Khi tích hợp với Tailwind:"}),`
+`,n.jsxs(i.ol,{children:[`
+`,n.jsxs(i.li,{children:[n.jsx(i.strong,{children:"CSS Variables"}),": ",n.jsx(i.code,{children:"@v-miniapp/ui-react"})," sử dụng CSS variables để tránh conflict với Tailwind utilities"]}),`
+`,n.jsxs(i.li,{children:[n.jsx(i.strong,{children:"Prefix"}),": Các class của ",n.jsx(i.code,{children:"@v-miniapp/ui-react"})," có prefix riêng (ví dụ: ",n.jsx(i.code,{children:"vsf-*"}),") để tránh conflict"]}),`
+`,n.jsxs(i.li,{children:[n.jsx(i.strong,{children:"Tokens"}),": Sử dụng design tokens thay vì hardcode values để đảm bảo consistency"]}),`
+`]}),`
+`,n.jsx(i.h2,{id:"ví-dụ-hoàn-chỉnh",children:"Ví dụ hoàn chỉnh"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@v-miniapp/ui-react/dist/**/*.{js,jsx,ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      // Extend với tokens từ @v-miniapp/ui-react nếu cần
+    },
+  },
+  plugins: [],
+}
+`})}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-css",children:`/* tailwind.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import Tailwind integration từ @v-miniapp/ui-react */
+@import '@v-miniapp/ui-react/tailwind';
+`})}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`// App.tsx
+import { App } from '@v-miniapp/ui-react'
+// KHÔNG import styles.css khi dùng Tailwind integration
+// import '@v-miniapp/ui-react/styles.css' // ❌ Không cần
+
+const appConfig: IAppConfig = {
+  // ...
+}
+
+export const MiniApp: FC = () => {
+  return <App config={appConfig} />
+}
+`})}),`
+`,n.jsx(i.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,n.jsxs(i.ul,{children:[`
+`,n.jsxs(i.li,{children:["Chỉ sử dụng ",n.jsx(i.strong,{children:"một trong hai"}),": ",n.jsx(i.code,{children:"styles.css"})," HOẶC ",n.jsx(i.code,{children:"tailwind"})," integration, không dùng cả hai"]}),`
+`,n.jsxs(i.li,{children:["Đảm bảo import ",n.jsx(i.code,{children:"@v-miniapp/ui-react/tailwind"})," ",n.jsx(i.strong,{children:"sau"})," các Tailwind directives (",n.jsx(i.code,{children:"@tailwind base"}),", etc.)"]}),`
+`,n.jsx(i.li,{children:"Các design tokens được expose qua CSS variables, có thể sử dụng trong Tailwind config nếu cần"}),`
+`]})]})}function h(s={}){const{wrapper:i}={...c(),...s.components};return i?n.jsx(i,{...s,children:n.jsx(e,{...s})}):e(s)}export{h as default};