@mediacubeco/expo-template-fsd 2.3.0 → 2.4.0

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

@@ -0,0 +1,175 @@
+import { Platform } from '@mediacubeco/base-react-native/helpers'
+import { type ComponentProps, type FC, useCallback, useMemo } from 'react'
+import { type NativeStackNavigationOptions, type Tabs } from 'expo-router'
+import { type NativeTabsProps } from 'expo-router/build/native-tabs'
+import { type BarTabNavigationProps } from '../../../ui'
+import { useThemeMode } from '../../theme'
+
+type NavigationTabBarOptions = ComponentProps<typeof Tabs>
+
+const useNavigationStackOptions = () => {
+  const { COLORS } = useThemeMode()
+
+  const stackOptions = useMemo(() => {
+    return {
+      headerShown: false,
+      headerTransparent: false,
+      headerShadowVisible: false,
+      contentStyle: {
+        backgroundColor: COLORS.BACKGROUND.SECONDARY,
+      },
+    } satisfies NativeStackNavigationOptions
+  }, [COLORS])
+
+  const screenOptions = useMemo(() => {
+    return {
+      animation: 'default',
+
+      gestureEnabled: true,
+      gestureDirection: 'horizontal',
+
+      headerShown: false,
+      headerTransparent: true,
+      headerBackButtonDisplayMode: 'minimal',
+      headerTintColor: COLORS.TYPOGRAPHY.BASE,
+      headerStyle: {
+        backgroundColor: COLORS.BACKGROUND.DISABLED,
+      },
+      headerTitleStyle: {
+        color: COLORS.TYPOGRAPHY.BASE,
+      },
+    } satisfies NativeStackNavigationOptions
+  }, [COLORS])
+
+  const sheetOptions = useMemo(() => {
+    return {
+      presentation: 'formSheet',
+      sheetAllowedDetents: 'fitToContents',
+      sheetGrabberVisible: true,
+
+      headerShown: false,
+
+      contentStyle: {
+        backgroundColor: COLORS.BACKGROUND.BASE,
+      },
+    } satisfies NativeStackNavigationOptions
+  }, [COLORS])
+
+  const webOptions = useMemo(() => {
+    return {
+      presentation: 'formSheet',
+      sheetAllowedDetents: [1],
+      sheetGrabberVisible: false,
+
+      headerShown: false,
+
+      contentStyle: {
+        backgroundColor: COLORS.BACKGROUND.BASE,
+      },
+    } satisfies NativeStackNavigationOptions
+  }, [COLORS])
+
+  const createStackOptions = useCallback(
+    (options?: NativeStackNavigationOptions) => {
+      return {
+        ...stackOptions,
+        ...options,
+      } satisfies NativeStackNavigationOptions
+    },
+    [stackOptions]
+  )
+
+  const createScreenOptions = useCallback(
+    (options?: NativeStackNavigationOptions) => {
+      return {
+        ...screenOptions,
+        ...options,
+      } satisfies NativeStackNavigationOptions
+    },
+    [screenOptions]
+  )
+
+  const createSheetOptions = useCallback(
+    (options?: NativeStackNavigationOptions) => {
+      return {
+        ...sheetOptions,
+        ...options,
+      } satisfies NativeStackNavigationOptions
+    },
+    [sheetOptions]
+  )
+
+  const createWebOptions = useCallback(
+    (options?: NativeStackNavigationOptions) => {
+      return {
+        ...webOptions,
+        ...options,
+      } satisfies NativeStackNavigationOptions
+    },
+    [webOptions]
+  )
+
+  return {
+    stackOptions,
+    screenOptions,
+    sheetOptions,
+    webOptions,
+    createStackOptions,
+    createScreenOptions,
+    createSheetOptions,
+    createWebOptions,
+  }
+}
+
+const useNavigationTabBarOptions = (TabBar: FC<BarTabNavigationProps>) => {
+  const renderTabBar = useCallback(
+    (props: BarTabNavigationProps) => {
+      return <TabBar {...props} />
+    },
+    [TabBar]
+  )
+
+  const createTabBarOptions = useCallback(
+    (options?: NavigationTabBarOptions) => {
+      return {
+        tabBar: renderTabBar,
+        screenOptions: {
+          headerShown: false,
+        },
+        ...options,
+      } satisfies NavigationTabBarOptions
+    },
+    [renderTabBar]
+  )
+
+  return {
+    createTabBarOptions,
+  }
+}
+
+const useNavigationTabBarNativeOptions = () => {
+  const { COLORS } = useThemeMode()
+
+  const createTabBarNativeOptions = useCallback(
+    (options?: NativeTabsProps) => {
+      return {
+        sidebarAdaptable: Platform.isIos,
+        disableTransparentOnScrollEdge: Platform.isIos,
+        blurEffect: 'none',
+        labelVisibilityMode: 'labeled',
+        iconColor: {
+          default: COLORS.TYPOGRAPHY.PRIMARY,
+          selected: COLORS.TYPOGRAPHY.PRIMARY,
+        },
+        ...options,
+      } satisfies NativeTabsProps
+    },
+    [COLORS]
+  )
+
+  return {
+    createTabBarNativeOptions,
+  }
+}
+
+export { useNavigationStackOptions, useNavigationTabBarOptions, useNavigationTabBarNativeOptions }

package/src/shared/lib/navigation/hooks/{use-navigation.ts → use-navigation-route.ts}

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

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

@@ -0,0 +1,61 @@
+import { Platform } from '@mediacubeco/base-react-native/helpers'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useBottomTabBarHeight } from 'expo-router/js-tabs'
+import { useNavigationTabs } from './use-navigation-tabs'
+import { useNavigationTabsNative } from './use-navigation-tabs-native'
+
+const CUSTOM_HEADER_HEIGHT = 56
+const ANDROID_TAB_BAR_DEFAULT_HEIGHT = 56
+const IOS_TAB_BAR_DEFAULT_HEIGHT = 50
+
+const useNavigationFooterHeight = (safeArea: number = 0) => {
+  const tabs = useNavigationTabs()
+  const TabsNative = useNavigationTabsNative()
+
+  try {
+    const height = useBottomTabBarHeight()
+
+    return {
+      bottom: Platform.by({
+        android: tabs.isAvailable ? tabs.height : height ? 0 : safeArea,
+        ios: tabs.isAvailable ? tabs.height : height ? 0 : safeArea,
+        default: safeArea,
+      }),
+      value: Platform.by({
+        android: tabs.isAvailable ? tabs.height : height,
+        ios: tabs.isAvailable ? tabs.height : height,
+        default: safeArea,
+      }),
+    }
+  } catch (_) {
+    return {
+      bottom: Platform.by({
+        android: TabsNative.isAvailable ? 0 : safeArea,
+        ios: safeArea,
+        default: safeArea,
+      }),
+      value: Platform.by({
+        android: TabsNative.isAvailable ? safeArea * 2 + ANDROID_TAB_BAR_DEFAULT_HEIGHT : safeArea,
+        ios: TabsNative.isAvailable ? safeArea + IOS_TAB_BAR_DEFAULT_HEIGHT : safeArea,
+        default: safeArea,
+      }),
+    }
+  }
+}
+
+const useNavigationSafeArea = () => {
+  const { top, bottom, left, right } = useSafeAreaInsets()
+  const footer = useNavigationFooterHeight(bottom)
+
+  return {
+    TOP: top,
+    BOTTOM: footer.bottom,
+    LEFT: left,
+    RIGHT: right,
+
+    HEADER: CUSTOM_HEADER_HEIGHT,
+    FOOTER: footer.value,
+  }
+}
+
+export { useNavigationSafeArea }

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

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { NavigationTabsNativeContext } from '../navigation-tabs-native.context'
+
+const useNavigationTabsNative = () => {
+  const context = useContext(NavigationTabsNativeContext)
+
+  return context
+}
+
+export { useNavigationTabsNative }

package/src/shared/lib/navigation/hooks/use-navigation-tabs.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { NavigationTabsContext } from '../navigation-tabs.context'
+
+const useNavigationTabs = () => {
+  const context = useContext(NavigationTabsContext)
+
+  return context
+}
+
+export { useNavigationTabs }

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

@@ -0,0 +1,27 @@
+import { runCallback } from '@mediacubeco/base/utils'
+import { useEffect } from 'react'
+import { type NativeStackNavigationProp, useNavigation } from 'expo-router'
+
+/**  текущего экрана в native-stack (эмитит событие transitionEnd). */
+type PageNavigation = NativeStackNavigationProp<Record<string, object | undefined>>
+
+/**
+ * Вызывает onTransitionEnd после завершения нативной анимации перехода НА текущий
+ * экран (не при уходе с него). Нужен, чтобы отложить действия вроде автофокуса до
+ * конца перехода — иначе клавиатура открывается прямо во время анимации навигации.
+ */
+const useNavigationTransitionEnd = (onTransitionEnd: () => void) => {
+  const navigation = useNavigation<PageNavigation>()
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('transitionEnd', (event) => {
+      if (!event.data.closing) {
+        runCallback(onTransitionEnd)
+      }
+    })
+
+    return unsubscribe
+  }, [navigation, onTransitionEnd])
+}
+
+export { useNavigationTransitionEnd }

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

@@ -1,9 +1,16 @@
 export {
-  useNavigation,
-  useNavigationParams,
+  useNavigationBreakpoints,
+  useNavigationDimensions,
   useNavigationStackOptions,
   useNavigationTabBarOptions,
-  useNavigationNativeTabs,
+  useNavigationTabBarNativeOptions,
+  useNavigationParams,
+  useNavigationRoute,
+  useNavigationSafeArea,
+  useNavigationTabsNative,
+  useNavigationTabs,
+  useNavigationTransitionEnd,
 } from './hooks'
+export { default as NavigationTabsNativeProvider } from './navigation-tabs-native.provider'
+export { default as NavigationTabsProvider } from './navigation-tabs.provider'
 export { default as NavigationProvider } from './navigation.provider'
-export { default as NavigationNativeTabsProvider } from './navigation-native-tabs.provider'

package/src/shared/lib/navigation/navigation-tabs-native.context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const NavigationTabsNativeContext = createContext({ isAvailable: false })
+
+export { NavigationTabsNativeContext }

package/src/shared/lib/navigation/navigation-tabs-native.provider.tsx

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import { NavigationTabsNativeContext } from './navigation-tabs-native.context'
+import { type NavigationProviderProps } from './navigation.types'
+
+const NavigationTabsNativeProvider = ({ children }: NavigationProviderProps) => {
+  const value = useMemo(() => {
+    return { isAvailable: true }
+  }, [])
+
+  return (
+    <NavigationTabsNativeContext.Provider value={value}>
+      {children}
+    </NavigationTabsNativeContext.Provider>
+  )
+}
+
+export default NavigationTabsNativeProvider

package/src/shared/lib/navigation/navigation-tabs.context.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+import { type LayoutChangeEvent } from 'react-native'
+
+const NavigationTabsContext = createContext<{
+  height: number
+  isAvailable: boolean
+  handleLayout?: (event: LayoutChangeEvent) => void
+}>({ height: 0, isAvailable: false })
+
+export { NavigationTabsContext }

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

@@ -0,0 +1,22 @@
+import { DEFAULT_LAYOUT, useLayout } from '@mediacubeco/base-react-native/hooks'
+import { useMemo, useState } from 'react'
+import { NavigationTabsContext } from './navigation-tabs.context'
+import { type NavigationProviderProps } from './navigation.types'
+
+const NavigationTabsProvider = ({ children }: NavigationProviderProps) => {
+  const [{ height }, setLayout] = useState(DEFAULT_LAYOUT)
+
+  const handleLayout = useLayout({ setLayout })
+
+  const value = useMemo(() => {
+    return {
+      height,
+      isAvailable: true,
+      handleLayout,
+    }
+  }, [height, handleLayout])
+
+  return <NavigationTabsContext.Provider value={value}>{children}</NavigationTabsContext.Provider>
+}
+
+export default NavigationTabsProvider

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

@@ -1,19 +1,24 @@
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { KeyboardProvider } from 'react-native-keyboard-controller'
 import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context'
+import { useNavigationContainerRef } from 'expo-router'
 import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router/react-navigation'
+import { useReactNavigationDevTools } from '@dev-plugins/react-navigation'
 import { useThemeSetup } from '../theme'
 import { NavigationLogger } from './components'
 import { type NavigationProviderProps } from './navigation.types'
 
 const NavigationProvider = ({ children }: NavigationProviderProps) => {
+  const navigationRef = useNavigationContainerRef()
   const { isThemeModeDark } = useThemeSetup()
 
+  useReactNavigationDevTools(navigationRef as any)
+
   return (
     <ThemeProvider value={isThemeModeDark ? DarkTheme : DefaultTheme}>
       <GestureHandlerRootView style={{ flex: 1 }}>
         <SafeAreaProvider initialMetrics={initialWindowMetrics} style={{ flex: 1 }}>
-          <KeyboardProvider>
+          <KeyboardProvider statusBarTranslucent={true}>
             {children}
             <NavigationLogger />
           </KeyboardProvider>

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

@@ -1,2 +1,2 @@
+export { storageAsync, storageSecureAsync, storageModel, storageSecureModel } from './storage'
 export { default as StorageProvider } from './storage.provider'
-export { storageAsync, storageModel } from './storage'

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

@@ -1,6 +1,10 @@
+import { useMMKVDevTools } from '@dev-plugins/react-native-mmkv'
 import { type StorageProviderProps } from './storage.types'
+import { mmkv } from './storage'
 
 const StorageProvider = ({ children }: StorageProviderProps) => {
+  useMMKVDevTools({ storage: mmkv })
+
   return <>{children}</>
 }
 

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

@@ -1,42 +1,46 @@
-import { Platform } from '@mediacubeco/base-react-native'
+import { Platform } from '@mediacubeco/base-react-native/helpers'
+import { type StorageModel } from '@mediacubeco/base/services'
+import { createMMKV } from 'react-native-mmkv'
 import * as SecureStore from 'expo-secure-store'
+import { APP_ID_STORAGE } from '../../constants'
 
-const localStorageFallback = {
-  state: {} as Record<string, string>,
+const mmkv = createMMKV({ id: APP_ID_STORAGE })
+
+const storageAsync = {
   getItem(key: string) {
-    return this.state[key]
+    return Promise.resolve(mmkv.getString(key) ?? null)
   },
   setItem(key: string, value: string) {
-    this.state[key] = value
+    mmkv.set(key, value)
+
+    return Promise.resolve()
   },
   removeItem(key: string) {
-    delete this.state[key]
-  },
-}
-
-const webStorage = typeof localStorage !== 'undefined' ? localStorage : localStorageFallback
+    mmkv.remove(key)
 
-const storageModelWeb = {
-  getItem: (key: string) => Promise.resolve(webStorage.getItem(key)),
-  setItem: (key: string, value: string) => Promise.resolve(webStorage.setItem(key, value)),
-  removeItem: (key: string) => Promise.resolve(webStorage.removeItem(key)),
-}
-
-const storageModelNative = {
-  getItem: SecureStore.getItemAsync,
-  setItem: SecureStore.setItemAsync,
-  removeItem: SecureStore.deleteItemAsync,
+    return Promise.resolve()
+  },
 }
 
-const storageAsync = Platform.by({
-  web: storageModelWeb,
-  default: storageModelNative,
+const storageSecureAsync = Platform.by({
+  web: storageAsync,
+  default: {
+    getItem: SecureStore.getItemAsync,
+    setItem: SecureStore.setItemAsync,
+    removeItem: SecureStore.deleteItemAsync,
+  },
 })
 
 const storageModel = {
   get: storageAsync.getItem,
   set: storageAsync.setItem,
   delete: storageAsync.removeItem,
-}
+} satisfies StorageModel
+
+const storageSecureModel = {
+  get: storageSecureAsync.getItem,
+  set: storageSecureAsync.setItem,
+  delete: storageSecureAsync.removeItem,
+} satisfies StorageModel
 
-export { storageAsync, storageModel }
+export { mmkv, storageAsync, storageSecureAsync, storageModel, storageSecureModel }

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

@@ -0,0 +1,26 @@
+import { Easing, type WithSpringConfig, type WithTimingConfig } from 'react-native-reanimated'
+import { DURATIONS } from './durations'
+
+const ANIMATIONS = {
+  TIMING: {
+    SHORT: {
+      duration: DURATIONS.SHORT,
+    } satisfies WithTimingConfig,
+    BASE: {
+      duration: DURATIONS.BASE,
+    } satisfies WithTimingConfig,
+    LONG: {
+      duration: DURATIONS.LONG,
+      easing: Easing.linear,
+    } satisfies WithTimingConfig,
+  },
+  SPRING: {
+    BASE: {
+      damping: 15,
+      stiffness: 500,
+      mass: 0.3,
+    } satisfies WithSpringConfig,
+  },
+} as const
+
+export { ANIMATIONS }