Feat/docs

example/lib/example/fab_example.dart

@@ -69,7 +69,7 @@ class _FabExampleState extends State<FabExample> {
                     height: 360,
                     width: 320,
                     borderRadius: $GSRadii.$md,
-                    color: $GSColors.backgroundLight50,
+                    bg: $GSColors.backgroundLight50,
                     dark: GSStyle(color: $GSColors.backgroundDark900)),
               ),
               GSFab(

example/lib/example/icon_example.dart

@@ -30,7 +30,7 @@ class _IconExampleState extends State<IconExample> {
   Widget build(BuildContext context) {
     var code = '''GSIcon(
             icon: Icons.calendar_month,
-            size: selectedSizeOption,
+            size: GSSizes.\$md,
           )
   ''';
     return Scaffold(

example/lib/example/progress_example.dart

@@ -31,7 +31,7 @@ class _ProgressExampleState extends State<ProgressExample> {
   Widget build(BuildContext context) {
     var code = '''GSProgress(
             value: 0.4,
-            size: selectedSizeOption,
+            size: GSSizes.\$md,
           )
   ''';
     return Scaffold(

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

@@ -1,10 +1,10 @@
-import { addParameters } from '@storybook/client-api';
-import { DocsContainer } from '@storybook/addon-docs/blocks';
-import { config } from '@gluestack-ui/config';
-import { Center, GluestackUIProvider } from '@gluestack-ui/themed';
-import { useState } from 'react';
+import { addParameters } from "@storybook/client-api";
+import { DocsContainer } from "@storybook/addon-docs/blocks";
+import { config } from "@gluestack-ui/config";
+import { Center, GluestackUIProvider } from "@gluestack-ui/themed";
+import { useState } from "react";
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -16,40 +16,64 @@ export const parameters = {
   },
   options: {
     storySort: {
-      method: '',
+      method: "",
       order: [
-        'Overview',
-        ['Introduction'],
-        'Getting Started',
-        ['Installation'],
-        'Components',
-        ['Forms', ['Button', 'Input','Switch'], 'Data Display', ['Badge']], 
-
-
+        "Overview",
+        ["Introduction"],
+        "Getting Started",
+        ["Installation"],
+        "Components",
+        [
+          "Typography",
+          ["Heading", "Text"],
+          "Layout",
+          ["Box", "Center", "Divider", "HStack", "VStack"],
+          "Feedback",
+          ["Progress", "Spinner", "Toast"],
+          "Data Display",
+          ["Badge"],
+          "Forms",
+          [
+            "Button",
+            "Checkbox",
+            "Input",
+            "Link",
+            "Pressable",
+            "Radio",
+            "Switch",
+            "Textarea",
+          ],
+          "Overlay",
+          ["AlertDialog"],
+          "Media And Icons",
+          ["Avatar", "Icon", "Image"],
+          "Others",
+          ["Fab"],
+        ],
       ],
     },
   },
 };
 
-import { useDarkMode } from '../src/hooks/useDarkMode';
-import { Platform } from 'react-native';
+import { useDarkMode } from "../src/hooks/useDarkMode";
+import { Platform } from "react-native";
 
 export const decorators = [
   (Story) => {
     let value = false;
 
-    if (Platform.OS === 'web') {
+    if (Platform.OS === "web") {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       value = useDarkMode();
     }
     const [isDark] = useState(false);
 
     function getColorMode() {
       //@ts-ignore
-      if (Platform.OS === 'web') {
-        return value ? 'dark' : 'light';
+      if (Platform.OS === "web") {
+        return value ? "dark" : "light";
       } else {
-        return isDark ? 'dark' : 'light';
+        return isDark ? "dark" : "light";
       }
     }
     return (
@@ -71,18 +95,18 @@ addParameters({
     container: ({ children, context }) => {
       let value = false;
 
-      if (Platform.OS === 'web') {
+      if (Platform.OS === "web") {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         value = useDarkMode();
       }
       const [isDark] = useState(false);
 
       function getColorMode() {
         //@ts-ignore
-        if (Platform.OS === 'web') {
-          return value ? 'dark' : 'light';
+        if (Platform.OS === "web") {
+          return value ? "dark" : "light";
         } else {
-          return isDark ? 'dark' : 'light';
+          return isDark ? "dark" : "light";
         }
       }
 

example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx

@@ -15,7 +15,7 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Components/Data Display/Badge" />
 
 <iframe
-  src="http://localhost:64228/#/badgePreview"
+  src="https://www.myntra.com/"
   title="Example"
   width="800"
   height="350"
@@ -27,7 +27,7 @@ import 'package:gluestack_ui/gluestack_ui.dart';
 GSBadge(
   action: GSActions.success,
   variant:  GSVariants.solid,
-  size: GSSizes.\$md,
+  size: GSSizes.$md,
   icon: const GSBadgeIcon(
     iconData: Icons.info_outline,
   ),

example/lib/example/storybook/src/components/Feedback/Progress/index.stories.mdx

@@ -0,0 +1,31 @@
+---
+title: Progress | gluestack-ui | Installation, Usage, and API
+
+description: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
+
+pageTitle: Progress
+
+pageDescription: The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.
+
+showHeader: true
+---
+
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/Feedback/Progress" />
+
+<iframe
+  src="http://localhost:53075/#/progressPreview"
+  title="Example"
+  width="800"
+  height="350"
+></iframe>
+
+```dart
+import 'package:gluestack_ui/gluestack_ui.dart';
+
+GSProgress(
+  value: 0.4,
+  size: GSSizes.$md,
+)
+```

example/lib/example/storybook/src/components/Feedback/Spinner/index.stories.mdx

@@ -0,0 +1,35 @@
+---
+title: Spinner | gluestack-ui | Installation, Usage, and API
+
+description: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
+
+pageTitle: Spinner
+
+pageDescription: Spinners are designed to give visual cues to users that an action is being processed or that a change or result is expected. They are useful for improving the user experience by reducing frustration and uncertainty.
+
+showHeader: true
+---
+
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/Feedback/Spinner" />
+
+<iframe
+  src="https://www.myntra.com/"
+  title="Example"
+  width="800"
+  height="350"
+></iframe>
+
+```dart
+import 'package:gluestack_ui/gluestack_ui.dart';
+
+GSSpinner(
+  strokeWidth: 4,
+  style: GSStyle(
+    bg: $GSColors.blueGray300,
+    width: 30,
+    height: 30,
+  ),
+),
+```

example/lib/example/storybook/src/components/Feedback/Toast/index.stories.mdx

@@ -0,0 +1,54 @@
+---
+title: Toast | gluestack-ui | Installation, Usage, and API
+
+description: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
+
+pageTitle: Toast
+
+pageDescription: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
+
+showHeader: true
+---
+
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/Feedback/Toast" />
+
+<iframe
+  src="https://www.myntra.com/"
+  title="Example"
+  width="800"
+  height="350"
+></iframe>
+
+```dart
+import 'package:gluestack_ui/gluestack_ui.dart';
+
+GSButton(
+  size: GSSizes.$lg,
+  child: const GSButtonText(text: "Click Me"),
+  onPressed: () {
+    showToast(
+      context,
+      child: GSToast(
+        action: GSActions.values[context.knobs.options(
+            label: 'Action', initial: 9, options: actionOptions)],
+        variant: GSVariants.values[context.knobs.options(
+            label: 'Variant', initial: 0, options: variantOptions)],
+        child: const Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            GSToastTitle(
+              title: "Hey",
+            ),
+            GSToastDescription(
+              description: "Desc Desc Desc Desc Desc Desc ",
+            ),
+          ],
+        ),
+      ),
+    );
+  },
+)
+```

example/lib/example/storybook/src/components/Layout/Box/index.stories.mdx

@@ -0,0 +1,35 @@
+---
+title: Box | gluestack-ui | Installation, Usage, and API
+
+description: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
+
+pageTitle: Box
+
+pageDescription: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
+
+showHeader: true
+---
+
+import { Meta } from "@storybook/addon-docs";
+import { useRef, useEffect, useState } from "react";
+
+<Meta title="Components/Layout/Box" />
+
+<iframe
+  src="http://localhost:53075/#/hstackPreview"
+  title="Example"
+  width="800"
+  height="350"
+></iframe>
+
+```dart
+import 'package:gluestack_ui/gluestack_ui.dart';
+
+GSBox(
+  style: GSStyle(
+    padding: const EdgeInsets.all($GSSpace.$5),
+    bg: $GSColors.primary500,
+  ),
+  child: const Text('This is the Box'),
+)
+```

example/lib/example/storybook/src/components/Layout/Center/index.stories.mdx

@@ -0,0 +1,35 @@
+---
+title: Center | gluestack-ui | Installation, Usage, and API
+
+description: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
+
+pageTitle: Center
+
+pageDescription: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
+
+showHeader: true
+---
+
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Components/Layout/Center" />
+
+<iframe
+  src="http://localhost:53075/#/hstackPreview"
+  title="Example"
+  width="800"
+  height="350"
+></iframe>
+
+```dart
+import 'package:gluestack_ui/gluestack_ui.dart';
+
+GSCenter(
+  style: GSStyle(
+    height: 150,
+    width: 300,
+    bg: $GSColors.primary500,
+  ),
+  child: const GSCenter(child: Text('This is the Center')),
+)
+```