English | 简体中文

FlexiUI React Mobile is a Bun-based monorepo for the FlexiUI web component system. It includes:

• A reusable React + TypeScript component library
• A Vite example app for preview and manual verification

• Keep behavior and theme values aligned with Android FlexiUI exports
• Use a custom-first implementation strategy (not MD3-base-first)
• Keep all package management and scripts on Bun
• Use CSS-in-JS for component internals (@emotion/css)

.
├─ packages/
│  └─ flexiui-react-mobile/      # Component library package
├─ example/                      # React + Vite + TS preview app
└─ package.json                  # Workspace scripts

• Bun (recommended: latest stable)
• Node.js runtime compatible with Bun tooling

bun install

Start preview app:

bun run dev

Build all:

bun run build

From repository root:

• bun run dev: run the example app (flexiui-react-mobile-example)
• bun run build: build library + example
• bun run build:lib: build library only
• bun run build:example: build example only

Path: packages/flexiui-react-mobile

Main exports:

• Root: flexiui-react-mobile
• Category subpath exports:
  • flexiui-react-mobile/actions
  • flexiui-react-mobile/content
  • flexiui-react-mobile/feedback
  • flexiui-react-mobile/forms
  • flexiui-react-mobile/icons
  • flexiui-react-mobile/layout
  • flexiui-react-mobile/navigation

• actions: FlexiButton
• content: FlexiText, FlexiIcon, FlexiImage, FlexiItem
• feedback: FlexiProgressIndicator
• forms: FlexiEditText, FlexiDropdownList, FlexiAutoCompleteText, FlexiInputBox, FlexiCheckBox, FlexiRadioButton, FlexiSwitch, FlexiSlider, FlexiChip
• layout: area/root layouts, FlexiLinearLayout, FlexiScroll, FlexiWindowInsetsLayout
• navigation: FlexiAppBar, FlexiAppBarLayout, FlexiTabChip, FlexiTabLayout, FlexiNavigationBar, FlexiStickyHeaderBar
• icons: built-in SVG icon components (React components, not external .svg files)

• Theme factory: createFlexiTheme
• Token exports: flexiLightColors, flexiDarkColors, flexiHighContrastColors, flexiPresetPrimaryColors, flexiDimensions

Path: example

• Stack: React + Vite + TypeScript
• Purpose: visual preview, interaction checks, and regression verification during component development

1. Update library code in packages/flexiui-react-mobile/src
2. Run preview app with bun run dev
3. Validate interactions in example pages
4. Build with bun run build before review/release