feat: add support to stylesheet interface in JS/TS version

README.md

@@ -8,9 +8,8 @@
 It's a set of common utility strategies to work with responsive styles with CSS in JS and Flutter
 
 ## Summary
-
-- [Dart/Flutter](#dartflutter)
-- [JavaScript/React](#javascriptreact)
+- [Dart/Flutter](#dartflutter-🐦)
+- [JavaScript/React](#javascriptreact-⚛)
 - [Docs](#docs)
 
 ## Dart/Flutter 🐦
@@ -101,6 +100,7 @@ yarn add @skynexui/responsive_stylesheet
 | [GridItem](./lib/grid-item//grid_item.md)                    | ✅               | 🚧            |
 | parseStylesheet                                              | 🚧               | ✅            |
 | BreakpointsProvider                                          | 🚧               | 🚧            |
+| StyleSheet                                                   | 🚧               | ✅            |
 
 > ✅ Ready, 🚧 WIP, ❌ Not in roadmap by now, 🗺️ Inside roadmap
 

lib/parse-stylesheet/parse-stylesheet.ts

@@ -1,6 +1,15 @@
 import { breakpoints } from "@lib/breakpoints/breakpoints";
 
 function parseStyleSheetRule(property: any, value: any) {
+  if (property.includes("crossAxisAlignment")) {
+    // crossAxisAlignment?: alignItems;
+    return { alignItems: value };
+  }
+  if (property.includes("crossAxisAlignment")) {
+    // mainAxisAlignment?: justifyContent;
+    return { crossAxisAlignment: value };
+  }
+
   if (property.includes("Vertical")) {
     const propertyBase = property.replace("Vertical", "");
     return {

lib/stylesheet/properties/box-model.ts

@@ -0,0 +1,6 @@
+import { ResponsiveProperty } from "../responsive-property";
+
+export type height = ResponsiveProperty<string | number> | string;
+export type width = ResponsiveProperty<string | number> | string;
+export type background = ResponsiveProperty<string> | string;
+export type color = ResponsiveProperty<string> | string;

lib/stylesheet/properties/flexbox.ts

@@ -0,0 +1,20 @@
+import { ResponsiveProperty } from "../responsive-property";
+
+export type flexDirection = ResponsiveProperty<"row" | "column"> | string;
+
+export type flex = ResponsiveProperty<number | string> | string | number;
+
+export type alignItems =
+  | ResponsiveProperty<"stretch" | "flex-start" | "flex-end" | "center">
+  | string;
+
+export type justifyContent =
+  | ResponsiveProperty<
+      | "center"
+      | "flex-start"
+      | "flex-end"
+      | "spaceBetween"
+      | "spaceAround"
+      | "spaceEvenly"
+    >
+  | string;

lib/stylesheet/responsive-property.ts

@@ -0,0 +1,3 @@
+import { Breakpoints } from "@lib/breakpoints/breakpoints";
+
+export type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;

lib/stylesheet/stylesheet.ts

@@ -0,0 +1,30 @@
+import { background, color, height, width } from "./properties/box-model";
+import {
+  alignItems,
+  flex,
+  flexDirection,
+  justifyContent,
+} from "./properties/flexbox";
+import { ResponsiveProperty } from "./responsive-property";
+
+export interface StyleSheet {
+  // [box-model]
+  height?: height;
+  width?: width;
+  color?: color;
+  backgroundColor?: background;
+
+  // [flexbox]
+  flex?: flex;
+  alignItems?: alignItems;
+  crossAxisAlignment?: alignItems;
+  justifyContent?: justifyContent;
+  mainAxisAlignment?: justifyContent;
+  flexDirection?: flexDirection;
+
+  // Extras
+  hover?: StyleSheet;
+  focus?: StyleSheet;
+  modeDark?: StyleSheet;
+  [key: string]: ResponsiveProperty<string | any> | string | any;
+}