please-pay-me/mobile/widgetbook/README.md

Please Pay Me — Widgetbook

Portable component catalog for the mobile UI kit. Lives as a separate package under mobile/widgetbook/ and depends on the app package via path — no changes required in production lib/main.dart.

Run

cd mobile\widgetbook
.\run.ps1                  # chrome по умолчанию
.\run.ps1 -Device windows

Или из mobile/:

.\run.ps1 -Target widgetbook -Device chrome

cd mobile/widgetbook
flutter pub get
flutter run -d chrome
# or
flutter run -d windows

Structure

widgetbook/
├── lib/
│   ├── main.dart
│   ├── app.dart              # WidgetbookRoot + addons
│   ├── catalog.dart          # directory tree (also used by smoke tests)
│   ├── addons/               # theme / locale / device frame
│   ├── knobs/                # shared knob helpers
│   ├── support/preview.dart    # iOS grouped-background canvas for use-cases
│   ├── support/demo_scope.dart # real screens on the in-memory DemoBackend
│   └── use_cases/            # Atoms → Molecules → Navigation → Feedback → Screens
└── test/catalog_smoke_test.dart

iOS kit

Компоненты построены на Cupertino и следуют Apple HIG:

• семантические цвета (label / separator / groupedBackground) объявлены как CupertinoDynamicColor, поэтому light/dark резолвится автоматически;
• типографика — шкала SF Pro (largeTitle 34 … caption2 11), в качестве кросс-платформенной замены SF используется Inter;
• списки — inset-grouped секции с hairline-разделителями (0.5pt) и отступом под leading-бейдж, как в Settings;
• контролы — CupertinoButton, CupertinoTextField, CupertinoSwitch, CupertinoSlidingSegmentedControl, CupertinoTabBar, CupertinoAlertDialog, CupertinoActionSheet, CupertinoActivityIndicator;
• вместо Material SnackBar — AppToast: плавающая blur-капсула поверх контента.

Бренд-тинт остался зелёным (AppColors.accent) и подменяет systemBlue.

Use-cases render real widgets from package:please_pay_me/ui/... and themes from package:please_pay_me/theme/....

Addons:

• Theme — Light / Dark (CupertinoThemeAddon, buildLightTheme / buildDarkTheme)
• Locale — ru / en
• Viewport — iPhone / Android frames

Reuse in another Flutter project

1. Copy widgetbook/ folder (or this package).
2. Point please_pay_me path dependency to your UI package (or rename dependency).
3. Keep exporting widgets from that package; use-cases only import them.
4. Run flutter pub get && flutter run.

Optional codegen (annotations already in pubspec.yaml):

dart run build_runner build --delete-conflicting-outputs

Current catalog is manual via catalog.dart so it stays easy to copy without a generator step.

Tests

cd mobile/widgetbook
flutter test

Smoke-тесты проверяют, что структура каталога на месте, и рендерят каждый use-case в светлой и тёмной теме внутри WidgetbookScope (knobs читают состояние из контекста), падая на любом исключении при построении.