From 3870c20896608fd6d701d47944574e643d96c43e Mon Sep 17 00:00:00 2001 From: Pontus Abrahamsson 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 4258e45..feb8e3b 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 e2200ff..984fb51 100644 --- a/examples/android/locales/es.xml +++ b/examples/android/locales/es.xml @@ -41,8 +41,8 @@ %d canciones en cola - A %d persona le gustó tu publicación - A %d personas les gustó tu publicación + %d persona le gustó tu publicación + %d personas les gustó tu publicación %d logro desbloqueado diff --git a/examples/expo/app.json b/examples/expo/app.json index f715768..eac238a 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 cfbc1e2..f891b8b 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 ( + }} + > , + title: "Home", + tabBarIcon: ({ color }) => ( + + ), }} /> , + title: "Explore", + tabBarIcon: ({ color }) => ( + + ), }} /> diff --git a/examples/expo/app/(tabs)/explore.tsx b/examples/expo/app/(tabs)/explore.tsx index 06e70c4..bae8cb6 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 ( - }> + } + > Explore - This app includes example code to help you get started. + + This app includes example code to help you get started. + - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} + This app has two screens:{" "} + app/(tabs)/index.tsx{" "} + and{" "} app/(tabs)/explore.tsx - The layout file in app/(tabs)/_layout.tsx{' '} + The layout file in{" "} + app/(tabs)/_layout.tsx{" "} sets up the tab navigator. @@ -39,25 +44,31 @@ export default function TabTwoScreen() { - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - w in the terminal running this project. + You can open this project on Android, iOS, and the web. To open the + web version, press w{" "} + in the terminal running this project. - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities + For static images, you can use the{" "} + @2x and{" "} + @3x suffixes to + provide files for different screen densities - + Learn more - Open app/_layout.tsx to see how to load{' '} - + Open app/_layout.tsx{" "} + to see how to load{" "} + custom fonts such as this one. @@ -67,9 +78,10 @@ export default function TabTwoScreen() { - This template has light and dark mode support. The{' '} - useColorScheme() 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{" "} + useColorScheme() hook + lets you inspect what the user's current color scheme is, and so you + can adjust UI colors accordingly. Learn more @@ -77,15 +89,23 @@ export default function TabTwoScreen() { - This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful react-native-reanimated{' '} + This template includes an example of an animated component. The{" "} + + components/HelloWave.tsx + {" "} + component uses the powerful{" "} + + react-native-reanimated + {" "} library to create a waving hand animation. {Platform.select({ ios: ( - The components/ParallaxScrollView.tsx{' '} + The{" "} + + components/ParallaxScrollView.tsx + {" "} component provides a parallax effect for the header image. ), @@ -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 886b079..4fab748 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 ( - }> + } + > Welcome! @@ -22,31 +23,34 @@ export default function HomeScreen() { Step 1: Try it - Edit app/(tabs)/index.tsx to see changes. - Press{' '} + Edit{" "} + app/(tabs)/index.tsx{" "} + to see changes. Press{" "} {Platform.select({ - ios: 'cmd + d', - android: 'cmd + m', - web: 'F12' + ios: "cmd + d", + android: "cmd + m", + web: "F12", })} - {' '} + {" "} to open developer tools. Step 2: Explore - 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. Step 3: Get a fresh start - When you're ready, run{' '} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} + When you're ready, run{" "} + npm run reset-project{" "} + to get a fresh app{" "} + directory. This will move the current{" "} + app to{" "} app-example. @@ -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 963b04f..87481ad 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 ( <> - + This screen doesn't exist. @@ -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 db74578..110eec9 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 ( - + diff --git a/examples/expo/components/Collapsible.tsx b/examples/expo/components/Collapsible.tsx index 55bff2f..28a225e 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 ( setIsOpen((value) => !value)} - activeOpacity={0.8}> + activeOpacity={0.8} + > {title} @@ -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 8f05675..f521bf2 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, 'href'> & { href: string }; +type Props = Omit, "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 7f3981c..a567476 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 ( { - 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 9b4bc31..451fd8d 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 5df1d75..53c5141 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(); 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 }} + > + ]} + > {headerImage} {children} @@ -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 c0e1a78..2bef93f 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 ( ; } diff --git a/examples/expo/components/__tests__/ThemedText-test.tsx b/examples/expo/components/__tests__/ThemedText-test.tsx index 1ac3225..591f09e 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(Snapshot test!).toJSON(); + const tree = renderer + .create(Snapshot test!) + .toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/examples/expo/components/ui/IconSymbol.ios.tsx b/examples/expo/components/ui/IconSymbol.ios.tsx index 9177f4d..8e02a87 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; diff --git a/examples/expo/components/ui/IconSymbol.tsx b/examples/expo/components/ui/IconSymbol.tsx index f1fabd4..7b2dd30 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['name'] + import("expo-symbols").SymbolViewProps["name"], + React.ComponentProps["name"] > >; @@ -39,5 +39,12 @@ export function IconSymbol({ style?: StyleProp; weight?: SymbolWeight; }) { - return ; + return ( + + ); } diff --git a/examples/expo/components/ui/TabBarBackground.ios.tsx b/examples/expo/components/ui/TabBarBackground.ios.tsx index 6668e78..a0b6f70 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 14e6784..431f15c 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 17e3c63..93a8fde 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 7eb1c1b..66cccac 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 0608e73..f48fac0 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 c7ba1e1..6f35423 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 5f81463..546c40d 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 909e901..ce27fee 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 ca1ec30..dd63660 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 73300da..7893397 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 7108108..a4ded3c 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({ diff --git a/packages/cli/src/presets/expo.ts b/packages/cli/src/presets/expo.ts index 969dd4e..f49c5c4 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 b38f40a..4133450 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) =>