fix: add first tests

lib/components/griddisplay/griddisplay.dart

@@ -18,11 +18,11 @@ class GridDisplay<DataItem> extends StatelessWidget {
       styleSheet: styleSheet,
     );
     boxStyles.flex = 1;
-    boxStyles.padding = 0;
-    boxStyles.paddingLeft = 0;
-    boxStyles.paddingRight = 0;
-    boxStyles.paddingTop = 0;
-    boxStyles.paddingBottom = 0;
+    boxStyles.padding = 0.0;
+    boxStyles.paddingLeft = 0.0;
+    boxStyles.paddingRight = 0.0;
+    boxStyles.paddingTop = 0.0;
+    boxStyles.paddingBottom = 0.0;
 
     return boxStyles;
   }

lib/core/stylesheet/stylesheet.dart

@@ -8,6 +8,10 @@ const Map<Breakpoints, String> defaultStringZeroValue = {
   Breakpoints.xs: '0',
 };
 
+const Map<Breakpoints, String> defaultStringZeroDoubleValue = {
+  Breakpoints.xs: '0.0',
+};
+
 const Map<Breakpoints, String?> defaultStringColorEmptyValue = {
   Breakpoints.xs: null,
 };
@@ -65,7 +69,7 @@ class StyleSheet {
   final Map<Breakpoints, String?> backgroundColor;
   final Map<Breakpoints, String?> color;
   final Map<Breakpoints, String?> height;
-  final Map<Breakpoints, String?> width; 
+  final Map<Breakpoints, String?> width;
 // %%[CODER_END]:StyleSheet_attributes%%
 
   const StyleSheet({
@@ -109,7 +113,7 @@ class StyleSheet {
     this.backgroundColor = defaultStringEmptyValue,
     this.color = defaultStringEmptyValue,
     this.height = defaultStringEmptyValue,
-    this.width = defaultStringEmptyValue, 
+    this.width = defaultStringEmptyValue,
 // %%[CODER_END]:StyleSheet_constructor%%
   });
 }

test/box_test.dart

@@ -0,0 +1,54 @@
+// This is a basic Flutter widget test.
+//
+// To perform an interaction with a widget in your test, use the WidgetTester
+// utility that Flutter provides. For example, you can send tap and scroll
+// gestures. You can also use WidgetTester to find child widgets in the widget
+// tree, read text, and verify that the values of widget properties are correct.
+
+import 'package:flutter_test/flutter_test.dart';
+import 'package:skynexui_components/components.dart';
+
+Widget withProvider(Widget widget) {
+  return MultiProvider(
+    providers: [
+      ChangeNotifierProvider(create: (_) => SkynexUIProvider()),
+    ],
+    child: MediaQuery(
+      data: const MediaQueryData(),
+      child: MaterialApp(home: widget),
+    ),
+  );
+}
+
+void main() {
+  group('Box', () {
+    testWidgets('renders box component', (WidgetTester tester) async {
+      Widget boxWidget = withProvider(
+        const Box(),
+      );
+
+      await tester.pumpWidget(boxWidget);
+
+      var boxFinder = find.byWidget(boxWidget);
+
+      expect(boxFinder, findsOneWidget);
+    });
+    group('padding', () {
+      testWidgets('renders with padding', (WidgetTester tester) async {
+        Widget boxWidget = withProvider(
+          const Box(
+            styleSheet: StyleSheet(
+              paddingBottom: {Breakpoints.xs: '10px'},
+            ),
+          ),
+        );
+
+        await tester.pumpWidget(boxWidget);
+
+        var boxFinder = find.byWidget(boxWidget);
+
+        expect(boxFinder, findsOneWidget);
+      });
+    });
+  });
+}