feat(UX-1344): Change use of ZetaIcon to allow tree shaking (#300)

The ZetaIcon widget prevents tree shaking on app builds due to how it
processes icons. I have removed usees of the widget as it can be easily
replaced within the components library, but I have kept the widget in
tact if end users still want to use it.


docs: Add widgetbook page for bottom sheet
docs: Update Widgetbook links
docs: Add links to readmes 
deps: Update FVM to latest 3.29.2
feat: Allow components to be used without ZetaProvider or setting up
Zeta manually

---------

Co-authored-by: github-actions <[email protected]>

Author: thelukewalton

.fvmrc

@@ -1,3 +1,3 @@
 {
-  "flutter": "3.29.0"
+  "flutter": "3.29.2"
 }

README.md

@@ -13,6 +13,10 @@ This repo contains the source code for all Zeta Flutter packages.
 | [zeta_flutter_utils](https://github.com/ZebraDevs/zeta_flutter/tree/develop/packages/zeta_flutter_utils)  | [pub.dev](https://pub.dev/packages/zeta_flutter_utils) |
 | [zeta_flutter_icons](https://github.com/ZebraDevs/zeta_flutter/tree/develop/packages/zeta_icons)          | [pub.dev](https://pub.dev/packages/zeta_icons)         |
 
+## Contributing
+
+We welcome contributions in this repo; please see our contribution guidelines (see [CONTRIBUTING](./CONTRIBUTING.md) or [design.zebra.com](https://design.zebra.com/docs/Development/contributing))
+
 ## Licensing
 
 This software is licensed with the MIT license (see [LICENSE](./LICENSE) and [THIRD PARTY LICENSES](./LICENSE-3RD-PARTY)).

devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

example/lib/home.dart

@@ -189,18 +189,17 @@ class ExampleListTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ExpansionTile(
-      title: Text(name),
-      children: children
-          .map(
-            (item) => ListTile(
-              title: Text(item.name),
-              onTap: () => context.go('/${item.name}'),
-              hoverColor: Zeta.of(context).colors.surfaceHover,
-              tileColor: Zeta.of(context).colors.surfaceDefault,
-            ),
-          )
-          .toList(),
+    return ZetaAccordion(
+      title: name,
+      child: Column(
+          children: children
+              .map(
+                (item) => ZetaListItem(
+                  title: Text(item.name),
+                  onTap: () => context.go('/${item.name}'),
+                ),
+              )
+              .toList()),
     );
   }
 }

example/lib/pages/assets/icons_example.dart

@@ -52,7 +52,7 @@ class _IconsExampleState extends State<IconsExample> {
                         child: Column(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: [
-                            ZetaIcon(
+                            Icon(
                               IconData(
                                 e.value.codePoint,
                                 fontFamily: context.rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp,

example/lib/pages/components/avatar_example.dart

@@ -12,8 +12,8 @@ class AvatarExample extends StatelessWidget {
   Widget build(BuildContext context) {
     final Widget image = CachedNetworkImage(
       imageUrl: "https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg",
-      placeholder: (context, url) => ZetaIcon(ZetaIcons.user),
-      errorWidget: (context, url, error) => ZetaIcon(ZetaIcons.error),
+      placeholder: (context, url) => Icon(ZetaIcons.user),
+      errorWidget: (context, url, error) => Icon(ZetaIcons.error),
       fit: BoxFit.cover,
     );
 

example/lib/pages/components/banner_example.dart

@@ -36,7 +36,7 @@ class BannerExample extends StatelessWidget {
                 context: context,
                 title: 'Title left with arrow',
                 titleCenter: true,
-                trailing: ZetaIcon(ZetaIcons.chevron_right),
+                trailing: Icon(ZetaIcons.chevron_right),
               ),
               ZetaSystemBanner(
                 type: ZetaSystemBannerStatus.primary,
@@ -52,14 +52,14 @@ class BannerExample extends StatelessWidget {
                 titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
-                  icon: ZetaIcon(ZetaIcons.chevron_right),
+                  icon: Icon(ZetaIcons.chevron_right),
                   onPressed: () {
                     ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
                       title: 'Title',
                       context: context,
                       type: ZetaSystemBannerStatus.primary,
                       trailing: IconButton(
-                        icon: ZetaIcon(ZetaIcons.close),
+                        icon: Icon(ZetaIcons.close),
                         onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
                       ),
                     ));
@@ -74,14 +74,14 @@ class BannerExample extends StatelessWidget {
                 titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
-                  icon: ZetaIcon(ZetaIcons.chevron_right),
+                  icon: Icon(ZetaIcons.chevron_right),
                   onPressed: () {
                     ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
                       title: 'Title',
                       context: context,
                       type: ZetaSystemBannerStatus.positive,
                       trailing: IconButton(
-                        icon: ZetaIcon(ZetaIcons.close),
+                        icon: Icon(ZetaIcons.close),
                         onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
                       ),
                     ));
@@ -95,14 +95,14 @@ class BannerExample extends StatelessWidget {
                 titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
-                  icon: ZetaIcon(ZetaIcons.chevron_right),
+                  icon: Icon(ZetaIcons.chevron_right),
                   onPressed: () {
                     ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
                       title: 'Title',
                       context: context,
                       type: ZetaSystemBannerStatus.warning,
                       trailing: IconButton(
-                        icon: ZetaIcon(ZetaIcons.close),
+                        icon: Icon(ZetaIcons.close),
                         onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
                       ),
                     ));
@@ -116,14 +116,14 @@ class BannerExample extends StatelessWidget {
                 titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
-                  icon: ZetaIcon(ZetaIcons.chevron_right),
+                  icon: Icon(ZetaIcons.chevron_right),
                   onPressed: () {
                     ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner(
                       title: 'Title',
                       context: context,
                       type: ZetaSystemBannerStatus.negative,
                       trailing: IconButton(
-                        icon: ZetaIcon(ZetaIcons.close),
+                        icon: Icon(ZetaIcons.close),
                         onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(),
                       ),
                     ));

example/lib/pages/components/bottom_sheet_example.dart

@@ -38,7 +38,7 @@ class _BottomSheetExampleState extends State<BottomSheetExample> {
                           6,
                           (index) => ZetaMenuItem.vertical(
                             label: Text('Menu Item'),
-                            icon: ZetaIcon(ZetaIcons.star),
+                            icon: Icon(ZetaIcons.star),
                             onTap: () {},
                           ),
                         ),
@@ -63,7 +63,7 @@ class _BottomSheetExampleState extends State<BottomSheetExample> {
                       (index) => ZetaMenuItem.horizontal(
                         label: Text('Menu Item'),
                         onTap: () {},
-                        leading: ZetaIcon(ZetaIcons.star),
+                        leading: Icon(ZetaIcons.star),
                       ),
                     ),
                   ),

example/lib/pages/components/button_example.dart

@@ -225,7 +225,7 @@ class _ButtonExampleState extends State<ButtonExample> {
             items: [
               ZetaDropdownItem(
                 value: 'Item 1',
-                icon: ZetaIcon(ZetaIcons.star_half),
+                icon: Icon(ZetaIcons.star_half),
               ),
               ZetaDropdownItem(value: 'Item 2'),
             ],

example/lib/pages/components/chip_example.dart

@@ -23,7 +23,7 @@ class _ChipExampleState extends State<ChipExample> {
       const SizedBox(height: 10),
       ZetaInputChip(
         label: 'Label',
-        leading: ZetaIcon(ZetaIcons.user),
+        leading: Icon(ZetaIcons.user),
         trailing: IconButton(icon: Icon(ZetaIcons.close), onPressed: () {}),
         onTap: () {},
       ),
@@ -40,7 +40,7 @@ class _ChipExampleState extends State<ChipExample> {
         height: 40,
         child: ZetaAssistChip(
           label: 'Label',
-          leading: ZetaIcon(ZetaIcons.star),
+          leading: Icon(ZetaIcons.star),
           draggable: true,
           data: 'Assist chip',
           onTap: () {},