From 0708fc9ba187e9e878e4fffb8fb452393b547b5e Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Thu, 25 Apr 2024 14:06:23 +0530
Subject: [PATCH 1/4] fix: imports and added image to linear-gradient

---
 .../linear-gradient/index.nw.stories.mdx      | 44 ++++++++-----------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
index f92128e5f1..1526daf5ad 100644
--- a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
@@ -14,30 +14,24 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-nativewind/Guides/Recipes/LinearGradient" />
 
-import { Tabs } from '@gluestack/design-system';
-import { CollapsibleCode } from '@gluestack/design-system';
-
+import { Tabs, CollapsibleCode } from '@gluestack/design-system';
 
 This is an illustration of **Linear Gradient** component in `App.tsx` file.
 
 ```jsx
 import "./global.css";
 import React from "react";
-import { SafeAreaView } from "react-native";
+import { SafeAreaView } from "./components/ui/safe-area-view";
 import { GluestackUIProvider } from "./components/ui/gluestack-ui-provider";
-
-import {
-  Box,
-  Heading,
-  Link,
-  LinkText,
-  Text,
-  VStack,
-  Image,
-  LinearGradient,
-} from "./components/ui";
-
-const ExpoExample = () => {
+import { LinearGradient } from "./components/ui/linear-gradient";
+import { Box } from "./components/ui/box";
+import { Heading } from "./components/ui/heading";
+import { Link, LinkText } from "./components/ui/link";
+import { Text } from "./components/ui/text";
+import { VStack } from "./components/ui/vstack";
+import { Image } from "./components/ui/image";
+
+const Example = () => {
   return (
     <Box className="h-full justify-center px-4 bg-background-0 web:min-h-[100vh]">
       <VStack space="lg" className="items-center">
@@ -55,11 +49,7 @@ const ExpoExample = () => {
         <Heading>Welcome to gluestack-ui</Heading>
         <Text>
           Edit{" "}
-          <Text
-            className="px-2 py-1 rounded bg-background-100"
-          >
-            App.tsx
-          </Text>{" "}
+          <Text className="px-2 py-1 rounded bg-background-100">App.tsx</Text>{" "}
           and save to reload.
         </Text>
         <Link href="https://ui.gluestack.io/docs/" isExternal>
@@ -72,15 +62,17 @@ const ExpoExample = () => {
 
 export default function App() {
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView className="flex-1">
       <GluestackUIProvider>
-        <ExpoExample />
+        <Example />
       </GluestackUIProvider>
     </SafeAreaView>
   );
 }
 ```
 
+<img src='/assets/linear-gradient.png' alt='linear-gradient' />
+
 <br />
 
 ## Installation
@@ -107,7 +99,7 @@ npx expo install expo-linear-gradient
 <CollapsibleCode>
 
 ```jsx 
-%%-- File: recipes/linear-gradient/expo-linear-gradient.tsx --%% 
+%%-- File: guides/recipes/linear-gradient/expo-linear-gradient.tsx --%% 
 ```
 </CollapsibleCode>
 
@@ -126,7 +118,7 @@ npm i react-native-linear-gradient
 <CollapsibleCode>
 
 ```jsx 
-%%-- File: recipes/linear-gradient/rn-linear-gradient.tsx --%% 
+%%-- File: guides/recipes/linear-gradient/rn-linear-gradient.tsx --%% 
 ```
 </CollapsibleCode>
 

From 651af102266bd623305bb43847a74b4afb1f9115 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Fri, 26 Apr 2024 11:50:46 +0530
Subject: [PATCH 2/4] feat: added height width to image

---
 .../src/guides/recipes/linear-gradient/index.nw.stories.mdx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
index 1526daf5ad..661359c878 100644
--- a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
@@ -71,7 +71,7 @@ export default function App() {
 }
 ```
 
-<img src='/assets/linear-gradient.png' alt='linear-gradient' />
+<img src='/assets/linear-gradient.png' alt='linear-gradient' height={'20%'} width={'50%'} />
 
 <br />
 

From b705aee963381c42a022b1de1c618cfd433421b1 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Tue, 30 Apr 2024 15:12:42 +0530
Subject: [PATCH 3/4] fix: updated code

---
 .../core-components/nativewind/fab/index.tsx  | 10 +--
 .../gluestack-ui-provider/config.ts           |  1 -
 .../core-components/nativewind/menu/index.tsx |  4 +-
 .../recipes/linear-gradient/GradientImage.tsx | 16 ++++
 .../linear-gradient/index.nw.stories.mdx      | 81 ++++++++++---------
 5 files changed, 61 insertions(+), 51 deletions(-)
 create mode 100644 example/storybook-nativewind/src/guides/recipes/linear-gradient/GradientImage.tsx

diff --git a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
index 4696055a8f..e8f366aaaa 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
@@ -15,15 +15,7 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const PrimitiveIcon = React.forwardRef(
   (
-    {
-      height,
-      width,
-      fill = 'none',
-      color = 'gray',
-      size,
-      as: AsComp,
-      ...props
-    }: any,
+    { height, width, fill = 'none', color, size, as: AsComp, ...props }: any,
     ref?: any
   ) => {
     const sizeProps = useMemo(() => {
diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
index d02453399d..cd51f1341c 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
+++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts
@@ -146,7 +146,6 @@ export const config = {
     '--color-background-warning': '#FFF4EB',
     '--color-background-success': '#EDFCF2',
     '--color-background-muted': '#F6F6F7',
-    // '--color-background-muted': 'red',
     '--color-background-info': '#EBF8FE',
   }),
   dark: vars({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
index 678a4087ae..3907b898cd 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
@@ -16,8 +16,8 @@ const menuItemStyle = tva({
 });
 
 const menuBackdropStyle = tva({
-  base: 'absolute top-0 bottom-0 left-0 right-0 bg-background-dark opacity-50 web:cursor-default',
-  // add this classnames if you want to give background colour to backdrop
+  base: 'absolute top-0 bottom-0 left-0 right-0 web:cursor-default',
+  // add this classnames if you want to give background color to backdrop
   // opacity-50 bg-background-500,
 });
 
diff --git a/example/storybook-nativewind/src/guides/recipes/linear-gradient/GradientImage.tsx b/example/storybook-nativewind/src/guides/recipes/linear-gradient/GradientImage.tsx
new file mode 100644
index 0000000000..4e759985f7
--- /dev/null
+++ b/example/storybook-nativewind/src/guides/recipes/linear-gradient/GradientImage.tsx
@@ -0,0 +1,16 @@
+import { Image } from '../../../core-components/nativewind';
+import React, { useContext } from 'react';
+import { LayoutContext } from '@gluestack/design-system';
+
+const GradientImage = () => {
+  const { colorMode } = useContext(LayoutContext);
+
+  return (
+    <Image
+      source={colorMode === 'light' ? 'x' : '/assets/dark-lg.png'}
+      alt="linear-gradient"
+      // className="h-[30%] w-[50%]"
+    />
+  );
+};
+export default GradientImage;
diff --git a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
index 661359c878..56d21ebda7 100644
--- a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
@@ -15,66 +15,69 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="with-nativewind/Guides/Recipes/LinearGradient" />
 
 import { Tabs, CollapsibleCode } from '@gluestack/design-system';
+import GradientImage from './GradientImage';
 
 This is an illustration of **Linear Gradient** component in `App.tsx` file.
 
 ```jsx
 import "./global.css";
-import React from "react";
+import React, { useState } from "react";
+import { Input, InputField, InputIcon, InputSlot } from "./components/ui/input";
 import { SafeAreaView } from "./components/ui/safe-area-view";
 import { GluestackUIProvider } from "./components/ui/gluestack-ui-provider";
 import { LinearGradient } from "./components/ui/linear-gradient";
-import { Box } from "./components/ui/box";
 import { Heading } from "./components/ui/heading";
-import { Link, LinkText } from "./components/ui/link";
 import { Text } from "./components/ui/text";
-import { VStack } from "./components/ui/vstack";
-import { Image } from "./components/ui/image";
-
-const Example = () => {
-  return (
-    <Box className="h-full justify-center px-4 bg-background-0 web:min-h-[100vh]">
-      <VStack space="lg" className="items-center">
-        <LinearGradient
-          className="p-16 rounded-md"
-          colors={["#C084FC", "#60A5FA", "#F9A8D4"]}
-          start={[0, 0]}
-          end={[0, 1]}
-        >
-          <Image
-            source={require("./assets/gluestack-ui-logo.png")}
-            alt="gluestack-logo"
-          />
-        </LinearGradient>
-        <Heading>Welcome to gluestack-ui</Heading>
-        <Text>
-          Edit{" "}
-          <Text className="px-2 py-1 rounded bg-background-100">App.tsx</Text>{" "}
-          and save to reload.
-        </Text>
-        <Link href="https://ui.gluestack.io/docs/" isExternal>
-          <LinkText className="text-xl">Learn gluestack-ui</LinkText>
-        </Link>
-      </VStack>
-    </Box>
-  );
-};
+import { Center } from "./components/ui/center";
+import { Mail } from "lucide-react-native";
 
 export default function App() {
+  const [colorMode, setColorMode] = useState<"dark" | "light">("light");
   return (
-    <SafeAreaView className="flex-1">
-      <GluestackUIProvider>
-        <Example />
+    <SafeAreaView className="flex-1 justify-center items-center">
+      <GluestackUIProvider mode={colorMode}>
+        <Center className="rounded-xl bg-background-0 p-8 m-6 web:max-w-[400px]">
+          <Heading size="3xl">Stay up to date</Heading>
+          <Text size="lg" className="text-center leading-[22px] my-2">
+            Subscribe to our newsletter for the latest news and product updates.
+          </Text>
+
+          <Input
+            variant="outline"
+            size="md"
+            isDisabled={false}
+            isInvalid={false}
+            isReadOnly={false}
+            className="w-full rounded-full my-3"
+          >
+            <InputField placeholder="Placeholder Text" />
+            <InputSlot className="pr-3">
+              <InputIcon
+                as={Mail}
+                color={colorMode === "light" ? "#525252" : "#DBDBDC"}
+              />
+            </InputSlot>
+          </Input>
+
+          <LinearGradient
+            className="w-full rounded-full items-center py-2"
+            colors={["#8637CF", "#0F55A1"]}
+            start={[0, 1]}
+            end={[1, 0]}
+          >
+            <Text className="text-white font-semibold">Subscribe</Text>
+          </LinearGradient>
+        </Center>
       </GluestackUIProvider>
     </SafeAreaView>
   );
 }
 ```
 
-<img src='/assets/linear-gradient.png' alt='linear-gradient' height={'20%'} width={'50%'} />
-
 <br />
 
+<GradientImage/>
+
 ## Installation
 
 <Tabs value="expo" type="section">

From 606867adcdc3f7690cf75eee0a5b2537497ea605 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Tue, 30 Apr 2024 16:02:48 +0530
Subject: [PATCH 4/4] fix: updated import

---
 .../nativewind}/GradientImage.tsx                      |  8 +++++---
 .../recipes/linear-gradient/index.nw.stories.mdx       | 10 +++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)
 rename example/storybook-nativewind/src/{guides/recipes/linear-gradient => extra-components/nativewind}/GradientImage.tsx (59%)

diff --git a/example/storybook-nativewind/src/guides/recipes/linear-gradient/GradientImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx
similarity index 59%
rename from example/storybook-nativewind/src/guides/recipes/linear-gradient/GradientImage.tsx
rename to example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx
index 4e759985f7..6649b9d7ee 100644
--- a/example/storybook-nativewind/src/guides/recipes/linear-gradient/GradientImage.tsx
+++ b/example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx
@@ -1,4 +1,4 @@
-import { Image } from '../../../core-components/nativewind';
+import { Image } from '../../core-components/nativewind';
 import React, { useContext } from 'react';
 import { LayoutContext } from '@gluestack/design-system';
 
@@ -7,9 +7,11 @@ const GradientImage = () => {
 
   return (
     <Image
-      source={colorMode === 'light' ? 'x' : '/assets/dark-lg.png'}
+      source={
+        colorMode === 'light' ? '/assets/light-lg.svg' : '/assets/dark-lg.svg'
+      }
       alt="linear-gradient"
-      // className="h-[30%] w-[50%]"
+      className="h-64 w-[400px]"
     />
   );
 };
diff --git a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
index 56d21ebda7..c0c8d261f7 100644
--- a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
@@ -15,7 +15,7 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="with-nativewind/Guides/Recipes/LinearGradient" />
 
 import { Tabs, CollapsibleCode } from '@gluestack/design-system';
-import GradientImage from './GradientImage';
+import GradientImage from '../../../extra-components/nativewind/GradientImage';
 
 This is an illustration of **Linear Gradient** component in `App.tsx` file.
 
@@ -37,8 +37,8 @@ export default function App() {
     <SafeAreaView className="flex-1 justify-center items-center">
       <GluestackUIProvider mode={colorMode}>
         <Center className="rounded-xl bg-background-0 p-8 m-6 web:max-w-[400px]">
-          <Heading size="3xl">Stay up to date</Heading>
-          <Text size="lg" className="text-center leading-[22px] my-2">
+          <Heading size="xl">Stay up to date</Heading>
+          <Text className="text-center leading-[22px] my-2">
             Subscribe to our newsletter for the latest news and product updates.
           </Text>
 
@@ -50,7 +50,7 @@ export default function App() {
             isReadOnly={false}
             className="w-full rounded-full my-3"
           >
-            <InputField placeholder="Placeholder Text" />
+            <InputField placeholder="abc@example.com" />
             <InputSlot className="pr-3">
               <InputIcon
                 as={Mail}
@@ -141,4 +141,4 @@ import { LinearGradient } from '@/components/ui/linear-gradient';
 
 ```jsx
 export default () => <LinearGradient />;
-```
\ No newline at end of file
+```../../../extra-components/nativewind/GradientImage
\ No newline at end of file