@v-miniapp/ui-react 1.0.47 → 1.0.60

package/dist-storybook/assets/BOTTOM_TAB_BAR-Bgfy-nnv.js

@@ -1,175 +0,0 @@
-import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as o}from"./index-7xlKHfV2.js";import{b as a,M as r}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function i(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...e.components};return n.jsxs(n.Fragment,{children:[`
-`,`
-`,n.jsx(a,{title:"App Framework/Bottom Tab Bar"}),`
-`,n.jsx(t.h1,{id:"bottom-tab-bar",children:"Bottom Tab Bar"}),`
-`,n.jsx(t.p,{children:"Bottom Tab Bar config cho phép bạn cấu hình thanh điều hướng ở cuối màn hình với các tab items."}),`
-`,n.jsx(t.h2,{id:"cấu-trúc",children:"Cấu trúc"}),`
-`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`type IAppBottomTabBarState = Partial<
-  Omit<IBottomTabBarProps, 'activeId' | 'items'>
-> & {
-  items: Array<
-    IBottomTabBarItem & { path: string; params?: Record<string, string> }
-  >
-  hidden?: boolean
-}
-
-type IBottomTabBarItem = {
-  id: string
-  name: string
-  icon?: IIconProps | ReactNode
-  activeIcon?: IIconProps | ReactNode
-}
-`})}),`
-`,n.jsx(t.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| `items` | <code>Array&lt;IBottomTabBarItem &amp; {<br/>&nbsp;&nbsp;path: string;<br/>&nbsp;&nbsp;params?: Record&lt;string, string&gt;<br/>}&gt;</code> | - | Mảng tab items (mỗi item có `id`, `name`, `path`) |\n| `hidden` | `boolean` | `false` | Không render bottom tab bar (không có trong DOM) |\n| `indicator` | `boolean` | `true` | Hiển thị indicator bar cho tab active |\n| `setCssVariable` | `boolean` | - | Set CSS variable `--vsf-bottom-tab-bar-height` |\n| `bgColor` | `IColor` | - | Màu nền của tab bar |\n| `color` | `IColor` | - | Màu text và icon cho các tab không active |\n| `activeColor` | `IColor` | - | Màu text và icon cho tab active |\n| `safeAreaBottomOffset` | `boolean` | `true` | Thêm safe area bottom inset padding |\n| `onItemClick` | `(item, index) => void` | - | Callback khi click vào tab item |\n| `className` | `string` | - | CSS class name tùy chỉnh |\n| `...props` | `ComponentProps<'div'>` | - | Tất cả props HTML div chuẩn |\n"}),`
-`,n.jsx(t.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
-`,n.jsxs(t.ol,{children:[`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Items với path"}),": Mỗi item trong ",n.jsx(t.code,{children:"items"})," phải có ",n.jsx(t.code,{children:"path"})," để navigate khi click"]}),`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Page linking"}),": Page phải có ",n.jsx(t.code,{children:"bottomTabBarId"})," khớp với ",n.jsx(t.code,{children:"id"})," của item để bottom tab bar hiển thị"]}),`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Active state"}),": Tab bar tự động highlight tab có ",n.jsx(t.code,{children:"id"})," khớp với ",n.jsx(t.code,{children:"bottomTabBarId"})," của page hiện tại"]}),`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Navigation"}),": Khi click vào tab, sẽ navigate đến ",n.jsx(t.code,{children:"path"})," của item đó"]}),`
-`]}),`
-`,n.jsx(t.h2,{id:"cấu-hình",children:"Cấu hình"}),`
-`,n.jsx(t.h3,{id:"app-level-config",children:"App-level Config"}),`
-`,n.jsx(t.p,{children:"Cấu hình bottom tab bar mặc định:"}),`
-`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`import { HomeIcon, SettingsIcon } from '@ant-design/icons'
-
-const appConfig: IAppConfig = {
-  bottomTabBar: {
-    items: [
-      {
-        id: 'home',
-        name: 'Trang chủ',
-        icon: <HomeIcon />,
-        path: '/home',
-      },
-      {
-        id: 'settings',
-        name: 'Cài đặt',
-        icon: <SettingsIcon />,
-        path: '/settings',
-      },
-    ],
-    indicator: true,
-    safeAreaBottomOffset: true,
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      bottomTabBarId: 'home', // Link với bottom tab bar item
-    },
-    {
-      pathname: '/settings',
-      Component: SettingsPage,
-      bottomTabBarId: 'settings',
-    },
-  ],
-}
-`})}),`
-`,n.jsx(t.h3,{id:"page-level-config",children:"Page-level Config"}),`
-`,n.jsx(t.p,{children:"Override bottom tab bar cho từng page:"}),`
-`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  bottomTabBar: {
-    items: [
-      { id: 'home', name: 'Home', path: '/home' },
-      { id: 'settings', name: 'Settings', path: '/settings' },
-    ],
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      bottomTabBarId: 'home',
-      // Override bottom tab bar cho page này
-      bottomTabBar: {
-        hidden: false,
-        indicator: false, // Tắt indicator cho page này
-      },
-    },
-    {
-      pathname: '/settings',
-      Component: SettingsPage,
-      bottomTabBarId: 'settings',
-      // Ẩn bottom tab bar cho page này
-      bottomTabBar: {
-        hidden: true,
-      },
-    },
-  ],
-}
-`})}),`
-`,n.jsx(t.h2,{id:"ví-dụ-với-icons",children:"Ví dụ với Icons"}),`
-`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`import {
-  HomeOutlined,
-  HomeFilled,
-  SettingOutlined,
-  SettingFilled,
-} from '@ant-design/icons'
-
-const appConfig: IAppConfig = {
-  bottomTabBar: {
-    items: [
-      {
-        id: 'home',
-        name: 'Trang chủ',
-        icon: <HomeOutlined />, // Icon khi không active
-        activeIcon: <HomeFilled />, // Icon khi active
-        path: '/home',
-      },
-      {
-        id: 'settings',
-        name: 'Cài đặt',
-        icon: <SettingOutlined />,
-        activeIcon: <SettingFilled />,
-        path: '/settings',
-      },
-    ],
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      bottomTabBarId: 'home',
-    },
-    {
-      pathname: '/settings',
-      Component: SettingsPage,
-      bottomTabBarId: 'settings',
-    },
-  ],
-}
-`})}),`
-`,n.jsx(t.h2,{id:"ví-dụ-với-styling",children:"Ví dụ với Styling"}),`
-`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  bottomTabBar: {
-    items: [
-      { id: 'home', name: 'Home', path: '/home' },
-      { id: 'settings', name: 'Settings', path: '/settings' },
-    ],
-    bgColor: '#ffffff',
-    color: '#666666',
-    activeColor: '#1890ff',
-    indicator: true,
-  },
-  pages: [
-    // ...
-  ],
-}
-`})}),`
-`,n.jsx(t.h2,{id:"lưu-ý",children:"Lưu ý"}),`
-`,n.jsxs(t.ul,{children:[`
-`,n.jsxs(t.li,{children:[n.jsxs(t.strong,{children:["Bottom tab bar chỉ hiển thị khi page có ",n.jsx(t.code,{children:"bottomTabBarId"})]}),": Nếu page không có ",n.jsx(t.code,{children:"bottomTabBarId"})," hoặc ",n.jsx(t.code,{children:"bottomTabBarId"})," không khớp với bất kỳ item nào, bottom tab bar sẽ không hiển thị"]}),`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Path matching"}),": ",n.jsx(t.code,{children:"path"})," trong item phải khớp với ",n.jsx(t.code,{children:"pathname"})," của page để navigation hoạt động đúng"]}),`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Params"}),": Bạn có thể thêm ",n.jsx(t.code,{children:"params"})," vào item để truyền query parameters khi navigate:",`
-`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`{
-  id: 'detail',
-  name: 'Detail',
-  path: '/detail',
-  params: { id: '123' }, // Navigate đến /detail?id=123
-}
-`})}),`
-`]}),`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Hidden"}),": Khi ",n.jsx(t.code,{children:"hidden: true"}),", bottom tab bar sẽ không được render (không có trong DOM)"]}),`
-`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Safe Area"}),": ",n.jsx(t.code,{children:"safeAreaBottomOffset"})," tự động thêm padding cho safe area bottom (quan trọng trên iOS)"]}),`
-`]})]})}function l(e={}){const{wrapper:t}={...o(),...e.components};return t?n.jsx(t,{...e,children:n.jsx(i,{...e})}):i(e)}export{l as default};

package/dist-storybook/assets/CUSTOM_ERROR_BOUNDARY-G_i_6aho.js

@@ -1,250 +0,0 @@
-import{j as r}from"./iframe-CLEfhyJc.js";import{useMDXComponents as t}from"./index-7xlKHfV2.js";import{b as a}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function e(o){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...o.components};return r.jsxs(r.Fragment,{children:[`
-`,`
-`,r.jsx(a,{title:"Use Cases/Custom Error Boundary"}),`
-`,r.jsx(n.h1,{id:"custom-error-boundary",children:"Custom Error Boundary"}),`
-`,r.jsx(n.p,{children:"App framework đã có sẵn ErrorBoundary global để catch tất cả lỗi, nhưng bạn có thể thêm ErrorBoundary riêng cho từng page thông qua Layouts để bắt lỗi trước và xử lý chi tiết hơn."}),`
-`,r.jsx(n.h2,{id:"tổng-quan",children:"Tổng quan"}),`
-`,r.jsxs(n.p,{children:["App component đã được bọc với ErrorBoundary global ở ngoài cùng để catch tất cả lỗi không được handle. Tuy nhiên, bạn có thể thêm ErrorBoundary riêng cho từng page thông qua ",r.jsx(n.code,{children:"Layouts"})," trong ",r.jsx(n.code,{children:"IPageConfig"})," để:"]}),`
-`,r.jsxs(n.ul,{children:[`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Bắt lỗi trước"}),": ErrorBoundary ở page-level sẽ bắt lỗi trước ErrorBoundary global"]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Xử lý chi tiết"}),": Mỗi page có thể có error UI và logic xử lý lỗi riêng phù hợp với context"]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Isolate errors"}),": Lỗi ở một page không ảnh hưởng đến các pages khác"]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Better UX"}),": User có thể tiếp tục sử dụng các pages khác khi một page bị lỗi"]}),`
-`]}),`
-`,r.jsx(n.h2,{id:"errorboundary-global",children:"ErrorBoundary Global"}),`
-`,r.jsx(n.p,{children:"App component đã có ErrorBoundary global sẵn:"}),`
-`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`<ErrorBoundary isGlobal>{/* App content */}</ErrorBoundary>
-`})}),`
-`,r.jsx(n.p,{children:"ErrorBoundary global sẽ catch tất cả lỗi không được handle bởi các ErrorBoundary khác."}),`
-`,r.jsx(n.h2,{id:"thêm-errorboundary-cho-từng-page",children:"Thêm ErrorBoundary cho từng Page"}),`
-`,r.jsxs(n.p,{children:["Bạn có thể thêm ErrorBoundary riêng cho từng page thông qua ",r.jsx(n.code,{children:"Layouts"}),":"]}),`
-`,r.jsx(n.h3,{id:"bước-1-tạo-custom-error-boundary-layout",children:"Bước 1: Tạo Custom Error Boundary Layout"}),`
-`,r.jsx(n.p,{children:"Bạn có thể tự viết ErrorBoundary của riêng bạn:"}),`
-`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { Component } from 'react'
-import { FC, PropsWithChildren } from 'react'
-
-// Custom ErrorBoundary của riêng bạn
-class CustomErrorBoundary extends Component<
-  PropsWithChildren,
-  { hasError: boolean; error: Error | null }
-> {
-  constructor(props: PropsWithChildren) {
-    super(props)
-    this.state = { hasError: false, error: null }
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    return { hasError: true, error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    // Log error to service
-    console.error('Error caught:', error, errorInfo)
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div>
-          <h1>Something went wrong</h1>
-          <p>{this.state.error?.message}</p>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-const PageErrorBoundary: FC<PropsWithChildren> = ({ children }) => {
-  return <CustomErrorBoundary>{children}</CustomErrorBoundary>
-}
-`})}),`
-`,r.jsx(n.h3,{id:"bước-2-sử-dụng-trong-page-config",children:"Bước 2: Sử dụng trong Page Config"}),`
-`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { App, type IAppConfig } from '@v-miniapp/ui-react'
-import { PageErrorBoundary } from './layouts/PageErrorBoundary'
-
-const appConfig: IAppConfig = {
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      // Wrap page với ErrorBoundary riêng
-      Layouts: [PageErrorBoundary],
-    },
-    {
-      pathname: '/settings',
-      Component: SettingsPage,
-      // Page này không có ErrorBoundary riêng, sẽ dùng global
-    },
-    {
-      pathname: '/detail',
-      Component: DetailPage,
-      // Có thể kết hợp với các layouts khác
-      Layouts: [PageErrorBoundary, HeaderLayout],
-    },
-  ],
-}
-
-export function MiniApp() {
-  return <App config={appConfig} />
-}
-`})}),`
-`,r.jsx(n.h2,{id:"thứ-tự-xử-lý-lỗi",children:"Thứ tự xử lý lỗi"}),`
-`,r.jsx(n.p,{children:"Khi có lỗi xảy ra, ErrorBoundary sẽ được gọi theo thứ tự từ trong ra ngoài:"}),`
-`,r.jsxs(n.ol,{children:[`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Page-level ErrorBoundary"})," (nếu có trong Layouts) - Bắt lỗi trước"]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Global ErrorBoundary"})," (trong App component) - Bắt các lỗi còn lại"]}),`
-`]}),`
-`,r.jsx(n.p,{children:"Nếu page có ErrorBoundary riêng và nó catch được lỗi, Global ErrorBoundary sẽ không nhận được lỗi đó."}),`
-`,r.jsx(n.h2,{id:"ví-dụ-nâng-cao",children:"Ví dụ nâng cao"}),`
-`,r.jsx(n.h3,{id:"custom-error-ui-cho-từng-page",children:"Custom Error UI cho từng page"}),`
-`,r.jsx(n.p,{children:"Bạn có thể tạo các ErrorBoundary khác nhau với error UI và logic xử lý riêng. Có thể sử dụng ErrorBoundary có sẵn hoặc tự viết:"}),`
-`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { Component, type ReactNode } from 'react'
-import { FC, PropsWithChildren } from 'react'
-
-// ErrorBoundary với custom error UI cho home page
-class HomeErrorBoundary extends Component<
-  PropsWithChildren,
-  { hasError: boolean }
-> {
-  constructor(props: PropsWithChildren) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return <div>Home page error occurred</div>
-    }
-    return this.props.children
-  }
-}
-
-// ErrorBoundary với custom error UI cho settings page
-class SettingsErrorBoundary extends Component<
-  PropsWithChildren,
-  { hasError: boolean }
-> {
-  constructor(props: PropsWithChildren) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return <div>Settings page error occurred</div>
-    }
-    return this.props.children
-  }
-}
-
-const HomeErrorBoundaryWrapper: FC<PropsWithChildren> = ({ children }) => {
-  return <HomeErrorBoundary>{children}</HomeErrorBoundary>
-}
-
-const SettingsErrorBoundaryWrapper: FC<PropsWithChildren> = ({ children }) => {
-  return <SettingsErrorBoundary>{children}</SettingsErrorBoundary>
-}
-
-const appConfig: IAppConfig = {
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      Layouts: [HomeErrorBoundaryWrapper],
-    },
-    {
-      pathname: '/settings',
-      Component: SettingsPage,
-      Layouts: [SettingsErrorBoundaryWrapper],
-    },
-  ],
-}
-`})}),`
-`,r.jsx(n.h3,{id:"kết-hợp-với-các-layouts-khác",children:"Kết hợp với các Layouts khác"}),`
-`,r.jsx(n.p,{children:"Bạn có thể kết hợp ErrorBoundary với các layouts khác. Thứ tự trong array sẽ quyết định thứ tự wrap:"}),`
-`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`import { Component } from 'react'
-import { FC, PropsWithChildren } from 'react'
-
-// Tự viết ErrorBoundary hoặc sử dụng từ @v-miniapp/ui-react
-class PageErrorBoundary extends Component<
-  PropsWithChildren,
-  { hasError: boolean }
-> {
-  constructor(props: PropsWithChildren) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return <div>Page error occurred</div>
-    }
-    return this.props.children
-  }
-}
-
-const PageErrorBoundaryWrapper: FC<PropsWithChildren> = ({ children }) => {
-  return <PageErrorBoundary>{children}</PageErrorBoundary>
-}
-
-const HeaderLayout: FC<PropsWithChildren> = ({ children }) => {
-  return (
-    <div className="header-layout">
-      <header>Header</header>
-      {children}
-    </div>
-  )
-}
-
-const AuthLayout: FC<PropsWithChildren> = ({ children }) => {
-  return <div className="auth-layout">{children}</div>
-}
-
-const appConfig: IAppConfig = {
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      // Thứ tự wrap: AuthLayout → HeaderLayout → PageErrorBoundaryWrapper → HomePage
-      Layouts: [AuthLayout, HeaderLayout, PageErrorBoundaryWrapper],
-    },
-  ],
-}
-`})}),`
-`,r.jsxs(n.p,{children:[r.jsx(n.strong,{children:"Lưu ý:"})," Phần tử ",r.jsx(n.strong,{children:"cuối cùng"})," trong array sẽ wrap ở ",r.jsx(n.strong,{children:"trong cùng"})," (gần Component nhất). Với ",r.jsx(n.code,{children:"Layouts: [AuthLayout, HeaderLayout, PageErrorBoundaryWrapper]"}),", kết quả render sẽ là:"]}),`
-`,r.jsx(n.pre,{children:r.jsx(n.code,{className:"language-tsx",children:`<AuthLayout>
-  <HeaderLayout>
-    <PageErrorBoundaryWrapper>
-      <HomePage />
-    </PageErrorBoundaryWrapper>
-  </HeaderLayout>
-</AuthLayout>
-`})}),`
-`,r.jsx(n.h2,{id:"lưu-ý-quan-trọng",children:"Lưu ý quan trọng"}),`
-`,r.jsxs(n.ul,{children:[`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Wrap từng màn hình"}),": Layouts phải wrap từng page riêng biệt, không hỗ trợ nested routes hoặc group layout cho nhiều pages. Mỗi page cần wrap ErrorBoundary riêng nếu muốn xử lý lỗi độc lập."]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Không group Layout"}),": Không thể định nghĩa Layouts ở app-level để áp dụng cho nhiều pages. Layouts chỉ có thể được khai báo trong ",r.jsx(n.code,{children:"IPageConfig"})," của từng page."]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"ErrorBoundary scope"}),": ErrorBoundary trong Layouts chỉ catch lỗi của page component và các component con của nó, không catch lỗi của các pages khác."]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Bắt lỗi trước"}),": Page-level ErrorBoundary sẽ bắt lỗi trước Global ErrorBoundary, cho phép bạn xử lý lỗi chi tiết hơn cho từng page."]}),`
-`]}),`
-`,r.jsx(n.h2,{id:"best-practices",children:"Best Practices"}),`
-`,r.jsxs(n.ol,{children:[`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Chỉ bọc page cần thiết"}),": Không cần bọc ErrorBoundary cho tất cả pages, chỉ bọc những page có logic phức tạp hoặc cần xử lý lỗi riêng"]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Đặt ErrorBoundary ở trong cùng"}),": Nếu kết hợp với các layouts khác, thường nên đặt ErrorBoundary ở trong cùng (cuối array) để chỉ catch lỗi của page component"]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Custom error UI"}),": Tùy chỉnh error UI phù hợp với context của từng page để có UX tốt hơn"]}),`
-`,r.jsxs(n.li,{children:[r.jsx(n.strong,{children:"Error logging"}),": Có thể thêm error logging trong ErrorBoundary để track lỗi"]}),`
-`]})]})}function l(o={}){const{wrapper:n}={...t(),...o.components};return n?r.jsx(n,{...o,children:r.jsx(e,{...o})}):e(o)}export{l as default};

package/dist-storybook/assets/GETTING_STARTED-Bf6ENjZo.js

@@ -1,77 +0,0 @@
-import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as c}from"./index-7xlKHfV2.js";import{b as a}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function t(e){const i={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...c(),...e.components};return n.jsxs(n.Fragment,{children:[`
-`,`
-`,n.jsx(a,{title:"Getting Started",parameters:{options:{nav:{icon:""}}}}),`
-`,n.jsx(i.h1,{id:"getting-started-với-v-miniappui-react",children:"Getting Started với @v-miniapp/ui-react"}),`
-`,n.jsxs(i.p,{children:[n.jsx(i.strong,{children:"@v-miniapp/ui-react"})," là bộ thư viện component React mạnh mẽ được thiết kế đặc biệt cho việc phát triển V-MiniApp."]}),`
-`,n.jsx(i.h2,{id:"cài-đặt",children:"Cài đặt"}),`
-`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-bash",children:`npm install @v-miniapp/ui-react
-# hoặc
-pnpm add @v-miniapp/ui-react
-# hoặc
-yarn add @v-miniapp/ui-react
-`})}),`
-`,n.jsx(i.h2,{id:"import-styles",children:"Import Styles"}),`
-`,n.jsx(i.h3,{id:"option-1-sử-dụng-css-chuẩn",children:"Option 1: Sử dụng CSS chuẩn"}),`
-`,n.jsx(i.p,{children:"Đảm bảo bạn import CSS từ phía component để UI hoạt động tốt nhất:"}),`
-`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`import '@v-miniapp/ui-react/styles.css'
-`})}),`
-`,n.jsx(i.h3,{id:"option-2-tích-hợp-với-tailwind-css",children:"Option 2: Tích hợp với Tailwind CSS"}),`
-`,n.jsx(i.p,{children:"Nếu mini app của bạn đang sử dụng Tailwind CSS, bạn có thể tích hợp dễ dàng bằng cách thêm một dòng import vào file Tailwind config:"}),`
-`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-css",children:`/* tailwind.css hoặc file CSS chính của bạn */
-@import '@v-miniapp/ui-react/tailwind';
-`})}),`
-`,n.jsxs(i.p,{children:[n.jsx(i.strong,{children:"Lưu ý:"})," Khi tích hợp với Tailwind, bạn không cần import ",n.jsx(i.code,{children:"@v-miniapp/ui-react/styles.css"})," nữa."]}),`
-`,n.jsx(i.h2,{id:"ví-dụ-bắt-đầu-sử-dụng",children:"Ví dụ bắt đầu sử dụng"}),`
-`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`import { App, type IAppConfig } from '@v-miniapp/ui-react'
-
-// Tạo các page components
-const HomePage = () => {
-  return <div>Trang chủ</div>
-}
-
-const SettingsPage = () => {
-  return <div>Cài đặt</div>
-}
-
-const appConfig: IAppConfig = {
-  // Animation giữa các pages: 'none', 'slide_up', 'slide_left', 'fade_in'
-  animation: {
-    type: 'slide_left',
-  },
-  // Keep-alive: giữ state của pages khi navigate
-  keepAlive: {
-    enable: true,
-  },
-  
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      navigationBar: {
-        title: 'Trang chủ',
-      },
-    },
-    {
-      pathname: '/settings',
-      Component: SettingsPage,
-      navigationBar: {
-        title: 'Cài đặt',
-      },
-    },
-  ],
-}
-
-export const MiniApp: FC = () => {
-  return <App config={appConfig} />
-}
-`})}),`
-`,n.jsx(i.h2,{id:"️-lưu-ý-quan-trọng",children:"⚠️ Lưu ý quan trọng"}),`
-`,n.jsxs(i.p,{children:["Khi sử dụng component ",n.jsx(i.code,{children:"App"})," từ ",n.jsx(i.code,{children:"@v-miniapp/ui-react"}),", bạn đã có sẵn ",n.jsx(i.code,{children:"NavigationBar"})," component được quản lý bởi SDK. Nếu bạn cấu hình ",n.jsx(i.code,{children:"window"})," trong ",n.jsx(i.code,{children:"app-config.json"})," để hiển thị title bar/navigation bar từ native, sẽ có thể bị trùng lặp với component của ",n.jsx(i.code,{children:"ui-react"}),"."]}),`
-`,n.jsxs(i.p,{children:[n.jsx(i.strong,{children:"Giải pháp:"})," Nếu bạn sử dụng ",n.jsx(i.code,{children:"NavigationBar"})," từ ",n.jsx(i.code,{children:"@v-miniapp/ui-react"}),", bạn nên cấu hình trong ",n.jsx(i.code,{children:"app-config.json"})," để ẩn native title bar:"]}),`
-`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-json",children:`{
-  "window": {
-    "defaultTitle": "",
-    "transparentTitle": "always"
-  }
-}
-`})})]})}function h(e={}){const{wrapper:i}={...c(),...e.components};return i?n.jsx(i,{...e,children:n.jsx(t,{...e})}):t(e)}export{h as default};

package/dist-storybook/assets/KEEP_ALIVE-CicDtVw6.js

@@ -1,126 +0,0 @@
-import{j as e}from"./iframe-CLEfhyJc.js";import{useMDXComponents as a}from"./index-7xlKHfV2.js";import{b as l,M as t}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function r(i){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...a(),...i.components};return e.jsxs(e.Fragment,{children:[`
-`,`
-`,e.jsx(l,{title:"App Framework/Keep Alive"}),`
-`,e.jsx(n.h1,{id:"keep-alive",children:"Keep Alive"}),`
-`,e.jsx(n.p,{children:"Keep Alive cho phép giữ các pages trong DOM (ẩn) thay vì unmount khi navigate, giúp giữ state và scroll position."}),`
-`,e.jsx(n.h2,{id:"cấu-trúc",children:"Cấu trúc"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`type IAppKeepAliveState = {
-  enable?: boolean
-  maxStack?: number
-  freeze?: boolean
-  freezeDelay?: number
-}
-
-// Page-level có thể override bằng boolean hoặc config object
-type IPageState = {
-  keepAlive?: boolean | IAppKeepAliveState
-  freeze?: boolean
-  freezeDelay?: number
-}
-`})}),`
-`,e.jsx(n.h2,{id:"thuộc-tính",children:"Thuộc tính"}),`
-`,e.jsx(t,{children:"\n| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `enable` | `boolean` | `true` | Bật/tắt keep-alive |\n| `maxStack` | `number` | `5` | Số lượng pages tối đa được giữ trong DOM |\n| `freeze` | `boolean` | `true` | Bật/tắt freeze (ngăn re-render cho pages không hiển thị) |\n| `freezeDelay` | `number` | `3000` | Delay (ms) trước khi freeze page sau khi navigate đi |\n"}),`
-`,e.jsx(n.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Khi navigate đi"}),": Page được ẩn (",e.jsx(n.code,{children:"display: none"}),") nhưng vẫn trong DOM"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Khi navigate đến"}),": Page được hiển thị (",e.jsx(n.code,{children:"display: block"}),")"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Freeze"}),": Các pages không hiển thị được freeze bằng ",e.jsx(n.code,{children:"Freeze"})," component để tránh re-render. Freeze được áp dụng sau ",e.jsx(n.code,{children:"freezeDelay"})," (mặc định: 3000ms) để cho phép animation hoàn thành."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Giới hạn"}),": Chỉ giữ tối đa ",e.jsx(n.code,{children:"maxStack"})," pages trong DOM"]}),`
-`]}),`
-`,e.jsx(n.h2,{id:"cấu-hình",children:"Cấu hình"}),`
-`,e.jsx(n.h3,{id:"app-level-config",children:"App-level Config"}),`
-`,e.jsx(n.p,{children:"Cấu hình keep-alive mặc định cho tất cả pages:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  keepAlive: {
-    enable: true,      // Bật keep-alive
-    maxStack: 5,       // Giữ tối đa 5 pages
-    freeze: true,      // Bật freeze để tránh re-render
-    freezeDelay: 3000, // Freeze sau 3 giây
-  },
-  pages: [
-    // Tất cả pages sẽ được keep-alive
-  ],
-}
-`})}),`
-`,e.jsx(n.h3,{id:"page-level-config",children:"Page-level Config"}),`
-`,e.jsx(n.p,{children:"Override keep-alive cho từng page cụ thể:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  keepAlive: {
-    enable: true,
-    maxStack: 5,
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      // Page này dùng app-level config (keep-alive enabled)
-    },
-    {
-      pathname: '/login',
-      Component: LoginPage,
-      // Tắt keep-alive cho page này
-      keepAlive: false,
-    },
-    {
-      pathname: '/detail',
-      Component: DetailPage,
-      // Override config cho page này
-      keepAlive: {
-        enable: true,
-        maxStack: 3, // Giữ ít hơn pages khác
-      },
-      // Tắt freeze cho page này (vẫn keep-alive nhưng không freeze)
-      freeze: false,
-    },
-    {
-      pathname: '/video',
-      Component: VideoPage,
-      keepAlive: true,
-      // Freeze ngay lập tức (không delay)
-      freeze: true,
-      freezeDelay: 0,
-    },
-  ],
-}
-`})}),`
-`,e.jsx(n.h2,{id:"lợi-ích",children:"Lợi ích"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Giữ state"}),": Component state không bị mất khi navigate"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Giữ scroll position"}),": Scroll position được giữ nguyên (kết hợp với ",e.jsx(n.code,{children:"scrollRestoration"}),")"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Form data"}),": Form data không bị mất khi navigate back"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Performance"}),": Không cần re-render khi navigate back/forward"]}),`
-`]}),`
-`,e.jsx(n.h2,{id:"lưu-ý",children:"Lưu ý"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"Pages được giữ trong DOM nên vẫn tốn memory"}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"maxStack"})," giới hạn số pages để tránh tốn quá nhiều memory"]}),`
-`,e.jsx(n.li,{children:"Chỉ pages trong stack (theo thứ tự) mới được keep-alive"}),`
-`,e.jsxs(n.li,{children:["Pages ngoài ",e.jsx(n.code,{children:"maxStack"})," sẽ bị unmount"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Freeze"}),": Khi ",e.jsx(n.code,{children:"freeze: true"}),", pages không hiển thị sẽ bị freeze để tránh re-render, giúp tiết kiệm performance"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Freeze Delay"}),": ",e.jsx(n.code,{children:"freezeDelay"})," cho phép animation hoàn thành trước khi freeze. Nếu set ",e.jsx(n.code,{children:"0"}),", page sẽ freeze ngay lập tức"]}),`
-`]}),`
-`,e.jsx(n.h2,{id:"ví-dụ",children:"Ví dụ"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  keepAlive: {
-    enable: true,
-    maxStack: 5,
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      // Keep-alive enabled
-    },
-    {
-      pathname: '/list',
-      Component: ListPage,
-      // Keep-alive enabled, giữ scroll position khi back
-    },
-    {
-      pathname: '/login',
-      Component: LoginPage,
-      keepAlive: false, // Tắt keep-alive, reset mỗi lần vào
-    },
-  ],
-}
-`})})]})}function g(i={}){const{wrapper:n}={...a(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(r,{...i})}):r(i)}export{g as default};