From 43b53e22f7b15d746a4f4c55b5a0569698674f16 Mon Sep 17 00:00:00 2001
From: TylerSchaefer4 <93676493+TylerSchaefer4@users.noreply.github.com>
Date: Tue, 21 May 2024 21:32:45 -0400
Subject: [PATCH] Design system init

---
 frontend/mobile/app/(app)/(tabs)/discover.tsx | 27 +++++--------------
 frontend/mobile/app/(design-system)/Box.tsx   | 14 ++++++++++
 frontend/mobile/app/(design-system)/Colors.ts | 12 +++++++++
 .../mobile/app/(design-system)/Spacing.ts     | 10 +++++++
 frontend/mobile/app/(design-system)/Text.tsx  |  5 ++++
 .../app/(design-system)/TextVariants.ts       | 20 ++++++++++++++
 frontend/mobile/app/(design-system)/index.ts  |  5 ++++
 frontend/mobile/app/(design-system)/theme.ts  | 13 +++++++++
 frontend/mobile/app/_layout.tsx               |  9 +++++--
 9 files changed, 92 insertions(+), 23 deletions(-)
 create mode 100644 frontend/mobile/app/(design-system)/Box.tsx
 create mode 100644 frontend/mobile/app/(design-system)/Colors.ts
 create mode 100644 frontend/mobile/app/(design-system)/Spacing.ts
 create mode 100644 frontend/mobile/app/(design-system)/Text.tsx
 create mode 100644 frontend/mobile/app/(design-system)/TextVariants.ts
 create mode 100644 frontend/mobile/app/(design-system)/index.ts
 create mode 100644 frontend/mobile/app/(design-system)/theme.ts

diff --git a/frontend/mobile/app/(app)/(tabs)/discover.tsx b/frontend/mobile/app/(app)/(tabs)/discover.tsx
index 46cd70909..592f2ebf3 100644
--- a/frontend/mobile/app/(app)/(tabs)/discover.tsx
+++ b/frontend/mobile/app/(app)/(tabs)/discover.tsx
@@ -1,28 +1,13 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Box, Text } from '@/app/(design-system)';
 
 const DiscoverPage = () => {
     return (
-        <View style={styles.container}>
-            <Text style={styles.title}>Discover</Text>
-        </View>
+        <Box flex={1} alignItems="center" justifyContent="center" padding="m">
+            <Text color="aqua" variant="text-1">
+                DiscoverAA
+            </Text>
+        </Box>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: 'bold'
-    },
-    separator: {
-        marginVertical: 30,
-        height: 1,
-        width: '80%'
-    }
-});
-
 export default DiscoverPage;
diff --git a/frontend/mobile/app/(design-system)/Box.tsx b/frontend/mobile/app/(design-system)/Box.tsx
new file mode 100644
index 000000000..91e823ae8
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/Box.tsx
@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+
+import { BoxProps, createBox } from '@shopify/restyle';
+
+import { Theme } from './theme';
+
+type Props = ViewProps & PropsWithChildren & BoxProps<Theme>;
+
+const BoxDefault = createBox<Theme>();
+
+export const Box: React.FC<Props> = ({ style, ...rest }) => {
+    return <BoxDefault style={[style]} {...rest} />;
+};
diff --git a/frontend/mobile/app/(design-system)/Colors.ts b/frontend/mobile/app/(design-system)/Colors.ts
new file mode 100644
index 000000000..9cd099f22
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/Colors.ts
@@ -0,0 +1,12 @@
+// TODO: We will have to change these
+export const Colors = {
+    darkBlue: '#0C3354',
+    darkRed: '#C8102E',
+    green: '#14AC3F',
+    blue: '#2663FF',
+    aqua: '#35B8E2',
+    purple: '#9226FF',
+    red: '#EC2215',
+    orange: '#FF7426',
+    yellow: '#FFB626'
+};
diff --git a/frontend/mobile/app/(design-system)/Spacing.ts b/frontend/mobile/app/(design-system)/Spacing.ts
new file mode 100644
index 000000000..278816813
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/Spacing.ts
@@ -0,0 +1,10 @@
+export const Spacing = {
+    none: 0,
+    xxs: 4,
+    xs: 8,
+    s: 12,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 40
+};
diff --git a/frontend/mobile/app/(design-system)/Text.tsx b/frontend/mobile/app/(design-system)/Text.tsx
new file mode 100644
index 000000000..23c8bc10e
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/Text.tsx
@@ -0,0 +1,5 @@
+import { createText } from '@shopify/restyle';
+
+import { Theme } from './theme';
+
+export const Text = createText<Theme>();
diff --git a/frontend/mobile/app/(design-system)/TextVariants.ts b/frontend/mobile/app/(design-system)/TextVariants.ts
new file mode 100644
index 000000000..2f3cf8565
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/TextVariants.ts
@@ -0,0 +1,20 @@
+// Add actual text variants here
+const Texts = {
+    'text-1': {
+        fontSize: 20,
+        fontWeight: 'bold'
+    },
+    'text-2': {
+        fontSize: 16,
+        fontWeight: 'normal'
+    },
+    'text-3': {
+        fontSize: 14,
+        fontWeight: 'normal'
+    }
+} as const;
+
+export const TextVariants = {
+    defaults: Texts['text-1'],
+    ...Texts
+};
diff --git a/frontend/mobile/app/(design-system)/index.ts b/frontend/mobile/app/(design-system)/index.ts
new file mode 100644
index 000000000..0b40f3cff
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/index.ts
@@ -0,0 +1,5 @@
+export * from './Text';
+export * from './Box';
+export * from './theme';
+export * from './Colors';
+export * from './Spacing';
diff --git a/frontend/mobile/app/(design-system)/theme.ts b/frontend/mobile/app/(design-system)/theme.ts
new file mode 100644
index 000000000..9d0acae78
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/theme.ts
@@ -0,0 +1,13 @@
+import { createTheme } from '@shopify/restyle';
+
+import { Colors } from './Colors';
+import { Spacing } from './Spacing';
+import { TextVariants } from './TextVariants';
+
+export const theme = createTheme({
+    colors: Colors,
+    spacing: Spacing,
+    textVariants: TextVariants
+});
+
+export type Theme = typeof theme;
diff --git a/frontend/mobile/app/_layout.tsx b/frontend/mobile/app/_layout.tsx
index 2d1c8c6e0..193122542 100644
--- a/frontend/mobile/app/_layout.tsx
+++ b/frontend/mobile/app/_layout.tsx
@@ -9,9 +9,12 @@ import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 
 import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { ThemeProvider } from '@shopify/restyle';
 
 import { store } from '@/store/store';
 
+import { theme } from './(design-system)';
+
 export { ErrorBoundary } from 'expo-router';
 
 SplashScreen.preventAutoHideAsync();
@@ -52,8 +55,10 @@ const RootLayout = () => {
     return (
         <GestureHandlerRootView style={{ flex: 1 }}>
             <Provider store={store}>
-                <StatusBar style="light" />
-                <InitalLayout />
+                <ThemeProvider theme={theme}>
+                    <StatusBar style="light" />
+                    <InitalLayout />
+                </ThemeProvider>
             </Provider>
         </GestureHandlerRootView>
     );