Add global WIDGETBOOK-INDEX.md and refactor use case method names for consistency across components
This commit is contained in:
parent
80ca8f665a
commit
f135a6a5f7
10 changed files with 49 additions and 19 deletions
23
widgetbook/WIDGETBOOK-INDEX.md
Normal file
23
widgetbook/WIDGETBOOK-INDEX.md
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
# Widgetbook — Global Index
|
||||||
|
|
||||||
|
This document lists all packages integrated into the Widgetbook along with links to their per‑package indices. Each per‑package INDEX contains the list of components and use cases available for that package.
|
||||||
|
|
||||||
|
Packages
|
||||||
|
- [app_bar_m3e](lib/app_bar_m3e/INDEX-app_bar_m3e.md)
|
||||||
|
- [button_group_m3e](lib/button_group_m3e/INDEX-button_group_m3e.md)
|
||||||
|
- [button_m3e](lib/button_m3e/INDEX-button_m3e.md)
|
||||||
|
- [fab_m3e](lib/fab_m3e/INDEX-fab_m3e.md)
|
||||||
|
- [icon_button_m3e](lib/icon_button_m3e/INDEX-icon_button_m3e.md)
|
||||||
|
- [loading_indicator_m3e](lib/loading_indicator_m3e/INDEX-loading_indicator_m3e.md)
|
||||||
|
- [m3e_design](lib/m3e_design/INDEX-m3e_design.md)
|
||||||
|
- [navigation_bar_m3e](lib/navigation_bar_m3e/INDEX-navigation_bar_m3e.md)
|
||||||
|
- [navigation_rail_m3e](lib/navigation_rail_m3e/INDEX-navigation_rail_m3e.md)
|
||||||
|
- [progress_indicator_m3e](lib/progress_indicator_m3e/INDEX-progress_indicator_m3e.md)
|
||||||
|
- [slider_m3e](lib/slider_m3e/INDEX-slider_m3e.md)
|
||||||
|
- [split_button_m3e](lib/split_button_m3e/INDEX-split_button_m3e.md)
|
||||||
|
- [toolbar_m3e](lib/toolbar_m3e/INDEX-toolbar_m3e.md)
|
||||||
|
|
||||||
|
Notes
|
||||||
|
- Theme switching and text scale are enabled in the Widgetbook app (see lib/main.dart).
|
||||||
|
- All default variants use the build[Component]DefaultUseCase(BuildContext) naming.
|
||||||
|
- If you notice a missing or broken link, please open an issue or fix in the corresponding package directory.
|
||||||
|
|
@ -5,9 +5,9 @@
|
||||||
# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
|
# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
|
||||||
# invoked from the command line by running `flutter analyze`.
|
# invoked from the command line by running `flutter analyze`.
|
||||||
|
|
||||||
# The following line activates a set of recommended lints for Flutter apps,
|
# The following line activates a set of recommended lints.
|
||||||
# packages, and plugins designed to encourage good coding practices.
|
# In this workspace, defer to the repo root analysis options to keep consistency.
|
||||||
include: package:flutter_lints/flutter.yaml
|
include: ../analysis_options.yaml
|
||||||
|
|
||||||
linter:
|
linter:
|
||||||
# The lint rules applied to this project can be customized in the
|
# The lint rules applied to this project can be customized in the
|
||||||
|
|
|
||||||
|
|
@ -132,7 +132,7 @@ Clip _knobClipBehavior(BuildContext context, {Clip initial = Clip.none}) =>
|
||||||
);
|
);
|
||||||
|
|
||||||
@UseCase(name: 'default', type: ButtonGroupM3E)
|
@UseCase(name: 'default', type: ButtonGroupM3E)
|
||||||
Widget buildButtonGroupM3EUseCase(BuildContext context) {
|
Widget buildButtonGroupM3EDefaultUseCase(BuildContext context) {
|
||||||
final ButtonGroupM3EType type = _knobType(context);
|
final ButtonGroupM3EType type = _knobType(context);
|
||||||
final ButtonGroupM3EShape shape = _knobShape(context);
|
final ButtonGroupM3EShape shape = _knobShape(context);
|
||||||
final ButtonGroupM3ESize size = _knobSize(context);
|
final ButtonGroupM3ESize size = _knobSize(context);
|
||||||
|
|
|
||||||
|
|
@ -118,7 +118,7 @@ Widget _buildDemo(
|
||||||
}
|
}
|
||||||
|
|
||||||
@UseCase(name: 'default', type: ButtonM3E)
|
@UseCase(name: 'default', type: ButtonM3E)
|
||||||
Widget buildButtonM3EUseCase(BuildContext context) {
|
Widget buildButtonM3EDefaultUseCase(BuildContext context) {
|
||||||
// Default uses filled style; other params adjustable with knobs
|
// Default uses filled style; other params adjustable with knobs
|
||||||
return _buildDemo(context, style: ButtonM3EStyle.filled);
|
return _buildDemo(context, style: ButtonM3EStyle.filled);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -78,7 +78,7 @@ Widget _buildFab(
|
||||||
}
|
}
|
||||||
|
|
||||||
@widgetbook.UseCase(name: 'default', type: FabM3E)
|
@widgetbook.UseCase(name: 'default', type: FabM3E)
|
||||||
Widget buildFabM3EUseCase(BuildContext context) {
|
Widget buildFabM3EDefaultUseCase(BuildContext context) {
|
||||||
return _buildFab(context, kind: FabM3EKind.primary);
|
return _buildFab(context, kind: FabM3EKind.primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart';
|
||||||
// - Complex objects get meaningful defaults with TODOs.
|
// - Complex objects get meaningful defaults with TODOs.
|
||||||
|
|
||||||
@UseCase(name: 'default', type: IconButtonM3E)
|
@UseCase(name: 'default', type: IconButtonM3E)
|
||||||
Widget buildIconButtonM3EUseCase(BuildContext context) {
|
Widget buildIconButtonM3EDefaultUseCase(BuildContext context) {
|
||||||
final bool isToggle = context.knobs.boolean(
|
final bool isToggle = context.knobs.boolean(
|
||||||
label: 'is toggle (provides selected state)',
|
label: 'is toggle (provides selected state)',
|
||||||
initialValue: true,
|
initialValue: true,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:loading_indicator_m3e/loading_indicator_m3e.dart';
|
import 'package:loading_indicator_m3e/loading_indicator_m3e.dart';
|
||||||
import 'package:material_new_shapes/material_new_shapes.dart';
|
import 'package:material_new_shapes/material_new_shapes.dart';
|
||||||
|
|
@ -23,9 +21,17 @@ List<RoundedPolygon> _polygonSet(String id) {
|
||||||
case 'cookie→oval':
|
case 'cookie→oval':
|
||||||
return [MaterialShapes.cookie9Sided, MaterialShapes.oval];
|
return [MaterialShapes.cookie9Sided, MaterialShapes.oval];
|
||||||
case 'softBurst→pill→sunny':
|
case 'softBurst→pill→sunny':
|
||||||
return [MaterialShapes.softBurst, MaterialShapes.pill, MaterialShapes.sunny];
|
return [
|
||||||
|
MaterialShapes.softBurst,
|
||||||
|
MaterialShapes.pill,
|
||||||
|
MaterialShapes.sunny
|
||||||
|
];
|
||||||
case 'triangle→square→pentagon':
|
case 'triangle→square→pentagon':
|
||||||
return [MaterialShapes.triangle, MaterialShapes.square, MaterialShapes.pentagon];
|
return [
|
||||||
|
MaterialShapes.triangle,
|
||||||
|
MaterialShapes.square,
|
||||||
|
MaterialShapes.pentagon
|
||||||
|
];
|
||||||
default:
|
default:
|
||||||
return [
|
return [
|
||||||
MaterialShapes.softBurst,
|
MaterialShapes.softBurst,
|
||||||
|
|
@ -120,7 +126,9 @@ Widget buildExpressiveLoadingIndicatorColorAndSemanticsUseCase(
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@UseCase(name: 'edge: invalid polygons (debug assert)', type: ExpressiveLoadingIndicator)
|
@UseCase(
|
||||||
|
name: 'edge: invalid polygons (debug assert)',
|
||||||
|
type: ExpressiveLoadingIndicator)
|
||||||
Widget buildExpressiveLoadingIndicatorInvalidPolygonsUseCase(
|
Widget buildExpressiveLoadingIndicatorInvalidPolygonsUseCase(
|
||||||
BuildContext context) {
|
BuildContext context) {
|
||||||
final enableInvalid = context.knobs.boolean(
|
final enableInvalid = context.knobs.boolean(
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@ List<RoundedPolygon> _polygonSet(String id) {
|
||||||
}
|
}
|
||||||
|
|
||||||
@UseCase(name: 'default', type: LoadingIndicatorM3E)
|
@UseCase(name: 'default', type: LoadingIndicatorM3E)
|
||||||
Widget buildLoadingIndicatorM3EUseCase(BuildContext context) {
|
Widget buildLoadingIndicatorM3EDefaultUseCase(BuildContext context) {
|
||||||
// Keep defaults: tokens-based sizing and colors, subtle container.
|
// Keep defaults: tokens-based sizing and colors, subtle container.
|
||||||
return const Center(
|
return const Center(
|
||||||
child: LoadingIndicatorM3E(),
|
child: LoadingIndicatorM3E(),
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:navigation_rail_m3e/navigation_rail_m3e.dart';
|
||||||
import 'package:widgetbook/widgetbook.dart';
|
import 'package:widgetbook/widgetbook.dart';
|
||||||
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
|
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
|
||||||
import 'package:navigation_rail_m3e/navigation_rail_m3e.dart';
|
|
||||||
|
|
||||||
// Note: RailBadgeM3E shows nothing when count is null; dot when 0; count otherwise.
|
// Note: RailBadgeM3E shows nothing when count is null; dot when 0; count otherwise.
|
||||||
|
|
||||||
@widgetbook.UseCase(name: 'default', type: RailBadgeM3E)
|
@widgetbook.UseCase(name: 'default', type: RailBadgeM3E)
|
||||||
Widget buildRailBadgeM3EUseCase(BuildContext context) {
|
Widget buildRailBadgeM3EDefaultUseCase(BuildContext context) {
|
||||||
final count = context.knobs.intOrNull.slider(
|
final count = context.knobs.intOrNull.slider(
|
||||||
label: 'count',
|
label: 'count',
|
||||||
initialValue: 7,
|
initialValue: 7,
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:toolbar_m3e/toolbar_m3e.dart';
|
||||||
import 'package:widgetbook/widgetbook.dart';
|
import 'package:widgetbook/widgetbook.dart';
|
||||||
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
|
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
|
||||||
import 'package:toolbar_m3e/toolbar_m3e.dart';
|
|
||||||
|
|
||||||
@UseCase(name: 'default', type: ToolbarIconButtonM3E)
|
@UseCase(name: 'default', type: ToolbarIconButtonM3E)
|
||||||
Widget buildToolbarIconButtonM3EDefaultUseCase(BuildContext context) {
|
Widget buildToolbarIconButtonM3EDefaultUseCase(BuildContext context) {
|
||||||
|
|
@ -51,7 +49,8 @@ Widget buildToolbarIconButtonM3EDestructiveUseCase(BuildContext context) {
|
||||||
}
|
}
|
||||||
|
|
||||||
@UseCase(name: 'custom_color_and_size', type: ToolbarIconButtonM3E)
|
@UseCase(name: 'custom_color_and_size', type: ToolbarIconButtonM3E)
|
||||||
Widget buildToolbarIconButtonM3ECustomStyleUseCase(BuildContext context) {
|
Widget buildToolbarIconButtonM3ECustomColorAndSizeUseCase(
|
||||||
|
BuildContext context) {
|
||||||
final color = context.knobs.color(label: 'color', initialValue: Colors.teal);
|
final color = context.knobs.color(label: 'color', initialValue: Colors.teal);
|
||||||
final iconSize = context.knobs.double.slider(
|
final iconSize = context.knobs.double.slider(
|
||||||
label: 'iconSize',
|
label: 'iconSize',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue