Initial commit

packages/ui/.gitignore

@@ -0,0 +1,5 @@
+dist/
+.DS_Store
+THUMBS_DB
+node_modules/
+types/

packages/ui/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@my/ui",
+  "version": "0.0.1",
+  "sideEffects": [
+    "*.css"
+  ],
+  "private": true,
+  "types": "./src",
+  "main": "src/index.tsx",
+  "module:jsx": "src",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build --skip-types",
+    "watch": "tamagui-build --skip-types --watch"
+  },
+  "dependencies": {
+    "@my/config": "0.0.1",
+    "@tamagui/toast": "^1.132.18",
+    "tamagui": "^1.132.18"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.132.18"
+  }
+}

packages/ui/src/CustomToast.tsx

@@ -0,0 +1,11 @@
+import Constants, { ExecutionEnvironment } from 'expo-constants'
+import { NativeToast as Toast } from './NativeToast'
+
+const isExpo = Constants.executionEnvironment === ExecutionEnvironment.StoreClient
+
+export const CustomToast = () => {
+  if (isExpo) {
+    return null
+  }
+  return <Toast />
+}

packages/ui/src/MyComponent.tsx

@@ -0,0 +1,14 @@
+import { YStack, styled } from 'tamagui'
+
+export const MyComponent = styled(YStack, {
+  name: 'MyComponent',
+  bg: 'red',
+
+  variants: {
+    blue: {
+      true: {
+        bg: 'blue',
+      },
+    },
+  } as const,
+})

packages/ui/src/NativeToast.tsx

@@ -0,0 +1,29 @@
+import { Toast, useToastState } from '@tamagui/toast'
+import { YStack } from 'tamagui'
+
+export const NativeToast = () => {
+  const currentToast = useToastState()
+
+  if (!currentToast || currentToast.isHandledNatively) {
+    return null
+  }
+
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      viewportName={currentToast.viewportName}
+      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
+      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+      y={0}
+      opacity={1}
+      scale={1}
+      animation="quick"
+    >
+      <YStack py="$1.5" px="$2">
+        <Toast.Title lineHeight="$1">{currentToast.title}</Toast.Title>
+        {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
+      </YStack>
+    </Toast>
+  )
+}

packages/ui/src/SwitchRouterButton.tsx

@@ -0,0 +1,9 @@
+import { Anchor, Button } from 'tamagui'
+
+export const SwitchRouterButton = ({ pagesMode = false }: { pagesMode?: boolean }) => {
+  return (
+    <Anchor text="center" color="$color12" href={pagesMode ? '/' : '/pages-example'}>
+      <Button>Change router: {pagesMode ? 'pages' : 'app'}</Button>
+    </Anchor>
+  )
+}

packages/ui/src/SwitchThemeButton.tsx

@@ -0,0 +1,16 @@
+import { useState } from 'react'
+import { Button, useIsomorphicLayoutEffect } from 'tamagui'
+import { useThemeSetting, useRootTheme } from '@tamagui/next-theme'
+
+export const SwitchThemeButton = () => {
+  const themeSetting = useThemeSetting()
+  const [theme] = useRootTheme()
+
+  const [clientTheme, setClientTheme] = useState<string | undefined>('light')
+
+  useIsomorphicLayoutEffect(() => {
+    setClientTheme(themeSetting.forcedTheme || themeSetting.current || theme)
+  }, [themeSetting.current, themeSetting.resolvedTheme])
+
+  return <Button onPress={themeSetting.toggle}>Change theme: {clientTheme}</Button>
+}

packages/ui/src/index.tsx

@@ -0,0 +1,7 @@
+export * from 'tamagui'
+export * from '@tamagui/toast'
+export * from './MyComponent'
+export { config } from '@my/config'
+export * from './CustomToast'
+export * from './SwitchThemeButton'
+export * from './SwitchRouterButton'

packages/ui/src/types.d.ts

@@ -0,0 +1,7 @@
+import { config } from '@my/config'
+
+export type Conf = typeof config
+
+declare module 'tamagui' {
+  interface TamaguiCustomConfig extends Conf {}
+}

packages/ui/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base",
+  "include": ["**/*.ts", "**/*.tsx", "../config/src/tamagui.config.ts"],
+  "compilerOptions": {
+    "composite": true,
+    "jsx": "react-jsx"
+  },
+  "references": []
+}