fix(expo-hqplan): added the windy library and loaded the first compon…

…ent.
KBVE · Feb 28, 2025 · f96c967 · f96c967
1 parent 92f684f
commit f96c967
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 92 deletions.
diff --git a/apps/experimental/expo-hqplan/babel.config.js b/apps/experimental/expo-hqplan/babel.config.js
@@ -1,24 +1,12 @@
 module.exports = function (api) {
-  api.cache(true);
-
+  api.cache(true)
   return {
     presets: [
-      [
-        '@nx/react/babel',
-        {
-          runtime: 'automatic',
-          useBuiltIns: 'usage',
-        },
-      ],
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
     ],
     plugins: [
-      'nativewind/babel',
-      'react-native-reanimated/plugin',
+      "react-native-reanimated/plugin"
     ],
-    env: {
-      test: {
-        presets: ['babel-preset-expo'],
-      },
-    },
-  };
-};
+  }
+}
diff --git a/apps/experimental/expo-hqplan/src/app/index.tsx b/apps/experimental/expo-hqplan/src/app/index.tsx
@@ -1,69 +1,80 @@
 /* eslint-disable jsx-a11y/accessible-emoji */
-import { View, Text, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
+import {
+	View,
+	Text,
+	SafeAreaView,
+	ScrollView,
+	TouchableOpacity,
+} from 'react-native';
 import Svg, { G, Path } from 'react-native-svg';
 import { useRef, useState } from 'react';
+import { WindyHero } from '@kbve/windy';
 
 const HomeScreen = () => {
+	const [whatsNextYCoord, setWhatsNextYCoord] = useState<number>(0);
+	const scrollViewRef = useRef<null | ScrollView>(null);
 
-        const [whatsNextYCoord, setWhatsNextYCoord] = useState<number>(0);
-        const scrollViewRef = useRef<null | ScrollView>(null);
-
-    return (
-        <SafeAreaView className="flex-1">
-           <ScrollView
-					ref={(ref) => {
-						scrollViewRef.current = ref;
-					}}
-					contentInsetAdjustmentBehavior="automatic"
-					className="bg-cyan-400">
-					<View className="my-6 mx-3">
-						<Text className="text-2xl">Hello there,</Text>
-						<Text
-							className="text-5xl font-medium pt-3"
-							testID="heading"
-							role="heading">
-							Welcome ExpoHqplan 👋
-						</Text>
-					</View>
-					<View className="my-6 mx-3">
-						<View className="rounded-xl bg-[#143055] p-9 mb-6">
-							<View className="flex-1 flex-row">
-								<Svg
-									width={32}
-									height={32}
-									stroke="hsla(162, 47%, 50%, 1)"
-									fill="none"
-									viewBox="0 0 24 24">
-									<Path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth="2"
-										d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
-									/>
-								</Svg>
-								<Text className="text-2xl text-white ml-3"
-									>
-									You're up and running
-								</Text>
-							</View>
-							<TouchableOpacity
-								className="bg-white py-4 rounded-lg w-1/2 mt-6"
-								onPress={() => {
-									scrollViewRef.current?.scrollTo({
-										x: 0,
-										y: whatsNextYCoord,
-									});
-								}}>
-								<Text
-									className="text-lg text-center">
-									What's next?
-								</Text>
-							</TouchableOpacity>
+	return (
+		<SafeAreaView className="flex-1">
+			<ScrollView
+				ref={(ref) => {
+					scrollViewRef.current = ref;
+				}}
+				contentInsetAdjustmentBehavior="automatic"
+				className="bg-cyan-400">
+				<View className="my-6 mx-3">
+					<Text className="text-2xl">Hello there,</Text>
+					<Text
+						className="text-5xl font-medium pt-3"
+						testID="heading"
+						role="heading">
+						Welcome ExpoHqplan 👋
+					</Text>
+				</View>
+				<View className="my-6 mx-3">
+					<View className="rounded-xl bg-[#143055] p-9 mb-6">
+						<View className="flex-1 flex-row">
+							<Svg
+								width={32}
+								height={32}
+								stroke="hsla(162, 47%, 50%, 1)"
+								fill="none"
+								viewBox="0 0 24 24">
+								<Path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth="2"
+									d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+								/>
+							</Svg>
+							<Text className="text-2xl text-white ml-3">
+								You're up and running
+							</Text>
 						</View>
+						<TouchableOpacity
+							className="bg-white py-4 rounded-lg w-1/2 mt-6"
+							onPress={() => {
+								scrollViewRef.current?.scrollTo({
+									x: 0,
+									y: whatsNextYCoord,
+								});
+							}}>
+							<Text className="text-lg text-center">
+								What's next?
+							</Text>
+						</TouchableOpacity>
 					</View>
-				</ScrollView>
-        </SafeAreaView>
-    );
+				</View>
+				<View className="flex-1 bg-gray-900">
+					<WindyHero
+						title="Discover the Windy Experience!"
+						subtitle="A seamless blend of design and performance"
+						imageUrl="https://images.unsplash.com/photo-1727466928916-9789f30de10b?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3"
+					/>
+				</View>
+			</ScrollView>
+		</SafeAreaView>
+	);
 };
 
 export default HomeScreen;
diff --git a/package.json b/package.json
@@ -198,6 +198,7 @@
 		"expo": "52.0.37",
 		"expo-dev-client": "~5.0.12",
 		"expo-font": "^13.0.4",
+		"expo-image": "^2.0.6",
 		"expo-linear-gradient": "^14.0.2",
 		"expo-linking": "^7.0.5",
 		"expo-router": "^4.0.17",

diff --git a/packages/expo/windy/babel.config.js b/packages/expo/windy/babel.config.js
@@ -1,21 +1,25 @@
 module.exports = function (api) {
 	api.cache(true);
-
+  
 	return {
-		presets: [
-			[
-				'@nx/react/babel',
-				{
-					runtime: 'automatic',
-					useBuiltIns: 'usage',
-				},
-			],
+	  presets: [
+		[
+		  '@nx/react/babel',
+		  {
+			runtime: 'automatic',
+			useBuiltIns: 'usage',
+		  },
 		],
-		plugins: [],
-		env: {
-			test: {
-				presets: ['babel-preset-expo'],
-			},
+	  ],
+	  plugins: [
+		'nativewind/babel',
+		'react-native-reanimated/plugin',
+	  ],
+	  env: {
+		test: {
+		  presets: ['babel-preset-expo'],
 		},
+	  },
 	};
-};
+  };
+
diff --git a/packages/expo/windy/package.json b/packages/expo/windy/package.json
@@ -13,7 +13,10 @@
       "nativewind": "^2.x.x",
       "react-native": ">=0.72.0",
       "expo": ">=52.0.0",
-      "react-native-reanimated": ">=3.16.0"
+      "react-native-reanimated": ">=3.16.0",
+      "expo-image": ">=2.0.6",
+      "clsx": "^2.1.1",
+      "tailwind-merge": "^3.0.2"
     },
     "devDependencies": {
       "typescript": "^5.0.0",

diff --git a/packages/expo/windy/src/components/.gitkeep b/packages/expo/windy/src/components/.gitkeep
diff --git a/packages/expo/windy/src/components/hero/WindyHero.tsx b/packages/expo/windy/src/components/hero/WindyHero.tsx
@@ -0,0 +1,50 @@
+import { View, Text } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { Image as ExpoImage } from 'expo-image';
+import { cn } from '../../utils/cn';
+import React from 'react';
+
+// Create an animated image component
+const AnimatedImage = Animated.createAnimatedComponent(ExpoImage);
+
+interface WindyHeroProps {
+  title: string;
+  subtitle?: string;
+  imageUrl: string;
+}
+
+export default function WindyHero({ title, subtitle, imageUrl }: WindyHeroProps) {
+  const opacity = React.useRef(useSharedValue(0)).current;
+
+  const animatedTextStyle = useAnimatedStyle(() => ({
+    opacity: withSpring(opacity.value, { damping: 10, stiffness: 100 }),
+  }));
+
+  React.useEffect(() => {
+    opacity.value = 1;
+  }, [opacity]);
+
+  return (
+    <View className={cn("relative w-full h-60 md:h-80 lg:h-96 overflow-hidden")}>
+
+      <AnimatedImage
+        source={{ uri: imageUrl }}
+        className={cn("absolute top-0 left-0 w-full h-full object-cover")}
+        contentFit="cover"
+      />
+
+      <View className={cn("absolute inset-0 flex items-center justify-center px-4")}>
+        <Animated.View style={animatedTextStyle}>
+          <Text className={cn("text-white text-2xl md:text-4xl font-bold text-center")}>
+            {title}
+          </Text>
+          {subtitle && (
+            <Text className={cn("text-white text-lg md:text-2xl mt-2 text-center")}>
+              {subtitle}
+            </Text>
+          )}
+        </Animated.View>
+      </View>
+    </View>
+  );
+}
diff --git a/packages/expo/windy/src/index.ts b/packages/expo/windy/src/index.ts
@@ -0,0 +1,2 @@
+export { default as WindyHero } from "./components/hero/WindyHero";
+export { cn } from "./utils/cn";
diff --git a/packages/expo/windy/src/utils/cn.ts b/packages/expo/windy/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as WindyHero } from "./components/hero/WindyHero";
		export { cn } from "./utils/cn";