npm - create-better-t-stack - Versions diffs - 1.1.0 → 1.3.0 - Mend

create-better-t-stack 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/template/base/apps/native/app/(drawer)/(tabs)/two.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import { Stack } from "expo-router";
+import { View, Text } from "react-native";
+import { Container } from "@/components/container";
+export default function Home() {
+  return (
+    <>
+      <Container>
+        <View>
+          <Text>Tab Two</Text>
+        </View>
+      </Container>
+    </>
+  );
+}

package/template/base/apps/native/app/(drawer)/_layout.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { Link } from "expo-router";
+import { Drawer } from "expo-router/drawer";
+import { HeaderButton } from "@/components/header-button";
+const DrawerLayout = () => {
+  return (
+    <Drawer>
+      <Drawer.Screen
+        name="index"
+        options={{
+          headerTitle: "Home",
+          drawerLabel: "Home",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      <Drawer.Screen
+        name="(tabs)"
+        options={{
+          headerTitle: "Tabs",
+          drawerLabel: "Tabs",
+          drawerIcon: ({ size, color }) => (
+            <MaterialIcons name="border-bottom" size={size} color={color} />
+          ),
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <HeaderButton />
+            </Link>
+          ),
+        }}
+      />
+    </Drawer>
+  );
+};
+export default DrawerLayout;

package/template/base/apps/native/app/(drawer)/index.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import { useQuery } from "@tanstack/react-query";
+import { View, Text, ScrollView } from "react-native";
+import { Container } from "@/components/container";
+import { trpc } from "@/utils/trpc";
+export default function Home() {
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  return (
+    <Container>
+      <ScrollView className="py-4 flex-1">
+        <Text className="font-mono text-foreground text-2xl font-bold mb-6">
+          BETTER T STACK
+        </Text>
+        <View className="rounded-lg border border-foreground p-4">
+          <Text className="mb-2 font-medium text-foreground">API Status</Text>
+          <View className="flex-row items-center gap-2">
+            <View
+              className={`h-2.5 w-2.5 rounded-full ${
+                healthCheck.data ? "bg-green-500" : "bg-red-500"
+              }`}
+            />
+            <Text className="text-sm text-foreground">
+              {healthCheck.isLoading
+                ? "Checking..."
+                : healthCheck.data
+                  ? "Connected"
+                  : "Disconnected"}
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}

package/template/base/apps/native/app/+html.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+// 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/template/base/apps/native/app/+not-found.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { Link, Stack } from 'expo-router';
+import { Text } from 'react-native';
+import { Container } from '@/components/container';
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Container>
+        <Text className="text-xl font-bold">This screen doesn't exist.</Text>
+        <Link href="/" className="mt-4 pt-4">
+          <Text className="text-base text-[#2e78b7]">Go to home screen!</Text>
+        </Link>
+      </Container>
+    </>
+  );
+}

package/template/base/apps/native/app/_layout.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Stack } from "expo-router";
+import {
+  DarkTheme,
+  DefaultTheme,
+  Theme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import "../global.css";
+import { queryClient } from "@/utils/trpc";
+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 = {
+  // Ensure that reloading on `/modal` keeps a back button present.
+  initialRouteName: "(drawer)",
+};
+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") {
+      // Adds the background color to the html element to prevent white background on overscroll.
+      document.documentElement.classList.add("bg-background");
+    }
+    setAndroidNavigationBar(colorScheme);
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
+  }, []);
+  if (!isColorSchemeLoaded) {
+    return null;
+  }
+  return (
+    <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>
+  );
+}
+const useIsomorphicLayoutEffect =
+  Platform.OS === "web" && typeof window === "undefined"
+    ? React.useEffect
+    : React.useLayoutEffect;

package/template/base/apps/native/app/modal.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import { Text, View } from "react-native";
+import { Container } from "@/components/container";
+export default function Modal() {
+  return (
+    <>
+      <Container>
+        <View>
+          <Text>HI MODAL</Text>
+        </View>
+      </Container>
+    </>
+  );
+}

package/template/base/apps/native/app-env.d.ts ADDED Viewed

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

package/template/base/apps/native/app.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "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"],
+    "experiments": {
+      "typedRoutes": true,
+      "tsconfigPaths": 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"
+    }
+  }
+}

package/template/base/apps/native/assets/adaptive-icon.png ADDED Viewed

Binary file

package/template/base/apps/native/assets/favicon.png ADDED Viewed

Binary file

package/template/base/apps/native/assets/icon.png ADDED Viewed

Binary file

package/template/base/apps/native/assets/splash.png ADDED Viewed

Binary file

package/template/base/apps/native/babel.config.js ADDED Viewed

@@ -0,0 +1,12 @@
+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/template/base/apps/native/components/container.tsx ADDED Viewed

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

package/template/base/apps/native/components/header-button.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { forwardRef } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void }>(
+  ({ onPress }, ref) => {
+    return (
+      <Pressable onPress={onPress}>
+        {({ pressed }) => (
+          <FontAwesome
+            name="info-circle"
+            size={25}
+            color="gray"
+            style={[
+              styles.headerRight,
+              {
+                opacity: pressed ? 0.5 : 1,
+              },
+            ]}
+          />
+        )}
+      </Pressable>
+    );
+  }
+);
+export const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15,
+  },
+});

package/template/base/apps/native/components/tabbar-icon.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { StyleSheet } from 'react-native';
+export const TabBarIcon = (props: {
+  name: React.ComponentProps<typeof FontAwesome>['name'];
+  color: string;
+}) => {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+};
+export const styles = StyleSheet.create({
+  tabBarIcon: {
+    marginBottom: -3,
+  },
+});

package/template/base/apps/native/global.css ADDED Viewed

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+  }
+  .dark:root {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --destructive: 0 72% 51%;
+  }
+}

package/template/base/apps/native/lib/android-navigation-bar.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import * as NavigationBar from "expo-navigation-bar";
+import { Platform } from "react-native";
+import { NAV_THEME } from "@/lib/constants";
+export async function setAndroidNavigationBar(theme: "light" | "dark") {
+  if (Platform.OS !== "android") return;
+  await NavigationBar.setButtonStyleAsync(theme === "dark" ? "light" : "dark");
+  await NavigationBar.setBackgroundColorAsync(
+    theme === "dark" ? NAV_THEME.dark.background : NAV_THEME.light.background,
+  );
+}

package/template/base/apps/native/lib/constants.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export const NAV_THEME = {
+  light: {
+    background: "hsl(0 0% 100%)", // background
+    border: "hsl(240 5.9% 90%)", // border
+    card: "hsl(0 0% 100%)", // card
+    notification: "hsl(0 84.2% 60.2%)", // destructive
+    primary: "hsl(240 5.9% 10%)", // primary
+    text: "hsl(240 10% 3.9%)", // foreground
+  },
+  dark: {
+    background: "hsl(240 10% 3.9%)", // background
+    border: "hsl(240 3.7% 15.9%)", // border
+    card: "hsl(240 10% 3.9%)", // card
+    notification: "hsl(0 72% 51%)", // destructive
+    primary: "hsl(0 0% 98%)", // primary
+    text: "hsl(0 0% 98%)", // foreground
+  },
+};

package/template/base/apps/native/lib/use-color-scheme.ts ADDED Viewed

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

package/template/base/apps/native/metro.config.js ADDED Viewed

@@ -0,0 +1,57 @@
+// 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("path");
+const config = withTurborepoManagedCache(
+  withMonorepoPaths(
+    withNativeWind(getDefaultConfig(__dirname), {
+      input: "./global.css",
+      configPath: "./tailwind.config.js",
+    }),
+  ),
+);
+config.resolver.unstable_enablePackageExports = 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/template/base/apps/native/package.json ADDED Viewed

@@ -0,0 +1,47 @@
+{
+  "name": "native",
+  "version": "1.0.0",
+  "main": "expo-router/entry",
+  "scripts": {
+    "dev": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.4",
+    "@react-navigation/bottom-tabs": "^7.2.0",
+    "@react-navigation/drawer": "^7.1.1",
+    "@react-navigation/native": "^7.0.14",
+    "@tanstack/react-form": "^1.0.5",
+    "@tanstack/react-query": "^5.69.2",
+    "@trpc/client": "^11.0.0",
+    "@trpc/server": "^11.0.0",
+    "@trpc/tanstack-react-query": "^11.0.0",
+    "expo": "^52.0.41",
+    "expo-constants": "~17.0.8",
+    "expo-linking": "~7.0.5",
+    "expo-navigation-bar": "~4.0.8",
+    "expo-router": "~4.0.19",
+    "expo-status-bar": "~2.0.1",
+    "expo-system-ui": "~4.0.8",
+    "expo-web-browser": "~14.0.2",
+    "nativewind": "^4.1.23",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "3.16.2",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@types/react": "~18.3.12",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.8.2"
+  },
+  "private": true
+}

package/template/base/apps/native/tailwind.config.js ADDED Viewed

@@ -0,0 +1,32 @@
+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))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+        },
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+    },
+  },
+  plugins: [],
+};

package/template/base/apps/native/tsconfig.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
+  ]
+}

package/template/base/apps/native/utils/trpc.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { AppRouter } from "../../server/src/routers";
+import { QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+export const queryClient = new QueryClient();
+const trpcClient = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${process.env.EXPO_PUBLIC_SERVER_URL}/trpc`,
+    }),
+  ],
+});
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: trpcClient,
+  queryClient,
+});

package/template/base/apps/server/package.json CHANGED Viewed

@@ -8,10 +8,8 @@
 		"compile": "bun build --compile --minify --sourcemap --bytecode ./src/index.ts --outfile server"
 	},
 	"dependencies": {
-		"@hono/trpc-server": "^0.3.4",
 		"@trpc/server": "^11.0.0",
 		"dotenv": "^16.4.7",
-		"hono": "^4.7.5",
 		"zod": "^3.24.2"
 	},
 	"devDependencies": {

package/template/base/apps/server/tsconfig.json CHANGED Viewed

@@ -8,7 +8,7 @@
 		"skipLibCheck": true,
 		"baseUrl": "./",
 		"outDir": "./dist",
-		"types": ["node"],
+		"types": ["node", "bun"],
 		"jsx": "react-jsx",
 		"jsxImportSource": "hono/jsx"
 	},

package/template/base/apps/{client → web}/package.json RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-	"name": "client",
+	"name": "web",
 	"version": "0.0.0",
 	"private": true,
 	"type": "module",