Scaffold out cross-platform ui-kit project

package.json

@@ -4,9 +4,9 @@
   "license": "MPL-2.0",
   "private": true,
   "scripts": {
-    "lint": "npm run lint --workspaces --if-present -- --max-warnings=0",
-    "lint:fix": "npm run lint --workspaces --if-present -- --fix --max-warnings=0",
-    "typecheck": "npm run typecheck --workspaces --if-present",
+    "lint": "nx run-many -t lint --max-warnings=0",
+    "lint:fix": "nx run-many -t lint --fix --max-warnings=0",
+    "typecheck": "nx run-many -t typecheck",
     "postinstall": "git submodule update --init --recursive"
   },
   "devDependencies": {

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

@@ -39,6 +39,15 @@ export default function Layout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="ui"
+        options={{
+          title: "UI Kit",
+          tabBarIcon: ({ color, size }) => (
+            <FontAwesome name="paint-brush" size={size} color={color} />
+          ),
+        }}
+      />
     </Tabs>
   );
 }

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

@@ -1,5 +1,4 @@
-import { Button } from "@ironfish/ui";
-import { View, Text } from "react-native";
+import { View, Text, Button } from "react-native";
 
 import { useFacade } from "../../data/facades";
 
@@ -26,16 +25,14 @@ export default function Contacts() {
         onPress={async () => {
           await resumeSyncing.mutateAsync(undefined);
         }}
-      >
-        Resume Syncing
-      </Button>
+        title="Resume Syncing"
+      />
       <Button
         onPress={async () => {
           await pauseSyncing.mutateAsync(undefined);
         }}
-      >
-        Pause Syncing
-      </Button>
+        title="Pause Syncing"
+      />
     </View>
   );
 }

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

@@ -1,6 +1,5 @@
-import { View, Text, ScrollView, TextInput } from "react-native";
+import { View, Text, ScrollView, TextInput, Button } from "react-native";
 import { useFacade } from "../../data/facades";
-import { Button } from "@ironfish/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import { AccountFormat } from "@ironfish/sdk";
@@ -49,9 +48,8 @@ export default function Transact() {
               await removeAccount.mutateAsync({ name: account.name });
               console.log("Removed Account", account.name);
             }}
-          >
-            Remove Account
-          </Button>
+            title="Remove Account"
+          />
           <Button
             onPress={async () => {
               const otherResult = await exportAccount.mutateAsync({
@@ -60,19 +58,17 @@ export default function Transact() {
               });
               console.log("Exported Account:", otherResult);
             }}
-          >
-            Export Account
-          </Button>
+            title="Export Account"
+          />
         </View>
       ))}
       <Button
         onPress={async () => {
           const otherResult = await createAccount.mutateAsync({ name: "dave" });
           console.log("Created Account:", otherResult);
         }}
-      >
-        Create Account
-      </Button>
+        title="Create Account"
+      />
       <TextInput
         value={importAccountText}
         onChangeText={setImportAccountText}
@@ -86,9 +82,8 @@ export default function Transact() {
           });
           console.log("Imported Account:", otherResult);
         }}
-      >
-        Import Account
-      </Button>
+        title="Import Account"
+      />
     </ScrollView>
   );
 }

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

@@ -0,0 +1,16 @@
+import { Button } from "@ironfish/ui";
+import { View } from "react-native";
+
+export default function UiKit() {
+  return (
+    <View
+      style={{
+        gap: 10,
+        padding: 10,
+      }}
+    >
+      <Button label="Medium button" />
+      <Button label="Small button" size="sm" />
+    </View>
+  );
+}

packages/mobile-app/app/_layout.tsx

@@ -8,7 +8,6 @@ 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 { useEffect, useState } from "react";
 
@@ -46,22 +45,20 @@ export default function Layout() {
   const scheme = useColorScheme();
   return (
     <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>
+      <QueryClientProvider client={queryClient}>
+        <FacadeProvider>
+          <DatabaseLoader loading={<Text>Loading databases...</Text>}>
+            <Stack>
+              <Stack.Screen
+                name="(tabs)"
+                options={{
+                  headerShown: false,
+                }}
+              />
+            </Stack>
+          </DatabaseLoader>
+        </FacadeProvider>
+      </QueryClientProvider>
     </ThemeProvider>
   );
 }

packages/mobile-app/babel.config.js

@@ -2,18 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     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",
-              },
-            ],
-          ]),
-    ],
+    plugins: [],
   };
 };

packages/mobile-app/package.json

@@ -35,7 +35,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@tamagui/babel-plugin": "1.102.1",
     "@types/react": "~18.2.79",
     "eslint-config-expo": "^7.0.0",
     "eslint-config-prettier": "^9.1.0",

packages/mobile-app/project.json

@@ -16,6 +16,12 @@
     },
     "ios": {
       "dependsOn": ["pod-sim"]
+    },
+    "lint": {
+      "dependsOn": ["^build"]
+    },
+    "typecheck": {
+      "dependsOn": ["^build"]
     }
   }
 }

packages/ui-kit/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "plugin:storybook/recommended"
+  ]
+}

packages/ui-kit/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        "react-native": "react-native-web",
+      };
+    }
+    return config;
+  },
+};
+export default config;

packages/ui-kit/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/ui-kit/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["module:metro-react-native-babel-preset"],
+    plugins: ["react-native-web"],
+  };
+};