@mediacubeco/expo-template-fsd 1.2.0 → 2.0.0

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

@@ -7,7 +7,7 @@ import {
   LOCALIZATION_RESOURCES,
   LOCALIZATION_SUPPORTED_LOCALE_LIST,
 } from './constants'
-import { LocalizationProviderProps } from './localization.types'
+import { type LocalizationProviderProps } from './localization.types'
 
 const LocalizationProvider = ({ children }: LocalizationProviderProps) => {
   useMemo(() => {

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import { type PropsWithChildren } from 'react'
 
 type LocalizationProviderProps = PropsWithChildren
 

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

@@ -1,6 +1,6 @@
 import { Storage } from '@mediacubeco/base/services'
 import * as SecureStore from 'expo-secure-store'
-import { LocalizationCode } from '../constants'
+import { type LocalizationCode } from '../constants'
 
 const localizationStorage = new Storage({
   get: SecureStore.getItemAsync,

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

@@ -1,12 +1,12 @@
 import { useCallback } from 'react'
 import { Platform } from 'react-native'
 import { isGlassEffectAPIAvailable } from 'expo-glass-effect'
-import { StackScreenProps } from 'expo-router'
+import { type StackScreenProps } from 'expo-router'
 import {
-  NativeTabsProps,
-  NativeTabsTriggerIconProps,
-  NativeTabsTriggerLabelProps,
-  NativeTabTriggerProps,
+  type NativeTabsProps,
+  type NativeTabsTriggerIconProps,
+  type NativeTabsTriggerLabelProps,
+  type NativeTabTriggerProps,
 } from 'expo-router/unstable-native-tabs'
 import { useThemeMode, useThemeSetup } from '../../theme'
 
@@ -63,7 +63,8 @@ const useNavigationTabBarOptions = () => {
       sidebarAdaptable: Platform.OS === 'ios',
       disableTransparentOnScrollEdge: Platform.OS === 'ios',
       labelVisibilityMode: 'labeled',
-      blurEffect: (isGlassEffectAPIAvailable() && 'none') || (isThemeModeDark && 'dark') || 'light',
+      blurEffect:
+        (isGlassEffectAPIAvailable() && 'systemMaterial') || (isThemeModeDark && 'dark') || 'light',
     } satisfies NativeTabsProps
   }, [isThemeModeDark])
 

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

@@ -1,10 +1,10 @@
 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 { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router/react-navigation'
 import { useThemeSetup } from '../theme'
 import { NavigationLogger } from './components'
-import { NavigationProviderProps } from './navigation.types'
+import { type NavigationProviderProps } from './navigation.types'
 
 const NavigationProvider = ({ children }: NavigationProviderProps) => {
   const { isThemeModeDark } = useThemeSetup()

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import { type PropsWithChildren } from 'react'
 
 type NavigationProviderProps = PropsWithChildren
 

package/src/shared/lib/theme/theme.context.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
-import { ThemeContextValue } from './theme.types'
+import { type ThemeContextValue } from './theme.types'
 
 const ThemeContext = createContext<null | ThemeContextValue>(null)
 

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

@@ -1,9 +1,10 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { StatusBar, useColorScheme } from 'react-native'
+import { Platform } from '@mediacubeco/react-native-base'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Appearance, StatusBar, useColorScheme } from 'react-native'
 import { themeStorage } from './utils'
 import { ThemeMode, ThemeModeStatusBar, ThemeModeSystem, themes } from './constants'
 import { ThemeContext } from './theme.context'
-import { ThemeProviderProps } from './theme.types'
+import { type ThemeProviderProps } from './theme.types'
 
 const ThemeProvider = ({ children }: ThemeProviderProps) => {
   const didDefine = useRef(false)
@@ -20,29 +21,43 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
     return themes[currentThemeMode]
   }, [currentThemeMode])
 
+  const updateThemeModeSystem = useCallback((themeMode: ThemeMode) => {
+    if (Platform.isIos) {
+      if (themeMode === ThemeMode.System) {
+        Appearance.setColorScheme('unspecified')
+      } else {
+        Appearance.setColorScheme(themeMode)
+      }
+    }
+  }, [])
+
   useEffect(() => {
     const defineThemeMode = async () => {
       const storageThemeMode = await themeStorage.mode.get()
 
       if (storageThemeMode) {
-        setThemeMode(storageThemeMode as ThemeMode)
+        setThemeMode(storageThemeMode)
+
+        updateThemeModeSystem(storageThemeMode)
       }
 
       didDefine.current = true
     }
 
     defineThemeMode()
-  }, [])
+  }, [updateThemeModeSystem])
 
   useEffect(() => {
     const updateThemeMode = async () => {
       if (didDefine.current) {
         await themeStorage.mode.set(themeMode)
+
+        updateThemeModeSystem(themeMode)
       }
     }
 
     updateThemeMode()
-  }, [themeMode])
+  }, [themeMode, updateThemeModeSystem])
 
   useEffect(() => {
     StatusBar.setBarStyle(

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

@@ -1,5 +1,5 @@
-import { Dispatch, PropsWithChildren, SetStateAction } from 'react'
-import { ThemeMode, ThemeModeSystem, themes } from './constants'
+import { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react'
+import { type ThemeMode, type ThemeModeSystem, type themes } from './constants'
 
 type Theme = (typeof themes)[ThemeModeSystem]
 

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

@@ -1,6 +1,6 @@
 import { Storage } from '@mediacubeco/base/services'
 import * as SecureStore from 'expo-secure-store'
-import { ThemeMode } from '../constants'
+import { type ThemeMode } from '../constants'
 
 const themeStorage = new Storage({
   get: SecureStore.getItemAsync,

package/src/shared/ui/molecules/keyboard-area/keyboard-area.tsx

@@ -2,7 +2,7 @@ import { View } from 'react-native'
 import { useKeyboardHandler } from 'react-native-keyboard-controller'
 import { animate } from '../../../hooks'
 import { useKeyboardAreaStyles } from './keyboard-area.styles'
-import { KeyboardAreaProps } from './keyboard-area.types'
+import { type KeyboardAreaProps } from './keyboard-area.types'
 
 const KeyboardAnimatedArea = animate(View)
 

package/src/shared/ui/molecules/refresh-control/refresh-control.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react'
 import { RefreshControl as NativeRefreshControl } from 'react-native'
 import { useSafeArea } from '../../../hooks'
 import { useThemeMode } from '../../../lib'
-import { RefreshControlProps } from './refresh-control.types'
+import { type RefreshControlProps } from './refresh-control.types'
 
 const RefreshControl = ({ withOffset = true, onRefresh, ...props }: RefreshControlProps) => {
   const [isRefreshing, setIsRefreshing] = useState(false)

package/src/shared/ui/molecules/refresh-control/refresh-control.types.ts

@@ -1,6 +1,6 @@
 type RefreshControlProps = {
   withOffset: boolean
-  onRefresh: () => any | Promise<any>
+  onRefresh: () => unknown | Promise<unknown>
 }
 
 export type { RefreshControlProps }

package/src/shared/ui/templates/screen-container/screen-container-list.tsx

@@ -1,6 +1,6 @@
 import { FlatList, View } from 'react-native'
 import { useScreenContainerProps } from './screen-container.hooks'
-import { ScreenContainerListProps } from './screen-container.types'
+import { type ScreenContainerListProps } from './screen-container.types'
 
 const ScreenContainerList = <Item,>(props: ScreenContainerListProps<Item>) => {
   const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...flatListProps } =

package/src/shared/ui/templates/screen-container/screen-container-scroll.tsx

@@ -1,6 +1,6 @@
 import { ScrollView, View } from 'react-native'
 import { useScreenContainerProps } from './screen-container.hooks'
-import { ScreenContainerScrollProps } from './screen-container.types'
+import { type ScreenContainerScrollProps } from './screen-container.types'
 
 const ScreenContainerScroll = (props: ScreenContainerScrollProps) => {
   const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...scrollViewProps } =

package/src/shared/ui/templates/screen-container/screen-container-section-list.tsx

@@ -1,6 +1,6 @@
 import { SectionList, View } from 'react-native'
 import { useScreenContainerProps } from './screen-container.hooks'
-import { ScreenContainerSectionListProps } from './screen-container.types'
+import { type ScreenContainerSectionListProps } from './screen-container.types'
 
 const ScreenContainerSectionList = <Item,>(props: ScreenContainerSectionListProps<Item>) => {
   const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...sectionListProps } =

package/src/shared/ui/templates/screen-container/screen-container.hooks.tsx

@@ -3,9 +3,9 @@ import { View } from 'react-native'
 import { KeyboardArea, RefreshControl } from '../../molecules'
 import { useScreenContainerStyles } from './screen-container.styles'
 import {
-  ScreenContainerListProps,
-  ScreenContainerScrollProps,
-  ScreenContainerSectionListProps,
+  type ScreenContainerListProps,
+  type ScreenContainerScrollProps,
+  type ScreenContainerSectionListProps,
 } from './screen-container.types'
 
 const useScreenContainerProps = <

package/src/shared/ui/templates/screen-container/screen-container.styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
 import { useSafeArea } from '../../../hooks'
 import { useThemeMode } from '../../../lib'
-import { ScreenContainerStylesConfig } from './screen-container.types'
+import { type ScreenContainerStylesConfig } from './screen-container.types'
 
 const useScreenContainerStyles = ({
   withOverflowTop,

package/src/shared/ui/templates/screen-container/screen-container.types.tsx

@@ -1,16 +1,16 @@
-import { ReactNode, Ref } from 'react'
+import { type ReactNode, type Ref } from 'react'
 import {
-  FlatList,
-  FlatListProps,
-  ListRenderItemInfo,
-  ScrollView,
-  ScrollViewProps,
-  SectionList,
-  SectionListData,
-  SectionListProps,
-  SectionListRenderItemInfo,
-  StyleProp,
-  ViewStyle,
+  type FlatList,
+  type FlatListProps,
+  type ListRenderItemInfo,
+  type ScrollView,
+  type ScrollViewProps,
+  type SectionList,
+  type SectionListData,
+  type SectionListProps,
+  type SectionListRenderItemInfo,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native'
 
 type ScreenContainerExcludeExtraNativeProps<
@@ -30,7 +30,7 @@ type ScreenContainerProps<Component extends ScrollView | FlatList | SectionList>
   footer?: ReactNode
   withOverflowTop?: boolean
   withOverflowBottom?: boolean
-  onRefresh?: () => any | Promise<any>
+  onRefresh?: () => unknown | Promise<unknown>
 }
 
 type ScreenContainerScrollProps = ScreenContainerExcludeExtraNativeProps<ScrollViewProps> &

package/svg.d.ts

@@ -1,6 +1,6 @@
 declare module '*.svg' {
   import type React from 'react'
-  import type { SvgProps } from 'react-native-svg'
+  import { type SvgProps } from 'react-native-svg'
 
   const content: React.FC<SvgProps>
   export default content

package/.claude/rules/abstract-skills-agents.mdc

@@ -1,25 +0,0 @@
----
-description: Skills and agent instructions must stay abstract; no project-specific code examples
-alwaysApply: true
----
-
-# Abstract skills and agent definitions
-
-When creating or editing **Cursor skills** (e.g. under `.cursor/skills/`), **agent prompts**, or other reusable AI guidance for this repo:
-
-## Principles
-
-- **Stay abstract**: describe *what* to do, *constraints*, and *workflow* — not *this* app’s concrete modules, paths, or identifiers.
-- **No examples lifted from this codebase**: do not paste snippets, file paths, component names, store keys, or API shapes from the project as the canonical “example.” That ties the skill to one implementation and goes stale quickly.
-- **Use placeholders** when structure must be shown: generic names (`<entity>`, `SomeFeature`, `path/to/feature`), pseudo-paths, and minimal schematic snippets that could apply in any similar project.
-- **Prefer references over copies**: if the agent must follow local conventions, point to an existing project rule or high-level convention (“follow the same layout as other features in the repo”) without embedding full real-file excerpts unless the user explicitly asked for documentation of existing code.
-
-## Why
-
-Skills and agents are meant to **transfer and stay maintainable**. Project-specific examples read as documentation of one snapshot of the repo, not as durable instructions.
-
-## Anti-patterns
-
-- Long blocks copied from `src/...` files into a `SKILL.md`.
-- Hard-coded real route names, translation keys, or mock data from this app in a skill.
-- Teaching “how we did X” with the exact current implementation instead of the invariant rules (naming, layering, file layout conventions).

package/src/shared/utils/generators.ts

@@ -1,11 +0,0 @@
-const generateIdFactory = () => {
-  let lastId = 0
-
-  return (prefix: string = '') => {
-    return `${prefix}${++lastId}`
-  }
-}
-
-const generateId = generateIdFactory()
-
-export { generateIdFactory, generateId }

package/src/shared/utils/index.ts

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