@vetc-miniapp/ui-react 0.0.22 → 0.0.24

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

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

@@ -0,0 +1,2 @@
+export { Input, PasswordInput } from './Input';
+export type { InputProps, PasswordInputProps, InputStatus } from './Input';

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

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

@@ -0,0 +1,2 @@
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps } from './List';

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

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

@@ -0,0 +1,2 @@
+export { Spinner, SkeletonLoader } from './Loading';
+export type { SpinnerProps, SkeletonProps, SpinnerSize } from './Loading';

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

@@ -0,0 +1,116 @@
+/**
+ * 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;

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

@@ -0,0 +1,2 @@
+export { Modal, useConfirm } from './Modal';
+export type { ModalProps } from './Modal';