create-better-t-stack 2.44.0 → 2.45.0

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

@@ -0,0 +1,21 @@
+module.exports = (api) => {
+	api.cache(true);
+	const plugins = [];
+
+	plugins.push([
+		"react-native-unistyles/plugin",
+		{
+			root: "src",
+			autoProcessRoot: "app",
+			autoProcessImports: ["@/components"],
+		},
+	]);
+
+	plugins.push("react-native-worklets/plugin");
+
+	return {
+		presets: ["babel-preset-expo"],
+
+		plugins,
+	};
+};

package/templates/frontend/native/unistyles/components/{container.tsx → container.tsx.hbs}

@@ -1,5 +1,5 @@
 import React from "react";
-import { SafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
 
 export const Container = ({ children }: { children: React.ReactNode }) => {

package/templates/frontend/native/unistyles/components/{header-button.tsx → header-button.tsx.hbs}

@@ -14,7 +14,7 @@ export const HeaderButton = forwardRef<
           name="info-circle"
           size={20}
           color={styles.icon.color}
-          style={{
+          style=\{{
             opacity: pressed ? 0.7 : 1,
           }}
         />

package/templates/frontend/native/{nativewind/components/tabbar-icon.tsx → unistyles/components/tabbar-icon.tsx.hbs}

@@ -4,5 +4,5 @@ export const TabBarIcon = (props: {
   name: React.ComponentProps<typeof FontAwesome>["name"];
   color: string;
 }) => {
-  return <FontAwesome size={24} style={{ marginBottom: -3 }} {...props} />;
+  return <FontAwesome size={24} style=\{{ marginBottom: -3 }} {...props} />;
 };

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

@@ -0,0 +1,5 @@
+const { getDefaultConfig } = require("expo/metro-config");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = config;

package/templates/frontend/native/unistyles/package.json.hbs

@@ -1,6 +1,7 @@
 {
   "name": "native",
   "version": "1.0.0",
+  "private": true,
   "main": "index.js",
   "scripts": {
     "dev": "expo start --clear",
@@ -9,7 +10,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/vector-icons": "^14.1.0",
+    "@expo/vector-icons": "^15.0.2",
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/drawer": "^7.3.9",
     "@react-navigation/native": "^7.1.6",
@@ -17,35 +18,35 @@
     "@stardazed/streams-text-encoding": "^1.0.2",
     "@ungap/structured-clone": "^1.3.0",
     {{/if}}
-    "@tanstack/react-form": "^1.14.0",
-    "babel-plugin-react-compiler": "^19.1.0-rc.2",
-    "expo": "^53.0.17",
-    "expo-constants": "~17.1.7",
-    "expo-crypto": "~14.1.5",
-    "expo-linking": "~7.1.7",
-    "expo-router": "~5.1.3",
-    "expo-secure-store": "~14.2.3",
-    "expo-status-bar": "~2.2.3",
-    "expo-system-ui": "~5.0.10",
-    "expo-dev-client": "~5.2.4",
-    "expo-web-browser": "~14.2.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.5",
-    "react-native-edge-to-edge": "1.6.0",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-nitro-modules": "0.26.3",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.11.1",
-    "react-native-unistyles": "^3.0.0",
-    "react-native-web": "^0.20.0"
+    "@tanstack/react-form": "^1.0.5",
+    "expo": "^54.0.0",
+    "expo-constants": "~18.0.8",
+    "expo-crypto": "~15.0.6",
+    "expo-linking": "~8.0.7",
+    "expo-router": "~6.0.0",
+    "expo-secure-store": "~15.0.6",
+    "expo-splash-screen": "~31.0.8",
+		"expo-status-bar": "^3.0.7",
+    "expo-system-ui": "~6.0.7",
+		"expo-dev-client": "~6.0.11",
+    "expo-web-browser": "~15.0.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+		"react-native-edge-to-edge": "^1.7.0",
+    "react-native-gesture-handler": "~2.28.0",
+		"react-native-nitro-modules": "^0.29.4",
+    "react-native-reanimated": "~4.1.0",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+		"react-native-unistyles": "^3.0.12",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "^0.5.1"
   },
   "devDependencies": {
     "ajv": "^8.17.1",
     "@babel/core": "^7.28.0",
-    "@types/react": "~19.0.10",
-    "typescript": "~5.8.3"
-  },
-  "private": true
+    "@types/react": "~19.1.10",
+    "typescript": "~5.9.2"
+  }
 }

package/templates/frontend/native/unistyles/theme.ts.hbs

@@ -0,0 +1,98 @@
+const sharedColors = {
+  success: "#22C55E",
+  destructive: "#EF4444",
+  warning: "#F59E0B",
+  info: "#3B82F6",
+} as const;
+
+export const lightTheme = {
+  colors: {
+    ...sharedColors,
+    typography: "hsl(0 0% 0%)",
+    background: "hsl(0 0% 100%)",
+    foreground: "hsl(0 0% 0%)",
+    card: "hsl(0 0% 98%)",
+    cardForeground: "hsl(0 0% 0%)",
+    primary: "hsl(0 0% 10%)",
+    primaryForeground: "hsl(0 0% 100%)",
+    secondary: "hsl(0 0% 95%)",
+    secondaryForeground: "hsl(0 0% 0%)",
+    muted: "hsl(0 0% 96%)",
+    mutedForeground: "hsl(0 0% 45%)",
+    accent: "hsl(0 0% 96%)",
+    accentForeground: "hsl(0 0% 0%)",
+    border: "hsl(0 0% 90%)",
+    input: "hsl(0 0% 90%)",
+    ring: "hsl(0 0% 20%)",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+  },
+  borderRadius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+  },
+} as const;
+
+export const darkTheme = {
+  colors: {
+    ...sharedColors,
+    typography: "hsl(0 0% 100%)",
+    background: "hsl(0 0% 0%)",
+    foreground: "hsl(0 0% 100%)",
+    card: "hsl(0 0% 2%)",
+    cardForeground: "hsl(0 0% 100%)",
+    primary: "hsl(0 0% 90%)",
+    primaryForeground: "hsl(0 0% 0%)",
+    secondary: "hsl(0 0% 10%)",
+    secondaryForeground: "hsl(0 0% 100%)",
+    muted: "hsl(0 0% 8%)",
+    mutedForeground: "hsl(0 0% 65%)",
+    accent: "hsl(0 0% 8%)",
+    accentForeground: "hsl(0 0% 100%)",
+    border: "hsl(0 0% 15%)",
+    input: "hsl(0 0% 15%)",
+    ring: "hsl(0 0% 80%)",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+  },
+  borderRadius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+  },
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+  },
+} as const;

package/templates/frontend/react/next/package.json.hbs

@@ -15,8 +15,8 @@
     "lucide-react": "^0.487.0",
     "next": "15.5.0",
     "next-themes": "^0.4.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.4",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.10",
     "@types/node": "^20",
-    "@types/react": "^19",
+    "@types/react": "~19.1.10",
     "@types/react-dom": "^19",
     "tailwindcss": "^4.1.10",
     "typescript": "^5"

package/templates/frontend/react/react-router/package.json.hbs

@@ -19,8 +19,8 @@
     "isbot": "^5.1.28",
     "lucide-react": "^0.511.0",
     "next-themes": "^0.4.6",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-router": "^7.6.1",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.3.0",
@@ -31,7 +31,7 @@
     "@react-router/dev": "^7.6.1",
     "@tailwindcss/vite": "^4.1.8",
     "@types/node": "^20",
-    "@types/react": "^19.0.12",
+    "@types/react": "~19.1.10",
     "@types/react-dom": "^19.0.4",
     "react-router-devtools": "^1.1.0",
     "tailwindcss": "^4.1.8",

package/templates/frontend/react/tanstack-router/package.json.hbs

@@ -20,8 +20,8 @@
 		"clsx": "^2.1.1",
 		"lucide-react": "^0.473.0",
         "next-themes": "^0.4.6",
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0",
+		"react": "19.1.0",
+		"react-dom": "19.1.0",
         "sonner": "^2.0.5",
 		"tailwind-merge": "^3.3.1",
 		"tw-animate-css": "^1.2.5",
@@ -31,7 +31,7 @@
 		"@tanstack/react-router-devtools": "^1.114.27",
 		"@tanstack/router-plugin": "^1.114.27",
 		"@types/node": "^22.13.13",
-		"@types/react": "^19.0.12",
+		"@types/react": "~19.1.10",
 		"@types/react-dom": "^19.0.4",
 		"@vitejs/plugin-react": "^4.3.4",
 		"postcss": "^8.5.3",

package/templates/frontend/react/tanstack-start/package.json.hbs

@@ -20,8 +20,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "next-themes": "^0.4.6",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "sonner": "^2.0.3",
     "tailwindcss": "^4.1.3",
     "tailwind-merge": "^3.3.1",
@@ -33,7 +33,7 @@
     "@tanstack/react-router-devtools": "^1.121.0-alpha.27",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.0.12",
+    "@types/react": "~19.1.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^5.0.1",
     "jsdom": "^26.0.0",

package/templates/frontend/native/nativewind/app/+html.tsx

@@ -1,47 +0,0 @@
-import { ScrollViewStyleReset } from 'expo-router/html';
-import { ReactNode } from 'react';
-
-// This file is web-only and used to configure the root HTML for every
-// web page during static rendering.
-// The contents of this function only run in Node.js environments and
-// do not have access to the DOM or browser APIs.
-export default function Root({ children }: { children: ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
-
-        {/*
-          This viewport disables scaling which makes the mobile website act more like a native app.
-          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
-            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-        */}
-        <meta
-          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
-          name="viewport"
-        />
-        {/*
-          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
-          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
-        */}
-        <ScrollViewStyleReset />
-
-        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
-        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
-        {/* Add any additional <head> elements that you want globally available on web... */}
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
-
-const responsiveBackground = `
-body {
-  background-color: #fff;
-}
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #000;
-  }
-}`;

package/templates/frontend/native/nativewind/app-env.d.ts

@@ -1,2 +0,0 @@
-// @ts-ignore
-/// <reference types="nativewind/types" />

package/templates/frontend/native/nativewind/app.json

@@ -1,46 +0,0 @@
-{
-  "expo": {
-    "name": "my-better-t-app",
-    "slug": "my-better-t-app",
-    "version": "1.0.0",
-    "scheme": "my-better-t-app",
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/favicon.png"
-    },
-    "plugins": [
-      "expo-router",
-      "expo-secure-store",
-      "expo-web-browser"
-    ],
-    "experiments": {
-      "typedRoutes": true,
-      "tsconfigPaths": true
-    },
-    "newArchEnabled": true,
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.amanvarshney01.mybettertapp"
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      },
-      "package": "com.amanvarshney01.mybettertapp",
-      "edgeToEdgeEnabled": true
-    }
-  }
-}

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

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

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

@@ -1,59 +0,0 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require("expo/metro-config");
-const { FileStore } = require("metro-cache");
-const { withNativeWind } = require("nativewind/metro");
-const path = require("node:path");
-
-const config = withTurborepoManagedCache(
-  withMonorepoPaths(
-    withNativeWind(getDefaultConfig(__dirname), {
-      input: "./global.css",
-      configPath: "./tailwind.config.js",
-    }),
-  ),
-);
-
-config.resolver.unstable_enablePackageExports = true;
-
-config.resolver.disableHierarchicalLookup = true;
-
-module.exports = config;
-
-/**
- * Add the monorepo paths to the Metro config.
- * This allows Metro to resolve modules from the monorepo.
- *
- * @see https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
- * @param {import('expo/metro-config').MetroConfig} config
- * @returns {import('expo/metro-config').MetroConfig}
- */
-function withMonorepoPaths(config) {
-  const projectRoot = __dirname;
-  const workspaceRoot = path.resolve(projectRoot, "../..");
-
-  // #1 - Watch all files in the monorepo
-  config.watchFolders = [workspaceRoot];
-
-  // #2 - Resolve modules within the project's `node_modules` first, then all monorepo modules
-  config.resolver.nodeModulesPaths = [
-    path.resolve(projectRoot, "node_modules"),
-    path.resolve(workspaceRoot, "node_modules"),
-  ];
-
-  return config;
-}
-
-/**
- * Move the Metro cache to the `.cache/metro` folder.
- * If you have any environment variables, you can configure Turborepo to invalidate it when needed.
- *
- * @see https://turbo.build/repo/docs/reference/configuration#env
- * @param {import('expo/metro-config').MetroConfig} config
- * @returns {import('expo/metro-config').MetroConfig}
- */
-function withTurborepoManagedCache(config) {
-  config.cacheStores = [
-    new FileStore({ root: path.join(__dirname, ".cache/metro") }),
-  ];
-  return config;
-}

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

@@ -1,59 +0,0 @@
-const { hairlineWidth } = require("nativewind/theme");
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: "class",
-  content: ["./app/**/*.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}"],
-
-  presets: [require("nativewind/preset")],
-  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(),
-      },
-    },
-  },
-  plugins: [],
-};

package/templates/frontend/native/unistyles/app/+html.tsx

@@ -1,48 +0,0 @@
-import { ScrollViewStyleReset } from 'expo-router/html';
-
-import '../unistyles';
-
-// This file is web-only and used to configure the root HTML for every
-// web page during static rendering.
-// The contents of this function only run in Node.js environments and
-// do not have access to the DOM or browser APIs.
-export default function Root({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-
-        {/*
-          This viewport disables scaling which makes the mobile website act more like a native app.
-          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
-            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-        */}
-        <meta
-          name="viewport"
-          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
-        />
-        {/*
-          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
-          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
-        */}
-        <ScrollViewStyleReset />
-
-        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
-        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
-        {/* Add any additional <head> elements that you want globally available on web... */}
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
-
-const responsiveBackground = `
-body {
-  background-color: #fff;
-}
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #000;
-  }
-}`;

package/templates/frontend/native/unistyles/app.json

@@ -1,44 +0,0 @@
-{
-  "expo": {
-    "name": "my-better-t-app",
-    "slug": "my-better-t-app",
-    "version": "1.0.0",
-    "newArchEnabled": true,
-    "scheme": "my-better-t-app",
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/favicon.png"
-    },
-    "plugins": [
-      "expo-router",
-      "react-native-edge-to-edge",
-      "expo-secure-store"
-    ],
-    "experiments": {
-      "typedRoutes": true,
-      "tsconfigPaths": true,
-      "reactCompiler": true
-    },
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "automatic",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": ["**/*"],
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.amanvarshney01.mybettertapp"
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      },
-      "package": "com.amanvarshney01.mybettertapp"
-    }
-  }
-}