@vetc-miniapp/ui-react 0.0.22 → 0.0.24

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

@@ -0,0 +1,137 @@
+/**
+ * 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/tab-bar/index.ts

@@ -0,0 +1,2 @@
+export { TabBar } from './TabBar';
+export type { TabBarProps, TabBarItem, TabBarVariant } from './TabBar';

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

@@ -0,0 +1,109 @@
+/**
+ * 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/textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';

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

@@ -0,0 +1,98 @@
+/**
+ * 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/toast/index.ts

@@ -0,0 +1,2 @@
+export { toast, useToast } from './Toast';
+export type { ToastOptions, ToastType } from './Toast';

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

@@ -0,0 +1,201 @@
+/**
+ * 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/components/typography/index.ts

@@ -0,0 +1,2 @@
+export { Typography, Display, Headline, Title, Label, Body } from './Typography';
+export type { TypographyProps, TypographyVariant, TextColor } from './Typography';

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

@@ -12,6 +12,7 @@ export function useDidShow(route, callback) {
 
     const handler = (data) => {
       if (data?.route === route) {
+        console.log("didShow", data)
         saved.current?.(data);
       }
     };

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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -2,6 +2,7 @@ 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';