feat: Rewrite FlexBox as a Mix's primitive component

lints_with_dcm.yaml

@@ -25,7 +25,12 @@ dart_code_metrics:
     prefer-prefixed-global-constants: false
     avoid-returning-widgets: false
     arguments-ordering:
-      child-last: true
+      first:
+        - key
+        - spec
+      last:
+        - child
+        - children
     avoid-nested-conditional-expressions:
         acceptable-level: 3
     member-ordering:

melos.yaml

@@ -30,11 +30,11 @@ scripts:
       failFast: true
 
   analyze:dart:
-    run: melos exec -c 10 -- dart analyze .
+    run: melos exec -c 4 -- dart analyze .
     description: Run Dart static analysis checks.
 
   analyze:dcm:
-    run: melos exec -c 10 -- dcm analyze . --fatal-style --fatal-performance --fatal-warnings
+    run: melos exec -c 4 -- dcm analyze . --fatal-style --fatal-performance --fatal-warnings
     description: Run DCM static analysis checks.
     packageFilters:
       dependsOn: "dart_code_metrics_presets"

packages/mix/example/lib/main.dart

@@ -1,12 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
-void main() async {
-  runApp(
-    const MaterialApp(
-      home: MyApp(),
-    ),
-  );
+void main() {
+  runApp(const MaterialApp(home: MyApp()));
 }
 
 final style = Style(
@@ -17,11 +13,7 @@ final style = Style(
   $box.borderRadius(10),
   $box.padding(20, 10),
   $box.margin(10),
-  $box.border(
-    color: Colors.black,
-    width: 1,
-    style: BorderStyle.solid,
-  ),
+  $box.border(color: Colors.black, style: BorderStyle.solid, width: 1),
 );
 
 class MyApp extends StatelessWidget {
@@ -30,11 +22,12 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-        body: Center(
-      child: Box(
-        style: style,
-        child: const Center(child: Text('Hello Mix')),
+      body: Center(
+        child: Box(
+          style: style,
+          child: const Center(child: Text('Hello Mix')),
+        ),
       ),
-    ));
+    );
   }
 }

packages/mix/lib/mix.dart

@@ -1,15 +1,15 @@
-///   /\\\\            /\\\\  /\\\\\\\\\\\  /\\\       /\\\
-///   \/\\\\\\        /\\\\\\ \/////\\\///  \///\\\   /\\\/
-///    \/\\\//\\\    /\\\//\\\     \/\\\       \///\\\\\\/
-///     \/\\\\///\\\/\\\/ \/\\\     \/\\\         \//\\\\
-///      \/\\\  \///\\\/   \/\\\     \/\\\          \/\\\\
-///       \/\\\    \///     \/\\\     \/\\\          /\\\\\\
-///        \/\\\             \/\\\     \/\\\        /\\\////\\\
-///         \/\\\             \/\\\  /\\\\\\\\\\\  /\\\/   \///\\\
-///          \///              \///  \///////////  \///       \///
-///
-///                        https://fluttermix.com
+///   /\\\\            /\\\\  /\\\\\\\\\\\  /\\\       /\\\              
+///   \/\\\\\\        /\\\\\\ \/////\\\///  \///\\\   /\\\/  
+///    \/\\\//\\\    /\\\//\\\     \/\\\       \///\\\\\\/    
+///     \/\\\\///\\\/\\\/ \/\\\     \/\\\         \//\\\\      
+///      \/\\\  \///\\\/   \/\\\     \/\\\          \/\\\\      
+///       \/\\\    \///     \/\\\     \/\\\          /\\\\\\     
+///        \/\\\             \/\\\     \/\\\        /\\\////\\\   
+///         \/\\\             \/\\\  /\\\\\\\\\\\  /\\\/   \///\\\ 
+///          \///              \///  \///////////  \///       \/// 
 ///
+///                        https://fluttermix.com 
+/// 
 ///             /\///////////////////////////////////////////////////\
 ///             \/\           ***** GENERATED CODE *****            \ \
 ///              \/\            ** DO NOT EDIT THIS FILE **          \ \
@@ -54,7 +54,6 @@ export 'src/attributes/strut_style/strut_style_dto.dart';
 export 'src/attributes/text_height_behavior/text_height_behavior_dto.dart';
 export 'src/attributes/text_style/text_style_dto.dart';
 export 'src/attributes/text_style/text_style_util.dart';
-
 /// CORE
 export 'src/core/attribute.dart';
 export 'src/core/attributes_map.dart';
@@ -72,7 +71,6 @@ export 'src/core/styled_widget.dart';
 export 'src/core/utility.dart';
 export 'src/core/variant.dart';
 export 'src/core/widget_state/widget_state_controller.dart';
-
 /// MODIFIERS
 export 'src/modifiers/align_widget_modifier.dart';
 export 'src/modifiers/aspect_ratio_widget_modifier.dart';
@@ -89,12 +87,13 @@ export 'src/modifiers/sized_box_widget_modifier.dart';
 export 'src/modifiers/transform_widget_modifier.dart';
 export 'src/modifiers/visibility_widget_modifier.dart';
 export 'src/modifiers/widget_modifiers_util.dart';
-
 /// SPECS
 export 'src/specs/box/box_spec.dart';
 export 'src/specs/box/box_widget.dart';
 export 'src/specs/flex/flex_spec.dart';
 export 'src/specs/flex/flex_widget.dart';
+export 'src/specs/flexbox/flexbox_spec.dart';
+export 'src/specs/flexbox/flexbox_widget.dart';
 export 'src/specs/icon/icon_spec.dart';
 export 'src/specs/icon/icon_widget.dart';
 export 'src/specs/image/image_spec.dart';
@@ -105,7 +104,6 @@ export 'src/specs/stack/stack_widget.dart';
 export 'src/specs/text/text_directives_util.dart';
 export 'src/specs/text/text_spec.dart';
 export 'src/specs/text/text_widget.dart';
-
 /// THEME
 export 'src/theme/material/material_theme.dart';
 export 'src/theme/material/material_tokens.dart';
@@ -118,7 +116,6 @@ export 'src/theme/tokens/space_token.dart';
 export 'src/theme/tokens/text_style_token.dart';
 export 'src/theme/tokens/token_resolver.dart';
 export 'src/theme/tokens/token_util.dart';
-
 /// VARIANTS
 export 'src/variants/context_variant.dart';
 export 'src/variants/context_variant_util/on_breakpoint_util.dart';
@@ -130,6 +127,5 @@ export 'src/variants/context_variant_util/on_platform_util.dart';
 export 'src/variants/context_variant_util/on_util.dart';
 export 'src/variants/variant_attribute.dart';
 export 'src/variants/widget_state_variant.dart';
-
 /// WIDGETS
 export 'src/widgets/pressable_widget.dart';

packages/mix/lib/src/core/factory/style_widgets_ext.dart

@@ -3,6 +3,7 @@ import 'package:flutter/widgets.dart';
 
 import '../../specs/box/box_widget.dart';
 import '../../specs/flex/flex_widget.dart';
+import '../../specs/flexbox/flexbox_widget.dart';
 import '../../specs/icon/icon_widget.dart';
 import '../../specs/text/text_widget.dart';
 import 'style_mix.dart';
@@ -15,8 +16,8 @@ extension StyleExt on Style {
     Style? style,
   }) {
     return Box(
-      style: merge(style),
       key: key,
+      style: merge(style),
       inherit: inherit,
       child: child,
     );
@@ -28,7 +29,7 @@ extension StyleExt on Style {
     Key? key,
     Style? style,
   }) {
-    return container(inherit: inherit, key: key, style: style, child: child);
+    return container(key: key, inherit: inherit, style: style, child: child);
   }
 
   HBox hbox({
@@ -38,8 +39,8 @@ extension StyleExt on Style {
     Style? style,
   }) {
     return HBox(
-      style: merge(style),
       key: key,
+      style: merge(style),
       inherit: inherit,
       children: children,
     );
@@ -52,8 +53,8 @@ extension StyleExt on Style {
     Style? style,
   }) {
     return StyledRow(
-      style: merge(style),
       key: key,
+      style: merge(style),
       inherit: inherit,
       children: children,
     );
@@ -68,9 +69,9 @@ extension StyleExt on Style {
   }) {
     return StyledText(
       text,
+      key: key,
       semanticsLabel: semanticsLabel,
       style: merge(style),
-      key: key,
       inherit: inherit,
     );
   }
@@ -82,8 +83,8 @@ extension StyleExt on Style {
     Style? style,
   }) {
     return VBox(
-      style: merge(style),
       key: key,
+      style: merge(style),
       inherit: inherit,
       children: children,
     );
@@ -96,8 +97,8 @@ extension StyleExt on Style {
     Style? style,
   }) {
     return StyledColumn(
-      style: merge(style),
       key: key,
+      style: merge(style),
       inherit: inherit,
       children: children,
     );
@@ -109,6 +110,6 @@ extension StyleExt on Style {
     Key? key,
     Style? style,
   }) {
-    return StyledIcon(icon, style: merge(style), key: key, inherit: inherit);
+    return StyledIcon(icon, key: key, style: merge(style), inherit: inherit);
   }
 }

packages/mix/lib/src/specs/box/box_widget.dart

@@ -74,8 +74,8 @@ class BoxSpecWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return RenderSpecModifiers(
-      orderOfModifiers: orderOfModifiers,
       spec: spec ?? const BoxSpec(),
+      orderOfModifiers: orderOfModifiers,
       child: Container(
         alignment: spec?.alignment,
         padding: spec?.padding,

packages/mix/lib/src/specs/flex/flex_widget.dart

@@ -4,7 +4,6 @@ import 'package:flutter/widgets.dart';
 
 import '../../core/styled_widget.dart';
 import '../../modifiers/internal/render_widget_modifier.dart';
-import '../box/box_spec.dart';
 import 'flex_spec.dart';
 
 /// A flexible layout widget enhanced with `Style` for simplified styling.
@@ -88,16 +87,19 @@ class FlexSpecWidget extends StatelessWidget {
       mainAxisSize: spec?.mainAxisSize ?? _defaultFlex.mainAxisSize,
       crossAxisAlignment:
           spec?.crossAxisAlignment ?? _defaultFlex.crossAxisAlignment,
+      textDirection: spec?.textDirection ?? _defaultFlex.textDirection,
       verticalDirection:
           spec?.verticalDirection ?? _defaultFlex.verticalDirection,
+      textBaseline: spec?.textBaseline ?? _defaultFlex.textBaseline,
+      clipBehavior: spec?.clipBehavior ?? _defaultFlex.clipBehavior,
       children: _buildChildren(gap),
     );
 
     return spec == null
         ? flexWidget
         : RenderSpecModifiers(
-            orderOfModifiers: orderOfModifiers,
             spec: spec!,
+            orderOfModifiers: orderOfModifiers,
             child: flexWidget,
           );
   }
@@ -200,98 +202,4 @@ class StyledColumn extends StyledFlex {
   }) : super(direction: Axis.vertical);
 }
 
-/// A flex container widget with integrated `Style` for enhanced styling.
-///
-/// `FlexBox` combines the features of `StyledContainer` and `StyledFlex`, offering
-/// a powerful tool for creating flexible layouts with advanced styling capabilities
-/// through `Style`. It's perfect for designing complex layouts that require both
-/// container and flex properties with uniform styling.
-///
-/// The `direction` parameter sets the layout's orientation, while the `Style`
-/// integration simplifies the process of applying consistent styles to all elements.
-///
-/// Example Usage:
-/// ```dart
-/// FlexBox(
-///   direction: Axis.horizontal,
-///   style: yourStyle,
-///   children: [Widget1(), Widget2()],
-/// );
-/// ```
-class FlexBox extends StyledWidget {
-  const FlexBox({
-    super.style,
-    super.key,
-    super.inherit,
-    required this.direction,
-    required this.children,
-    super.orderOfModifiers = const [],
-  });
-
-  final List<Widget> children;
-  final Axis direction;
-
-  @override
-  Widget build(BuildContext context) {
-    return withMix(context, (mix) {
-      final boxSpec = BoxSpec.of(mix);
-      final flexSpec = FlexSpec.of(mix);
-
-      return boxSpec(
-        orderOfModifiers: orderOfModifiers,
-        child: flexSpec(direction: direction, children: children),
-      );
-    });
-  }
-}
-
-/// A horizontal flex container with `Style` for easy and consistent styling.
-///
-/// `HBox` is a specialized `FlexBox` designed for horizontal layouts, simplifying
-/// the process of applying horizontal alignment with advanced styling via `Style`.
-/// It's an efficient way to achieve consistent styling in horizontal arrangements.
-///
-/// Inherits all functionalities of `FlexBox`, optimized for horizontal layouts.
-///
-/// Example Usage:
-/// ```dart
-/// HBox(
-///   style: yourStyle,
-///   children: [Widget1(), Widget2()],
-/// );
-/// ```
-class HBox extends FlexBox {
-  const HBox({
-    super.style,
-    super.key,
-    super.inherit,
-    super.children = const <Widget>[],
-  }) : super(direction: Axis.horizontal);
-}
-
-/// A vertical flex container that uses `Style` for streamlined styling.
-///
-/// `VBox` is a vertical counterpart to `HBox`, utilizing `Style` for efficient
-/// and consistent styling in vertical layouts. It offers an easy way to manage
-/// vertical alignment and styling in a cohesive manner.
-///
-/// Inherits the comprehensive styling and layout capabilities of `FlexBox`, tailored
-/// for vertical orientations.
-///
-/// Example Usage:
-/// ```dart
-/// VBox(
-///   style: yourStyle,
-///   children: [Widget1(), Widget2()],
-/// );
-/// ```
-class VBox extends FlexBox {
-  const VBox({
-    super.style,
-    super.key,
-    super.inherit,
-    super.children = const <Widget>[],
-  }) : super(direction: Axis.vertical);
-}
-
 final _defaultFlex = Flex(direction: Axis.horizontal, children: const []);