fix: Widgetbook icons and reusable snippets

.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

example/lib/home.dart

@@ -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/pages/theme/radius_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';
+  }
+}

example/lib/pages/theme/spacing_example.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:path_drawing/path_drawing.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+Map<String, double> namedSpacings = {
+  'xxs': ZetaSpacing.xxs,
+  'xs': ZetaSpacing.xs,
+  's': ZetaSpacing.s,
+  'b': ZetaSpacing.b,
+  'm': ZetaSpacing.m,
+  'l': ZetaSpacing.l,
+  'xl': ZetaSpacing.xl,
+  'xxl': ZetaSpacing.xxl,
+  'xxxl': ZetaSpacing.xxxl,
+};
+Map<String, double> valueSpacings = {
+  'x1': ZetaSpacing.x1,
+  'x2': ZetaSpacing.x2,
+  'x3': ZetaSpacing.x3,
+  'x3.5': ZetaSpacing.x3_5,
+  'x4': ZetaSpacing.x4,
+  'x5': ZetaSpacing.x5,
+  'x6': ZetaSpacing.x6,
+  'x7': ZetaSpacing.x7,
+  'x8': ZetaSpacing.x8,
+  'x9': ZetaSpacing.x9,
+  'x10': ZetaSpacing.x10,
+  'x11': ZetaSpacing.x11,
+  'x12': ZetaSpacing.x12,
+  'x13': ZetaSpacing.x13,
+  'x14': ZetaSpacing.x14,
+  'x16': ZetaSpacing.x16,
+  'x20': ZetaSpacing.x20,
+  'x24': ZetaSpacing.x24,
+};
+
+class SpacingExample extends StatelessWidget {
+  const SpacingExample({super.key});
+  static const String name = 'Spacing';
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: name,
+      child: SingleChildScrollView(
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: valueSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
+              ),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: namedSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SpacingDemo extends StatelessWidget {
+  final MapEntry<String, double> size;
+
+  const _SpacingDemo(this.size);
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+    return Container(
+      color: colors.blue.shade30,
+      margin: EdgeInsets.all(ZetaSpacing.m),
+      child: CustomPaint(
+        painter: _TagPainter(color: colors.pink),
+        child: LayoutBuilder(builder: (context, c2) {
+          return Container(
+            margin: EdgeInsets.all(size.value),
+            padding: EdgeInsets.all(ZetaSpacing.s),
+            color: colors.surfacePrimary,
+            child: Text(
+              'ZetaSpacing.' + size.key,
+              style: ZetaTextStyles.titleMedium.apply(
+                color: Zeta.of(context).colors.textDefault,
+                fontStyle: FontStyle.normal,
+                decoration: TextDecoration.none,
+              ),
+            ),
+          );
+        }),
+      ),
+    );
+  }
+}
+
+class _TagPainter extends CustomPainter {
+  const _TagPainter({
+    required this.color,
+  });
+
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Paint paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.stroke;
+
+    final horizontal = Path()
+      ..moveTo(0, (size.height / 2))
+      ..lineTo(size.width, (size.height / 2))
+      ..close();
+
+    final vertical = Path()
+      ..moveTo(size.width / 2, 0)
+      ..lineTo(size.width / 2, size.height)
+      ..close();
+
+    canvas.drawPath(dashPath(horizontal, dashArray: CircularIntervalList([2, 3])), paint);
+    canvas.drawPath(
+      dashPath(vertical, dashArray: CircularIntervalList([2, 3]), dashOffset: DashOffset.absolute(size.height)),
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}