@vetc-miniapp/ui-react 0.0.23 → 0.0.24

package/src/ui-react/components/bottom-sheet/BottomSheet.tsx

@@ -0,0 +1,149 @@
+/**
+ * VETC BottomSheet — tokenized
+ * Figma: Sheet page — 16px top radius, handle bar, slide-up animation
+ */
+import React, { useEffect } from 'react';
+
+export interface BottomSheetProps {
+  open: boolean;
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+  maskClosable?: boolean;
+  showHandle?: boolean;
+  maxHeight?: string;
+  onClose?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+  id?: string;
+}
+
+export function BottomSheet({
+  open,
+  title,
+  children,
+  maskClosable = true,
+  showHandle = true,
+  maxHeight = '90vh',
+  onClose,
+  className = '',
+  style,
+  id,
+}: BottomSheetProps) {
+  // Lock body scroll when open
+  useEffect(() => {
+    document.body.style.overflow = open ? 'hidden' : '';
+    return () => { document.body.style.overflow = ''; };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className="vetc-bottom-sheet-overlay"
+        aria-hidden="true"
+        onClick={() => maskClosable && onClose?.()}
+        style={{
+          position:        'fixed',
+          inset:           0,
+          backgroundColor: 'var(--vetc-sheet-overlay)',
+          zIndex:          1000,
+          animation:       'vetc-fade-in var(--vetc-transition-base)',
+        }}
+      />
+
+      {/* Sheet panel */}
+      <div
+        id={id}
+        role="dialog"
+        aria-modal="true"
+        className={`vetc-bottom-sheet ${className}`}
+        style={{
+          position:        'fixed',
+          bottom:          0,
+          left:            0,
+          right:           0,
+          backgroundColor: 'var(--vetc-sheet-bg)',
+          borderRadius:    `var(--vetc-sheet-radius) var(--vetc-sheet-radius) 0 0`,
+          maxHeight,
+          overflowY:       'auto',
+          zIndex:          1001,
+          fontFamily:      'var(--vetc-font-family)',
+          animation:       'vetc-slide-up var(--vetc-transition-slow) cubic-bezier(0.32, 0.72, 0, 1)',
+          ...style,
+        }}
+      >
+        {/* Handle bar */}
+        {showHandle && (
+          <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 'var(--vetc-space-8)', paddingBottom: 'var(--vetc-space-4)' }}>
+            <div style={{
+              width:        'var(--vetc-sheet-handle-width)',
+              height:       'var(--vetc-sheet-handle-height)',
+              borderRadius: 'var(--vetc-radius-pill)',
+              backgroundColor: 'var(--vetc-sheet-handle-color)',
+            }} />
+          </div>
+        )}
+
+        {/* Header */}
+        {title && (
+          <div style={{
+            padding:        `var(--vetc-space-12) var(--vetc-sheet-padding)`,
+            borderBottom:   `1px solid var(--vetc-sheet-border)`,
+            display:        'flex',
+            alignItems:     'center',
+            justifyContent: 'space-between',
+          }}>
+            <span style={{
+              fontSize:   'var(--vetc-sheet-title-size)',
+              fontWeight: 'var(--vetc-sheet-title-weight)' as any,
+              color:      'var(--vetc-sheet-title-color)',
+              lineHeight: 'var(--vetc-line-height-relaxed)',
+            }}>
+              {title}
+            </span>
+            {onClose && (
+              <button
+                onClick={onClose}
+                aria-label="Đóng"
+                style={{
+                  background:  'none',
+                  border:      'none',
+                  cursor:      'pointer',
+                  padding:     'var(--vetc-space-4)',
+                  display:     'flex',
+                  color:       'var(--vetc-color-icon-muted)',
+                  borderRadius:'var(--vetc-radius-pill)',
+                  transition:  'background-color var(--vetc-transition-fast)',
+                }}
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                </svg>
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Body */}
+        <div style={{ padding: 'var(--vetc-sheet-padding)' }}>
+          {children}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes vetc-fade-in {
+          from { opacity: 0 }
+          to   { opacity: 1 }
+        }
+        @keyframes vetc-slide-up {
+          from { transform: translateY(100%) }
+          to   { transform: translateY(0) }
+        }
+      `}</style>
+    </>
+  );
+}
+
+export default BottomSheet;

package/src/ui-react/components/bottom-sheet/index.ts

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

package/src/ui-react/components/button/Button.tsx

@@ -0,0 +1,246 @@
+/**
+ * VETC Button Component
+ * Figma: filled/outlined/elevated/ghost styles
+ * Large: h=48px, radius=12px, font=16px/600
+ * Small: h=32px, radius=8px,  font=14px/600
+ * style:   filled | outlined | elevated | ghost | danger | danger-outlined
+ * variant: brand (green) | neutral (gray-90)
+ */
+import React, { useState } from 'react';
+
+export type ButtonStyle   = 'filled' | 'outlined' | 'elevated' | 'ghost' | 'danger' | 'danger-outlined';
+export type ButtonVariant = 'brand' | 'neutral';
+export type ButtonSize    = 'lg' | 'sm';
+export type ButtonShape   = 'rounded' | 'pill';
+
+export interface ButtonProps {
+  style?:     ButtonStyle;
+  variant?:   ButtonVariant;
+  size?:      ButtonSize;
+  shape?:     ButtonShape;
+  block?:     boolean;
+  disabled?:  boolean;
+  loading?:   boolean;
+  icon?:      React.ReactNode;
+  iconRight?: React.ReactNode;
+  onClick?:   React.MouseEventHandler<HTMLButtonElement>;
+  children?:  React.ReactNode;
+  htmlType?:  'button' | 'submit' | 'reset';
+  className?: string;
+  css?:       React.CSSProperties;
+  id?:        string;
+}
+
+type Tokens = {
+  bg: string; bgHover: string; bgActive: string;
+  text: string; border: string; shadow: string;
+};
+
+const BRAND: Record<ButtonStyle, Tokens> = {
+  filled: {
+    bg:       'var(--vetc-color-brand)',
+    bgHover:  'var(--vetc-color-brand-hover)',
+    bgActive: 'var(--vetc-color-brand-active)',
+    text:     'var(--vetc-white)',
+    border:   'transparent',
+    shadow:   'none',
+  },
+  outlined: {
+    bg:       'transparent',
+    bgHover:  'var(--vetc-green-02)',
+    bgActive: 'var(--vetc-green-05)',
+    text:     'var(--vetc-color-brand)',
+    border:   'var(--vetc-color-brand)',
+    shadow:   'none',
+  },
+  elevated: {
+    bg:       'var(--vetc-color-bg)',
+    bgHover:  'var(--vetc-color-bg-hover)',
+    bgActive: 'var(--vetc-color-bg-pressed)',
+    text:     'var(--vetc-color-brand)',
+    border:   'transparent',
+    shadow:   'var(--vetc-shadow-md)',
+  },
+  ghost: {
+    bg:       'transparent',
+    bgHover:  'var(--vetc-color-bg-hover)',
+    bgActive: 'var(--vetc-color-bg-pressed)',
+    text:     'var(--vetc-color-brand)',
+    border:   'transparent',
+    shadow:   'none',
+  },
+  danger: {
+    bg:       'var(--vetc-color-negative)',
+    bgHover:  'var(--vetc-red-60)',
+    bgActive: 'var(--vetc-red-60)',
+    text:     'var(--vetc-white)',
+    border:   'transparent',
+    shadow:   'none',
+  },
+  'danger-outlined': {
+    bg:       'transparent',
+    bgHover:  'var(--vetc-red-02)',
+    bgActive: 'var(--vetc-red-05)',
+    text:     'var(--vetc-color-negative)',
+    border:   'var(--vetc-color-negative)',
+    shadow:   'none',
+  },
+};
+
+const NEUTRAL: Record<ButtonStyle, Tokens> = {
+  filled: {
+    bg:       'var(--vetc-gray-90)',
+    bgHover:  'var(--vetc-gray-80)',
+    bgActive: 'var(--vetc-gray-70)',
+    text:     'var(--vetc-white)',
+    border:   'transparent',
+    shadow:   'none',
+  },
+  outlined: {
+    bg:       'transparent',
+    bgHover:  'var(--vetc-gray-05)',
+    bgActive: 'var(--vetc-gray-10)',
+    text:     'var(--vetc-gray-90)',
+    border:   'var(--vetc-gray-90)',
+    shadow:   'none',
+  },
+  elevated: {
+    bg:       'var(--vetc-color-bg)',
+    bgHover:  'var(--vetc-color-bg-hover)',
+    bgActive: 'var(--vetc-color-bg-pressed)',
+    text:     'var(--vetc-color-text-primary)',
+    border:   'transparent',
+    shadow:   'var(--vetc-shadow-md)',
+  },
+  ghost: {
+    bg:       'transparent',
+    bgHover:  'var(--vetc-color-bg-hover)',
+    bgActive: 'var(--vetc-color-bg-pressed)',
+    text:     'var(--vetc-color-text-primary)',
+    border:   'transparent',
+    shadow:   'none',
+  },
+  // danger variants are semantic — variant (brand/neutral) has no effect
+  danger: {
+    bg:       'var(--vetc-color-negative)',
+    bgHover:  'var(--vetc-red-60)',
+    bgActive: 'var(--vetc-red-60)',
+    text:     'var(--vetc-white)',
+    border:   'transparent',
+    shadow:   'none',
+  },
+  'danger-outlined': {
+    bg:       'transparent',
+    bgHover:  'var(--vetc-red-02)',
+    bgActive: 'var(--vetc-red-05)',
+    text:     'var(--vetc-color-negative)',
+    border:   'var(--vetc-color-negative)',
+    shadow:   'none',
+  },
+};
+
+const LoadingSpinner = ({ color }: { color: string }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    style={{ animation: 'vetc-btn-spin 0.6s linear infinite', flexShrink: 0 }}
+    aria-hidden="true"
+  >
+    <circle cx="8" cy="8" r="6" stroke={color} strokeOpacity="0.25" strokeWidth="2" />
+    <path d="M8 2a6 6 0 016 6" stroke={color} strokeWidth="2" strokeLinecap="round" />
+  </svg>
+);
+
+export function Button({
+  style    = 'filled',
+  variant  = 'brand',
+  size     = 'lg',
+  shape    = 'rounded',
+  block    = false,
+  disabled = false,
+  loading  = false,
+  icon,
+  iconRight,
+  onClick,
+  children,
+  htmlType = 'button',
+  className = '',
+  css,
+  id,
+}: ButtonProps) {
+  const [pressed, setPressed] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  const tokens    = (variant === 'neutral' ? NEUTRAL : BRAND)[style];
+  const isDisabled = disabled || loading;
+
+  const height   = size === 'lg' ? 'var(--vetc-btn-height-lg)'    : 'var(--vetc-btn-height-sm)';
+  const fontSize = size === 'lg' ? 'var(--vetc-btn-font-size-lg)' : 'var(--vetc-btn-font-size-sm)';
+  const paddingX = size === 'lg' ? 'var(--vetc-btn-padding-x-lg)' : 'var(--vetc-btn-padding-x-sm)';
+  const radius   = shape === 'pill'   ? 'var(--vetc-btn-radius-pill)'
+    : size  === 'lg' ? 'var(--vetc-btn-radius-lg)'
+    : 'var(--vetc-btn-radius-sm)';
+
+  let bg     = tokens.bg;
+  let border = tokens.border;
+  let shadow = tokens.shadow;
+
+  if (isDisabled) {
+    bg     = 'var(--vetc-btn-disabled-bg)';
+    border = 'var(--vetc-btn-disabled-border)';
+    shadow = 'none';
+  } else if (pressed) {
+    bg = tokens.bgActive;
+  } else if (hovered) {
+    bg = tokens.bgHover;
+  }
+
+  const textColor    = isDisabled ? 'var(--vetc-btn-disabled-text)' : tokens.text;
+  const spinnerColor = isDisabled ? 'var(--vetc-gray-30)' : tokens.text;
+
+  return (
+    <>
+      <button
+        id={id}
+        type={htmlType}
+        disabled={isDisabled}
+        onClick={onClick}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => { setHovered(false); setPressed(false); }}
+        onMouseDown={() => setPressed(true)}
+        onMouseUp={() => setPressed(false)}
+        className={`vetc-btn vetc-btn--${style} vetc-btn--${variant} vetc-btn--${size} ${className}`}
+        style={{
+          display:         'inline-flex',
+          alignItems:      'center',
+          justifyContent:  'center',
+          gap:             'var(--vetc-space-8)',
+          height,
+          width:           block ? '100%' : undefined,
+          paddingInline:   paddingX,
+          borderRadius:    radius,
+          border:          `1px solid ${border}`,
+          backgroundColor: bg,
+          boxShadow:       shadow,
+          color:           textColor,
+          fontSize,
+          fontWeight:      'var(--vetc-btn-font-weight)' as any,
+          fontFamily:      'var(--vetc-font-family)',
+          lineHeight:      'var(--vetc-line-height-relaxed)',
+          cursor:          isDisabled ? 'not-allowed' : 'pointer',
+          transition:      'background-color var(--vetc-transition-fast), box-shadow var(--vetc-transition-fast)',
+          userSelect:      'none',
+          outline:         'none',
+          whiteSpace:      'nowrap',
+          ...css,
+        }}
+      >
+        {loading ? <LoadingSpinner color={spinnerColor} /> : icon && <span style={{ display: 'inline-flex', flexShrink: 0 }}>{icon}</span>}
+        {children && <span>{children}</span>}
+        {iconRight && !loading && <span style={{ display: 'inline-flex', flexShrink: 0 }}>{iconRight}</span>}
+      </button>
+      <style>{`@keyframes vetc-btn-spin { to { transform: rotate(360deg); } }`}</style>
+    </>
+  );
+}
+
+export default Button;

package/src/ui-react/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonStyle, ButtonVariant, ButtonSize, ButtonShape } from './Button';

package/src/ui-react/components/button-group/ButtonGroup.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Button } from '../button';
+
+export type ButtonGroupLayout  = 'inline' | 'stacked';
+export type ButtonGroupVariant = 'bounding' | 'none';
+
+export interface ButtonGroupAction {
+  label: React.ReactNode;
+  onClick?: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+export interface ButtonGroupProps {
+  /** Primary action — brand filled, rightmost (inline) or bottom (stacked). Required. */
+  primary: ButtonGroupAction & {
+    /** danger = red filled style */
+    danger?: boolean;
+    /** Override primary button color. Default: brand */
+    variant?: 'brand' | 'neutral';
+  };
+  /** Secondary actions — neutral outlined. Max 2. */
+  secondary?: ButtonGroupAction[];
+  /** Optional content rendered above the button row */
+  content?: React.ReactNode;
+  /** inline: buttons side by side | stacked: buttons stacked vertically */
+  layout?: ButtonGroupLayout;
+  /** bounding: top border + background | none: no container styling */
+  variant?: ButtonGroupVariant;
+}
+
+export function ButtonGroup({
+  primary,
+  secondary = [],
+  content,
+  layout = 'inline',
+  variant = 'none',
+}: ButtonGroupProps) {
+  const isInline   = layout === 'inline';
+  const isBounding = variant === 'bounding';
+
+  const containerStyle: React.CSSProperties = isBounding
+    ? {
+        backgroundColor: 'var(--vetc-btn-group-bg)',
+        borderTop: `1px solid var(--vetc-btn-group-border-color)`,
+        padding: 'var(--vetc-btn-group-padding)',
+        fontFamily: 'var(--vetc-font-family)',
+      }
+    : { fontFamily: 'var(--vetc-font-family)' };
+
+  const rowStyle: React.CSSProperties = isInline
+    ? { display: 'flex', gap: 'var(--vetc-btn-group-gap)', alignItems: 'stretch' }
+    : { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-btn-group-gap)' };
+
+  const secondaryBtns = secondary.map((action, i) => (
+    <Button
+      key={i}
+      style="outlined"
+      variant="neutral"
+      block={!isInline}
+      loading={action.loading}
+      disabled={action.disabled}
+      onClick={action.onClick}
+      css={isInline ? { flex: 1 } : undefined}
+    >
+      {action.label}
+    </Button>
+  ));
+
+  const primaryBtn = (
+    <Button
+      style={primary.danger ? 'danger' : 'filled'}
+      variant={primary.variant ?? 'brand'}
+      block={!isInline}
+      loading={primary.loading}
+      disabled={primary.disabled}
+      onClick={primary.onClick}
+      css={isInline ? { flex: 1 } : undefined}
+    >
+      {primary.label}
+    </Button>
+  );
+
+  return (
+    <div style={containerStyle}>
+      {content && (
+        <div style={{ marginBottom: 'var(--vetc-btn-group-padding)' }}>
+          {content}
+        </div>
+      )}
+      <div style={rowStyle}>
+        {isInline ? (
+          <>
+            {secondaryBtns}
+            {primaryBtn}
+          </>
+        ) : (
+          <>
+            {primaryBtn}
+            {secondaryBtns}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ButtonGroup;

package/src/ui-react/components/button-group/index.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupAction, ButtonGroupLayout, ButtonGroupVariant } from './ButtonGroup';

package/src/ui-react/components/card/Card.tsx

@@ -0,0 +1,77 @@
+/**
+ * VETC Card — tokenized
+ */
+import React from 'react';
+import { Card as AntCard } from 'antd';
+
+export type CardElevation = 'flat' | 'raised' | 'outlined';
+
+export interface CardProps {
+  elevation?: CardElevation;
+  title?: React.ReactNode;
+  extra?: React.ReactNode;
+  children?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+  bodyStyle?: React.CSSProperties;
+  id?: string;
+}
+
+export function Card({
+  elevation = 'outlined',
+  title,
+  extra,
+  children,
+  onClick,
+  className = '',
+  style,
+  bodyStyle,
+  id,
+}: CardProps) {
+  const shadowMap: Record<CardElevation, string> = {
+    flat:     'var(--vetc-shadow-none)',
+    raised:   'var(--vetc-card-shadow-raised)',
+    outlined: 'var(--vetc-shadow-none)',
+  };
+  const borderMap: Record<CardElevation, string> = {
+    flat:     'none',
+    raised:   'none',
+    outlined: `1px solid var(--vetc-card-border)`,
+  };
+
+  return (
+    <AntCard
+      id={id}
+      title={title}
+      extra={extra}
+      onClick={onClick}
+      className={`vetc-card vetc-card--${elevation} ${className}`}
+      styles={{
+        body: {
+          padding:    'var(--vetc-card-padding)',
+          fontFamily: 'var(--vetc-font-family)',
+          ...bodyStyle,
+        },
+        header: title
+          ? { borderBottom: `1px solid var(--vetc-card-border)`, padding: `var(--vetc-space-12) var(--vetc-card-padding)` }
+          : undefined,
+      }}
+      style={{
+        borderRadius:    'var(--vetc-card-radius)',
+        border:          borderMap[elevation],
+        boxShadow:       shadowMap[elevation],
+        cursor:          onClick ? 'pointer' : 'default',
+        overflow:        'hidden',
+        backgroundColor: 'var(--vetc-card-bg)',
+        fontFamily:      'var(--vetc-font-family)',
+        transition:      `box-shadow var(--vetc-transition-fast)`,
+        ...style,
+      }}
+    >
+      {children}
+    </AntCard>
+  );
+}
+
+export default Card;

package/src/ui-react/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardElevation } from './Card';