fix: Widgetbook icons and reusable snippets (ZebraDevs#35)

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

Author: thelukewalton

.github/workflows/on-main.yml

@@ -0,0 +1,47 @@
+name: release-please
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v4
+        with:
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+  code-quality:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+      - name: Get branch name
+        id: branch-name
+        uses: tj-actions/[email protected]
+      - uses: subosito/flutter-action@v2
+      - name: Setup flutter
+        run: flutter pub get
+      - name: Lint and format
+        run: |
+          dart format . -l 120
+          dart fix --apply
+          flutter analyze
+          cd example && flutter test
+      - name: Check for modified files
+        id: git-check
+        run: echo "modified=$(if [ -n "$(git status --porcelain)" ]; then echo "true"; else echo "false"; fi)" >>  $GITHUB_ENV
+      - name: Update changes in GitHub repository
+        if: env.modified == 'true'
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "[email protected]"
+          git add -A
+          git commit -m '[automated commit] lint format and import sort'
+          git push -f

.github/workflows/on-release.yml

@@ -15,9 +15,6 @@ jobs:
       - uses: dart-lang/setup-dart@v1
       - name: Install Flutter
         uses: subosito/flutter-action@v2
-        with:
-          flutter-version: "3.16.x"
-          channel: "stable"
       - name: Install dependencies
         run: flutter pub get
       - name: Format code

.github/workflows/pull-request.yml

@@ -59,9 +59,6 @@ jobs:
         id: branch-name
         uses: tj-actions/[email protected]
       - uses: subosito/flutter-action@v2
-        with:
-          flutter-version: "3.19.x"
-          channel: "stable"
       - name: Setup flutter
         run: flutter pub get
       - name: Lint and format

.github/workflows/release-please.yml

@@ -14,6 +14,9 @@ import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
 import 'package:zeta_example/pages/assets/icons_example.dart';
+import 'package:zeta_example/pages/theme/radius_example.dart';
+import 'package:zeta_example/pages/theme/spacing_example.dart';
+import 'package:zeta_example/pages/theme/typography_example.dart';
 import 'package:zeta_example/widgets.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
@@ -41,6 +44,9 @@ final List<Component> components = [
 
 final List<Component> theme = [
   Component(ColorExample.name, (context) => const ColorExample()),
+  Component(TypographyExample.name, (context) => const TypographyExample()),
+  Component(RadiusExample.name, (context) => const RadiusExample()),
+  Component(SpacingExample.name, (context) => const SpacingExample()),
 ];
 final List<Component> assets = [
   Component(IconsExample.name, (context) => const IconsExample()),
@@ -77,7 +83,7 @@ final GoRouter router = GoRouter(
                     ))
                 .toList(),
           ),
-        )
+        ),
       ],
     ),
   ],

example/lib/home.dart

@@ -111,16 +111,10 @@ class _ButtonExampleState extends State<ButtonExample> {
                   Column(
                     children: groupButtons(ZetaWidgetBorder.rounded),
                   ),
-                  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()),
@@ -178,63 +172,62 @@ class _ButtonExampleState extends State<ButtonExample> {
 
   List<Widget> groupButtons(ZetaWidgetBorder) {
     return [
-      ZetaButtonGroup(
-         isLarge: true,
-          rounded: true,
-        buttons: [
-        GroupButton(
+      ZetaButtonGroup(isLarge: true, rounded: true, buttons: [
+        ZetaGroupButton(
+          onPressed: () {},
           label: "Label",
         ),
-        GroupButton(
+        ZetaGroupButton(
+          onPressed: () {},
           label: "Label",
         ),
       ]),
-      ZetaButtonGroup(
-         isLarge: true,
-          rounded: true,
-        buttons: [
-        GroupButton(
+      ZetaButtonGroup(isLarge: true, rounded: true, buttons: [
+        ZetaGroupButton(
+          onPressed: () {},
           label: "Label",
         ),
-        GroupButton.dropdown(
+        ZetaGroupButton.dropdown(
           onPressed: () {},
           label: "Label",
+          dropdown: SizedBox(height: 100, width: 100),
         ),
       ]),
       ZetaButtonGroup(
-         isLarge: true,
-            rounded: true,
+        isLarge: true,
+        rounded: true,
         buttons: [
-          GroupButton.icon(
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
+            onPressed: () {},
             label: "Label",
           ),
-          GroupButton.dropdown(
+          ZetaGroupButton.dropdown(
             onPressed: () {},
             label: "Label",
+            dropdown: SizedBox(height: 100, width: 100),
           ),
-          GroupButton.icon(
-           
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
           ),
         ],
       ),
       ZetaButtonGroup(
         isLarge: true,
-            rounded: true,
+        rounded: true,
         buttons: [
-          GroupButton.icon( 
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
             onPressed: () {},
           ),
-          GroupButton.icon(    
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
             onPressed: () {},
           ),
-          GroupButton.icon(
+          ZetaGroupButton.icon(
             icon: ZetaIcons.star_round,
             label: "Label",
             onPressed: () {},

example/lib/pages/components/button_example.dart

@@ -41,11 +41,7 @@ class ProgressExampleState extends State<ProgressExample> {
               SizedBox(
                 height: 20,
               ),
-              Wrapper(
-                  stepsCompleted: 0,
-                  type: ZetaProgressBarType.standard,
-                  isThin: false,
-                  stateChangeable: true),
+              Wrapper(stepsCompleted: 0, type: ZetaProgressBarType.standard, isThin: false, stateChangeable: true),
               SizedBox(
                 height: 20,
               ),
@@ -118,9 +114,7 @@ class _WrapperState extends State<Wrapper> {
 
   void setLoading() {
     setState(() {
-      type = type == ZetaProgressBarType.buffering
-          ? ZetaProgressBarType.standard
-          : ZetaProgressBarType.buffering;
+      type = type == ZetaProgressBarType.buffering ? ZetaProgressBarType.standard : ZetaProgressBarType.buffering;
     });
   }
 
@@ -150,13 +144,11 @@ class _WrapperState extends State<Wrapper> {
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             widget.type != ZetaProgressBarType.indeterminate
-                ? FilledButton(
-                    onPressed: increasePercentage, child: Text("Increase"))
+                ? FilledButton(onPressed: increasePercentage, child: Text("Increase"))
                 : Container(),
             const SizedBox(width: 40),
             widget.stateChangeable!
-                ? FilledButton(
-                    onPressed: setLoading, child: Text("Start Buffering"))
+                ? FilledButton(onPressed: setLoading, child: Text("Start Buffering"))
                 : SizedBox.shrink()
           ],
         )

example/lib/pages/components/progress_example.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class RadiusExample extends StatelessWidget {
+  static const String name = 'Radius';
+
+  const RadiusExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    List<BorderRadius> radii = [
+      ZetaRadius.none,
+      ZetaRadius.minimal,
+      ZetaRadius.rounded,
+      ZetaRadius.wide,
+      ZetaRadius.full
+    ];
+    final colors = Zeta.of(context).colors;
+    return ExampleScaffold(
+      name: name,
+      child: SingleChildScrollView(
+        padding: EdgeInsets.all(ZetaSpacing.m),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Column(
+              children: radii
+                  .map((rad) {
+                    return Container(
+                      width: 250,
+                      height: 100,
+                      decoration: BoxDecoration(
+                        borderRadius: rad,
+                        color: Zeta.of(context).colors.blue.shade30,
+                        border: Border.all(color: colors.blue.shade80, width: 3),
+                      ),
+                      child: Center(
+                        child: Container(
+                          decoration: BoxDecoration(
+                            borderRadius: rad,
+                            color: Zeta.of(context).colors.surfacePrimary,
+                            border: Border.all(color: colors.blue.shade50, width: 3),
+                          ),
+                          padding: EdgeInsets.all(ZetaSpacing.b),
+                          child: Text(
+                            rad.radiusString.split('.').last.capitalize(),
+                            style: ZetaTextStyles.titleMedium.apply(
+                              color: Zeta.of(context).colors.textDefault,
+                              fontStyle: FontStyle.normal,
+                              decoration: TextDecoration.none,
+                            ),
+                          ),
+                        ),
+                      ),
+                    );
+                  })
+                  .divide(const SizedBox(height: ZetaSpacing.l))
+                  .toList(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+extension on BorderRadius {
+  String get radiusString {
+    if (topLeft.x == 0) return 'ZetaRadius.none';
+    if (topLeft.x == 4) return 'ZetaRadius.minimal';
+    if (topLeft.x == 8) return 'ZetaRadius.rounded';
+    if (topLeft.x == 24) return 'ZetaRadius.wide';
+    return 'ZetaRadius.full';
+  }
+}