@core_super_app/ui

Thư viện UI component dùng chung cho ứng dụng React Native trong hệ sinh thái Super App.

Tinh nang

• BaseView: layout khung trang + header + loading overlay
• Header: header co nut back, title/subtitle, right view
• LoadingOverlay: overlay loading toan man hinh
• TextWrapper: wrapper cho Text voi default style va accessibility
• BasicButton: button gradient co trang thai disabled
• BasicInput: input label dong, clear button, counter, imperative ref
• Export sang ImageSrc cho cac asset icon

Cai dat

npm install @core_super_app/ui

hoac

yarn add @core_super_app/ui

Yeu cau

• Node.js v22.20.0 (xem .nvmrc)
• React Native 0.84.x
• Peer ecosystem su dung trong source:
  • react-native-reanimated
  • react-native-linear-gradient
  • @react-navigation/native
  • @core_super_app/utils

Cac export chinh

Tu root package:

import {
  BaseView,
  Header,
  LoadingOverlay,
  TextWrapper,
  BasicButton,
  BasicInput,
  ImageSrc,
} from '@core_super_app/ui';

src/index.tsx hien tai export:

• toan bo trong components
• namespace ImageSrc tu constants/image

Vi du su dung

BasicButton

import { BasicButton } from '@core_super_app/ui';

<BasicButton onPress={() => console.log('pressed')}>Dang nhap</BasicButton>;

BasicInput voi ref

import { useRef } from 'react';
import { BasicInput } from '@core_super_app/ui';

type InputRef = {
  focus: () => void;
  blur: () => void;
};

const inputRef = useRef<InputRef>(null);

<BasicInput
  ref={inputRef}
  label="So dien thoai"
  value={phone}
  onChange={setPhone}
  showClearButton
/>;

BaseView

import { BaseView } from '@core_super_app/ui';

<BaseView isLoading={loading} back title="Thong tin ca nhan">
  {/* Screen content */}
</BaseView>;

API tong quan

Components

• BaseView
  • Props gom:
    • background
    • toan bo HeaderProps
    • toan bo LoadingOverlayProps
• Header
  • Props chinh:
    • back, leftIcon, onPressLeftIcon
    • title, subTitle, titleStyle, titleMaxLines
    • rightView
    • disabledBackHandler
• LoadingOverlay
  • isLoading?: boolean
  • indicatorColor?: string
• TextWrapper
  • children, style, numberOfLines, ellipsizeMode, onPress, testID
• BasicButton
  • onPress, disabled, colors, style, textStyle, children
• BasicInput
  • Ho tro label animation, clear icon, char counter, regex replace input
  • Ho tro imperative ref: focus() va blur()

Scripts

Trong package.json:

• yarn clean - xoa build artifacts
• yarn prepare - build package bang react-native-builder-bob
• yarn typecheck - kiem tra TypeScript
• yarn lint - lint source
• yarn test - chay Jest
• yarn release - bump version/publish qua release-it

CI

GitHub Actions (.github/workflows/ci.yml) dang chay:

• lint + typecheck
• unit test (coverage)
• build library
• build Android example (co turbo cache)
• build iOS example (co turbo cache)

Publishing

Package publish public len npm:

• publishConfig.access = public
• release command:

yarn release

Release flow su dung release-it + conventional changelog + git tag v<version>.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

Commit message convention theo Conventional Commits.

License

MIT