@vetc-miniapp/ui-react 0.0.24 → 0.0.25

package/dist/tokens/typography.d.ts

@@ -0,0 +1,121 @@
+/**
+ * VETC Design System — Typography Tokens
+ * From Figma: Tasco DLS Mini App — Typography page
+ * Font weights: Regular=400, Medium=500, SemiBold=600, Bold=700
+ * Font sizes: 2XS=10 / XS=12 / SM=14 / Base=16 / LG=20 / XL=24 / 2XL=28 / 3XL=32 / 4XL=36
+ */
+export declare const fontFamily: {
+    readonly primary: "\"Roboto\", system-ui, -apple-system, sans-serif";
+};
+export declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+    readonly black: 900;
+};
+/** Font sizes from Figma Typography scale */
+export declare const fontSize: {
+    readonly '2xs': "10px";
+    readonly xs: "12px";
+    readonly sm: "14px";
+    readonly base: "16px";
+    readonly lg: "20px";
+    readonly xl: "24px";
+    readonly '2xl': "28px";
+    readonly '3xl': "32px";
+    readonly '4xl': "36px";
+};
+/** Line heights from Figma (pixel ratios per size) */
+export declare const lineHeight: {
+    readonly tight: "120%";
+    readonly normal: "140%";
+    readonly relaxed: "150%";
+};
+export declare const letterSpacing: {
+    readonly none: "0";
+    readonly sm: "0.1px";
+    readonly md: "0.25px";
+    readonly lg: "0.5px";
+};
+/** Typography style presets — Figma: Display=bold(700), Headline/Title/Label=semibold(600), Body=regular(400) */
+export declare const textStyle: {
+    readonly display4xl: {
+        readonly fontSize: "36px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "120%";
+    };
+    readonly display3xl: {
+        readonly fontSize: "32px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "120%";
+    };
+    readonly display2xl: {
+        readonly fontSize: "28px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "120%";
+    };
+    readonly headlineXl: {
+        readonly fontSize: "24px";
+        readonly fontWeight: 700;
+        readonly lineHeight: "140%";
+    };
+    readonly headlineLg: {
+        readonly fontSize: "20px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "140%";
+    };
+    readonly titleBase: {
+        readonly fontSize: "16px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.1px";
+    };
+    readonly titleSm: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.1px";
+    };
+    readonly labelBase: {
+        readonly fontSize: "16px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+    };
+    readonly labelSm: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+    readonly labelXs: {
+        readonly fontSize: "12px";
+        readonly fontWeight: 600;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+    readonly bodyBase: {
+        readonly fontSize: "16px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.1px";
+    };
+    readonly bodySm: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.25px";
+    };
+    readonly bodyXs: {
+        readonly fontSize: "12px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+    readonly body2xs: {
+        readonly fontSize: "10px";
+        readonly fontWeight: 400;
+        readonly lineHeight: "150%";
+        readonly letterSpacing: "0.5px";
+    };
+};

package/dist/tokens/typography.js

@@ -0,0 +1,57 @@
+/**
+ * VETC Design System — Typography Tokens
+ * From Figma: Tasco DLS Mini App — Typography page
+ * Font weights: Regular=400, Medium=500, SemiBold=600, Bold=700
+ * Font sizes: 2XS=10 / XS=12 / SM=14 / Base=16 / LG=20 / XL=24 / 2XL=28 / 3XL=32 / 4XL=36
+ */
+export const fontFamily = {
+    primary: '"Roboto", system-ui, -apple-system, sans-serif',
+};
+export const fontWeight = {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    black: 900,
+};
+/** Font sizes from Figma Typography scale */
+export const fontSize = {
+    '2xs': '10px', // 2X-Small
+    xs: '12px', // X-Small
+    sm: '14px', // Small
+    base: '16px', // Base
+    lg: '20px', // Large
+    xl: '24px', // X-Large
+    '2xl': '28px', // 2X-Large
+    '3xl': '32px', // 3X-Large
+    '4xl': '36px', // 4X-Large
+};
+/** Line heights from Figma (pixel ratios per size) */
+export const lineHeight = {
+    tight: '120%', // display: 36→44 ≈ 122%
+    normal: '140%', // heading: 20→28 = 140%
+    relaxed: '150%', // body/label: 16→24 = 150%
+};
+export const letterSpacing = {
+    none: '0',
+    sm: '0.1px',
+    md: '0.25px',
+    lg: '0.5px',
+};
+/** Typography style presets — Figma: Display=bold(700), Headline/Title/Label=semibold(600), Body=regular(400) */
+export const textStyle = {
+    display4xl: { fontSize: fontSize['4xl'], fontWeight: fontWeight.bold, lineHeight: lineHeight.tight },
+    display3xl: { fontSize: fontSize['3xl'], fontWeight: fontWeight.bold, lineHeight: lineHeight.tight },
+    display2xl: { fontSize: fontSize['2xl'], fontWeight: fontWeight.bold, lineHeight: lineHeight.tight },
+    headlineXl: { fontSize: fontSize.xl, fontWeight: fontWeight.bold, lineHeight: lineHeight.normal },
+    headlineLg: { fontSize: fontSize.lg, fontWeight: fontWeight.semibold, lineHeight: lineHeight.normal },
+    titleBase: { fontSize: fontSize.base, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+    titleSm: { fontSize: fontSize.sm, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+    labelBase: { fontSize: fontSize.base, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed },
+    labelSm: { fontSize: fontSize.sm, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+    labelXs: { fontSize: fontSize.xs, fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+    bodyBase: { fontSize: fontSize.base, fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+    bodySm: { fontSize: fontSize.sm, fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.md },
+    bodyXs: { fontSize: fontSize.xs, fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+    body2xs: { fontSize: fontSize['2xs'], fontWeight: fontWeight.regular, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+};

package/dist/types/app.d.ts

@@ -0,0 +1,21 @@
+export type IAppConfig = {
+    pages: IPageConfig[];
+} & IAppState;
+export type IAppState = {
+    locale?: string;
+    theme?: "light" | "dark";
+};
+export type IPageConfig = {
+    /** Key định danh page dùng cho navigation */
+    key: string;
+    /** Tên hiển thị (optional, dùng cho header native) */
+    title?: string;
+    page: React.ComponentType<any>;
+    url: string;
+    /** Có cho phép back không */
+    canGoBack?: boolean;
+    /** Có phải root page không */
+    isRoot?: boolean;
+    /** Params mặc định khi mở page */
+    defaultParams?: Record<string, unknown>;
+};

package/dist/types/app.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "@vetc-miniapp/ui-react",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "MiniApp Platform UI React",
-  "main": "src/ui-react/index.js",
-  "types": "src/ui-react/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles": "./dist/styles/tokens.css"
+  },
   "type": "module",
   "files": [
-    "src"
+    "dist"
   ],
   "scripts": {
-    "build": "webpack",
-    "demo": "webpack serve --config webpack.demo.js",
-    "build:demo": "webpack --config webpack.demo.js --mode production"
+    "build": "tsc -p tsconfig.build.json && cp src/ui-react/styles/tokens.css dist/styles/tokens.css"
   },
   "keywords": [
     "miniapp",

package/src/dist/ui-react/index.js

@@ -1,2 +0,0 @@
-/*! For license information please see index.js.LICENSE.txt */
-!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=e(require("react")):n["vetc-miniapp/ui-react"]=e(n.react)}(this,n=>(()=>{"use strict";var e={155(e){e.exports=n},698(n,e){var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(n,e,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==e.key&&(o=""+e.key),"key"in e)for(var i in t={},e)"key"!==i&&(t[i]=e[i]);else t=e;return e=t.ref,{$$typeof:r,type:n,key:o,ref:void 0!==e?e:null,props:t}}e.Fragment=t,e.jsx=o,e.jsxs=o},848(n,e,r){n.exports=r(698)}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var i=r[n]={exports:{}};return e[n](i,i.exports,t),i.exports}t.d=(n,e)=>{for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),t.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})};var o={};t.r(o),t.d(o,{App:()=>x,appConfig:()=>m,useAppPause:()=>u,useAppResume:()=>a,useDidHide:()=>f,useDidShow:()=>c,useListenerScanQr:()=>b,useNavigate:()=>h,useTapAppBar:()=>p});var i=t(155);function u(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var n=function(){try{e.current&&e.current()}catch(n){console.error("[useAppPause error]",n)}};return window.MiniApp.on("appPause",n),function(){window.MiniApp.off("appPause",n)}}},[])}function a(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if(console.warn("MiniApp: useAppResume"),"undefined"!=typeof window&&window.MiniApp){var n=function(){try{e.current&&e.current()}catch(n){console.error("[useAppResume error]",n)}};return window.MiniApp.on("appResume",n),function(){window.MiniApp.off("appResume",n)}}},[])}function c(n,e){var r=(0,i.useRef)(e);(0,i.useEffect)(function(){r.current=e},[e]),(0,i.useEffect)(function(){if(window.MiniApp){var e=function(e){var t;(null==e?void 0:e.route)===n&&(console.log("didShow",e),null===(t=r.current)||void 0===t||t.call(r,e))};return window.MiniApp.on("didShow",e),function(){window.MiniApp.off("didShow",e)}}},[n])}function f(n,e){var r=(0,i.useRef)(e);(0,i.useEffect)(function(){r.current=e},[e]),(0,i.useEffect)(function(){if(window.MiniApp){var e=function(e){var t;(null==e?void 0:e.route)===n&&(null===(t=r.current)||void 0===t||t.call(r,e))};return window.MiniApp.on("didHide",e),function(){window.MiniApp.off("didHide",e)}}},[n])}function p(n,e){var r=(0,i.useRef)(e);(0,i.useEffect)(function(){r.current=e},[e]),(0,i.useEffect)(function(){if(window.MiniApp){var e=function(e){var t;(null==e?void 0:e.route)===n&&(console.log("onTapAppBar",e),null===(t=r.current)||void 0===t||t.call(r,e))};return window.MiniApp.on("onTapAppBar",e),function(){window.MiniApp.off("onTapAppBar",e)}}},[n])}function l(){var n,e,r="function"==typeof Symbol?Symbol:{},t=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,t,o,i){var c=t&&t.prototype instanceof a?t:a,f=Object.create(c.prototype);return s(f,"_invoke",function(r,t,o){var i,a,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:n,a:d,f:d.bind(n,4),d:function(e,r){return i=e,a=0,c=n,s.n=r,u}};function d(r,t){for(a=r,c=t,e=0;!l&&f&&!o&&e<p.length;e++){var o,i=p[e],d=s.p,v=i[2];r>3?(o=v===t)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=n):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,s.v=t,s.n=i[1]):d<v&&(o=r<3||i[0]>t||t>v)&&(i[4]=r,i[5]=t,s.n=v,a=0))}if(o||r>1)return u;throw l=!0,t}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,v),a=p,c=v;(e=a<2?n:c)||!l;){i||(a?a<3?(a>1&&(s.n=-1),d(a,c)):s.n=c:s.v=c);try{if(f=2,i){if(a||(o="next"),e=i[o]){if(!(e=e.call(i,c)))throw TypeError("iterator result is not an object");if(!e.done)return e;c=e.value,a<2&&(a=0)}else 1===a&&(e=i.return)&&e.call(i),a<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=n}else if((e=(l=s.n<0)?c:r.call(t,s))!==u)break}catch(e){i=n,a=1,c=e}finally{f=1}}return{value:e,done:l}}}(r,o,i),!0),f}var u={};function a(){}function c(){}function f(){}e=Object.getPrototypeOf;var p=[][t]?e(e([][t]())):(s(e={},t,function(){return this}),e),d=f.prototype=a.prototype=Object.create(p);function v(n){return Object.setPrototypeOf?Object.setPrototypeOf(n,f):(n.__proto__=f,s(n,o,"GeneratorFunction")),n.prototype=Object.create(d),n}return c.prototype=f,s(d,"constructor",f),s(f,"constructor",c),c.displayName="GeneratorFunction",s(f,o,"GeneratorFunction"),s(d),s(d,o,"Generator"),s(d,t,function(){return this}),s(d,"toString",function(){return"[object Generator]"}),(l=function(){return{w:i,m:v}})()}function s(n,e,r,t){var o=Object.defineProperty;try{o({},"",{})}catch(n){o=0}s=function(n,e,r,t){function i(e,r){s(n,e,function(n){return this._invoke(e,r,n)})}e?o?o(n,e,{value:r,enumerable:!t,configurable:!t,writable:!t}):n[e]=r:(i("next",0),i("throw",1),i("return",2))},s(n,e,r,t)}function d(n,e,r,t,o,i,u){try{var a=n[i](u),c=a.value}catch(n){return void r(n)}a.done?e(c):Promise.resolve(c).then(t,o)}var v="undefined"!=typeof window,w=function(){return v&&window.flutter_inappwebview&&window.flutter_inappwebview.callHandler&&"function"==typeof window.flutter_inappwebview.callHandler?window.flutter_inappwebview:null},y=function(){var n,e=(n=l().m(function n(e){var r,t,o,i,u=arguments;return l().w(function(n){for(;;)switch(n.p=n.n){case 0:if(r=u.length>1&&void 0!==u[1]?u[1]:{},t=w()){n.n=1;break}return n.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"});case 1:return n.p=1,n.n=2,t.callHandler("MiniAppBridge",{action:e,payload:r});case 2:return o=n.v,n.a(2,o);case 3:return n.p=3,i=n.v,console.error("Bridge error:",i),n.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"})}},n,null,[[1,3]])}),function(){var e=this,r=arguments;return new Promise(function(t,o){var i=n.apply(e,r);function u(n){d(i,t,o,u,a,"next",n)}function a(n){d(i,t,o,u,a,"throw",n)}u(void 0)})});return function(n){return e.apply(this,arguments)}}();function h(){return function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("number"==typeof n)return y("navigate",{type:"native",action:"pop",delta:Math.abs(n)});y("navigate",{type:"native",action:"push",route:n,params:e,options:r})}}var m={locale:"vi",theme:"light",pages:[]};function b(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var n=function(n){try{var r;null===(r=e.current)||void 0===r||r.call(e,n)}catch(n){console.error("[useListenerScanQr error]",n)}};return window.MiniApp.on("onScanQRResult",n),function(){window.MiniApp.off("onScanQRResult",n)}}},[])}var g=t(848);function A(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=Array(e);r<e;r++)t[r]=n[r];return t}var M=new Map,S="/";function j(){return M.get(S)}function E(n){S=n}function x(n){var e,r,t=n.config,o=n.children,u=(e=(0,i.useState)(null),r=2,function(n){if(Array.isArray(n))return n}(e)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=r){var t,o,i,u,a=[],c=!0,f=!1;try{if(i=(r=r.call(n)).next,0===e){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=i.call(r)).done)&&(a.push(t.value),a.length!==e);c=!0);}catch(n){f=!0,o=n}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(f)throw o}}return a}}(e,r)||function(n,e){if(n){if("string"==typeof n)return A(n,e);var r={}.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?A(n,e):void 0}}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=u[0],c=u[1],f=(0,i.useRef)(!1);(0,i.useEffect)(function(){var n;if(null!=t&&null!==(n=t.pages)&&void 0!==n&&n.length&&!f.current){f.current=!0,function(n){M=new Map(n.pages.map(function(n){return[n.path,n]}))}(t),E((window.location.pathname||"/").replace("/miniapp","")||"/");var e=j();e||(E("/"),e=j()),c(e||null),y("registerAppConfig",{config:t})}},[t]);var p=(0,i.useMemo)(function(){return a&&a.Component?a.Component:null},[a]);return p?(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(p,{}),o]}):(console.warn("MiniApp: Page not found"),(0,g.jsx)("div",{}))}return o})());

package/src/dist/ui-react/index.js.LICENSE.txt

@@ -1,11 +0,0 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/src/ui-react/bridge.js

@@ -1,36 +0,0 @@
-const isBrowser = typeof window !== "undefined";
-
-const getBridge = () => {
-  if (!isBrowser || !window.flutter_inappwebview || !window.flutter_inappwebview.callHandler || typeof window.flutter_inappwebview.callHandler != "function") {
-    return null;
-  }
-  return window.flutter_inappwebview;
-};
-
-export const callHost = async (action, payload = {}) => {
-  const bridge = getBridge();
-  if (!bridge) {
-//    return Promise.reject(new Error("MiniApp bridge not available"));
-
-    return {
-      ok: false,
-      error: "BRIDGE_CALL_FAILED"
-    };
-  }
-  try {
-    const response = await bridge.callHandler("MiniAppBridge", {
-      action,
-      payload,
-    });
-
-    return response;
-  } catch (error) {
-    console.error("Bridge error:", error);
-//    throw error;
-
-    return {
-      ok: false,
-      error: "BRIDGE_CALL_FAILED"
-    };
-  }
-};

package/src/ui-react/bridge.ts

@@ -1,48 +0,0 @@
-/* ================= Types ================= */
-
-export interface FlutterInAppWebViewBridge {
-  callHandler(
-    handlerName: string,
-    args?: unknown
-  ): Promise<unknown>;
-}
-
-declare global {
-  interface Window {
-    flutter_inappwebview?: FlutterInAppWebViewBridge;
-  }
-}
-
-/* ================= Runtime helpers ================= */
-
-export const isBrowser: boolean = typeof window !== "undefined";
-
-export const getBridge = (): FlutterInAppWebViewBridge | null => {
-  if (!isBrowser || !window.flutter_inappwebview || !window.flutter_inappwebview.callHandler || typeof window.flutter_inappwebview.callHandler != "function") {
-    return null;
-  }
-  return window.flutter_inappwebview;
-};
-
-/* ================= Core bridge call ================= */
-
-export const callHost = <T = unknown>(
-  action: string,
-  payload: Record<string, unknown> = {}
-): Promise<T> => {
-  const bridge = getBridge();
-
-  if (!bridge) {
-
-    return {
-      ok: false,
-      error: "BRIDGE_CALL_FAILED"
-    };
-//     return Promise.reject(new Error("MiniApp bridge not available"));
-  }
-
-  return bridge.callHandler("MiniAppBridge", {
-    action,
-    payload,
-  }) as Promise<T>;
-};

package/src/ui-react/components/app.d.ts

@@ -1,7 +0,0 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
-import { IAppConfig } from '../types/app';
-
-export type IAppProps = ComponentPropsWithRef<'div'> & {
-    config: IAppConfig;
-};
-export declare const App: ({ className, config, localesConfig, ...props }: IAppProps) => import("react/jsx-runtime").JSX.Element;

package/src/ui-react/components/app.jsx

@@ -1,80 +0,0 @@
-"use client";
-
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { callHost } from "../bridge";
-
-/* ================= ROUTER CORE ================= */
-
-let routeMap = new Map();
-let currentPath = "/";
-
-function initRouter(config) {
-  routeMap = new Map(config.pages.map((p) => [p.path, p]));
-}
-
-function getCurrentPage() {
-  return routeMap.get(currentPath);
-}
-
-function setCurrentPath(path) {
-  currentPath = path;
-}
-
-/* ================= APP ================= */
-
-export function App({ config, children }) {
-  const [page, setPage] = useState(null);
-  const initializedRef = useRef(false);
-
-  /* ================= INIT ONCE ================= */
-
-  useEffect(() => {
-    if (!config?.pages?.length) return;
-    if (initializedRef.current) return;
-
-    initializedRef.current = true;
-
-    // 1. Init router
-    initRouter(config);
-
-    // 2. Lấy path từ URL
-    const rawPath = window.location.pathname || "/";
-    const path = rawPath.replace("/miniapp", "") || "/";
-
-    setCurrentPath(path);
-
-    // 3. Resolve page
-    let current = getCurrentPage();
-
-    if (!current) {
-      setCurrentPath("/");
-      current = getCurrentPage();
-    }
-
-    setPage(current || null);
-
-    // 4. Send config to native (chỉ 1 lần)
-    callHost("registerAppConfig", { config });
-  }, [config]);
-
-  /* ================= MEMO COMPONENT ================= */
-
-  const CurrentComponent = useMemo(() => {
-    if (!page || !page.Component) return null;
-    return page.Component;
-  }, [page]);
-
-  /* ================= RENDER ================= */
-
-  if (!CurrentComponent) {
-    console.warn("MiniApp: Page not found");
-    return <div />;
-  }
-
-  return (
-    <>
-      <CurrentComponent />
-      {children}
-    </>
-  );
-}

package/src/ui-react/components/app.tsx

@@ -1,42 +0,0 @@
-import { useEffect, useState } from "react";
-let routeMap = new Map()
-let currentPath = "/"
-
-export function initRouter(config) {
-  routeMap = new Map(config.pages.map(p => [p.pathname, p]))
-}
-
-export function getCurrentPage() {
-  return routeMap.get(currentPath)
-}
-
-export function setCurrentPath(path) {
-  currentPath = path
-}
-
-export function App({ config }) {
-  const [page, setPage] = useState(null)
-
-  useEffect(() => {
-    initRouter(config)
-
-    const rawPath = window.location.pathname || "/"
-    const path = rawPath.replace("/miniapp", "") || "/"
-
-    setCurrentPath(path)
-
-    let current = getCurrentPage()
-    if (!current) {
-      setCurrentPath("/")
-      current = getCurrentPage()
-    }
-
-    setPage(current)
-
-    callHost("registerAppConfig", { config })
-  }, [config])
-
-  if (!page) return <div />
-  const Component = page.Component
-  return <Component />
-}

package/src/ui-react/components/app1.js

@@ -1,101 +0,0 @@
-//'use client';
-
-/**
- * @typedef {import('../types/app').IAppConfig} IAppConfig
- */
-
-/**
- * @typedef {Object} IAppProps
- * @property {IAppConfig} config
- * @property {string=} className
- */
-
-/**
- * Root MiniApp wrapper
- * @param {IAppProps & React.HTMLAttributes<HTMLDivElement>} props
- */
-//import React from "react";
-'use client';
-
-import { useEffect } from "react";
-import {callHost} from '../bridge.js';
-////import MiniApp from "miniapp-sdk";
-
-/**
-* Root MiniApp wrapper
-*/
-export function App({ className, config, localesConfig, ...props }) {
-
- useEffect(() => {
-   // 🚀 Gửi config sang Host khi MiniApp mount
-   if (config) {
-     console.log(config);
-     callHost("registerAppConfig", { config }).catch(console.error);
-   }
-//
-//    // 🎯 Ví dụ lắng nghe event từ Host
-//    const handleStateUpdate = (data) => {
-//      console.log("App state updated from host:", data);
-//    };
-//
-//    MiniApp.on?.("APP_STATE_UPDATE", handleStateUpdate);
-//
-//    return () => {
-//      MiniApp.off?.("APP_STATE_UPDATE", handleStateUpdate);
-//    };
- }, [config]);
-
- return props.children;
-}
-
-//'use client'
-//
-//import React, { createContext, useContext, useMemo, useState, useEffect } from "react"
-//import {callHost} from '../bridge.js';
-//
-//const RouterCtx = createContext(null)
-//
-//export function MiniRouterProvider({ config, initialPath, children }) {
-//  const [path, setPath] = useState(initialPath || "/")
-//
-//  const routeMap = useMemo(
-//    () => new Map(config.pages.map(p => [p.pathname, p])),
-//    [config.pages]
-//  )
-//
-//  const value = useMemo(() => ({ path, setPath, routeMap }), [path, routeMap])
-//
-//  return <RouterCtx.Provider value={value}>{children}</RouterCtx.Provider>
-//}
-//
-//export function useMiniRouter() {
-//  const ctx = useContext(RouterCtx)
-//  if (!ctx) throw new Error("useMiniRouter must be used inside MiniRouterProvider")
-//  return ctx
-//}
-//
-//function Renderer({ config }) {
-//  const { path, routeMap } = useMiniRouter()
-//  const page = routeMap.get(path)
-//
-//  useEffect(() => {
-//    if (!page) return
-//    callHost("registerAppConfig", {
-//      config
-//    })
-//  }, [path, page])
-//
-//  if (!page) return <div>Page not found</div>
-//  const Component = page.Component
-//  return <Component />
-//}
-//
-//export function App({ config, initialPath, ...props }) {
-//  return (
-//    <MiniRouterProvider config={config} initialPath={initialPath}>
-//      <Renderer config={config}>{props.children}</Renderer>
-//    </MiniRouterProvider>
-//  )
-//}
-
-

package/src/ui-react/components/avatar/Avatar.tsx

@@ -1,88 +0,0 @@
-/**
- * VETC Avatar — tokenized
- */
-import React from 'react';
-import { Avatar as AntAvatar } from 'antd';
-
-export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-export type AvatarShape = 'circle' | 'square';
-
-// Map size token name to CSS var
-const sizeVarMap: Record<AvatarSize, string> = {
-  xl: 'var(--vetc-avatar-size-xl)',
-  lg: 'var(--vetc-avatar-size-lg)',
-  md: 'var(--vetc-avatar-size-md)',
-  sm: 'var(--vetc-avatar-size-sm)',
-  xs: 'var(--vetc-avatar-size-xs)',
-};
-
-// Pixel values needed for antd size prop (numeric)
-const sizePxMap: Record<AvatarSize, number> = { xl: 56, lg: 48, md: 40, sm: 32, xs: 24 };
-
-// Font size scales with avatar size (from Figma)
-const fontSizeMap: Record<AvatarSize, string> = {
-  xl: 'var(--vetc-font-size-2xl)',
-  lg: 'var(--vetc-font-size-xl)',
-  md: 'var(--vetc-font-size-base)',
-  sm: 'var(--vetc-font-size-sm)',
-  xs: 'var(--vetc-font-size-2xs)',
-};
-
-export interface AvatarProps {
-  src?: string;
-  alt?: string;
-  initials?: string;
-  icon?: React.ReactNode;
-  size?: AvatarSize;
-  shape?: AvatarShape;
-  color?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  onClick?: () => void;
-  id?: string;
-}
-
-export function Avatar({
-  src,
-  alt,
-  initials,
-  icon,
-  size = 'md',
-  shape = 'circle',
-  color,
-  className = '',
-  style,
-  onClick,
-  id,
-}: AvatarProps) {
-  return (
-    <span
-      id={id}
-      style={{ display: 'inline-flex', flexShrink: 0, width: sizeVarMap[size], height: sizeVarMap[size] }}
-    >
-      <AntAvatar
-        src={src}
-        alt={alt}
-        icon={!src && !initials ? icon : undefined}
-        size={sizePxMap[size]}
-        shape={shape}
-        onClick={onClick}
-        className={`vetc-avatar vetc-avatar--${size} ${className}`}
-        style={{
-          backgroundColor: !src ? (color ?? 'var(--vetc-avatar-bg-default)') : undefined,
-          fontSize:        fontSizeMap[size],
-          fontWeight:      'var(--vetc-font-weight-bold)' as any,
-          fontFamily:      'var(--vetc-font-family)',
-          color:           'var(--vetc-avatar-text-color)',
-          cursor:          onClick ? 'pointer' : 'default',
-          flexShrink:      0,
-          ...style,
-        }}
-      >
-        {!src && initials ? initials.slice(0, 2).toUpperCase() : undefined}
-      </AntAvatar>
-    </span>
-  );
-}
-
-export default Avatar;