feat(UX-1121): Added ZetaProvider.base to allow for better developer …

…experience (#123)

refactor: Added Nothing conveinience method
refactor: Move rounded property to Zeta, not ZetaThemeData
chore: Add rounded switch to example app
refactor: Implement global rounded in example app
test: Update golden tests for rounded state change

example/example.md

@@ -0,0 +1,45 @@
+## Set up
+
+To use Zeta components in you app, first the whole app must be wrapped with `ZetaProvider`. The easiest way to do this is with the custom builder `ZetaProvider.custom`.
+You can provide initial values for `ThemeData`, `ThemeMode`, `contrast` and `ZetaThemeData`.
+
+* `initialThemeData` (optional) allows you to extend an existing Flutter themeData to use alongside the `Zeta` theme.
+* `initialThemeMode` (optional) sets whether the app starts in light or dark mode, or uses the device default.
+* `initialContrast` (optional) sets whether the app starts with standard (WCAG AA) contrast, or if it attempts to use the more accessible contrast (WCAG AAA).
+* `initialZetaThemeData` (optional) allows you to override the Zeta theme with a custom theme.
+*  `initialLightThemeData` and `initialDarkThemeData` (optional) allows you to use existing ThemeData objects withing zeta
+* `builder` (required) is used to construct the app with all Zeta themes injected.
+
+
+```dart
+return ZetaProvider.base(
+    initialThemeData: initialThemeData,
+    initialThemeMode: initialThemeMode,
+    initialContrast: initialContrast,
+    initialZetaThemeData: initialZetaThemeData,
+    initialRounded: initialRounded,
+    builder: (context, lightTheme, darkTheme, themeMode) {
+        return MaterialApp.router(
+            routerConfig: router,
+            themeMode: themeMode,
+            theme: lightTheme,
+            darkTheme: darkTheme,
+        );
+    },
+);
+```
+
+## Using the components
+
+Once Zeta is configured, Zeta components can be used as any other componenent, and will inherit theme and other information from `Zeta`.
+
+```dart
+Column(
+    children:[
+        ZetaButton(label: 'Button', onPressed: (){}),
+        ZetaAvatar(),
+        ZetaStatusLabel(),
+        // etc...
+    ]
+)
+```

example/lib/main.dart

@@ -14,7 +14,7 @@ void main() async {
   runApp(
     ZetaExample(
       themeService: themeService,
-      initialThemeData: themePreferences.$1 ?? ZetaThemeData(),
+      initialZetaThemeData: themePreferences.$1 ?? ZetaThemeData(),
       initialThemeMode: themePreferences.$2 ?? ThemeMode.system,
       initialContrast: themePreferences.$3 ?? ZetaContrast.aa,
     ),
@@ -27,41 +27,26 @@ class ZetaExample extends StatelessWidget {
     required this.themeService,
     required this.initialContrast,
     required this.initialThemeMode,
-    required this.initialThemeData,
+    required this.initialZetaThemeData,
   });
 
   final ZetaThemeService themeService;
   final ZetaContrast initialContrast;
   final ThemeMode initialThemeMode;
-  final ZetaThemeData initialThemeData;
+  final ZetaThemeData initialZetaThemeData;
 
   @override
   Widget build(BuildContext context) {
-    return ZetaProvider(
-      themeService: themeService,
-      initialContrast: initialContrast,
-      initialThemeData: initialThemeData,
+    return ZetaProvider.base(
+      initialZetaThemeData: initialZetaThemeData,
       initialThemeMode: initialThemeMode,
-      builder: (context, themeData, themeMode) {
-        final dark = themeData.colorsDark.toScheme();
-        final light = themeData.colorsLight.toScheme();
+      initialContrast: initialContrast,
+      builder: (context, lightTheme, darkTheme, themeMode) {
         return MaterialApp.router(
           routerConfig: router,
           themeMode: themeMode,
-          theme: ThemeData(
-            useMaterial3: true,
-            fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: light.surfaceTertiary,
-            colorScheme: light,
-            textTheme: zetaTextTheme,
-          ),
-          darkTheme: ThemeData(
-            useMaterial3: true,
-            fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: dark.surfaceTertiary,
-            colorScheme: dark,
-            textTheme: zetaTextTheme,
-          ),
+          theme: lightTheme,
+          darkTheme: darkTheme,
         );
       },
     );

example/lib/pages/assets/icons_example.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../widgets.dart';
@@ -20,26 +21,57 @@ class _IconsExampleState extends State<IconsExample> {
     return ExampleScaffold(
       name: IconsExample.name,
       child: SingleChildScrollView(
-        padding: EdgeInsets.all(ZetaSpacing.medium),
-        child: Column(
-          children: [
-            Text('Round', style: ZetaTextStyles.bodyLarge),
-            Wrap(
-              spacing: 8,
-              runSpacing: 8,
-              children: icons.values.map((e) => Icon(e)).toList(),
-            ),
-            const SizedBox(height: 20),
-            Text('Sharp', style: ZetaTextStyles.bodyLarge),
-            Wrap(
-              spacing: 8,
-              runSpacing: 8,
-              children: icons.values
-                  .map((e) =>
-                      Icon(IconData(e.codePoint, fontFamily: ZetaIcons.familySharp, fontPackage: ZetaIcons.package)))
-                  .toList(),
-            ),
-          ],
+        key: PageStorageKey(0),
+        child: Center(
+          child: Column(
+            children: [
+              Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xl_4),
+              Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium)
+                  .paddingAll(ZetaSpacing.xl_4),
+              Wrap(
+                spacing: ZetaSpacing.xl_4,
+                runSpacing: ZetaSpacing.xl_4,
+                children: icons.entries.map(
+                  (e) {
+                    final nameArr = (e.key.split('_')).join(' ').capitalize();
+                    return Container(
+                      width: 120,
+                      height: 120,
+                      child: InkWell(
+                        borderRadius: ZetaRadius.rounded,
+                        hoverColor: Zeta.of(context).colors.surfaceHover,
+                        onTap: () async {
+                          await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
+                          ScaffoldMessenger.of(context).showMaterialBanner(
+                            ZetaBanner(context: context, title: 'Icon name copied'),
+                          );
+                          await Future.delayed(Duration(seconds: 4));
+                          ScaffoldMessenger.of(context).clearMaterialBanners();
+                        },
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            ZetaIcon(
+                              IconData(
+                                e.value.codePoint,
+                                fontFamily: context.rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp,
+                                fontPackage: ZetaIcons.package,
+                              ),
+                              size: ZetaSpacing.xl_6,
+                            ),
+                            Text(
+                              nameArr,
+                              textAlign: TextAlign.center,
+                            )
+                          ],
+                        ),
+                      ),
+                    );
+                  },
+                ).toList(),
+              ),
+            ],
+          ),
         ),
       ),
     );

example/lib/pages/components/accordion_example.dart

@@ -15,7 +15,7 @@ class AccordionExample extends StatelessWidget {
         padding: EdgeInsets.all(ZetaSpacing.medium),
         child: Column(
           children: [
-            Text('Rounded Divider'),
+            Text('Divider'),
             const SizedBox(height: 20),
             ZetaAccordion(
               title: 'title',
@@ -29,7 +29,7 @@ class AccordionExample extends StatelessWidget {
             ),
             ZetaAccordion(title: 'title'),
             const SizedBox(height: 40),
-            Text('Rounded Contained'),
+            Text('Contained'),
             const SizedBox(height: 20),
             ZetaAccordion(
               contained: true,
@@ -47,44 +47,6 @@ class AccordionExample extends StatelessWidget {
               title: 'title',
             ),
             const SizedBox(height: 40),
-            Text('Sharp Divider'),
-            const SizedBox(height: 20),
-            ZetaAccordion(
-              contained: false,
-              title: 'title',
-              rounded: false,
-              child: Column(
-                children: [
-                  ListTile(title: Text('List Item')),
-                  ListTile(title: Text('List Item')),
-                  ListTile(title: Text('List Item')),
-                ],
-              ),
-            ),
-            ZetaAccordion(
-              contained: false,
-              title: 'title',
-              rounded: false,
-            ),
-            Text('Sharp Contained'),
-            const SizedBox(height: 20),
-            ZetaAccordion(
-              contained: true,
-              title: 'title',
-              rounded: false,
-              child: Column(
-                children: [
-                  ListTile(title: Text('List Item')),
-                  ListTile(title: Text('List Item')),
-                  ListTile(title: Text('List Item')),
-                ],
-              ),
-            ),
-            ZetaAccordion(
-              contained: true,
-              title: 'title',
-              rounded: false,
-            ),
           ].divide(const SizedBox.square(dimension: 10)).toList(),
         ),
       ),