From 26a1dfe1a4955a979fc577041d341b5ad438c055 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Thu, 14 Nov 2024 13:56:23 -0300 Subject: [PATCH] implement flexbox in the remix --- .../lib/src/specs/flexbox/flexbox_spec.dart | 1 + .../lib/src/helpers/type_ref_repository.dart | 2 + .../lib/src/components/button/button.dart | 9 ++-- .../lib/src/components/button/button.g.dart | 51 ++++++------------- .../src/components/button/button_style.dart | 25 ++++----- .../src/components/button/button_theme.dart | 42 +++++++-------- .../src/components/button/button_widget.dart | 10 ++-- .../components/button/button_widget_test.dart | 2 +- 8 files changed, 59 insertions(+), 83 deletions(-) diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.dart index 0d20adb6c..07cb78f3e 100644 --- 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 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 index 54f033372..07dc4f8f3 100644 --- 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 index 486d3e131..5f96bae3f 100644 --- 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 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 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 index 27b9cd3e2..c6b475596 100644 --- a/packages/remix/lib/src/components/button/button.g.dart +++ b/packages/remix/lib/src/components/button/button.g.dart @@ -33,8 +33,7 @@ mixin _$ButtonSpec on Spec { /// replaced with the new values. @override ButtonSpec copyWith({ - BoxSpec? container, - FlexSpec? flex, + FlexBoxSpec? flexbox, IconSpec? icon, TextSpec? label, WidgetModifiersData? modifiers, @@ -42,8 +41,7 @@ mixin _$ButtonSpec on Spec { AnimatedData? animated, }) { return ButtonSpec( - container: container ?? _$this.container, - flex: flex ?? _$this.flex, + flexbox: flexbox ?? _$this.flexbox, icon: icon ?? _$this.icon, label: label ?? _$this.label, modifiers: modifiers ?? _$this.modifiers, @@ -63,8 +61,7 @@ mixin _$ButtonSpec on Spec { /// The interpolation is performed on each property of the [ButtonSpec] using the appropriate /// interpolation method: /// - /// - [BoxSpec.lerp] for [container]. - /// - [FlexSpec.lerp] for [flex]. + /// - [FlexBoxSpec.lerp] for [flexbox]. /// - [IconSpec.lerp] for [icon]. /// - [TextSpec.lerp] for [label]. @@ -79,8 +76,7 @@ mixin _$ButtonSpec on Spec { if (other == null) return _$this; return ButtonSpec( - container: _$this.container.lerp(other.container, t), - flex: _$this.flex.lerp(other.flex, t), + flexbox: _$this.flexbox.lerp(other.flexbox, t), icon: _$this.icon.lerp(other.icon, t), label: _$this.label.lerp(other.label, t), modifiers: other.modifiers, @@ -95,8 +91,7 @@ mixin _$ButtonSpec on Spec { /// compare two [ButtonSpec] instances for equality. @override List get props => [ - _$this.container, - _$this.flex, + _$this.flexbox, _$this.icon, _$this.label, _$this.modifiers, @@ -108,9 +103,7 @@ mixin _$ButtonSpec on Spec { void _debugFillProperties(DiagnosticPropertiesBuilder properties) { properties.add( - DiagnosticsProperty('container', _$this.container, defaultValue: null)); - properties - .add(DiagnosticsProperty('flex', _$this.flex, defaultValue: null)); + DiagnosticsProperty('flexbox', _$this.flexbox, defaultValue: null)); properties .add(DiagnosticsProperty('icon', _$this.icon, defaultValue: null)); properties @@ -133,15 +126,13 @@ mixin _$ButtonSpec on Spec { /// the [ButtonSpec] constructor. class ButtonSpecAttribute extends SpecAttribute with Diagnosticable { - final BoxSpecAttribute? container; - final FlexSpecAttribute? flex; + final FlexBoxSpecAttribute? flexbox; final IconSpecAttribute? icon; final TextSpecAttribute? label; final SpinnerSpecAttribute? spinner; const ButtonSpecAttribute({ - this.container, - this.flex, + this.flexbox, this.icon, this.label, super.modifiers, @@ -160,8 +151,7 @@ class ButtonSpecAttribute extends SpecAttribute @override ButtonSpec resolve(MixData mix) { return ButtonSpec( - container: container?.resolve(mix), - flex: flex?.resolve(mix), + flexbox: flexbox?.resolve(mix), icon: icon?.resolve(mix), label: label?.resolve(mix), modifiers: modifiers?.resolve(mix), @@ -183,8 +173,7 @@ class ButtonSpecAttribute extends SpecAttribute if (other == null) return this; return ButtonSpecAttribute( - container: container?.merge(other.container) ?? other.container, - flex: flex?.merge(other.flex) ?? other.flex, + flexbox: flexbox?.merge(other.flexbox) ?? other.flexbox, icon: icon?.merge(other.icon) ?? other.icon, label: label?.merge(other.label) ?? other.label, modifiers: modifiers?.merge(other.modifiers) ?? other.modifiers, @@ -199,8 +188,7 @@ class ButtonSpecAttribute extends SpecAttribute /// compare two [ButtonSpecAttribute] instances for equality. @override List get props => [ - container, - flex, + flexbox, icon, label, modifiers, @@ -211,9 +199,7 @@ class ButtonSpecAttribute extends SpecAttribute @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); - properties - .add(DiagnosticsProperty('container', container, defaultValue: null)); - properties.add(DiagnosticsProperty('flex', flex, defaultValue: null)); + properties.add(DiagnosticsProperty('flexbox', flexbox, defaultValue: null)); properties.add(DiagnosticsProperty('icon', icon, defaultValue: null)); properties.add(DiagnosticsProperty('label', label, defaultValue: null)); properties @@ -230,11 +216,8 @@ class ButtonSpecAttribute extends SpecAttribute /// Use the methods of this class to configure specific properties of a [ButtonSpec]. class ButtonSpecUtility extends SpecUtility { - /// Utility for defining [ButtonSpecAttribute.container] - late final container = BoxSpecUtility((v) => only(container: v)); - - /// Utility for defining [ButtonSpecAttribute.flex] - late final flex = FlexSpecUtility((v) => only(flex: v)); + /// Utility for defining [ButtonSpecAttribute.flexbox] + late final flexbox = FlexBoxSpecUtility((v) => only(flexbox: v)); /// Utility for defining [ButtonSpecAttribute.icon] late final icon = IconSpecUtility((v) => only(icon: v)); @@ -262,8 +245,7 @@ class ButtonSpecUtility /// Returns a new [ButtonSpecAttribute] with the specified properties. @override T only({ - BoxSpecAttribute? container, - FlexSpecAttribute? flex, + FlexBoxSpecAttribute? flexbox, IconSpecAttribute? icon, TextSpecAttribute? label, WidgetModifiersDataDto? modifiers, @@ -271,8 +253,7 @@ class ButtonSpecUtility AnimatedDataDto? animated, }) { return builder(ButtonSpecAttribute( - container: container, - flex: flex, + flexbox: flexbox, icon: icon, label: label, modifiers: modifiers, diff --git a/packages/remix/lib/src/components/button/button_style.dart b/packages/remix/lib/src/components/button/button_style.dart index 9d8c69f97..68b2cfb6f 100644 --- 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 { Style makeStyle(SpecConfiguration 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 { ..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 index a4f63570c..25ba09924 100644 --- 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,25 +36,25 @@ 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) @@ -62,9 +62,9 @@ class FortalezaButtonStyle extends ButtonStyle { $.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(), ), @@ -72,22 +72,22 @@ class FortalezaButtonStyle extends ButtonStyle { 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 index 5bf622a20..4d7ac5bb3 100644 --- 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); } } diff --git a/packages/remix/test/components/button/button_widget_test.dart b/packages/remix/test/components/button/button_widget_test.dart index 155ae50fe..af7e082f6 100644 --- a/packages/remix/test/components/button/button_widget_test.dart +++ b/packages/remix/test/components/button/button_widget_test.dart @@ -170,7 +170,7 @@ class FakeButtonStyle extends ButtonStyle { final baseStyle = super.makeStyle(spec); return Style.create([ baseStyle(), - $.container.color(color), + $.flexbox.color(color), ]); } }