Added theme support for Widgetbook. This had been casuing issues wher…

…e the theme mode was not rendering the correct widgets. This also lead to the discovery of theme issues on checkbox and avatar, which have been fixed.
ZebraDevs · Feb 14, 2024 · 245d39d · 245d39d
1 parent de6d76d
commit 245d39d
Show file tree

Hide file tree

Showing 16 changed files with 336 additions and 225 deletions.
diff --git a/example/widgetbook/components/accordion_widgetbook.dart b/example/widgetbook/components/accordion_widgetbook.dart
@@ -11,28 +11,29 @@ WidgetbookComponent accordionWidgetBook() {
     useCases: [
       WidgetbookUseCase(
         name: 'Accordion',
-        builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
-          widget: Padding(
-            padding: const EdgeInsets.all(20),
-            child: ZetaAccordion(
-              child: context.knobs.boolean(label: 'Disabled')
-                  ? null
-                  : Column(
-                      children: [
-                        ListTile(title: Text('Item One')),
-                        ListTile(title: Text('Item  two')),
-                        ListTile(title: Text('Item three')),
-                        ListTile(title: Text('Item four')),
-                      ],
-                    ),
-              title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'),
-              contained: context.knobs.boolean(label: 'Contained', initialValue: false),
-              isOpen: context.knobs.boolean(label: 'Open', initialValue: false),
-              rounded: context.knobs.boolean(label: 'Rounded', initialValue: false),
+        builder: (context) {
+          return WidgetbookTestWidget(
+            widget: Padding(
+              padding: const EdgeInsets.all(20),
+              child: ZetaAccordion(
+                child: context.knobs.boolean(label: 'Disabled')
+                    ? null
+                    : Column(
+                        children: [
+                          ListTile(title: Text('Item One')),
+                          ListTile(title: Text('Item  two')),
+                          ListTile(title: Text('Item three')),
+                          ListTile(title: Text('Item four')),
+                        ],
+                      ),
+                title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'),
+                contained: context.knobs.boolean(label: 'Contained', initialValue: false),
+                isOpen: context.knobs.boolean(label: 'Open', initialValue: false),
+                rounded: context.knobs.boolean(label: 'Rounded', initialValue: false),
+              ),
             ),
-          ),
-        ),
+          );
+        },
       ),
     ],
   );

diff --git a/example/widgetbook/components/avatar_widgetbook.dart b/example/widgetbook/components/avatar_widgetbook.dart
@@ -15,7 +15,6 @@ WidgetbookComponent avatarWidgetBook() {
           final Widget image = Image.network('https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg', fit: BoxFit.cover);
 
           return WidgetbookTestWidget(
-            themeMode: ThemeMode.dark,
             widget: Column(
               children: [
                 Padding(
@@ -40,7 +39,6 @@ WidgetbookComponent avatarWidgetBook() {
         name: 'Initials Avatar',
         builder: (context) {
           return WidgetbookTestWidget(
-            themeMode: ThemeMode.dark,
             widget: Column(
               children: [
                 Padding(

diff --git a/example/widgetbook/components/badges_widgetbook.dart b/example/widgetbook/components/badges_widgetbook.dart
@@ -13,7 +13,6 @@ WidgetbookComponent badgeWidgetBook() {
         name: 'Status Label',
         builder: (context) {
           return WidgetbookTestWidget(
-            themeMode: ThemeMode.dark,
             widget: Column(
               children: [
                 Padding(
@@ -48,7 +47,6 @@ WidgetbookComponent badgeWidgetBook() {
       WidgetbookUseCase(
         name: 'Priority Pill',
         builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
           widget: Column(
             children: [
               Padding(
@@ -66,7 +64,6 @@ WidgetbookComponent badgeWidgetBook() {
       WidgetbookUseCase(
         name: 'Badge',
         builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
           widget: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
@@ -85,7 +82,6 @@ WidgetbookComponent badgeWidgetBook() {
       WidgetbookUseCase(
         name: 'Indicators',
         builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
           widget: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
@@ -121,7 +117,6 @@ WidgetbookComponent badgeWidgetBook() {
       WidgetbookUseCase(
         name: 'Tags',
         builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
           widget: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
@@ -140,7 +135,6 @@ WidgetbookComponent badgeWidgetBook() {
       WidgetbookUseCase(
         name: 'Workcloud Indicators',
         builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
           widget: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [

diff --git a/example/widgetbook/components/banner_widgetbook.dart b/example/widgetbook/components/banner_widgetbook.dart
@@ -49,7 +49,6 @@ WidgetbookComponent BannerWidgetBook() {
       WidgetbookUseCase(
         name: 'In Page Banner',
         builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
           widget: Padding(
             padding: EdgeInsets.all(20),
             child: Column(

diff --git a/example/widgetbook/components/bottom_sheet_widgetbook.dart b/example/widgetbook/components/bottom_sheet_widgetbook.dart
@@ -12,7 +12,6 @@ WidgetbookComponent bottomSheetWidgetBook() {
       WidgetbookUseCase(
         name: 'Content',
         builder: (context) => WidgetbookTestWidget(
-          themeMode: ThemeMode.dark,
           widget: Padding(
             padding: const EdgeInsets.all(20),
             child: _bottomSheet(context),
@@ -24,7 +23,6 @@ WidgetbookComponent bottomSheetWidgetBook() {
         builder: (context) {
           final sheet = _bottomSheet(context);
           return WidgetbookTestWidget(
-            themeMode: ThemeMode.dark,
             widget: Padding(
               padding: const EdgeInsets.all(20),
               child: ElevatedButton(

diff --git a/example/widgetbook/components/button_widgetbook.dart b/example/widgetbook/components/button_widgetbook.dart
@@ -13,15 +13,21 @@ WidgetbookComponent buttonWidgetBook() {
         name: 'Button',
         builder: (context) {
           return WidgetbookTestWidget(
-            widget: Padding(
-              padding: EdgeInsets.all(20),
-              child: ZetaButton(
-                label: context.knobs.string(label: 'Text', initialValue: 'Button'),
-                onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
-                borderType: context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp,
-                size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values),
-                type: context.knobs.list(label: 'Type', options: ZetaButtonType.values),
-              ),
+            widget: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Padding(
+                  padding: EdgeInsets.all(20),
+                  child: ZetaButton(
+                    label: context.knobs.string(label: 'Text', initialValue: 'Button'),
+                    onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
+                    borderType:
+                        context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp,
+                    size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values),
+                    type: context.knobs.list(label: 'Type', options: ZetaButtonType.values),
+                  ),
+                ),
+              ],
             ),
           );
         },

diff --git a/example/widgetbook/components/checkbox_widgetbook.dart b/example/widgetbook/components/checkbox_widgetbook.dart
@@ -10,23 +10,87 @@ WidgetbookComponent checkboxWidgetBook() {
     name: 'Checkbox',
     useCases: [
       WidgetbookUseCase(
-        name: 'Checkbox',
-        builder: (context) => WidgetbookTestWidget(
-          widget: Column(
-            children: [
-              Padding(
-                padding: EdgeInsets.only(top: 10),
-                child: ZetaCheckbox(
-                  value: context.knobs.booleanOrNull(label: 'Checked'),
-                  onChanged: context.knobs.boolean(label: 'Enabled', initialValue: true) ? (_) {} : null,
-                  rounded: context.knobs.boolean(label: 'Rounded'),
-                  label: context.knobs.string(label: 'Label', initialValue: 'Checkbox'),
+        name: 'Checked',
+        builder: (context) {
+          return WidgetbookTestWidget(
+            widget: Column(
+              children: [
+                Padding(
+                  padding: EdgeInsets.only(top: 10),
+                  child: _CheckState(context: context, initialState: true),
                 ),
-              ),
-            ],
-          ),
-        ),
+              ],
+            ),
+          );
+        },
+      ),
+      WidgetbookUseCase(
+        name: 'Indeterminate',
+        builder: (context) {
+          return WidgetbookTestWidget(
+            widget: Column(
+              children: [
+                Padding(
+                  padding: EdgeInsets.only(top: 10),
+                  child: _CheckState(context: context, initialState: null),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+      WidgetbookUseCase(
+        name: 'Unchecked',
+        builder: (context) {
+          return WidgetbookTestWidget(
+            widget: Column(
+              children: [
+                Padding(
+                  padding: EdgeInsets.only(top: 10),
+                  child: _CheckState(context: context, initialState: false),
+                ),
+              ],
+            ),
+          );
+        },
       ),
     ],
   );
 }
+
+class _CheckState extends StatefulWidget {
+  final BuildContext context;
+  final bool? initialState;
+  const _CheckState({required this.context, this.initialState});
+
+  @override
+  State<_CheckState> createState() => __CheckStateState();
+}
+
+class __CheckStateState extends State<_CheckState> {
+  bool? b = null;
+
+  @override
+  void initState() {
+    super.initState();
+    b = widget.initialState;
+  }
+
+  @override
+  Widget build(BuildContext _) {
+    dynamic onChanged =
+        context.knobs.boolean(label: 'Enabled', initialValue: true) ? (b2) => setState(() => b = b2) : null;
+
+    return Column(
+      children: [
+        ZetaCheckbox(
+          value: b,
+          onChanged: onChanged,
+          useIndeterminate: context.knobs.boolean(label: 'Use Indeterminate', initialValue: true),
+          rounded: context.knobs.boolean(label: 'Rounded'),
+          label: context.knobs.string(label: 'Label', initialValue: 'Checkbox'),
+        ),
+      ],
+    );
+  }
+}
diff --git a/example/widgetbook/components/chip_widgetbook.dart b/example/widgetbook/components/chip_widgetbook.dart
@@ -30,16 +30,25 @@ WidgetbookComponent chipWidgetBook() {
             },
           );
           return WidgetbookTestWidget(
-            widget: ZetaInputChip(
-              label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-              leading: context.knobs.boolean(label: 'Avatar')
-                  ? ZetaAvatar(
-                      initials: 'AZ',
-                      size: ZetaAvatarSize.xs,
-                    )
-                  : null,
-              rounded: context.knobs.boolean(label: 'Rounded'),
-              trailing: trailing != null ? Icon(trailing) : null,
+            widget: Padding(
+              padding: const EdgeInsets.all(20),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  ZetaInputChip(
+                    label: context.knobs.string(label: 'Label', initialValue: 'Label'),
+                    leading: context.knobs.boolean(label: 'Avatar')
+                        ? ZetaAvatar(
+                            initials: 'AZ',
+                            size: ZetaAvatarSize.xs,
+                          )
+                        : null,
+                    rounded: context.knobs.boolean(label: 'Rounded'),
+                    trailing: trailing != null ? Icon(trailing) : null,
+                  ),
+                ],
+              ),
             ),
           );
         },

diff --git a/example/widgetbook/test/test_components.dart b/example/widgetbook/test/test_components.dart
@@ -1,57 +1,33 @@
 import 'package:flutter/material.dart';
-import 'package:zeta_flutter/zeta_flutter.dart';
 
 class WidgetbookTestWidget extends StatelessWidget {
   final Size? screenSize;
   final Widget widget;
-  final ThemeMode? themeMode;
   final bool removeBody;
 
   const WidgetbookTestWidget({
     required this.widget,
     this.screenSize,
     super.key,
-    this.themeMode,
     this.removeBody = false,
   });
 
   @override
   Widget build(BuildContext context) {
     final size = screenSize ?? const Size(1280, 720);
 
-    return ZetaProvider(
-      initialThemeMode: themeMode ?? ThemeMode.system,
-      builder: (context, theme, __) {
-        return Builder(
-          builder: (context) {
-            return MaterialApp(
-              debugShowCheckedModeBanner: false,
-              theme: ThemeData(
-                fontFamily: theme.fontFamily,
-                colorScheme: theme.colorsLight.toScheme(),
-                textTheme: zetaTextTheme,
+    return Scaffold(
+      backgroundColor: Colors.transparent,
+      body: removeBody
+          ? widget
+          : SizedBox(
+              width: size.width,
+              height: size.height,
+              child: MediaQuery(
+                data: MediaQueryData(size: Size(size.width, size.height)),
+                child: SingleChildScrollView(child: widget),
               ),
-              darkTheme: ThemeData(
-                fontFamily: theme.fontFamily,
-                colorScheme: theme.colorsDark.toScheme(),
-                textTheme: zetaTextTheme,
-              ),
-              home: Scaffold(
-                body: removeBody
-                    ? widget
-                    : SizedBox(
-                        width: size.width,
-                        height: size.height,
-                        child: MediaQuery(
-                          data: MediaQueryData(size: Size(size.width, size.height)),
-                          child: SingleChildScrollView(child: widget),
-                        ),
-                      ),
-              ),
-            );
-          },
-        );
-      },
+            ),
     );
   }
 }