refactor: [DX-2275] Update list knobs

optimus_widgetbook/lib/components/buttons/button.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
-import 'package:optimus_widgetbook/components/common/common.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -12,16 +12,8 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 Widget createDefaultStyle(BuildContext context) {
   final k = context.knobs;
 
-  final leadingIcon = k.listOrNull(
-    label: 'Leading icon',
-    initialOption: null,
-    options: exampleIcons,
-  );
-  final trailingIcon = k.listOrNull(
-    label: 'Trailing icon',
-    initialOption: null,
-    options: exampleIcons,
-  );
+  final leadingIcon = k.optimusIconOrNullKnob(label: 'Leading Icon');
+  final trailingIcon = k.optimusIconOrNullKnob(label: 'Trailing Icon');
 
   final showBadge = k.boolean(label: 'Show Badge', initialValue: false);
   final counter =
@@ -37,15 +29,11 @@ Widget createDefaultStyle(BuildContext context) {
                 onPressed: k.boolean(label: 'Enabled', initialValue: true)
                     ? () {}
                     : null,
-                size: k.list(
-                  label: 'Size',
-                  initialOption: OptimusWidgetSize.large,
-                  options: OptimusWidgetSize.values,
-                ),
+                size: k.widgetSizeKnob,
                 isLoading: k.boolean(label: 'Loading', initialValue: false),
                 variant: v,
-                leadingIcon: leadingIcon,
-                trailingIcon: trailingIcon,
+                leadingIcon: leadingIcon?.data,
+                trailingIcon: trailingIcon?.data,
                 counter: showBadge ? counter : null,
                 child: Text(k.string(label: 'Text', initialValue: 'Button')),
               ),

optimus_widgetbook/lib/components/buttons/dropdown.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -10,7 +11,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 )
 Widget createDefaultStyle(BuildContext context) {
   final k = context.knobs;
-  final isEnabled = k.boolean(label: 'Enabled', initialValue: true);
+  final isEnabled = k.isEnabledKnob;
 
   return SingleChildScrollView(
     child: Column(
@@ -19,11 +20,7 @@ Widget createDefaultStyle(BuildContext context) {
             (v) => Padding(
               padding: const EdgeInsets.symmetric(vertical: 8),
               child: OptimusDropDownButton<int>(
-                size: k.list(
-                  label: 'Size',
-                  initialOption: OptimusWidgetSize.large,
-                  options: OptimusWidgetSize.values,
-                ),
+                size: k.widgetSizeKnob,
                 items: Iterable<int>.generate(10)
                     .map(
                       (i) => ListDropdownTile<int>(

optimus_widgetbook/lib/components/buttons/icon.dart

@@ -1,7 +1,7 @@
 import 'package:dfunc/dfunc.dart';
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
-import 'package:optimus_widgetbook/components/common/common.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -13,11 +13,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 Widget createDefaultStyle(BuildContext context) {
   final k = context.knobs;
 
-  final icon = k.list(
-    label: 'Icon',
-    initialOption: OptimusIcons.calendar,
-    options: exampleIcons,
-  );
+  final icon = k.optimusIconKnob(label: 'Icon');
 
   return SingleChildScrollView(
     child: Column(
@@ -26,15 +22,9 @@ Widget createDefaultStyle(BuildContext context) {
             (v) => Padding(
               padding: const EdgeInsets.all(8),
               child: OptimusIconButton(
-                onPressed: k.boolean(label: 'Enabled', initialValue: true)
-                    ? ignore
-                    : null,
-                icon: Icon(icon),
-                size: k.list(
-                  label: 'Size',
-                  initialOption: OptimusWidgetSize.large,
-                  options: OptimusWidgetSize.values,
-                ),
+                onPressed: k.isEnabledKnob ? ignore : null,
+                icon: Icon(icon.data),
+                size: k.widgetSizeKnob,
                 variant: v,
               ),
             ),

optimus_widgetbook/lib/components/buttons/split.dart

@@ -23,6 +23,7 @@ Widget createDefaultStyle(BuildContext context) {
                   label: 'Size',
                   initialOption: OptimusWidgetSize.large,
                   options: OptimusWidgetSize.values,
+                  labelBuilder: (value) => value.name,
                 ),
                 items: Iterable<int>.generate(10)
                     .map(

optimus_widgetbook/lib/components/buttons/toggle.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -10,7 +11,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 )
 Widget createDefaultStyle(BuildContext context) {
   final k = context.knobs;
-  final isEnabled = k.boolean(label: 'Enabled', initialValue: true);
+  final isEnabled = k.isEnabledKnob;
   final size = k.list(
     label: 'Size',
     labelBuilder: (option) => option.name,

optimus_widgetbook/lib/components/chat/bubble.dart

@@ -27,12 +27,14 @@ Widget createDefaultStyle(BuildContext context) {
       label: 'Alignment',
       initialOption: MessageAlignment.left,
       options: MessageAlignment.values,
+      labelBuilder: (value) => value.name,
     ),
     state: MessageState.sent,
     color: k.list(
       label: 'Color',
       initialOption: MessageColor.dark,
       options: MessageColor.values,
+      labelBuilder: (value) => value.name,
     ),
   );
 

optimus_widgetbook/lib/components/chat/chat.dart

@@ -231,5 +231,5 @@ const _user1 = OptimusMessageAuthor(
 final _user3 = OptimusMessageAuthor(
   id: 'user3',
   username: 'User 3',
-  avatar: organisationAvatar,
+  avatar: organizationAvatar,
 );

optimus_widgetbook/lib/components/chat/common.dart

@@ -15,7 +15,7 @@ const avatar3 = OptimusAvatar(
   imageUrl: _avatar2Url,
 );
 
-final organisationAvatar = Stack(
+final organizationAvatar = Stack(
   children: [
     avatar3,
     Positioned(
@@ -27,7 +27,7 @@ final organisationAvatar = Stack(
         decoration: const BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(8)),
           image: DecorationImage(
-            image: NetworkImage(_organisationAvatarUrl),
+            image: NetworkImage(_organizationAvatarUrl),
             fit: BoxFit.cover,
           ),
         ),
@@ -41,5 +41,5 @@ const _avatarUrl =
 const _avatar2Url =
     'https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80';
 
-const _organisationAvatarUrl =
+const _organizationAvatarUrl =
     'https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80';

optimus_widgetbook/lib/components/data_display/tooltip_wrapper.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
-import 'package:optimus_widgetbook/components/common/common.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -20,20 +20,17 @@ Widget createDefaultStyle(BuildContext context) {
     label: 'Position',
     initialOption: OptimusTooltipPosition.top,
     options: OptimusTooltipPosition.values,
+    labelBuilder: (value) => value.name,
   );
   final size = knobs.list(
     label: 'Size',
     initialOption: OptimusToolTipSize.small,
     options: OptimusToolTipSize.values,
+    labelBuilder: (value) => value.name,
   );
   final duration =
       knobs.int.slider(label: 'Duration', initialValue: 1, min: 0, max: 5);
-  final contentAlign = knobs.list(
-    label: 'Alert icon align:',
-    description: 'Will replace the input field if set to the center',
-    options: alignments,
-    initialOption: Alignment.bottomRight,
-  );
+  final contentAlign = knobs.alignmentKnob();
 
   return Padding(
     padding: const EdgeInsets.all(16),

optimus_widgetbook/lib/components/feedback/alert.dart

@@ -20,7 +20,6 @@ class AlertStory extends StatelessWidget {
   Widget build(BuildContext context) {
     final k = context.knobs;
     final title = k.string(label: 'Title', initialValue: 'Title');
-
     final description = k.string(label: 'Description', initialValue: '');
     final link = k.string(label: 'Link.string', initialValue: '');
     final isDismissible = k.boolean(label: 'Is Dismissible');

optimus_widgetbook/lib/components/feedback/chip.dart

@@ -1,5 +1,7 @@
+import 'package:dfunc/dfunc.dart';
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -11,13 +13,12 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 Widget createDefaultStyle(BuildContext context) {
   final k = context.knobs;
 
-  final isEnabled = k.boolean(label: 'Enabled', initialValue: true);
   final text = k.string(label: 'Chip text', initialValue: 'Chip');
   final hasError = k.boolean(label: 'Error', initialValue: false);
 
   return OptimusChip(
-    isEnabled: isEnabled,
-    onRemoved: () {},
+    isEnabled: k.isEnabledKnob,
+    onRemoved: ignore,
     hasError: hasError,
     child: Text(text),
   );

optimus_widgetbook/lib/components/feedback/system_wide_banner.dart

@@ -1,3 +1,4 @@
+import 'package:dfunc/dfunc.dart';
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
 import 'package:widgetbook/widgetbook.dart';
@@ -35,7 +36,7 @@ Widget createDefaultStyle(BuildContext context) {
                 link: link.isNotEmpty
                     ? OptimusFeedbackLink(
                         text: Text(link),
-                        onPressed: () {},
+                        onPressed: ignore,
                       )
                     : null,
                 variant: v,

optimus_widgetbook/lib/components/feedback/tags.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
-import 'package:optimus_widgetbook/components/common/common.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -13,16 +13,8 @@ Widget createDefaultStyle(BuildContext context) {
   final k = context.knobs;
 
   final isOutlined = k.boolean(label: 'Outlined', initialValue: false);
-  final leadingIcon = k.listOrNull(
-    label: 'Leading icon',
-    initialOption: null,
-    options: exampleIcons,
-  );
-  final trailingIcon = k.listOrNull(
-    label: 'Trailing icon',
-    initialOption: null,
-    options: exampleIcons,
-  );
+  final leadingIcon = k.optimusIconOrNullKnob(label: 'Leading Icon');
+  final trailingIcon = k.optimusIconOrNullKnob(label: 'Trailing Icon');
   final text = k.string(label: 'Text', initialValue: 'Label');
 
   return Column(
@@ -36,8 +28,8 @@ Widget createDefaultStyle(BuildContext context) {
                 padding: const EdgeInsets.all(8),
                 child: OptimusTag(
                   text: text.isEmpty ? c.name : text,
-                  leadingIcon: leadingIcon,
-                  trailingIcon: trailingIcon,
+                  leadingIcon: leadingIcon?.data,
+                  trailingIcon: trailingIcon?.data,
                   colorOption: c,
                   isOutlined: isOutlined,
                 ),
@@ -54,8 +46,8 @@ Widget createDefaultStyle(BuildContext context) {
                 padding: const EdgeInsets.all(8),
                 child: OptimusCategoricalTag(
                   text: text.isEmpty ? c.name : text,
-                  leadingIcon: leadingIcon,
-                  trailingIcon: trailingIcon,
+                  leadingIcon: leadingIcon?.data,
+                  trailingIcon: trailingIcon?.data,
                   colorOption: c,
                   isOutlined: isOutlined,
                 ),

optimus_widgetbook/lib/components/forms/checkbox.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -29,7 +30,7 @@ class CheckboxStoryState extends State<CheckboxStory> {
     return OptimusCheckbox(
       label: Text(k.string(label: 'Label', initialValue: 'Checkbox Label')),
       error: k.string(label: 'Error'),
-      isEnabled: k.boolean(label: 'Enabled', initialValue: true),
+      isEnabled: k.isEnabledKnob,
       size: k.list(
         label: 'Size',
         options: OptimusCheckboxSize.values,

optimus_widgetbook/lib/components/forms/checkbox_group.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:optimus/optimus.dart';
+import 'package:optimus_widgetbook/utils.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -30,7 +31,7 @@ class CheckboxGroupUseCaseState extends State<CheckboxGroupUseCase> {
       label: k.string(label: 'Label', initialValue: 'Checkbox Group Label'),
       error: k.string(label: 'Error'),
       onChanged: _handleChanged,
-      isEnabled: k.boolean(label: 'Enabled', initialValue: true),
+      isEnabled: k.isEnabledKnob,
       values: _checks,
       items: const [
         OptimusGroupItem(label: Text('Checkbox 1'), value: 0),