Merge pull request #2099 from gluestack/fix/linear-gradient-nw

fix: updated imports and added image to linear-gradient

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(() => {

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({

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,
 });
 

example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx

@@ -0,0 +1,18 @@
+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' ? '/assets/light-lg.svg' : '/assets/dark-lg.svg'
+      }
+      alt="linear-gradient"
+      className="h-64 w-[400px]"
+    />
+  );
+};
+export default GradientImage;

example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx

@@ -14,67 +14,60 @@ 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';
+import GradientImage from '../../../extra-components/nativewind/GradientImage';
 
 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 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 {
-  Box,
-  Heading,
-  Link,
-  LinkText,
-  Text,
-  VStack,
-  Image,
-  LinearGradient,
-} from "./components/ui";
-
-const ExpoExample = () => {
-  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 { LinearGradient } from "./components/ui/linear-gradient";
+import { Heading } from "./components/ui/heading";
+import { Text } from "./components/ui/text";
+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 style={{ flex: 1 }}>
-      <GluestackUIProvider>
-        <ExpoExample />
+    <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="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>
+
+          <Input
+            variant="outline"
+            size="md"
+            isDisabled={false}
+            isInvalid={false}
+            isReadOnly={false}
+            className="w-full rounded-full my-3"
+          >
+            <InputField placeholder="[email protected]" />
+            <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>
   );
@@ -83,6 +76,8 @@ export default function App() {
 
 <br />
 
+<GradientImage/>
+
 ## Installation
 
 <Tabs value="expo" type="section">
@@ -107,7 +102,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 +121,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>
 
@@ -146,4 +141,4 @@ import { LinearGradient } from '@/components/ui/linear-gradient';
 
 ```jsx
 export default () => <LinearGradient />;
-```
+```../../../extra-components/nativewind/GradientImage