Feat/styling docs

example/lib/example/storybook/.storybook/preview.js

@@ -22,6 +22,8 @@ export const parameters = {
         ["Introduction"],
         "Getting Started",
         ["Installation"],
+        "Styling",
+        ["Overview","Utility", "Responsiveness", "Platform Specific"],
         "Components",
         [
           "Typography",

example/lib/example/storybook/src/styling/Overview/index.stories.mdx

@@ -0,0 +1,51 @@
+---
+title: Overview | Styling | gluestack-ui
+description: Overview of styling prowess in gluestack ui flutter.
+---
+
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+<Meta title="Styling/Overview" />
+
+# Styling Overview
+
+All the components of [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/widgets) are unstyled by default and take values from [config](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/theme/config), whose default values can be configured by passing down a custom config object via the **Gluestack Provider** after wrapping the root **MaterialApp**.
+
+```
+GluestackProvider(
+      // This is how we can provide custom configuration to Gluestack Theme.
+       gluestackCustomConfig: GluestackCustomConfig(
+         button: customButton,
+         buttonText: customButtonText,
+       ),
+      child: MaterialApp(),
+)
+```
+
+The imported custom theme object is basically a Map object that contains your custom json config. You can refer [here](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/theme/config) to find out the structure of the default config files that we use.
+Following is an example of the **customButton** config that we have used above.
+```
+Map<String, dynamic> customButton = {
+  'bg': '\$error300',
+  '_dark': {
+    'bg': '\$primary800',
+    'borderColor': '\$primary700',
+    ':hover': {
+      'bg': '\$error300',
+      'borderColor': '\$primary400',
+    }
+  }
+};
+```
+## Custom Tokens
+
+Similarly, all the token available in [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/token) can also be configured by passing down a custom token config object via the **Gluestack Provider** after wrapping the root **MaterialApp**.
+```
+GluestackProvider(
+      gluestackTokenConfig: GluestackTokenConfig(
+        gsColorsToken: GSColorsToken(
+          textLight0: Color(0xfffffff),
+        ),
+      ),
+)
+```

example/lib/example/storybook/src/styling/Platform-specific/index.stories.mdx

@@ -0,0 +1,34 @@
+---
+title: Platform Specific | Styling | gluestack-ui
+description: Overview of platform specific styling prowess of gluestack ui
+---
+
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+<Meta title="Styling/PlatformSpecific" />
+
+# Platform Specific
+
+We can provide platform specific styles in the **GSStyle** prop of the component. There are params like android, ios, web which accepts **GSStyle** object as param, which defined the platform specific styling that will be applied to the component.
+
+Let's say that we wish for our button component to appear red when the app is running on android, we acheive that via the following implementation.
+
+![android red button example - platform specific](images/styling-platform-specific-ex1.png)
+________________________________________________
+```
+        GSButton(
+          style: GSStyle(
+            bg: $GSColors.green400,
+            web: GSStyle(bg: $GSColors.yellow400),
+            android: GSStyle(bg: $GSColors.red800),
+            ios: GSStyle(bg: $GSColors.blue400),
+          ),
+          onPressed: () {},
+          child: const Row(
+            children: [
+              GSButtonText(text: "Add"),
+              GSButtonIcon(icon: Icons.add)
+            ],
+          ),
+        ),
+```

example/lib/example/storybook/src/styling/Responsiveness/index.stories.mdx

@@ -0,0 +1,79 @@
+---
+title: Responsiveness | Styling | gluestack-ui
+description: Overview of UIs can be made responsive with help of Gluestack
+---
+
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+<Meta title="Styling/Responsiveness" />
+
+# Responsiveness
+
+The components present in [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/widgets) are responsive and their styling can be changed according to device's screen. The screen breakpoints used in [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development) can be found [here](https://github.com/gluestack/gluestack-ui-flutter/blob/development/lib/src/token/screen_breakpoint.dart), or, you can also refer the following:
+```
+sm: (min-width: 480px)
+md: (min-width: 768px)
+lg: (min-width: 992px)
+xl: (min-width: 1280px)
+```
+We can apply different styling based on different breakpoints, if we wish for your component to appear black on small screen when sm breakpoint is reached, we can do that too like so.
+![web yellow button example](images/styling-utility-complex-ex2.png)
+________________________________________________
+```
+        GSButton(
+          style: GSStyle(
+            bg: $GSColors.green400,
+            sm: GSStyle(bg: $GSColors.black),
+          ),
+          onPressed: () {},
+          child: const Row(
+            children: [
+              GSButtonText(text: "Add"),
+              GSButtonIcon(icon: Icons.add)
+            ],
+          ),
+        ),
+```
+
+# Responsive Layouts
+In real world applications, often time there is a need to control entire layouts or parts of layouts to be responsive, that's why we have created [multiple widgets](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/widgets/gs_responsives) that makes this process easier.
+Let's take an example of GSFlex which can arrange widget content inside to be displayed horizontally or vertically depending on screen size.
+
+![GSFlex on small display size](images/styling-responsive-flex-ex1.png)
+__________________________________________________________________________
+![GSFlex on large display size](images/styling-responsive-flex-ex2.png)
+__________________________________________________________________________
+```
+        GSFlex(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          style: GSStyle(
+            direction: Axis.vertical,
+            md: GSStyle(direction: Axis.horizontal),
+          ),
+          children: [
+            GSBox(
+              style: GSStyle(
+                height: 150,
+                width: 150,
+                bg: Colors.red,
+              ),
+            ),
+            GSBox(
+              style: GSStyle(
+                height: 150,
+                width: 150,
+                bg: Colors.green,
+              ),
+            ),
+            GSBox(
+              style: GSStyle(
+                height: 150,
+                width: 150,
+                bg: Colors.blue,
+              ),
+            ),
+          ],
+        ),
+```
+

example/lib/example/storybook/src/styling/Utility/index.stories.mdx

@@ -0,0 +1,77 @@
+---
+title: Utility | Styling | gluestack-ui
+description: Overview of how styling is meant to be utilized.
+---
+
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+<Meta title="Styling/Utility" />
+
+# Basic Styling
+
+You can apply styling props directly to the components via style prop, which takes a **GSStyle** object. There are various props available in GSStyle object that control almost all aspect of styling that Gluestack ui Flutter provides!
+Let's say we want a green colored button and we have defined a custom color token for green400 which we would like to use. The implementation for that would look like the following.
+
+![green button example](images/styling-utility-button-ex.png)
+________________________________________________
+```
+    GSButton(
+      style: GSStyle(bg: $GSColors.green400),
+      onPressed: () {},
+      child: const Row(
+        children: [
+          GSButtonText(text: "Add"),
+          GSButtonIcon(icon: Icons.add)
+        ],
+      ),
+    ),
+```
+There are lot of other props as well to chose from.
+
+
+# Complex Styling
+
+You can also handle more intricate styling, such as styles for different screen sizes, platform, system theme - light and dark and descendants. Certain style props take GSStyle object itself as a param, this unlocks whole new world of complex nested styling that was impossible in Flutter before.
+Let's say you wish for your button component to appear yellow when the app is running on web, you can do that as follows
+![web yellow button example](images/styling-utility-complex-ex1.png)
+________________________________________________
+```
+        GSButton(
+          style: GSStyle(
+            bg: $GSColors.green400,
+            web: GSStyle(bg: $GSColors.yellow400),
+            android: GSStyle(bg: $GSColors.red400),
+            //....other platforms
+          ),
+          onPressed: () {},
+          child: const Row(
+            children: [
+              GSButtonText(text: "Add"),
+              GSButtonIcon(icon: Icons.add)
+            ],
+          ),
+        ),
+```
+
+Similarly, if we wish for your component to appear black on small screen when sm breakpoint is reached in the code above, we can do that too like so.
+![web yellow button example](images/styling-utility-complex-ex2.png)
+________________________________________________
+```
+        GSButton(
+          style: GSStyle(
+            bg: $GSColors.green400,
+            web: GSStyle(bg: $GSColors.yellow400),
+            sm: GSStyle(bg: $GSColors.black),
+          ),
+          onPressed: () {},
+          child: const Row(
+            children: [
+              GSButtonText(text: "Add"),
+              GSButtonIcon(icon: Icons.add)
+            ],
+          ),
+        ),
+```
+
+**Note:** Incase of duplicate definition of props, example - if dark mode style is defined inside the parent GSStyle but is also declared inside a screen breakpoint, md, the dark prop inside parent GSStyle will be applied as it would have more order of precedence that the rest of dark prop that is applied. 
+

example/lib/widgets/storybook_widgets/avatar_group_preview.dart

@@ -21,7 +21,7 @@ class AvatarGroupPreview extends StatelessWidget {
               ),
               child: GSAvatarGroup(children: [
                 GSAvatar(
-                  size: GSSizes.$sm,
+                  size: GSAvatarSizes.$sm,
                   avatarImage: const GSImage(
                       path:
                           'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
@@ -33,7 +33,7 @@ class AvatarGroupPreview extends StatelessWidget {
                   fallBackText: const GSAvatarFallBackText('RA'),
                 ),
                 GSAvatar(
-                  size: GSSizes.$sm,
+                  size: GSAvatarSizes.$sm,
                   avatarImage: const GSImage(
                       path:
                           'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
@@ -45,7 +45,7 @@ class AvatarGroupPreview extends StatelessWidget {
                   fallBackText: const GSAvatarFallBackText('BA'),
                 ),
                 GSAvatar(
-                  size: GSSizes.$sm,
+                  size: GSAvatarSizes.$sm,
                   avatarImage: const GSImage(
                       path:
                           'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',

example/lib/widgets/storybook_widgets/fab_placement_preview.dart

@@ -103,7 +103,7 @@ class FabPlacementPreview extends StatelessWidget {
                     ),
                   ),
                   GSFab(
-                    placement: GSPlacements.bottomCenter,
+                    placement: GSFABPlacements.bottomCenter,
                     onPressed: () {},
                     icon: GSFabIcon(
                       icon: Icons.add,

example/lib/widgets/storybook_widgets/fab_with_icon_and_text_preview.dart

@@ -186,7 +186,7 @@ class FabWithIconAndTextPreview extends StatelessWidget {
                     ),
                   ),
                   GSFab(
-                    placement: GSPlacements.topRight,
+                    placement: GSFABPlacements.topRight,
                     onPressed: () {},
                     icon: GSFabIcon(
                       icon: Icons.search,

example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart

@@ -15,7 +15,7 @@ class VStackReversedPreview extends StatelessWidget {
           Story(
             name: 'VStack',
             builder: (context) => GSVStack(
-              space: GSSpaces.$md,
+              space: GSVstackSpaces.$md,
               mainAxisAlignment: MainAxisAlignment.center,
               isReversed: true,
               children: [