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

package/files/expo/components/HelloWave.tsx

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,41 @@
+// 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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,6 @@
+// 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

@@ -6,22 +6,22 @@
 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,
-  },
+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/constants/theme.ts

@@ -1,18 +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
-    },
-  };
+	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
+	},
+};

package/files/expo/{eslint.config.js → eslint.config.mjs}

@@ -1,10 +1,8 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // https://docs.expo.dev/guides/using-eslint/
-const { defineConfig } = require('eslint/config');
-const expoConfig = require('eslint-config-expo/flat');
-
 import eslint from '@eslint/js';
+import expoConfig from 'eslint-config-expo/flat.js';
 // @ts-ignore
-import importPlugin from 'eslint-plugin-import';
 import jsdoc from 'eslint-plugin-jsdoc';
 import namedImportSpacing from 'eslint-plugin-named-import-spacing';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
@@ -13,31 +11,28 @@ import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
 	eslint.configs.recommended,
+	// eslint-disable-next-line import/no-named-as-default-member
 	tseslint.configs.recommendedTypeChecked,
 	jsdoc.configs['flat/recommended-typescript'],
-  expoConfig,
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	expoConfig,
 	{
 		ignores: ['dist/*'],
 	},
 	{
 		plugins: {
-			'@typescript-eslint': tseslint.plugin,
 			'simple-import-sort': simpleImportSort,
-			import: importPlugin,
 			'named-import-spacing': namedImportSpacing,
-			jsdoc,
 		},
 		settings: {
 			'import/resolver': {
 				typescript: {
-					project: [
-						'typescript/tsconfig.json',
-						'lib/tsconfig.json'
-					],
+					project: './tsconfig.json',
 				}
 			}
 		},
 		languageOptions: {
+			// eslint-disable-next-line import/no-named-as-default-member
 			parser: tseslint.parser,
 			parserOptions: {
 				projectService: true,
@@ -99,7 +94,7 @@ export default tseslint.config(
 			'no-multi-spaces': 'error',
 			'import/newline-after-import': ['error', { count: 1 }],
 			'named-import-spacing/named-import-spacing': 2,
-			'no-unused-vars': 'warn',
+			'@typescript-eslint/no-unused-vars': 'warn',
 			'import/no-unresolved': [0],
 			'no-forbidden-relative-imports': [0],
 			'@typescript-eslint/triple-slash-reference': 'off',
@@ -119,8 +114,13 @@ export default tseslint.config(
 			'@typescript-eslint/naming-convention': [
 				'error',
 				{
-					selector: ['variable', 'function'],
-					format: ['camelCase'],
+					selector: ['variable'],
+					format: ['camelCase', 'UPPER_CASE'],
+					leadingUnderscore: 'allow',
+				},
+				{
+					selector: ['function'],
+					format: ['camelCase', 'PascalCase'],
 					leadingUnderscore: 'allow',
 				},
 				{
@@ -175,10 +175,6 @@ export default tseslint.config(
 					selector: 'typeLike',
 					format: ['PascalCase'],
 				},
-				{
-					selector: 'function',
-					format: ['UPPER_CASE'],
-				},
 			],
 		},
 	},

package/files/expo/hooks/useColorScheme.ts

@@ -1,11 +1,17 @@
 import { useColorScheme as useNativewindColorScheme } from 'nativewind';
 
+/**
+ * Custom hook to get the current color scheme and provide methods to change it.
+ * This hook uses the nativewind's useColorScheme to access the color scheme.
+ * @returns An object containing the current color scheme, a method to set the color scheme,
+ */
 export function useColorScheme() {
-  const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme();
-  return {
-    colorScheme: colorScheme ?? 'dark',
-    isDarkColorScheme: colorScheme === 'dark',
-    setColorScheme,
-    toggleColorScheme,
-  };
+	const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme();
+	
+	return {
+		colorScheme: colorScheme ?? 'dark',
+		isDarkColorScheme: colorScheme === 'dark',
+		setColorScheme,
+		toggleColorScheme,
+	};
 }

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

@@ -3,19 +3,22 @@ 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);
+	const [hasHydrated, setHasHydrated] = useState(false);
 
-  useEffect(() => {
-    setHasHydrated(true);
-  }, []);
+	useEffect(() => {
+		setHasHydrated(true);
+	}, []);
 
-  const colorScheme = useRNColorScheme();
+	const colorScheme = useRNColorScheme();
 
-  if (hasHydrated) {
-    return colorScheme;
-  }
+	if (hasHydrated) {
+		return colorScheme;
+	}
 
-  return 'light';
+	return 'light';
 }

package/files/expo/hooks/useThemeColor.ts

@@ -3,19 +3,28 @@
  * https://docs.expo.dev/guides/color-schemes/
  */
 
-import { Colors } from '@/constants/Colors';
+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 & keyof typeof Colors.dark
+	props: { light?: string; dark?: string },
+	colorName: keyof typeof colors.light
 ) {
-  const theme = useColorScheme() ?? 'light';
-  const colorFromProps = props[theme];
+	const theme = useColorScheme() ?? 'light';
+	const colorFromProps = props[theme];
 
-  if (colorFromProps) {
-    return colorFromProps;
-  } else {
-    return Colors[theme][colorName];
-  }
+	if (colorFromProps) {
+		return colorFromProps;
+	} else {
+		return colors[theme][colorName];
+	}
 }

package/files/expo/lib/data.ts

@@ -1,45 +1,48 @@
 import { Effect, Schedule, Schema } from 'effect';
-import { client, ClientError } from './wixClient';
+
+import { client, ClientError } from './wix';
 
 const dataSchema = Schema.Struct({
-    source: Schema.String,
-    content: Schema.String,
-    _id: Schema.String,
-    _owner: Schema.String,
-    _createdDate: Schema.Any,
-    _updatedDate: Schema.Any,
+	source: Schema.String,
+	content: Schema.String,
+	_id: Schema.String,
+	_owner: Schema.String,
+	_createdDate: Schema.Any,
+	_updatedDate: Schema.Any,
 });
 
-const COLLECTION_NAME = "dailySpiritQuotes";
+const COLLECTION_NAME = 'dailySpiritQuotes';
 
 export const getQuote = () => Effect.gen(function* () {
-    const count = yield* Effect.retry(Effect.tryPromise({
-        try: () => client.items.query(COLLECTION_NAME).count(),
-        catch: (error) => {
-            console.error('Error fetching quotes:', error);
-            Effect.fail(new ClientError());
-        }
-    }), Schedule.fromDelays(50, 100, 200, 400, 800));
-
-    if (count === 0) {
-        return yield* Effect.fail(new Error("No quotes found in the collection."));
-    }
+	const count = yield* Effect.retry(Effect.tryPromise({
+		try: () => client.items.query(COLLECTION_NAME).count(),
+		catch: (error) => {
+			console.error('Error fetching quotes:', error);
+			Effect.fail(new ClientError());
+		}
+	}), Schedule.fromDelays(50, 100, 200, 400, 800));
+
+	if (count === 0) {
+		return yield* Effect.fail(new Error('No quotes found in the collection.'));
+	}
     
-    const randomIndex = Math.floor(Math.random() * count);
+	const randomIndex = Math.floor(Math.random() * count);
 
-    const data = yield* Effect.retry(Effect.tryPromise({
-        try: () => client.items.query(COLLECTION_NAME).skip(randomIndex).limit(1).find(),
-        catch: (error) => {
-            console.error('Error fetching quotes:', error);
-            Effect.fail(new ClientError());
-        }
-    }), Schedule.fromDelays(50, 100, 200, 400, 800));
+	const data = yield* Effect.retry(Effect.tryPromise({
+		try: () => client.items.query(COLLECTION_NAME).skip(randomIndex).limit(1).find(),
+		catch: (error) => {
+			console.error('Error fetching quotes:', error);
+			Effect.fail(new ClientError());
+		}
+	}), Schedule.fromDelays(50, 100, 200, 400, 800));
 
-    yield* Effect.logDebug(`Fetched ${JSON.stringify(data, null, 2)}`);
+	yield* Effect.logDebug(`Fetched ${JSON.stringify(data, null, 2)}`);
 
-    const quote = yield* Schema.decodeUnknown(dataSchema)(data.items[0]);
-    return { source: quote.source, content: quote.content }
+	const quote = yield* Schema.decodeUnknown(dataSchema)(data.items[0]);
+	
+	return { source: quote.source, content: quote.content };
 }).pipe(Effect.catchAll((error) => {
-    console.error('Failed to fetch quote:', error);
-    return Effect.succeed({ source: 'The Lord', content: 'The ways of the Lord are inscrutable.'});
-}))
+	console.error('Failed to fetch quote:', error);
+	
+	return Effect.succeed({ source: 'The Lord', content: 'The ways of the Lord are inscrutable.' });
+}));

package/files/expo/lib/utils/index.ts

@@ -1,6 +1,11 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
+/**
+ * Combines class names and merges Tailwind CSS classes.
+ * @param inputs - The class names to combine.
+ * @returns A string of combined class names.
+ */
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }