@mediacubeco/expo-template-fsd 1.0.0

package/src/shared/lib/api/models/api-instance/api-instance.ts

@@ -0,0 +1,118 @@
+import { ErrorHandler, Log } from '@mediacubeco/base/helpers'
+import { API_TOKEN, API_URL } from '../../../../constants'
+import { formatRoute, formatURI } from './api-instance.utils'
+import { ApiInstanceMethod } from './api-instance.constants'
+import {
+  ApiInstanceConfig,
+  ApiInstanceDefaultBody,
+  ApiInstanceDefaultHeaders,
+  ApiInstanceDefaultParams,
+  ApiInstanceRoute,
+  ApiInstanceURL,
+  ApiInstanceURN,
+} from './api-instance.types'
+
+abstract class ApiInstance {
+  private url: ApiInstanceURL
+  private urn: ApiInstanceURN
+
+  private headers: ApiInstanceDefaultHeaders
+
+  constructor(urn: ApiInstanceURN) {
+    this.url = API_URL
+    this.urn = urn
+
+    this.headers = {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${API_TOKEN}`,
+    }
+  }
+
+  private formatHeaders(headers?: ApiInstanceDefaultHeaders) {
+    return { ...this.headers, ...headers }
+  }
+
+  private async request<Result>(
+    method: ApiInstanceMethod,
+    route: ApiInstanceRoute,
+    { params, body, headers }: ApiInstanceConfig = {}
+  ): Promise<Result> {
+    const uri = formatURI(this.url, this.urn, formatRoute(route, params))
+
+    try {
+      const response = await fetch(uri, {
+        method,
+        body: JSON.stringify(body),
+        headers: this.formatHeaders(headers),
+      })
+
+      if (!response.ok) {
+        ErrorHandler.throw('API Error', response)
+      }
+
+      const data = await response.json()
+
+      Log.formatted.success(method, uri, { data, params, body, headers })
+
+      return data as Result
+    } catch (error) {
+      ErrorHandler.forward(error, {
+        signal: method,
+        message: uri,
+        payload: { params, body, headers },
+      })
+    }
+  }
+
+  protected updateHeaders(headers: ApiInstanceDefaultHeaders) {
+    this.headers = { ...this.headers, ...headers }
+  }
+
+  protected async get<
+    Result,
+    Params extends ApiInstanceDefaultParams = ApiInstanceDefaultParams,
+    Body extends ApiInstanceDefaultBody = ApiInstanceDefaultBody,
+    Headers extends ApiInstanceDefaultHeaders = ApiInstanceDefaultHeaders,
+  >(route: ApiInstanceRoute, config?: ApiInstanceConfig<Body, Params, Headers>) {
+    return await this.request<Result>(ApiInstanceMethod.Get, route, config)
+  }
+
+  protected async post<
+    Result,
+    Params extends ApiInstanceDefaultParams = ApiInstanceDefaultParams,
+    Body extends ApiInstanceDefaultBody = ApiInstanceDefaultBody,
+    Headers extends ApiInstanceDefaultHeaders = ApiInstanceDefaultHeaders,
+  >(route: ApiInstanceRoute, config?: ApiInstanceConfig<Body, Params, Headers>) {
+    return await this.request<Result>(ApiInstanceMethod.Post, route, config)
+  }
+
+  protected async put<
+    Result,
+    Params extends ApiInstanceDefaultParams = ApiInstanceDefaultParams,
+    Body extends ApiInstanceDefaultBody = ApiInstanceDefaultBody,
+    Headers extends ApiInstanceDefaultHeaders = ApiInstanceDefaultHeaders,
+  >(route: ApiInstanceRoute, config?: ApiInstanceConfig<Body, Params, Headers>) {
+    return await this.request<Result>(ApiInstanceMethod.Put, route, config)
+  }
+
+  protected async patch<
+    Result,
+    Params extends ApiInstanceDefaultParams = ApiInstanceDefaultParams,
+    Body extends ApiInstanceDefaultBody = ApiInstanceDefaultBody,
+    Headers extends ApiInstanceDefaultHeaders = ApiInstanceDefaultHeaders,
+  >(route: ApiInstanceRoute, config?: ApiInstanceConfig<Body, Params, Headers>) {
+    return await this.request<Result>(ApiInstanceMethod.Patch, route, config)
+  }
+
+  protected async delete<
+    Result,
+    Params extends ApiInstanceDefaultParams = ApiInstanceDefaultParams,
+    Body extends ApiInstanceDefaultBody = ApiInstanceDefaultBody,
+    Headers extends ApiInstanceDefaultHeaders = ApiInstanceDefaultHeaders,
+  >(route: ApiInstanceRoute, config?: ApiInstanceConfig<Body, Params, Headers>) {
+    return await this.request<Result>(ApiInstanceMethod.Delete, route, config)
+  }
+}
+
+export default ApiInstance

package/src/shared/lib/api/models/api-instance/api-instance.types.ts

@@ -0,0 +1,31 @@
+type ApiInstanceURL = `https://${string}`
+
+type ApiInstanceURN = `${'/'}${string}`
+
+type ApiInstanceRoute = `/${string}`
+
+type ApiInstanceDefaultParams = Record<string, string>
+
+type ApiInstanceDefaultBody = Record<string, any>
+
+type ApiInstanceDefaultHeaders = Record<string, string>
+
+type ApiInstanceConfig<
+  Params extends ApiInstanceDefaultParams = ApiInstanceDefaultParams,
+  Body extends ApiInstanceDefaultBody = ApiInstanceDefaultBody,
+  Headers extends ApiInstanceDefaultHeaders = ApiInstanceDefaultHeaders,
+> = {
+  params?: Params
+  body?: Body
+  headers?: Headers
+}
+
+export type {
+  ApiInstanceURL,
+  ApiInstanceURN,
+  ApiInstanceRoute,
+  ApiInstanceDefaultBody,
+  ApiInstanceDefaultParams,
+  ApiInstanceDefaultHeaders,
+  ApiInstanceConfig,
+}

package/src/shared/lib/api/models/api-instance/api-instance.utils.ts

@@ -0,0 +1,22 @@
+import {
+  ApiInstanceDefaultParams,
+  ApiInstanceRoute,
+  ApiInstanceURL,
+  ApiInstanceURN,
+} from './api-instance.types'
+
+const formatURI = (url: ApiInstanceURL, urn: ApiInstanceURN, route: ApiInstanceRoute) => {
+  return [url, urn, route].join('')
+}
+
+const formatRoute = <Params extends ApiInstanceDefaultParams>(
+  route: ApiInstanceRoute,
+  params?: Params
+) => {
+  const query = new URLSearchParams(params).toString()
+  const validRoute = route.endsWith('/') ? route.slice(0, -1) : route
+
+  return [validRoute, query].join('?') as ApiInstanceRoute
+}
+
+export { formatURI, formatRoute }

package/src/shared/lib/api/models/api-instance/index.ts

@@ -0,0 +1 @@
+export { default as ApiInstance } from './api-instance'

package/src/shared/lib/api/models/index.ts

@@ -0,0 +1 @@
+export * from './api-instance'

package/src/shared/lib/api/repositories/auth/auth.ts

@@ -0,0 +1,18 @@
+import { ApiInstance } from '../../models'
+import { SignInConfig, SignUpConfig, SignInResponse, SignUpResponse } from './auth.types'
+
+class AuthRepository extends ApiInstance {
+  async signIn(_: SignInConfig) {
+    const { data } = await this.post<SignInResponse>('/sign-in')
+
+    return data
+  }
+
+  async signUp(_: SignUpConfig) {
+    const { data } = await this.post<SignUpResponse>('/sign-up')
+
+    return data
+  }
+}
+
+export default AuthRepository

package/src/shared/lib/api/repositories/auth/auth.types.ts

@@ -0,0 +1,22 @@
+import { ApiResponse } from '../../api.types'
+
+// config
+
+type SignInConfig = {}
+
+type SignUpConfig = {}
+
+// response
+
+type SignInResponse = ApiResponse<{}>
+
+type SignUpResponse = ApiResponse<{}>
+
+export type {
+  // config
+  SignInConfig,
+  SignUpConfig,
+  // response
+  SignInResponse,
+  SignUpResponse,
+}

package/src/shared/lib/api/repositories/auth/index.ts

@@ -0,0 +1 @@
+export { default as AuthRepository } from './auth'

package/src/shared/lib/api/repositories/index.ts

@@ -0,0 +1 @@
+export * from './auth'

package/src/shared/lib/api/resources/common.ts

@@ -0,0 +1,8 @@
+type BaseResource = {
+  id?: string
+  createdAt?: Date
+  updatedAt?: Date
+  isPending?: boolean
+}
+
+export type { BaseResource }

package/src/shared/lib/api/resources/index.ts

@@ -0,0 +1 @@
+export * from './common'

package/src/shared/lib/api/utils/index.ts

@@ -0,0 +1 @@
+export * from './storage'

package/src/shared/lib/api/utils/storage.ts

@@ -0,0 +1,9 @@
+import * as SecureStore from 'expo-secure-store'
+
+const apiAsyncStorage = {
+  getItem: SecureStore.getItemAsync,
+  setItem: SecureStore.setItemAsync,
+  removeItem: SecureStore.deleteItemAsync,
+}
+
+export { apiAsyncStorage }

package/src/shared/lib/index.ts

@@ -0,0 +1,4 @@
+export * from './api'
+export * from './localization'
+export * from './navigation'
+export * from './theme'

package/src/shared/lib/localization/components/index.ts

@@ -0,0 +1 @@
+export * from './localization-translate'

package/src/shared/lib/localization/components/localization-translate/index.ts

@@ -0,0 +1 @@
+export { default as LocalizationTranslate } from './localization-translate'

package/src/shared/lib/localization/components/localization-translate/localization-translate.tsx

@@ -0,0 +1,5 @@
+import { Trans } from 'react-i18next'
+
+const LocalizationTranslate = Trans
+
+export default LocalizationTranslate

package/src/shared/lib/localization/constants/index.ts

@@ -0,0 +1,54 @@
+import { getLocales } from 'expo-localization'
+import { LanguageDetectorAsyncModule } from 'i18next'
+import { TRANSLATIONS } from '../../../assets'
+import { localizationStorage } from '../utils'
+
+const locales = getLocales().map(({ languageCode }) => languageCode)
+
+enum LocalizationCode {
+  Russian = 'ru',
+  English = 'en',
+}
+
+const LOCALIZATION_RESOURCES = {
+  en: { translation: TRANSLATIONS.EN },
+  ru: { translation: TRANSLATIONS.RU },
+}
+
+const LOCALIZATION_SUPPORTED_LOCALE_LIST = Object.keys(LOCALIZATION_RESOURCES) as LocalizationCode[]
+
+const LOCALIZATION_CODE = (locales.find(
+  (locale) => locale && LOCALIZATION_SUPPORTED_LOCALE_LIST.includes(locale as LocalizationCode)
+) ?? LOCALIZATION_SUPPORTED_LOCALE_LIST[0]) as LocalizationCode
+
+const LOCALIZATION_CODE_FALLBACK = (locales.find(
+  (locale) =>
+    locale &&
+    locale !== LOCALIZATION_CODE &&
+    LOCALIZATION_SUPPORTED_LOCALE_LIST.includes(locale as LocalizationCode)
+) ?? LOCALIZATION_SUPPORTED_LOCALE_LIST[1]) as LocalizationCode
+
+const languageDetector: LanguageDetectorAsyncModule = {
+  type: 'languageDetector' as const,
+
+  async: true,
+
+  init() {},
+
+  async detect(resolve) {
+    const localizationCode = await localizationStorage.code.get({ defaultValue: LOCALIZATION_CODE })
+
+    resolve(localizationCode)
+
+    return localizationCode
+  },
+}
+
+export {
+  LocalizationCode,
+  LOCALIZATION_RESOURCES,
+  LOCALIZATION_SUPPORTED_LOCALE_LIST,
+  LOCALIZATION_CODE,
+  LOCALIZATION_CODE_FALLBACK,
+  languageDetector,
+}

package/src/shared/lib/localization/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-localization-setup'
+export * from './use-localization-text'

package/src/shared/lib/localization/hooks/use-localization-setup.ts

@@ -0,0 +1,34 @@
+import { Log } from '@mediacubeco/base/helpers'
+import { useCallback } from 'react'
+import { LocalizationCode } from '../constants'
+import { useLocalization } from './use-localization'
+
+const useLocalizationSetup = () => {
+  const { localizationCode, setLocalizationCode } = useLocalization()
+
+  const isLocalizationCodeEnglish = localizationCode === LocalizationCode.English
+  const isLocalizationCodeRussian = localizationCode === LocalizationCode.Russian
+
+  const setLocalizationCodeEnglish = useCallback(() => {
+    setLocalizationCode(LocalizationCode.English)
+
+    Log.formatted.info('english', 'localization')
+  }, [setLocalizationCode])
+
+  const setLocalizationCodeRussian = useCallback(() => {
+    setLocalizationCode(LocalizationCode.Russian)
+
+    Log.formatted.info('russian', 'localization')
+  }, [setLocalizationCode])
+
+  return {
+    localizationCode,
+    isLocalizationCodeEnglish,
+    isLocalizationCodeRussian,
+    setLocalizationCode,
+    setLocalizationCodeEnglish,
+    setLocalizationCodeRussian,
+  }
+}
+
+export { useLocalizationSetup }

package/src/shared/lib/localization/hooks/use-localization-text.ts

@@ -0,0 +1,9 @@
+import { useLocalization } from './use-localization'
+
+const useLocalizationText = () => {
+  const { t } = useLocalization()
+
+  return t
+}
+
+export { useLocalizationText }

package/src/shared/lib/localization/hooks/use-localization.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LocalizationCode } from '../constants'
+import { localizationStorage } from '../utils'
+
+const useLocalization = () => {
+  const { t, i18n } = useTranslation()
+
+  const localizationCode = i18n.language as LocalizationCode
+
+  const setLocalizationCode = useCallback(
+    (code: LocalizationCode) => {
+      localizationStorage.code.set(code)
+
+      i18n.changeLanguage(code)
+    },
+    [i18n]
+  )
+
+  return { localizationCode, setLocalizationCode, t }
+}
+
+export { useLocalization }

package/src/shared/lib/localization/index.ts

@@ -0,0 +1,4 @@
+export { LocalizationTranslate } from './components'
+export { useLocalizationSetup, useLocalizationText } from './hooks'
+export { LocalizationCode } from './constants'
+export { default as LocalizationProvider } from './localization.provider'

package/src/shared/lib/localization/localization.provider.tsx

@@ -0,0 +1,30 @@
+import { useMemo } from 'react'
+import { initReactI18next } from 'react-i18next'
+import i18n from 'i18next'
+import {
+  languageDetector,
+  LOCALIZATION_CODE_FALLBACK,
+  LOCALIZATION_RESOURCES,
+  LOCALIZATION_SUPPORTED_LOCALE_LIST,
+} from './constants'
+import { LocalizationProviderProps } from './localization.types'
+
+const LocalizationProvider = ({ children }: LocalizationProviderProps) => {
+  useMemo(() => {
+    return i18n
+      .use(languageDetector)
+      .use(initReactI18next)
+      .init({
+        fallbackLng: LOCALIZATION_CODE_FALLBACK,
+        supportedLngs: LOCALIZATION_SUPPORTED_LOCALE_LIST,
+        resources: LOCALIZATION_RESOURCES,
+        interpolation: {
+          escapeValue: false,
+        },
+      })
+  }, [])
+
+  return <>{children}</>
+}
+
+export default LocalizationProvider

package/src/shared/lib/localization/localization.types.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react'
+
+type LocalizationProviderProps = PropsWithChildren
+
+export type { LocalizationProviderProps }

package/src/shared/lib/localization/utils/index.ts

@@ -0,0 +1 @@
+export * from './storage'

package/src/shared/lib/localization/utils/storage.ts

@@ -0,0 +1,11 @@
+import { Storage } from '@mediacubeco/base/services'
+import * as SecureStore from 'expo-secure-store'
+import { LocalizationCode } from '../constants'
+
+const localizationStorage = new Storage({
+  get: SecureStore.getItemAsync,
+  set: SecureStore.setItemAsync,
+  delete: SecureStore.deleteItemAsync,
+}).create<'code', LocalizationCode>('code')
+
+export { localizationStorage }

package/src/shared/lib/navigation/components/index.ts

@@ -0,0 +1 @@
+export * from './navigation-logger'

package/src/shared/lib/navigation/components/navigation-logger/index.ts

@@ -0,0 +1 @@
+export { default as NavigationLogger } from './navigation-logger'

package/src/shared/lib/navigation/components/navigation-logger/navigation-logger.ts

@@ -0,0 +1,17 @@
+import { Log } from '@mediacubeco/base/helpers'
+import { useEffect } from 'react'
+import { useLocalSearchParams, usePathname, useSegments } from 'expo-router'
+
+const NavigationLogger = () => {
+  const segments = useSegments()
+  const pathname = usePathname()
+  const params = useLocalSearchParams()
+
+  useEffect(() => {
+    Log.formatted.info(segments.join('/'), 'navigation', { pathname, params })
+  }, [segments, pathname, params])
+
+  return null
+}
+
+export default NavigationLogger

package/src/shared/lib/navigation/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './use-navigation'
+export * from './use-navigation-params'
+export * from './use-navigation-options'

package/src/shared/lib/navigation/hooks/use-navigation-options.ts

@@ -0,0 +1,94 @@
+import { useCallback } from 'react'
+import { Platform } from 'react-native'
+import { isGlassEffectAPIAvailable } from 'expo-glass-effect'
+import { StackScreenProps } from 'expo-router'
+import {
+  NativeTabsProps,
+  NativeTabsTriggerIconProps,
+  NativeTabsTriggerLabelProps,
+  NativeTabTriggerProps,
+} from 'expo-router/unstable-native-tabs'
+import { useThemeMode, useThemeSetup } from '../../theme'
+
+const useNavigationStackOptions = () => {
+  const { COLORS } = useThemeMode()
+  const { themeModeSystem } = useThemeSetup()
+
+  const createStackOptions = useCallback(() => {
+    return {
+      headerShown: false,
+      headerTransparent: false,
+      headerShadowVisible: false,
+      contentStyle: {
+        backgroundColor: COLORS.FILL.BASE,
+      },
+    } satisfies StackScreenProps['options']
+  }, [COLORS])
+
+  const createScreenOptions = useCallback(
+    (options?: StackScreenProps['options']) => {
+      return {
+        gestureEnabled: true,
+        gestureDirection: 'horizontal',
+        animation: 'default',
+        headerShown: true,
+        headerBackButtonDisplayMode: 'minimal',
+        headerTransparent: Platform.OS === 'ios',
+        headerBlurEffect: isGlassEffectAPIAvailable() ? 'none' : themeModeSystem,
+        headerTintColor: COLORS.TYPOGRAPHY.BASE,
+        headerStyle: {
+          backgroundColor: Platform.select({
+            ios: COLORS.FILL.TRANSPARENT,
+            default: COLORS.FILL.CONTRAST,
+          }),
+        },
+        headerTitleStyle: {
+          color: COLORS.TYPOGRAPHY.BASE,
+        },
+        ...options,
+      } satisfies StackScreenProps['options']
+    },
+    [COLORS, themeModeSystem]
+  )
+
+  return { createStackOptions, createScreenOptions }
+}
+
+const useNavigationTabBarOptions = () => {
+  const { COLORS } = useThemeMode()
+  const { isThemeModeDark } = useThemeSetup()
+
+  const createTabBarOptions = useCallback(() => {
+    return {
+      sidebarAdaptable: Platform.OS === 'ios',
+      disableTransparentOnScrollEdge: Platform.OS === 'ios',
+      labelVisibilityMode: 'labeled',
+      blurEffect: (isGlassEffectAPIAvailable() && 'none') || (isThemeModeDark && 'dark') || 'light',
+    } satisfies NativeTabsProps
+  }, [isThemeModeDark])
+
+  const createTabOptions = useCallback(() => {
+    const triggerProps = {} satisfies NativeTabTriggerProps
+
+    const triggerIconProps = {
+      selectedColor: COLORS.TYPOGRAPHY.PRIMARY,
+    } satisfies NativeTabsTriggerIconProps
+
+    const triggerLabelProps = {
+      hidden: Platform.OS !== 'web',
+    } satisfies NativeTabsTriggerLabelProps
+
+    return {
+      triggerProps,
+      triggerIconProps,
+      triggerLabelProps,
+    }
+  }, [COLORS])
+
+  return {
+    createTabBarOptions,
+    createTabOptions,
+  }
+}
+
+export { useNavigationStackOptions, useNavigationTabBarOptions }

package/src/shared/lib/navigation/hooks/use-navigation-params.ts

@@ -0,0 +1,9 @@
+import { useLocalSearchParams } from 'expo-router'
+
+const useNavigationParams = <Params extends object>() => {
+  const params = useLocalSearchParams<{ data: string }>()
+
+  return JSON.parse(params.data) as Params
+}
+
+export { useNavigationParams }

package/src/shared/lib/navigation/hooks/use-navigation.ts

@@ -0,0 +1,9 @@
+import { useRouter } from 'expo-router'
+
+const useNavigation = () => {
+  const navigation = useRouter()
+
+  return navigation
+}
+
+export { useNavigation }

package/src/shared/lib/navigation/index.ts

@@ -0,0 +1,7 @@
+export {
+  useNavigation,
+  useNavigationParams,
+  useNavigationStackOptions,
+  useNavigationTabBarOptions,
+} from './hooks'
+export { default as NavigationProvider } from './navigation.provider'

package/src/shared/lib/navigation/navigation.provider.tsx

@@ -0,0 +1,26 @@
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { KeyboardProvider } from 'react-native-keyboard-controller'
+import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context'
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { useThemeSetup } from '../theme'
+import { NavigationLogger } from './components'
+import { NavigationProviderProps } from './navigation.types'
+
+const NavigationProvider = ({ children }: NavigationProviderProps) => {
+  const { isThemeModeDark } = useThemeSetup()
+
+  return (
+    <ThemeProvider value={isThemeModeDark ? DarkTheme : DefaultTheme}>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <SafeAreaProvider initialMetrics={initialWindowMetrics} style={{ flex: 1 }}>
+          <KeyboardProvider>
+            {children}
+            <NavigationLogger />
+          </KeyboardProvider>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
+    </ThemeProvider>
+  )
+}
+
+export default NavigationProvider

package/src/shared/lib/navigation/navigation.types.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react'
+
+type NavigationProviderProps = PropsWithChildren
+
+export type { NavigationProviderProps }

package/src/shared/lib/theme/constants/borders.ts

@@ -0,0 +1,8 @@
+const BORDERS = {
+  EMPTY: 0,
+  THIN: 0.5,
+  BASE: 1,
+  FAT: 2,
+}
+
+export { BORDERS }