Dev/new monorepo skia

.yarnrc.yml

@@ -1,2 +1 @@
 nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-3.2.0.cjs

client/.expo-shared/assets.json

@@ -0,0 +1,6 @@
+{
+  "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
+  "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

client/App.tsx

@@ -0,0 +1,29 @@
+import 'react-native-gesture-handler';
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { NativeBaseProvider } from 'native-base';
+import { AuthProvider } from './src/contexts/AuthContext';
+
+import useCachedResources from './src/hooks/useCachedResources';
+import useColorScheme from './src/hooks/useColorScheme';
+import Navigation from './src/navigation';
+import SSRProvider from 'react-bootstrap/SSRProvider';
+
+export default function App() {
+  const isLoadingComplete = useCachedResources();
+  const colorScheme = useColorScheme();
+  if (!isLoadingComplete) return null;
+  return (
+    <SSRProvider>
+      <NativeBaseProvider>
+        <SafeAreaProvider>
+          <AuthProvider>
+            <Navigation />
+            <StatusBar />
+          </AuthProvider>
+        </SafeAreaProvider>
+      </NativeBaseProvider>
+    </SSRProvider>
+  );
+}

client/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "solve",
+    "slug": "solve",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "solve",
+    "userInterfaceStyle": "automatic",
+    "facebookScheme": "fb530310827826087",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/images/favicon.png"
+    }
+  }
+}

client/babel.config.js

@@ -0,0 +1,34 @@
+// only use babel-plugin for native:
+process.env.TAMAGUI_TARGET = 'native';
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      ['react-native-reanimated/plugin'],
+      [
+        '@tamagui/babel-plugin',
+        {
+          components: ['tamagui'],
+          config: './tests/lib/tamagui.config.js',
+          importsWhitelist: ['constants.js', 'colors.js'],
+          logTimings: true,
+          disableExtraction: process.env.NODE_ENV === 'development'
+        }
+      ],
+      [
+        'transform-inline-environment-variables',
+        {
+          include: 'TAMAGUI_TARGET'
+        }
+      ],
+      [
+        ('module:react-native-dotenv',
+        {
+          path: '../../.env'
+        })
+      ]
+    ]
+  };
+};

client/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@solve/client",
+  "main": "__generated__/AppEntry.js",
+  "scripts": {
+    "start": "expo start --https",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web --https",
+    "eject": "expo eject",
+    "build:web": "expo build:web --no-pwa",
+    "test": "jest --watchAll",
+    "postinstall": "expo-yarn-workspaces postinstall",
+    "publish:stage": "expo publish --release-channel staging"
+  },
+  "engines": {
+    "node": "16.4.2"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^12.0.0",
+    "@jniac/three-point-text-helper": "^1.0.8",
+    "@native-base/formik-ui": "^0.1.3",
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/bottom-tabs": "5.11.2",
+    "@react-navigation/native": "^5.9.4",
+    "@react-navigation/stack": "^5.14.5",
+    "@types/d3-quadtree": "^3.0.2",
+    "@types/d3-zoom": "^3.0.1",
+    "@types/lodash.throttle": "^4.1.6",
+    "@types/point-in-polygon": "^1.1.1",
+    "@types/prop-types": "^15.7.2",
+    "@types/three": "^0.137.0",
+    "@types/uuid": "^8.3.4",
+    "as-number": "^1.0.0",
+    "axios": "^0.21.1",
+    "bootstrap": "5.1.3",
+    "d3-quadtree": "^3.0.1",
+    "d3-zoom": "^3.0.0",
+    "dotenv": "^10.0.0",
+    "eventemitter3": "^4.0.7",
+    "expo": "~42.0.1",
+    "expo-app-loading": "1.1.2",
+    "expo-asset": "~8.3.2",
+    "expo-auth-session": "~3.3.1",
+    "expo-cli": "^5.4.6",
+    "expo-constants": "~11.0.1",
+    "expo-facebook": "~11.3.1",
+    "expo-font": "~9.2.1",
+    "expo-gl": "^9.2.0",
+    "expo-google-app-auth": "8.2.5",
+    "expo-linking": "~2.3.1",
+    "expo-random": "~11.2.0",
+    "expo-splash-screen": "~0.11.2",
+    "expo-status-bar": "~1.0.4",
+    "expo-three": "^5.5.1",
+    "expo-updates": "~0.8.2",
+    "expo-web-browser": "~9.2.0",
+    "expo-yarn-workspaces": "^1.5.2",
+    "formik": "^2.2.9",
+    "lodash.throttle": "^4.1.1",
+    "native-base": "^3.2.1",
+    "point-in-polygon": "^1.1.0",
+    "polyline-normals": "^2.0.2",
+    "prop-types": "^15.7.2",
+    "react": "16.13.1",
+    "react-bootstrap": "^2.1.2",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "react-native-aria": "^0.2.3",
+    "react-native-dotenv": "^3.1.1",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-reanimated": "~2.2.0",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.4.0",
+    "react-native-svg": "12.1.1",
+    "react-native-uuid": "^2.0.1",
+    "react-native-web": "~0.13.12",
+    "react-style-proptype": "^3.2.2",
+    "rn-bottom-drawer": "^1.4.3",
+    "s-ago": "^2.2.0",
+    "styled-components": "^5.3.0",
+    "styled-system": "^5.1.5",
+    "surge": "^0.23.1",
+    "three": "0.137.5",
+    "troika-three-text": "^0.45.0",
+    "uuid": "^8.3.2",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@types/react": "~16.9.35",
+    "@types/react-native": "~0.63.2",
+    "jest-expo": "~41.0.0-beta.0",
+    "typescript": "~4.0.0"
+  },
+  "private": true
+}

client/src/components/Avatar.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useEffect, useState } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Avatar, Badge } from 'native-base';
+import { useNavigation } from '@react-navigation/native';
+//import { theme } from '../core/theme';
+import { isWeb } from '../constants/device';
+import { useAuth } from '../hooks/useAuth';
+import { getShortName } from '../lib/user';
+
+export const ProfileButton: FC = () => {
+  //#084783;
+  const { user } = useAuth();
+  const { navigate } = useNavigation();
+  const onUserPress = () => navigate('App', { screen: 'TabTwo' });
+  //const [score, setScore] = useState(100);
+
+  if (!user) return null;
+
+  // useEffect(() => {
+  //   let timer = setInterval(() => {
+  //     console.log('timer');
+  //     setScore((score) => score + Math.floor(Math.random() * 50));
+  //   }, 1500);
+  //   return () => clearInterval(timer);
+  // }, []);
+
+  return (
+    <TouchableOpacity onPress={onUserPress} style={styles.container}>
+      <Avatar bg="blueGray.500" size="md">
+        {getShortName(user)}
+      </Avatar>
+      <Badge rounded="lg" variant="subtle" style={styles.badge}>
+        {user.score}
+      </Badge>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 20 + (isWeb ? 0 : 20),
+    right: 20 + (isWeb ? 20 : 0),
+    alignContent: 'center',
+    alignItems: 'center',
+    zIndex: 1
+  },
+  badge: {
+    marginTop: 5
+  },
+  icon: {
+    width: 32,
+    height: 32,
+    backgroundColor: '#fff'
+  },
+  iconDark: {
+    width: 32,
+    height: 32,
+    backgroundColor: '#fff'
+  },
+  score: {
+    marginTop: 5,
+    color: '#fff',
+    textAlign: 'center',
+    fontWeight: 'bold'
+  },
+  scoreDark: {
+    marginTop: 5,
+    textAlign: 'center',
+    fontWeight: 'bold'
+    //color: colors.primary
+  }
+});

client/src/components/BackButton.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Icon } from 'native-base';
+import { useNavigation } from '@react-navigation/native';
+import { isWeb } from '../constants/device';
+import { Feather as Icons } from '@expo/vector-icons';
+
+export const BackButton: FC<{ fallback?: () => void }> = ({ fallback }) => {
+  let { canGoBack, goBack } = useNavigation();
+  if (!canGoBack())
+    if (fallback) goBack = fallback;
+    else return null;
+  return (
+    <TouchableOpacity onPress={goBack} style={styles.container}>
+      <Icon as={Icons} name="arrow-left" style={styles.icon} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 20 + (isWeb ? 0 : 20),
+    left: 20 + (isWeb ? 20 : 0),
+    alignContent: 'center',
+    alignItems: 'center',
+    zIndex: 1
+  },
+  icon: {
+    width: 32,
+    height: 32
+  }
+});