@ejsc/ma-component 🎨

The Intelligent Design System for 365 Mini App Ecosystem.

ejsc-ma-component là thư viện UI Core được xây dựng dựa trên Atomic Design, giúp tối ưu hóa giao diện người dùng cho các Mini App.

📑 Mục lục

• Cài đặt
• Tích hợp Styles
• Base & Typography
• Navigation
• Layout
• Data Entry
• Feedback & Overlays
• Hooks

📦 Cài đặt

pnpm add ejsc-ma-component

🎨 Tích hợp Styles

Import file CSS vào main.tsx hoặc index.css:

import 'ejsc-ma-component/dist/styles.css';

🅰️ Base & Typography

1. Text

Thành phần hiển thị văn bản chuẩn hệ thống.

<Text variant="h1" weight="bold" color="brand">Tiêu đề chính</Text>
<Text variant="sub" color="sub">Mô tả phụ</Text>

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | variant | h1 | h2 | h3 | base | sub | caption | tiny | base | Định dạng kích thước chữ | | color | main | sub | brand | white | danger | success | main | Màu sắc văn bản | | weight | normal | medium | semibold | bold | normal | Độ đậm của chữ | | align | left | center | right | left | Căn lề |

2. Button

<Button theme="brand" size="md" block onClick={handleClick}>Bắt đầu ngay</Button>
<Button theme="ghost" startIcon={<Icon />}>Tùy chọn</Button>

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | theme | brand | neutral | danger | ghost | warning | brand | Màu sắc chủ đạo | | size | sm | md | lg | md | Kích thước nút | | loading | boolean | false | Trạng thái đang tải | | block | boolean | false | Chiều rộng 100% |

🧭 Navigation

1. AppBar

Thanh tiêu đề trang.

<AppBar title="Thông tin tài khoản" onBack={() => navigate(-1)} />

| Prop | Type | Description | | :--- | :--- | :--- | | title | string | Tiêu đề trang | | onBack | () => void | Hành động khi nhấn nút Back | | rightContent | ReactNode | Nội dung bên phải (icon, button) |

2. Tabs

<Tabs 
  activeKey={active} 
  onChange={setActive}
  items={[
    { key: '1', label: 'Tất cả' },
    { key: '2', label: 'Đang xử lý' }
  ]} 
/>

🏗️ Layout

1. StandardPage

Layout chuẩn tích hợp sẵn AppBar và Pull-to-refresh.

<StandardPage 
  title="Trang chủ" 
  onRefresh={handleRefresh}
>
  <div>Nội dung trang</div>
</StandardPage>

| Prop | Type | Description | | :--- | :--- | :--- | | title | string | Tiêu đề trang hiển thị trên AppBar | | onRefresh | () => Promise<void> | Hàm xử lý khi kéo làm mới | | hideAppBar | boolean | Ẩn thanh tiêu đề |

2. KeyboardAvoidWrapper

Tự động đẩy nội dung khi bàn phím hiện lên.

<KeyboardAvoidWrapper offset={20}>
  <Input label="Nhập thông tin" />
</KeyboardAvoidWrapper>

⌨️ Data Entry

1. Input

<Input 
  label="Số điện thoại" 
  placeholder="09xxx..." 
  error={errors.phone}
  prefix={<PhoneIcon />}
/>

| Prop | Type | Description | | :--- | :--- | :--- | | label | string | Nhãn phía trên input | | variant | outlined | filled | underlined | Kiểu hiển thị | | multiline| boolean | Chế độ nhập nhiều dòng (textarea) | | error | string | Thông báo lỗi phía dưới |

2. WheelPicker & DatePicker

Bộ chọn dạng bánh xe cuộn (Native style).

<DatePickerWheel 
  value={date} 
  onSelect={(v) => setDate(v)} 
  title="Chọn ngày sinh"
/>

🔔 Feedback & Overlays

1. Sheet (Bottom Sheet)

<Sheet open={isOpen} onClose={() => setOpen(false)} layout="inset">
  <SheetHeader title="Tùy chọn" onClose={() => setOpen(false)} />
  <SheetBody>...</SheetBody>
</Sheet>

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | open | boolean | false | Trạng thái đóng/mở | | layout | full | inset | full | inset sẽ có cách lề chuẩn iOS |

2. Toast

Gọi trực tiếp từ code logic:

import { toast } from 'ejsc-ma-component';

toast.success('Lưu thành công!');
toast.error('Có lỗi xảy ra');

⚓ Hooks

| Hook | Return Value | Description | | :--- | :--- | :--- | | usePullToRefresh | { pullDistance, isRefreshing, progress } | Xử lý logic kéo làm mới | | useKeyboard | { isOpen, keyboardHeight } | Theo dõi bàn phím | | useLoadMore | { loading, hasMore, loadMore } | Xử lý phân trang tự động |

Ví dụ usePullToRefresh:

const { pullDistance, isRefreshing } = usePullToRefresh(onRefresh);

© 2026 EJSC Technology. All rights reserved.