fix: Widgetbook run / build (#15)

ZebraDevs · Feb 7, 2024 · a2347ad · a2347ad
1 parent 94844c1
commit a2347ad
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 29 deletions.
diff --git a/example/widgetbook/components/accordion_widgetbook.dart b/example/widgetbook/components/accordion_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent accordionWidgetBook() {
   return WidgetbookComponent(
@@ -11,7 +11,7 @@ WidgetbookComponent accordionWidgetBook() {
     useCases: [
       WidgetbookUseCase(
         name: 'Accordion',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Padding(
             padding: const EdgeInsets.all(20),

diff --git a/example/widgetbook/components/avatar_widgetbook.dart b/example/widgetbook/components/avatar_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent avatarWidgetBook() {
   return WidgetbookComponent(
@@ -14,7 +14,7 @@ WidgetbookComponent avatarWidgetBook() {
         builder: (context) {
           final Widget image = Image.network('https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg', fit: BoxFit.cover);
 
-          return TestWidget(
+          return WidgetbookTestWidget(
             themeMode: ThemeMode.dark,
             widget: Column(
               children: [
@@ -39,7 +39,7 @@ WidgetbookComponent avatarWidgetBook() {
       WidgetbookUseCase(
         name: 'Initials Avatar',
         builder: (context) {
-          return TestWidget(
+          return WidgetbookTestWidget(
             themeMode: ThemeMode.dark,
             widget: Column(
               children: [

diff --git a/example/widgetbook/components/badges_widgetbook.dart b/example/widgetbook/components/badges_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent badgeWidgetBook() {
   return WidgetbookComponent(
@@ -12,7 +12,7 @@ WidgetbookComponent badgeWidgetBook() {
       WidgetbookUseCase(
         name: 'Status Label',
         builder: (context) {
-          return TestWidget(
+          return WidgetbookTestWidget(
             themeMode: ThemeMode.dark,
             widget: Column(
               children: [
@@ -47,7 +47,7 @@ WidgetbookComponent badgeWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Priority Pill',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Column(
             children: [
@@ -65,7 +65,7 @@ WidgetbookComponent badgeWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Badge',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Row(
             mainAxisAlignment: MainAxisAlignment.center,
@@ -84,7 +84,7 @@ WidgetbookComponent badgeWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Indicators',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Column(
             mainAxisAlignment: MainAxisAlignment.center,
@@ -120,7 +120,7 @@ WidgetbookComponent badgeWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Tags',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Column(
             mainAxisAlignment: MainAxisAlignment.center,
@@ -139,7 +139,7 @@ WidgetbookComponent badgeWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Workcloud Indicators',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Row(
             mainAxisAlignment: MainAxisAlignment.center,

diff --git a/example/widgetbook/components/banner_widgetbook.dart b/example/widgetbook/components/banner_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent BannerWidgetBook() {
   return WidgetbookComponent(
@@ -11,7 +11,7 @@ WidgetbookComponent BannerWidgetBook() {
     useCases: [
       WidgetbookUseCase(
         name: 'System Banner',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           widget: Padding(
             padding: EdgeInsets.all(20),
             child: Column(
@@ -48,7 +48,7 @@ WidgetbookComponent BannerWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'In Page Banner',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Padding(
             padding: EdgeInsets.all(20),

diff --git a/example/widgetbook/components/bottom_sheet_widgetbook.dart b/example/widgetbook/components/bottom_sheet_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent bottomSheetWidgetBook() {
   return WidgetbookComponent(
@@ -11,7 +11,7 @@ WidgetbookComponent bottomSheetWidgetBook() {
     useCases: [
       WidgetbookUseCase(
         name: 'Content',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           themeMode: ThemeMode.dark,
           widget: Padding(
             padding: const EdgeInsets.all(20),
@@ -23,7 +23,7 @@ WidgetbookComponent bottomSheetWidgetBook() {
         name: 'Live',
         builder: (context) {
           final sheet = _bottomSheet(context);
-          return TestWidget(
+          return WidgetbookTestWidget(
             themeMode: ThemeMode.dark,
             widget: Padding(
               padding: const EdgeInsets.all(20),

diff --git a/example/widgetbook/components/button_widgetbook.dart b/example/widgetbook/components/button_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent buttonWidgetBook() {
   return WidgetbookComponent(
@@ -12,7 +12,7 @@ WidgetbookComponent buttonWidgetBook() {
       WidgetbookUseCase(
         name: 'Button',
         builder: (context) {
-          return TestWidget(
+          return WidgetbookTestWidget(
             widget: Padding(
               padding: EdgeInsets.all(20),
               child: ZetaButton(
@@ -28,7 +28,7 @@ WidgetbookComponent buttonWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Floating Action Button',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)),
         ),
       )

diff --git a/example/widgetbook/components/checkbox_widgetbook.dart b/example/widgetbook/components/checkbox_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent checkboxWidgetBook() {
   return WidgetbookComponent(
@@ -11,7 +11,7 @@ WidgetbookComponent checkboxWidgetBook() {
     useCases: [
       WidgetbookUseCase(
         name: 'Checkbox',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           widget: Column(
             children: [
               Padding(

diff --git a/example/widgetbook/components/chip_widgetbook.dart b/example/widgetbook/components/chip_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent chipWidgetBook() {
   return WidgetbookComponent(
@@ -29,7 +29,7 @@ WidgetbookComponent chipWidgetBook() {
               return '';
             },
           );
-          return TestWidget(
+          return WidgetbookTestWidget(
             widget: ZetaInputChip(
               label: context.knobs.string(label: 'Label', initialValue: 'Label'),
               leading: context.knobs.boolean(label: 'Avatar')
@@ -46,7 +46,7 @@ WidgetbookComponent chipWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Filter Chip',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           widget: Padding(
             padding: const EdgeInsets.all(20),
             child: Column(
@@ -63,7 +63,7 @@ WidgetbookComponent chipWidgetBook() {
       ),
       WidgetbookUseCase(
         name: 'Assist Chip',
-        builder: (context) => TestWidget(
+        builder: (context) => WidgetbookTestWidget(
           widget: Padding(
             padding: const EdgeInsets.all(20),
             child: Column(

diff --git a/example/widgetbook/components/password_input_widgetbook.dart b/example/widgetbook/components/password_input_widgetbook.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
-import '../../test/test_components.dart';
+import '../test/test_components.dart';
 
 WidgetbookComponent passwordInputWidgetBook() {
   return WidgetbookComponent(
@@ -36,7 +36,7 @@ class _PasswordState extends State<_Password> {
     final validationString = context.knobs.string(label: 'Error label', initialValue: 'Incorrect');
     return Form(
       key: _formKey,
-      child: TestWidget(
+      child: WidgetbookTestWidget(
         widget: Padding(
           padding: EdgeInsets.all(ZetaSpacing.x5),
           child: Column(

diff --git a/example/widgetbook/test/test_components.dart b/example/widgetbook/test/test_components.dart
@@ -0,0 +1,57 @@
+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,
+              ),
+              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),
+                        ),
+                      ),
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+}