From 9adb9a0b4a8d40d349dd3ead981aa5eebde62d2a Mon Sep 17 00:00:00 2001
From: lukestahl <stahl.luke@web.de>
Date: Wed, 27 Dec 2023 18:13:33 +0100
Subject: [PATCH] add setup guide

---
 apps/expo/app/(tabs)/apps/index.tsx           |   3 +
 apps/expo/app/(tabs)/overview/index.tsx       |   3 +
 apps/expo/app/_layout.tsx                     |   1 +
 apps/expo/app/setup/_layout.tsx               |  43 ++++
 apps/expo/app/setup/index.tsx                 | 225 ++++++++++++++++++
 apps/expo/targets/intents/DigitalBreak.swift  |   4 +-
 .../expo/targets/intents/EmptyAppIntent.swift |  14 --
 7 files changed, 277 insertions(+), 16 deletions(-)
 create mode 100644 apps/expo/app/setup/_layout.tsx
 create mode 100644 apps/expo/app/setup/index.tsx
 delete mode 100644 apps/expo/targets/intents/EmptyAppIntent.swift

diff --git a/apps/expo/app/(tabs)/apps/index.tsx b/apps/expo/app/(tabs)/apps/index.tsx
index 7d06cb8..d6a5d90 100644
--- a/apps/expo/app/(tabs)/apps/index.tsx
+++ b/apps/expo/app/(tabs)/apps/index.tsx
@@ -87,6 +87,9 @@ const Apps = observer(() => {
           pressStyle={{
             backgroundColor: "$grey1",
           }}
+          onPress={() => {
+            router.push("/setup");
+          }}
         >
           <View borderWidth={1} borderColor={"$grey3"} borderRadius={"$2"} padding="$4" borderStyle="dashed">
             <XStack justifyContent="center" alignItems="center" space="$2">
diff --git a/apps/expo/app/(tabs)/overview/index.tsx b/apps/expo/app/(tabs)/overview/index.tsx
index c5d5386..bed67ea 100644
--- a/apps/expo/app/(tabs)/overview/index.tsx
+++ b/apps/expo/app/(tabs)/overview/index.tsx
@@ -131,6 +131,9 @@ const Overview = observer(() => {
           pressStyle={{
             backgroundColor: "$grey1",
           }}
+          onPress={() => {
+            router.push("/setup");
+          }}
         >
           <View borderWidth={1} borderColor={"$grey3"} borderRadius={"$2"} padding="$4" borderStyle="dashed">
             <XStack justifyContent="center" alignItems="center" space="$2">
diff --git a/apps/expo/app/_layout.tsx b/apps/expo/app/_layout.tsx
index c09cf62..4aa4613 100644
--- a/apps/expo/app/_layout.tsx
+++ b/apps/expo/app/_layout.tsx
@@ -106,6 +106,7 @@ const NavigationStack = () => {
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="break" options={{ headerShown: false }} />
         <Stack.Screen name="settings" options={{ headerShown: false, presentation: "modal" }} />
+        <Stack.Screen name="setup" options={{ headerShown: false, presentation: "modal" }} />
       </Stack>
     </NavigationThemeProvider>
   );
diff --git a/apps/expo/app/setup/_layout.tsx b/apps/expo/app/setup/_layout.tsx
new file mode 100644
index 0000000..b01909c
--- /dev/null
+++ b/apps/expo/app/setup/_layout.tsx
@@ -0,0 +1,43 @@
+import { router, Stack } from "expo-router";
+import { observer } from "mobx-react-lite";
+import { Button, SizableText } from "tamagui";
+
+export const unstable_settings = {
+  initialRouteName: "index",
+};
+
+const BreakLayout = observer(() => {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Instructions",
+          presentation: "modal",
+          headerRight: () => {
+            return (
+              <Button
+                pressStyle={{
+                  backgroundColor: "transparent",
+                  borderWidth: 0,
+                }}
+                onPress={() => {
+                  router.back();
+                }}
+                borderWidth={0}
+                size="$4"
+                backgroundColor={"transparent"}
+              >
+                <SizableText color="$text11" size="$4">
+                  Skip
+                </SizableText>
+              </Button>
+            );
+          },
+        }}
+      />
+    </Stack>
+  );
+});
+
+export default BreakLayout;
diff --git a/apps/expo/app/setup/index.tsx b/apps/expo/app/setup/index.tsx
new file mode 100644
index 0000000..3b2bdb7
--- /dev/null
+++ b/apps/expo/app/setup/index.tsx
@@ -0,0 +1,225 @@
+import * as Linking from "expo-linking";
+import { router } from "expo-router";
+import * as WebBrowser from "expo-web-browser";
+import { observer } from "mobx-react-lite";
+import { Button, H4, Paragraph, Text, View, XStack, YStack } from "tamagui";
+
+import { Container } from "../../components/container";
+import { ShadowCard } from "../../components/shadow.card";
+
+const Setup = observer(() => {
+  return (
+    <Container paddingVertical={"$4"}>
+      <YStack space="$4">
+        <>
+          <H4 color="$text11">Tutorial</H4>
+          <Paragraph color="$text11">Step by step instructions to get you started.</Paragraph>
+        </>
+        <ShadowCard>
+          <XStack space="$3" alignItems={"flex-start"}>
+            <View
+              backgroundColor={"$grey1"}
+              borderRadius={999}
+              height={"$2.5"}
+              width={"$2.5"}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text color="$text11" fontWeight={"800"} fontSize={"$6"}>
+                1
+              </Text>
+            </View>
+            <View marginTop={"$1.5"}>
+              <H4 color="$text11" lineHeight={20}>
+                Download the shortcut
+              </H4>
+              <Paragraph color="$text11">Import the shortcut into your Shortcuts app.</Paragraph>
+              <Button
+                onPress={() => {
+                  void WebBrowser.openBrowserAsync("https://www.icloud.com/shortcuts/67875c273b96497f9639a8f374ef7d92");
+                }}
+                marginTop="$2"
+                backgroundColor={"$primary5"}
+                paddingHorizontal={"$3"}
+                paddingVertical={"$2"}
+              >
+                <Text fontWeight={"600"}>Download and import shortcut</Text>
+              </Button>
+            </View>
+          </XStack>
+        </ShadowCard>
+        <ShadowCard>
+          <XStack space="$3" alignItems={"flex-start"}>
+            <View
+              backgroundColor={"$grey1"}
+              borderRadius={999}
+              height={"$2.5"}
+              width={"$2.5"}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text color="$text11" fontWeight={"800"} fontSize={"$6"}>
+                2
+              </Text>
+            </View>
+            <View marginTop={"$1.5"}>
+              <H4 color="$text11" lineHeight={20}>
+                Open the Shortcut app
+              </H4>
+              <Paragraph color="$text11">Go to Automations and create a new automation via the + button.</Paragraph>
+              <Button
+                onPress={() => {
+                  void Linking.openURL("shortcuts://automation");
+                }}
+                marginTop="$2"
+                backgroundColor={"$primary5"}
+                paddingHorizontal={"$3"}
+                paddingVertical={"$2"}
+              >
+                <Text fontWeight={"600"}>Open Shortcuts App</Text>
+              </Button>
+            </View>
+          </XStack>
+        </ShadowCard>
+        <ShadowCard>
+          <XStack space="$3" alignItems={"flex-start"}>
+            <View
+              backgroundColor={"$grey1"}
+              borderRadius={999}
+              height={"$2.5"}
+              width={"$2.5"}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text color="$text11" fontWeight={"800"} fontSize={"$6"}>
+                3
+              </Text>
+            </View>
+            <View marginTop={"$1.5"}>
+              <H4 color="$text11" lineHeight={20}>
+                Select "App"-Trigger
+              </H4>
+              <Paragraph color="$text11">Scroll down and select "App" as the trigger.</Paragraph>
+            </View>
+          </XStack>
+        </ShadowCard>
+        <ShadowCard>
+          <XStack space="$3" alignItems={"flex-start"}>
+            <View
+              backgroundColor={"$grey1"}
+              borderRadius={999}
+              height={"$2.5"}
+              width={"$2.5"}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text color="$text11" fontWeight={"800"} fontSize={"$6"}>
+                4
+              </Text>
+            </View>
+            <View marginTop={"$1.5"}>
+              <H4 color="$text11" lineHeight={20}>
+                Configure the trigger
+              </H4>
+              <Paragraph color="$text11">Select "Choose" and search for the app you want to use.</Paragraph>
+              <Paragraph color="$text11">Info: You need to create a trigger for every app you want to use.</Paragraph>
+              <Paragraph color="$text11">Select "open directly"</Paragraph>
+              <Paragraph color="$text11">Select "Next" when you are done.</Paragraph>
+            </View>
+          </XStack>
+        </ShadowCard>
+        <ShadowCard>
+          <XStack space="$3" alignItems={"flex-start"}>
+            <View
+              backgroundColor={"$grey1"}
+              borderRadius={999}
+              height={"$2.5"}
+              width={"$2.5"}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text color="$text11" fontWeight={"800"} fontSize={"$6"}>
+                5
+              </Text>
+            </View>
+            <View marginTop={"$1.5"}>
+              <H4 color="$text11" lineHeight={22}>
+                Select "digital break" as the action
+              </H4>
+              <Paragraph color="$text11">Search for "digital break" and select it.</Paragraph>
+            </View>
+          </XStack>
+        </ShadowCard>
+        <ShadowCard>
+          <XStack space="$3" alignItems={"flex-start"}>
+            <View
+              backgroundColor={"$grey1"}
+              borderRadius={999}
+              height={"$2.5"}
+              width={"$2.5"}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text color="$text11" fontWeight={"800"} fontSize={"$6"}>
+                6
+              </Text>
+            </View>
+            <View marginTop={"$1.5"}>
+              <H4 color="$text11" lineHeight={20}>
+                Replace the default app
+              </H4>
+              <Paragraph color="$text11">
+                Replace the default app with the app you want to use. (e.g. Instagram)
+              </Paragraph>
+            </View>
+          </XStack>
+        </ShadowCard>
+        <ShadowCard>
+          <XStack space="$3" alignItems={"flex-start"}>
+            <View
+              backgroundColor={"$grey1"}
+              borderRadius={999}
+              height={"$2.5"}
+              width={"$2.5"}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Text color="$text11" fontWeight={"800"} fontSize={"$6"}>
+                7
+              </Text>
+            </View>
+            <View marginTop={"$1.5"}>
+              <H4 color="$text11" lineHeight={24}>
+                Congrats 🎉
+              </H4>
+              <Paragraph color="$text11">You are all set. Now you can try to open the app you selected.</Paragraph>
+              <Paragraph color="$text11">
+                The App will be displayed in Digital Break after the first time you open it.
+              </Paragraph>
+            </View>
+          </XStack>
+        </ShadowCard>
+        <Button
+          onPress={() => {
+            void router.back();
+          }}
+          marginBottom="$4"
+          backgroundColor={"$primary5"}
+          paddingHorizontal={"$3"}
+          paddingVertical={"$2"}
+        >
+          <Text fontWeight={"600"}>Done</Text>
+        </Button>
+      </YStack>
+    </Container>
+  );
+});
+
+export default Setup;
diff --git a/apps/expo/targets/intents/DigitalBreak.swift b/apps/expo/targets/intents/DigitalBreak.swift
index 073064c..c9a55b4 100644
--- a/apps/expo/targets/intents/DigitalBreak.swift
+++ b/apps/expo/targets/intents/DigitalBreak.swift
@@ -5,11 +5,11 @@ enum MyError: Error {
   case runtimeError(String)
 }
 struct DigitalBreak: AppIntent {
-  static var title: LocalizedStringResource = "Activate Digital Break when an app opens"
+  static var title: LocalizedStringResource = "Check Digital Break"
 
   static var description =
     IntentDescription(
-      "This shortcut starts a breathing exercise and asks if you really want to continue in the selected app"
+      "This shortcut checks if you need a digital break and returns true."
     )
 
   static var openAppWhenRun: Bool = false
diff --git a/apps/expo/targets/intents/EmptyAppIntent.swift b/apps/expo/targets/intents/EmptyAppIntent.swift
deleted file mode 100644
index 5cb4149..0000000
--- a/apps/expo/targets/intents/EmptyAppIntent.swift
+++ /dev/null
@@ -1,14 +0,0 @@
-import AppIntents
-import UIKit
-
-struct EmptyAppIntent: AppIntent {
-
-  static var title: LocalizedStringResource = "Empty App"
-
-  static var openAppWhenRun: Bool = false
-
-  @MainActor
-  func perform() async throws -> some IntentResult {
-    return .result()
-  }
-}