Add global WIDGETBOOK-INDEX.md and refactor use case method names for consistency across components

This commit is contained in:
Emily Pauli 2025-10-25 23:29:49 +02:00
commit f135a6a5f7
10 changed files with 49 additions and 19 deletions

View file

@ -0,0 +1,23 @@
# Widgetbook — Global Index
This document lists all packages integrated into the Widgetbook along with links to their perpackage indices. Each perpackage 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.

View file

@ -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

View file

@ -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);

View file

@ -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);
} }

View file

@ -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);
} }

View file

@ -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,

View file

@ -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(

View file

@ -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(),

View file

@ -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,

View file

@ -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',