97 lines
3.5 KiB
Markdown
97 lines
3.5 KiB
Markdown
# 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
|
||
|
||
```powershell
|
||
cd mobile\widgetbook
|
||
.\run.ps1 # chrome по умолчанию
|
||
.\run.ps1 -Device windows
|
||
```
|
||
|
||
Или из `mobile/`:
|
||
|
||
```powershell
|
||
.\run.ps1 -Target widgetbook -Device chrome
|
||
```
|
||
|
||
```bash
|
||
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`):
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
cd mobile/widgetbook
|
||
flutter test
|
||
```
|
||
|
||
Smoke-тесты проверяют, что структура каталога на месте, и **рендерят каждый use-case
|
||
в светлой и тёмной теме** внутри `WidgetbookScope` (knobs читают состояние из контекста),
|
||
падая на любом исключении при построении.
|