implement flexbox in the remix

conceptadev · Nov 14, 2024 · 26a1dfe · 26a1dfe
1 parent 62b14c0
commit 26a1dfe
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 83 deletions.
diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart
@@ -55,6 +55,7 @@ const _boxUtility = MixableUtility(
   ],
 );
 
+//TODO: Find a way to reuse as much code as possible from the FlexSpec and BoxSpec
 @MixableSpec()
 final class FlexBoxSpec extends Spec<FlexBoxSpec>
     with _$FlexBoxSpec, Diagnosticable {

diff --git a/packages/mix_generator/lib/src/helpers/type_ref_repository.dart b/packages/mix_generator/lib/src/helpers/type_ref_repository.dart
@@ -1,4 +1,5 @@
 import 'package:analyzer/dart/element/type.dart';
+
 import 'builder_utils.dart';
 import 'helpers.dart';
 
@@ -44,6 +45,7 @@ class TypeRefRepository {
     'TextSpec': 'TextSpecAttribute',
     'ImageSpec': 'ImageSpecAttribute',
     'IconSpec': 'IconSpecAttribute',
+    'FlexBoxSpec': 'FlexBoxSpecAttribute',
     'StackSpec': 'StackSpecAttribute',
   };
 

diff --git a/packages/remix/lib/src/components/button/button.dart b/packages/remix/lib/src/components/button/button.dart
@@ -16,8 +16,7 @@ part 'button_widget.dart';
 
 @MixableSpec()
 class ButtonSpec extends Spec<ButtonSpec> with _$ButtonSpec, Diagnosticable {
-  final FlexSpec flex;
-  final BoxSpec container;
+  final FlexBoxSpec flexbox;
   final IconSpec icon;
   final TextSpec label;
 
@@ -30,15 +29,13 @@ class ButtonSpec extends Spec<ButtonSpec> with _$ButtonSpec, Diagnosticable {
   static const from = _$ButtonSpec.from;
 
   const ButtonSpec({
-    BoxSpec? container,
-    FlexSpec? flex,
+    FlexBoxSpec? flexbox,
     IconSpec? icon,
     TextSpec? label,
     super.modifiers,
     SpinnerSpec? spinner,
     super.animated,
-  })  : flex = flex ?? const FlexSpec(),
-        container = container ?? const BoxSpec(),
+  })  : flexbox = flexbox ?? const FlexBoxSpec(),
         icon = icon ?? const IconSpec(),
         label = label ?? const TextSpec(),
         spinner = spinner ?? const SpinnerSpec();

diff --git a/packages/remix/lib/src/components/button/button.g.dart b/packages/remix/lib/src/components/button/button.g.dart
diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart
@@ -7,14 +7,6 @@ class ButtonStyle extends SpecStyle<ButtonSpecUtility> {
   Style makeStyle(SpecConfiguration<ButtonSpecUtility> spec) {
     final $ = spec.utilities;
 
-    final flexStyle = [
-      $.flex.chain
-        ..mainAxisAlignment.center()
-        ..crossAxisAlignment.center()
-        ..mainAxisSize.min()
-        ..gap(8),
-    ];
-
     final iconStyle = [
       $.icon.chain
         ..size(24)
@@ -38,20 +30,23 @@ class ButtonStyle extends SpecStyle<ButtonSpecUtility> {
         ..color.white(),
     ];
 
-    final containerStyle = [
-      $.container.chain
+    final flexboxStyle = [
+      $.flexbox.chain
         ..borderRadius(6)
         ..color.black()
         ..padding.vertical(8)
-        ..padding.horizontal(12),
-      spec.on.disabled($.container.color.grey.shade400()),
+        ..padding.horizontal(12)
+        ..flex.mainAxisAlignment.center()
+        ..flex.crossAxisAlignment.center()
+        ..flex.mainAxisSize.min()
+        ..flex.gap(8),
+      spec.on.disabled($.flexbox.color.grey.shade400()),
     ];
 
     return Style.create([
-      ...flexStyle,
+      ...flexboxStyle,
       ...iconStyle,
       ...labelStyle,
-      ...containerStyle,
       ...spinnerStyle,
     ]);
   }
@@ -66,7 +61,7 @@ class ButtonDarkStyle extends ButtonStyle {
 
     return Style.create([
       super.makeStyle(spec).call(),
-      $.container.color.white(),
+      $.flexbox.color.white(),
       $.label.style.color.black(),
     ]);
   }

diff --git a/packages/remix/lib/src/components/button/button_theme.dart b/packages/remix/lib/src/components/button/button_theme.dart
@@ -17,17 +17,17 @@ class FortalezaButtonStyle extends ButtonStyle {
     final baseStyle = super.makeStyle(spec);
     final baseOverrides = Style(
       baseStyle(),
-      $.container.chain
+      $.flexbox.chain
         ..padding.vertical.$space(2)
-        ..padding.horizontal.$space(3),
-      $.flex.gap.$space(2),
+        ..padding.horizontal.$space(3)
+        ..flex.gap.$space(2),
       $.label.style.$text(2),
       $.icon.size(14),
       $.spinner.size(14),
     );
 
     final onDisabledForeground = $on.disabled(
-      $.container.color.$neutral(7),
+      $.flexbox.color.$neutral(7),
       $.label.style.color.$neutral(8),
       $.icon.color.$neutral(8),
       $.spinner.color.$neutral(7),
@@ -36,58 +36,58 @@ class FortalezaButtonStyle extends ButtonStyle {
     final spinnerDisabled = $.spinner.color.$neutralAlpha(7);
 
     final solidVariant = Style(
-      $.container.color.$accent(),
+      $.flexbox.color.$accent(),
       $.label.style.color.white(),
       $.spinner.color.white(),
       $.icon.color.white(),
-      spec.on.hover($.container.color.$accent(10)),
-      spec.on.disabled($.container.color.$neutralAlpha(3), spinnerDisabled),
+      spec.on.hover($.flexbox.color.$accent(10)),
+      spec.on.disabled($.flexbox.color.$neutralAlpha(3), spinnerDisabled),
     );
 
     final softVariant = Style(
-      $.container.color.$accentAlpha(3),
+      $.flexbox.color.$accentAlpha(3),
       $.label.style.color.$accentAlpha(11),
       $.spinner.color.$accentAlpha(11),
       $.icon.color.$accentAlpha(11),
-      spec.on.hover($.container.color.$accentAlpha(4)),
-      spec.on.disabled($.container.color.$neutralAlpha(3)),
+      spec.on.hover($.flexbox.color.$accentAlpha(4)),
+      spec.on.disabled($.flexbox.color.$neutralAlpha(3)),
     );
 
     final outlineVariant = Style(
-      $.container.chain
+      $.flexbox.chain
         ..color.transparent()
         ..border.width(1)
         ..border.strokeAlign(0)
         ..border.color.$accentAlpha(8),
       $.spinner.color.$accentAlpha(11),
       $.icon.color.$accentAlpha(11),
       $.label.style.color.$accentAlpha(11),
-      spec.on.hover($.container.color.$accentAlpha(2)),
+      spec.on.hover($.flexbox.color.$accentAlpha(2)),
       spec.on.disabled(
-        $.container.chain
+        $.flexbox.chain
           ..border.color.$neutralAlpha(8)
           ..color.transparent(),
       ),
     );
 
     final surfaceVariant = Style(
       outlineVariant(),
-      $.container.color.$accentAlpha(3),
+      $.flexbox.color.$accentAlpha(3),
       spec.on.hover(
-        $.container.color.$accentAlpha(4),
-        $.container.border.color.$accentAlpha(8),
+        $.flexbox.color.$accentAlpha(4),
+        $.flexbox.border.color.$accentAlpha(8),
       ),
-      spec.on.disabled($.container.color.$neutral(1)),
+      spec.on.disabled($.flexbox.color.$neutral(1)),
     );
 
     final ghostVariant = Style(
-      $.container.border.style.none(),
-      $.container.color.transparent(),
+      $.flexbox.border.style.none(),
+      $.flexbox.color.transparent(),
       $.spinner.color.$accentAlpha(11),
       $.icon.color.$accentAlpha(11),
       $.label.style.color.$accentAlpha(11),
-      spec.on.hover($.container.color.$accentAlpha(3)),
-      spec.on.disabled($.container.color.transparent()),
+      spec.on.hover($.flexbox.color.$accentAlpha(3)),
+      spec.on.disabled($.flexbox.color.transparent()),
     );
 
     return Style.create(

diff --git a/packages/remix/lib/src/components/button/button_widget.dart b/packages/remix/lib/src/components/button/button_widget.dart
@@ -53,6 +53,8 @@ class Button extends StatelessWidget {
     final configuration = SpecConfiguration(context, ButtonSpecUtility.self);
 
     return Pressable(
+      enabled: !isDisabled,
+      onPress: disabled || loading ? null : onPressed,
       child: SpecBuilder(
         style: style.makeStyle(configuration).applyVariants([
           ...variants,
@@ -71,8 +73,6 @@ class Button extends StatelessWidget {
           );
         },
       ),
-      enabled: !isDisabled,
-      onPress: disabled || loading ? null : onPressed,
     );
   }
 }
@@ -113,7 +113,7 @@ class ButtonSpecWidget extends StatelessWidget {
   }
 
   Widget _buildChildren(ButtonSpec spec) {
-    final flexWidget = spec.flex(
+    final flexboxWidget = spec.flexbox(
       children: [
         if (iconLeft != null) spec.icon(iconLeft),
         // If there is no icon always render the label
@@ -123,13 +123,13 @@ class ButtonSpecWidget extends StatelessWidget {
       direction: Axis.horizontal,
     );
 
-    return loading ? _buildLoadingOverlay(spec, flexWidget) : flexWidget;
+    return loading ? _buildLoadingOverlay(spec, flexboxWidget) : flexboxWidget;
   }
 
   @override
   Widget build(BuildContext context) {
     final spec = this.spec ?? const ButtonSpec();
 
-    return spec.container(child: _buildChildren(spec));
+    return _buildChildren(spec);
   }
 }