Add tamagui

iron-fish · Apr 24, 2024 · 9b83ef4 · 9b83ef4
1 parent e67b045
commit 9b83ef4
Show file tree

Hide file tree

Showing 16 changed files with 58,467 additions and 2,980 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mobile-app/.tamagui/tamagui.config.json b/packages/mobile-app/.tamagui/tamagui.config.json
diff --git a/packages/mobile-app/app/(tabs)/transact.tsx b/packages/mobile-app/app/(tabs)/transact.tsx
@@ -22,7 +22,7 @@ export default function Transact() {
       <Text>{JSON.stringify(getAllAccountsResult.data)}</Text>
       <Text>Mutation: {facadeResult}</Text>
       <Button
-        onClick={async () => {
+        onPress={async () => {
           const otherResult = await createAccount.mutateAsync("dave");
           setFacadeResult(otherResult);
         }}

diff --git a/packages/mobile-app/app/_layout.tsx b/packages/mobile-app/app/_layout.tsx
@@ -1,23 +1,35 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
 import { Stack } from "expo-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { FacadeProvider } from "../data";
+import { useColorScheme } from "react-native";
+import { UIKitProvider } from "@ironfish/ui";
 
 const queryClient = new QueryClient();
 
 export default function Layout() {
+  const scheme = useColorScheme();
   return (
-    <QueryClientProvider client={queryClient}>
-      <FacadeProvider>
-        <Stack>
-          <Stack.Screen
-            name="(tabs)"
-            options={{
-              headerShown: false,
-            }}
-          />
-        </Stack>
-      </FacadeProvider>
-    </QueryClientProvider>
+    <ThemeProvider value={scheme === "dark" ? DarkTheme : DefaultTheme}>
+      <UIKitProvider colorScheme={scheme || "light"}>
+        <QueryClientProvider client={queryClient}>
+          <FacadeProvider>
+            <Stack>
+              <Stack.Screen
+                name="(tabs)"
+                options={{
+                  headerShown: false,
+                }}
+              />
+            </Stack>
+          </FacadeProvider>
+        </QueryClientProvider>
+      </UIKitProvider>
+    </ThemeProvider>
   );
 }
diff --git a/packages/mobile-app/babel.config.js b/packages/mobile-app/babel.config.js
@@ -1,6 +1,19 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
+    plugins: [
+      ...(process.env.EAS_BUILD_PLATFORM === "android"
+        ? []
+        : [
+            [
+              "@tamagui/babel-plugin",
+              {
+                components: ["@ironfish/ui", "tamagui"],
+                config: "../../packages/ui-kit/src/theme/config.ts",
+              },
+            ],
+          ]),
+    ],
   };
 };
diff --git a/packages/mobile-app/package.json b/packages/mobile-app/package.json
@@ -27,7 +27,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.45"
+    "@types/react": "~18.2.45",
+    "@tamagui/babel-plugin": "^1.95.1"
   },
   "private": true
 }
diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -3,15 +3,30 @@
   "version": "0.0.1",
   "description": "Component library for the Iron Fish front-end ecosystem",
   "license": "MPL-2.0",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "private": true,
+  "types": "./src",
+  "main": "src/index.tsx",
+  "module:jsx": "src",
+  "files": [
+    "types",
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tamagui-build --skip-types",
+    "watch": "tamagui-build --skip-types --watch"
   },
   "dependencies": {
-    "react-strict-dom": "^0.0.3"
+    "@tamagui/toast": "^1.95.1",
+    "@tamagui/font-inter": "^1.95.1",
+    "@tamagui/themes": "^1.95.1",
+    "burnt": "^0.12.1",
+    "tamagui": "^1.95.1"
   },
   "devDependencies": {
+    "@tamagui/build": "^1.95.1",
     "react": "18.2.0"
   },
   "peerDependencies": {