@vetc-miniapp/ui-react 0.0.24 → 0.0.26

package/src/ui-react/components/input/Input.tsx

@@ -1,195 +0,0 @@
-/**
- * VETC Input / TextField & PasswordInput Components
- * All style values use CSS custom properties from tokens.css
- * Figma: Text field page — height 48px, radius 8px, padding-x 12px
- */
-import React from 'react';
-import { Input as AntInput } from 'antd';
-
-export type InputStatus = 'default' | 'error' | 'success';
-
-// ── Shared label/helper sub-components ───────────────────────────────────────
-
-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>
-  );
-}
-
-function HelperText({ color, children }: { color: string; children: React.ReactNode }) {
-  return (
-    <span
-      style={{
-        fontFamily: 'var(--vetc-font-family)',
-        fontSize:   'var(--vetc-input-helper-font-size)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        color,
-      }}
-    >
-      {children}
-    </span>
-  );
-}
-
-const inputFieldStyle: React.CSSProperties = {
-  height:       'var(--vetc-input-height)',
-  borderRadius: 'var(--vetc-input-radius)',
-  paddingInline:'var(--vetc-input-padding-x)',
-  fontSize:     'var(--vetc-input-font-size)',
-  fontFamily:   'var(--vetc-font-family)',
-};
-
-// ── Input ─────────────────────────────────────────────────────────────────────
-
-export interface InputProps {
-  label?: string;
-  placeholder?: string;
-  value?: string;
-  defaultValue?: string;
-  helperText?: string;
-  /** Status affecting border color */
-  status?: InputStatus;
-  /** Error message — sets status=error automatically */
-  error?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  maxLength?: number;
-  showCount?: boolean;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  allowClear?: boolean;
-  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
-  type?: string;
-  id?: string;
-  name?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  required?: boolean;
-}
-
-export function Input({
-  label, placeholder, value, defaultValue,
-  helperText, status = 'default', error,
-  disabled = false, readOnly = false,
-  maxLength, showCount = false,
-  prefix, suffix, allowClear = false,
-  onChange, onFocus, onBlur, onPressEnter,
-  type = 'text', id, name,
-  className = '', style, required = false,
-}: InputProps) {
-  const hasError = !!error;
-  const resolvedStatus: InputStatus = hasError ? 'error' : status;
-  const antStatus = resolvedStatus === 'error' ? 'error' : undefined;
-
-  const helperMsg = error ?? helperText;
-  const helperColor = resolvedStatus === 'error'
-    ? 'var(--vetc-input-helper-color-error)'
-    : 'var(--vetc-input-helper-color)';
-
-  return (
-    <div
-      className={`vetc-input-wrapper ${className}`}
-      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--vetc-input-gap)', ...style }}
-    >
-      {label && <FieldLabel htmlFor={id} required={required} disabled={disabled}>{label}</FieldLabel>}
-
-      <AntInput
-        id={id}
-        name={name}
-        type={type}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        maxLength={maxLength}
-        showCount={showCount}
-        prefix={prefix}
-        suffix={suffix}
-        allowClear={allowClear}
-        status={antStatus}
-        onChange={(e) => onChange?.(e.target.value, e)}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onPressEnter={onPressEnter}
-        style={inputFieldStyle}
-      />
-
-      {helperMsg && <HelperText color={helperColor}>{helperMsg}</HelperText>}
-    </div>
-  );
-}
-
-// ── Password Input ────────────────────────────────────────────────────────────
-
-export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix' | 'allowClear'> {}
-
-export function PasswordInput({
-  label, placeholder, value, defaultValue,
-  helperText, status = 'default', error,
-  disabled = false, readOnly = false, maxLength,
-  onChange, onFocus, onBlur,
-  id, name, className = '', style, required = false,
-}: PasswordInputProps) {
-  const hasError = !!error;
-  const resolvedStatus: InputStatus = hasError ? 'error' : status;
-  const antStatus = resolvedStatus === 'error' ? 'error' : undefined;
-  const helperMsg = error ?? helperText;
-  const helperColor = hasError
-    ? 'var(--vetc-input-helper-color-error)'
-    : 'var(--vetc-input-helper-color)';
-
-  return (
-    <div
-      className={`vetc-input-wrapper ${className ?? ''}`}
-      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--vetc-input-gap)', ...style }}
-    >
-      {label && <FieldLabel htmlFor={id} required={required} disabled={disabled}>{label}</FieldLabel>}
-
-      <AntInput.Password
-        id={id}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        maxLength={maxLength}
-        status={antStatus}
-        onChange={(e) => onChange?.(e.target.value, e as any)}
-        onFocus={onFocus as any}
-        onBlur={onBlur as any}
-        style={inputFieldStyle}
-      />
-
-      {helperMsg && <HelperText color={helperColor}>{helperMsg}</HelperText>}
-    </div>
-  );
-}
-
-export default Input;

package/src/ui-react/components/list/List.tsx

@@ -1,180 +0,0 @@
-/**
- * VETC List & ListItem — tokenized
- * Figma: List item page — height 56px, padding-x 16px
- */
-import React from 'react';
-
-// ── ChevronRight Icon ─────────────────────────────────────────────────────────
-function ChevronRightIcon({ disabled }: { disabled?: boolean }) {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
-      <path
-        d="M7.5 5L12.5 10L7.5 15"
-        stroke={disabled ? 'var(--vetc-color-icon-disabled)' : 'var(--vetc-color-icon-muted)'}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-// ── ListItem ──────────────────────────────────────────────────────────────────
-export interface ListItemProps {
-  leading?: React.ReactNode;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  trailing?: React.ReactNode;
-  /** Show right chevron */
-  arrow?: boolean;
-  /** Bottom divider line */
-  divider?: boolean;
-  onClick?: () => void;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  id?: string;
-}
-
-export function ListItem({
-  leading,
-  title,
-  description,
-  trailing,
-  arrow = false,
-  divider = true,
-  onClick,
-  disabled = false,
-  className = '',
-  style,
-  id,
-}: ListItemProps) {
-  const isClickable = !!onClick && !disabled;
-
-  return (
-    <div
-      id={id}
-      role={isClickable ? 'button' : undefined}
-      tabIndex={isClickable ? 0 : undefined}
-      className={`vetc-list-item ${className}`}
-      onClick={!disabled ? onClick : undefined}
-      onKeyDown={isClickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') onClick?.(); } : undefined}
-      style={{
-        display:         'flex',
-        alignItems:      'center',
-        minHeight:       'var(--vetc-list-item-height)',
-        padding:         `0 var(--vetc-list-item-padding-x)`,
-        gap:             'var(--vetc-list-item-gap)',
-        cursor:          isClickable ? 'pointer' : 'default',
-        borderBottom:    divider ? `1px solid var(--vetc-list-item-border)` : 'none',
-        backgroundColor: 'var(--vetc-list-item-bg)',
-        opacity:         disabled ? 0.5 : 1,
-        fontFamily:      'var(--vetc-font-family)',
-        transition:      `background-color var(--vetc-transition-fast)`,
-        outline:         'none',
-        ...style,
-      }}
-      onMouseEnter={(e) => {
-        if (isClickable) e.currentTarget.style.backgroundColor = 'var(--vetc-list-item-bg-hover)';
-      }}
-      onMouseLeave={(e) => {
-        if (isClickable) e.currentTarget.style.backgroundColor = 'var(--vetc-list-item-bg)';
-      }}
-    >
-      {/* Leading slot */}
-      {leading && (
-        <div style={{
-          flexShrink: 0,
-          display:    'flex',
-          alignItems: 'center',
-          color:      'var(--vetc-list-item-icon-color)',
-        }}>
-          {leading}
-        </div>
-      )}
-
-      {/* Content */}
-      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 'var(--vetc-space-2)' }}>
-        <span style={{
-          fontSize:     'var(--vetc-list-item-title-size)',
-          fontWeight:   'var(--vetc-list-item-title-weight)' as any,
-          color:        disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-list-item-title-color)',
-          lineHeight:   'var(--vetc-line-height-relaxed)',
-          overflow:     'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace:   'nowrap',
-        }}>
-          {title}
-        </span>
-        {description && (
-          <span style={{
-            fontSize:     'var(--vetc-list-item-desc-size)',
-            fontWeight:   'var(--vetc-font-weight-regular)' as any,
-            color:        disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-list-item-desc-color)',
-            lineHeight:   'var(--vetc-line-height-relaxed)',
-            overflow:     'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace:   'nowrap',
-          }}>
-            {description}
-          </span>
-        )}
-      </div>
-
-      {/* Trailing slot */}
-      {(trailing || arrow) && (
-        <div style={{
-          flexShrink: 0,
-          display:    'flex',
-          alignItems: 'center',
-          gap:        'var(--vetc-space-8)',
-          color:      'var(--vetc-list-item-icon-color)',
-        }}>
-          {trailing}
-          {arrow && <ChevronRightIcon disabled={disabled} />}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── List ──────────────────────────────────────────────────────────────────────
-export interface ListProps<T = any> {
-  items: T[];
-  renderItem: (item: T, index: number) => React.ReactNode;
-  bordered?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  id?: string;
-}
-
-export function List<T = any>({
-  items,
-  renderItem,
-  bordered = false,
-  className = '',
-  style,
-  id,
-}: ListProps<T>) {
-  return (
-    <div
-      id={id}
-      className={`vetc-list ${className}`}
-      style={{
-        border:          bordered ? `1px solid var(--vetc-color-border-variant)` : 'none',
-        borderRadius:    bordered ? 'var(--vetc-card-radius)' : 0,
-        overflow:        'hidden',
-        backgroundColor: 'var(--vetc-color-bg)',
-        ...style,
-      }}
-    >
-      {items.map((item, index) => (
-        <React.Fragment key={index}>
-          {renderItem(item, index)}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-}
-
-export default ListItem;

package/src/ui-react/components/loading/Loading.tsx

@@ -1,121 +0,0 @@
-/**
- * VETC Loading — tokenized
- */
-import React from 'react';
-import { Spin, Skeleton } from 'antd';
-import { LoadingOutlined } from '@ant-design/icons';
-
-export type SpinnerSize = 'sm' | 'md' | 'lg';
-
-const spinnerSizeVarMap: Record<SpinnerSize, string> = {
-  sm: 'var(--vetc-spinner-size-sm)',
-  md: 'var(--vetc-spinner-size-md)',
-  lg: 'var(--vetc-spinner-size-lg)',
-};
-// antd icon needs numeric fontSize — CSS var won't work directly
-const spinnerPxMap: Record<SpinnerSize, number> = { sm: 16, md: 24, lg: 40 };
-
-export interface SpinnerProps {
-  size?: SpinnerSize;
-  color?: string;
-  fullscreen?: boolean;
-  tip?: string;
-  children?: React.ReactNode;
-  spinning?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export function Spinner({
-  size = 'md',
-  color,
-  fullscreen = false,
-  tip,
-  children,
-  spinning = true,
-  className = '',
-  style,
-}: SpinnerProps) {
-  const icon = (
-    <LoadingOutlined
-      style={{ fontSize: spinnerPxMap[size], color: color ?? 'var(--vetc-spinner-color)' }}
-      spin
-    />
-  );
-
-  if (children) {
-    return (
-      <Spin spinning={spinning} indicator={icon} tip={tip} className={`vetc-spinner ${className}`} style={style}>
-        {children}
-      </Spin>
-    );
-  }
-
-  if (fullscreen) {
-    return (
-      <div
-        className={`vetc-spinner-overlay ${className}`}
-        style={{
-          position:        'fixed',
-          inset:           0,
-          display:         'flex',
-          alignItems:      'center',
-          justifyContent:  'center',
-          backgroundColor: 'var(--vetc-color-overlay)',
-          zIndex:          9999,
-          ...style,
-        }}
-      >
-        <Spin spinning={spinning} indicator={icon} tip={tip} />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`vetc-spinner ${className}`}
-      style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...style }}
-    >
-      <Spin spinning={spinning} indicator={icon} tip={tip} />
-    </div>
-  );
-}
-
-// ── Skeleton ──────────────────────────────────────────────────────────────────
-export interface SkeletonProps {
-  rows?: number;
-  avatar?: boolean;
-  avatarSize?: number;
-  title?: boolean;
-  loading?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-}
-
-export function SkeletonLoader({
-  rows = 3,
-  avatar = false,
-  avatarSize = 40,
-  title = true,
-  loading = true,
-  className = '',
-  style,
-  children,
-}: SkeletonProps) {
-  return (
-    <Skeleton
-      active
-      loading={loading}
-      avatar={avatar ? { size: avatarSize, shape: 'circle' } : false}
-      title={title}
-      paragraph={{ rows }}
-      className={`vetc-skeleton ${className}`}
-      style={style}
-    >
-      {children}
-    </Skeleton>
-  );
-}
-
-export default Spinner;

package/src/ui-react/components/modal/Modal.tsx

@@ -1,116 +0,0 @@
-/**
- * VETC Modal / Dialog — tokenized
- * Figma: Dialog page — width 344px, radius 16px, overlay rgba(0,0,0,0.4)
- */
-import React from 'react';
-import { Modal as AntModal } from 'antd';
-
-export interface ModalProps {
-  open: boolean;
-  title?: React.ReactNode;
-  children?: React.ReactNode;
-  /** null = hide footer, undefined = default buttons, ReactNode = custom */
-  footer?: React.ReactNode | null;
-  okText?: string;
-  cancelText?: string;
-  okDisabled?: boolean;
-  okLoading?: boolean;
-  okDanger?: boolean;
-  onOk?: () => void;
-  onCancel?: () => void;
-  maskClosable?: boolean;
-  closable?: boolean;
-  width?: number | string;
-  className?: string;
-  style?: React.CSSProperties;
-  id?: string;
-}
-
-/** Shared button style for modal actions */
-const modalBtnStyle: React.CSSProperties = {
-  height:       'var(--vetc-btn-height-lg)',
-  borderRadius: 'var(--vetc-btn-radius-lg)',
-  fontWeight:   'var(--vetc-btn-font-weight)' as any,
-  fontSize:     'var(--vetc-btn-font-size-lg)',
-  fontFamily:   'var(--vetc-font-family)',
-};
-
-export function Modal({
-  open, title, children, footer,
-  okText = 'Xác nhận', cancelText = 'Hủy',
-  okDisabled = false, okLoading = false, okDanger = false,
-  onOk, onCancel,
-  maskClosable = true, closable = true,
-  width,
-  className = '', style, id,
-}: ModalProps) {
-  return (
-    <AntModal
-      open={open}
-      title={title}
-      okText={okText}
-      cancelText={cancelText}
-      okButtonProps={{
-        disabled: okDisabled,
-        loading:  okLoading,
-        danger:   okDanger,
-        style:    modalBtnStyle,
-      }}
-      cancelButtonProps={{ style: modalBtnStyle }}
-      footer={footer === null ? null : footer}
-      onOk={onOk}
-      onCancel={onCancel}
-      maskClosable={maskClosable}
-      closable={closable}
-      width={width ?? 'var(--vetc-modal-width)'}
-      centered
-      className={`vetc-modal ${className}`}
-      style={{ fontFamily: 'var(--vetc-font-family)', ...style }}
-      styles={{
-        header: {
-          padding:      `var(--vetc-modal-padding) var(--vetc-modal-padding) 0`,
-          borderBottom: 'none',
-        },
-        body: {
-          padding: `var(--vetc-space-8) var(--vetc-modal-padding) var(--vetc-modal-padding)`,
-        },
-        footer: {
-          padding:   `0 var(--vetc-modal-padding) var(--vetc-modal-padding)`,
-          borderTop: 'none',
-        },
-        mask: { backgroundColor: 'var(--vetc-modal-overlay)' },
-      } as any}
-    >
-      {children}
-    </AntModal>
-  );
-}
-
-// ── Confirm hook ──────────────────────────────────────────────────────────────
-export function useConfirm() {
-  const confirm = (opts: {
-    title: string;
-    content?: React.ReactNode;
-    okText?: string;
-    cancelText?: string;
-    okDanger?: boolean;
-    onOk?: () => void | Promise<void>;
-    onCancel?: () => void;
-  }) => {
-    AntModal.confirm({
-      title:              opts.title,
-      content:            opts.content,
-      okText:             opts.okText ?? 'Xác nhận',
-      cancelText:         opts.cancelText ?? 'Hủy',
-      okButtonProps:  { danger: opts.okDanger, style: { ...modalBtnStyle, height: 40 } },
-      cancelButtonProps:  { style: { ...modalBtnStyle, height: 40 } },
-      centered:           true,
-      onOk:               opts.onOk,
-      onCancel:           opts.onCancel,
-      styles: { mask: { backgroundColor: 'var(--vetc-modal-overlay)' } } as any,
-    });
-  };
-  return { confirm };
-}
-
-export default Modal;