Merge pull request #414 from gluestack/rayan1810-patch-2

Update babel plugin docs

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