@mediacubeco/expo-template-fsd 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "2.0.1",
+  "version": "2.0.2",
   "name": "@mediacubeco/expo-template-fsd",
   "description": "Application by Mediacube developers",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.0",
     "react-native-worklets": "0.8.3",
-    "@mediacubeco/base": "2.0.1",
-    "@mediacubeco/base-react-native": "2.0.1",
-    "@mediacubeco/base-react": "2.0.1"
+    "@mediacubeco/base-react-native": "2.0.2",
+    "@mediacubeco/base-react": "2.0.2",
+    "@mediacubeco/base": "2.0.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -52,16 +52,16 @@
     "husky": "^9.1.7",
     "prettier": "^3.8.1",
     "typescript": "^6.0.3",
-    "@mediacubeco/eslint-config-fsd": "2.0.1",
-    "@mediacubeco/prettier-config": "2.0.1",
-    "@mediacubeco/eslint-config-react-native": "2.0.1",
-    "@mediacubeco/prettier-config-fsd": "2.0.1",
-    "@mediacubeco/eslint-config-react": "2.0.1",
-    "@mediacubeco/eslint-config": "2.0.1",
-    "@mediacubeco/typescript-config-fsd": "2.0.1",
-    "@mediacubeco/typescript-config-react": "2.0.1",
-    "@mediacubeco/typescript-config": "2.0.1",
-    "@mediacubeco/typescript-config-react-native": "2.0.1"
+    "@mediacubeco/eslint-config-react": "2.0.2",
+    "@mediacubeco/eslint-config": "2.0.2",
+    "@mediacubeco/prettier-config": "2.0.2",
+    "@mediacubeco/eslint-config-react-native": "2.0.2",
+    "@mediacubeco/prettier-config-fsd": "2.0.2",
+    "@mediacubeco/eslint-config-fsd": "2.0.2",
+    "@mediacubeco/typescript-config": "2.0.2",
+    "@mediacubeco/typescript-config-react": "2.0.2",
+    "@mediacubeco/typescript-config-react-native": "2.0.2",
+    "@mediacubeco/typescript-config-fsd": "2.0.2"
   },
   "scripts": {
     "postinstall": "npx husky && npx skills update",

package/skills-lock.json

@@ -23,7 +23,7 @@
       "source": "vercel-labs/agent-skills",
       "sourceType": "github",
       "skillPath": "skills/react-native-skills/SKILL.md",
-      "computedHash": "2e9088a7333666d8c2833b8ff58bd51b955501c42b4c7244f72b4cbf22dafcc4"
+      "computedHash": "41d24eafa7c3d82e270439808f7cfbc4d51aeb2d14f2809a2267c16275784d06"
     }
   }
 }

package/src/app/(root)/(home)/_layout.tsx

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router'
+import { useLocalizationText, useNavigationStackOptions } from '~shared/lib'
+
+const Layout = () => {
+  const { createStackOptions, createScreenOptions } = useNavigationStackOptions()
+  const t = useLocalizationText()
+
+  return (
+    <Stack screenOptions={createStackOptions()}>
+      <Stack.Screen name={'index'} options={createScreenOptions({ title: t('home.title') })} />
+    </Stack>
+  )
+}
+
+export default Layout

package/src/app/(root)/(home)/index.tsx

@@ -0,0 +1,7 @@
+import { HomeMain } from '~pages/home'
+
+const Screen = () => {
+  return <HomeMain />
+}
+
+export default Screen

package/src/app/(root)/(settings)/_layout.tsx

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router'
+import { useLocalizationText, useNavigationStackOptions } from '~shared/lib'
+
+const Layout = () => {
+  const { createStackOptions, createScreenOptions } = useNavigationStackOptions()
+  const t = useLocalizationText()
+
+  return (
+    <Stack screenOptions={createStackOptions()}>
+      <Stack.Screen name={'index'} options={createScreenOptions({ title: t('settings.title') })} />
+    </Stack>
+  )
+}
+
+export default Layout

package/src/app/(root)/(settings)/index.tsx

@@ -0,0 +1,7 @@
+import { SettingsMain } from '~pages/settings'
+
+const Screen = () => {
+  return <SettingsMain />
+}
+
+export default Screen

package/src/app/(root)/_layout.tsx

@@ -0,0 +1,38 @@
+import { NativeTabs } from 'expo-router/build/native-tabs'
+import { useLocalizationText, useNavigationTabBarOptions } from '~shared/lib'
+
+const Layout = () => {
+  const { createTabBarOptions, createTabOptions } = useNavigationTabBarOptions()
+  const t = useLocalizationText()
+
+  const tabBarOptions = createTabBarOptions()
+
+  const homeTabOptions = createTabOptions({
+    name: '(home)',
+    children: t('home.title'),
+    sf: 'house',
+    md: 'home',
+  })
+
+  const settingsTabOptions = createTabOptions({
+    name: '(settings)',
+    children: t('settings.title'),
+    sf: 'gear',
+    md: 'settings',
+  })
+
+  return (
+    <NativeTabs {...tabBarOptions}>
+      <NativeTabs.Trigger {...homeTabOptions.triggerProps}>
+        <NativeTabs.Trigger.Label {...homeTabOptions.triggerLabelProps} />
+        <NativeTabs.Trigger.Icon {...homeTabOptions.triggerIconProps} />
+      </NativeTabs.Trigger>
+      <NativeTabs.Trigger {...settingsTabOptions.triggerProps}>
+        <NativeTabs.Trigger.Label {...settingsTabOptions.triggerLabelProps} />
+        <NativeTabs.Trigger.Icon {...settingsTabOptions.triggerIconProps} />
+      </NativeTabs.Trigger>
+    </NativeTabs>
+  )
+}
+
+export default Layout

package/src/pages/home/home-main.tsx

@@ -0,0 +1,18 @@
+import { Text } from 'react-native'
+import { useLocalizationText, useThemeMode } from '~shared/lib'
+import { ScreenContainerScroll } from '~shared/ui'
+
+const HomeMain = () => {
+  const t = useLocalizationText()
+  const { COLORS } = useThemeMode()
+
+  return (
+    <ScreenContainerScroll>
+      <Text style={{ fontSize: 20, fontWeight: 'bold', color: COLORS.TYPOGRAPHY.BASE }}>
+        {t('home.description')}
+      </Text>
+    </ScreenContainerScroll>
+  )
+}
+
+export default HomeMain

package/src/pages/home/index.ts

@@ -0,0 +1 @@
+export { default as HomeMain } from './home-main'

package/src/pages/settings/index.ts

@@ -0,0 +1 @@
+export { default as SettingsMain } from './settings-main'

package/src/pages/settings/settings-main.tsx

@@ -0,0 +1,18 @@
+import { Text } from 'react-native'
+import { useLocalizationText, useThemeMode } from '~shared/lib'
+import { ScreenContainerScroll } from '~shared/ui/templates'
+
+const SettingsMain = () => {
+  const t = useLocalizationText()
+  const { COLORS } = useThemeMode()
+
+  return (
+    <ScreenContainerScroll>
+      <Text style={{ fontSize: 20, fontWeight: 'bold', color: COLORS.TYPOGRAPHY.BASE }}>
+        {t('settings.description')}
+      </Text>
+    </ScreenContainerScroll>
+  )
+}
+
+export default SettingsMain

package/src/shared/assets/translations/en.ts

@@ -1,3 +1,12 @@
-const en = {}
+const en = {
+  home: {
+    title: 'Home',
+    description: 'Home screen',
+  },
+  settings: {
+    title: 'Settings',
+    description: 'Settings screen',
+  },
+}
 
 export default en

package/src/shared/assets/translations/ru.ts

@@ -1,3 +1,12 @@
-const ru = {}
+const ru = {
+  home: {
+    title: 'Главная',
+    description: 'Главная страница',
+  },
+  settings: {
+    title: 'Настройки',
+    description: 'Страница настроек',
+  },
+}
 
 export default ru

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

@@ -1,6 +1,3 @@
-const QUERY_KEYS = {
-  POSTS: 'posts',
-  POST: 'post',
-}
+const QUERY_KEYS = {}
 
 export { QUERY_KEYS }

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

@@ -11,7 +11,7 @@ import { type LocalizationProviderProps } from './localization.types'
 
 const LocalizationProvider = ({ children }: LocalizationProviderProps) => {
   useMemo(() => {
-    return i18n
+    i18n
       .use(languageDetector)
       .use(initReactI18next)
       .init({

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

@@ -3,10 +3,12 @@ import { Platform } from 'react-native'
 import { isGlassEffectAPIAvailable } from 'expo-glass-effect'
 import { type StackScreenProps } from 'expo-router'
 import {
+  type MaterialIcon,
   type NativeTabsProps,
   type NativeTabsTriggerIconProps,
   type NativeTabsTriggerLabelProps,
   type NativeTabTriggerProps,
+  type SFSymbolIcon,
 } from 'expo-router/unstable-native-tabs'
 import { useThemeMode, useThemeSetup } from '../../theme'
 
@@ -14,16 +16,20 @@ 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 createStackOptions = useCallback(
+    (options?: StackScreenProps['options']) => {
+      return {
+        headerShown: false,
+        headerTransparent: false,
+        headerShadowVisible: false,
+        contentStyle: {
+          backgroundColor: COLORS.FILL.BASE,
+        },
+        ...options,
+      } satisfies StackScreenProps['options']
+    },
+    [COLORS]
+  )
 
   const createScreenOptions = useCallback(
     (options?: StackScreenProps['options']) => {
@@ -58,33 +64,55 @@ const useNavigationTabBarOptions = () => {
   const { COLORS } = useThemeMode()
   const { isThemeModeDark } = useThemeSetup()
 
-  const createTabBarOptions = useCallback(() => {
-    return {
-      sidebarAdaptable: Platform.OS === 'ios',
-      disableTransparentOnScrollEdge: Platform.OS === 'ios',
-      labelVisibilityMode: 'labeled',
-      blurEffect:
-        (isGlassEffectAPIAvailable() && 'systemMaterial') || (isThemeModeDark && 'dark') || 'light',
-    } satisfies NativeTabsProps
-  }, [isThemeModeDark])
+  const createTabBarOptions = useCallback(
+    (options?: NativeTabsProps) => {
+      return {
+        sidebarAdaptable: Platform.OS === 'ios',
+        disableTransparentOnScrollEdge: Platform.OS === 'ios',
+        labelVisibilityMode: 'labeled',
+        blurEffect:
+          (isGlassEffectAPIAvailable() && 'systemMaterial') ||
+          (isThemeModeDark && 'dark') ||
+          'light',
+        ...options,
+      } satisfies NativeTabsProps
+    },
+    [isThemeModeDark]
+  )
 
-  const createTabOptions = useCallback(() => {
-    const triggerProps = {} satisfies NativeTabTriggerProps
+  const createTabOptions = useCallback(
+    ({
+      name,
+      children,
+      sf,
+      md,
+    }: NativeTabTriggerProps &
+      NativeTabsTriggerLabelProps &
+      Partial<SFSymbolIcon> &
+      Partial<MaterialIcon> = {}) => {
+      const triggerProps = {
+        name,
+      } satisfies NativeTabTriggerProps
 
-    const triggerIconProps = {
-      selectedColor: COLORS.TYPOGRAPHY.PRIMARY,
-    } satisfies NativeTabsTriggerIconProps
+      const triggerLabelProps = {
+        hidden: Platform.OS !== 'web',
+        children,
+      } satisfies NativeTabsTriggerLabelProps
 
-    const triggerLabelProps = {
-      hidden: Platform.OS !== 'web',
-    } satisfies NativeTabsTriggerLabelProps
+      const triggerIconProps = {
+        selectedColor: COLORS.TYPOGRAPHY.PRIMARY,
+        sf,
+        md,
+      } satisfies NativeTabsTriggerIconProps
 
-    return {
-      triggerProps,
-      triggerIconProps,
-      triggerLabelProps,
-    }
-  }, [COLORS])
+      return {
+        triggerProps,
+        triggerLabelProps,
+        triggerIconProps,
+      }
+    },
+    [COLORS]
+  )
 
   return {
     createTabBarOptions,

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

@@ -8,8 +8,8 @@ const PALETTE = {
   'LIGHT/SURFACE': '#F5F8FD',
   'LIGHT/FAINT': '#EFF2F7',
 
-  'LIGHT/PRIMARY': '#6115CD',
-  'LIGHT/PRIMARY_ACTIVE': '#4E11A4',
+  'LIGHT/PRIMARY': '#8756FF',
+  'LIGHT/PRIMARY_ACTIVE': '#7238FF',
   'LIGHT/PRIMARY_DISABLED': '#D5C9FF',
 
   'LIGHT/ACCENT': '#FF2B75',

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

@@ -51,4 +51,6 @@ const themes = {
   [ThemeModeSystem.Dark]: darkTheme,
 }
 
-export { ThemeMode, ThemeModeSystem, ThemeModeStatusBar, themes }
+const hasDarkMode = LIGHT_COLORS !== DARK_COLORS
+
+export { ThemeMode, ThemeModeSystem, ThemeModeStatusBar, themes, hasDarkMode }

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

@@ -2,13 +2,13 @@ import { Platform } from '@mediacubeco/base-react-native'
 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 { hasDarkMode, ThemeMode, ThemeModeStatusBar, ThemeModeSystem, themes } from './constants'
 import { ThemeContext } from './theme.context'
 import { type ThemeProviderProps } from './theme.types'
 
 const ThemeProvider = ({ children }: ThemeProviderProps) => {
   const didDefine = useRef(false)
-  const [themeMode, setThemeMode] = useState(ThemeMode.System)
+  const [themeMode, setThemeMode] = useState(hasDarkMode ? ThemeMode.System : ThemeMode.Light)
   const themeModeSystem = (useColorScheme() as ThemeModeSystem) ?? ThemeModeSystem.Light
 
   const currentThemeMode = {
@@ -23,7 +23,9 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
 
   const updateThemeModeSystem = useCallback((themeMode: ThemeMode) => {
     if (Platform.isIos) {
-      if (themeMode === ThemeMode.System) {
+      if (!hasDarkMode) {
+        Appearance.setColorScheme('light')
+      } else if (themeMode === ThemeMode.System) {
         Appearance.setColorScheme('unspecified')
       } else {
         Appearance.setColorScheme(themeMode)