WIP

11 files changed, 653 insertions, 0 deletions

diff --git a/app_expo/screens/demo/demo-list-screen.tsx b/app_expo/screens/demo/demo-list-screen.tsx
new file mode 100644
index 0000000..9164ccb
--- /dev/null
+++ b/app_expo/screens/demo/demo-list-screen.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react'
+import { FlatList, TextStyle, View, ViewStyle, ImageStyle } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { observer } from 'mobx-react-lite'
+import { Header, Screen, Text, Wallpaper, AutoImage as Image } from '../../components'
+import { color, spacing } from '../../theme'
+import { useStores } from '../../models'
+
+const FULL: ViewStyle = {
+  flex: 1,
+}
+const CONTAINER: ViewStyle = {
+  backgroundColor: color.transparent,
+}
+const HEADER: TextStyle = {
+  paddingBottom: spacing[5] - 1,
+  paddingHorizontal: spacing[4],
+  paddingTop: spacing[3],
+}
+const HEADER_TITLE: TextStyle = {
+  fontSize: 12,
+  fontWeight: 'bold',
+  letterSpacing: 1.5,
+  lineHeight: 15,
+  textAlign: 'center',
+}
+const LIST_CONTAINER: ViewStyle = {
+  alignItems: 'center',
+  flexDirection: 'row',
+  padding: 10,
+}
+const IMAGE: ImageStyle = {
+  borderRadius: 35,
+  height: 65,
+  width: 65,
+}
+const LIST_TEXT: TextStyle = {
+  marginLeft: 10,
+}
+const FLAT_LIST: ViewStyle = {
+  paddingHorizontal: spacing[4],
+}
+
+export const DemoListScreen = observer(function DemoListScreen() {
+  const navigation = useNavigation()
+  const goBack = () => navigation.goBack()
+
+  const { characterStore } = useStores()
+  const { characters } = characterStore
+
+  useEffect(() => {
+    async function fetchData() {
+      await characterStore.getCharacters()
+    }
+
+    fetchData()
+  }, [])
+
+  return (
+    <View testID="DemoListScreen" style={FULL}>
+      <Wallpaper />
+      <Screen style={CONTAINER} preset="fixed" backgroundColor={color.transparent}>
+        <Header
+          headerTx="demoListScreen.title"
+          leftIcon="back"
+          onLeftPress={goBack}
+          style={HEADER}
+          titleStyle={HEADER_TITLE}
+        />
+        <FlatList
+          contentContainerStyle={FLAT_LIST}
+          data={[...characters]}
+          keyExtractor={(item) => String(item.id)}
+          renderItem={({ item }) => (
+            <View style={LIST_CONTAINER}>
+              <Image source={{ uri: item.image }} style={IMAGE} />
+              <Text style={LIST_TEXT}>
+                {item.name} ({item.status})
+              </Text>
+            </View>
+          )}
+        />
+      </Screen>
+    </View>
+  )
+})
diff --git a/app_expo/screens/demo/demo-screen.tsx b/app_expo/screens/demo/demo-screen.tsx
new file mode 100644
index 0000000..a387c01
--- /dev/null
+++ b/app_expo/screens/demo/demo-screen.tsx
@@ -0,0 +1,180 @@
+import React from 'react'
+import { ImageStyle, Platform, TextStyle, View, ViewStyle } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { observer } from 'mobx-react-lite'
+import {
+  BulletItem,
+  Button,
+  Header,
+  Text,
+  Screen,
+  Wallpaper,
+  AutoImage as Image,
+} from '../../components'
+import { color, spacing } from '../../theme'
+import { Api } from '../../services/api'
+import { save } from '../../utils/storage'
+export const logoIgnite = require('./logo-ignite.png')
+export const heart = require('./heart.png')
+
+const FULL: ViewStyle = { flex: 1 }
+const CONTAINER: ViewStyle = {
+  backgroundColor: color.transparent,
+  paddingHorizontal: spacing[4],
+}
+const DEMO: ViewStyle = {
+  paddingVertical: spacing[4],
+  paddingHorizontal: spacing[4],
+  backgroundColor: color.palette.deepPurple,
+}
+const BOLD: TextStyle = { fontWeight: 'bold' }
+const DEMO_TEXT: TextStyle = {
+  ...BOLD,
+  fontSize: 13,
+  letterSpacing: 2,
+}
+const HEADER: TextStyle = {
+  paddingTop: spacing[3],
+  paddingBottom: spacing[5] - 1,
+  paddingHorizontal: 0,
+}
+const HEADER_TITLE: TextStyle = {
+  ...BOLD,
+  fontSize: 12,
+  lineHeight: 15,
+  textAlign: 'center',
+  letterSpacing: 1.5,
+}
+const TITLE: TextStyle = {
+  ...BOLD,
+  fontSize: 28,
+  lineHeight: 38,
+  textAlign: 'center',
+  marginBottom: spacing[5],
+}
+const TAGLINE: TextStyle = {
+  color: '#BAB6C8',
+  fontSize: 15,
+  lineHeight: 22,
+  marginBottom: spacing[4] + spacing[1],
+}
+const IGNITE: ImageStyle = {
+  marginVertical: spacing[6],
+  alignSelf: 'center',
+  width: 180,
+  height: 100,
+}
+const LOVE_WRAPPER: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  alignSelf: 'center',
+}
+const LOVE: TextStyle = {
+  color: '#BAB6C8',
+  fontSize: 15,
+  lineHeight: 22,
+}
+const HEART: ImageStyle = {
+  marginHorizontal: spacing[2],
+  width: 10,
+  height: 10,
+  resizeMode: 'contain',
+}
+const HINT: TextStyle = {
+  color: '#BAB6C8',
+  fontSize: 12,
+  lineHeight: 15,
+  marginVertical: spacing[2],
+}
+
+const platformCommand = Platform.select({
+  ios: 'Cmd + D',
+  android: 'Cmd/Ctrl + M',
+})
+
+export const DemoScreen = observer(function DemoScreen() {
+  const navigation = useNavigation()
+  const goBack = () => navigation.goBack()
+
+  const demoReactotron = React.useMemo(
+    () => async () => {
+      console.tron.log('Your Friendly tron log message')
+      console.tron.logImportant('I am important')
+      console.tron.display({
+        name: 'DISPLAY',
+        value: {
+          numbers: 1,
+          strings: 'strings',
+          booleans: true,
+          arrays: [1, 2, 3],
+          objects: {
+            deeper: {
+              deeper: {
+                yay: '👾',
+              },
+            },
+          },
+          functionNames: function hello() {
+            /* dummy function */
+          },
+        },
+        preview: 'More control with display()',
+        important: true,
+        image: {
+          uri: 'https://avatars2.githubusercontent.com/u/3902527?s=200&u=a0d16b13ed719f35d95ca0f4440f5d07c32c349a&v=4',
+        },
+      })
+      // make an API call for the demo
+      // Don't do API like this, use store's API
+      const demo = new Api()
+      demo.setup()
+      demo.getUser('1')
+      // Let's do some async storage stuff
+      await save('Cool Name', 'Boaty McBoatface')
+    },
+    [],
+  )
+
+  return (
+    <View testID="DemoScreen" style={FULL}>
+      <Wallpaper />
+      <Screen style={CONTAINER} preset="scroll" backgroundColor={color.transparent}>
+        <Header
+          headerTx="demoScreen.howTo"
+          leftIcon="back"
+          onLeftPress={goBack}
+          style={HEADER}
+          titleStyle={HEADER_TITLE}
+        />
+        <Text style={TITLE} preset="header" tx="demoScreen.title" />
+        <Text style={TAGLINE} tx="demoScreen.tagLine" />
+        <BulletItem text="Integrated here, Navigation with State, TypeScript, Storybook, Solidarity, and i18n." />
+        <BulletItem
+          text={`To run Storybook, press ${platformCommand} or shake the device to show the developer menu, then select "Toggle Storybook"`}
+        />
+        <BulletItem text="Load up Reactotron!  You can inspect your app, view the events, interact, and so much more!" />
+        <View>
+          <Button
+            style={DEMO}
+            textStyle={DEMO_TEXT}
+            tx="demoScreen.reactotron"
+            onPress={demoReactotron}
+          />
+          <Text style={HINT} tx={`demoScreen.${Platform.OS}ReactotronHint` as const} />
+        </View>
+        <Button
+          style={DEMO}
+          textStyle={DEMO_TEXT}
+          tx="demoScreen.demoList"
+          onPress={() => navigation.navigate('demoList')}
+        />
+        <Image source={logoIgnite} style={IGNITE} />
+        <View style={LOVE_WRAPPER}>
+          <Text style={LOVE} text="Made with" />
+          <Image source={heart} style={HEART} />
+          <Text style={LOVE} text="by Infinite Red" />
+        </View>
+      </Screen>
+    </View>
+  )
+})
diff --git a/app_expo/screens/demo/heart.png b/app_expo/screens/demo/heart.png
new file mode 100644
index 0000000..9890998
--- /dev/null
+++ b/app_expo/screens/demo/heart.png
diff --git a/app_expo/screens/demo/[email protected] b/app_expo/screens/demo/[email protected]
new file mode 100644
index 0000000..e8b70d9
--- /dev/null
+++ b/app_expo/screens/demo/[email protected]
diff --git a/app_expo/screens/demo/logo-ignite.png b/app_expo/screens/demo/logo-ignite.png
new file mode 100644
index 0000000..36af16d
--- /dev/null
+++ b/app_expo/screens/demo/logo-ignite.png
diff --git a/app_expo/screens/demo/[email protected] b/app_expo/screens/demo/[email protected]
new file mode 100644
index 0000000..fdbfad8
--- /dev/null
+++ b/app_expo/screens/demo/[email protected]
diff --git a/app_expo/screens/graph/graph-screen.tsx b/app_expo/screens/graph/graph-screen.tsx
new file mode 100644
index 0000000..8c35590
--- /dev/null
+++ b/app_expo/screens/graph/graph-screen.tsx
@@ -0,0 +1,264 @@
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { TouchableOpacity, View, ViewStyle } from 'react-native'
+import { Screen, Text } from '../../components'
+// import { useNavigation } from "@react-navigation/native"
+// import { useStores } from "../../models"
+import { color } from '../../theme'
+
+import { Graph } from '../../components'
+import { Tweaks } from '../../components'
+
+import genRandomTree from '../../data/randomdata'
+
+import AsyncStorage from '@react-native-async-storage/async-storage'
+
+import axios from 'axios'
+
+import rando from '../../data/rando.json'
+
+const ROOT: ViewStyle = {
+  backgroundColor: color.palette.black,
+  flex: 1,
+}
+
+import { LocalButton } from '../../components/'
+import { GraphUi } from '../../components/graph-ui/graph-ui'
+import { Switch } from 'react-native-elements'
+export const GraphScreen = observer(function GraphScreen() {
+  // Pull in one of our MST stores
+  // const { someStore, anotherStore } = useStores()
+
+  // Pull in navigation via hook
+  // const navigation = useNavigation()
+
+  const [physics, setPhysics] = useState({})
+  const [graphData, setGraphData] = useState()
+  const [nodeIds, setNodeIds] = useState([])
+  //  { "nodes": [{ "id": 1 }, { "id": 2 }], "links": [{ "target": 1, "source": 2 }] });
+  const physicsInit = {
+    charge: -350,
+    collision: true,
+    linkStrength: 0.1,
+    linkIts: 1,
+    particles: 2,
+    linkOpacity: 0.4,
+    linkWidth: 1,
+    particleWidth: 4,
+    nodeRel: 4,
+    labels: true,
+    labelScale: 1.5,
+    alphaDecay: 0.16,
+    alphaTarget: 0,
+    velocityDecay: 0.25,
+    gravity: 0.5,
+    gravityOn: true,
+    hover: true,
+    colorful: true,
+    galaxy: true,
+    rootId: 0,
+  }
+
+  const getData = async () => {
+    try {
+      const value: string = await AsyncStorage.getItem('@physics')
+      if (value !== null) {
+        const valueJson = JSON.parse(value)
+        if (Object.keys(valueJson).length === Object.keys(physicsInit).length) {
+          valueJson.local = false
+          return valueJson
+        } else {
+          return physicsInit
+        }
+      } else {
+        return physicsInit
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  const storeData = async (value) => {
+    try {
+      let jsonVal = JSON.stringify(value)
+      console.log(jsonVal + ' ' + value)
+      await AsyncStorage.setItem('@physics', jsonVal)
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  // hook to save the current configuration of the physics tweaks
+  // after it is updated
+  useEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    // set timer so the thing doesn't run every single slider tick
+    const timer = setTimeout(() => {
+      storeData(physics)
+    }, 1000)
+    return () => clearTimeout(timer)
+  }, [physics])
+
+  //"ComponentOnMount"
+  // Get previous settings and the data from the org-roam-server
+  const sanitizeGraph = (data) => {
+    const cleanLinks = []
+    data.links.forEach((link, j) => {
+      let target
+      let source
+      for (let i = 0; i < data.nodes.length; i++) {
+        let a = data.nodes[i]
+        !a.neighbors && (a.neighbors = [])
+        !a.links && (a.links = [])
+        // the first time around,
+        // index the node as not a part of the local graph
+        !j && (a.local = false)
+        if (link.target === data.nodes[i].id) {
+          a.links.push(link)
+          target = [a, i]
+          link.target === link.source ? null : cleanLinks.push(link)
+        } else if (link.source === data.nodes[i].id) {
+          a.links.push(link)
+          source = [a, i]
+        }
+      }
+      if (target && source) {
+        data.nodes[target[1]].neighbors.push(source[0])
+        data.nodes[source[1]].neighbors.push(target[0])
+        link.sourceIndex = source[1]
+        link.targetIndex = target[1]
+        link.index = [j]
+        link.local = false
+      }
+    })
+    data.links = cleanLinks
+    return data
+  }
+
+  const [theme, setTheme] = useState({
+    base1: '#1c1f24',
+    base2: '#21272d',
+    base3: '#23272e',
+    base4: '#484854',
+    base5: '#62686E',
+    base6: '#757B80',
+    base7: '#9ca0a4',
+    base8: '#DFDFDF',
+    bg: '#242730',
+    'bg-alt': '#2a2e38',
+    blue: '#51afef',
+    cyan: '#5cEfFF',
+    'dark-blue': '#1f5582',
+    'dark-cyan': '#6A8FBF',
+    fg: '#bbc2cf',
+    'fg-alt': '#5D656B',
+    green: '#7bc275',
+    grey: '#484854',
+    magenta: '#C57BDB',
+    orange: '#e69055',
+    red: '#ff665c',
+    teal: '#4db5bd',
+    violet: '#a991f1',
+    yellow: '#FCCE7B',
+  })
+
+  useEffect(() => {
+    getData().then((data) => setPhysics(data))
+    axios
+      .get('http://localhost:35901/theme')
+      .then((theme) => {
+        setTheme(theme.data)
+        console.log(theme.data)
+      })
+      .catch((e) => {
+        console.log('No theme found')
+      })
+    axios
+      .get('http://localhost:35901/graph')
+      .then((dataa) => {
+        let cleanData = sanitizeGraph(dataa.data)
+        console.log(cleanData)
+        setGraphData(cleanData)
+      })
+      .catch((e) => {
+        console.log(e)
+        console.log("Couldn't get data.")
+        //setGraphData(rando);
+      })
+  }, [])
+
+  const [threeDim, setThreeDim] = useState(false)
+  const [local, setLocal] = useState(false)
+
+  if (!graphData) {
+    return null
+  } else {
+    return (
+      <Screen style={ROOT} preset="fixed">
+        <View
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            height: '100%',
+            width: '100%',
+            position: 'absolute',
+            zIndex: 150,
+          }}
+        >
+          <Tweaks physics={physics} setPhysics={setPhysics} />
+          <View
+            style={{
+              marginLeft: 'auto',
+              marginRight: '2%',
+              marginTop: '2%',
+              zIndex: 5,
+              position: 'relative',
+              height: '15%',
+            }}
+          >
+            <LocalButton local={local} setLocal={setLocal} />
+            <View
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: '2%',
+              }}
+            >
+              <Text preset="header" text="3D" style={{ marginLeft: 10 }} />
+              <Switch
+                color="#a991f1"
+                trackColor={{
+                  false: '#62686E',
+                  true: '#a991f1',
+                }}
+                style={{
+                  height: 25,
+                  marginVertical: 10,
+                  marginLeft: 20,
+                }}
+                value={threeDim}
+                onValueChange={() => {
+                  setThreeDim(!threeDim)
+                }}
+              />
+            </View>
+          </View>
+          <Graph
+            style={{ position: 'absolute' }}
+            setPhysics={setPhysics}
+            physics={physics}
+            gData={graphData}
+            nodeIds={nodeIds}
+            threeDim={threeDim}
+            setThreeDim={setThreeDim}
+            local={local}
+            setLocal={setLocal}
+          />
+        </View>
+      </Screen>
+    )
+  }
+})
diff --git a/app_expo/screens/index.ts b/app_expo/screens/index.ts
new file mode 100644
index 0000000..1ba716f
--- /dev/null
+++ b/app_expo/screens/index.ts
@@ -0,0 +1,5 @@
+export * from './welcome/welcome-screen'
+export * from './demo/demo-screen'
+export * from './demo/demo-list-screen'
+// export other screens here
+export * from './graph/graph-screen'
diff --git a/app_expo/screens/welcome/bowser.png b/app_expo/screens/welcome/bowser.png
new file mode 100644
index 0000000..2b0bdbc
--- /dev/null
+++ b/app_expo/screens/welcome/bowser.png
diff --git a/app_expo/screens/welcome/[email protected] b/app_expo/screens/welcome/[email protected]
new file mode 100644
index 0000000..85cc693
--- /dev/null
+++ b/app_expo/screens/welcome/[email protected]
diff --git a/app_expo/screens/welcome/welcome-screen.tsx b/app_expo/screens/welcome/welcome-screen.tsx
new file mode 100644
index 0000000..49a6777
--- /dev/null
+++ b/app_expo/screens/welcome/welcome-screen.tsx
@@ -0,0 +1,118 @@
+import React from 'react'
+import { View, ViewStyle, TextStyle, ImageStyle, SafeAreaView } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { observer } from 'mobx-react-lite'
+import { Button, Header, Screen, Text, Wallpaper, AutoImage as Image } from '../../components'
+import { color, spacing, typography } from '../../theme'
+const bowserLogo = require('./bowser.png')
+
+const FULL: ViewStyle = { flex: 1 }
+const CONTAINER: ViewStyle = {
+  backgroundColor: color.transparent,
+  paddingHorizontal: spacing[4],
+}
+const TEXT: TextStyle = {
+  color: color.palette.white,
+  fontFamily: typography.primary,
+}
+const BOLD: TextStyle = { fontWeight: 'bold' }
+const HEADER: TextStyle = {
+  paddingTop: spacing[3],
+  paddingBottom: spacing[4] + spacing[1],
+  paddingHorizontal: 0,
+}
+const HEADER_TITLE: TextStyle = {
+  ...TEXT,
+  ...BOLD,
+  fontSize: 12,
+  lineHeight: 15,
+  textAlign: 'center',
+  letterSpacing: 1.5,
+}
+const TITLE_WRAPPER: TextStyle = {
+  ...TEXT,
+  textAlign: 'center',
+}
+const TITLE: TextStyle = {
+  ...TEXT,
+  ...BOLD,
+  fontSize: 28,
+  lineHeight: 38,
+  textAlign: 'center',
+}
+const ALMOST: TextStyle = {
+  ...TEXT,
+  ...BOLD,
+  fontSize: 26,
+  fontStyle: 'italic',
+}
+const BOWSER: ImageStyle = {
+  alignSelf: 'center',
+  marginVertical: spacing[5],
+  maxWidth: '100%',
+  width: 343,
+  height: 230,
+}
+const CONTENT: TextStyle = {
+  ...TEXT,
+  color: '#BAB6C8',
+  fontSize: 15,
+  lineHeight: 22,
+  marginBottom: spacing[5],
+}
+const CONTINUE: ViewStyle = {
+  paddingVertical: spacing[4],
+  paddingHorizontal: spacing[4],
+  backgroundColor: color.palette.deepPurple,
+}
+const CONTINUE_TEXT: TextStyle = {
+  ...TEXT,
+  ...BOLD,
+  fontSize: 13,
+  letterSpacing: 2,
+}
+const FOOTER: ViewStyle = { backgroundColor: '#20162D' }
+const FOOTER_CONTENT: ViewStyle = {
+  paddingVertical: spacing[4],
+  paddingHorizontal: spacing[4],
+}
+
+export const WelcomeScreen = observer(function WelcomeScreen() {
+  const navigation = useNavigation()
+  const nextScreen = () => navigation.navigate('demo')
+
+  return (
+    <View testID="WelcomeScreen" style={FULL}>
+      <Wallpaper />
+      <Screen style={CONTAINER} preset="scroll" backgroundColor={color.transparent}>
+        <Header headerTx="welcomeScreen.poweredBy" style={HEADER} titleStyle={HEADER_TITLE} />
+        <Text style={TITLE_WRAPPER}>
+          <Text style={TITLE} text="Your new app, " />
+          <Text style={ALMOST} text="almost" />
+          <Text style={TITLE} text="!" />
+        </Text>
+        <Text style={TITLE} preset="header" tx="welcomeScreen.readyForLaunch" />
+        <Image source={bowserLogo} style={BOWSER} />
+        <Text style={CONTENT}>
+          This probably isn't what your app is going to look like. Unless your designer handed you
+          this screen and, in that case, congrats! You're ready to ship.
+        </Text>
+        <Text style={CONTENT}>
+          For everyone else, this is where you'll see a live preview of your fully functioning app
+          using Ignite.
+        </Text>
+      </Screen>
+      <SafeAreaView style={FOOTER}>
+        <View style={FOOTER_CONTENT}>
+          <Button
+            testID="next-screen-button"
+            style={CONTINUE}
+            textStyle={CONTINUE_TEXT}
+            tx="welcomeScreen.continue"
+            onPress={nextScreen}
+          />
+        </View>
+      </SafeAreaView>
+    </View>
+  )
+})