normalize components implementation

demo/lib/components/alert.dart

@@ -13,23 +13,19 @@ Widget buildCheckboxUseCase(BuildContext context) {
     child: SizedBox(
       width: 300,
       child: RemixAlert(
-        title: StyledText(
-          context.knobs.string(
-            label: 'Title',
-            initialValue: 'Error',
-          ),
+        title: context.knobs.string(
+          label: 'Title',
+          initialValue: 'Error',
         ),
-        subtitle: StyledText(
-          context.knobs.string(
-            label: 'Subtitle',
-            initialValue: 'Your session has expired. Please log in again.',
-          ),
+        subtitle: context.knobs.string(
+          label: 'Subtitle',
+          initialValue: 'Your session has expired. Please log in again.',
         ),
-        leading: context.knobs.boolean(
-          label: 'Leading',
+        icon: context.knobs.boolean(
+          label: 'icon',
           initialValue: false,
         )
-            ? const StyledIcon(Icons.warning_amber_rounded)
+            ? Icons.warning_amber_rounded
             : null,
       ),
     ),

demo/lib/components/avatar.dart

@@ -15,49 +15,42 @@ Widget buildCheckboxUseCase(BuildContext context) {
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         RemixAvatar(
-          style: AvatarStyles(
+          style: RemixAvatarStyles(
             container: Style(
               box.height(60),
               box.width(60),
               box.borderRadius(20),
               box.color(
                 Colors.cyanAccent.shade200.withAlpha(60),
               ),
-            ),
-            icon: Style(
+              icon.size(30),
               icon.color(Colors.cyanAccent),
             ),
           ),
-          child: const StyledIcon(Icons.person),
+          imageBuilder: (style) => const StyledIcon(Icons.person),
         ),
         const SizedBox(width: 10),
         RemixAvatar(
-          style: AvatarStyles.base().copyWith(
+          style: RemixAvatarStyles.base().copyWith(
             container: Style(
               box.height(50),
               box.width(50),
             ),
-            icon: Style(
-              icon.size(30),
-            ),
           ),
-          child: const StyledIcon(Icons.access_alarms_rounded),
+          imageBuilder: (style) =>
+              const StyledIcon(Icons.access_alarms_rounded),
         ),
         const SizedBox(width: 10),
         RemixAvatar(
-          backgroundImage: const NetworkImage(
+          image: NetworkImage(
             'https://avatars.githubusercontent.com/u/14010287?v=4',
           ),
-          style: AvatarStyles.base().copyWith(
+          style: RemixAvatarStyles.base().copyWith(
             container: Style(
               box.height(40),
               box.width(40),
             ),
-            icon: Style(
-              icon.size(30),
-            ),
           ),
-          // child: const StyledIcon(Icons.access_alarms_rounded),
         ),
       ],
     ),

demo/lib/components/badge.dart

@@ -11,22 +11,10 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 Widget buildCheckboxUseCase(BuildContext context) {
   return Center(
     child: RemixBadge(
-      label: context.knobs.stringOrNull(
+      label: context.knobs.string(
         label: "Label",
         initialValue: "Label",
       ),
-      leadingIcon: context.knobs.boolean(
-        label: "Leading icon",
-        initialValue: false,
-      )
-          ? const StyledIcon(Icons.star_rounded)
-          : null,
-      trailingIcon: context.knobs.boolean(
-        label: "Trailing icon",
-        initialValue: false,
-      )
-          ? const StyledIcon(Icons.alarm)
-          : null,
     ),
   );
 }

demo/lib/components/card.dart

@@ -14,10 +14,10 @@ Widget buildCheckboxUseCase(BuildContext context) {
       child: RemixCard(
         child: RemixListTile(
           leading: RemixAvatar(
-            child: StyledText('LF'),
+            fallbackLabel: 'LF',
           ),
-          title: StyledText('Title'),
-          subtitle: StyledText('Subtitle'),
+          title: 'Title',
+          subtitle: 'Subtitle',
         ),
       ),
     ),

demo/lib/components/list_tile.dart

@@ -12,7 +12,7 @@ Widget buildCheckboxUseCase(BuildContext context) {
   return Center(
     child: RemixListTile(
       leading: RemixAvatar(
-        style: AvatarStyles.base().copyWith(
+        style: RemixAvatarStyles.base().copyWith(
           container: Style(
             height(60),
             width(60),
@@ -22,19 +22,15 @@ Widget buildCheckboxUseCase(BuildContext context) {
             ),
           ),
         ),
-        child: StyledText('LF'),
+        fallbackLabel: 'LF',
       ),
-      title: StyledText(
-        context.knobs.string(
-          label: 'Title',
-          initialValue: 'Title',
-        ),
+      title: context.knobs.string(
+        label: 'Title',
+        initialValue: 'Title',
       ),
-      subtitle: StyledText(
-        context.knobs.string(
-          label: 'Subtitle',
-          initialValue: 'Subtitle',
-        ),
+      subtitle: context.knobs.string(
+        label: 'Subtitle',
+        initialValue: 'Subtitle',
       ),
       trailing: Icon(
         Icons.arrow_forward_ios,

demo/lib/main.directories.g.dart

@@ -1 +1,150 @@
+// coverage:ignore-file
+// ignore_for_file: type=lint
+// ignore_for_file: unused_import, prefer_relative_imports, directives_ordering
 
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+// **************************************************************************
+// AppGenerator
+// **************************************************************************
+
+// ignore_for_file: no_leading_underscores_for_library_prefixes
+import 'package:demo/components/alert.dart' as _i2;
+import 'package:demo/components/avatar.dart' as _i3;
+import 'package:demo/components/badge.dart' as _i4;
+import 'package:demo/components/button.dart' as _i5;
+import 'package:demo/components/card.dart' as _i6;
+import 'package:demo/components/checkbox.dart' as _i7;
+import 'package:demo/components/divider.dart' as _i8;
+import 'package:demo/components/list_tile.dart' as _i9;
+import 'package:demo/components/radio.dart' as _i10;
+import 'package:demo/components/switch.dart' as _i11;
+import 'package:widgetbook/widgetbook.dart' as _i1;
+
+final directories = <_i1.WidgetbookNode>[
+  _i1.WidgetbookFolder(
+    name: 'components',
+    children: [
+      _i1.WidgetbookFolder(
+        name: 'alert',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixAlert',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i2.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'avatar',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixAvatar',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i3.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'badge',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixBadge',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i4.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'button',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixButton',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i5.buildButtonUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'card',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixCard',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i6.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'checkbox',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixCheckbox',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i7.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'divider',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixDivider',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i8.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'list_tile',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixListTile',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i9.buildCheckboxUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'radio',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixRadio',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i10.buildRadioUseCase,
+            ),
+          )
+        ],
+      ),
+      _i1.WidgetbookFolder(
+        name: 'switch',
+        children: [
+          _i1.WidgetbookLeafComponent(
+            name: 'RemixSwitch',
+            useCase: _i1.WidgetbookUseCase(
+              name: 'interactive playground',
+              builder: _i11.buildRadioUseCase,
+            ),
+          )
+        ],
+      ),
+    ],
+  )
+];