create-better-t-stack 3.2.21 → 3.2.23-canary.2b547ed5

package/templates/frontend/native/nativewind/app/_layout.tsx.hbs

@@ -1,175 +0,0 @@
-{{#if (includes examples "ai")}}
-import "@/polyfills";
-{{/if}}
-{{#if (eq backend "convex")}}
-{{#if (eq auth "better-auth")}}
-import { ConvexReactClient } from "convex/react";
-import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
-import { authClient } from "@/lib/auth-client";
-{{else}}
-import { ConvexProvider, ConvexReactClient } from "convex/react";
-{{/if}}
-{{#if (eq auth "clerk")}}
-import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
-import { ConvexProviderWithClerk } from "convex/react-clerk";
-import { tokenCache } from "@clerk/clerk-expo/token-cache";
-{{/if}}
-{{else}}
-{{#unless (eq api "none")}}
-import { QueryClientProvider } from "@tanstack/react-query";
-{{/unless}}
-{{/if}}
-import { Stack } from "expo-router";
-import {
-  DarkTheme,
-  DefaultTheme,
-  type Theme,
-  ThemeProvider,
-} from "@react-navigation/native";
-import { StatusBar } from "expo-status-bar";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import "../global.css";
-{{#if (eq api "trpc")}}
-import { queryClient } from "@/utils/trpc";
-{{/if}}
-{{#if (eq api "orpc")}}
-import { queryClient } from "@/utils/orpc";
-{{/if}}
-import { NAV_THEME } from "@/lib/constants";
-import React, { useRef } from "react";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { Platform } from "react-native";
-import { setAndroidNavigationBar } from "@/lib/android-navigation-bar";
-
-const LIGHT_THEME: Theme = {
-  ...DefaultTheme,
-  colors: NAV_THEME.light,
-};
-const DARK_THEME: Theme = {
-  ...DarkTheme,
-  colors: NAV_THEME.dark,
-};
-
-export const unstable_settings = {
-  initialRouteName: "(drawer)",
-};
-
-{{#if (eq backend "convex")}}
-const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
-  unsavedChangesWarning: false,
-});
-{{/if}}
-
-export default function RootLayout() {
-  const hasMounted = useRef(false);
-  const { colorScheme, isDarkColorScheme } = useColorScheme();
-  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    if (hasMounted.current) {
-      return;
-    }
-
-    if (Platform.OS === "web") {
-      document.documentElement.classList.add("bg-background");
-    }
-    setAndroidNavigationBar(colorScheme);
-    setIsColorSchemeLoaded(true);
-    hasMounted.current = true;
-  }, []);
-
-  if (!isColorSchemeLoaded) {
-    return null;
-  }
-  return (
-    {{#if (eq backend "convex")}}
-    {{#if (eq auth "clerk")}}
-    <ClerkProvider
-      tokenCache={tokenCache}
-      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
-    >
-      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
-        <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-          <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-          <GestureHandlerRootView style=\{{ flex: 1 }}>
-            <Stack>
-              <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-              <Stack.Screen name="(auth)" options=\{{ headerShown: false }} />
-              <Stack.Screen
-                name="modal"
-                options=\{{ title: "Modal", presentation: "modal" }}
-              />
-            </Stack>
-          </GestureHandlerRootView>
-        </ThemeProvider>
-      </ConvexProviderWithClerk>
-    </ClerkProvider>
-    {{else if (eq auth "better-auth")}}
-    <ConvexBetterAuthProvider client={convex} authClient={authClient}>
-      <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-        <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-        <GestureHandlerRootView style=\{{ flex: 1 }}>
-          <Stack>
-            <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-            <Stack.Screen
-              name="modal"
-              options=\{{ title: "Modal", presentation: "modal" }}
-            />
-          </Stack>
-        </GestureHandlerRootView>
-      </ThemeProvider>
-    </ConvexBetterAuthProvider>
-    {{else}}
-    <ConvexProvider client={convex}>
-      <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-        <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-        <GestureHandlerRootView style=\{{ flex: 1 }}>
-          <Stack>
-            <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-            <Stack.Screen
-              name="modal"
-              options=\{{ title: "Modal", presentation: "modal" }}
-            />
-          </Stack>
-        </GestureHandlerRootView>
-      </ThemeProvider>
-    </ConvexProvider>
-    {{/if}}
-    {{else}}
-    {{#unless (eq api "none")}}
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-        <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-        <GestureHandlerRootView style=\{{ flex: 1 }}>
-          <Stack>
-            <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-            <Stack.Screen
-              name="modal"
-              options=\{{ title: "Modal", presentation: "modal" }}
-            />
-          </Stack>
-        </GestureHandlerRootView>
-      </ThemeProvider>
-    </QueryClientProvider>
-    {{else}}
-    <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-      <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
-      <GestureHandlerRootView style=\{{ flex: 1 }}>
-        <Stack>
-          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
-          <Stack.Screen
-            name="modal"
-            options=\{{ title: "Modal", presentation: "modal" }}
-          />
-        </Stack>
-      </GestureHandlerRootView>
-    </ThemeProvider>
-    {{/unless}}
-    {{/if}}
-  );
-}
-
-const useIsomorphicLayoutEffect =
-  Platform.OS === "web" && typeof window === "undefined"
-    ? React.useEffect
-    : React.useLayoutEffect;

package/templates/frontend/native/nativewind/app/modal.tsx.hbs

@@ -1,14 +0,0 @@
-import { Container } from "@/components/container";
-import { Text, View } from "react-native";
-
-export default function Modal() {
-  return (
-    <Container>
-      <View className="flex-1 p-6">
-        <View className="flex-row items-center justify-between mb-8">
-          <Text className="text-2xl font-bold text-foreground">Modal</Text>
-        </View>
-      </View>
-    </Container>
-  );
-}

package/templates/frontend/native/nativewind/babel.config.js.hbs

@@ -1,14 +0,0 @@
-module.exports = (api) => {
-	api.cache(true);
-	const plugins = [];
-
-	plugins.push("react-native-worklets/plugin");
-
-	return {
-		presets: [
-			["babel-preset-expo", { jsxImportSource: "nativewind" }],
-			"nativewind/babel",
-		],
-		plugins,
-	};
-};

package/templates/frontend/native/nativewind/components/container.tsx.hbs

@@ -1,8 +0,0 @@
-import React from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
-
-export const Container = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <SafeAreaView className="flex-1 bg-background">{children}</SafeAreaView>
-  );
-};

package/templates/frontend/native/nativewind/components/header-button.tsx.hbs

@@ -1,26 +0,0 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import { forwardRef } from "react";
-import { Pressable } from "react-native";
-
-export const HeaderButton = forwardRef<
-  typeof Pressable,
-  { onPress?: () => void }
->(({ onPress }, ref) => {
-  return (
-    <Pressable
-      onPress={onPress}
-      className="p-2 mr-2 rounded-lg bg-secondary/50 active:bg-secondary"
-    >
-      {({ pressed }) => (
-        <FontAwesome
-          name="info-circle"
-          size={20}
-          className="text-secondary-foreground"
-          style=\{{
-            opacity: pressed ? 0.7 : 1,
-          }}
-        />
-      )}
-    </Pressable>
-  );
-});

package/templates/frontend/native/nativewind/global.css

@@ -1,50 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 40%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: 8px;
-  }
-
-  .dark:root {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 70%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 94.1%;
-  }
-}

package/templates/frontend/native/nativewind/lib/use-color-scheme.ts.hbs

@@ -1,12 +0,0 @@
-import { useColorScheme as useNativewindColorScheme } from "nativewind";
-
-export function useColorScheme() {
-  const { colorScheme, setColorScheme, toggleColorScheme } =
-    useNativewindColorScheme();
-  return {
-    colorScheme: colorScheme ?? "dark",
-    isDarkColorScheme: colorScheme === "dark",
-    setColorScheme,
-    toggleColorScheme,
-  };
-}

package/templates/frontend/native/nativewind/metro.config.js.hbs

@@ -1,12 +0,0 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require("expo/metro-config");
-const { withNativeWind } = require("nativewind/metro");
-
-const config = withNativeWind(getDefaultConfig(__dirname), {
-	input: "./global.css",
-	configPath: "./tailwind.config.js",
-});
-
-config.resolver.unstable_enablePackageExports = true;
-
-module.exports = config;

package/templates/frontend/native/nativewind/tailwind.config.js.hbs

@@ -1,59 +0,0 @@
-import { hairlineWidth } from "nativewind/theme";
-
-/** @type {import('tailwindcss').Config} */
-export const darkMode = "class";
-export const content = [
-	"./app/**/*.{js,ts,tsx}",
-	"./components/**/*.{js,ts,tsx}",
-];
-export const presets = [require("nativewind/preset")];
-export const theme = {
-	extend: {
-		colors: {
-			background: "hsl(var(--background))",
-			foreground: "hsl(var(--foreground))",
-			card: {
-				DEFAULT: "hsl(var(--card))",
-				foreground: "hsl(var(--card-foreground))",
-			},
-			popover: {
-				DEFAULT: "hsl(var(--popover))",
-				foreground: "hsl(var(--popover-foreground))",
-			},
-			primary: {
-				DEFAULT: "hsl(var(--primary))",
-				foreground: "hsl(var(--primary-foreground))",
-			},
-			secondary: {
-				DEFAULT: "hsl(var(--secondary))",
-				foreground: "hsl(var(--secondary-foreground))",
-			},
-			muted: {
-				DEFAULT: "hsl(var(--muted))",
-				foreground: "hsl(var(--muted-foreground))",
-			},
-			accent: {
-				DEFAULT: "hsl(var(--accent))",
-				foreground: "hsl(var(--accent-foreground))",
-			},
-			destructive: {
-				DEFAULT: "hsl(var(--destructive))",
-				foreground: "hsl(var(--destructive-foreground))",
-			},
-			border: "hsl(var(--border))",
-			input: "hsl(var(--input))",
-			ring: "hsl(var(--ring))",
-			radius: "var(--radius)",
-		},
-		borderRadius: {
-			xl: "calc(var(--radius) + 4px)",
-			lg: "var(--radius)",
-			md: "calc(var(--radius) - 2px)",
-			sm: "calc(var(--radius) - 4px)",
-		},
-		borderWidth: {
-			hairline: hairlineWidth(),
-		},
-	},
-};
-export const plugins = [];