ignite-parse-auth-kit 1.0.0

package/app/services/api/index.ts

@@ -0,0 +1,91 @@
+/**
+ * This Api class lets you define an API endpoint and methods to request
+ * data and process it.
+ *
+ * See the [Backend API Integration](https://docs.infinite.red/ignite-cli/boilerplate/app/services/#backend-api-integration)
+ * documentation for more details.
+ */
+import {
+  ApiResponse, // @demo remove-current-line
+  ApisauceInstance,
+  create,
+} from "apisauce"
+
+import Config from "@/config"
+import type { EpisodeItem } from "@/services/api/types" // @demo remove-current-line
+
+import { GeneralApiProblem, getGeneralApiProblem } from "./apiProblem" // @demo remove-current-line
+import type {
+  ApiConfig,
+  ApiFeedResponse, // @demo remove-current-line
+} from "./types"
+
+/**
+ * Configuring the apisauce instance.
+ */
+export const DEFAULT_API_CONFIG: ApiConfig = {
+  url: Config.API_URL,
+  timeout: 10000,
+}
+
+/**
+ * Manages all requests to the API. You can use this class to build out
+ * various requests that you need to call from your backend API.
+ */
+export class Api {
+  apisauce: ApisauceInstance
+  config: ApiConfig
+
+  /**
+   * Set up our API instance. Keep this lightweight!
+   */
+  constructor(config: ApiConfig = DEFAULT_API_CONFIG) {
+    this.config = config
+    this.apisauce = create({
+      baseURL: this.config.url,
+      timeout: this.config.timeout,
+      headers: {
+        Accept: "application/json",
+      },
+    })
+  }
+
+  // @demo remove-block-start
+  /**
+   * Gets a list of recent React Native Radio episodes.
+   */
+  async getEpisodes(): Promise<{ kind: "ok"; episodes: EpisodeItem[] } | GeneralApiProblem> {
+    // make the api call
+    const response: ApiResponse<ApiFeedResponse> = await this.apisauce.get(
+      `api.json?rss_url=https%3A%2F%2Ffeeds.simplecast.com%2FhEI_f9Dx`,
+    )
+
+    // the typical ways to die when calling an api
+    if (!response.ok) {
+      const problem = getGeneralApiProblem(response)
+      if (problem) return problem
+    }
+
+    // transform the data into the format we are expecting
+    try {
+      const rawData = response.data
+
+      // This is where we transform the data into the shape we expect for our model.
+      const episodes: EpisodeItem[] =
+        rawData?.items.map((raw) => ({
+          ...raw,
+        })) ?? []
+
+      return { kind: "ok", episodes }
+    } catch (e) {
+      if (__DEV__ && e instanceof Error) {
+        console.error(`Bad data: ${e.message}\n${response.data}`, e.stack)
+      }
+      return { kind: "bad-data" }
+    }
+  }
+  // @demo remove-block-end
+}
+
+// Singleton instance of the API for convenience
+export const api = new Api()

package/app/services/api/types.ts

@@ -0,0 +1,50 @@
+/**
+ * These types indicate the shape of the data you expect to receive from your
+ * API endpoint, assuming it's a JSON object like we have.
+ */
+export interface EpisodeItem {
+  title: string
+  pubDate: string
+  link: string
+  guid: string
+  author: string
+  thumbnail: string
+  description: string
+  content: string
+  enclosure: {
+    link: string
+    type: string
+    length: number
+    duration: number
+    rating: { scheme: string; value: string }
+  }
+  categories: string[]
+}
+
+export interface ApiFeedResponse {
+  status: string
+  feed: {
+    url: string
+    title: string
+    link: string
+    author: string
+    description: string
+    image: string
+  }
+  items: EpisodeItem[]
+}
+
+/**
+ * The options used to configure apisauce.
+ */
+export interface ApiConfig {
+  /**
+   * The URL of the api.
+   */
+  url: string
+
+  /**
+   * Milliseconds before we timeout the request.
+   */
+  timeout: number
+}

package/app/theme/colors.ts

@@ -0,0 +1,85 @@
+const palette = {
+  neutral100: "#FFFFFF",
+  neutral200: "#F4F2F1",
+  neutral300: "#D7CEC9",
+  neutral400: "#B6ACA6",
+  neutral500: "#978F8A",
+  neutral600: "#564E4A",
+  neutral700: "#3C3836",
+  neutral800: "#191015",
+  neutral900: "#000000",
+
+  primary100: "#F4E0D9",
+  primary200: "#E8C1B4",
+  primary300: "#DDA28E",
+  primary400: "#D28468",
+  primary500: "#C76542",
+  primary600: "#A54F31",
+
+  secondary100: "#DCDDE9",
+  secondary200: "#BCC0D6",
+  secondary300: "#9196B9",
+  secondary400: "#626894",
+  secondary500: "#41476E",
+
+  accent100: "#FFEED4",
+  accent200: "#FFE1B2",
+  accent300: "#FDD495",
+  accent400: "#FBC878",
+  accent500: "#FFBB50",
+
+  angry100: "#F2D6CD",
+  angry500: "#C03403",
+
+  overlay20: "rgba(25, 16, 21, 0.2)",
+  overlay50: "rgba(25, 16, 21, 0.5)",
+} as const
+
+export const colors = {
+  /**
+   * The palette is available to use, but prefer using the name.
+   * This is only included for rare, one-off cases. Try to use
+   * semantic names as much as possible.
+   */
+  palette,
+  /**
+   * A helper for making something see-thru.
+   */
+  transparent: "rgba(0, 0, 0, 0)",
+  /**
+   * The default text color in many components.
+   */
+  text: palette.neutral800,
+  /**
+   * Secondary text information.
+   */
+  textDim: palette.neutral600,
+  /**
+   * The default color of the screen background.
+   */
+  background: palette.neutral200,
+  /**
+   * The default border color.
+   */
+  border: palette.neutral400,
+  /**
+   * The main tinting color.
+   */
+  tint: palette.primary500,
+  /**
+   * The inactive tinting color.
+   */
+  tintInactive: palette.neutral300,
+  /**
+   * A subtle color used for lines.
+   */
+  separator: palette.neutral300,
+  /**
+   * Error messages.
+   */
+  error: palette.angry500,
+  /**
+   * Error Background.
+   */
+  errorBackground: palette.angry100,
+} as const

package/app/theme/colorsDark.ts

@@ -0,0 +1,50 @@
+const palette = {
+  neutral900: "#FFFFFF",
+  neutral800: "#F4F2F1",
+  neutral700: "#D7CEC9",
+  neutral600: "#B6ACA6",
+  neutral500: "#978F8A",
+  neutral400: "#564E4A",
+  neutral300: "#3C3836",
+  neutral200: "#191015",
+  neutral100: "#000000",
+
+  primary600: "#F4E0D9",
+  primary500: "#E8C1B4",
+  primary400: "#DDA28E",
+  primary300: "#D28468",
+  primary200: "#C76542",
+  primary100: "#A54F31",
+
+  secondary500: "#DCDDE9",
+  secondary400: "#BCC0D6",
+  secondary300: "#9196B9",
+  secondary200: "#626894",
+  secondary100: "#41476E",
+
+  accent500: "#FFEED4",
+  accent400: "#FFE1B2",
+  accent300: "#FDD495",
+  accent200: "#FBC878",
+  accent100: "#FFBB50",
+
+  angry100: "#F2D6CD",
+  angry500: "#C03403",
+
+  overlay20: "rgba(25, 16, 21, 0.2)",
+  overlay50: "rgba(25, 16, 21, 0.5)",
+} as const
+
+export const colors = {
+  palette,
+  transparent: "rgba(0, 0, 0, 0)",
+  text: palette.neutral800,
+  textDim: palette.neutral600,
+  background: palette.neutral200,
+  border: palette.neutral400,
+  tint: palette.primary500,
+  tintInactive: palette.neutral300,
+  separator: palette.neutral300,
+  error: palette.angry500,
+  errorBackground: palette.angry100,
+} as const

package/app/theme/context.tsx

@@ -0,0 +1,145 @@
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react"
+import { StyleProp, useColorScheme } from "react-native"
+import {
+  DarkTheme as NavDarkTheme,
+  DefaultTheme as NavDefaultTheme,
+  Theme as NavTheme,
+} from "@react-navigation/native"
+import { useMMKVString } from "react-native-mmkv"
+
+import { storage } from "@/utils/storage"
+
+import { setImperativeTheming } from "./context.utils"
+import { darkTheme, lightTheme } from "./theme"
+import type {
+  AllowedStylesT,
+  ImmutableThemeContextModeT,
+  Theme,
+  ThemeContextModeT,
+  ThemedFnT,
+  ThemedStyle,
+} from "./types"
+
+export type ThemeContextType = {
+  navigationTheme: NavTheme
+  setThemeContextOverride: (newTheme: ThemeContextModeT) => void
+  theme: Theme
+  themeContext: ImmutableThemeContextModeT
+  themed: ThemedFnT
+}
+
+export const ThemeContext = createContext<ThemeContextType | null>(null)
+
+export interface ThemeProviderProps {
+  initialContext?: ThemeContextModeT
+}
+
+/**
+ * The ThemeProvider is the heart and soul of the design token system. It provides a context wrapper
+ * for your entire app to consume the design tokens as well as global functionality like the app's theme.
+ *
+ * To get started, you want to wrap your entire app's JSX hierarchy in `ThemeProvider`
+ * and then use the `useAppTheme()` hook to access the theme context.
+ *
+ * Documentation: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/Theming/
+ */
+export const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
+  children,
+  initialContext,
+}) => {
+  // The operating system theme:
+  const systemColorScheme = useColorScheme()
+  // Our saved theme context: can be "light", "dark", or undefined (system theme)
+  const [themeScheme, setThemeScheme] = useMMKVString("ignite.themeScheme", storage)
+
+  /**
+   * This function is used to set the theme context and is exported from the useAppTheme() hook.
+   *  - setThemeContextOverride("dark") sets the app theme to dark no matter what the system theme is.
+   *  - setThemeContextOverride("light") sets the app theme to light no matter what the system theme is.
+   *  - setThemeContextOverride(undefined) the app will follow the operating system theme.
+   */
+  const setThemeContextOverride = useCallback(
+    (newTheme: ThemeContextModeT) => {
+      setThemeScheme(newTheme)
+    },
+    [setThemeScheme],
+  )
+
+  /**
+   * initialContext is the theme context passed in from the app.tsx file and always takes precedence.
+   * themeScheme is the value from MMKV. If undefined, we fall back to the system theme
+   * systemColorScheme is the value from the device. If undefined, we fall back to "light"
+   */
+  const themeContext: ImmutableThemeContextModeT = useMemo(() => {
+    const t = initialContext || themeScheme || (!!systemColorScheme ? systemColorScheme : "light")
+    return t === "dark" ? "dark" : "light"
+  }, [initialContext, themeScheme, systemColorScheme])
+
+  const navigationTheme: NavTheme = useMemo(() => {
+    switch (themeContext) {
+      case "dark":
+        return NavDarkTheme
+      default:
+        return NavDefaultTheme
+    }
+  }, [themeContext])
+
+  const theme: Theme = useMemo(() => {
+    switch (themeContext) {
+      case "dark":
+        return darkTheme
+      default:
+        return lightTheme
+    }
+  }, [themeContext])
+
+  useEffect(() => {
+    setImperativeTheming(theme)
+  }, [theme])
+
+  const themed = useCallback(
+    <T,>(styleOrStyleFn: AllowedStylesT<T>) => {
+      const flatStyles = [styleOrStyleFn].flat(3) as (ThemedStyle<T> | StyleProp<T>)[]
+      const stylesArray = flatStyles.map((f) => {
+        if (typeof f === "function") {
+          return (f as ThemedStyle<T>)(theme)
+        } else {
+          return f
+        }
+      })
+      // Flatten the array of styles into a single object
+      return Object.assign({}, ...stylesArray) as T
+    },
+    [theme],
+  )
+
+  const value = {
+    navigationTheme,
+    theme,
+    themeContext,
+    setThemeContextOverride,
+    themed,
+  }
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+/**
+ * This is the primary hook that you will use to access the theme context in your components.
+ * Documentation: https://docs.infinite.red/ignite-cli/boilerplate/app/theme/useAppTheme.tsx/
+ */
+export const useAppTheme = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useAppTheme must be used within an ThemeProvider")
+  }
+  return context
+}

package/app/theme/context.utils.ts

@@ -0,0 +1,25 @@
+import type { Theme } from "./types"
+
+const systemui = require("expo-system-ui")
+
+/**
+ * Set the system UI background color to the given color. This is only available if the app has
+ * installed expo-system-ui.
+ *
+ * @param color The color to set the system UI background to
+ */
+export const setSystemUIBackgroundColor = (color: string) => {
+  if (systemui) {
+    systemui.setBackgroundColorAsync(color)
+  }
+}
+
+/**
+ * Set the app's native background color to match the theme.
+ * This is only available if the app has installed expo-system-ui
+ *
+ * @param theme The theme object to use for the background color
+ */
+export const setImperativeTheming = (theme: Theme) => {
+  setSystemUIBackgroundColor(theme.colors.background)
+}

package/app/theme/spacing.ts

@@ -0,0 +1,14 @@
+/**
+  Use these spacings for margins/paddings and other whitespace throughout your app.
+ */
+export const spacing = {
+  xxxs: 2,
+  xxs: 4,
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  xxxl: 64,
+} as const

package/app/theme/spacingDark.ts

@@ -0,0 +1,14 @@
+const SPACING_MULTIPLIER = 1.0
+
+// This is an example of how you can have different spacing values for different themes.
+export const spacing = {
+  xxxs: 2 * SPACING_MULTIPLIER,
+  xxs: 4 * SPACING_MULTIPLIER,
+  xs: 8 * SPACING_MULTIPLIER,
+  sm: 12 * SPACING_MULTIPLIER,
+  md: 16 * SPACING_MULTIPLIER,
+  lg: 24 * SPACING_MULTIPLIER,
+  xl: 32 * SPACING_MULTIPLIER,
+  xxl: 48 * SPACING_MULTIPLIER,
+  xxxl: 64 * SPACING_MULTIPLIER,
+} as const

package/app/theme/styles.ts

@@ -0,0 +1,24 @@
+import { ViewStyle } from "react-native"
+
+import { spacing } from "./spacing" // @demo remove-current-line
+
+/* Use this file to define styles that are used in multiple places in your app. */
+export const $styles = {
+  row: { flexDirection: "row" } as ViewStyle,
+  flex1: { flex: 1 } as ViewStyle,
+  flexWrap: { flexWrap: "wrap" } as ViewStyle,
+
+  // @demo remove-block-start
+  container: {
+    paddingTop: spacing.lg + spacing.xl,
+    paddingHorizontal: spacing.lg,
+  } as ViewStyle,
+  // @demo remove-block-end
+  toggleInner: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  } as ViewStyle,
+}

package/app/theme/theme.ts

@@ -0,0 +1,23 @@
+import { colors as colorsLight } from "./colors"
+import { colors as colorsDark } from "./colorsDark"
+import { spacing as spacingLight } from "./spacing"
+import { spacing as spacingDark } from "./spacingDark"
+import { timing } from "./timing"
+import type { Theme } from "./types"
+import { typography } from "./typography"
+
+// Here we define our themes.
+export const lightTheme: Theme = {
+  colors: colorsLight,
+  spacing: spacingLight,
+  typography,
+  timing,
+  isDark: false,
+}
+export const darkTheme: Theme = {
+  colors: colorsDark,
+  spacing: spacingDark,
+  typography,
+  timing,
+  isDark: true,
+}

package/app/theme/timing.ts

@@ -0,0 +1,6 @@
+export const timing = {
+  /**
+   * The duration (ms) for quick animations.
+   */
+  quick: 300,
+}

package/app/theme/types.ts

@@ -0,0 +1,64 @@
+import type { StyleProp } from "react-native"
+
+import { colors as colorsLight } from "./colors"
+import { colors as colorsDark } from "./colorsDark"
+import { spacing as spacingLight } from "./spacing"
+import { spacing as spacingDark } from "./spacingDark"
+import { timing } from "./timing"
+import { typography } from "./typography"
+
+// This supports "light" and "dark" themes by default. If undefined, it'll use the system theme
+export type ImmutableThemeContextModeT = "light" | "dark"
+export type ThemeContextModeT = ImmutableThemeContextModeT | undefined
+
+// Because we have two themes, we need to define the types for each of them.
+// colorsLight and colorsDark should have the same keys, but different values.
+export type Colors = typeof colorsLight | typeof colorsDark
+// The spacing type needs to take into account the different spacing values for light and dark themes.
+export type Spacing = typeof spacingLight | typeof spacingDark
+
+// These two are consistent across themes.
+export type Timing = typeof timing
+export type Typography = typeof typography
+
+// The overall Theme object should contain all of the data you need to style your app.
+export interface Theme {
+  colors: Colors
+  spacing: Spacing
+  typography: Typography
+  timing: Timing
+  isDark: boolean
+}
+
+/**
+ * Represents a function that returns a styled component based on the provided theme.
+ * @template T The type of the style.
+ * @param theme The theme object.
+ * @returns The styled component.
+ *
+ * @example
+ * const $container: ThemedStyle<ViewStyle> = (theme) => ({
+ *   flex: 1,
+ *   backgroundColor: theme.colors.background,
+ *   justifyContent: "center",
+ *   alignItems: "center",
+ * })
+ * // Then use in a component like so:
+ * const Component = () => {
+ *   const { themed } = useAppTheme()
+ *   return <View style={themed($container)} />
+ * }
+ */
+export type ThemedStyle<T> = (theme: Theme) => T
+export type ThemedStyleArray<T> = (
+  | ThemedStyle<T>
+  | StyleProp<T>
+  | (StyleProp<T> | ThemedStyle<T>)[]
+)[]
+
+/**
+ */
+export type AllowedStylesT<T> = ThemedStyle<T> | StyleProp<T> | ThemedStyleArray<T>
+/**
+ */
+export type ThemedFnT = <T>(styleOrStyleFn: AllowedStylesT<T>) => T

package/app/theme/typography.ts

@@ -0,0 +1,71 @@
+// TODO: write documentation about fonts and typography along with guides on how to add custom fonts in own
+// markdown file and add links from here
+
+import { Platform } from "react-native"
+import {
+  SpaceGrotesk_300Light as spaceGroteskLight,
+  SpaceGrotesk_400Regular as spaceGroteskRegular,
+  SpaceGrotesk_500Medium as spaceGroteskMedium,
+  SpaceGrotesk_600SemiBold as spaceGroteskSemiBold,
+  SpaceGrotesk_700Bold as spaceGroteskBold,
+} from "@expo-google-fonts/space-grotesk"
+
+export const customFontsToLoad = {
+  spaceGroteskLight,
+  spaceGroteskRegular,
+  spaceGroteskMedium,
+  spaceGroteskSemiBold,
+  spaceGroteskBold,
+}
+
+const fonts = {
+  spaceGrotesk: {
+    // Cross-platform Google font.
+    light: "spaceGroteskLight",
+    normal: "spaceGroteskRegular",
+    medium: "spaceGroteskMedium",
+    semiBold: "spaceGroteskSemiBold",
+    bold: "spaceGroteskBold",
+  },
+  helveticaNeue: {
+    // iOS only font.
+    thin: "HelveticaNeue-Thin",
+    light: "HelveticaNeue-Light",
+    normal: "Helvetica Neue",
+    medium: "HelveticaNeue-Medium",
+  },
+  courier: {
+    // iOS only font.
+    normal: "Courier",
+  },
+  sansSerif: {
+    // Android only font.
+    thin: "sans-serif-thin",
+    light: "sans-serif-light",
+    normal: "sans-serif",
+    medium: "sans-serif-medium",
+  },
+  monospace: {
+    // Android only font.
+    normal: "monospace",
+  },
+}
+
+export const typography = {
+  /**
+   * The fonts are available to use, but prefer using the semantic name.
+   */
+  fonts,
+  /**
+   * The primary font. Used in most places.
+   */
+  primary: fonts.spaceGrotesk,
+  /**
+   * An alternate font used for perhaps titles and stuff.
+   */
+  secondary: Platform.select({ ios: fonts.helveticaNeue, android: fonts.sansSerif }),
+  /**
+   * Lets get fancy with a monospace font!
+   */
+  code: Platform.select({ ios: fonts.courier, android: fonts.monospace }),
+}