feat (flutter_box): organize the box component and stylesheet (#45)

* feat: add all basic code to box work properly with all specified values in styleSheet.json

.gitignore

@@ -210,4 +210,6 @@ build/
 !**/ios/**/default.pbxuser
 !**/ios/**/default.perspectivev3
 
+# SkynexUI
+examples/**/*.lock
 

examples/demo_base/lib/screens/home/home_screen.dart

@@ -16,10 +16,20 @@ class HomeScreen extends StatelessWidget {
             Breakpoints.xs: bg,
           },
           margin: {Breakpoints.xs: 50},
-          padding: {Breakpoints.xs: 50},
+          paddingBottom: {Breakpoints.xs: 100},
+          paddingVertical: {Breakpoints.xs: 50},
+          paddingHorizontal: {Breakpoints.xs: 50},
         ),
         children: [
-          Text('SkynexUI: $colorSelected'),
+          Text(
+            'SkynexUI: $colorSelected',
+            styleSheet: StyleSheet(
+              color: {
+                Breakpoints.xs: theme.colors.neutral.x999,
+                Breakpoints.sm: theme.colors.neutral.x000,
+              },
+            ),
+          ),
         ],
       ),
     );

examples/demo_base/lib/screens/home/home_screen.tsx

@@ -15,10 +15,17 @@ export function HomeScreen() {
           xs: bg,
         },
         margin: { xs: 50 },
-        padding: { xs: 50 },
+        paddingBottom: { xs: 100 },
+        paddingVertical: { xs: 50 },
+        paddingHorizontal: { xs: 50 },
       }}
     >
-      <Text>SkynexUI: {colorSelected}</Text>
-    </Box>
+      <Text styleSheet={{
+        color: {
+          xs: theme.colors.neutral.x999,
+          sm: theme.colors.neutral.x000,
+        },
+      }}>SkynexUI: {colorSelected}</Text>
+    </Box >
   );
 }

examples/demo_base/tsconfig.json

@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",

lib/components/box/box.dart

@@ -1,21 +1,5 @@
 import 'package:skynexui_components/components.dart';
-
-extension HexColor on Color {
-  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
-  static Color fromHex(String hexString) {
-    final buffer = StringBuffer();
-    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
-    buffer.write(hexString.replaceFirst('#', ''));
-    return Color(int.parse(buffer.toString(), radix: 16));
-  }
-
-  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
-  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
-      '${alpha.toRadixString(16).padLeft(2, '0')}'
-      '${red.toRadixString(16).padLeft(2, '0')}'
-      '${green.toRadixString(16).padLeft(2, '0')}'
-      '${blue.toRadixString(16).padLeft(2, '0')}';
-}
+import 'package:skynexui_components/components/box/flutter/box_base_styles.dart';
 
 class Box extends StatelessWidget {
   final List<Widget>? children;
@@ -29,38 +13,35 @@ class Box extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // ignore: todo
-    // TODO: Refactor this to use a loop or other stuff to make everything be grouped together.
-
-    const activeBreakpoint = Breakpoints.xs;
-    var padding =
-        resolveValueForBreakpoint(styleSheet.padding, activeBreakpoint);
-    var margin = resolveValueForBreakpoint(styleSheet.margin, activeBreakpoint);
-
-    var backgroundColorValue =
-        resolveValueForBreakpoint(styleSheet.backgroundColor, activeBreakpoint);
-    var backgroundColor = (backgroundColorValue != null)
-        ? HexColor.fromHex(backgroundColorValue)
-        : Colors.transparent;
+    var activeBreakpoint = getActiveBreakpoint(context);
+    var styles = BoxBaseStyles(
+      activeBreakpoint: activeBreakpoint,
+      styleSheet: styleSheet,
+    );
 
     var child = children![0];
-    return Container(
-      margin: EdgeInsets.only(
-        bottom: margin,
-        left: margin,
-        right: margin,
-        top: margin,
-      ),
-      padding: EdgeInsets.only(
-        bottom: padding,
-        left: padding,
-        right: padding,
-        top: padding,
+    return DefaultTextStyle.merge(
+      style: TextStyle(
+        color: styles.color,
       ),
-      decoration: BoxDecoration(
-        color: backgroundColor,
+      child: Container(
+        margin: EdgeInsets.only(
+          bottom: styles.marginBottom,
+          left: styles.marginLeft,
+          right: styles.marginRight,
+          top: styles.marginTop,
+        ),
+        padding: EdgeInsets.only(
+          bottom: styles.paddingBottom,
+          left: styles.paddingLeft,
+          right: styles.paddingRight,
+          top: styles.paddingTop,
+        ),
+        decoration: BoxDecoration(
+          color: styles.backgroundColor,
+        ),
+        child: child,
       ),
-      child: child,
     );
   }
 }

lib/components/box/flutter/box_base_styles.dart

@@ -0,0 +1,85 @@
+import 'package:skynexui_components/components.dart';
+import 'package:skynexui_components/components/box/flutter/hexcolor.dart';
+
+class BoxBaseStyles {
+  StyleSheet styleSheet;
+  Breakpoints activeBreakpoint;
+  dynamic color;
+  dynamic backgroundColor;
+  dynamic padding;
+  dynamic paddingTop;
+  dynamic paddingLeft;
+  dynamic paddingRight;
+  dynamic paddingBottom;
+  dynamic paddingVertical;
+  dynamic paddingHorizontal;
+  dynamic margin;
+  dynamic marginTop;
+  dynamic marginLeft;
+  dynamic marginRight;
+  dynamic marginBottom;
+  dynamic marginVertical;
+  dynamic marginHorizontal;
+
+  BoxBaseStyles({
+    required this.styleSheet,
+    required this.activeBreakpoint,
+  }) {
+    // [color]
+    var colorValue =
+        resolveValueForBreakpoint(styleSheet.color, activeBreakpoint);
+    color = (colorValue != null) ? HexColor.fromHex(colorValue) : Colors.black;
+
+    // [backgroundColor]
+    var backgroundColorValue =
+        resolveValueForBreakpoint(styleSheet.backgroundColor, activeBreakpoint);
+    backgroundColor = (backgroundColorValue != null)
+        ? HexColor.fromHex(backgroundColorValue)
+        : Colors.transparent;
+
+    // [margin]
+    margin = resolveValueForBreakpoint(styleSheet.margin, activeBreakpoint);
+    marginVertical =
+        resolveValueForBreakpoint(styleSheet.marginVertical, activeBreakpoint);
+    marginHorizontal = resolveValueForBreakpoint(
+        styleSheet.marginHorizontal, activeBreakpoint);
+    marginTop =
+        resolveValueForBreakpoint(styleSheet.marginTop, activeBreakpoint) ??
+            marginVertical ??
+            margin;
+    marginLeft =
+        resolveValueForBreakpoint(styleSheet.marginLeft, activeBreakpoint) ??
+            marginHorizontal ??
+            margin;
+    marginRight =
+        resolveValueForBreakpoint(styleSheet.marginRight, activeBreakpoint) ??
+            marginHorizontal ??
+            margin;
+    marginBottom =
+        resolveValueForBreakpoint(styleSheet.marginBottom, activeBreakpoint) ??
+            marginVertical ??
+            margin;
+    // [padding]
+    padding = resolveValueForBreakpoint(styleSheet.padding, activeBreakpoint);
+    paddingVertical =
+        resolveValueForBreakpoint(styleSheet.paddingVertical, activeBreakpoint);
+    paddingHorizontal = resolveValueForBreakpoint(
+        styleSheet.paddingHorizontal, activeBreakpoint);
+    paddingTop =
+        resolveValueForBreakpoint(styleSheet.paddingTop, activeBreakpoint) ??
+            paddingVertical ??
+            padding;
+    paddingLeft =
+        resolveValueForBreakpoint(styleSheet.paddingLeft, activeBreakpoint) ??
+            paddingHorizontal ??
+            padding;
+    paddingRight =
+        resolveValueForBreakpoint(styleSheet.paddingRight, activeBreakpoint) ??
+            paddingHorizontal ??
+            padding;
+    paddingBottom =
+        resolveValueForBreakpoint(styleSheet.paddingBottom, activeBreakpoint) ??
+            paddingVertical ??
+            padding;
+  }
+}

lib/components/box/flutter/hexcolor.dart

@@ -0,0 +1,18 @@
+import 'package:skynexui_components/components.dart';
+
+extension HexColor on Color {
+  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
+  static Color fromHex(String hexString) {
+    final buffer = StringBuffer();
+    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
+    buffer.write(hexString.replaceFirst('#', ''));
+    return Color(int.parse(buffer.toString(), radix: 16));
+  }
+
+  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
+  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
+      '${alpha.toRadixString(16).padLeft(2, '0')}'
+      '${red.toRadixString(16).padLeft(2, '0')}'
+      '${green.toRadixString(16).padLeft(2, '0')}'
+      '${blue.toRadixString(16).padLeft(2, '0')}';
+}

lib/components/provider/provider.dart

@@ -5,7 +5,18 @@ Theme useTheme(BuildContext context) {
   return context.watch<SkynexUIProvider>().theme;
 }
 
+Breakpoints getActiveBreakpoint(BuildContext context) {
+  return Provider.of<SkynexUIProvider>(context).getActiveBreakpoint(context);
+}
+
 class SkynexUIProvider extends ChangeNotifier {
   final Theme _theme = Theme();
   Theme get theme => _theme;
+
+  Breakpoints getActiveBreakpoint(BuildContext context) {
+    var screenSize = MediaQuery.of(context).size.width;
+    var activeBreakpoint = getCurrentBreakpoint(screenSize);
+
+    return activeBreakpoint;
+  }
 }

lib/components/text/text.dart

@@ -15,6 +15,7 @@ class Text extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Box(
+      styleSheet: styleSheet,
       children: [
         flutter.Text(
           data,

lib/core/stylesheet/stylesheet.dart

@@ -1,5 +1,4 @@
 import 'package:skynexui_components/core/breakpoints/breakpoints.dart';
-import 'package:flutter/material.dart';
 
 const Map<Breakpoints, String?> defaultStringEmptyValue = {
   Breakpoints.xs: null,
@@ -22,78 +21,42 @@ const Map<Breakpoints, double?> defaultDoubleEmptyValue = {
 
 class StyleSheet {
 // %%[CODER_START]:StyleSheet_attributes%%
-  final Map<Breakpoints, double?> paddingRight;
-  final Map<Breakpoints, double?> paddingLeft;
-  final Map<Breakpoints, double?> paddingTop;
-  final Map<Breakpoints, double> padding;
-  final Map<Breakpoints, String?> backgroundColor;
+  final Map<Breakpoints,double?> marginHorizontal;
+  final Map<Breakpoints,double?> marginVertical;
+  final Map<Breakpoints,double?> marginBottom;
+  final Map<Breakpoints,double?> marginRight;
+  final Map<Breakpoints,double?> marginLeft;
+  final Map<Breakpoints,double?> marginTop;
+  final Map<Breakpoints,double> margin;
+  final Map<Breakpoints,double?> paddingHorizontal;
+  final Map<Breakpoints,double?> paddingVertical;
+  final Map<Breakpoints,double?> paddingBottom;
+  final Map<Breakpoints,double?> paddingRight;
+  final Map<Breakpoints,double?> paddingLeft;
+  final Map<Breakpoints,double?> paddingTop;
+  final Map<Breakpoints,double> padding;
+  final Map<Breakpoints,String?> backgroundColor;
+  final Map<Breakpoints,String?> color; 
 // %%[CODER_END]:StyleSheet_attributes%%
-  final double? width;
-  final double? height;
-  final Map<Breakpoints, Color> color;
-  final Map<Breakpoints, double?> paddingBottom;
-  final Map<Breakpoints, double?> paddingVertical;
-  final Map<Breakpoints, double?> paddingHorizontal;
-  final Map<Breakpoints, double> margin;
-  final Map<Breakpoints, double?> marginTop;
-  final Map<Breakpoints, double?> marginLeft;
-  final Map<Breakpoints, double?> marginRight;
-  final Map<Breakpoints, double?> marginBottom;
-  final Map<Breakpoints, double?> marginVertical;
-  final Map<Breakpoints, double?> marginHorizontal;
-  final Map<Breakpoints, double> borderRadius;
-  final Map<Breakpoints, double?> borderRadiusBottomLeft;
-  final Map<Breakpoints, double?> borderRadiusBottomRight;
-  final Map<Breakpoints, String?> as;
-  final Map<Breakpoints, String?> position;
-  final Map<Breakpoints, double?> top;
-  final Map<Breakpoints, double?> right;
-  final Map<Breakpoints, double?> bottom;
-  final Map<Breakpoints, double?> left;
-  final Map<Breakpoints, int?> flex;
-  // mainAxisAlignment:  "center|start|end|spaceBetween|spaceAround|spaceEvenly" [MainAxisAlignment],
-  final Map<Breakpoints, String> mainAxisAlignment;
-  // crossAxisAlignment: "stretch|start|end|center"                              [CrossAxisAlignment],
-  final Map<Breakpoints, String> crossAxisAlignment;
-
-  // ===============
 
   const StyleSheet({
-    this.width,
-    this.height,
-    this.backgroundColor = defaultStringEmptyValue,
-    this.color = const {
-      Breakpoints.xs: Colors.black,
-    },
-    this.padding = defaultDoubleZeroValue,
-    this.paddingTop = defaultDoubleEmptyValue,
-    this.paddingLeft = defaultDoubleEmptyValue,
-    this.paddingRight = defaultDoubleEmptyValue,
-    this.paddingBottom = defaultDoubleEmptyValue,
-    this.paddingVertical = defaultDoubleEmptyValue,
-    this.paddingHorizontal = defaultDoubleEmptyValue,
-    this.margin = defaultDoubleZeroValue,
-    this.marginTop = defaultDoubleEmptyValue,
-    this.marginLeft = defaultDoubleEmptyValue,
-    this.marginRight = defaultDoubleEmptyValue,
-    this.marginBottom = defaultDoubleEmptyValue,
-    this.marginVertical = defaultDoubleEmptyValue,
+// %%[CODER_START]:StyleSheet_constructor%%
     this.marginHorizontal = defaultDoubleEmptyValue,
-    this.borderRadius = defaultDoubleZeroValue,
-    this.borderRadiusBottomLeft = defaultDoubleEmptyValue,
-    this.borderRadiusBottomRight = defaultDoubleEmptyValue,
-    this.position = defaultStringEmptyValue,
-    this.top = defaultDoubleEmptyValue,
-    this.right = defaultDoubleEmptyValue,
-    this.bottom = defaultDoubleEmptyValue,
-    this.left = defaultDoubleEmptyValue,
-    this.as = defaultStringEmptyValue,
-    this.flex = defaultIntEmptyValue,
-    this.mainAxisAlignment = const {
-      Breakpoints.xs: 'start',
-    },
-    this.crossAxisAlignment = const {
-      Breakpoints.xs: 'start',
-    },
+    this.marginVertical = defaultDoubleEmptyValue,
+    this.marginBottom = defaultDoubleEmptyValue,
+    this.marginRight = defaultDoubleEmptyValue,
+    this.marginLeft = defaultDoubleEmptyValue,
+    this.marginTop = defaultDoubleEmptyValue,
+    this.margin = defaultDoubleZeroValue,
+    this.paddingHorizontal = defaultDoubleEmptyValue,
+    this.paddingVertical = defaultDoubleEmptyValue,
+    this.paddingBottom = defaultDoubleEmptyValue,
+    this.paddingRight = defaultDoubleEmptyValue,
+    this.paddingLeft = defaultDoubleEmptyValue,
+    this.paddingTop = defaultDoubleEmptyValue,
+    this.padding = defaultDoubleZeroValue,
+    this.backgroundColor = defaultStringEmptyValue,
+    this.color = defaultStringEmptyValue, 
+// %%[CODER_END]:StyleSheet_constructor%%
   });
 }