upstream merge template repository

apps/desktop/package.json

@@ -11,27 +11,17 @@
     "build": "tauri build"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.22.0",
     "@tauri-apps/api": "^1.2.0",
-    "@trpc/client": "^10.9.0",
-    "@trpc/react-query": "^10.9.0",
-    "@trpc/server": "^10.9.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
     "react-router-dom": "^6.7.0",
     "server": "*",
-    "store": "*",
-    "superjson": "^1.12.2"
+    "store": "*"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.2.3",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react-swc": "^3.0.1",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.4",
     "vite": "^4.0.4"
   }
 }

apps/desktop/src/components/Home.tsx

@@ -8,7 +8,7 @@ import Button from "./Button";
 const Home = () => {
   const [greetMsg, setGreetMsg] = useState("");
   const [name, setName] = useState("");
-  const hello = api.task.hello.useQuery({ text: "client" });
+  const hello = api.example.hello.useQuery({ text: "client" });
   const [count, setCount] = useAtom(countAtom);
 
   async function greet() {

apps/mobile/App.tsx

@@ -1,16 +1,20 @@
 import Constants from "expo-constants";
 import { useState } from "react";
 
-import { api } from "$api";
-import useCachedResources from "$hooks/useCachedResources";
+import { api } from "$trpc";
+import { NavigationContainer } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink } from "@trpc/client";
 import { StatusBar } from "expo-status-bar";
-import { KeyboardAvoidingView, Platform } from "react-native";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import Toast from "react-native-toast-message";
 import superjson from "superjson";
-import Navigation from "./navigation";
+import { NavigatorParamList } from "types";
+import StackNavigator from "./navigation/StackNavigator";
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends NavigatorParamList {}
+  }
+}
 
 const { manifest } = Constants;
 const localhost = `http://${manifest!.debuggerHost?.split(":").shift()}:3000`;
@@ -28,25 +32,13 @@ const App = () => {
     }),
   );
 
-  const isCachedResourceLoaded = useCachedResources();
-
-  if (!isCachedResourceLoaded) {
-    return null;
-  }
-
   return (
     <api.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
-        <SafeAreaProvider>
-          <KeyboardAvoidingView
-            behavior={Platform.OS === "ios" ? "padding" : "height"}
-            className="flex-1"
-          >
-            <Navigation />
-            <StatusBar style="dark" />
-            <Toast />
-          </KeyboardAvoidingView>
-        </SafeAreaProvider>
+        <StatusBar style="light" />
+        <NavigationContainer>
+          <StackNavigator />
+        </NavigationContainer>
       </QueryClientProvider>
     </api.Provider>
   );

apps/mobile/app.json

@@ -1,41 +1,31 @@
 {
   "expo": {
-    "name": "productiv",
-    "slug": "productiv",
-    "version": "0.1.0",
+    "name": "zeno",
+    "slug": "zeno",
+    "version": "2.5.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "userInterfaceStyle": "automatic",
-    "scheme": "productiv",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/images/splash.png",
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.zeno.productiv"
+      "supportsTablet": true
     },
     "android": {
-      "package": "com.zeno.productiv",
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
       }
     },
     "web": {
-      "favicon": "./assets/images/favicon.png"
-    },
-    "extra": {
-      "eas": {
-        "projectId": "ae71fe4a-0f1f-4f72-b061-a641f6ea5e21"
-      }
+      "favicon": "./assets/favicon.png"
     }
   }
 }

apps/mobile/babel.config.js

@@ -4,35 +4,13 @@ module.exports = function (api) {
     presets: ["babel-preset-expo"],
     plugins: [
       "nativewind/babel",
-      "react-native-reanimated/plugin",
-      [
-        "module:react-native-dotenv",
-        {
-          moduleName: "$env",
-          path: ".env",
-          blocklist: null,
-          allowlist: null,
-          safe: false,
-          allowUndefined: true,
-        },
-      ],
       [
         "module-resolver",
         {
           alias: {
             $server: "server",
             $store: "store",
-            $utils: "utils",
-            $variables: "variables",
-            $types: "types",
-            $constants: "./constants",
-            $api: "./utils/api.ts",
-            $assets: "./assets",
-            $components: "./components",
-            $hooks: "./hooks",
-            $navigation: "./navigation",
-            $screens: "./screens",
-            $themes: "./themes",
+            $trpc: "./utils/trpc.ts",
           },
         },
       ],

apps/mobile/components/Button.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Pressable, PressableProps, StyleSheet, Text } from "react-native";
+import colors from "../../../colors";
+
+type ButtonProps = {
+  title: string;
+  onPress: () => void;
+  children?: React.ReactNode;
+};
+
+const Button = (props: ButtonProps & PressableProps) => {
+  const { title, onPress, children, ...rest } = props;
+  return (
+    <Pressable
+      {...rest}
+      onPress={onPress}
+      style={({ pressed }) => [styles.button, pressed && styles.pressed]}
+    >
+      {children || <Text className="text-gray-950 font-semibold">{title}</Text>}
+    </Pressable>
+  );
+};
+
+export default Button;
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: colors.lemon[400],
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    margin: 16,
+  },
+  pressed: {
+    backgroundColor: colors.lemon[200],
+  },
+});

apps/mobile/components/Loader.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+
+const Loader = () => {
+  return (
+    <View className="flex h-[100vh] flex-col items-center justify-center">
+      <Text>Loading...</Text>
+    </View>
+  );
+};
+
+export default Loader;

apps/mobile/components/Screen.tsx

@@ -0,0 +1,38 @@
+import { LinearGradient } from "expo-linear-gradient";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  ViewProps,
+} from "react-native";
+import colors from "tailwindcss/colors";
+
+type ScreenProps = {
+  children: React.ReactNode;
+};
+
+const Screen: React.FC<ScreenProps & ViewProps> = ({
+  children,
+  style,
+  ...props
+}) => {
+  return (
+    <LinearGradient
+      colors={[colors.purple[600], colors.purple[900]]}
+      className="h-[100vh]"
+    >
+      <SafeAreaView className="flex-1">
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          style={style}
+          className="flex-1"
+          {...props}
+        >
+          {children}
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+    </LinearGradient>
+  );
+};
+
+export default Screen;

apps/mobile/components/Text.tsx

@@ -1,36 +1,16 @@
-import { FontWeight } from "$types";
-import { FONT_FAMILY, PALETTE } from "$variables";
-import { styled } from "nativewind";
-import {
-  Text as NativeText,
-  TextProps as NativeTextProps,
-  TextStyle,
-} from "react-native";
-
-type TextProps = {
-  children: React.ReactNode;
-  style?: TextStyle | TextStyle[];
-  variant?: FontWeight;
-};
-
-const TextComponent: React.FC<TextProps & NativeTextProps> = (props) => {
-  const { children, style, variant = "regular", ...rest } = props;
-
-  return (
-    <NativeText
-      {...rest}
-      style={[
-        { color: PALETTE.black },
-        {
-          fontFamily:
-            FONT_FAMILY[variant.toUpperCase() as keyof typeof FONT_FAMILY],
-        },
-        style,
-      ]}
-    >
-      {children}
-    </NativeText>
-  );
-};
-
-export const Text = styled(TextComponent);
+import { Text as RNText, TextProps as RNTextProps } from "react-native";
+
+type TextProps = {
+  children: React.ReactNode;
+};
+
+const Text = (props: TextProps & RNTextProps) => {
+  const { children, ...rest } = props;
+  return (
+    <RNText className="text-gray-50" {...rest}>
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;

apps/mobile/index.ts

@@ -1,4 +1,3 @@
-import "react-native-gesture-handler";
 import { registerRootComponent } from "expo";
 
 import App from "./App";

apps/mobile/navigation/StackNavigator.tsx

@@ -1,49 +1,23 @@
-import {
-  AddTaskScreen,
-  ModalScreen,
-  NotFoundScreen,
-  OnboardingScreen,
-} from "$screens";
-import { RootNativeStackParamList } from "$types";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import DrawerNavigator from "./DrawerNavigator";
+import { NavigatorParamList } from "types";
+import Home from "../screens/Home";
+import Welcome from "../screens/Welcome";
 
-const Stack = createNativeStackNavigator<RootNativeStackParamList>();
+const Stack = createNativeStackNavigator<NavigatorParamList>();
 
-function StackNavigator() {
+const StackNavigator = () => {
   return (
     <Stack.Navigator
       screenOptions={{
-        contentStyle: { backgroundColor: "#fff" },
-        headerTitleAlign: "center",
-        headerBackTitle: "",
+        headerTransparent: true,
+        headerBackTitleVisible: false,
+        headerTintColor: "white",
       }}
     >
-      <Stack.Screen
-        name="Onboarding"
-        component={OnboardingScreen}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="Home"
-        component={DrawerNavigator}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="AddTask"
-        component={AddTaskScreen}
-        options={{ animation: "slide_from_bottom" }}
-      />
-      <Stack.Screen
-        name="NotFound"
-        component={NotFoundScreen}
-        options={{ title: "Oops!" }}
-      />
-      <Stack.Group screenOptions={{ presentation: "modal" }}>
-        <Stack.Screen name="Modal" component={ModalScreen} />
-      </Stack.Group>
+      <Stack.Screen name="Home" component={Home} />
+      <Stack.Screen name="Welcome" component={Welcome} />
     </Stack.Navigator>
   );
-}
+};
 
 export default StackNavigator;