init: 初始化模板项目

packages/app/provider/NextTamaguiProvider.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import '@tamagui/core/reset.css'
+import '@tamagui/font-inter/css/400.css'
+import '@tamagui/font-inter/css/700.css'
+import '@tamagui/polyfill-dev'
+
+import type { ReactNode } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
+import { config } from '@my/ui'
+import { Provider } from 'app/provider'
+import { StyleSheet } from 'react-native'
+
+export const NextTamaguiProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setTheme] = useRootTheme()
+
+  useServerInsertedHTML(() => {
+    // @ts-ignore
+    const rnwStyle = StyleSheet.getSheet()
+    return (
+      <>
+        <link rel="stylesheet" href="/tamagui.css" />
+        <style dangerouslySetInnerHTML={{ __html: rnwStyle.textContent }} id={rnwStyle.id} />
+        <style
+          dangerouslySetInnerHTML={{
+            // the first time this runs you'll get the full CSS including all themes
+            // after that, it will only return CSS generated since the last call
+            __html: config.getNewCSS(),
+          }}
+        />
+
+        <style
+          dangerouslySetInnerHTML={{
+            __html: config.getCSS({
+              exclude: process.env.NODE_ENV === 'production' ? 'design-system' : null,
+            }),
+          }}
+        />
+
+        <script
+          dangerouslySetInnerHTML={{
+            // avoid flash of animated things on enter:
+            __html: `document.documentElement.classList.add('t_unmounted')`,
+          }}
+        />
+      </>
+    )
+  })
+
+  return (
+    <NextThemeProvider
+      skipNextHead
+      defaultTheme="light"
+      onChangeTheme={(next) => {
+        setTheme(next as any)
+      }}
+    >
+      <Provider disableRootThemeClass defaultTheme={theme || 'light'}>
+        {children}
+      </Provider>
+    </NextThemeProvider>
+  )
+}

packages/app/provider/ToastViewport.tsx

@@ -0,0 +1,11 @@
+import { ToastViewport as ToastViewportOg } from '@my/ui'
+
+export const ToastViewport = () => {
+  return (
+    <ToastViewportOg
+      top="$8"
+      left={0}
+      right={0}
+    />
+  )
+}

packages/app/provider/ToastViewport.web.tsx

@@ -0,0 +1,11 @@
+import { ToastViewport as ToastViewportOg } from '@my/ui'
+
+export const ToastViewport = () => {
+  return (
+    <ToastViewportOg
+      left={0}
+      right={0}
+      top={10}
+    />
+  )
+}

packages/app/provider/index.tsx

@@ -0,0 +1,29 @@
+import { useColorScheme } from 'react-native'
+import {
+  CustomToast,
+  TamaguiProvider,
+  type TamaguiProviderProps,
+  ToastProvider,
+  config,
+  isWeb,
+} from '@my/ui'
+import { ToastViewport } from './ToastViewport'
+
+export function Provider({
+  children,
+  defaultTheme = 'light',
+  ...rest
+}: Omit<TamaguiProviderProps, 'config'> & { defaultTheme?: string }) {
+  const colorScheme = useColorScheme()
+  const theme = defaultTheme || (colorScheme === 'dark' ? 'dark' : 'light')
+
+  return (
+    <TamaguiProvider config={config} defaultTheme={theme} {...rest}>
+      <ToastProvider swipeDirection="horizontal" duration={6000} native={isWeb ? [] : ['mobile']}>
+        {children}
+        <CustomToast />
+        <ToastViewport />
+      </ToastProvider>
+    </TamaguiProvider>
+  )
+}

packages/app/provider/safe-area/index.tsx

@@ -0,0 +1 @@
+export { SafeAreaProvider as SafeArea } from 'react-native-safe-area-context'

packages/app/provider/safe-area/index.web.tsx

@@ -0,0 +1,10 @@
+// on Web, we don't use React Navigation, so we are going to avoid the safe area provider
+// instead, we just have a no-op here
+// for more, see: https://solito.dev/recipes/tree-shaking
+
+// if you need safe area hooks yourself, you can implement this yourself
+// however, you may be better off using the CSS selector for env(safe-area-inset-top) on Web
+
+// for more, see the `./use-safe-area.web.ts` file
+
+export const SafeArea = ({ children }: { children: React.ReactElement }) => <>{children}</>

packages/app/provider/safe-area/use-safe-area.ts

@@ -0,0 +1,6 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+const useSafeArea = useSafeAreaInsets
+
+// `export { useSafeAreaInsets as useSafeArea }` breaks autoimport, so do this instead
+export { useSafeArea }

packages/app/provider/safe-area/use-safe-area.web.ts

@@ -0,0 +1,31 @@
+// I don't use the real useSafeAreaInsets() hook, since
+// 1) the SafeAreaProvider forces you to render null on Web until it measures
+// 2) you might not need to support it, unless you're doing landscape stuff
+// 3) react-native-safe-area-context has a massive import on Web
+// see: https://github.com/th3rdwave/react-native-safe-area-context/pull/189#issuecomment-815274313
+// 4) most importantly, I think you can just use the env(safe-area-inset-bottom) CSS variable instead
+// after all, safe area code is few-and-far-between, so if you have to write some platform-speciifc code for it,
+// that is probably better than a massive bundle size for little benefit
+
+import type { useSafeArea as nativeHook } from './use-safe-area'
+
+const area = {
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+
+  // you could also use CSS env variables like below:
+  // but you'll have to be sure to override the types for `useSafeArea`
+  // and make sure to never add numbers and strings when you consue useSafeArea
+  // just keep in mind that the env() doesn't work on older browsers I think
+
+  // top: `env(safe-area-inset-top)`,
+  // right: `env(safe-area-inset-right)`,
+  // bottom: `env(safe-area-inset-bottom)`,
+  // left: `env(safe-area-inset-left)`,
+}
+
+export function useSafeArea(): ReturnType<typeof nativeHook> {
+  return area
+}