feat: add tamagui template

examples/one-basic/app/_layout.tsx

@@ -1,5 +1,18 @@
 import { Slot } from 'one'
 
 export default function Layout() {
-  return <Slot />
+  return (
+    <>
+      {typeof window !== 'undefined' && (
+        <>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
+          <link rel="icon" href="/favicon.svg" />
+        </>
+      )}
+
+      <Slot />
+    </>
+  )
 }

examples/one-basic/package.json

@@ -24,10 +24,10 @@
   },
   "dependencies": {
     "@dotenvx/dotenvx": "^1.12.1",
-    "@tamagui/config": "^1.112.18",
-    "@tamagui/image-next": "^1.112.18",
-    "@tamagui/lucide-icons": "^1.112.18",
-    "@tamagui/vite-plugin": "^1.112.18",
+    "@tamagui/config": "^1.112.21",
+    "@tamagui/image-next": "^1.112.21",
+    "@tamagui/lucide-icons": "^1.112.21",
+    "@tamagui/vite-plugin": "^1.112.21",
     "@vxrn/color-scheme": "1.1.292",
     "better-sqlite3": "^11.2.1",
     "dotenv": "^16.4.5",
@@ -39,16 +39,16 @@
     "postgres": "^3.4.4",
     "react": "^18.3.1",
     "react-native": "0.74.1",
-    "react-native-reanimated": "npm:[email protected].1",
+    "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "^4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "^0.19.12",
-    "tamagui": "^1.112.18"
+    "tamagui": "^1.112.21"
   },
   "devDependencies": {
     "@faker-js/faker": "next",
-    "@tamagui/vite-plugin": "^1.112.18",
+    "@tamagui/vite-plugin": "^1.112.21",
     "tsx": "^4.19.0",
     "vite": "6.0.0-beta.1"
   }

examples/one-fullstack/package.json

@@ -16,26 +16,26 @@
   "dependencies": {
     "@supabase/ssr": "0.4.0",
     "@supabase/supabase-js": "^2.44.4",
-    "@tamagui/image-next": "^1.112.18",
-    "@tamagui/lucide-icons": "^1.112.18",
-    "@tamagui/mdx": "^1.112.18",
-    "@tamagui/one-theme": "^1.112.18",
+    "@tamagui/image-next": "^1.112.21",
+    "@tamagui/lucide-icons": "^1.112.21",
+    "@tamagui/mdx": "^1.112.21",
+    "@tamagui/one-theme": "^1.112.21",
     "jsonwebtoken": "^9.0.2",
     "mdx-bundler": "^10.0.2",
     "one": "1.1.292",
     "postmark": "^3.0.18",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": "0.74.1",
-    "react-native-reanimated": "npm:[email protected].1",
+    "react-native-reanimated": "~3.10.1",
     "react-native-svg": "15.2.0",
     "swr": "^2.2.5",
-    "tamagui": "^1.112.18",
+    "tamagui": "^1.112.21",
     "vite": "6.0.0-beta.1",
     "vite-plugin-inspect": "^0.8.7"
   },
   "devDependencies": {
-    "@tamagui/vite-plugin": "^1.112.18",
+    "@tamagui/vite-plugin": "^1.112.21",
     "h3": "1.11.1",
     "supabase": "1.127.4"
   }

examples/one-recommended/app/_layout.tsx

@@ -4,14 +4,23 @@ import '~/code/styles/base.css'
 import '~/code/styles/tamagui.css'
 
 import { SchemeProvider, useColorScheme } from '@vxrn/color-scheme'
-import { TamaguiProvider } from 'tamagui'
+import { isWeb, TamaguiProvider } from 'tamagui'
 import { LoadProgressBar } from 'one'
 import { HomeLayout } from '~/code/home/HomeLayout'
 import config from '../config/tamagui.config'
 
 export default function Layout() {
   return (
     <>
+      {isWeb && (
+        <>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
+          <link rel="icon" href="/favicon.svg" />
+        </>
+      )}
+
       <LoadProgressBar />
 
       <SchemeProvider>

examples/one-recommended/config/tamagui.config.ts

@@ -3,13 +3,6 @@ import { createTamagui } from '@tamagui/core'
 
 export const config = createTamagui({
   ...configOptions,
-  media: {
-    ...configOptions.media,
-    xsTouch: {
-      maxWidth: configOptions.media.xs.maxWidth,
-      pointer: 'coarse',
-    },
-  },
   settings: {
     ...configOptions.settings,
     fastSchemeChange: true,

examples/one-recommended/package.json

@@ -24,10 +24,9 @@
   },
   "dependencies": {
     "@dotenvx/dotenvx": "^1.12.1",
-    "@tamagui/config": "^1.112.18",
-    "@tamagui/image-next": "^1.112.18",
-    "@tamagui/lucide-icons": "^1.112.18",
-    "@tamagui/vite-plugin": "^1.112.18",
+    "@tamagui/config": "^1.112.21",
+    "@tamagui/image-next": "^1.112.21",
+    "@tamagui/lucide-icons": "^1.112.21",
     "@vxrn/color-scheme": "1.1.292",
     "better-sqlite3": "^11.2.1",
     "dotenv": "^16.4.5",
@@ -44,12 +43,12 @@
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "^0.19.12",
-    "tamagui": "^1.112.18"
+    "tamagui": "^1.112.21"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
     "@faker-js/faker": "next",
-    "@tamagui/vite-plugin": "^1.112.18",
+    "@tamagui/vite-plugin": "^1.112.21",
     "tsx": "^4.19.0",
     "vite": "6.0.0-beta.1"
   }

examples/one-tamagui/.env.default

@@ -0,0 +1,2 @@
+DATABASE_URL=postgresql://user:password@localhost:5432/basic_example
+ONE_SERVER_URL=

examples/one-tamagui/.gitignore

@@ -0,0 +1,36 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+.turbo
+
+tmp
+dist
+node_modules
+
+*.tsbuildinfo
+*.tmp.js
+
+yarn-error.log
+tsconfig.tsbuildinfo
+.DS_Store
+
+.tamagui
+
+.idea
+
+.env
+# local env files
+.env.local
+.env.development.local
+.env.test.localp
+.env.production.local
+
+.expo
+
+# generated code
+/ios
+/android

examples/one-tamagui/README.md

@@ -0,0 +1,31 @@
+# One Project
+
+Welcome to One!
+
+## Developing
+
+Run your One app in development:
+
+```bash
+yarn dev
+```
+
+## Production
+
+To build your app for production:
+
+### Web
+
+```bash
+yarn build:web
+```
+
+### iOS
+
+First, you'll need to generate the native code for your app:
+
+```bash
+yarn prebuild:native
+```
+
+Afterward, follow the instructions printed in the terminal to build and upload your iOS app for distribution.

examples/one-tamagui/app.json

@@ -0,0 +1,18 @@
+{
+  "expo": {
+    "name": "one-example",
+    "slug": "one-example",
+    "sdkVersion": "51.0.0",
+    "platforms": ["ios", "android"],
+    "plugins": ["vxrn/expo-plugin"],
+    "icon": "./public/app-icon.png",
+    "splash": {
+      "image": "./public/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#000000"
+    },
+    "ios": {
+      "bundleIdentifier": "dev.onestack.example-tamagui"
+    }
+  }
+}

examples/one-tamagui/app/_layout.css

@@ -0,0 +1,24 @@
+html,
+body {
+  max-width: 100vw;
+}
+
+body {
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  position: relative;
+  max-width: 100vw;
+  height: 100vh;
+  background-color: var(--color1);
+}
+
+a {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--color025);
+  text-underline-offset: 3px;
+  transition: all ease-in 100ms;
+}

examples/one-tamagui/app/_layout.tsx

@@ -0,0 +1,40 @@
+import './_layout.css'
+import './tamagui.css'
+
+import { SchemeProvider, useColorScheme } from '@vxrn/color-scheme'
+import { LoadProgressBar, Slot } from 'one'
+import { isWeb, TamaguiProvider } from 'tamagui'
+import config from '~/config/tamagui/tamagui.config'
+
+export default function Layout() {
+  return (
+    <>
+      {isWeb && (
+        <>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
+          <link rel="icon" href="/favicon.svg" />
+        </>
+      )}
+
+      <LoadProgressBar />
+
+      <SchemeProvider>
+        <TamaguiRootProvider>
+          <Slot />
+        </TamaguiRootProvider>
+      </SchemeProvider>
+    </>
+  )
+}
+
+const TamaguiRootProvider = ({ children }: { children: React.ReactNode }) => {
+  const [scheme] = useColorScheme()
+
+  return (
+    <TamaguiProvider disableInjectCSS config={config} defaultTheme={scheme} disableRootThemeClass>
+      {children}
+    </TamaguiProvider>
+  )
+}

examples/one-tamagui/app/index.tsx

@@ -0,0 +1,14 @@
+import { Image } from '@tamagui/image-next'
+import { Text, YStack } from 'tamagui'
+import { ToggleThemeButton } from '~/code/ToggleThemeButton'
+import oneBall from '~/public/app-icon.png'
+
+export function HomePage() {
+  return (
+    <YStack mih="100vh" gap="$4" ai="center" jc="center" f={1}>
+      <Text fontSize={20}>Hello, world</Text>
+      <Image src={oneBall} width={128} height={128} />
+      <ToggleThemeButton />
+    </YStack>
+  )
+}