@v-miniapp/ui-react 1.0.37

package/README.md

@@ -0,0 +1,98 @@
+# @v-miniapp/ui-react
+
+**@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. SDK này cung cấp đầy đủ các component UI, routing, theme management và các tính năng native app như pull-to-refresh, swipe navigation, page stacking với keep-alive.
+
+📚 **Tài liệu chính thức**: [Components | V-MiniApp](https://developer.v-app.vn/components/overview)
+
+## Cài đặt
+
+```bash
+npm install @v-miniapp/ui-react
+# hoặc
+pnpm add @v-miniapp/ui-react
+# hoặc
+yarn add @v-miniapp/ui-react
+```
+
+## Import Styles
+
+### Option 1: Sử dụng CSS chuẩn
+
+Đảm bảo bạn import CSS từ phía component để UI hoạt động tốt nhất:
+
+```tsx
+import '@v-miniapp/ui-react/styles.css'
+```
+
+### Option 2: Tích hợp với Tailwind CSS
+
+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:
+
+```css
+/* tailwind.css hoặc file CSS chính của bạn */
+@import '@v-miniapp/ui-react/tailwind';
+```
+
+**Lưu ý:** Khi tích hợp với Tailwind, bạn không cần import `@v-miniapp/ui-react/styles.css` nữa.
+
+## Ví dụ bắt đầu sử dụng
+
+```tsx
+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 = () => {
+  return <App config={appConfig} />
+}
+```
+
+## ⚠️ Lưu ý quan trọng
+
+Khi sử dụng component `App` từ `@v-miniapp/ui-react`, bạn đã có sẵn `NavigationBar` component được quản lý bởi SDK. Nếu bạn cấu hình `window` trong `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 `ui-react`.
+
+**Giải pháp:** Nếu bạn sử dụng `NavigationBar` từ `@v-miniapp/ui-react`, bạn nên cấu hình trong `app-config.json` để ẩn native title bar:
+
+```json
+{
+  "window": {
+    "defaultTitle": "",
+    "transparentTitle": "always"
+  }
+}
+```

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@v-miniapp/ui-react",
+  "version": "1.0.37",
+  "type": "module",
+  "files": [
+    "dist",
+    "dist-preview"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "style": "./dist/styles.css"
+    },
+    "./*": "./dist/*",
+    "./tailwind": "./dist/tailwind/styles.css"
+  },
+  "scripts": {
+    "dev:example": "vite --config vite.config.example.ts",
+    "dev:example:showcase": "vite --config vite.config.example.showcase.ts",
+    "build:lib": "pnpm run build:lib:local && pnpm run build:lib:external",
+    "build:lib:local": "tsc -p tsconfig.lib.json && vite build --config vite.config.lib.local.ts",
+    "build:lib:external": "tsc -p tsconfig.lib.json && vite build --config vite.config.lib.external.ts",
+    "build:example": "tsc -p tsconfig.example.json && vite build --config vite.config.example.ts",
+    "build:example:showcase": "tsc -p tsconfig.example.json && vite build --config vite.config.example.showcase.ts",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build -o dist-storybook -c .storybook/build && node scripts/clean-storybook.js",
+    "generate-colors": "./scripts/generate-colors.js",
+    "generate-icons": "./scripts/generate-icons.js"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.17.23",
+    "@use-gesture/react": "^10.3.1",
+    "ahooks": "^3.9.6",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.19",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-auto-height": "^8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.24",
+    "lodash": "^4.17.23",
+    "motion": "^12.23.24",
+    "mustache": "^4.2.0",
+    "nanoid": "^5.1.6",
+    "react-freeze": "^1.0.4",
+    "serve-handler": "^6.1.6",
+    "zustand": "^5.0.9"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@storybook/addon-a11y": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-vitest": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
+    "@types/inputmask": "^5.0.7",
+    "@types/mustache": "^4.2.6",
+    "@types/node": "^24.3.3",
+    "@types/react": "19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-is": "^19.0.0",
+    "@types/use-sync-external-store": "^1.5.0",
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-storybook": "^9.1.5",
+    "globals": "^16.3.0",
+    "playwright": "^1.55.0",
+    "sass": "^1.92.1",
+    "storybook": "^9.1.17",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-static-copy": "^3.1.4",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "packageManager": "pnpm@10.16.0"
+}