ignite-parse-auth-kit 1.0.0

package/plugins/withSplashScreen.ts

@@ -0,0 +1,69 @@
+import { ConfigPlugin, withStringsXml, AndroidConfig, withAndroidStyles } from "expo/config-plugins"
+
+/**
+ *
+ * Expo Config Plugin to help address the double splash screen issue with `expo-splash-screen`
+ * See more information about this issue here: https://github.com/expo/expo/issues/16084
+ *
+ * How it works:
+ *   1) Replace the default splash screen with a transparent screen
+ *   2) Set the splash screen status bar to translucent
+ */
+export const withSplashScreen: ConfigPlugin = (config) => {
+  config = withAndroidSplashScreen(config)
+  return config
+}
+
+/**
+ * Android implementation of the config plugin - the only platform needed for this plugin.
+ * However, it is good practice to break up your config plugins from the exported
+ * function into parts by platform. For example, if it was needed, we would also
+ * add `withIosSplashScreen` for the iOS implementation.
+ */
+const withAndroidSplashScreen: ConfigPlugin = (config) => {
+  config = withCustomStylesXml(config)
+  config = withCustomStringsXml(config)
+  return config
+}
+
+/**
+ * Modifies the `android/app/src/main/res/values/strings.xml` file to add the following string:
+ *
+ * <string name="expo_splash_screen_status_bar_translucent" translatable="false">true</string>
+ */
+const withCustomStringsXml: ConfigPlugin = (config) =>
+  withStringsXml(config, (modConfig) => {
+    modConfig.modResults = AndroidConfig.Strings.setStringItem(
+      [
+        {
+          _: "true",
+          $: {
+            name: "expo_splash_screen_status_bar_translucent",
+            translatable: "false",
+          },
+        },
+      ],
+      modConfig.modResults,
+    )
+    return modConfig
+  })
+
+/**
+ * Modifies the `android/app/src/main/res/values/styles.xml` file to append the
+ * the following to the Theme.App.SplashScreen style:
+ *
+ * <item name="android:windowIsTranslucent">true</item>
+ */
+const withCustomStylesXml: ConfigPlugin = (config) =>
+  withAndroidStyles(config, async (modConfig) => {
+    modConfig.modResults = AndroidConfig.Styles.assignStylesValue(modConfig.modResults, {
+      add: true,
+      name: "android:windowIsTranslucent",
+      value: "true",
+      parent: {
+        name: "Theme.App.SplashScreen",
+        parent: "AppTheme",
+      },
+    })
+    return modConfig
+  })

package/src/app/_layout.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react"
+import { Slot, SplashScreen } from "expo-router"
+import { useFonts } from "@expo-google-fonts/space-grotesk"
+import { KeyboardProvider } from "react-native-keyboard-controller"
+import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
+
+import { initI18n } from "@/i18n"
+import { ThemeProvider } from "@/theme/context"
+import { customFontsToLoad } from "@/theme/typography"
+import { loadDateFnsLocale } from "@/utils/formatDate"
+
+SplashScreen.preventAutoHideAsync()
+
+if (__DEV__) {
+  // Load Reactotron configuration in development. We don't want to
+  // include this in our production bundle, so we are using `if (__DEV__)`
+  // to only execute this in development.
+  require("src/devtools/ReactotronConfig.ts")
+}
+
+export { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary"
+
+export default function Root() {
+  const [fontsLoaded, fontError] = useFonts(customFontsToLoad)
+  const [isI18nInitialized, setIsI18nInitialized] = useState(false)
+
+  useEffect(() => {
+    initI18n()
+      .then(() => setIsI18nInitialized(true))
+      .then(() => loadDateFnsLocale())
+  }, [])
+
+  const loaded = fontsLoaded && isI18nInitialized
+
+  useEffect(() => {
+    if (fontError) throw fontError
+  }, [fontError])
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync()
+    }
+  }, [loaded])
+
+  if (!loaded) {
+    return null
+  }
+
+  return (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <ThemeProvider>
+        <KeyboardProvider>
+          <Slot />
+        </KeyboardProvider>
+      </ThemeProvider>
+    </SafeAreaProvider>
+  )
+}

package/src/app/index.tsx

@@ -0,0 +1,5 @@
+import { WelcomeScreen } from '@/screens/WelcomeScreen'
+
+export default function Index() {
+  return <WelcomeScreen />
+}

package/test/i18n.test.ts

@@ -0,0 +1,75 @@
+import { exec } from "child_process"
+
+import en from "../app/i18n/en"
+
+// Use this array for keys that for whatever reason aren't greppable so they
+// don't hold your test suite hostage by always failing.
+const EXCEPTIONS: string[] = [
+  // "welcomeScreen:readyForLaunch",
+
+  /**
+   * This translation key actually shows up in a comment describing the usage of the translate
+   * function in the app/i18n/translate.ts file. Because the grep command in the i18n test below
+   * doesn't account for commented out code, we must manually exclude it so tests don't fail
+   * because of a comment.
+   */
+  "hello",
+]
+
+function iterate(obj, stack, array) {
+  for (const property in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, property)) {
+      if (typeof (obj as object)[property] === "object") {
+        iterate(obj[property], `${stack}.${property}`, array)
+      } else {
+        array.push(`${stack.slice(1)}.${property}`)
+      }
+    }
+  }
+
+  return array
+}
+
+/**
+ * This tests your codebase for missing i18n strings so you can avoid error strings at render time
+ *
+ * It was taken from https://gist.github.com/Michaelvilleneuve/8808ba2775536665d95b7577c9d8d5a1
+ * and modified slightly to account for our Ignite higher order components,
+ * which take 'tx' and 'fooTx' props.
+ * The grep command is nasty looking, but it's essentially searching the codebase for a few different things:
+ *
+ * tx="*"
+ * Tx=""
+ * tx={""}
+ * Tx={""}
+ * translate(""
+ *
+ * and then grabs the i18n key between the double quotes
+ *
+ * This approach isn't 100% perfect. If you are storing your key string in a variable because you
+ * are setting it conditionally, then it won't be picked up.
+ *
+ */
+
+describe("i18n", () => {
+  test("There are no missing keys", (done) => {
+    // Actual command output:
+    // grep "[T\|t]x=[{]\?\"\S*\"[}]\?\|translate(\"\S*\"" -ohr './app' | grep -o "\".*\""
+    const command = `grep "[T\\|t]x=[{]\\?\\"\\S*\\"[}]\\?\\|translate(\\"\\S*\\"" -ohr './app' | grep -o "\\".*\\""`
+    exec(command, (_, stdout) => {
+      const allTranslationsDefinedOld = iterate(en, "", [])
+      // Replace first instance of "." because of i18next namespace separator
+      const allTranslationsDefined = allTranslationsDefinedOld.map((key) => key.replace(".", ":"))
+      const allTranslationsUsed = stdout.replace(/"/g, "").split("\n")
+      allTranslationsUsed.splice(-1, 1)
+
+      for (let i = 0; i < allTranslationsUsed.length; i += 1) {
+        if (!EXCEPTIONS.includes(allTranslationsUsed[i])) {
+          // You can add keys to EXCEPTIONS (above) if you don't want them included in the test
+          expect(allTranslationsDefined).toContainEqual(allTranslationsUsed[i])
+        }
+      }
+      done()
+    })
+  }, 240000)
+})

package/test/mockFile.ts

@@ -0,0 +1,6 @@
+export default {
+  height: 100,
+  width: 100,
+  scale: 2.0,
+  uri: "https://placecats.com/200/200",
+}

package/test/setup.ts

@@ -0,0 +1,58 @@
+// we always make sure 'react-native' gets included first
+// eslint-disable-next-line no-restricted-imports
+import * as ReactNative from "react-native"
+
+import mockFile from "./mockFile"
+
+// libraries to mock
+jest.doMock("react-native", () => {
+  // Extend ReactNative
+  return Object.setPrototypeOf(
+    {
+      Image: {
+        ...ReactNative.Image,
+        resolveAssetSource: jest.fn((_source) => mockFile), // eslint-disable-line @typescript-eslint/no-unused-vars
+        getSize: jest.fn(
+          (
+            uri: string, // eslint-disable-line @typescript-eslint/no-unused-vars
+            success: (width: number, height: number) => void,
+            failure?: (_error: any) => void, // eslint-disable-line @typescript-eslint/no-unused-vars
+          ) => success(100, 100),
+        ),
+      },
+    },
+    ReactNative,
+  )
+})
+
+jest.mock("i18next", () => ({
+  currentLocale: "en",
+  t: (key: string, params: Record<string, string>) => {
+    return `${key} ${JSON.stringify(params)}`
+  },
+  translate: (key: string, params: Record<string, string>) => {
+    return `${key} ${JSON.stringify(params)}`
+  },
+}))
+
+jest.mock("expo-localization", () => ({
+  ...jest.requireActual("expo-localization"),
+  getLocales: () => [{ languageTag: "en-US", textDirection: "ltr" }],
+}))
+
+jest.mock("../app/i18n/index.ts", () => ({
+  i18n: {
+    isInitialized: true,
+    language: "en",
+    t: (key: string, params: Record<string, string>) => {
+      return `${key} ${JSON.stringify(params)}`
+    },
+    numberToCurrency: jest.fn(),
+  },
+}))
+
+declare const tron // eslint-disable-line @typescript-eslint/no-unused-vars
+
+declare global {
+  let __TEST__: boolean
+}

package/test/test-tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "noUnusedLocals": false
+  },
+  "include": ["**/*.test.ts", "**/*.test.tsx"]
+}

package/tsconfig.json

@@ -0,0 +1,52 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "jsx": "react-native",
+    "customConditions": [
+      "react-native"
+    ],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "sourceMap": true,
+    "target": "esnext",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./app/*"
+      ],
+      "@assets/*": [
+        "./assets/*"
+      ]
+    },
+    "typeRoots": [
+      "./node_modules/@types",
+      "./types"
+    ]
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "test/**/*"
+  ]
+}

package/types/lib.es5.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Fixes https://github.com/microsoft/TypeScript/issues/16655 for `Array.prototype.filter()`
+ * For example, using the fix the type of `bar` is `string[]` in the below snippet as it should be.
+ *
+ *  const foo: (string | null | undefined)[] = [];
+ *  const bar = foo.filter(Boolean);
+ *
+ * For related definitions, see https://github.com/microsoft/TypeScript/blob/master/src/lib/es5.d.ts
+ *
+ * Original licenses apply, see
+ *  - https://github.com/microsoft/TypeScript/blob/master/LICENSE.txt
+ *  - https://stackoverflow.com/help/licensing
+ */
+
+/** See https://stackoverflow.com/a/51390763/1470607  */
+type Falsy = false | 0 | "" | null | undefined
+
+interface Array<T> {
+  /**
+   * Returns the elements of an array that meet the condition specified in a callback function.
+   * @param predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
+   * @param thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
+   */
+  filter<S extends T>(predicate: BooleanConstructor, thisArg?: any): Exclude<S, Falsy>[]
+}