summaryrefslogtreecommitdiff
path: root/app/screens
diff options
context:
space:
mode:
Diffstat (limited to 'app/screens')
-rw-r--r--app/screens/demo/demo-list-screen.tsx96
-rw-r--r--app/screens/demo/demo-screen.tsx188
-rw-r--r--app/screens/demo/heart.pngbin204 -> 0 bytes
-rw-r--r--app/screens/demo/[email protected]bin377 -> 0 bytes
-rw-r--r--app/screens/demo/logo-ignite.pngbin9427 -> 0 bytes
-rw-r--r--app/screens/demo/[email protected]bin20283 -> 0 bytes
-rw-r--r--app/screens/graph/graph-screen.tsx264
-rw-r--r--app/screens/index.ts5
-rw-r--r--app/screens/welcome/bowser.pngbin33502 -> 0 bytes
-rw-r--r--app/screens/welcome/[email protected]bin79259 -> 0 bytes
-rw-r--r--app/screens/welcome/welcome-screen.tsx140
11 files changed, 0 insertions, 693 deletions
diff --git a/app/screens/demo/demo-list-screen.tsx b/app/screens/demo/demo-list-screen.tsx
deleted file mode 100644
index 282bf4a..0000000
--- a/app/screens/demo/demo-list-screen.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-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/screens/demo/demo-screen.tsx b/app/screens/demo/demo-screen.tsx
deleted file mode 100644
index 7ec8ff6..0000000
--- a/app/screens/demo/demo-screen.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-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/screens/demo/heart.png b/app/screens/demo/heart.png
deleted file mode 100644
index 9890998..0000000
--- a/app/screens/demo/heart.png
+++ /dev/null
Binary files differ
diff --git a/app/screens/demo/[email protected] b/app/screens/demo/[email protected]
deleted file mode 100644
index e8b70d9..0000000
--- a/app/screens/demo/[email protected]
+++ /dev/null
Binary files differ
diff --git a/app/screens/demo/logo-ignite.png b/app/screens/demo/logo-ignite.png
deleted file mode 100644
index 36af16d..0000000
--- a/app/screens/demo/logo-ignite.png
+++ /dev/null
Binary files differ
diff --git a/app/screens/demo/[email protected] b/app/screens/demo/[email protected]
deleted file mode 100644
index fdbfad8..0000000
--- a/app/screens/demo/[email protected]
+++ /dev/null
Binary files differ
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
deleted file mode 100644
index 8c35590..0000000
--- a/app/screens/graph/graph-screen.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-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/screens/index.ts b/app/screens/index.ts
deleted file mode 100644
index 1ba716f..0000000
--- a/app/screens/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-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/screens/welcome/bowser.png b/app/screens/welcome/bowser.png
deleted file mode 100644
index 2b0bdbc..0000000
--- a/app/screens/welcome/bowser.png
+++ /dev/null
Binary files differ
diff --git a/app/screens/welcome/[email protected] b/app/screens/welcome/[email protected]
deleted file mode 100644
index 85cc693..0000000
--- a/app/screens/welcome/[email protected]
+++ /dev/null
Binary files differ
diff --git a/app/screens/welcome/welcome-screen.tsx b/app/screens/welcome/welcome-screen.tsx
deleted file mode 100644
index 7ba3a59..0000000
--- a/app/screens/welcome/welcome-screen.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-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>
- )
-})
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-25 04:41:46 +0000