Initial design of computer list

.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

.expo/types/router.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Router from 'expo-router';
+
+export * from 'expo-router';
+
+declare module 'expo-router' {
+  export namespace ExpoRouter {
+    export interface __routes<T extends string | object = string> {
+      hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; };
+      hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/`; params?: Router.UnknownOutputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; };
+      href: Router.RelativePathString | Router.ExternalPathString | `/${`?${string}` | `#${string}` | ''}` | `/_sitemap${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; };
+    }
+  }
+}

.gitignore

@@ -130,3 +130,9 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/selfstarter.iml" filepath="$PROJECT_DIR$/.idea/selfstarter.iml" />
+    </modules>
+  </component>
+</project>

.idea/selfstarter.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

app-example/app/_layout.tsx

@@ -0,0 +1,39 @@
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { useFonts } from 'expo-font';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { StatusBar } from 'expo-status-bar';
+import { useEffect } from 'react';
+import 'react-native-reanimated';
+
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
+  const [loaded] = useFonts({
+    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+  });
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style="auto" />
+    </ThemeProvider>
+  );
+}

app/_layout.tsx

@@ -1,39 +1,5 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { StatusBar } from 'expo-status-bar';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
-
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-// Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync();
+import { Stack } from "expo-router";
 
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
-  const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-  });
-
-  useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
-    return null;
-  }
-
-  return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
-  );
+  return <Stack />;
 }

app/index.tsx

@@ -0,0 +1,87 @@
+import {FlatList, Text, View, ColorValue, ListRenderItemInfo} from "react-native";
+// @ts-ignore
+import SwipeableFlatList from 'react-native-swipeable-list';
+
+export default function Index() {
+  return (
+    <View style={{
+      backgroundColor: "#FFFFFF",
+    }}>
+      <ComputerList computers={[
+        {
+          name: "Test PC",
+          emoji: "💻",
+          background_color: '#D9D9D9',
+          mac_address: "00:1A:2B:3C:4D:5E",
+        },
+        {
+          name: "Another PC in the basement",
+          emoji: "💻",
+          background_color: '#D9D9D9',
+          mac_address: "00:1A:2B:3C:4D:5E",
+        }
+      ]}/>
+    </View>
+  );
+}
+
+function ComputerList(computers: { computers: Computer[] }) {
+  return (
+    <View>
+      <FlatList style={{
+        borderRadius: 25,
+      }} data={computers.computers} renderItem={({item}: ListRenderItemInfo<Computer>) =>
+        <View style={{
+          display: "flex",
+          flexDirection: "row",
+          paddingHorizontal: 15,
+          paddingVertical: 15,
+          gap: 60,
+          backgroundColor: '#FFFFFF'
+        }}>
+          <View style={{
+            width: 65,
+            height: 65,
+            borderRadius: 100,
+            backgroundColor: item.background_color,
+            alignItems: "center",
+            justifyContent: "center",
+          }}>
+            <Text style={{
+              fontSize: 28
+            }}>{item.emoji}</Text>
+          </View>
+          <View style={{
+            flexDirection: "column",
+            gap: 0,
+            padding: 0,
+            justifyContent: "center",
+          }}>
+            <Text style={{
+              fontSize: 18,
+              justifyContent: "flex-start",
+            }}>{item.name}</Text>
+            <Text style={{
+              fontSize: 12,
+              justifyContent: "flex-start",
+              color: '#979797'
+            }}>{item.mac_address}</Text>
+          </View>
+        </View>
+      }/>
+    </View>
+  )
+}
+
+type Server = {
+  name: string,
+  domain: string,
+  computers: Computer[],
+}
+
+type Computer = {
+  name: string,
+  emoji: string,
+  background_color: ColorValue,
+  mac_address: string,
+}

package-lock.json

@@ -30,6 +30,7 @@
         "react-native-reanimated": "~3.16.1",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "~4.4.0",
+        "react-native-swipeable-list": "^0.1.2",
         "react-native-web": "~0.19.13",
         "react-native-webview": "13.12.5"
       },
@@ -11747,6 +11748,16 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-swipeable-list": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-swipeable-list/-/react-native-swipeable-list-0.1.2.tgz",
+      "integrity": "sha512-FDeFLByUep3m3xuwS/ZkktxL7Xzg90XnKoo+KLTF04jiddyVZQMnXTHG8O4pyiEtg/swcBlT6XUktV+/KTVNXQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.11.0",
+        "react-native": ">=0.61.4"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.13",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.13.tgz",

package.json

@@ -37,6 +37,7 @@
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
+    "react-native-swipeable-list": "^0.1.2",
     "react-native-web": "~0.19.13",
     "react-native-webview": "13.12.5"
   },