Dependency list, about page, theming, refactoring, persistent dark mode

.gitignore

@@ -11,3 +11,4 @@ web-build/
 
 # macOS
 .DS_Store
+assets/licenses.json

App.tsx

@@ -21,14 +21,22 @@ import DarkModeContext from "./src/contexts/DarkModeContext";
 import DarkTheme from "./src/themes/DarkTheme";
 import DefaultTheme from "./src/themes/DefaultTheme";
 import About from "./src/screens/About";
+import Dependencies from "./src/screens/Dependencies";
+import initDark from "./src/utils/darkStorage";
 
 const Stack = createStackNavigator();
 
 export default function App(): JSX.Element {
   const [fontsLoaded] = useFonts({ Inter_300Light, Inter_600SemiBold });
-  const [dark, setDark] = useState(true);
+  const [dark, setDark] = useState(false);
   const [theme, setTheme] = useState(DarkTheme);
 
+  useEffect(() => {
+    (async function getDark(): Promise<void> {
+      setDark(await initDark());
+    })();
+  }, []);
+
   useEffect(() => {
     const newTheme = dark ? DarkTheme : DefaultTheme;
     setTheme(newTheme);
@@ -48,6 +56,7 @@ export default function App(): JSX.Element {
             />
             <Stack.Screen name="Settings" component={Settings} />
             <Stack.Screen name="About" component={About} />
+            <Stack.Screen name="Dependencies" component={Dependencies} />
           </Stack.Navigator>
         </PaperProvider>
       </NavigationContainer>

LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2021 RazerMoon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app.json

@@ -8,7 +8,7 @@
     "backgroundColor": "#181A20",
     "primaryColor": "#25A55F",
     "androidStatusBar": {
-      "backgroundColor": "#181A20"
+      "backgroundColor": "#25A55F"
     },
     "androidNavigationBar": {
       "barStyle": "light-content"
@@ -17,7 +17,7 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#181A20"
+      "backgroundColor": "#25A55F"
     },
     "updates": {
       "fallbackToCacheTimeout": 0

package.json

@@ -1,4 +1,7 @@
 {
+  "name": "cao-points-app",
+  "author": "RazerMoon",
+  "License": "MIT",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -7,7 +10,8 @@
     "web": "expo start --web",
     "eject": "expo eject",
     "lint": "eslint **/**/*.{ts,tsx}",
-    "lint:fix": "eslint **/**/*.{ts,tsx} --fix"
+    "lint:fix": "eslint **/**/*.{ts,tsx} --fix",
+    "generate-licenses": "npm-license-crawler -onlyDirectDependencies -json ./assets/licenses.json"
   },
   "dependencies": {
     "@expo-google-fonts/inter": "^0.1.0",
@@ -19,15 +23,16 @@
     "expo": "~40.0.0",
     "expo-app-loading": "^1.0.1",
     "expo-font": "~8.4.0",
-    "expo-web-browser": "^8.6.0",
+    "expo-web-browser": "~8.6.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-gesture-handler": "~1.8.0",
     "react-native-paper": "^4.7.1",
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.9",
-    "react-native-screens": "~2.15.0"
+    "react-native-screens": "~2.15.0",
+    "return": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "~16.9.35",
@@ -45,6 +50,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "expo-network": "^2.4.0",
     "expo-optimize": "^0.1.70",
+    "npm-license-crawler": "^0.2.1",
     "prettier": "^2.2.1",
     "react-native-web": "~0.13.12",
     "typescript": "~4.1.5"

src/components/About/DependencyList.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { List, Divider } from "react-native-paper";
+
+import { openBrowserAsync } from "expo-web-browser";
+import { AboutProps as Props } from "../../utils/StackTypes";
+
+const DependencyList = ({
+  navigation,
+}: Pick<Props, "navigation">): JSX.Element => {
+  return (
+    <List.Section
+      style={{ marginTop: 20 }}
+      accessibilityComponentType=""
+      accessibilityTraits=""
+    >
+      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <List.Item
+        title="Expo"
+        description="Used for app packaging and distribution."
+        right={(props) => (
+          <List.Icon
+            {...props}
+            style={{ alignSelf: "center", ...props.style }}
+            icon="open-in-new"
+          />
+        )}
+        onPress={() => openBrowserAsync("https://expo.io/")}
+        accessibilityComponentType=""
+        accessibilityTraits=""
+      />
+      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <List.Item
+        title="React Native"
+        description="A framework for building native apps."
+        right={(props) => (
+          <List.Icon
+            {...props}
+            style={{ alignSelf: "center", ...props.style }}
+            icon="open-in-new"
+          />
+        )}
+        onPress={() => openBrowserAsync("https://reactnative.dev/")}
+        accessibilityComponentType=""
+        accessibilityTraits=""
+      />
+      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <List.Item
+        title="React Native Paper"
+        description="Collection of customizable components."
+        right={(props) => (
+          <List.Icon
+            {...props}
+            style={{ alignSelf: "center", ...props.style }}
+            icon="open-in-new"
+          />
+        )}
+        onPress={() => openBrowserAsync("https://reactnativepaper.com/")}
+        accessibilityComponentType=""
+        accessibilityTraits=""
+      />
+      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <List.Item
+        title="Full list"
+        description="A list of all the open source libraries being used."
+        right={(props) => (
+          <List.Icon
+            {...props}
+            style={{ alignSelf: "center", ...props.style }}
+            icon="open-in-new"
+          />
+        )}
+        onPress={() => navigation.navigate("Dependencies")}
+        accessibilityComponentType=""
+        accessibilityTraits=""
+      />
+      <Divider accessibilityComponentType="" accessibilityTraits="" />
+    </List.Section>
+  );
+};
+
+export default DependencyList;

src/components/DarkModeSwitch.tsx

@@ -1,14 +1,36 @@
 import React, { useContext } from "react";
 import { Switch } from "react-native-paper";
 import DarkModeContext from "../contexts/DarkModeContext";
+import { storeDark } from "../utils/darkStorage";
 
-const DarkModeSwitch = (): JSX.Element => {
+type Props = {
+  color: string;
+  // eslint-disable-next-line react/require-default-props
+  style?:
+    | {
+        marginRight: number;
+        marginVertical?: number | undefined;
+      }
+    | undefined;
+};
+
+const DarkModeSwitch = (props: Props): JSX.Element => {
   const { dark, setDark } = useContext(DarkModeContext);
 
   return (
     <Switch
       value={dark}
-      onValueChange={() => setDark((prev) => !prev)}
+      {...props}
+      onValueChange={() =>
+        setDark((prev) => {
+          try {
+            storeDark(!prev);
+          } catch (err) {
+            //
+          }
+          return !prev;
+        })
+      }
       accessibilityComponentType=""
       accessibilityTraits=""
     />

src/components/Dependencies/LicenseList.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { FlatList, FlatListProps } from "react-native";
+import { LicensesType } from "../../utils/getLicensesFromJSON";
+
+// TODO: Add dark mode support
+const LicenseList = ({ ...rest }: FlatListProps<LicensesType>): JSX.Element => {
+  return (
+    <FlatList style={{ flex: 1 }} {...rest} keyExtractor={({ key }) => key} />
+  );
+};
+
+export default LicenseList;

src/components/Dependencies/LicensesListItem.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+import { Avatar, List } from "react-native-paper";
+
+import { openBrowserAsync } from "expo-web-browser";
+import { StyleSheet } from "react-native";
+import { LicensesType } from "../../utils/getLicensesFromJSON";
+
+type Props = Omit<LicensesType, "parents" | "key">;
+
+const styles = StyleSheet.create({
+  avatar: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 2,
+
+    elevation: 5,
+  },
+});
+
+const LicensesListItem = ({
+  image,
+  username,
+  name,
+  version,
+  repository,
+  licenses,
+}: Props): JSX.Element => {
+  return (
+    <List.Item
+      title={name}
+      description={`${version} • ${licenses} • ${username}`}
+      style={{ margin: 5 }}
+      onPress={() => openBrowserAsync(repository)}
+      accessibilityComponentType=""
+      accessibilityTraits=""
+      left={(props) => (
+        <Avatar.Image
+          accessibilityComponentType=""
+          accessibilityTraits=""
+          {...props}
+          style={[styles.avatar, props.style]}
+          source={{ uri: image }}
+        />
+      )}
+      right={(props) => (
+        <List.Icon
+          {...props}
+          style={{ alignSelf: "center", ...props.style }}
+          icon="open-in-new"
+        />
+      )}
+    />
+  );
+};
+
+export default LicensesListItem;