From 72731ee2b189bbae7528ef9c53b077d12d14a10c Mon Sep 17 00:00:00 2001
From: Rohit Singh <36300815+rayan1810@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:33:27 +0530
Subject: [PATCH] Update babel plugin docs

---
 .../advanced/BabelPlugins/index.stories.mdx   | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx
index 1e79e5a67..71707a3e4 100644
--- a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx
+++ b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx
@@ -14,6 +14,32 @@ import { Box, AppProvider } from '@gluestack/design-system';
 
 @gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
 
+## Installation Steps:
+
+1. Installing babel-plugin-styled-resolver:
+
+   ```bash
+   yarn add @gluestack-style/babel-plugin-styled-resolver
+   ```
+
+2. Add Babel plugin to your app babel.config.js
+
+   ```bash
+   const path = require('path');
+   const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
+   module.exports = function (api) {
+     api.cache(true);
+     return {
+       presets: ['babel-preset-expo'],
+       plugins: [
+         gluestackStyleResolver,
+       ],
+     };
+   };
+   ```
+
+3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.
+
 ### **Let us see how this Babel plugin works.**
 
 - First, it traverses your files and tries to find `styled` imported from `@gluestack-style/react`.
@@ -54,33 +80,7 @@ Here’s a small diagram explaining how the flow works:
   </Box>
 </AppProvider>
 
-Your code gets transpiled in the build files like this:
-
-## Installation Steps:
-
-1. Installing babel-plugin-styled-resolver:
-
-   ```bash
-   yarn add @gluestack-style/babel-plugin-styled-resolver
-   ```
-
-2. Add Babel plugin to your app babel.config.js
-
-   ```bash
-   const path = require('path');
-   const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver');
-   module.exports = function (api) {
-     api.cache(true);
-     return {
-       presets: ['babel-preset-expo'],
-       plugins: [
-         gluestackStyleResolver,
-       ],
-     };
-   };
-   ```
-
-3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.
+Your code gets transpiled in the build files like this.
 
 ## Advanced