@vetc-miniapp/ui-react 0.0.24 → 0.0.26

package/src/ui-react/hooks/use-app-state.js

@@ -1,35 +0,0 @@
-/**
- * @typedef {"light" | "dark"} ThemeMode
- */
-
-/**
- * @typedef {Object} IAppState
- * @property {string=} locale
- * @property {ThemeMode=} theme
- */
-
-/**
- * @typedef {Object} IPageConfig
- * @property {string} key                - Key định danh page dùng cho navigation
- * @property {string=} title             - Tên hiển thị (header native)
- * @property {string} url                - URL nội bộ miniapp (nếu cần render state)
- * @property {boolean=} canGoBack        - Có cho phép back không
- * @property {boolean=} isRoot           - Có phải root page không
- * @property {Object<string, any>=} defaultParams - Params mặc định khi mở page
- */
-
-/**
- * @typedef {Object} IAppConfig
- * @property {IPageConfig[]} pages
- * @property {string=} locale
- * @property {ThemeMode=} theme
- */
-
-/** @type {IAppConfig} */
-export const appConfig = {
-  locale: "vi",
-  theme: "light",
-
-  pages: [
-  ]
-};

package/src/ui-react/hooks/use-did-hide.js

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export function useDidHide(route, callback) {
-  const saved = useRef(callback);
-
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (!window.MiniApp) return;
-
-    const handler = (data) => {
-      if (data?.route === route) {
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("didHide", handler);
-
-    return () => {
-      window.MiniApp.off("didHide", handler);
-    };
-  }, [route]);
-}

package/src/ui-react/hooks/use-did-hide.ts

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type DidHidePayload = {
-  route?: string;
-  [key: string]: any;
-};
-
-export function useDidHide(
-  route: string,
-  callback: (data?: DidHidePayload) => void
-): void {
-  const saved = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data?: DidHidePayload) => {
-      if (data?.route === route) {
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("didHide", handler);
-
-    return () => {
-      window.MiniApp.off("didHide", handler);
-    };
-  }, [route]);
-}

package/src/ui-react/hooks/use-did-show.js

@@ -1,26 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export function useDidShow(route, callback) {
-  const saved = useRef(callback);
-
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (!window.MiniApp) return;
-
-    const handler = (data) => {
-      if (data?.route === route) {
-        console.log("didShow", data)
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("didShow", handler);
-
-    return () => {
-      window.MiniApp.off("didShow", handler);
-    };
-  }, [route]);
-}

package/src/ui-react/hooks/use-did-show.ts

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type DidShowPayload = {
-  route?: string;
-  [key: string]: any;
-};
-
-export function useDidShow(
-  route: string,
-  callback: (data?: DidShowPayload) => void
-): void {
-  const saved = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data?: DidShowPayload) => {
-      if (data?.route === route) {
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("didShow", handler);
-
-    return () => {
-      window.MiniApp.off("didShow", handler);
-    };
-  }, [route]);
-}

package/src/ui-react/hooks/use-listener-scan-qr.js

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useListenerScanQr
- *
- * Lắng nghe kết quả scan QR từ Native
- */
-export function useListenerScanQr(callback) {
-  const savedCallback = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data) => {
-      try {
-        savedCallback.current?.(data);
-      } catch (err) {
-        console.error("[useListenerScanQr error]", err);
-      }
-    };
-
-    window.MiniApp.on("onScanQRResult", handler);
-
-    return () => {
-      window.MiniApp.off("onScanQRResult", handler);
-    };
-  }, []);
-}

package/src/ui-react/hooks/use-listener-scan-qr.ts

@@ -1,52 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type ScanQrResult = {
-  raw: string;
-  type?: string;
-  [key: string]: any;
-};
-
-type MiniAppBridge = {
-  on: (event: string, callback: (data: any) => void) => void;
-  off: (event: string, callback: (data: any) => void) => void;
-};
-
-declare global {
-  interface Window {
-    MiniApp?: MiniAppBridge;
-  }
-}
-
-/**
- * useListenerScanQr
- *
- * Lắng nghe kết quả scan QR từ Native
- */
-export function useListenerScanQr(
-  callback: (data: ScanQrResult) => void
-): void {
-  const savedCallback = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data: ScanQrResult) => {
-      try {
-        savedCallback.current?.(data);
-      } catch (err) {
-        console.error("[useListenerScanQr error]", err);
-      }
-    };
-
-    window.MiniApp.on("scanQrResult", handler);
-
-    return () => {
-      window.MiniApp.off("scanQrResult", handler);
-    };
-  }, []);
-}

package/src/ui-react/hooks/use-navigate.js

@@ -1,15 +0,0 @@
-import { callHost } from '../bridge.js';
-
-export function useNavigate() {
-  return (route, params = {}, options = {}) => {
-  // POP navigation
-    if (typeof route === "number") {
-      return callHost("navigate", {
-        type: "native",
-        action: "pop",
-        delta: Math.abs(route)
-      });
-    }
-    callHost("navigate", { type: "native", action: "push", route, params, options });
-  };
-}

package/src/ui-react/hooks/use-navigate.ts

@@ -1,41 +0,0 @@
-import { callHost } from "../bridge";
-
-/* ================= Types ================= */
-
-export type NavigateMode = "push" | "replace";
-
-export interface NavigateOptions {
-  replace?: boolean;
-  popTo?: string;
-}
-
-export type NavigateParams = Record<string, unknown>;
-
-export type MiniAppRoute = string | number; // có thể đổi sang union type nếu muốn strict
-
-/* ================= Hook ================= */
-
-export function useNavigate() {
-  return (
-    route: MiniAppRoute,
-    params: NavigateParams = {},
-    options: NavigateOptions = {}
-  ): void => {
-    // POP navigation
-    if (typeof route === "number") {
-      return callHost("navigate", {
-        type: "native",
-        action: "pop",
-        delta: Math.abs(route),
-      });
-    }
-    // Gửi sang native host
-    callHost("navigate", {
-      type: "native",
-      action: "push",
-      route,
-      params,
-      options,
-    }).catch(console.error);
-  };
-}

package/src/ui-react/hooks/use-tap-app-bar.js

@@ -1,26 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export function useTapAppBar(route, callback) {
-  const saved = useRef(callback);
-
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (!window.MiniApp) return;
-
-    const handler = (data) => {
-      if (data?.route === route) {
-        console.log("onTapAppBar", data)
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("onTapAppBar", handler);
-
-    return () => {
-      window.MiniApp.off("onTapAppBar", handler);
-    };
-  }, [route]);
-}

package/src/ui-react/hooks/use-tap-app-bar.ts

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type TapAppBarPayload = {
-  route?: string;
-  [key: string]: any;
-};
-
-export function useTapAppBar(
-  route: string,
-  callback: (data?: TapAppBarPayload) => void
-): void {
-  const saved = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data?: TapAppBarPayload) => {
-      if (data?.route === route) {
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("onTapAppBar", handler);
-
-    return () => {
-      window.MiniApp.off("onTapAppBar", handler);
-    };
-  }, [route]);
-}

package/src/ui-react/index.js

@@ -1,9 +0,0 @@
-export * from './hooks/use-app-pause.js';
-export * from './hooks/use-app-resume.js';
-export * from './hooks/use-did-show.js';
-export * from './hooks/use-did-hide.js';
-export * from './hooks/use-tap-app-bar.js';
-export * from './hooks/use-navigate.js';
-export * from './hooks/use-app-state.js';
-export * from './hooks/use-listener-scan-qr.js';
-export * from './components/app.jsx';

package/src/ui-react/styles/VETCProvider.tsx

@@ -1,152 +0,0 @@
-/**
- * VETC Design System — Ant Design Theme Provider
- * Wraps children with ConfigProvider using VETC token overrides.
- */
-import React from 'react';
-import { ConfigProvider, App as AntApp, theme } from 'antd';
-import { colorAlias, colorGlobal } from '../tokens/colors';
-
-export const vetcAntdTheme = {
-  token: {
-    // Brand / Primary
-    colorPrimary:           colorAlias.brand,          // #25a45e
-    colorPrimaryHover:      colorGlobal.green35,
-    colorPrimaryActive:     colorAlias.brandDark,
-    colorPrimaryBg:         colorGlobal.green02,
-    colorPrimaryBgHover:    colorGlobal.green05,
-
-    // Error / Danger
-    colorError:             colorAlias.negative,       // #da2c39
-    colorErrorHover:        colorGlobal.red60,
-    colorErrorBg:           colorGlobal.red02,
-
-    // Warning
-    colorWarning:           colorAlias.warning,        // #ff8c2f
-    colorWarningBg:         colorGlobal.orange02,
-
-    // Success
-    colorSuccess:           colorAlias.positive,       // #208758
-    colorSuccessBg:         colorGlobal.green02,
-
-    // Text
-    colorText:              colorAlias.primaryOnTheme,    // #181719
-    colorTextSecondary:     colorAlias.secondaryOnTheme,  // #5e5d64
-    colorTextDisabled:      colorAlias.disabledContent,   // #abacb2
-    colorTextPlaceholder:   colorGlobal.gray50,
-
-    // Background
-    colorBgContainer:       colorAlias.theme,           // #ffffff
-    colorBgLayout:          colorAlias.themeVariant,    // #f1f1f2
-    colorBgSpotlight:       colorAlias.inverseTheme,
-
-    // Border
-    colorBorder:            colorGlobal.gray20,         // #c6c8cc
-    colorBorderSecondary:   colorGlobal.gray10,         // #e3e4e6
-    colorSplit:             colorGlobal.gray10,
-
-    // Fill states
-    colorFill:              colorGlobal.gray05,
-    colorFillSecondary:     colorGlobal.gray10,
-    colorFillTertiary:      colorGlobal.gray15,
-
-    // Typography
-    fontFamily:             '"Roboto", system-ui, -apple-system, sans-serif',
-    fontSize:               16,
-    fontSizeSM:             13,
-    fontSizeLG:             18,
-    fontSizeXL:             19,
-    fontSizeHeading1:       32,
-    fontSizeHeading2:       28,
-    fontSizeHeading3:       24,
-    fontSizeHeading4:       19,
-    fontSizeHeading5:       16,
-    fontWeightStrong:       600,
-    lineHeight:             1.5,
-
-    // Shape
-    borderRadius:           8,
-    borderRadiusSM:         6,
-    borderRadiusLG:         12,
-    borderRadiusXS:         4,
-
-    // Size
-    controlHeight:          48,
-    controlHeightSM:        32,
-    controlHeightLG:        56,
-
-    // Padding
-    paddingXS:              8,
-    paddingSM:              12,
-    padding:                16,
-    paddingMD:              16,
-    paddingLG:              24,
-
-    // Motion
-    motionDurationFast:     '150ms',
-    motionDurationMid:      '250ms',
-  },
-  components: {
-    Button: {
-      primaryColor:           '#ffffff',
-      defaultBorderColor:     colorGlobal.gray20,
-      defaultColor:           colorAlias.primaryOnTheme,
-      borderRadius:           12,
-      borderRadiusSM:         8,
-      borderRadiusLG:         12,
-      controlHeight:          48,
-      controlHeightSM:        32,
-      paddingInline:          16,
-      paddingInlineSM:        12,
-      fontWeight:             600,
-    },
-    Input: {
-      borderRadius:           8,
-      controlHeight:          48,
-      paddingInline:          12,
-      colorBorder:            colorGlobal.gray20,
-      hoverBorderColor:       colorAlias.outline,
-      activeBorderColor:      colorAlias.brand,
-    },
-    Select: {
-      borderRadius:           8,
-      controlHeight:          48,
-    },
-    Checkbox: {
-      borderRadius:           4,
-      controlInteractiveSize: 20,
-    },
-    Radio: {
-      radioSize:              20,
-      dotSize:                8,
-    },
-    Switch: {
-      trackHeight:            32,
-      trackMinWidth:          52,
-      handleSize:             28,
-      colorPrimary:           colorAlias.brand,
-    },
-    Modal: {
-      borderRadiusLG:         16,
-      paddingContentHorizontalLG: 16,
-      paddingMD:              16,
-    },
-    Card: {
-      borderRadius:           16,
-      paddingLG:              16,
-    },
-  },
-};
-
-export interface VETCProviderProps {
-  children: React.ReactNode;
-}
-
-export function VETCProvider({ children }: VETCProviderProps) {
-  return (
-    <ConfigProvider theme={{ ...vetcAntdTheme, algorithm: theme.defaultAlgorithm }}>
-      <AntApp>
-        {children}
-      </AntApp>
-    </ConfigProvider>
-  );
-}

package/src/ui-react/tokens/colors.ts

@@ -1,91 +0,0 @@
-/**
- * VETC Design System — Color Tokens
- * Resolved from tokens_vetc.json
- */
-
-// ─── Global palette ───────────────────────────────────────────────────────────
-export const colorGlobal = {
-  white: '#ffffff',
-  black: '#000000',
-
-  // Blue
-  blue02: '#f4fbff', blue05: '#e4f4ff', blue10: '#cae9ff',
-  blue15: '#afddff', blue20: '#95d1ff', blue25: '#7ac4fb',
-  blue30: '#60b6f4', blue35: '#45a8eb', blue40: '#2b99df',
-  blue45: '#108ad1', blue50: '#007ac1', blue60: '#005c9e',
-  blue70: '#004179', blue80: '#002853', blue90: '#00122a',
-
-  // Green (Brand)
-  green02: '#f2fef2', green05: '#dffbdf', green10: '#bff4bf',
-  green15: '#9feca7', green20: '#82e194', green25: '#68d583',
-  green30: '#50c775', green35: '#39b669', green40: '#25a45e',
-  green45: '#23965b', green50: '#208758', green60: '#1b6b4d',
-  green70: '#15503f', green80: '#0f342d', green90: '#081a18',
-
-  // Gray
-  gray02: '#f9fafa', gray05: '#f1f1f2', gray10: '#e3e4e6',
-  gray15: '#d4d6d9', gray20: '#c6c8cc', gray25: '#b8babf',
-  gray30: '#abacb2', gray35: '#9d9ea5', gray40: '#8f9098',
-  gray45: '#82828a', gray50: '#74747d', gray60: '#5e5d64',
-  gray70: '#47464b', gray80: '#2f2f32', gray90: '#181719',
-
-  // Red
-  red02: '#fff6f9', red05: '#ffe7f0', red10: '#ffd0de',
-  red15: '#ffb8cc', red20: '#ffa1b8', red25: '#ff89a3',
-  red30: '#fb718d', red35: '#f55c78', red40: '#ee4b62',
-  red45: '#e53b4d', red50: '#da2c39', red60: '#b4211f',
-  red70: '#852419', red80: '#571f12', red90: '#2b130a',
-
-  // Orange
-  orange02: '#fffbf0', orange05: '#fff3da', orange10: '#ffe3b4',
-  orange15: '#ffd08f', orange20: '#ffbb69', orange25: '#ffa447',
-  orange30: '#ff8c2f', orange35: '#ef7720', orange40: '#dd6e1d',
-  orange45: '#cb651b', orange50: '#b85c18', orange60: '#934913',
-  orange70: '#6f370f', orange80: '#4a250a', orange90: '#251205',
-
-  // Yellow
-  yellow02: '#fff8e7', yellow05: '#ffefbc', yellow10: '#ffe374',
-  yellow15: '#ffd62b', yellow20: '#f9c600', yellow25: '#e9b900',
-  yellow30: '#daaa00', yellow35: '#ca9b00', yellow40: '#bb8b00',
-  yellow45: '#ab7b00', yellow50: '#9c6b00', yellow60: '#7c4b00',
-  yellow70: '#5d2f00', yellow80: '#3e1800', yellow90: '#1f0700',
-} as const;
-
-// ─── Semantic alias tokens ─────────────────────────────────────────────────────
-export const colorAlias = {
-  brand:                  colorGlobal.green40,    // #25a45e
-  brandDark:              colorGlobal.green50,    // #208758
-  brandLight:             colorGlobal.green05,    // #dffbdf
-
-  positive:               colorGlobal.green50,    // #208758
-  positiveVariant:        colorGlobal.green05,    // #dffbdf
-  onPositive:             colorGlobal.white,
-  onPositiveVariant:      colorGlobal.green60,
-
-  negative:               colorGlobal.red50,      // #da2c39
-  onNegative:             colorGlobal.white,
-
-  warning:                colorGlobal.orange30,   // #ff8c2f
-  onWarning:              colorGlobal.white,
-
-  outline:                colorGlobal.gray50,     // #74747d
-  outlineVariant:         colorGlobal.gray10,     // #e3e4e6
-  outlineInverse:         colorGlobal.gray40,
-
-  theme:                  colorGlobal.white,
-  themeVariant:           colorGlobal.gray05,     // #f1f1f2
-  inverseTheme:           colorGlobal.gray90,
-
-  primaryOnTheme:         colorGlobal.gray90,     // #181719
-  secondaryOnTheme:       colorGlobal.gray60,     // #5e5d64
-  primaryOnInverseTheme:  colorGlobal.white,
-  secondaryOnInverseTheme:colorGlobal.gray20,
-
-  disabledBackground:     colorGlobal.gray10,     // #e3e4e6
-  disabledContent:        colorGlobal.gray30,     // #abacb2
-  disabledOutline:        colorGlobal.gray20,
-
-  overlay:                'rgba(0, 0, 0, 0.4)',
-  overlayVariant:         'rgba(0, 0, 0, 0.16)',
-  skeleton:               'rgba(0, 0, 0, 0.1)',
-} as const;

package/src/ui-react/tokens/spacing.ts

@@ -1,59 +0,0 @@
-/**
- * VETC Design System — Spacing & Sizing Tokens
- * Base unit: 4px
- */
-export const spacing = {
-  0:  '0px',
-  1:  '1px',
-  2:  '2px',
-  4:  '4px',
-  6:  '6px',
-  8:  '8px',
-  10: '10px',
-  12: '12px',
-  14: '14px',
-  16: '16px',
-  20: '20px',
-  24: '24px',
-  32: '32px',
-  40: '40px',
-  48: '48px',
-  56: '56px',
-  64: '64px',
-  72: '72px',
-  80: '80px',
-} as const;
-
-export const borderRadius = {
-  none:  '0px',
-  xs:    '4px',
-  sm:    '6px',
-  md:    '8px',
-  lg:    '12px',
-  xl:    '16px',
-  '2xl': '24px',
-  pill:  '1000px',
-} as const;
-
-/** Component height standards from Figma */
-export const componentHeight = {
-  buttonLg:    '48px',
-  buttonSm:    '32px',
-  input:       '48px',
-  navBar:      '56px',
-  bottomNav:   '56px',
-  tabBar:      '56px',
-  listItem:    '56px',
-  chip:        '32px',
-  chipSm:      '24px',
-  iconStd:     '24px',
-  iconSm:      '20px',
-} as const;
-
-/** Shadow tokens */
-export const shadow = {
-  none:  'none',
-  sm:    '0 1px 4px rgba(0, 0, 0, 0.08)',
-  md:    '0 2px 8px rgba(0, 0, 0, 0.12)',
-  lg:    '0 4px 16px rgba(0, 0, 0, 0.16)',
-} as const;