@lucky-boy/lottery-ui

EN: Shared UI components, utilities, and types used by every Lucky Boy visual experience.
CN: Lucky Boy 各类可视化抽奖体验所共用的 UI 组件、工具函数与类型定义。

Features · 特性

• EN: Headless state sharing with ready-to-ship React components. / CN: 提供可直接使用的 React 组件与可复用的状态管理逻辑。
• EN: Consistent configuration surface across Mars, Helix, Grid, and Table scenes. / CN: 为火星、螺旋、网格、表格场景提供一致的配置接口。
• EN: TypeScript-first design with full DTS bundles. / CN: TypeScript 优先设计，内置完整类型声明。

Installation · 安装

pnpm add @lucky-boy/lottery-ui
# or
npm install @lucky-boy/lottery-ui
# or
yarn add @lucky-boy/lottery-ui

Usage · 使用示例

import { ControlBar, ResultModal, SettingsModal, TopInfo } from "@lucky-boy/lottery-ui";

export function DemoUI() {
  return (
    <>
      <TopInfo prizeName="Grand Prize" subtitle="今晚的幸运大奖" />
      <ControlBar state="IDLE" onToggleLottery={() => {}} onToggleSettings={() => {}} onShuffleUsers={() => {}} />
      <ResultModal open winners={[{ id: 1, name: "Alice" }]} onClose={() => {}} />
      <SettingsModal open config={{}} onClose={() => {}} onApply={() => {}} />
    </>
  );
}

Related Packages · 关联包

• @lucky-boy/lottery-mars
• @lucky-boy/lottery-helix
• @lucky-boy/lottery-grid
• @lucky-boy/lottery-table

Development · 本地开发

pnpm install
pnpm run build

License · 许可

MIT