TypeScript

EvanBacon · Jul 2, 2020 · 4197324 · 4197324
1 parent 08f3029
commit 4197324
Show file tree

Hide file tree

Showing 8 changed files with 2,920 additions and 186 deletions.
diff --git a/App.js b/App.js
@@ -1,127 +1 @@
-import { NavigationContainer } from "@react-navigation/native";
-import {
-  createStackNavigator,
-  HeaderStyleInterpolators,
-} from "@react-navigation/stack";
-import DarkModeSwitch from "expo-dark-mode-switch";
-import * as Linking from "expo-linking";
-import React from "react";
-import { View } from "react-native";
-import {
-  Appbar,
-  DarkTheme as PaperDarkTheme,
-  DefaultTheme as PaperLightTheme,
-  Provider as PaperProvider,
-} from "react-native-paper";
-
-import Emoji from "./Emoji";
-
-const Stack = createStackNavigator();
-
-const DefaultTheme = {
-  dark: false,
-  colors: {
-    primary: "rgb(0, 122, 255)",
-    background: "rgb(242, 242, 242)",
-    card: "rgb(255, 255, 255)",
-    text: "rgb(28, 28, 30)",
-    border: "rgb(224, 224, 224)",
-  },
-};
-
-export default function App({}) {
-  const [theme, setTheme] = React.useState(DefaultTheme);
-  const [isDark, setDark] = React.useState(false);
-
-  const paperTheme = React.useMemo(() => {
-    const t = theme.dark ? PaperDarkTheme : PaperLightTheme;
-
-    return {
-      ...t,
-      colors: {
-        ...t.colors,
-        ...theme.colors,
-        surface: theme.colors.card,
-        accent: theme.dark ? "rgb(255, 55, 95)" : "rgb(255, 45, 85)",
-        header: theme.dark ? "#000" : "white",
-        headerBorder: theme.dark
-          ? "rgba(224,224,224, 0.3)"
-          : "rgb(224,224,224)",
-      },
-    };
-  }, [theme.colors, theme.dark]);
-
-  const ref = React.useRef(null);
-
-  const linking = {
-    prefixes: [Linking.makeUrl("/")],
-    config: {
-      Root: {
-        path: "",
-        initialRouteName: "Home",
-        screens: { Home: "" },
-      },
-    },
-  };
-
-  return (
-    <PaperProvider theme={paperTheme} linking={linking}>
-      <NavigationContainer>
-        <Stack.Navigator
-          screenOptions={{
-            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
-          }}
-        >
-          <Stack.Screen
-            name="Home"
-            options={{
-              headerTintColor: paperTheme.colors.text,
-              headerStyle: {
-                backgroundColor: paperTheme.colors.header,
-                borderBottomColor: paperTheme.colors.headerBorder,
-              },
-              title: "Icon Builder",
-              headerLeft: () => (
-                <Appbar.Action
-                  color={paperTheme.colors.text}
-                  icon="download"
-                  onPress={() => {
-                    ref.current.saveAsync();
-                  }}
-                />
-              ),
-              headerRight: () => (
-                <View style={{ flexDirection: "row", alignItems: "center" }}>
-                  <DarkModeSwitch
-                    value={paperTheme.dark}
-                    onChange={() => {
-                      setDark((isDark) => !isDark);
-
-                      setTheme(isDark ? DefaultTheme : PaperDarkTheme);
-                    }}
-                  />
-                  <Appbar.Action
-                    color={paperTheme.colors.text}
-                    icon="upload"
-                    onPress={() => {
-                      ref.current.uploadAsync();
-                    }}
-                  />
-                </View>
-              ),
-            }}
-          >
-            {({ navigation }) => (
-              <Emoji
-                ref={ref}
-                navigation={navigation}
-                isDark={isDark}
-                theme={paperTheme}
-              />
-            )}
-          </Stack.Screen>
-        </Stack.Navigator>
-      </NavigationContainer>
-    </PaperProvider>
-  );
-}
+export { default } from "./src/App";
diff --git a/package.json b/package.json
@@ -36,7 +36,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",
-    "expo-cli": "latest"
+    "expo-cli": "latest",
+    "@types/emoji-mart": "^3.0.2",
+    "@types/file-saver": "^2.0.1",
+    "@types/react": "~16.9.41",
+    "@types/react-color": "^3.0.4",
+    "@types/react-dom": "~16.9.0",
+    "@types/react-native": "~0.62.13",
+    "typescript": "~3.9.6"
   },
   "private": true
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,127 @@
+import { NavigationContainer } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  HeaderStyleInterpolators,
+} from "@react-navigation/stack";
+import DarkModeSwitch from "expo-dark-mode-switch";
+import * as Linking from "expo-linking";
+import React from "react";
+import { View } from "react-native";
+import {
+  Appbar,
+  DarkTheme as PaperDarkTheme,
+  DefaultTheme as PaperLightTheme,
+  Provider as PaperProvider,
+} from "react-native-paper";
+
+import Emoji from "./Emoji";
+
+const Stack = createStackNavigator();
+
+const DefaultTheme = {
+  dark: false,
+  colors: {
+    primary: "rgb(0, 122, 255)",
+    background: "rgb(242, 242, 242)",
+    card: "rgb(255, 255, 255)",
+    text: "rgb(28, 28, 30)",
+    border: "rgb(224, 224, 224)",
+  },
+};
+
+export default function App({}) {
+  const [theme, setTheme] = React.useState(DefaultTheme);
+  const [isDark, setDark] = React.useState(false);
+
+  const paperTheme = React.useMemo(() => {
+    const t = theme.dark ? PaperDarkTheme : PaperLightTheme;
+
+    return {
+      ...t,
+      colors: {
+        ...t.colors,
+        ...theme.colors,
+        surface: theme.colors.card,
+        accent: theme.dark ? "rgb(255, 55, 95)" : "rgb(255, 45, 85)",
+        header: theme.dark ? "#000" : "white",
+        headerBorder: theme.dark
+          ? "rgba(224,224,224, 0.3)"
+          : "rgb(224,224,224)",
+      },
+    };
+  }, [theme.colors, theme.dark]);
+
+  const ref = React.useRef(null);
+
+  const linking = {
+    prefixes: [Linking.makeUrl("/")],
+    config: {
+      Root: {
+        path: "",
+        initialRouteName: "Home",
+        screens: { Home: "" },
+      },
+    },
+  };
+
+  return (
+    <PaperProvider theme={paperTheme} linking={linking}>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+          }}
+        >
+          <Stack.Screen
+            name="Home"
+            options={{
+              headerTintColor: paperTheme.colors.text,
+              headerStyle: {
+                backgroundColor: paperTheme.colors.header,
+                borderBottomColor: paperTheme.colors.headerBorder,
+              },
+              title: "Icon Builder",
+              headerLeft: () => (
+                <Appbar.Action
+                  color={paperTheme.colors.text}
+                  icon="download"
+                  onPress={() => {
+                    ref.current.saveAsync();
+                  }}
+                />
+              ),
+              headerRight: () => (
+                <View style={{ flexDirection: "row", alignItems: "center" }}>
+                  <DarkModeSwitch
+                    value={paperTheme.dark}
+                    onChange={() => {
+                      setDark((isDark) => !isDark);
+
+                      setTheme(isDark ? DefaultTheme : PaperDarkTheme);
+                    }}
+                  />
+                  <Appbar.Action
+                    color={paperTheme.colors.text}
+                    icon="upload"
+                    onPress={() => {
+                      ref.current.uploadAsync();
+                    }}
+                  />
+                </View>
+              ),
+            }}
+          >
+            {({ navigation }) => (
+              <Emoji
+                ref={ref}
+                navigation={navigation}
+                isDark={isDark}
+                theme={paperTheme}
+              />
+            )}
+          </Stack.Screen>
+        </Stack.Navigator>
+      </NavigationContainer>
+    </PaperProvider>
+  );
+}
diff --git a/Emoji.js → src/Emoji.tsx b/Emoji.js → src/Emoji.tsx
@@ -1,12 +1,12 @@
 import "emoji-mart/css/emoji-mart.css";
 
 import { P } from "@expo/html-elements";
+import { FontAwesome } from "@expo/vector-icons";
 import { Picker } from "emoji-mart";
 import * as ImagePicker from "expo-image-picker";
 import React from "react";
 import Circle from "react-color/lib/Twitter";
 import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
-import { FontAwesome } from "@expo/vector-icons";
 
 import { generateImagesAsync, twitterEmoji } from "./ImageOps";
 
@@ -84,13 +84,13 @@ const randomColor = () =>
 const defaultEmoji = randomEmoji();
 const defaultColor = "#fff";
 
-const mapping = {
+const mapping: Record<string, string> = {
   copyright: "a9",
   registered: "ae",
   trademark: "2122",
   waving_white_flag: "1f3f3",
 };
-function transformId(id = "", name = "") {
+function transformId(id = "", name = ""): string {
   if (name in mapping) {
     return mapping[name];
   }
@@ -165,7 +165,7 @@ export default React.forwardRef(({ navigation, theme, isDark }, ref) => {
 
   const onSelect = (data) => {
     console.log("Emoji: ", data);
-    navigation.setParams({ emoji: data.unified });
+    // navigation.setParams({ emoji: data.unified });
 
     setEmoji(data);
     setImage(null);

diff --git a/ImageOps.js → src/ImageOps.ts b/ImageOps.js → src/ImageOps.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": true
+  }
+}