Add tamagui to ui-kit

.gitignore

@@ -28,6 +28,9 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json
 
+# tamagui
+**/.tamagui/*
+
 # misc
 /.sass-cache
 /connect.lock

package.json

@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@nx/js": "18.1.2",
-    "@nx/react-native": "^18.1.3",
+    "@nx/react-native": "18.1.2",
     "nx": "18.1.2",
     "typescript": "^5.1.3"
   },

packages/mobile-app/app.json

@@ -6,7 +6,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

packages/mobile-app/app/(tabs)/transact.tsx

@@ -7,71 +7,80 @@ import { AccountFormat } from "@ironfish/sdk";
 
 export default function Transact() {
   const facade = useFacade();
-  const qc = useQueryClient()
+  const qc = useQueryClient();
 
   const getAccountsResult = facade.getAccounts.useQuery();
   const createAccount = facade.createAccount.useMutation({
     onSuccess: () => {
       qc.invalidateQueries({
-        queryKey: ['getAccounts']
-      })
-    }
+        queryKey: ["getAccounts"],
+      });
+    },
   });
   const importAccount = facade.importAccount.useMutation({
     onSuccess: () => {
       qc.invalidateQueries({
-        queryKey: ['getAccounts']
-      })
-    }
+        queryKey: ["getAccounts"],
+      });
+    },
   });
   const removeAccount = facade.removeAccount.useMutation({
     onSuccess: () => {
       qc.invalidateQueries({
-        queryKey: ['getAccounts']
-      })
-    }
+        queryKey: ["getAccounts"],
+      });
+    },
   });
   const exportAccount = facade.exportAccount.useMutation();
 
-  const [importAccountText, setImportAccountText] = React.useState('')
+  const [importAccountText, setImportAccountText] = React.useState("");
 
   return (
     <ScrollView>
       <Text>Accounts</Text>
-      {(getAccountsResult.data ?? []).map((account) => (
-        <View key={account.id}>
+      {(getAccountsResult.data ?? []).map((account, i) => (
+        <View key={i}>
           <Text>{account.name}</Text>
           <Button
-            onClick={async () => {
+            onPress={async () => {
               await removeAccount.mutateAsync({ name: account.name });
-              console.log('Removed Account', account.name)
+              console.log("Removed Account", account.name);
             }}
           >
-          Remove Account
+            Remove Account
           </Button>
           <Button
-            onClick={async () => {
-              const otherResult = await exportAccount.mutateAsync({ name: account.name, format: AccountFormat.Base64Json });
-              console.log('Exported Account:', otherResult)
+            onPress={async () => {
+              const otherResult = await exportAccount.mutateAsync({
+                name: account.name,
+                format: AccountFormat.Base64Json,
+              });
+              console.log("Exported Account:", otherResult);
             }}
           >
-          Export Account
+            Export Account
           </Button>
         </View>
       ))}
       <Button
-        onClick={async () => {
+        onPress={async () => {
           const otherResult = await createAccount.mutateAsync({ name: "dave" });
-          console.log('Created Account:', otherResult)
+          console.log("Created Account:", otherResult);
         }}
       >
         Create Account
       </Button>
-      <TextInput value={importAccountText} onChangeText={setImportAccountText} placeholder="Import account"/>
+      <TextInput
+        value={importAccountText}
+        onChangeText={setImportAccountText}
+        placeholder="Import account"
+      />
       <Button
-        onClick={async () => {
-          const otherResult = await importAccount.mutateAsync({ account: importAccountText });
-          console.log('Imported Account:', otherResult)
+        onPress={async () => {
+          const otherResult = await importAccount.mutateAsync({
+            account: importAccountText,
+          });
+          console.log("Imported Account:", otherResult);
         }}
       >
         Import Account

packages/mobile-app/app/_layout.tsx

@@ -1,49 +1,67 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
 import { Stack } from "expo-router";
-import { Text } from 'react-native';
+import { Text } from "react-native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+import { useColorScheme } from "react-native";
+import { UIKitProvider } from "@ironfish/ui";
 import { FacadeProvider, useFacade } from "../data/facades";
 import React, { useEffect } from "react";
 
 const queryClient = new QueryClient();
 
-function DatabaseLoader({ loading, children }: { loading: React.ReactNode, children?: React.ReactNode }) {
+function DatabaseLoader({
+  loading,
+  children,
+}: {
+  loading: React.ReactNode;
+  children?: React.ReactNode;
+}) {
   const facade = useFacade();
   const [status, setStatus] = React.useState<string>("loading");
   const loadDatabases = facade.loadDatabases.useMutation();
 
   useEffect(() => {
     const fn = async () => {
       const result = await loadDatabases.mutateAsync(undefined);
-      setStatus(result)
-    }
-    fn()
-  }, [])
+      setStatus(result);
+    };
+    fn();
+  }, []);
 
   if (status === "loading") {
     return loading;
-  } else if (status === 'loaded') {
+  } else if (status === "loaded") {
     return children;
   } else {
     throw new Error(`Unknown status ${status}`);
   }
 }
 
 export default function Layout() {
+  const scheme = useColorScheme();
   return (
-    <QueryClientProvider client={queryClient}>
-      <FacadeProvider>
-        <DatabaseLoader loading={<Text>Loading databases...</Text>}>
-          <Stack>
-            <Stack.Screen
-              name="(tabs)"
-              options={{
-                headerShown: false,
-              }}
-            />
-          </Stack>
-        </DatabaseLoader>
-      </FacadeProvider>
-    </QueryClientProvider>
+    <ThemeProvider value={scheme === "dark" ? DarkTheme : DefaultTheme}>
+      <UIKitProvider colorScheme={scheme || "light"}>
+        <QueryClientProvider client={queryClient}>
+          <FacadeProvider>
+            <DatabaseLoader loading={<Text>Loading databases...</Text>}>
+              <Stack>
+                <Stack.Screen
+                  name="(tabs)"
+                  options={{
+                    headerShown: false,
+                  }}
+                />
+              </Stack>
+            </DatabaseLoader>
+          </FacadeProvider>
+        </QueryClientProvider>
+      </UIKitProvider>
+    </ThemeProvider>
   );
 }

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",
+              },
+            ],
+          ]),
+    ],
   };
 };

packages/mobile-app/package.json

@@ -31,7 +31,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
 }

packages/ui-kit/package.json

@@ -3,15 +3,31 @@
   "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/config": "^1.95.1",
+    "@tamagui/font-inter": "^1.95.1",
+    "@tamagui/themes": "^1.95.1",
+    "@tamagui/toast": "^1.95.1",
+    "burnt": "^0.12.1",
+    "tamagui": "^1.95.1"
   },
   "devDependencies": {
+    "@tamagui/build": "^1.95.1",
     "react": "18.2.0"
   },
   "peerDependencies": {

packages/ui-kit/src/Button/Button.tsx

@@ -1,26 +1,37 @@
 import React, { ComponentProps } from "react";
-import { css, html } from "react-strict-dom";
+import { View, Text, styled } from "@tamagui/web";
 
-const styles = css.create({
-  root: {
-    backgroundColor: "black",
-    borderRadius: "1000px",
-    color: "white",
-    fontSize: "16px",
-    fontWeight: 600,
-    paddingBottom: 14,
-    paddingLeft: 32,
-    paddingRight: 32,
-    paddingTop: 14,
+const ButtonFrame = styled(View, {
+  name: "Button",
+  alignItems: "center",
+  flexDirection: "row",
+  backgroundColor: "$background",
+  height: "$md",
+  borderRadius: "$full",
+  paddingHorizontal: 32,
+  paddingVertical: 14,
+
+  hoverStyle: {
+    backgroundColor: "$backgroundHover",
+  },
+  pressStyle: {
+    backgroundColor: "$backgroundPress",
   },
 });
 
-type Props = ComponentProps<typeof html.button>;
+export const ButtonText = styled(Text, {
+  name: "ButtonText",
+  color: "$color",
+  fontFamily: "$body",
+  fontSize: "$md",
+  lineHeight: "$md",
+  userSelect: "none",
+});
+
+type ButtonProps = ComponentProps<typeof ButtonFrame>;
 
-export function Button({ children, style, ...rest }: Props) {
-  return (
-    <html.button style={[styles.root, style ? style : false]} {...rest}>
-      {children}
-    </html.button>
-  );
-}
+export const Button = ({ children, ...rest }: ButtonProps) => (
+  <ButtonFrame {...rest}>
+    <ButtonText>{children}</ButtonText>
+  </ButtonFrame>
+);

packages/ui-kit/src/UIKitProvider/UIKitProvider.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from "react";
+import { TamaguiProvider, Theme } from "tamagui";
+import { ToastProvider } from "@tamagui/toast";
+import { config } from "../theme/config";
+
+type Props = {
+  children: ReactNode;
+  colorScheme: "light" | "dark";
+};
+
+export function UIKitProvider({ children, colorScheme }: Props) {
+  return (
+    <TamaguiProvider
+      disableInjectCSS
+      config={config}
+      defaultTheme={colorScheme}
+    >
+      <Theme name={colorScheme}>
+        <ToastProvider
+          swipeDirection="horizontal"
+          duration={6000}
+          native={
+            [
+              /* uncomment the next line to do native toasts on mobile. NOTE: it'll require you making a dev build and won't work with Expo Go */
+              // 'mobile'
+            ]
+          }
+        >
+          {children}
+        </ToastProvider>
+      </Theme>
+    </TamaguiProvider>
+  );
+}

packages/ui-kit/src/index.tsx

@@ -0,0 +1,5 @@
+export * from "@tamagui/toast";
+
+export { config } from "./theme/config";
+export * from "./UIKitProvider/UIKitProvider";
+export { Button } from "./Button/Button";