feat: add duration knob

examples/knobs_example/lib/home_page.dart

@@ -8,13 +8,15 @@ class HomePage extends StatefulWidget {
     this.countLabel,
     this.iconData,
     this.showToolTip = true,
+    this.duration = Duration.zero,
   });
 
   final String title;
   final int incrementBy;
   final String? countLabel;
   final IconData? iconData;
   final bool showToolTip;
+  final Duration duration;
 
   @override
   State<HomePage> createState() => _HomePageState();
@@ -41,6 +43,10 @@ class _HomePageState extends State<HomePage> {
               '$_counter',
               style: Theme.of(context).textTheme.headlineMedium,
             ),
+            Text(
+              '${widget.duration}',
+              style: Theme.of(context).textTheme.headlineMedium,
+            ),
           ],
         ),
       ),

examples/knobs_example/lib/widgetbook.dart

@@ -63,6 +63,10 @@ class WidgetbookApp extends StatelessWidget {
                     description: 'This is the tooltip that is displayed '
                         'when hovering over the increment button',
                   ),
+                  duration: context.knobs.duration(
+                    label: 'Increment duration',
+                    initialValue: const Duration(seconds: 5),
+                  ),
                 );
               },
             ),

packages/widgetbook/CHANGELOG.md

@@ -3,6 +3,7 @@
 - **FIX**: use `MapMixin` instead of `MapBase` for `KnobsRegistry`. ([#903](https://github.com/widgetbook/widgetbook/pull/903))
 - **FEAT**: Add `designLink` to `WidgetbookUseCase`. ([#926](https://github.com/widgetbook/widgetbook/pull/926))
 - **FEAT**: Add light theme support. ([#919](https://github.com/widgetbook/widgetbook/pull/919))
+- **FEAT**: Add `duration` knob. ([#934](https://github.com/widgetbook/widgetbook/pull/934))
 
 ## 3.3.0
 

packages/widgetbook/lib/src/fields/duration_field.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'field.dart';
+import 'field_codec.dart';
+import 'field_type.dart';
+
+class DurationField extends Field<Duration> {
+  DurationField({
+    required super.name,
+    super.initialValue = defaultDuration,
+    super.onChanged,
+  }) : super(
+          type: FieldType.duration,
+          codec: FieldCodec(
+            toParam: (value) => value.inMilliseconds.toString(),
+            toValue: (param) {
+              return param == null
+                  ? null
+                  : Duration(
+                      milliseconds: int.tryParse(param) ?? 0,
+                    );
+            },
+          ),
+        );
+
+  static const defaultDuration = Duration.zero;
+
+  @override
+  Widget toWidget(BuildContext context, String label, Duration? currentValue) {
+    return TextFormField(
+      initialValue:
+          codec.toParam(currentValue ?? initialValue ?? defaultDuration),
+      keyboardType: TextInputType.number,
+      decoration: const InputDecoration(
+        suffix: Text('ms'),
+      ),
+      onChanged: (value) => updateField(
+        context,
+        label,
+        codec.toValue(value) ?? initialValue ?? defaultDuration,
+      ),
+    );
+  }
+}

packages/widgetbook/lib/src/fields/field_type.dart

@@ -5,4 +5,5 @@ enum FieldType {
   doubleInput,
   list,
   string,
+  duration,
 }

packages/widgetbook/lib/src/fields/fields.dart

@@ -2,6 +2,7 @@ export 'boolean_field.dart';
 export 'color_field.dart';
 export 'double_input_field.dart';
 export 'double_slider_field.dart';
+export 'duration_field.dart';
 export 'field.dart';
 export 'field_codec.dart';
 export 'field_type.dart';

packages/widgetbook/lib/src/knobs/builders/knobs_builder.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import '../../fields/fields.dart';
 import '../boolean_knob.dart';
 import '../color_knob.dart';
+import '../duration_knob.dart';
 import '../knob.dart';
 import '../list_knob.dart';
 import '../string_knob.dart';
@@ -142,4 +143,35 @@ class KnobsBuilder {
       ),
     );
   }
+
+  /// Creates a duration input that can be typed in
+  Duration duration({
+    required String label,
+    required Duration initialValue,
+    String? description,
+  }) {
+    return onKnobAdded(
+      DurationKnob(
+        label: label,
+        value: initialValue,
+        description: description,
+      ),
+    )!;
+  }
+
+  /// Creates a duration input that can be adjusted and optionally hold a
+  /// null value
+  Duration? durationOrNull({
+    required String label,
+    Duration? initialValue,
+    String? description,
+  }) {
+    return onKnobAdded(
+      DurationKnob.nullable(
+        label: label,
+        value: initialValue ?? Duration.zero,
+        description: description,
+      ),
+    );
+  }
 }

packages/widgetbook/lib/src/knobs/duration_knob.dart

@@ -0,0 +1,39 @@
+import 'package:meta/meta.dart';
+
+import '../fields/fields.dart';
+import '../state/state.dart';
+import 'knob.dart';
+
+@internal
+class DurationKnob extends Knob<Duration?> {
+  DurationKnob({
+    required super.label,
+    required super.value,
+    super.description,
+  });
+
+  DurationKnob.nullable({
+    required super.label,
+    required super.value,
+    super.description,
+  }) : super(isNullable: true);
+
+  @override
+  List<Field> get fields {
+    return [
+      DurationField(
+        name: label,
+        initialValue: value,
+        onChanged: (context, value) {
+          if (value == null) return;
+          WidgetbookState.of(context).knobs.updateValue(label, value);
+        },
+      ),
+    ];
+  }
+
+  @override
+  Duration valueFromQueryGroup(Map<String, String> group) {
+    return valueOf(label, group)!;
+  }
+}

packages/widgetbook/lib/src/knobs/knobs.dart

@@ -5,6 +5,7 @@ export 'builders/knobs_extension.dart';
 export 'color_knob.dart';
 export 'double_input_knob.dart';
 export 'double_slider_knob.dart';
+export 'duration_knob.dart';
 export 'knob.dart';
 export 'knobs_registry.dart';
 export 'list_knob.dart';

packages/widgetbook/lib/widgetbook.dart

@@ -11,6 +11,7 @@ export 'src/knobs/knobs.dart'
         ColorKnob,
         DoubleInputKnob,
         DoubleSliderKnob,
+        DurationKnob,
         ListKnob,
         StringKnob;
 export 'src/navigation/nodes/nodes.dart';

packages/widgetbook/test/src/fields/duration_field_test.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:widgetbook/widgetbook.dart';
+
+import '../../helper/helper.dart';
+
+void main() {
+  group('$DurationField', () {
+    const fiveSeconds = Duration(seconds: 5);
+    const fiveSecondsInMilliseconds = '5000';
+
+    const tenSeconds = Duration(seconds: 10);
+    const tenSecondsInMilliseconds = '10000';
+
+    final field = DurationField(
+      name: 'duration_field',
+      initialValue: fiveSeconds,
+    );
+
+    test(
+      'given a value, '
+      'when [codec.toParam] is called, '
+      'then it returns the value as a string',
+      () {
+        final result = field.codec.toParam(tenSeconds);
+        expect(result, equals(tenSecondsInMilliseconds));
+      },
+    );
+
+    test(
+      'given a string param, '
+      'when [codec.toValue] is called, '
+      'then it returns the actual value',
+      () {
+        final result = field.codec.toValue(tenSecondsInMilliseconds);
+        expect(result, equals(tenSeconds));
+      },
+    );
+
+    testWidgets(
+      'given a state that has no field value, '
+      'then [toWidget] builds the initial value',
+      (tester) async {
+        await tester.pumpWidget(
+          Builder(
+            builder: (context) {
+              return MaterialApp(
+                home: Scaffold(
+                  body: field.toWidget(
+                    context,
+                    'duration_field',
+                    null,
+                  ),
+                ),
+              );
+            },
+          ),
+        );
+
+        expect(find.text(fiveSecondsInMilliseconds), findsOneWidget);
+      },
+    );
+
+    testWidgets(
+      'given a state that has a field value, '
+      'then [toWidget] builds that value',
+      (tester) async {
+        final widget = await tester.pumpField<Duration, TextFormField>(
+          field,
+          tenSeconds,
+        );
+
+        expect(widget.initialValue, equals(tenSecondsInMilliseconds));
+      },
+    );
+  });
+
+  group('Duration Codec', () {
+    final FieldCodec<Duration> codec = FieldCodec<Duration>(
+      toParam: (duration) => duration.inMilliseconds.toString(),
+      toValue: (param) {
+        if (param == null) return null;
+        return Duration(milliseconds: int.tryParse(param) ?? 0);
+      },
+    );
+
+    test('correctly encodes Duration to string', () {
+      final duration = const Duration(milliseconds: 500);
+      final result = codec.toParam(duration);
+      expect(result, '500');
+    });
+
+    test('correctly decodes string to Duration', () {
+      final string = '500';
+      final result = codec.toValue(string);
+      expect(result, const Duration(milliseconds: 500));
+    });
+  });
+}