From 3870c20896608fd6d701d47944574e643d96c43e Mon Sep 17 00:00:00 2001 From: Pontus Abrahamsson <pontus@lostisland.co> Date: Fri, 27 Dec 2024 13:16:34 +0100 Subject: [PATCH] Format --- biome.json | 4 +- examples/android/locales/es.xml | 4 +- examples/expo/app.json | 2 +- examples/expo/app/(tabs)/_layout.tsx | 35 ++++---- examples/expo/app/(tabs)/explore.tsx | 82 ++++++++++++------- examples/expo/app/(tabs)/index.tsx | 48 ++++++----- examples/expo/app/+not-found.tsx | 14 ++-- examples/expo/app/_layout.tsx | 24 +++--- examples/expo/components/Collapsible.tsx | 32 ++++---- examples/expo/components/ExternalLink.tsx | 12 +-- examples/expo/components/HapticTab.tsx | 8 +- examples/expo/components/HelloWave.tsx | 15 ++-- .../expo/components/ParallaxScrollView.tsx | 32 +++++--- examples/expo/components/ThemedText.tsx | 28 +++---- examples/expo/components/ThemedView.tsx | 16 +++- .../components/__tests__/ThemedText-test.tsx | 10 ++- .../expo/components/ui/IconSymbol.ios.tsx | 8 +- examples/expo/components/ui/IconSymbol.tsx | 29 ++++--- .../components/ui/TabBarBackground.ios.tsx | 8 +- examples/expo/constants/Colors.ts | 20 ++--- examples/expo/hooks/useColorScheme.ts | 2 +- examples/expo/hooks/useColorScheme.web.ts | 6 +- examples/expo/hooks/useThemeColor.ts | 8 +- examples/expo/locales/i18n.ts | 14 ++-- examples/expo/scripts/reset-project.js | 2 +- examples/expo/tsconfig.json | 11 +-- examples/i18next/languine.config.ts | 2 +- packages/cli/package.json | 2 +- packages/cli/src/commands/init.ts | 26 +++--- packages/cli/src/presets/expo.ts | 1 + packages/cli/src/utils.ts | 4 +- 31 files changed, 286 insertions(+), 223 deletions(-) diff --git a/biome.json b/biome.json index 4258e45e..feb8e3b5 100644 --- a/biome.json +++ b/biome.json @@ -4,7 +4,7 @@ "enabled": true }, "linter": { - "ignore": ["node_modules"], + "ignore": ["node_modules", ".next", "*.json"], "enabled": true, "rules": { "recommended": true, @@ -22,6 +22,6 @@ }, "formatter": { "indentStyle": "space", - "ignore": ["test/resources", "test/snapshots"] + "ignore": ["test/resources", "test/snapshots", "*.json", ".next"] } } diff --git a/examples/android/locales/es.xml b/examples/android/locales/es.xml index e2200ffb..984fb510 100644 --- a/examples/android/locales/es.xml +++ b/examples/android/locales/es.xml @@ -41,8 +41,8 @@ <item quantity="other">%d canciones en cola</item> </plurals> <plurals name="notification_likes"> - <item quantity="one">A %d persona le gustó tu publicación</item> - <item quantity="other">A %d personas les gustó tu publicación</item> + <item quantity="one">%d persona le gustó tu publicación</item> + <item quantity="other">%d personas les gustó tu publicación</item> </plurals> <plurals name="game_achievements"> <item quantity="one">%d logro desbloqueado</item> diff --git a/examples/expo/app.json b/examples/expo/app.json index f715768c..eac238a1 100644 --- a/examples/expo/app.json +++ b/examples/expo/app.json @@ -46,4 +46,4 @@ "es": "./locales/native/es.json" } } -} \ No newline at end of file +} diff --git a/examples/expo/app/(tabs)/_layout.tsx b/examples/expo/app/(tabs)/_layout.tsx index cfbc1e23..f891b8b8 100644 --- a/examples/expo/app/(tabs)/_layout.tsx +++ b/examples/expo/app/(tabs)/_layout.tsx @@ -1,12 +1,12 @@ -import { Tabs } from 'expo-router'; -import React from 'react'; -import { Platform } from 'react-native'; +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'; -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; +import { HapticTab } from "@/components/HapticTab"; +import { IconSymbol } from "@/components/ui/IconSymbol"; +import TabBarBackground from "@/components/ui/TabBarBackground"; +import { Colors } from "@/constants/Colors"; +import { useColorScheme } from "@/hooks/useColorScheme"; export default function TabLayout() { const colorScheme = useColorScheme(); @@ -14,30 +14,35 @@ export default function TabLayout() { return ( <Tabs screenOptions={{ - tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint, + 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', + position: "absolute", }, default: {}, }), - }}> + }} + > <Tabs.Screen name="index" options={{ - title: 'Home', - tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />, + 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} />, + title: "Explore", + tabBarIcon: ({ color }) => ( + <IconSymbol size={28} name="paperplane.fill" color={color} /> + ), }} /> </Tabs> diff --git a/examples/expo/app/(tabs)/explore.tsx b/examples/expo/app/(tabs)/explore.tsx index 06e70c4f..bae8cb67 100644 --- a/examples/expo/app/(tabs)/explore.tsx +++ b/examples/expo/app/(tabs)/explore.tsx @@ -1,16 +1,16 @@ -import { StyleSheet, Image, Platform } from 'react-native'; +import { StyleSheet, Image, Platform } 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'; +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"; export default function TabTwoScreen() { return ( <ParallaxScrollView - headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }} + headerBackgroundColor={{ light: "#D0D0D0", dark: "#353636" }} headerImage={ <IconSymbol size={310} @@ -18,19 +18,24 @@ export default function TabTwoScreen() { 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> + <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{' '} + 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>{' '} + 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"> @@ -39,25 +44,31 @@ export default function TabTwoScreen() { </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. + 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 + 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' }} /> + <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' }}> + 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> @@ -67,9 +78,10 @@ export default function TabTwoScreen() { </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's current color scheme is, and so you can adjust UI colors accordingly. + This template has light and dark mode support. The{" "} + <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook + lets you inspect what the user'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> @@ -77,15 +89,23 @@ export default function TabTwoScreen() { </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>{' '} + 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>{' '} + The{" "} + <ThemedText type="defaultSemiBold"> + components/ParallaxScrollView.tsx + </ThemedText>{" "} component provides a parallax effect for the header image. </ThemedText> ), @@ -97,13 +117,13 @@ export default function TabTwoScreen() { const styles = StyleSheet.create({ headerImage: { - color: '#808080', + color: "#808080", bottom: -90, left: -35, - position: 'absolute', + position: "absolute", }, titleContainer: { - flexDirection: 'row', + flexDirection: "row", gap: 8, }, }); diff --git a/examples/expo/app/(tabs)/index.tsx b/examples/expo/app/(tabs)/index.tsx index 886b0796..4fab748e 100644 --- a/examples/expo/app/(tabs)/index.tsx +++ b/examples/expo/app/(tabs)/index.tsx @@ -1,20 +1,21 @@ -import { Image, StyleSheet, Platform } from 'react-native'; +import { Image, StyleSheet, Platform } from "react-native"; -import { HelloWave } from '@/components/HelloWave'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; +import { HelloWave } from "@/components/HelloWave"; +import ParallaxScrollView from "@/components/ParallaxScrollView"; +import { ThemedText } from "@/components/ThemedText"; +import { ThemedView } from "@/components/ThemedView"; export default function HomeScreen() { return ( <ParallaxScrollView - headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }} + headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }} headerImage={ <Image - source={require('@/assets/images/partial-react-logo.png')} + source={require("@/assets/images/partial-react-logo.png")} style={styles.reactLogo} /> - }> + } + > <ThemedView style={styles.titleContainer}> <ThemedText type="title">Welcome!</ThemedText> <HelloWave /> @@ -22,31 +23,34 @@ export default function HomeScreen() { <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{' '} + 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' + ios: "cmd + d", + android: "cmd + m", + web: "F12", })} - </ThemedText>{' '} + </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. + 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">npm run reset-project</ThemedText> to get a fresh{' '} - <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '} - <ThemedText type="defaultSemiBold">app</ThemedText> to{' '} + When you're ready, run{" "} + <ThemedText type="defaultSemiBold">npm run 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> @@ -56,8 +60,8 @@ export default function HomeScreen() { const styles = StyleSheet.create({ titleContainer: { - flexDirection: 'row', - alignItems: 'center', + flexDirection: "row", + alignItems: "center", gap: 8, }, stepContainer: { @@ -69,6 +73,6 @@ const styles = StyleSheet.create({ width: 290, bottom: 0, left: 0, - position: 'absolute', + position: "absolute", }, }); diff --git a/examples/expo/app/+not-found.tsx b/examples/expo/app/+not-found.tsx index 963b04fb..87481ade 100644 --- a/examples/expo/app/+not-found.tsx +++ b/examples/expo/app/+not-found.tsx @@ -1,13 +1,13 @@ -import { Link, Stack } from 'expo-router'; -import { StyleSheet } from 'react-native'; +import { Link, Stack } from "expo-router"; +import { StyleSheet } from "react-native"; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; +import { ThemedText } from "@/components/ThemedText"; +import { ThemedView } from "@/components/ThemedView"; export default function NotFoundScreen() { return ( <> - <Stack.Screen options={{ title: 'Oops!' }} /> + <Stack.Screen options={{ title: "Oops!" }} /> <ThemedView style={styles.container}> <ThemedText type="title">This screen doesn't exist.</ThemedText> <Link href="/" style={styles.link}> @@ -21,8 +21,8 @@ export default function NotFoundScreen() { const styles = StyleSheet.create({ container: { flex: 1, - alignItems: 'center', - justifyContent: 'center', + alignItems: "center", + justifyContent: "center", padding: 20, }, link: { diff --git a/examples/expo/app/_layout.tsx b/examples/expo/app/_layout.tsx index db745789..110eec96 100644 --- a/examples/expo/app/_layout.tsx +++ b/examples/expo/app/_layout.tsx @@ -1,12 +1,16 @@ -import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; -import { useFonts } from 'expo-font'; -import { Stack } from 'expo-router'; -import * as SplashScreen from 'expo-splash-screen'; -import { StatusBar } from 'expo-status-bar'; -import { useEffect } from 'react'; -import 'react-native-reanimated'; +import { + DarkTheme, + DefaultTheme, + ThemeProvider, +} from "@react-navigation/native"; +import { useFonts } from "expo-font"; +import { Stack } from "expo-router"; +import * as SplashScreen from "expo-splash-screen"; +import { StatusBar } from "expo-status-bar"; +import { useEffect } from "react"; +import "react-native-reanimated"; -import { useColorScheme } from '@/hooks/useColorScheme'; +import { useColorScheme } from "@/hooks/useColorScheme"; // Prevent the splash screen from auto-hiding before asset loading is complete. SplashScreen.preventAutoHideAsync(); @@ -14,7 +18,7 @@ SplashScreen.preventAutoHideAsync(); export default function RootLayout() { const colorScheme = useColorScheme(); const [loaded] = useFonts({ - SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), + SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"), }); useEffect(() => { @@ -28,7 +32,7 @@ export default function RootLayout() { } return ( - <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> + <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}> <Stack> <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="+not-found" /> diff --git a/examples/expo/components/Collapsible.tsx b/examples/expo/components/Collapsible.tsx index 55bff2f9..28a225e3 100644 --- a/examples/expo/components/Collapsible.tsx +++ b/examples/expo/components/Collapsible.tsx @@ -1,28 +1,32 @@ -import { PropsWithChildren, useState } from 'react'; -import { StyleSheet, TouchableOpacity } from 'react-native'; +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'; +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"; -export function Collapsible({ children, title }: PropsWithChildren & { title: string }) { +export function Collapsible({ + children, + title, +}: PropsWithChildren & { title: string }) { const [isOpen, setIsOpen] = useState(false); - const theme = useColorScheme() ?? 'light'; + const theme = useColorScheme() ?? "light"; return ( <ThemedView> <TouchableOpacity style={styles.heading} onPress={() => setIsOpen((value) => !value)} - activeOpacity={0.8}> + 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' }] }} + color={theme === "light" ? Colors.light.icon : Colors.dark.icon} + style={{ transform: [{ rotate: isOpen ? "90deg" : "0deg" }] }} /> <ThemedText type="defaultSemiBold">{title}</ThemedText> @@ -34,8 +38,8 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st const styles = StyleSheet.create({ heading: { - flexDirection: 'row', - alignItems: 'center', + flexDirection: "row", + alignItems: "center", gap: 6, }, content: { diff --git a/examples/expo/components/ExternalLink.tsx b/examples/expo/components/ExternalLink.tsx index 8f05675b..f521bf23 100644 --- a/examples/expo/components/ExternalLink.tsx +++ b/examples/expo/components/ExternalLink.tsx @@ -1,9 +1,9 @@ -import { Link } from 'expo-router'; -import { openBrowserAsync } from 'expo-web-browser'; -import { type ComponentProps } from 'react'; -import { Platform } from 'react-native'; +import { 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: string }; +type Props = Omit<ComponentProps<typeof Link>, "href"> & { href: string }; export function ExternalLink({ href, ...rest }: Props) { return ( @@ -12,7 +12,7 @@ export function ExternalLink({ href, ...rest }: Props) { {...rest} href={href} onPress={async (event) => { - if (Platform.OS !== 'web') { + 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. diff --git a/examples/expo/components/HapticTab.tsx b/examples/expo/components/HapticTab.tsx index 7f3981cb..a5674761 100644 --- a/examples/expo/components/HapticTab.tsx +++ b/examples/expo/components/HapticTab.tsx @@ -1,13 +1,13 @@ -import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs'; -import { PlatformPressable } from '@react-navigation/elements'; -import * as Haptics from 'expo-haptics'; +import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"; +import { PlatformPressable } from "@react-navigation/elements"; +import * as Haptics from "expo-haptics"; export function HapticTab(props: BottomTabBarButtonProps) { return ( <PlatformPressable {...props} onPressIn={(ev) => { - if (process.env.EXPO_OS === 'ios') { + if (process.env.EXPO_OS === "ios") { // Add a soft haptic feedback when pressing down on the tabs. Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); } diff --git a/examples/expo/components/HelloWave.tsx b/examples/expo/components/HelloWave.tsx index 9b4bc31c..451fd8d1 100644 --- a/examples/expo/components/HelloWave.tsx +++ b/examples/expo/components/HelloWave.tsx @@ -1,22 +1,25 @@ -import { useEffect } from 'react'; -import { StyleSheet } from 'react-native'; +import { useEffect } from "react"; +import { StyleSheet } from "react-native"; import Animated, { useSharedValue, useAnimatedStyle, withTiming, withRepeat, withSequence, -} from 'react-native-reanimated'; +} from "react-native-reanimated"; -import { ThemedText } from '@/components/ThemedText'; +import { ThemedText } from "@/components/ThemedText"; 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 + withSequence( + withTiming(25, { duration: 150 }), + withTiming(0, { duration: 150 }), + ), + 4, // Run the animation 4 times ); }, []); diff --git a/examples/expo/components/ParallaxScrollView.tsx b/examples/expo/components/ParallaxScrollView.tsx index 5df1d75f..53c51419 100644 --- a/examples/expo/components/ParallaxScrollView.tsx +++ b/examples/expo/components/ParallaxScrollView.tsx @@ -1,15 +1,15 @@ -import type { PropsWithChildren, ReactElement } from 'react'; -import { StyleSheet } from 'react-native'; +import type { PropsWithChildren, ReactElement } from "react"; +import { StyleSheet } from "react-native"; import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useScrollViewOffset, -} from 'react-native-reanimated'; +} from "react-native-reanimated"; -import { ThemedView } from '@/components/ThemedView'; -import { useBottomTabOverflow } from '@/components/ui/TabBarBackground'; -import { useColorScheme } from '@/hooks/useColorScheme'; +import { ThemedView } from "@/components/ThemedView"; +import { useBottomTabOverflow } from "@/components/ui/TabBarBackground"; +import { useColorScheme } from "@/hooks/useColorScheme"; const HEADER_HEIGHT = 250; @@ -23,7 +23,7 @@ export default function ParallaxScrollView({ headerImage, headerBackgroundColor, }: Props) { - const colorScheme = useColorScheme() ?? 'light'; + const colorScheme = useColorScheme() ?? "light"; const scrollRef = useAnimatedRef<Animated.ScrollView>(); const scrollOffset = useScrollViewOffset(scrollRef); const bottom = useBottomTabOverflow(); @@ -34,11 +34,15 @@ export default function ParallaxScrollView({ translateY: interpolate( scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], - [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75] + [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75], ), }, { - scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]), + scale: interpolate( + scrollOffset.value, + [-HEADER_HEIGHT, 0, HEADER_HEIGHT], + [2, 1, 1], + ), }, ], }; @@ -50,13 +54,15 @@ export default function ParallaxScrollView({ ref={scrollRef} scrollEventThrottle={16} scrollIndicatorInsets={{ bottom }} - contentContainerStyle={{ paddingBottom: bottom }}> + contentContainerStyle={{ paddingBottom: bottom }} + > <Animated.View style={[ styles.header, { backgroundColor: headerBackgroundColor[colorScheme] }, headerAnimatedStyle, - ]}> + ]} + > {headerImage} </Animated.View> <ThemedView style={styles.content}>{children}</ThemedView> @@ -71,12 +77,12 @@ const styles = StyleSheet.create({ }, header: { height: HEADER_HEIGHT, - overflow: 'hidden', + overflow: "hidden", }, content: { flex: 1, padding: 32, gap: 16, - overflow: 'hidden', + overflow: "hidden", }, }); diff --git a/examples/expo/components/ThemedText.tsx b/examples/expo/components/ThemedText.tsx index c0e1a78f..2bef93f6 100644 --- a/examples/expo/components/ThemedText.tsx +++ b/examples/expo/components/ThemedText.tsx @@ -1,31 +1,31 @@ -import { Text, type TextProps, StyleSheet } from 'react-native'; +import { Text, type TextProps, StyleSheet } from "react-native"; -import { useThemeColor } from '@/hooks/useThemeColor'; +import { useThemeColor } from "@/hooks/useThemeColor"; export type ThemedTextProps = TextProps & { lightColor?: string; darkColor?: string; - type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'; + type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link"; }; export function ThemedText({ style, lightColor, darkColor, - type = 'default', + type = "default", ...rest }: ThemedTextProps) { - const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text'); + 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, + 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} @@ -41,20 +41,20 @@ const styles = StyleSheet.create({ defaultSemiBold: { fontSize: 16, lineHeight: 24, - fontWeight: '600', + fontWeight: "600", }, title: { fontSize: 32, - fontWeight: 'bold', + fontWeight: "bold", lineHeight: 32, }, subtitle: { fontSize: 20, - fontWeight: 'bold', + fontWeight: "bold", }, link: { lineHeight: 30, fontSize: 16, - color: '#0a7ea4', + color: "#0a7ea4", }, }); diff --git a/examples/expo/components/ThemedView.tsx b/examples/expo/components/ThemedView.tsx index 4d2cb09d..2b7d61af 100644 --- a/examples/expo/components/ThemedView.tsx +++ b/examples/expo/components/ThemedView.tsx @@ -1,14 +1,22 @@ -import { View, type ViewProps } from 'react-native'; +import { View, type ViewProps } from "react-native"; -import { useThemeColor } from '@/hooks/useThemeColor'; +import { useThemeColor } from "@/hooks/useThemeColor"; export type ThemedViewProps = ViewProps & { lightColor?: string; darkColor?: string; }; -export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) { - const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background'); +export function ThemedView({ + style, + lightColor, + darkColor, + ...otherProps +}: ThemedViewProps) { + const backgroundColor = useThemeColor( + { light: lightColor, dark: darkColor }, + "background", + ); return <View style={[{ backgroundColor }, style]} {...otherProps} />; } diff --git a/examples/expo/components/__tests__/ThemedText-test.tsx b/examples/expo/components/__tests__/ThemedText-test.tsx index 1ac32250..591f09e2 100644 --- a/examples/expo/components/__tests__/ThemedText-test.tsx +++ b/examples/expo/components/__tests__/ThemedText-test.tsx @@ -1,10 +1,12 @@ -import * as React from 'react'; -import renderer from 'react-test-renderer'; +import * as React from "react"; +import renderer from "react-test-renderer"; -import { ThemedText } from '../ThemedText'; +import { ThemedText } from "../ThemedText"; it(`renders correctly`, () => { - const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON(); + const tree = renderer + .create(<ThemedText>Snapshot test!</ThemedText>) + .toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/examples/expo/components/ui/IconSymbol.ios.tsx b/examples/expo/components/ui/IconSymbol.ios.tsx index 9177f4da..8e02a878 100644 --- a/examples/expo/components/ui/IconSymbol.ios.tsx +++ b/examples/expo/components/ui/IconSymbol.ios.tsx @@ -1,14 +1,14 @@ -import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols'; -import { StyleProp, ViewStyle } from 'react-native'; +import { SymbolView, SymbolViewProps, SymbolWeight } from "expo-symbols"; +import { StyleProp, ViewStyle } from "react-native"; export function IconSymbol({ name, size = 24, color, style, - weight = 'regular', + weight = "regular", }: { - name: SymbolViewProps['name']; + name: SymbolViewProps["name"]; size?: number; color: string; style?: StyleProp<ViewStyle>; diff --git a/examples/expo/components/ui/IconSymbol.tsx b/examples/expo/components/ui/IconSymbol.tsx index f1fabd4a..7b2dd307 100644 --- a/examples/expo/components/ui/IconSymbol.tsx +++ b/examples/expo/components/ui/IconSymbol.tsx @@ -1,22 +1,22 @@ // This file is a fallback for using MaterialIcons on Android and web. -import MaterialIcons from '@expo/vector-icons/MaterialIcons'; -import { SymbolWeight } from 'expo-symbols'; -import React from 'react'; -import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native'; +import MaterialIcons from "@expo/vector-icons/MaterialIcons"; +import { SymbolWeight } from "expo-symbols"; +import React from "react"; +import { OpaqueColorValue, StyleProp, ViewStyle } from "react-native"; // Add your SFSymbol to MaterialIcons mappings here. const MAPPING = { // See MaterialIcons here: https://icons.expo.fyi // See SF Symbols in the SF Symbols app on Mac. - 'house.fill': 'home', - 'paperplane.fill': 'send', - 'chevron.left.forwardslash.chevron.right': 'code', - 'chevron.right': 'chevron-right', + "house.fill": "home", + "paperplane.fill": "send", + "chevron.left.forwardslash.chevron.right": "code", + "chevron.right": "chevron-right", } as Partial< Record< - import('expo-symbols').SymbolViewProps['name'], - React.ComponentProps<typeof MaterialIcons>['name'] + import("expo-symbols").SymbolViewProps["name"], + React.ComponentProps<typeof MaterialIcons>["name"] > >; @@ -39,5 +39,12 @@ export function IconSymbol({ style?: StyleProp<ViewStyle>; weight?: SymbolWeight; }) { - return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />; + return ( + <MaterialIcons + color={color} + size={size} + name={MAPPING[name]} + style={style} + /> + ); } diff --git a/examples/expo/components/ui/TabBarBackground.ios.tsx b/examples/expo/components/ui/TabBarBackground.ios.tsx index 6668e78d..a0b6f703 100644 --- a/examples/expo/components/ui/TabBarBackground.ios.tsx +++ b/examples/expo/components/ui/TabBarBackground.ios.tsx @@ -1,7 +1,7 @@ -import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'; -import { BlurView } from 'expo-blur'; -import { StyleSheet } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"; +import { BlurView } from "expo-blur"; +import { StyleSheet } from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; export default function BlurTabBarBackground() { return ( diff --git a/examples/expo/constants/Colors.ts b/examples/expo/constants/Colors.ts index 14e67844..431f15c8 100644 --- a/examples/expo/constants/Colors.ts +++ b/examples/expo/constants/Colors.ts @@ -3,24 +3,24 @@ * 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'; +const tintColorLight = "#0a7ea4"; +const tintColorDark = "#fff"; export const Colors = { light: { - text: '#11181C', - background: '#fff', + text: "#11181C", + background: "#fff", tint: tintColorLight, - icon: '#687076', - tabIconDefault: '#687076', + icon: "#687076", + tabIconDefault: "#687076", tabIconSelected: tintColorLight, }, dark: { - text: '#ECEDEE', - background: '#151718', + text: "#ECEDEE", + background: "#151718", tint: tintColorDark, - icon: '#9BA1A6', - tabIconDefault: '#9BA1A6', + icon: "#9BA1A6", + tabIconDefault: "#9BA1A6", tabIconSelected: tintColorDark, }, }; diff --git a/examples/expo/hooks/useColorScheme.ts b/examples/expo/hooks/useColorScheme.ts index 17e3c63e..93a8fde9 100644 --- a/examples/expo/hooks/useColorScheme.ts +++ b/examples/expo/hooks/useColorScheme.ts @@ -1 +1 @@ -export { useColorScheme } from 'react-native'; +export { useColorScheme } from "react-native"; diff --git a/examples/expo/hooks/useColorScheme.web.ts b/examples/expo/hooks/useColorScheme.web.ts index 7eb1c1b7..66cccac5 100644 --- a/examples/expo/hooks/useColorScheme.web.ts +++ b/examples/expo/hooks/useColorScheme.web.ts @@ -1,5 +1,5 @@ -import { useEffect, useState } from 'react'; -import { useColorScheme as useRNColorScheme } from 'react-native'; +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 @@ -17,5 +17,5 @@ export function useColorScheme() { return colorScheme; } - return 'light'; + return "light"; } diff --git a/examples/expo/hooks/useThemeColor.ts b/examples/expo/hooks/useThemeColor.ts index 0608e731..f48fac00 100644 --- a/examples/expo/hooks/useThemeColor.ts +++ b/examples/expo/hooks/useThemeColor.ts @@ -3,14 +3,14 @@ * https://docs.expo.dev/guides/color-schemes/ */ -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; +import { Colors } from "@/constants/Colors"; +import { useColorScheme } from "@/hooks/useColorScheme"; export function useThemeColor( props: { light?: string; dark?: string }, - colorName: keyof typeof Colors.light & keyof typeof Colors.dark + colorName: keyof typeof Colors.light & keyof typeof Colors.dark, ) { - const theme = useColorScheme() ?? 'light'; + const theme = useColorScheme() ?? "light"; const colorFromProps = props[theme]; if (colorFromProps) { diff --git a/examples/expo/locales/i18n.ts b/examples/expo/locales/i18n.ts index c7ba1e13..6f354235 100644 --- a/examples/expo/locales/i18n.ts +++ b/examples/expo/locales/i18n.ts @@ -1,16 +1,16 @@ // For more information on Expo Localization and usage: https://docs.expo.dev/guides/localization -import { getLocales } from 'expo-localization'; -import { I18n } from 'i18n-js'; +import { getLocales } from "expo-localization"; +import { I18n } from "i18n-js"; const translations = { - en: require('./en.json'), - es: require('./es.json') -} + en: require("./en.json"), + es: require("./es.json"), +}; const i18n = new I18n(translations); -i18n.locale = getLocales().at(0)?.languageCode ?? 'en'; +i18n.locale = getLocales().at(0)?.languageCode ?? "en"; i18n.enableFallback = true; -export default i18n; \ No newline at end of file +export default i18n; diff --git a/examples/expo/scripts/reset-project.js b/examples/expo/scripts/reset-project.js index 5f814634..546c40d8 100755 --- a/examples/expo/scripts/reset-project.js +++ b/examples/expo/scripts/reset-project.js @@ -74,7 +74,7 @@ const moveDirectories = async () => { console.log("\n✅ Project reset complete. Next steps:"); console.log( - "1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it." + "1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it.", ); } catch (error) { console.error(`Error during script execution: ${error}`); diff --git a/examples/expo/tsconfig.json b/examples/expo/tsconfig.json index 909e9010..ce27fee3 100644 --- a/examples/expo/tsconfig.json +++ b/examples/expo/tsconfig.json @@ -3,15 +3,8 @@ "compilerOptions": { "strict": true, "paths": { - "@/*": [ - "./*" - ] + "@/*": ["./*"] } }, - "include": [ - "**/*.ts", - "**/*.tsx", - ".expo/types/**/*.ts", - "expo-env.d.ts" - ] + "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"] } diff --git a/examples/i18next/languine.config.ts b/examples/i18next/languine.config.ts index ca1ec30a..dd63660b 100644 --- a/examples/i18next/languine.config.ts +++ b/examples/i18next/languine.config.ts @@ -8,7 +8,7 @@ export default defineConfig({ }, files: { json: { - include: ["locales"], + include: ["locales/[locale].json"], }, }, llm: { diff --git a/packages/cli/package.json b/packages/cli/package.json index 73300dae..7893397e 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "languine", - "version": "0.6.8", + "version": "0.6.9", "type": "module", "bin": "dist/index.js", "main": "dist/config.js", diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 71081081..a4ded3c2 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -67,6 +67,8 @@ function getDefaultPattern(format: string) { } export async function init(preset?: string) { + let configType = "ts"; + try { execSync("git rev-parse --is-inside-work-tree", { stdio: "ignore" }); } catch (error) { @@ -78,17 +80,19 @@ export async function init(preset?: string) { intro("Let's set up your i18n configuration"); - const configType = (await select({ - message: "What type of config file would you like to use?", - options: [ - { value: "ts", label: "TypeScript", hint: "recommended" }, - { value: "mjs", label: "JavaScript" }, - ], - })) as "ts" | "mjs"; + if (!preset) { + configType = (await select({ + message: "What type of config file would you like to use?", + options: [ + { value: "ts", label: "TypeScript", hint: "recommended" }, + { value: "mjs", label: "JavaScript" }, + ], + })) as "ts" | "mjs"; - // Install dependencies only if we're using TypeScript for types in config - if (configType === "ts") { - await installDependencies(); + // Install dependencies only if we're using TypeScript for types in config + if (configType === "ts") { + await installDependencies(); + } } const sourceLanguage = (await select({ @@ -155,6 +159,8 @@ export async function init(preset?: string) { filesPatterns = Array.isArray(presetConfig.filesPattern) ? presetConfig.filesPattern : [presetConfig.filesPattern]; + + configType = presetConfig.configType; } const provider = (await select<Provider>({ diff --git a/packages/cli/src/presets/expo.ts b/packages/cli/src/presets/expo.ts index 969dd4e5..f49c5c44 100644 --- a/packages/cli/src/presets/expo.ts +++ b/packages/cli/src/presets/expo.ts @@ -107,6 +107,7 @@ export async function expo(options: PresetOptions) { return { fileFormat: "json", + configType: "ts", filesPattern: ["locales/native/[locale].json", "locales/[locale].json"], }; } diff --git a/packages/cli/src/utils.ts b/packages/cli/src/utils.ts index b38f40a0..4133450f 100644 --- a/packages/cli/src/utils.ts +++ b/packages/cli/src/utils.ts @@ -81,7 +81,7 @@ export function generateConfig({ filesPatterns: string[]; provider: string; model: string; - configType: "ts" | "mjs"; + configType: string; }) { const formatKey = fileFormat.includes("-") ? `"${fileFormat}"` : fileFormat; @@ -111,7 +111,7 @@ export function generateConfig({ export default defineConfig(${configBody})`; } -export async function configFile(configType?: "ts" | "mjs") { +export async function configFile(configType?: string) { const files = await fs.readdir(process.cwd()); const configFile = files.find( (file: string) =>