lucy-cli 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/init.js

@@ -166,13 +166,13 @@ const init_expo = () => {
         const resolutions = {
             "@wix/sdk@1.15.24": "patch:@wix/sdk@npm:1.15.24#./patches/@wix-sdk-npm-1.15.24-1adbec98e9.patch",
         };
-        const yarn = Command.make("yarn", "add", "nativewind", "react-native-reanimated@~3.17.4", "react-native-safe-area-context@5.4.0", "@wix/sdk@1.15.24", "@wix/data", "expo-standard-web-crypto", "effect", "node-libs-react-native", "util", "events").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
+        const yarn = Command.make("yarn", "add", "nativewind", "react-native-reanimated@~3.17.4", "react-native-safe-area-context@5.4.0", "@wix/sdk@1.15.24", "@wix/data", "expo-standard-web-crypto", "effect", "node-libs-react-native", "util", "events", "tailwindcss-animate").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
         Command.exitCode // Get the exit code
         );
         const yarnDev = Command.make("yarn", "add", "--dev", "tailwindcss@^3.4.17", "prettier-plugin-tailwindcss@^0.5.11", "@styled/typescript-styled-plugin", "typescript-eslint-language-service", "eslint-config-prettier", "eslint-plugin-jsdoc", "eslint-plugin-named-import-spacing", "eslint-plugin-only-warn", "eslint-plugin-react", "eslint-plugin-react-hooks", "eslint-plugin-simple-import-sort", "@next/eslint-plugin-next", "@styled/typescript-styled-plugin", "@stylelint/postcss-css-in-js", "@typescript-eslint/parser", "typescript-eslint", "typescript-eslint-language-service", "@total-typescript/ts-reset", "expo-doctor", "tsx").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
         Command.exitCode // Get the exit code
         );
-        const npx = Command.make("npx", "expo", "install", "tailwindcss-animate", "class-variance-authority", "clsx", "tailwind-merge", "expo-crypto").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
+        const npx = Command.make("npx", "expo", "install", "tailwindcss-animate", "class-variance-authority", "clsx", "tailwind-merge", "expo-crypto", "react-dom", "react-native-web", "@expo/metro-runtime", "expo-system-ui").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
         Command.exitCode // Get the exit code
         );
         const projectName = config.config.cwd.split('/').pop() || 'expo-project';
@@ -194,7 +194,7 @@ const init_expo = () => {
         if (nonGitFiles.length > 0)
             return yield* Effect.logError("The current directory is not empty. Please run this command in an empty directory.");
         if (!expoAppReady) {
-            const initExpo = Command.make("npx", "create-expo-app@latest", projectName).pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
+            const initExpo = Command.make("npx", "create-expo-app@latest", projectName, "--template", "blank-typescript", "--no-install").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
             Command.exitCode // Get the exit code
             );
             yield* initExpo;
@@ -205,12 +205,12 @@ const init_expo = () => {
         }
         if (lucyInitialized)
             return yield* Effect.logError("Lucy is already initialized in this project. Please run this command in an empty directory.");
-        console.log("Expo project initialized with app.json:", projectName);
         const baseFiles = yield* fs.readDirectory(config.config.filesFolder + '/expo');
         yield* Effect.forEach(baseFiles, (file) => fs.copy(path.join(config.config.filesFolder, 'expo', file), path.join(config.config.cwd, file), { overwrite: true }));
-        let res = yield* npx;
-        res = yield* yarn;
+        let res = yield* yarn;
         res = yield* yarnDev;
+        console.log("🐕 " + 'npx');
+        res = yield* npx;
         if (res !== 0) {
             return yield* Effect.logError("Failed to install Expo dependencies. Please check the error message above.");
         }
@@ -222,12 +222,15 @@ const init_expo = () => {
             "web": "expo start --web",
             "reset": "tsx ./scripts/reset-project.ts",
             "format": "prettier --write \"./*.json\" \"**/*.{ts,tsx,md,json,jsonc,json5}\"",
+            "prebuild": "expo prebuild",
+            "pods": "npx pod-install",
             "build:dev": "eas build --local --profile development",
-            "build:sim": "eas build --local --profile simulator",
+            "build:sim": "eas build --local --profile ios-simulator",
             "build:prev": "eas build --local --profile preview",
             "build:prod": "eas build --local --profile production",
             "build:web": "expo export --platform web",
-            "doctor": "expo-doctor"
+            "doctor": "expo-doctor",
+            "eas-build-pre-install": "corepack enable && yarn set version 4"
         };
         const packageJsonPath = path.join(config.config.cwd, "package.json");
         const packageJsonRaw = yield* fs.readFile(packageJsonPath);

package/files/expo/index.ts

@@ -0,0 +1,11 @@
+import '@/global.css';
+import '@/lib/utils/polyfills';
+
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/files/expo/metro.config.js

@@ -13,19 +13,22 @@ const config = (() => {
 	config.resolver = {
 		...resolver,
 	};
+	
+	config.resolver.unstable_enablePackageExports = false;
+
 	config.resolver.extraNodeModules = {
 		...config.resolver.extraNodeModules,
 		...require('node-libs-react-native'),
-		'node:buffer': require.resolve('buffer/'),
-		'node:crypto': require.resolve('react-native-crypto/'),
-		'node:util': require.resolve('util/'),
-		'node:http': require.resolve('stream-http/'),
-		'node:https': require.resolve('https-browserify/'),
-		'node:events': require.resolve('events/'),
+		// 'node:buffer': require.resolve('buffer/'),
+		// 'node:crypto': require.resolve('react-native-crypto/'),
+		// 'node:util': require.resolve('util/'),
+		// 'node:http': require.resolve('stream-http/'),
+		// 'node:https': require.resolve('https-browserify/'),
+		// 'node:events': require.resolve('events/'),
 	};
 	
 	return config;
 })();
-// console.log('Using Metro config:', JSON.stringify(config, null, 2));
+console.log('Using Metro config:', JSON.stringify(config, null, 2));
 module.exports = withNativeWind(config, { input: './global.css' });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "lucy-cli",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Lucy Framework for WIX Studio Editor",
   "main": ".dist/index.js",
   "scripts": {

package/src/init.ts

@@ -211,6 +211,7 @@ const init_expo = () => {
                 "node-libs-react-native",
                 "util",
                 "events",
+                "tailwindcss-animate",
             ).pipe(
             Command.stdout("inherit"), // Stream stdout to process.stdout
             Command.exitCode // Get the exit code
@@ -254,6 +255,10 @@ const init_expo = () => {
                 "clsx",
                 "tailwind-merge",
                 "expo-crypto",
+                "react-dom", 
+                "react-native-web", 
+                "@expo/metro-runtime",
+                "expo-system-ui"
             ).pipe(
                 Command.stdout("inherit"), // Stream stdout to process.stdout
                 Command.exitCode // Get the exit code
@@ -281,7 +286,7 @@ const init_expo = () => {
         if(nonGitFiles.length > 0) return yield* Effect.logError("The current directory is not empty. Please run this command in an empty directory.");
     
         if(!expoAppReady) {
-            const initExpo = Command.make("npx", "create-expo-app@latest", projectName).pipe(
+            const initExpo = Command.make("npx", "create-expo-app@latest", projectName, "--template", "blank-typescript", "--no-install").pipe(
                 Command.stdout("inherit"), // Stream stdout to process.stdout
                 Command.exitCode // Get the exit code
             )
@@ -299,17 +304,16 @@ const init_expo = () => {
         }            
         if(lucyInitialized) return yield* Effect.logError("Lucy is already initialized in this project. Please run this command in an empty directory.");
 
-        console.log("Expo project initialized with app.json:", projectName);
-
         const baseFiles = yield* fs.readDirectory(config.config.filesFolder + '/expo')
         yield* Effect.forEach(
             baseFiles,
             (file) => fs.copy(path.join(config.config.filesFolder, 'expo', file), path.join(config.config.cwd, file), { overwrite: true })
         )
 
-        let res = yield* npx
-        res = yield* yarn
+        let res = yield* yarn
         res = yield* yarnDev
+        console.log("🐕 " + 'npx');
+        res = yield* npx
 
         if (res !== 0) {
             return yield* Effect.logError("Failed to install Expo dependencies. Please check the error message above.");
@@ -323,12 +327,15 @@ const init_expo = () => {
             "web": "expo start --web",
             "reset": "tsx ./scripts/reset-project.ts",
             "format": "prettier --write \"./*.json\" \"**/*.{ts,tsx,md,json,jsonc,json5}\"",
+            "prebuild": "expo prebuild",
+            "pods": "npx pod-install",
             "build:dev": "eas build --local --profile development",
-            "build:sim": "eas build --local --profile simulator",
+            "build:sim": "eas build --local --profile ios-simulator",
             "build:prev": "eas build --local --profile preview",
             "build:prod": "eas build --local --profile production",
             "build:web": "expo export --platform web",
-            "doctor": "expo-doctor"
+            "doctor": "expo-doctor",
+            "eas-build-pre-install": "corepack enable && yarn set version 4"
         }
 
         const packageJsonPath = path.join(config.config.cwd, "package.json")

package/files/expo/app/(tabs)/_layout.tsx

@@ -1,50 +0,0 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
-import { Platform } from 'react-native';
-
-import { HapticTab } from '@/components/HapticTab';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import TabBarBackground from '@/components/ui/TabBarBackground.ios';
-import { colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorSchemeRN';
-
-/**
- * Renders the tab layout for the application.
- * This includes the home and explore tabs with haptic feedback on press.
- *  @returns The tab layout component.
- */
-export default function TabLayout() {
-	const colorScheme = useColorScheme();
-
-	return (
-		<Tabs
-			screenOptions={{
-				tabBarActiveTintColor: colors[colorScheme ?? 'light'].tint,
-				headerShown: false,
-				tabBarButton: HapticTab,
-				tabBarBackground: TabBarBackground,
-				tabBarStyle: Platform.select({
-					ios: {
-						// Use a transparent background on iOS to show the blur effect
-						position: 'absolute',
-					},
-					default: {},
-				}),
-			}}>
-			<Tabs.Screen
-				name="index"
-				options={{
-					title: 'Home',
-					tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
-				}}
-			/>
-			<Tabs.Screen
-				name="explore"
-				options={{
-					title: 'Explore',
-					tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
-				}}
-			/>
-		</Tabs>
-	);
-}

package/files/expo/app/(tabs)/explore.tsx

@@ -1,114 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-
-/**
- *  Renders the Explore screen with various examples and explanations of features.
- * @returns The Explore screen component.
- */
-export default function TabTwoScreen() {
-	return (
-		<ParallaxScrollView
-			headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-			headerImage={
-				<IconSymbol
-					size={310}
-					color="#808080"
-					name="chevron.left.forwardslash.chevron.right"
-					style={styles.headerImage}
-				/>
-			}>
-			<ThemedView style={styles.titleContainer}>
-				<ThemedText type="title">Explore</ThemedText>
-			</ThemedView>
-			<ThemedText>This app includes example code to help you get started.</ThemedText>
-			<Collapsible title="File-based routing">
-				<ThemedText>
-          This app has two screens:{' '}
-					<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-					<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-				</ThemedText>
-				<ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-				</ThemedText>
-				<ExternalLink href="https://docs.expo.dev/router/introduction">
-					<ThemedText type="link">Learn more</ThemedText>
-				</ExternalLink>
-			</Collapsible>
-			<Collapsible title="Android, iOS, and web support">
-				<ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-					<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-				</ThemedText>
-			</Collapsible>
-			<Collapsible title="Images">
-				<ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-					<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-				</ThemedText>
-				<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
-				<ExternalLink href="https://reactnative.dev/docs/images">
-					<ThemedText type="link">Learn more</ThemedText>
-				</ExternalLink>
-			</Collapsible>
-			<Collapsible title="Custom fonts">
-				<ThemedText>
-          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
-					<ThemedText style={{ fontFamily: 'SpaceMono' }}>
-            custom fonts such as this one.
-					</ThemedText>
-				</ThemedText>
-				<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
-					<ThemedText type="link">Learn more</ThemedText>
-				</ExternalLink>
-			</Collapsible>
-			<Collapsible title="Light and dark mode components">
-				<ThemedText>
-          This template has light and dark mode support. The{' '}
-					<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-				</ThemedText>
-				<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-					<ThemedText type="link">Learn more</ThemedText>
-				</ExternalLink>
-			</Collapsible>
-			<Collapsible title="Animations">
-				<ThemedText>
-          This template includes an example of an animated component. The{' '}
-					<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
-          library to create a waving hand animation.
-				</ThemedText>
-				{Platform.select({
-					ios: (
-						<ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-						</ThemedText>
-					),
-				})}
-			</Collapsible>
-		</ParallaxScrollView>
-	);
-}
-
-const styles = StyleSheet.create({
-	headerImage: {
-		color: '#808080',
-		bottom: -90,
-		left: -35,
-		position: 'absolute',
-	},
-	titleContainer: {
-		flexDirection: 'row',
-		gap: 8,
-	},
-});

package/files/expo/app/(tabs)/index.tsx

@@ -1,80 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-/**
- * Home screen component.
- * This screen serves as the landing page for the app,
- * @returns The home screen component.
- */
-export default function HomeScreen() {
-	return (
-		<ParallaxScrollView
-			headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-			headerImage={
-				<Image
-					source={require('@/assets/images/partial-react-logo.png')}
-					style={styles.reactLogo}
-				/>
-			}>
-			<ThemedView style={styles.titleContainer}>
-				<ThemedText type="title">Welcome!</ThemedText>
-				<HelloWave />
-			</ThemedView>
-			<ThemedView style={styles.stepContainer}>
-				<ThemedText type="subtitle">Step 1: Try it</ThemedText>
-				<ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-					<ThemedText type="defaultSemiBold">
-						{Platform.select({
-							ios: 'cmd + d',
-							android: 'cmd + m',
-							web: 'F12',
-						})}
-					</ThemedText>{' '}
-          to open developer tools.
-				</ThemedText>
-			</ThemedView>
-			<ThemedView style={styles.stepContainer}>
-				<ThemedText type="subtitle">Step 2: Explore</ThemedText>
-				<ThemedText>
-					{`Tap the Explore tab to learn more about what's included in this starter app.`}
-				</ThemedText>
-			</ThemedView>
-			<ThemedView style={styles.stepContainer}>
-				<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-				<ThemedText>
-					{`When you're ready, run `}
-					<ThemedText type="defaultSemiBold">yarn reset-project</ThemedText> to get a fresh{' '}
-					<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-					<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-					<ThemedText type="defaultSemiBold">app-example</ThemedText>.
-				</ThemedText>
-			</ThemedView>
-		</ParallaxScrollView>
-	);
-}
-
-const styles = StyleSheet.create({
-	titleContainer: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		gap: 8,
-	},
-	stepContainer: {
-		gap: 8,
-		marginBottom: 8,
-	},
-	reactLogo: {
-		height: 178,
-		width: 290,
-		bottom: 0,
-		left: 0,
-		position: 'absolute',
-	},
-});

package/files/expo/app/+not-found.tsx

@@ -1,37 +0,0 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-/**
- * Renders a not found screen when a route does not exist.
- * This screen provides a link to navigate back to the home screen.
- * @returns The not found screen component.
- */
-export default function NotFoundScreen() {
-	return (
-		<>
-			<Stack.Screen options={{ title: 'Oops!' }} />
-			<ThemedView style={styles.container}>
-				<ThemedText type="title">This screen does not exist.</ThemedText>
-				<Link href="/" style={styles.link}>
-					<ThemedText type="link">Go to home screen!</ThemedText>
-				</Link>
-			</ThemedView>
-		</>
-	);
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
-		padding: 20,
-	},
-	link: {
-		marginTop: 15,
-		paddingVertical: 15,
-	},
-});

package/files/expo/app/_layout.tsx

@@ -1,54 +0,0 @@
-import '@/global.css';
-import '@/lib/utils/polyfills';
-
-import { DarkTheme, DefaultTheme, Theme, ThemeProvider } from '@react-navigation/native';
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-import { NAV_THEME } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-const LIGHT_THEME: Theme = {
-	...DefaultTheme,
-	colors: NAV_THEME.light,
-};
-const DARK_THEME: Theme = {
-	...DarkTheme,
-	colors: NAV_THEME.dark,
-};
-export { ErrorBoundary } from 'expo-router';
-/**
- * Root layout component for the application.
- * This component sets up the theme provider and status bar style based on the user's color scheme preference
- * @returns The root layout component.
- */
-export default function RootLayout() {
-	const hasMounted = React.useRef(false);
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { colorScheme, isDarkColorScheme } = useColorScheme();
-	const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
-	useIsomorphicLayoutEffect(() => {
-		if (hasMounted.current) {
-			return;
-		}
-		if (Platform.OS === 'web') {
-			// Adds the background color to the html element to prevent white background on overscroll.
-			document.documentElement.classList.add('bg-background');
-		}
-		setIsColorSchemeLoaded(true);
-		hasMounted.current = true;
-	}, []);
-	if (!isColorSchemeLoaded) {
-		return null;
-	}
-	
-	return (
-		<ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-			<StatusBar style={isDarkColorScheme ? 'light' : 'dark'} />
-			<Stack />
-		</ThemeProvider>
-	);
-}
-const useIsomorphicLayoutEffect = Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;

package/files/expo/components/Collapsible.tsx

@@ -1,52 +0,0 @@
-import { PropsWithChildren, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import { colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-/**
- * Renders a collapsible section with a heading and content.
- * @param root0 - The props for the collapsible component.
- * @param root0.children - The content to display when the section is expanded.
- * @param root0.title - The title of the collapsible section.
- * @returns The collapsible component.
- */
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
-	const [isOpen, setIsOpen] = useState(false);
-	const theme = useColorScheme() ?? 'light';
-
-	return (
-		<ThemedView>
-			<TouchableOpacity
-				style={styles.heading}
-				onPress={() => setIsOpen((value) => !value)}
-				activeOpacity={0.8}>
-				<IconSymbol
-					name="chevron.right"
-					size={18}
-					weight="medium"
-					color={theme === 'light' ? colors.light.icon : colors.dark.icon}
-					style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
-				/>
-
-				<ThemedText type="defaultSemiBold">{title}</ThemedText>
-			</TouchableOpacity>
-			{isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
-		</ThemedView>
-	);
-}
-
-const styles = StyleSheet.create({
-	heading: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		gap: 6,
-	},
-	content: {
-		marginTop: 6,
-		marginLeft: 24,
-	},
-});

package/files/expo/components/ExternalLink.tsx

@@ -1,32 +0,0 @@
-import { Href, Link } from 'expo-router';
-import { openBrowserAsync } from 'expo-web-browser';
-import { type ComponentProps } from 'react';
-import { Platform } from 'react-native';
-
-type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
-
-/**
- * Renders an external link that opens in an in-app browser on native platforms.
- * @param root0 - The props for the external link component.
- * @param root0.href - The URL to link to.
- * @param root0.rest - Additional props for the link component.
- * @returns The external link component.
- */
-export function ExternalLink({ href, ...rest }: Props) {
-	return (
-		<Link
-			target="_blank"
-			{...rest}
-			href={href}
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			onPress={async (event) => {
-				if (Platform.OS !== 'web') {
-					// Prevent the default behavior of linking to the default browser on native.
-					event.preventDefault();
-					// Open the link in an in-app browser.
-					await openBrowserAsync(href);
-				}
-			}}
-		/>
-	);
-}

package/files/expo/components/HapticTab.tsx

@@ -1,24 +0,0 @@
-import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
-import { PlatformPressable } from '@react-navigation/elements';
-import * as Haptics from 'expo-haptics';
-
-/**
- * Renders a tab button with haptic feedback on press.
- * @param props - The props for the tab button.
- * @returns The tab button component with haptic feedback.
- */
-export function HapticTab(props: BottomTabBarButtonProps) {
-	return (
-		<PlatformPressable
-			{...props}
-			onPressIn={(ev) => {
-				if (process.env.EXPO_OS === 'ios') {
-					// Add a soft haptic feedback when pressing down on the tabs.
-					// eslint-disable-next-line @typescript-eslint/no-floating-promises
-					Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-				}
-				props.onPressIn?.(ev);
-			}}
-		/>
-	);
-}

package/files/expo/components/HelloWave.tsx

@@ -1,35 +0,0 @@
-import { useEffect } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
-
-import { ThemedText } from '@/components/ThemedText';
-
-/** Renders an animated waving hand emoji. */
-export function HelloWave() {
-	const rotationAnimation = useSharedValue(0);
-
-	useEffect(() => {
-		rotationAnimation.value = withRepeat(
-			withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
-			4 // Run the animation 4 times
-		);
-	}, [rotationAnimation]);
-
-	const animatedStyle = useAnimatedStyle(() => ({
-		transform: [{ rotate: `${rotationAnimation.value}deg` }],
-	}));
-
-	return (
-		<Animated.View style={animatedStyle}>
-			<ThemedText style={styles.text}>👋</ThemedText>
-		</Animated.View>
-	);
-}
-
-const styles = StyleSheet.create({
-	text: {
-		fontSize: 28,
-		lineHeight: 32,
-		marginTop: -6,
-	},
-});

package/files/expo/components/ParallaxScrollView.tsx

@@ -1,85 +0,0 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useScrollViewOffset } from 'react-native-reanimated';
-
-import { ThemedView } from '@/components/ThemedView';
-import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-const HEADER_HEIGHT = 250;
-
-type Props = PropsWithChildren<{
-  headerImage: ReactElement;
-  headerBackgroundColor: { dark: string; light: string };
-}>;
-
-/**
- * Renders a parallax scroll view with a header image and background color.
- * @param root0 - The props for the ParallaxScrollView component.
- * @param root0.children - The content to display within the scroll view.
- * @param root0.headerImage - The image to display in the header, which will have a parallax effect.
- * @param root0.headerBackgroundColor - The background color for the header, which changes based on the color scheme.
- * @returns The ParallaxScrollView component.
- */
-export default function ParallaxScrollView({
-	children,
-	headerImage,
-	headerBackgroundColor,
-}: Props) {
-	const colorScheme = useColorScheme() ?? 'light';
-	const scrollRef = useAnimatedRef<Animated.ScrollView>();
-	const scrollOffset = useScrollViewOffset(scrollRef);
-	const bottom = useBottomTabOverflow();
-	const headerAnimatedStyle = useAnimatedStyle(() => {
-		return {
-			transform: [
-				{
-					translateY: interpolate(
-						scrollOffset.value,
-						[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-						[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
-					),
-				},
-				{
-					scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
-				},
-			],
-		};
-	});
-
-	return (
-		<ThemedView style={styles.container}>
-			<Animated.ScrollView
-				ref={scrollRef}
-				scrollEventThrottle={16}
-				scrollIndicatorInsets={{ bottom }}
-				contentContainerStyle={{ paddingBottom: bottom }}>
-				<Animated.View
-					style={[
-						styles.header,
-						{ backgroundColor: headerBackgroundColor[colorScheme] },
-						headerAnimatedStyle,
-					]}>
-					{headerImage}
-				</Animated.View>
-				<ThemedView style={styles.content}>{children}</ThemedView>
-			</Animated.ScrollView>
-		</ThemedView>
-	);
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-	header: {
-		height: HEADER_HEIGHT,
-		overflow: 'hidden',
-	},
-	content: {
-		flex: 1,
-		padding: 32,
-		gap: 16,
-		overflow: 'hidden',
-	},
-});

package/files/expo/components/ThemedText.tsx

@@ -1,70 +0,0 @@
-import { StyleSheet, Text, type TextProps } from 'react-native';
-
-import { useThemeColor } from '@/hooks/useThemeColor';
-
-export type ThemedTextProps = TextProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
-};
-
-/**
- * Renders themed text with different styles based on the type and color scheme.
- * @param root0 - The props for the themed text component.
- * @param root0.style - Additional styles to apply to the text.
- * @param root0.lightColor - The color to use in light mode.
- * @param root0.darkColor - The color to use in dark mode.
- * @param root0.type - The type of text to render, which determines the style.
- * @param root0.rest - Additional props for the text component.
- * @returns The themed text component.
- */
-export function ThemedText({
-	style,
-	lightColor,
-	darkColor,
-	type = 'default',
-	...rest
-}: ThemedTextProps) {
-	const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
-
-	return (
-		<Text
-			style={[
-				{ color },
-				type === 'default' ? styles.default : undefined,
-				type === 'title' ? styles.title : undefined,
-				type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
-				type === 'subtitle' ? styles.subtitle : undefined,
-				type === 'link' ? styles.link : undefined,
-				style,
-			]}
-			{...rest}
-		/>
-	);
-}
-
-const styles = StyleSheet.create({
-	default: {
-		fontSize: 16,
-		lineHeight: 24,
-	},
-	defaultSemiBold: {
-		fontSize: 16,
-		lineHeight: 24,
-		fontWeight: '600',
-	},
-	title: {
-		fontSize: 32,
-		fontWeight: 'bold',
-		lineHeight: 32,
-	},
-	subtitle: {
-		fontSize: 20,
-		fontWeight: 'bold',
-	},
-	link: {
-		lineHeight: 30,
-		fontSize: 16,
-		color: '#0a7ea4',
-	},
-});

package/files/expo/components/ThemedView.tsx

@@ -1,23 +0,0 @@
-import { View, type ViewProps } from 'react-native';
-
-import { useThemeColor } from '@/hooks/useThemeColor';
-
-export type ThemedViewProps = ViewProps & {
-  lightColor?: string;
-  darkColor?: string;
-};
-
-/**
- * Renders a themed view with a background color based on the color scheme.
- * @param root0 - The props for the themed view component.
- * @param root0.style - Additional styles to apply to the view.
- * @param root0.lightColor - The color to use in light mode.
- * @param root0.darkColor - The color to use in dark mode.  
- * @param root0.rest - Additional props for the view component.
- * @returns The themed view component.
- */
-export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
-	const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
-
-	return <View style={[{ backgroundColor }, style]} {...otherProps} />;
-}

package/files/expo/components/ui/IconSymbol.ios.tsx

@@ -1,32 +0,0 @@
-import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
-import { StyleProp, ViewStyle } from 'react-native';
-
-export function IconSymbol({
-  name,
-  size = 24,
-  color,
-  style,
-  weight = 'regular',
-}: {
-  name: SymbolViewProps['name'];
-  size?: number;
-  color: string;
-  style?: StyleProp<ViewStyle>;
-  weight?: SymbolWeight;
-}) {
-  return (
-    <SymbolView
-      weight={weight}
-      tintColor={color}
-      resizeMode="scaleAspectFit"
-      name={name}
-      style={[
-        {
-          width: size,
-          height: size,
-        },
-        style,
-      ]}
-    />
-  );
-}

package/files/expo/components/ui/IconSymbol.tsx

@@ -1,41 +0,0 @@
-// Fallback for using MaterialIcons on Android and web.
-
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
-import { ComponentProps } from 'react';
-import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
-
-type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
-type IconSymbolName = keyof typeof MAPPING;
-
-/**
- * Add your SF Symbols to Material Icons mappings here.
- * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
- * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
- */
-const MAPPING = {
-  'house.fill': 'home',
-  'paperplane.fill': 'send',
-  'chevron.left.forwardslash.chevron.right': 'code',
-  'chevron.right': 'chevron-right',
-} as IconMapping;
-
-/**
- * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
- * This ensures a consistent look across platforms, and optimal resource usage.
- * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
- */
-export function IconSymbol({
-  name,
-  size = 24,
-  color,
-  style,
-}: {
-  name: IconSymbolName;
-  size?: number;
-  color: string | OpaqueColorValue;
-  style?: StyleProp<TextStyle>;
-  weight?: SymbolWeight;
-}) {
-  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
-}

package/files/expo/components/ui/TabBarBackground.ios.tsx

@@ -1,19 +0,0 @@
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-import { BlurView } from 'expo-blur';
-import { StyleSheet } from 'react-native';
-
-export default function BlurTabBarBackground() {
-  return (
-    <BlurView
-      // System chrome material automatically adapts to the system's theme
-      // and matches the native tab bar appearance on iOS.
-      tint="systemChromeMaterial"
-      intensity={100}
-      style={StyleSheet.absoluteFill}
-    />
-  );
-}
-
-export function useBottomTabOverflow() {
-  return useBottomTabBarHeight();
-}

package/files/expo/components/ui/TabBarBackground.tsx

@@ -1,6 +0,0 @@
-// This is a shim for web and Android where the tab bar is generally opaque.
-export default undefined;
-
-export function useBottomTabOverflow() {
-  return 0;
-}

package/files/expo/constants/Colors.ts

@@ -1,27 +0,0 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-const tintColorLight = '#0a7ea4';
-const tintColorDark = '#fff';
-
-export const colors = {
-	light: {
-		text: '#11181C',
-		background: '#fff',
-		tint: tintColorLight,
-		icon: '#687076',
-		tabIconDefault: '#687076',
-		tabIconSelected: tintColorLight,
-	},
-	dark: {
-		text: '#ECEDEE',
-		background: '#151718',
-		tint: tintColorDark,
-		icon: '#9BA1A6',
-		tabIconDefault: '#9BA1A6',
-		tabIconSelected: tintColorDark,
-	},
-};
-

package/files/expo/hooks/useColorScheme.web.ts

@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useColorScheme as useRNColorScheme } from 'react-native';
-
-/**
- * To support static rendering, this value needs to be re-calculated on the client side for web
- * This hook returns the color scheme after the component has mounted, ensuring that the initial render
- * does not depend on the color scheme.
- * @returns The current color scheme ('light' or 'dark') after hydration.
- */
-export function useColorScheme() {
-	const [hasHydrated, setHasHydrated] = useState(false);
-
-	useEffect(() => {
-		setHasHydrated(true);
-	}, []);
-
-	const colorScheme = useRNColorScheme();
-
-	if (hasHydrated) {
-		return colorScheme;
-	}
-
-	return 'light';
-}

package/files/expo/hooks/useColorSchemeRN.ts

@@ -1 +0,0 @@
-export { useColorScheme } from 'react-native';

package/files/expo/hooks/useThemeColor.ts

@@ -1,30 +0,0 @@
-/**
- * Learn more about light and dark modes:
- * https://docs.expo.dev/guides/color-schemes/
- */
-
-import { colors } from '@/constants/Colors';
-
-import { useColorScheme } from './useColorSchemeRN';
-
-/**
- * Returns the theme color based on the current color scheme and the provided color name.
- * @param props - An object containing light and dark color properties.
- * @param props.light - The color to use in light mode.
- * @param props.dark - The color to use in dark mode.
- * @param colorName - The name of the color to retrieve from the colors object.
- * @returns The color corresponding to the current color scheme.
- */
-export function useThemeColor(
-	props: { light?: string; dark?: string },
-	colorName: keyof typeof colors.light
-) {
-	const theme = useColorScheme() ?? 'light';
-	const colorFromProps = props[theme];
-
-	if (colorFromProps) {
-		return colorFromProps;
-	} else {
-		return colors[theme][colorName];
-	}
-}