chore: Organize widgetbook (#28)

ZebraDevs · Feb 26, 2024 · e017809 · e017809
1 parent 88cd90a
commit e017809
Show file tree

Hide file tree

Showing 22 changed files with 237 additions and 126 deletions.
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -1,8 +1,6 @@
 name: CI - Pull Request
 on:
-  pull_request_target:
-    types:
-      - opened
+  pull_request:
 
 jobs:
   up-to-date:
@@ -62,7 +60,7 @@ jobs:
         uses: tj-actions/[email protected]
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: "3.16.x"
+          flutter-version: "3.19.x"
           channel: "stable"
       - name: Setup flutter
         run: flutter pub get
@@ -89,9 +87,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: "3.16.x"
+          flutter-version: "3.19.x"
           channel: "stable"
       - name: Setup flutter
         run: flutter pub get

diff --git a/.gitignore b/.gitignore
@@ -145,3 +145,4 @@ $RECYCLE.BIN/
 *.msp
 *.lnk
 **/Generated.xcconfig
+.fvmrc
diff --git a/example/assets/Omer.jpg b/example/assets/Omer.jpg
diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart
@@ -107,16 +107,10 @@ class _ButtonExampleState extends State<ButtonExample> {
                   Column(children: inputButtons(ZetaWidgetBorder.rounded)),
                   Text('Sharp Buttons', style: ZetaTextStyles.displayMedium),
                   Column(children: inputButtons(ZetaWidgetBorder.sharp)),
-                  Text('Floating Action Buttons',
-                      style: ZetaTextStyles.displayMedium),
-                  Text('Tap buttons to change current FAB: ',
-                      style: ZetaTextStyles.bodyMedium),
-                  Wrap(
-                      children:
-                          fabs.divide(SizedBox.square(dimension: 10)).toList()),
-                ]
-                    .divide(const SizedBox.square(dimension: ZetaSpacing.m))
-                    .toList(),
+                  Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium),
+                  Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium),
+                  Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()),
+                ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(),
               ),
             ),
             Expanded(child: const SizedBox()),

diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock
@@ -34,4 +34,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.15.1
diff --git a/example/macos/Runner.xcodeproj/project.pbxproj b/example/macos/Runner.xcodeproj/project.pbxproj
@@ -202,7 +202,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					33CC10EC2044A3C60003C045 = {

diff --git a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -24,3 +24,5 @@ dev_dependencies:
 
 flutter:
   uses-material-design: true
+  assets:
+    - assets/
diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart
@@ -14,11 +14,19 @@ WidgetbookComponent iconWidgetbook() {
         name: 'All Icons',
         builder: (context) {
           Map<String, IconData> icons =
-              (context.knobs.boolean(label: 'Rounded', initialValue: true)) ? iconsRounded : iconsSharp;
+              ((context.knobs.boolean(label: 'Rounded', initialValue: true)) ? iconsRounded : iconsSharp);
+
+          final Map<String, IconData> sortedIcons = Map.fromEntries(icons.entries.toList()
+            ..sort((a, b) {
+              final _a = (a.key.split('_')..removeLast()).join();
+              final _b = (b.key.split('_')..removeLast()).join();
+              return _a.compareTo(_b);
+            }));
 
           return WidgetbookTestWidget(
             removeBody: true,
             widget: SingleChildScrollView(
+              key: PageStorageKey(0),
               child: Center(
                 child: Column(
                   children: [
@@ -27,9 +35,9 @@ WidgetbookComponent iconWidgetbook() {
                     Wrap(
                       spacing: ZetaSpacing.l,
                       runSpacing: ZetaSpacing.l,
-                      children: icons.entries.map(
+                      children: sortedIcons.entries.map(
                         (e) {
-                          final nameArr = e.key.split('_')..removeLast();
+                          final nameArr = (e.key.split('_')..removeLast()).join(' ').capitalize();
                           return Container(
                             width: 100,
                             height: 100,
@@ -41,10 +49,7 @@ WidgetbookComponent iconWidgetbook() {
                               },
                               child: Column(
                                 mainAxisAlignment: MainAxisAlignment.center,
-                                children: [
-                                  Icon(e.value, size: 40),
-                                  Text(nameArr.join(' '), textAlign: TextAlign.center)
-                                ],
+                                children: [Icon(e.value, size: 40), Text(nameArr, textAlign: TextAlign.center)],
                               ),
                             ),
                           );

diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart
@@ -28,7 +28,6 @@ WidgetbookComponent accordionWidgetBook() {
                       ),
                 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/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart
@@ -12,7 +12,7 @@ WidgetbookComponent avatarWidgetBook() {
       WidgetbookUseCase(
         name: 'Image Avatar',
         builder: (context) {
-          final Widget image = Image.network('https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg', fit: BoxFit.cover);
+          final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover);
 
           return WidgetbookTestWidget(
             widget: Column(
@@ -21,7 +21,11 @@ WidgetbookComponent avatarWidgetBook() {
                   padding: const EdgeInsets.all(20),
                   child: ZetaAvatar.image(
                     image: context.knobs.boolean(label: 'Image') ? image : null,
-                    size: context.knobs.list(label: 'Size', options: ZetaAvatarSize.values),
+                    size: context.knobs.list(
+                      label: 'Size',
+                      options: ZetaAvatarSize.values,
+                      labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+                    ),
                     lowerBadge:
                         context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null,
                     borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null),
@@ -46,7 +50,11 @@ WidgetbookComponent avatarWidgetBook() {
                   child: ZetaAvatar.initials(
                     backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: null),
                     initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AB'),
-                    size: context.knobs.list(label: 'Size', options: ZetaAvatarSize.values),
+                    size: context.knobs.list(
+                      label: 'Size',
+                      options: ZetaAvatarSize.values,
+                      labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+                    ),
                     lowerBadge: context.knobs.boolean(label: 'Status badge', initialValue: false)
                         ? ZetaIndicator.notification()
                         : null,

diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart
@@ -20,7 +20,11 @@ WidgetbookComponent badgeWidgetBook() {
                   child: ZetaStatusLabel(
                     label: context.knobs.string(label: 'Label', initialValue: 'Label'),
                     rounded: context.knobs.boolean(label: 'Rounded'),
-                    status: context.knobs.list(label: 'Status', options: ZetaWidgetStatus.values),
+                    status: context.knobs.list(
+                      label: 'Status',
+                      labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                      options: ZetaWidgetStatus.values,
+                    ),
                     customIcon: context.knobs.list(
                       label: 'Icon',
                       options: [
@@ -72,7 +76,11 @@ WidgetbookComponent badgeWidgetBook() {
                 child: ZetaBadge(
                   label: context.knobs.string(label: 'Label', initialValue: 'Label'),
                   rounded: context.knobs.boolean(label: 'Rounded'),
-                  status: context.knobs.list(label: 'Status', options: ZetaWidgetStatus.values),
+                  status: context.knobs.list(
+                    label: 'Status',
+                    options: ZetaWidgetStatus.values,
+                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                  ),
                 ),
               ),
             ],
@@ -88,7 +96,11 @@ WidgetbookComponent badgeWidgetBook() {
               Padding(
                 padding: EdgeInsets.all(20),
                 child: ZetaIndicator(
-                  type: context.knobs.list(label: 'Type', options: ZetaIndicatorType.values),
+                  type: context.knobs.list(
+                    label: 'Type',
+                    options: ZetaIndicatorType.values,
+                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                  ),
                   icon: context.knobs.list(
                     label: 'Icon',
                     options: [
@@ -106,7 +118,11 @@ WidgetbookComponent badgeWidgetBook() {
                     },
                   ),
                   inverse: context.knobs.boolean(label: 'Inverse Border'),
-                  size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values),
+                  size: context.knobs.list(
+                    label: 'Size',
+                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                    options: ZetaWidgetSize.values,
+                  ),
                   value: context.knobs.int.slider(label: 'Value'),
                 ),
               ),
@@ -125,7 +141,11 @@ WidgetbookComponent badgeWidgetBook() {
                 child: ZetaTag(
                   label: context.knobs.string(label: 'Label', initialValue: 'Tag'),
                   rounded: context.knobs.boolean(label: 'Rounded'),
-                  direction: context.knobs.list(label: 'Direction', options: ZetaTagDirection.values),
+                  direction: context.knobs.list(
+                    label: 'Direction',
+                    options: ZetaTagDirection.values,
+                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                  ),
                 ),
               )
             ],
@@ -146,8 +166,16 @@ WidgetbookComponent badgeWidgetBook() {
                     child: ZetaWorkcloudIndicator(
                         index: context.knobs.string(label: 'Index', initialValue: '1'),
                         label: context.knobs.string(label: 'Label', initialValue: 'Label'),
-                        prioritySize: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values),
-                        priorityType: context.knobs.list(label: 'Type', options: ZetaWorkcloudIndicatorType.values),
+                        prioritySize: context.knobs.list(
+                          label: 'Size',
+                          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                          options: ZetaWidgetSize.values,
+                        ),
+                        priorityType: context.knobs.list(
+                          label: 'Type',
+                          labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                          options: ZetaWorkcloudIndicatorType.values,
+                        ),
                         icon: context.knobs.listOrNull(
                           label: 'Icon',
                           options: [

diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart
@@ -19,7 +19,11 @@ WidgetbookComponent bannerWidgetBook() {
                 ZetaSystemBanner(
                   context: context,
                   title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'),
-                  type: context.knobs.list(label: 'Type', options: ZetaSystemBannerStatus.values),
+                  type: context.knobs.list(
+                    label: 'Type',
+                    options: ZetaSystemBannerStatus.values,
+                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                  ),
                   leadingIcon: context.knobs.list(
                     label: 'Icon',
                     options: [
@@ -61,7 +65,11 @@ WidgetbookComponent bannerWidgetBook() {
                           'Lorem ipsum dolor sit amet, conse ctetur  cididunt ut labore et do lore magna aliqua.',
                     ),
                   ),
-                  status: context.knobs.list(label: 'Severity', options: ZetaWidgetStatus.values),
+                  status: context.knobs.list(
+                    label: 'Severity',
+                    options: ZetaWidgetStatus.values,
+                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                  ),
                   onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null,
                   title: context.knobs.string(label: 'Title', initialValue: 'Title'),
                   rounded: context.knobs.boolean(label: 'Rounded'),

diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -23,8 +23,62 @@ WidgetbookComponent buttonWidgetBook() {
                     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),
+                    size: context.knobs.list(
+                      label: 'Size',
+                      options: ZetaWidgetSize.values,
+                      labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                    ),
+                    type: context.knobs.list(
+                      label: 'Type',
+                      options: ZetaButtonType.values,
+                      labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+      WidgetbookUseCase(
+        name: 'Icon Button',
+        builder: (context) {
+          return WidgetbookTestWidget(
+            widget: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Padding(
+                  padding: EdgeInsets.all(20),
+                  child: ZetaIconButton(
+                    icon: context.knobs.list(
+                      label: 'Icon',
+                      options: [
+                        ZetaIcons.star_half_round,
+                        ZetaIcons.add_alert_round,
+                        ZetaIcons.add_box_round,
+                        ZetaIcons.barcode_round,
+                      ],
+                      labelBuilder: (value) {
+                        if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round';
+                        if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round';
+                        if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round';
+                        if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round';
+                        return '';
+                      },
+                    ),
+                    onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {},
+                    borderType:
+                        context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp,
+                    size: context.knobs.list(
+                      label: 'Size',
+                      labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                      options: ZetaWidgetSize.values,
+                    ),
+                    type: context.knobs.list(
+                      label: 'Type',
+                      options: ZetaButtonType.values,
+                      labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                    ),
                   ),
                 ),
               ],
@@ -37,7 +91,7 @@ WidgetbookComponent buttonWidgetBook() {
         builder: (context) => WidgetbookTestWidget(
           widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)),
         ),
-      )
+      ),
     ],
   );
 }
@@ -97,9 +151,21 @@ class _FabWidgetState extends State<FabWidget> {
               return '';
             },
           ),
-          shape: widget.c.knobs.list(label: 'Shape', options: ZetaWidgetBorder.values),
-          size: widget.c.knobs.list(label: 'Shape', options: ZetaFabSize.values),
-          type: widget.c.knobs.list(label: 'Shape', options: ZetaFabType.values),
+          shape: widget.c.knobs.list(
+            label: 'Shape',
+            options: ZetaWidgetBorder.values,
+            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          ),
+          size: widget.c.knobs.list(
+            label: 'Shape',
+            options: ZetaFabSize.values,
+            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          ),
+          type: widget.c.knobs.list(
+            label: 'Shape',
+            options: ZetaFabType.values,
+            labelBuilder: (value) => value.name.split('.').last.capitalize(),
+          ),
         ),
       ),
     );

diff --git a/example/widgetbook/pages/components/password_input_widgetbook.dart b/example/widgetbook/pages/components/password_input_widgetbook.dart
@@ -47,7 +47,11 @@ class _PasswordState extends State<_Password> {
                   rounded: context.knobs.boolean(label: 'Rounded'),
                   enabled: context.knobs.boolean(label: 'Enabled', initialValue: true),
                   obscureText: context.knobs.boolean(label: 'Obscure text', initialValue: true),
-                  size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values),
+                  size: context.knobs.list(
+                    label: 'Size',
+                    options: ZetaWidgetSize.values,
+                    labelBuilder: (value) => value.name.split('.').last.capitalize(),
+                  ),
                   footerIcon: context.knobs.listOrNull(
                     label: 'Icon',
                     options: [
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,3 +145,4 @@ $RECYCLE.BIN/ @@
     *.msp
     *.lnk
     **/Generated.xcconfig
+    .fvmrc
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,4 +34,4 @@ SPEC CHECKSUMS:

		PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7

		COCOAPODS: 1.13.0
		COCOAPODS: 1.15.1