@vetc-miniapp/ui-react 0.0.24 → 0.0.25

package/src/ui-react/components/tab-bar/TabBar.tsx

@@ -1,137 +0,0 @@
-/**
- * VETC TabBar (Bottom Navigation)
- * Figma: h=56px, label=12px/semibold, icon=24px
- * variant: neutral (gray-90 active) | brand (green-40 active)
- */
-import React from 'react';
-
-export interface TabBarItem {
-  key: string;
-  label: string;
-  icon: React.ReactNode;
-  activeIcon?: React.ReactNode;
-  badge?: number | string;
-  disabled?: boolean;
-}
-
-export type TabBarVariant = 'neutral' | 'brand';
-
-export interface TabBarProps {
-  items: TabBarItem[];
-  activeKey?: string;
-  onChange?: (key: string) => void;
-  variant?: TabBarVariant;
-  backgroundColor?: string;
-  divider?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  id?: string;
-}
-
-export function TabBar({
-  items,
-  activeKey,
-  onChange,
-  variant = 'brand',
-  backgroundColor,
-  divider = true,
-  className = '',
-  style,
-  id,
-}: TabBarProps) {
-  const activeColor = variant === 'brand'
-    ? 'var(--vetc-tab-color-active)'
-    : 'var(--vetc-color-text-primary)';
-
-  return (
-    <nav
-      id={id}
-      className={`vetc-tab-bar ${className}`}
-      style={{
-        display:         'flex',
-        alignItems:      'stretch',
-        height:          'var(--vetc-tab-height)',
-        backgroundColor: backgroundColor ?? 'var(--vetc-tab-bg)',
-        borderTop:       divider ? `1px solid var(--vetc-tab-border)` : 'none',
-        fontFamily:      'var(--vetc-font-family)',
-        ...style,
-      }}
-    >
-      {items.map((item) => {
-        const isActive = item.key === activeKey;
-        const color = item.disabled
-          ? 'var(--vetc-tab-color-disabled)'
-          : isActive
-          ? activeColor
-          : 'var(--vetc-tab-color-inactive)';
-
-        return (
-          <button
-            key={item.key}
-            disabled={item.disabled}
-            onClick={() => !item.disabled && onChange?.(item.key)}
-            aria-current={isActive ? 'page' : undefined}
-            aria-label={item.label}
-            className={`vetc-tab-bar__item${isActive ? ' vetc-tab-bar__item--active' : ''}`}
-            style={{
-              flex:           1,
-              display:        'flex',
-              flexDirection:  'column',
-              alignItems:     'center',
-              justifyContent: 'center',
-              gap:            'var(--vetc-space-2)',
-              background:     'none',
-              border:         'none',
-              cursor:         item.disabled ? 'not-allowed' : 'pointer',
-              padding:        `var(--vetc-space-6) 0`,
-              position:       'relative',
-              opacity:        item.disabled ? 0.5 : 1,
-              transition:     `color var(--vetc-transition-fast)`,
-              color,
-            }}
-          >
-            {/* Icon + Badge */}
-            <div style={{ position: 'relative', display: 'inline-flex' }}>
-              <span style={{ color, display: 'flex', fontSize: '24px', lineHeight: 1 }}>
-                {isActive && item.activeIcon ? item.activeIcon : item.icon}
-              </span>
-              {item.badge !== undefined && (
-                <span style={{
-                  position:        'absolute',
-                  top:             'calc(-1 * var(--vetc-space-4))',
-                  right:           'calc(-1 * var(--vetc-space-8))',
-                  minWidth:        'var(--vetc-tab-badge-size)',
-                  height:          'var(--vetc-tab-badge-size)',
-                  backgroundColor: 'var(--vetc-tab-badge-bg)',
-                  borderRadius:    'var(--vetc-radius-pill)',
-                  fontSize:        'var(--vetc-tab-badge-font-size)',
-                  fontWeight:      'var(--vetc-font-weight-semibold)' as any,
-                  color:           'var(--vetc-tab-badge-text)',
-                  display:         'flex',
-                  alignItems:      'center',
-                  justifyContent:  'center',
-                  padding:         `0 var(--vetc-space-4)`,
-                  lineHeight:      1,
-                }}>
-                  {item.badge}
-                </span>
-              )}
-            </div>
-
-            {/* Label */}
-            <span style={{
-              fontSize:   'var(--vetc-tab-label-size)',
-              fontWeight: 'var(--vetc-tab-label-weight)' as any,
-              color,
-              lineHeight: 'var(--vetc-line-height-relaxed)',
-            }}>
-              {item.label}
-            </span>
-          </button>
-        );
-      })}
-    </nav>
-  );
-}
-
-export default TabBar;

package/src/ui-react/components/textarea/Textarea.tsx

@@ -1,109 +0,0 @@
-/**
- * VETC Textarea — tokenized
- */
-import React from 'react';
-import { Input as AntInput } from 'antd';
-
-const { TextArea: AntTextArea } = AntInput;
-
-function FieldLabel({ htmlFor, required, disabled, children }: {
-  htmlFor?: string; required?: boolean; disabled?: boolean; children: React.ReactNode;
-}) {
-  return (
-    <label htmlFor={htmlFor} style={{
-      fontFamily: 'var(--vetc-font-family)',
-      fontSize:   'var(--vetc-input-label-font-size)',
-      fontWeight: 'var(--vetc-input-label-font-weight)' as any,
-      lineHeight: 'var(--vetc-line-height-relaxed)',
-      color: disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-input-label-color)',
-      display: 'block',
-    }}>
-      {children}
-      {required && <span style={{ color: 'var(--vetc-color-negative)', marginLeft: 'var(--vetc-space-2)' }}>*</span>}
-    </label>
-  );
-}
-
-export interface TextareaProps {
-  label?: string;
-  placeholder?: string;
-  value?: string;
-  defaultValue?: string;
-  helperText?: string;
-  error?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  maxLength?: number;
-  showCount?: boolean;
-  rows?: number;
-  autoSize?: boolean | { minRows?: number; maxRows?: number };
-  onChange?: (value: string) => void;
-  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-  id?: string;
-  name?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  required?: boolean;
-}
-
-export function Textarea({
-  label, placeholder, value, defaultValue,
-  helperText, error, disabled = false, readOnly = false,
-  maxLength, showCount = false, rows = 4, autoSize,
-  onChange, onFocus, onBlur,
-  id, name, className = '', style, required = false,
-}: TextareaProps) {
-  const hasError = !!error;
-  const helperMsg = error ?? helperText;
-  const helperColor = hasError
-    ? 'var(--vetc-input-helper-color-error)'
-    : 'var(--vetc-input-helper-color)';
-
-  return (
-    <div
-      className={`vetc-textarea-wrapper ${className}`}
-      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--vetc-input-gap)', ...style }}
-    >
-      {label && <FieldLabel htmlFor={id} required={required} disabled={disabled}>{label}</FieldLabel>}
-
-      <AntTextArea
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        maxLength={maxLength}
-        showCount={showCount}
-        rows={rows}
-        autoSize={autoSize}
-        status={hasError ? 'error' : undefined}
-        onChange={(e) => onChange?.(e.target.value)}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        style={{
-          borderRadius: 'var(--vetc-input-radius)',
-          padding:      'var(--vetc-input-padding-x)',
-          fontSize:     'var(--vetc-input-font-size)',
-          fontFamily:   'var(--vetc-font-family)',
-          resize:       'vertical',
-        }}
-      />
-
-      {helperMsg && (
-        <span style={{
-          fontFamily: 'var(--vetc-font-family)',
-          fontSize:   'var(--vetc-input-helper-font-size)',
-          lineHeight: 'var(--vetc-line-height-relaxed)',
-          color:      helperColor,
-        }}>
-          {helperMsg}
-        </span>
-      )}
-    </div>
-  );
-}
-
-export default Textarea;

package/src/ui-react/components/toast/Toast.ts

@@ -1,98 +0,0 @@
-/**
- * VETC Toast — tokenized
- * Figma: Toast page (7 variants)
- */
-import React from 'react';
-import { notification, message } from 'antd';
-
-export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
-
-export interface ToastOptions {
-  message: string;
-  description?: string;
-  type?: ToastType;
-  placement?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
-  /** Duration in seconds (0 = persistent) */
-  duration?: number;
-  icon?: React.ReactNode;
-  onClose?: () => void;
-}
-
-/** Shared notification style — references CSS vars */
-const toastStyle: React.CSSProperties = {
-  borderRadius: 'var(--vetc-toast-radius)',
-  fontFamily:   'var(--vetc-font-family)',
-};
-
-/**
- * Static programmatic toast API
- * Usage: toast.success('Message')
- */
-export const toast = {
-  show(opts: ToastOptions) {
-    const {
-      type = 'default', message: msg, description,
-      duration = 3, placement = 'top', icon, onClose,
-    } = opts;
-
-    if (type === 'default') {
-      message.open({ type: 'info', content: msg, duration, onClose });
-      return;
-    }
-
-    notification[type]({
-      message: msg,
-      description,
-      duration,
-      placement,
-      icon,
-      onClose,
-      style: toastStyle,
-    });
-  },
-  success: (msg: string, description?: string) =>
-    toast.show({ message: msg, description, type: 'success' }),
-  error:   (msg: string, description?: string) =>
-    toast.show({ message: msg, description, type: 'error' }),
-  warning: (msg: string, description?: string) =>
-    toast.show({ message: msg, description, type: 'warning' }),
-  info:    (msg: string, description?: string) =>
-    toast.show({ message: msg, description, type: 'info' }),
-};
-
-/**
- * Hook-based toast — requires VETCProvider (antd App wrapper)
- */
-export function useToast() {
-  const [api, contextHolder] = notification.useNotification();
-
-  const show = (opts: ToastOptions) => {
-    const {
-      type = 'info', message: msg, description,
-      duration = 3, placement = 'top', icon, onClose,
-    } = opts;
-
-    api[type === 'default' ? 'info' : type]({
-      message: msg,
-      description,
-      duration,
-      placement,
-      icon,
-      onClose,
-      style: toastStyle,
-    });
-  };
-
-  return {
-    contextHolder,
-    toast: {
-      show,
-      success: (msg: string, description?: string) => show({ message: msg, description, type: 'success' }),
-      error:   (msg: string, description?: string) => show({ message: msg, description, type: 'error' }),
-      warning: (msg: string, description?: string) => show({ message: msg, description, type: 'warning' }),
-      info:    (msg: string, description?: string) => show({ message: msg, description, type: 'info' }),
-    },
-  };
-}
-
-export default toast;

package/src/ui-react/components/typography/Typography.tsx

@@ -1,201 +0,0 @@
-/**
- * VETC Typography Components
- * All style values reference CSS custom properties from tokens.css
- */
-import React from 'react';
-
-// ── Typography style map — dùng CSS vars thay vì hardcode ──────────────────
-const styles: Record<string, React.CSSProperties> = {
-  display4xl: {
-    fontSize: 'var(--vetc-font-size-4xl)',
-    fontWeight: 'var(--vetc-font-weight-bold)' as any,
-    lineHeight: 'var(--vetc-line-height-tight)',
-  },
-  display3xl: {
-    fontSize: 'var(--vetc-font-size-3xl)',
-    fontWeight: 'var(--vetc-font-weight-bold)' as any,
-    lineHeight: 'var(--vetc-line-height-tight)',
-  },
-  display2xl: {
-    fontSize: 'var(--vetc-font-size-2xl)',
-    fontWeight: 'var(--vetc-font-weight-bold)' as any,
-    lineHeight: 'var(--vetc-line-height-tight)',
-  },
-  headlineXl: {
-    fontSize: 'var(--vetc-font-size-xl)',
-    fontWeight: 'var(--vetc-font-weight-bold)' as any,
-    lineHeight: 'var(--vetc-line-height-normal)',
-  },
-  headlineLg: {
-    fontSize: 'var(--vetc-font-size-lg)',
-    fontWeight: 'var(--vetc-font-weight-semibold)' as any,
-    lineHeight: 'var(--vetc-line-height-normal)',
-  },
-  titleBase: {
-    fontSize: 'var(--vetc-font-size-base)',
-    fontWeight: 'var(--vetc-font-weight-semibold)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-sm)',
-  },
-  titleSm: {
-    fontSize: 'var(--vetc-font-size-sm)',
-    fontWeight: 'var(--vetc-font-weight-semibold)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-sm)',
-  },
-  labelBase: {
-    fontSize: 'var(--vetc-font-size-base)',
-    fontWeight: 'var(--vetc-font-weight-semibold)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-  },
-  labelSm: {
-    fontSize: 'var(--vetc-font-size-sm)',
-    fontWeight: 'var(--vetc-font-weight-semibold)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-lg)',
-  },
-  labelXs: {
-    fontSize: 'var(--vetc-font-size-xs)',
-    fontWeight: 'var(--vetc-font-weight-semibold)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-lg)',
-  },
-  labelXxs: {
-    fontSize: 'var(--vetc-font-size-2xs)',
-    fontWeight: 'var(--vetc-font-weight-semibold)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-lg)',
-  },
-  bodyBase: {
-    fontSize: 'var(--vetc-font-size-base)',
-    fontWeight: 'var(--vetc-font-weight-regular)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-sm)',
-  },
-  bodySm: {
-    fontSize: 'var(--vetc-font-size-sm)',
-    fontWeight: 'var(--vetc-font-weight-regular)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-md)',
-  },
-  bodyXs: {
-    fontSize: 'var(--vetc-font-size-xs)',
-    fontWeight: 'var(--vetc-font-weight-regular)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-lg)',
-  },
-  body2xs: {
-    fontSize: 'var(--vetc-font-size-2xs)',
-    fontWeight: 'var(--vetc-font-weight-regular)' as any,
-    lineHeight: 'var(--vetc-line-height-relaxed)',
-    letterSpacing: 'var(--vetc-letter-spacing-lg)',
-  },
-};
-
-export type TypographyVariant = keyof typeof styles;
-export type TextColor =
-  | 'primary' | 'secondary' | 'tertiary' | 'disabled'
-  | 'brand' | 'error' | 'warning' | 'success' | 'inherit';
-
-const colorMap: Record<TextColor, string> = {
-  primary:   'var(--vetc-color-text-primary)',
-  secondary: 'var(--vetc-color-text-secondary)',
-  tertiary:  'var(--vetc-color-text-tertiary)',
-  disabled:  'var(--vetc-color-text-disabled)',
-  brand:     'var(--vetc-color-brand)',
-  error:     'var(--vetc-color-text-error)',
-  warning:   'var(--vetc-color-warning)',
-  success:   'var(--vetc-color-positive)',
-  inherit:   'inherit',
-};
-
-export interface TypographyProps {
-  /** Typography style variant */
-  variant?: TypographyVariant;
-  /** Text color */
-  color?: TextColor;
-  /** Strike-through */
-  strikethrough?: boolean;
-  /** Underline */
-  underline?: boolean;
-  /** Single-line truncate */
-  truncate?: boolean;
-  /** Clamp to N lines */
-  lines?: number;
-  /** Render tag */
-  as?: keyof React.JSX.IntrinsicElements;
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  id?: string;
-}
-
-export function Typography({
-  variant = 'bodyBase',
-  color = 'primary',
-  strikethrough = false,
-  underline = false,
-  truncate = false,
-  lines,
-  as: Tag = 'span',
-  children,
-  className = '',
-  style,
-  id,
-}: TypographyProps) {
-  const variantStyle = styles[variant] ?? styles.bodyBase;
-  const colorValue = colorMap[color];
-
-  const combinedStyle: React.CSSProperties = {
-    fontFamily: 'var(--vetc-font-family)',
-    margin: 0,
-    padding: 0,
-    ...variantStyle,
-    color: colorValue,
-    textDecoration: strikethrough ? 'line-through' : underline ? 'underline' : 'none',
-    ...(truncate && !lines
-      ? { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
-      : {}),
-    ...(lines
-      ? {
-          display: '-webkit-box',
-          WebkitLineClamp: lines,
-          WebkitBoxOrient: 'vertical' as const,
-          overflow: 'hidden',
-        }
-      : {}),
-    ...style,
-  };
-
-  return (
-    <Tag id={id} className={`vetc-text vetc-text--${variant} ${className}`} style={combinedStyle}>
-      {children}
-    </Tag>
-  );
-}
-
-// ── Convenience shorthands ──────────────────────────────────────────────────
-
-export function Display({ level = '2xl', ...props }: Omit<TypographyProps, 'variant'> & { level?: '4xl' | '3xl' | '2xl' }) {
-  return <Typography {...props} variant={`display${level}` as TypographyVariant} as={props.as ?? 'h1'} />;
-}
-
-export function Headline({ level = 'xl', ...props }: Omit<TypographyProps, 'variant'> & { level?: 'xl' | 'lg' }) {
-  return <Typography {...props} variant={level === 'xl' ? 'headlineXl' : 'headlineLg'} as={props.as ?? 'h2'} />;
-}
-
-export function Title({ size = 'base', ...props }: Omit<TypographyProps, 'variant'> & { size?: 'base' | 'sm' }) {
-  return <Typography {...props} variant={size === 'base' ? 'titleBase' : 'titleSm'} as={props.as ?? 'h3'} />;
-}
-
-export function Label({ size = 'base', ...props }: Omit<TypographyProps, 'variant'> & { size?: 'base' | 'sm' | 'xs' | 'xxs' }) {
-  const variantMap = { base: 'labelBase', sm: 'labelSm', xs: 'labelXs', xxs: 'labelXxs' } as const;
-  return <Typography {...props} variant={variantMap[size]} as={props.as ?? 'span'} />;
-}
-
-export function Body({ size = 'base', ...props }: Omit<TypographyProps, 'variant'> & { size?: 'base' | 'sm' | 'xs' | '2xs' }) {
-  const variantMap = { base: 'bodyBase', sm: 'bodySm', xs: 'bodyXs', '2xs': 'body2xs' } as const;
-  return <Typography {...props} variant={variantMap[size]} as={props.as ?? 'p'} />;
-}
-
-export default Typography;

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

@@ -1,35 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppPause
- *
- * Trigger khi Native App đi vào background.
- */
-export function useAppPause(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 = () => {
-      try {
-        if (savedCallback.current) {
-          savedCallback.current();
-        }
-      } catch (err) {
-        console.error("[useAppPause error]", err);
-      }
-    };
-
-    window.MiniApp.on("appPause", handler);
-
-    return () => {
-      window.MiniApp.off("appPause", handler);
-    };
-  }, []);
-}

package/src/ui-react/hooks/use-app-pause.ts

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppPause
- *
- * Trigger khi Native App đi vào background.
- */
-export function useAppPause(callback: () => void) {
-  const savedCallback = useRef(callback);
-
-  // giữ callback luôn mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = () => {
-      try {
-        savedCallback.current?.();
-      } catch (err) {
-        console.error("[useAppPause error]", err);
-      }
-    };
-
-    window.MiniApp.on("appPause", handler);
-
-    return () => {
-      window.MiniApp.off("appPause", handler);
-    };
-  }, []);
-}

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

@@ -1,37 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppResume
- *
- * Trigger khi Native App quay lại foreground.
- */
-export function useAppResume(callback) {
-  const savedCallback = useRef(callback);
-
-  // Cập nhật callback mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    console.warn("MiniApp: useAppResume");
-
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = () => {
-      try {
-        if (savedCallback.current) {
-          savedCallback.current();
-        }
-      } catch (err) {
-        console.error("[useAppResume error]", err);
-      }
-    };
-
-    window.MiniApp.on("appResume", handler);
-
-    return () => {
-      window.MiniApp.off("appResume", handler);
-    };
-  }, []);
-}

package/src/ui-react/hooks/use-app-resume.ts

@@ -1,32 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppResume
- *
- * Trigger khi Native App quay lại foreground.
- */
-export function useAppResume(callback: () => void) {
-  const savedCallback = useRef(callback);
-
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = () => {
-      try {
-        savedCallback.current?.();
-      } catch (err) {
-        console.error("[useAppResume error]", err);
-      }
-    };
-
-    window.MiniApp.on("appResume", handler);
-
-    return () => {
-      window.MiniApp.off("appResume", handler);
-    };
-  }, []);
-}