create-better-t-stack 3.2.22 → 3.2.23-canary.b8d62867

package/templates/auth/better-auth/server/base/src/index.ts.hbs

@@ -16,7 +16,7 @@ export const auth = betterAuth<BetterAuthOptions>({
   }),
   trustedOrigins: [
     process.env.CORS_ORIGIN || "",
-    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
     "mybettertapp://", "exp://"
     {{/if}}
   ],
@@ -77,7 +77,7 @@ export const auth = betterAuth<BetterAuthOptions>({
   }),
   trustedOrigins: [
     process.env.CORS_ORIGIN || "",
-    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
     "mybettertapp://", "exp://"
     {{/if}}
   ],
@@ -138,7 +138,7 @@ export const auth = betterAuth<BetterAuthOptions>({
   }),
   trustedOrigins: [
     env.CORS_ORIGIN,
-    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
     "mybettertapp://", "exp://"
     {{/if}}
   ],
@@ -206,7 +206,7 @@ export const auth = betterAuth<BetterAuthOptions>({
   database: mongodbAdapter(client),
   trustedOrigins: [
     process.env.CORS_ORIGIN || "",
-    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
     "mybettertapp://", "exp://"
     {{/if}}
   ],
@@ -258,7 +258,7 @@ export const auth = betterAuth<BetterAuthOptions>({
   database: "", // Invalid configuration
   trustedOrigins: [
     process.env.CORS_ORIGIN || "",
-    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    {{#if (or (includes frontend "native-bare") (includes frontend "native-uniwind") (includes frontend "native-unistyles"))}}
     "mybettertapp://", "exp://"
     {{/if}}
   ],

package/templates/examples/ai/native/bare/app/(drawer)/ai.tsx.hbs

@@ -0,0 +1,287 @@
+import { useRef, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+} from "react-native";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { fetch as expoFetch } from "expo/fetch";
+import { Ionicons } from "@expo/vector-icons";
+import { Container } from "@/components/container";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+
+const generateAPIUrl = (relativePath: string) => {
+  const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
+  if (!serverUrl) {
+    throw new Error(
+      "EXPO_PUBLIC_SERVER_URL environment variable is not defined"
+    );
+  }
+  const path = relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
+  return serverUrl.concat(path);
+};
+
+export default function AIScreen() {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+  const [input, setInput] = useState("");
+  const { messages, error, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
+      fetch: expoFetch as unknown as typeof globalThis.fetch,
+      api: generateAPIUrl("/ai"),
+    }),
+    onError: (error) => console.error(error, "AI Chat Error"),
+  });
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    scrollViewRef.current?.scrollToEnd({ animated: true });
+  }, [messages]);
+
+  function onSubmit() {
+    const value = input.trim();
+    if (value) {
+      sendMessage({ text: value });
+      setInput("");
+    }
+  }
+
+  if (error) {
+    return (
+      <Container>
+        <View style={styles.errorContainer}>
+          <View style={[styles.errorCard, { backgroundColor: theme.notification + "20", borderColor: theme.notification }]}>
+            <Text style={[styles.errorTitle, { color: theme.notification }]}>
+              Error: {error.message}
+            </Text>
+            <Text style={[styles.errorText, { color: theme.text, opacity: 0.7 }]}>
+              Please check your connection and try again.
+            </Text>
+          </View>
+        </View>
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      <KeyboardAvoidingView
+        style={styles.container}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Text style={[styles.headerTitle, { color: theme.text }]}>
+              AI Chat
+            </Text>
+            <Text style={[styles.headerSubtitle, { color: theme.text, opacity: 0.7 }]}>
+              Chat with our AI assistant
+            </Text>
+          </View>
+          <ScrollView
+            ref={scrollViewRef}
+            style={styles.scrollView}
+            showsVerticalScrollIndicator={false}
+          >
+            {messages.length === 0 ? (
+              <View style={styles.emptyContainer}>
+                <Text style={[styles.emptyText, { color: theme.text, opacity: 0.7 }]}>
+                  Ask me anything to get started!
+                </Text>
+              </View>
+            ) : (
+              <View style={styles.messagesList}>
+                {messages.map((message) => (
+                  <View
+                    key={message.id}
+                    style={[
+                      styles.messageCard,
+                      {
+                        backgroundColor: message.role === "user" 
+                          ? theme.primary + "20" 
+                          : theme.card,
+                        borderColor: theme.border,
+                        alignSelf: message.role === "user" ? "flex-end" : "flex-start",
+                        marginLeft: message.role === "user" ? 32 : 0,
+                        marginRight: message.role === "user" ? 0 : 32,
+                      },
+                    ]}
+                  >
+                    <Text style={[styles.messageRole, { color: theme.text }]}>
+                      {message.role === "user" ? "You" : "AI Assistant"}
+                    </Text>
+                    <View style={styles.messageParts}>
+                      {message.parts.map((part, i) =>
+                        part.type === "text" ? (
+                          <Text
+                            key={`${message.id}-${i}`}
+                            style={[styles.messageText, { color: theme.text }]}
+                          >
+                            {part.text}
+                          </Text>
+                        ) : (
+                          <Text
+                            key={`${message.id}-${i}`}
+                            style={[styles.messageText, { color: theme.text }]}
+                          >
+                            {JSON.stringify(part)}
+                          </Text>
+                        )
+                      )}
+                    </View>
+                  </View>
+                ))}
+              </View>
+            )}
+          </ScrollView>
+          <View style={[styles.inputContainer, { borderTopColor: theme.border }]}>
+            <View style={styles.inputRow}>
+              <TextInput
+                value={input}
+                onChangeText={setInput}
+                placeholder="Type your message..."
+                placeholderTextColor={theme.text}
+                style={[
+                  styles.input,
+                  {
+                    color: theme.text,
+                    borderColor: theme.border,
+                    backgroundColor: theme.background,
+                  },
+                ]}
+                onSubmitEditing={(e) => {
+                  e.preventDefault();
+                  onSubmit();
+                }}
+                autoFocus={true}
+                multiline
+              />
+              <TouchableOpacity
+                onPress={onSubmit}
+                disabled={!input.trim()}
+                style={[
+                  styles.sendButton,
+                  {
+                    backgroundColor: input.trim() ? theme.primary : theme.border,
+                    opacity: input.trim() ? 1 : 0.5,
+                  },
+                ]}
+              >
+                <Ionicons
+                  name="send"
+                  size={20}
+                  color="#ffffff"
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  header: {
+    marginBottom: 16,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  headerSubtitle: {
+    fontSize: 14,
+  },
+  scrollView: {
+    flex: 1,
+    marginBottom: 16,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  emptyText: {
+    fontSize: 16,
+    textAlign: "center",
+  },
+  messagesList: {
+    gap: 8,
+    paddingBottom: 16,
+  },
+  messageCard: {
+    borderWidth: 1,
+    padding: 12,
+    maxWidth: "80%",
+  },
+  messageRole: {
+    fontSize: 12,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  messageParts: {
+    gap: 4,
+  },
+  messageText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  inputContainer: {
+    borderTopWidth: 1,
+    paddingTop: 12,
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    padding: 8,
+    fontSize: 14,
+    minHeight: 36,
+    maxHeight: 100,
+  },
+  sendButton: {
+    padding: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+  },
+  errorCard: {
+    borderWidth: 1,
+    padding: 16,
+  },
+  errorTitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: "center",
+  },
+});
+

package/templates/examples/ai/native/{nativewind → bare}/polyfills.js

@@ -23,3 +23,4 @@ if (Platform.OS !== "web") {
 }
 
 export {};
+

package/templates/examples/ai/native/{nativewind → uniwind}/app/(drawer)/ai.tsx.hbs

@@ -3,7 +3,7 @@ import {
   View,
   Text,
   TextInput,
-  TouchableOpacity,
+  Pressable,
   ScrollView,
   KeyboardAvoidingView,
   Platform,
@@ -13,14 +13,16 @@ import { DefaultChatTransport } from "ai";
 import { fetch as expoFetch } from "expo/fetch";
 import { Ionicons } from "@expo/vector-icons";
 import { Container } from "@/components/container";
+import { Card, useThemeColor } from "heroui-native";
 
 const generateAPIUrl = (relativePath: string) => {
   const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
   if (!serverUrl) {
-    throw new Error("EXPO_PUBLIC_SERVER_URL environment variable is not defined");
+    throw new Error(
+      "EXPO_PUBLIC_SERVER_URL environment variable is not defined"
+    );
   }
-  
-  const path = relativePath.startsWith('/') ? relativePath : `/${relativePath}`;
+  const path = relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
   return serverUrl.concat(path);
 };
 
@@ -29,12 +31,15 @@ export default function AIScreen() {
   const { messages, error, sendMessage } = useChat({
     transport: new DefaultChatTransport({
       fetch: expoFetch as unknown as typeof globalThis.fetch,
-      api: generateAPIUrl('/ai'),
+      api: generateAPIUrl("/ai"),
     }),
-    onError: error => console.error(error, 'AI Chat Error'),
+    onError: (error) => console.error(error, "AI Chat Error"),
   });
-
   const scrollViewRef = useRef<ScrollView>(null);
+  const mutedColor = useThemeColor("muted");
+  const accentColor = useThemeColor("accent");
+  const foregroundColor = useThemeColor("foreground");
+  const dangerColor = useThemeColor("danger");
 
   useEffect(() => {
     scrollViewRef.current?.scrollToEnd({ animated: true });
@@ -52,12 +57,14 @@ export default function AIScreen() {
     return (
       <Container>
         <View className="flex-1 justify-center items-center px-4">
-          <Text className="text-destructive text-center text-lg mb-4">
-            Error: {error.message}
-          </Text>
-          <Text className="text-muted-foreground text-center">
-            Please check your connection and try again.
-          </Text>
+          <Card variant="flat" className="p-4 bg-danger/10">
+            <Text className="text-danger text-center text-lg mb-2 font-semibold">
+              Error: {error.message}
+            </Text>
+            <Text className="text-muted text-center">
+              Please check your connection and try again.
+            </Text>
+          </Card>
         </View>
       </Container>
     );
@@ -65,7 +72,7 @@ export default function AIScreen() {
 
   return (
     <Container>
-      <KeyboardAvoidingView 
+      <KeyboardAvoidingView
         className="flex-1"
         behavior={Platform.OS === "ios" ? "padding" : "height"}
       >
@@ -74,11 +81,10 @@ export default function AIScreen() {
             <Text className="text-foreground text-2xl font-bold mb-2">
               AI Chat
             </Text>
-            <Text className="text-muted-foreground">
+            <Text className="text-muted">
               Chat with our AI assistant
             </Text>
           </View>
-
           <ScrollView
             ref={scrollViewRef}
             className="flex-1 mb-4"
@@ -86,85 +92,80 @@ export default function AIScreen() {
           >
             {messages.length === 0 ? (
               <View className="flex-1 justify-center items-center">
-                <Text className="text-center text-muted-foreground text-lg">
+                <Text className="text-center text-muted text-lg">
                   Ask me anything to get started!
                 </Text>
               </View>
             ) : (
-              <View className="space-y-4">
+              <View className="gap-3">
                 {messages.map((message) => (
-                  <View
+                  <Card
                     key={message.id}
-                    className={`p-3 rounded-lg ${
+                    variant={message.role === "user" ? "flat" : "secondary"}
+                    className={`p-3 ${
                       message.role === "user"
-                        ? "bg-primary/10 ml-8"
-                        : "bg-card mr-8 border border-border"
+                        ? "ml-8 bg-accent/10"
+                        : "mr-8"
                     }`}
                   >
                     <Text className="text-sm font-semibold mb-1 text-foreground">
                       {message.role === "user" ? "You" : "AI Assistant"}
                     </Text>
-                    <View className="space-y-1">
-                      {message.parts.map((part, i) => {
-                        if (part.type === 'text') {
-                          return (
-                            <Text
-                              key={`${message.id}-${i}`}
-                              className="text-foreground leading-relaxed"
-                            >
-                              {part.text}
-                            </Text>
-                          );
-                        }
-                        return (
+                    <View className="gap-1">
+                      {message.parts.map((part, i) =>
+                        part.type === "text" ? (
+                          <Text
+                            key={`${message.id}-${i}`}
+                            className="text-foreground leading-relaxed"
+                          >
+                            {part.text}
+                          </Text>
+                        ) : (
                           <Text
                             key={`${message.id}-${i}`}
                             className="text-foreground leading-relaxed"
                           >
                             {JSON.stringify(part)}
                           </Text>
-                        );
-                      })}
+                        )
+                      )}
                     </View>
-                  </View>
+                  </Card>
                 ))}
               </View>
             )}
           </ScrollView>
-
-          <View className="border-t border-border pt-4">
-            <View className="flex-row items-end space-x-2">
+          <View className="border-t border-divider pt-4">
+            <View className="flex-row items-end gap-2">
               <TextInput
                 value={input}
                 onChangeText={setInput}
                 placeholder="Type your message..."
-                placeholderTextColor="#6b7280"
-                className="flex-1 border border-border rounded-md px-3 py-2 text-foreground bg-background min-h-[40px] max-h-[120px]"
+                placeholderTextColor={mutedColor}
+                className="flex-1 border border-divider rounded-lg px-3 py-2 text-foreground bg-surface min-h-[40px] max-h-[120px]"
                 onSubmitEditing={(e) => {
                   e.preventDefault();
                   onSubmit();
                 }}
                 autoFocus={true}
               />
-              <TouchableOpacity
+              <Pressable
                 onPress={onSubmit}
                 disabled={!input.trim()}
-                className={`p-2 rounded-md ${
-                  input.trim() 
-                    ? "bg-primary" 
-                    : "bg-muted"
+                className={`p-2 rounded-lg active:opacity-70 ${
+                  input.trim() ? "bg-accent" : "bg-surface"
                 }`}
               >
                 <Ionicons
                   name="send"
                   size={20}
-                  color={input.trim() ? "#ffffff" : "#6b7280"}
+                  color={input.trim() ? foregroundColor : mutedColor}
                 />
-              </TouchableOpacity>
+              </Pressable>
             </View>
           </View>
         </View>
       </KeyboardAvoidingView>
     </Container>
   );
-} 
+}

package/templates/examples/ai/native/uniwind/polyfills.js

@@ -0,0 +1,26 @@
+import structuredClone from "@ungap/structured-clone";
+import { Platform } from "react-native";
+
+if (Platform.OS !== "web") {
+  const setupPolyfills = async () => {
+    const { polyfillGlobal } = await import(
+      "react-native/Libraries/Utilities/PolyfillFunctions"
+    );
+
+    const { TextEncoderStream, TextDecoderStream } = await import(
+      "@stardazed/streams-text-encoding"
+    );
+
+    if (!("structuredClone" in global)) {
+      polyfillGlobal("structuredClone", () => structuredClone);
+    }
+
+    polyfillGlobal("TextEncoderStream", () => TextEncoderStream);
+    polyfillGlobal("TextDecoderStream", () => TextDecoderStream);
+  };
+
+  setupPolyfills();
+}
+
+export {};
+