lucy-cli 2.0.0-beta.3 → 2.0.0-beta.6

package/files/templates/expo verse[D]/files/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = function(api) {
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+	api.cache(true);
+
+	return {
+		presets: [['babel-preset-expo', {
+			jsxImportSource: 'nativewind'
+		}], 'nativewind/babel'],
+	};
+};

package/files/templates/expo verse[D]/files/components/MainScreen.tsx

@@ -0,0 +1,299 @@
+import { Effect } from 'effect';
+import * as Haptics from 'expo-haptics';
+import { useEffect, useRef, useState } from 'react';
+import { Animated, AppState, AppStateStatus, ImageBackground, PanResponder, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import colors from 'tailwindcss/colors';
+
+import { DATA_REFRESH_DELAY, MIN_PULL_DISTANCE_THRESHOLD, PULL_BACK_DURATION, PULL_DISTANCE_THRESHOLD } from '@/constants/config';
+import { getContent } from '@/lib/content';
+import { shareCurrentScreen } from '@/lib/utils/screenshot';
+
+import Share from './Share';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type EffectReturnSuccessType<T extends (...args: any[]) => Effect.Effect<any, any, any>> = Effect.Effect.Success<ReturnType<T>>;
+
+/**
+ * Main screen of the app.
+ * @returns The main screen of the app.
+ */
+export default function MainScreen() {
+	const insets = useSafeAreaInsets();
+	const [quote, setQuote] = useState<EffectReturnSuccessType<typeof getContent> | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);	
+	const appState = useRef(AppState.currentState);
+	const fadeAnim = useRef(new Animated.Value(0)).current;
+	const [isCapturing, setIsCapturing] = useState(false);
+	const hasTriggeredThresholdRef = useRef(false);
+	const pullDirectionRef = useRef<'up' | 'down' | null>(null);
+	const quoteRef = useRef<EffectReturnSuccessType<typeof getContent> | null>(null);
+	const fadeValueRef = useRef(0);
+	useEffect(() => {
+		quoteRef.current = quote;
+	}, [quote]);
+	useEffect(() => {
+		const id = fadeAnim.addListener(({ value }) => {
+			fadeValueRef.current = typeof value === 'number' ? value : Number(value);
+		});
+		
+		return () => {
+			fadeAnim.removeListener(id);
+		};
+	}, [fadeAnim]);
+	
+	// Pull feedback state
+	const [pullDirection, setPullDirection] = useState<'up' | 'down' | null>(null);
+	const pullFeedbackOpacity = useRef(new Animated.Value(0)).current;
+	const animatedPullDistance = useRef(new Animated.Value(0)).current;
+	const panResponder = useRef(
+		PanResponder.create({
+			onStartShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponder: (event, gestureState) => Math.abs(gestureState.dy) > MIN_PULL_DISTANCE_THRESHOLD,
+			onPanResponderMove: (event, gestureState) => {
+				const { dy } = gestureState;
+				if(dy > 0) return;
+				if (Math.abs(dy) > MIN_PULL_DISTANCE_THRESHOLD) {
+					const direction = dy > 0 ? 'down' : 'up';
+					setPullDirection(direction);
+					pullDirectionRef.current = direction;
+					animatedPullDistance.setValue(Math.abs(dy));
+					// Animate feedback opacity based on pull distance with more subtle range
+					const opacity = Math.min(Math.abs(dy) / 80, 1); // Reduced from 100 to 80 for more responsive feel
+					Animated.timing(pullFeedbackOpacity, {
+						toValue: opacity,
+						duration: 0,
+						useNativeDriver: true,
+					}).start();
+				}
+				// Trigger once when crossing the threshold during this gesture
+				if (!hasTriggeredThresholdRef.current && Math.abs(dy) >= PULL_DISTANCE_THRESHOLD) {
+					hasTriggeredThresholdRef.current = true;
+					void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft);
+				}
+			},
+			onPanResponderRelease: (event, gestureState) => {
+				// Hide pull feedback
+				const releasedDirection: 'up' | 'down' = gestureState.dy > 0 ? 'down' : 'up';
+				const finalDirection = pullDirectionRef.current ?? releasedDirection;
+				setPullDirection(null);
+				if(finalDirection === 'down') return;
+
+				// Run slide-back and fade-out in parallel
+				Animated.parallel([
+					Animated.timing(animatedPullDistance, {
+						toValue: 0,
+						duration: PULL_BACK_DURATION,
+						useNativeDriver: true,
+					}),
+					Animated.timing(pullFeedbackOpacity, {
+						toValue: 0,
+						duration: PULL_BACK_DURATION,
+						useNativeDriver: true,
+					}),
+				]).start();
+				hasTriggeredThresholdRef.current = false;
+				pullDirectionRef.current = null;
+				
+				if ((finalDirection === 'up' || finalDirection === 'down') && (gestureState.dy <= -PULL_DISTANCE_THRESHOLD || gestureState.dy >= PULL_DISTANCE_THRESHOLD)) {
+					void Haptics.notificationAsync(
+						Haptics.NotificationFeedbackType.Success
+					);
+					void captureAndShare();
+				}
+			},
+		})
+	).current;
+
+	const captureAndShare = async () => {
+		if (!quoteRef.current) return;
+		// Hide overlay visuals immediately and cancel any running overlay animations
+		pullFeedbackOpacity.stopAnimation();
+		animatedPullDistance.stopAnimation();
+		pullFeedbackOpacity.setValue(0);
+		animatedPullDistance.setValue(0);
+		setIsCapturing(true);
+		try {
+			// Ensure quote is fully visible during capture
+			fadeAnim.stopAnimation();
+			fadeAnim.setValue(1);
+			// Wait a frame so UI updates are applied
+			await new Promise<void>((resolve) => requestAnimationFrame(() => setTimeout(() => resolve(), 16)));
+			await shareCurrentScreen(quoteRef.current?.Reference.trim() ?? '');
+		} finally {
+			// Keep quote fully visible; keep overlay suppressed for a moment to avoid flicker
+			fadeAnim.setValue(1);
+			pullFeedbackOpacity.setValue(0);
+			animatedPullDistance.setValue(0);
+			setTimeout(() => setIsCapturing(false), 200);
+		}
+	};
+
+	useEffect(() => {
+		const getQuoteForToday = async (isInitialLoad: boolean) => {
+			if (isInitialLoad) {
+				setIsLoading(true);
+			}
+			setError(null);
+
+			try {
+				const newQuote = await Effect.runPromise(getContent());
+				setQuote(newQuote);
+				// Start fade-in animation after quote is loaded
+				if (isInitialLoad) {
+					setTimeout(() => {
+						Animated.timing(fadeAnim, {
+							toValue: 1,
+							duration: 1500,
+							useNativeDriver: true,
+						}).start();
+					}, 500); // 1500ms delay before animation starts
+				}
+			} catch (e) {
+				// eslint-disable-next-line no-console
+				console.error('Failed to fetch or store quote:', e);
+				setError('Could not fetch a quote. Please try again later.');
+			} finally {
+				if (isInitialLoad) {
+					setIsLoading(false);
+				}
+			}
+		};
+		void getQuoteForToday(true);
+		const intervalId = setInterval(() => {
+			void getQuoteForToday(false);
+		}, DATA_REFRESH_DELAY);
+		
+		return () => clearInterval(intervalId);
+	}, [fadeAnim]);
+
+	useEffect(() => {
+		// Subscribe to app state changes
+		const appStateSubscription = AppState.addEventListener(
+			'change',
+			(nextAppState: AppStateStatus) => {
+				if (
+					appState.current.match(/inactive|background/) &&
+                    nextAppState === 'active'
+				) {
+					setTimeout(() => {
+						Animated.timing(fadeAnim, {
+							toValue: 1,
+							duration: 1500,
+							useNativeDriver: true,
+						}).start();
+					}, 500); //
+
+				}
+				if (appState.current.match(/active/) && nextAppState === 'background') {
+					Animated.timing(fadeAnim, {
+						toValue: 0,
+						duration: 0,
+						useNativeDriver: true,
+					}).start();
+				}
+				appState.current = nextAppState;
+			}
+		);
+
+		// Cleanup subscription on unmount
+		return () => {
+			appStateSubscription.remove();
+		};
+	}, [fadeAnim]);
+
+	return (
+		<ImageBackground
+			source={require('@/assets/images/background.png')}
+			style={styles.container}
+			resizeMode="cover"
+            
+		>
+			<View style={[styles.titleWrapper, { top: insets.top + 10 }]}>
+				<Text style={styles.titleText}>Daily Verse</Text>
+			</View>
+
+			<View style={styles.contentWrapper}>
+				{/* {isLoading && (
+					<Text style={styles.titleText}>Loading...</Text>
+				)}
+				{error && <Text style={styles.errorText}>{error}</Text>} */}
+				{!isLoading && !error && quote && (
+					<Animated.View style={[styles.quoteBox, { opacity: fadeAnim }]}>
+						<Text style={styles.quoteContent}>&quot;{quote.Verse}&quot;</Text>
+						<Text style={styles.quoteSource}>— {quote.Reference}</Text>
+					</Animated.View>
+				)}
+			</View>
+			
+			{/* Pull feedback overlay */}
+			<Share
+				pullDirection={pullDirection}
+				opacity={pullFeedbackOpacity}
+				animatedPullDistance={animatedPullDistance}
+				hidden={isCapturing}
+			/>
+			
+			{/* Gesture overlay to capture double taps and vertical pulls */}
+			<View style={styles.gestureOverlay} {...panResponder.panHandlers} />
+			
+		</ImageBackground>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: '#000',
+		height: '100%',
+		width: '100%',
+	},
+	gestureOverlay: {
+		position: 'absolute',
+		top: 0,
+		bottom: 0,
+		left: 0,
+		right: 0,
+		zIndex: 999,
+	},
+	titleWrapper: {
+		position: 'absolute',
+		left: 0,
+		right: 0,
+		alignItems: 'center',
+	},
+	titleText: {
+		color: colors.gray[900],
+		fontFamily: 'Playfair-Bold',
+		fontSize: 36,
+	},
+	contentWrapper: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		paddingHorizontal: 24,
+	},
+	quoteBox: {
+		gap: 20,
+		alignSelf: 'stretch',
+	},
+	quoteContent: {
+		fontSize: 24,
+		textAlign: 'center',
+		color: colors.gray[900],
+		lineHeight: 32,
+		fontFamily: 'Playfair-Regular',
+	},
+	quoteSource: {
+		fontSize: 16,
+		color: colors.gray[800],
+		textAlign: 'right',
+		fontFamily: 'Playfair-Bold',
+	},
+	errorText: {
+		textAlign: 'center',
+		color: colors.red[500],
+		fontSize: 18,
+	}
+});

package/files/templates/expo verse[D]/files/components/Share.tsx

@@ -0,0 +1,132 @@
+import AntDesign from '@expo/vector-icons/AntDesign';
+import React, { useEffect, useRef } from 'react';
+import { Animated, AppState, AppStateStatus, Dimensions, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { MAX_OVERLAY_HEIGHT } from '@/constants/config';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+/**
+ * Props for the PullFeedback component
+ */
+interface PullFeedbackProps {
+	pullDirection: 'up' | 'down' | null;
+	opacity: Animated.Value;
+    animatedPullDistance: Animated.Value;
+    hidden?: boolean;
+}
+
+/**
+ * PullFeedback component that shows a stretching semi-circle based on pull gestures
+ * @param props - The component props
+ * @param props.pullDirection - Direction of the pull ('up' or 'down')
+ * @param props.opacity - Animated opacity value
+ * @param props.animatedPullDistance - Optional animated distance value from parent for native-driven perf
+ * @param props.hidden - Whether to hide the component
+ * @returns The PullFeedback component
+ */
+export default function Share({ pullDirection, opacity, animatedPullDistance, hidden = false }: PullFeedbackProps) {
+	const insets = useSafeAreaInsets();
+
+	// Ensure hooks run consistently; default direction when inactive
+	const activeDirection = pullDirection ?? 'up';
+
+	// Fixed container height (revealed via sliding inner content)
+	const containerHeight = MAX_OVERLAY_HEIGHT + (activeDirection === 'up' ? insets.bottom : insets.top);
+
+	// Map distance -> visible height with rubber-band feel (approximation)
+	const visibleHeight = animatedPullDistance.interpolate({
+		inputRange: [0, 100, MAX_OVERLAY_HEIGHT],
+		outputRange: [0, MAX_OVERLAY_HEIGHT * 0.7, MAX_OVERLAY_HEIGHT],
+		extrapolate: 'clamp',
+	});
+
+	// base = containerHeight - visibleHeight
+	// up: translateY = base, down: translateY = -base
+	const base = Animated.subtract(containerHeight, visibleHeight);
+	const translateY = activeDirection === 'up' ? base : (Animated.multiply(base, -1) as unknown as Animated.AnimatedInterpolation<number>);
+
+	const topOffset = activeDirection === 'down' ? 0 : undefined;
+	const bottomOffset = activeDirection === 'up' ? 0 : undefined;
+	const bottomSafeArea = activeDirection === 'up' ? insets.bottom : 0;
+	const appState = useRef(AppState.currentState);
+
+	useEffect(() => {
+		// Subscribe to app state changes
+		const appStateSubscription = AppState.addEventListener(
+			'change',
+			(nextAppState: AppStateStatus) => {
+				if (appState.current.match(/active/) && nextAppState === 'inactive') {
+					animatedPullDistance.stopAnimation();
+					animatedPullDistance.setValue(0);
+					opacity.stopAnimation();
+					opacity.setValue(0);
+				}
+				appState.current = nextAppState;
+			}
+		);
+
+		// Cleanup subscription on unmount
+		return () => {
+			appStateSubscription.remove();
+		};
+	});
+	
+	return (
+		<Animated.View 
+			style={[
+				styles.container,
+				{
+					opacity: opacity.interpolate({
+						inputRange: [0, 1],
+						outputRange: [0, 0.6], // Reduced max opacity from 1 to 0.6
+					}),
+					top: topOffset,
+					bottom: bottomOffset,
+					height: containerHeight,
+					overflow: 'hidden',
+				}
+				,
+				// Force hide without interrupting animations
+				hidden && { opacity: 0 }
+			]}
+		>
+			<Animated.View
+				style={{
+					transform: [{ translateY }],
+				}}
+			>
+				<View style={[
+					styles.semiCircle,
+					{
+						width: screenWidth,
+						height: containerHeight,
+						borderTopLeftRadius: activeDirection === 'down' ? 0 : 35,
+						borderTopRightRadius: activeDirection === 'down' ? 0 : 35,
+						borderBottomLeftRadius: activeDirection === 'up' ? 0 : 35,
+						borderBottomRightRadius: activeDirection === 'up' ? 0 : 35,
+					}
+				]}>
+					<AntDesign name="sharealt" size={48} color="white" style={{ paddingBottom: bottomSafeArea }}/>
+				</View>
+			</Animated.View>
+		</Animated.View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute',
+		left: 0,
+		right: 0,
+		zIndex: 998, // Below gesture overlay but above content
+	},
+	semiCircle: {
+		backgroundColor: 'rgba(255, 255, 255, 0.3)',
+		borderWidth: 2,
+		borderColor: 'rgba(255, 255, 255, 0.5)',
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+});

package/files/templates/expo verse[D]/files/components/ui/dev.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+import { Effect } from 'effect';
+import * as BackgroundTask from 'expo-background-task';
+import { Button, View } from 'react-native';
+
+import { clearData, showData } from '@/lib';
+import { BACKGROUND_TASK_IDENTIFIER, ENABLE_DEV_TOOLS } from '@/constants/config';
+
+/**
+ * Development tools for the app.
+ * @returns The development tools for the app.
+ */
+export default function Dev() {
+	const isDev = ENABLE_DEV_TOOLS && __DEV__;
+	
+	return (
+		<View>
+			{isDev && (
+				<>
+					<Button
+						title="Run Background Task (Debug)"
+						onPress={() => {
+							BackgroundTask.triggerTaskWorkerForTestingAsync().catch(console.error);
+						}}
+					/>
+					<Button
+						title="Clear Storage (Debug)"
+						onPress={() => {
+							Effect.runPromise(clearData).catch(console.error);
+						}}
+					/>
+					<Button
+						title="Show Data (Debug)"
+						onPress={() => {
+							Effect.runPromise(showData).catch(console.error);
+						}}
+					/>
+					<Button
+						title="Clear Tasks (Debug)"
+						onPress={() => {
+							BackgroundTask.unregisterTaskAsync(BACKGROUND_TASK_IDENTIFIER).catch(console.error);
+						}}
+					/>
+				</>
+			)}		
+		</View>
+	);
+}

package/files/templates/expo verse[D]/files/constants/config.ts

@@ -0,0 +1,30 @@
+import { Schedule } from 'effect';
+import { RuntimeFiber } from 'effect/Fiber';
+import * as Application from 'expo-application';
+import { Dimensions, Platform } from 'react-native';
+
+import { Quote } from '@/models';
+
+const { height: screenHeight } = Dimensions.get('window');
+
+export const BASE_URL = new URL('https://static.we-host.ch/daily-verse');
+export const FALLBACK_QUOTE: Quote = { Reference: 'The Lord', Verse: 'The ways of the Lord are inscrutable.', Topic: 'Grace' };
+export const FALLBACK_LOCALE = 'en';
+export const STORAGE_KEY = 'quotes';
+export const STATE_KEY = 'state';
+export const HTTP_RETRY_POLICY = Schedule.fromDelays(50, 100, 200, 400, 800);
+export const backgroundTasks: RuntimeFiber<void, never>[] = [];
+export const BACKGROUND_TASK_IDENTIFIER = 'fetch-data-task';
+export const MINIMUM_INTERVAL = 60 * 24;
+export const DATA_REFRESH_DELAY = 60000;
+
+export const ENABLE_DEV_TOOLS = true;
+
+export const MAX_OVERLAY_HEIGHT = (screenHeight * 0.25); // 30% of screen height
+export const DOUBLE_TAP_DELAY_MS = 300;
+export const MIN_PULL_DISTANCE_THRESHOLD = 10;
+export const PULL_DISTANCE_THRESHOLD = MAX_OVERLAY_HEIGHT - 50;
+export const PULL_BACK_DURATION = 350;
+
+export const CACHE_CONTROL = 'max-age=43200';
+export const USER_AGENT = `EXPO_APPLICATION/${Application.applicationName}:${Application.nativeApplicationVersion} (${Platform.OS} BUILD/${Application.nativeBuildVersion})`;

package/files/templates/expo verse[D]/files/constants/theme.ts

@@ -0,0 +1,18 @@
+export const NAV_THEME = {
+	light: {
+		background: 'hsl(0 0% 100%)', // background
+		border: 'hsl(240 5.9% 90%)', // border
+		card: 'hsl(0 0% 100%)', // card
+		notification: 'hsl(0 84.2% 60.2%)', // destructive
+		primary: 'hsl(240 5.9% 10%)', // primary
+		text: 'hsl(240 10% 3.9%)', // foreground
+	},
+	dark: {
+		background: 'hsl(240 10% 3.9%)', // background
+		border: 'hsl(240 3.7% 15.9%)', // border
+		card: 'hsl(240 10% 3.9%)', // card
+		notification: 'hsl(0 72% 51%)', // destructive
+		primary: 'hsl(0 0% 98%)', // primary
+		text: 'hsl(0 0% 98%)', // foreground
+	},
+};