@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

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

@@ -1,14 +1,21 @@
-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 { hasDarkMode, ThemeMode, ThemeModeStatusBar, ThemeModeSystem, themes } from './constants'
+import { themeSnapshot, themeStorage } from './utils'
+import {
+  ThemeAccent,
+  ThemeMode,
+  ThemeModeStatusBar,
+  ThemeModeSystem,
+  themesByAccent,
+} 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(hasDarkMode ? ThemeMode.System : ThemeMode.Light)
+  const [themeMode, setThemeMode] = useState(ThemeMode.System)
+  const [themeAccent, setThemeAccent] = useState<ThemeAccent>(ThemeAccent.Mint)
   const colorScheme = useColorScheme()
 
   const themeModeSystem =
@@ -21,28 +28,29 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
   }[themeMode]
 
   const theme = useMemo(() => {
-    return themes[currentThemeMode]
-  }, [currentThemeMode])
+    const theme = themesByAccent[themeAccent][currentThemeMode]
+
+    return theme
+  }, [currentThemeMode, themeAccent])
 
   const value = useMemo(() => {
-    return { theme, themeMode, themeModeSystem, setThemeMode }
-  }, [theme, themeMode, themeModeSystem, setThemeMode])
+    return { theme, themeMode, themeModeSystem, themeAccent, setThemeMode, setThemeAccent }
+  }, [theme, themeMode, themeModeSystem, themeAccent, setThemeMode, setThemeAccent])
 
   const updateThemeModeSystem = useCallback((themeMode: ThemeMode) => {
-    if (Platform.isIos) {
-      if (!hasDarkMode) {
-        Appearance.setColorScheme('light')
-      } else if (themeMode === ThemeMode.System) {
-        Appearance.setColorScheme('unspecified')
-      } else {
-        Appearance.setColorScheme(themeMode)
-      }
+    if (themeMode === ThemeMode.System) {
+      Appearance.setColorScheme('unspecified')
+    } else {
+      Appearance.setColorScheme(themeMode)
     }
   }, [])
 
   useEffect(() => {
-    const defineThemeMode = async () => {
-      const storageThemeMode = await themeStorage.mode.get()
+    const defineTheme = async () => {
+      const [storageThemeMode, storageThemeAccent] = await Promise.all([
+        themeStorage.mode.get(),
+        themeStorage.accent.get(),
+      ])
 
       if (storageThemeMode) {
         setThemeMode(storageThemeMode)
@@ -50,10 +58,14 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
         updateThemeModeSystem(storageThemeMode)
       }
 
+      if (storageThemeAccent && themesByAccent[storageThemeAccent]) {
+        setThemeAccent(storageThemeAccent)
+      }
+
       didDefine.current = true
     }
 
-    defineThemeMode()
+    defineTheme()
   }, [updateThemeModeSystem])
 
   useEffect(() => {
@@ -68,6 +80,20 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
     updateThemeMode()
   }, [themeMode, updateThemeModeSystem])
 
+  useEffect(() => {
+    const updateThemeAccent = async () => {
+      if (didDefine.current) {
+        await themeStorage.accent.set(themeAccent)
+      }
+    }
+
+    updateThemeAccent()
+  }, [themeAccent])
+
+  useEffect(() => {
+    themeSnapshot.set(theme)
+  }, [theme])
+
   useEffect(() => {
     StatusBar.setBarStyle(
       currentThemeMode === ThemeModeSystem.Dark ? ThemeModeStatusBar.Light : ThemeModeStatusBar.Dark

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

@@ -0,0 +1,43 @@
+import { useMemo } from 'react'
+import { ThemeMode, ThemeModeSystem, themesByAccent } from './constants'
+import { ThemeContext } from './theme.context'
+import { useTheme } from './hooks/use-theme'
+import { type ThemeScopeProps, type ThemeSomeScopeProps } from './theme.types'
+
+/** Режим темы приложения, соответствующий режиму области. */
+const THEME_MODE_BY_SCOPE_MODE = {
+  [ThemeModeSystem.Light]: ThemeMode.Light,
+  [ThemeModeSystem.Dark]: ThemeMode.Dark,
+}
+
+/**
+ * Локальная область темы: рендерит поддерево в заданном режиме независимо от темы
+ * приложения. Для контента, свёрстанного под конкретную схему — например, графики
+ * онбординг-слайдов, задизайненной в светлой. Акцент и сеттеры наследуются от
+ * родительского провайдера.
+ */
+const ThemeScope = ({ mode, children }: ThemeScopeProps) => {
+  const context = useTheme()
+
+  const value = useMemo(() => {
+    return {
+      ...context,
+      theme: themesByAccent[context.themeAccent][mode],
+      themeMode: THEME_MODE_BY_SCOPE_MODE[mode],
+      themeModeSystem: mode,
+    }
+  }, [context, mode])
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+const ThemeScopeLight = ({ children }: ThemeSomeScopeProps) => {
+  return <ThemeScope mode={ThemeModeSystem.Light}>{children}</ThemeScope>
+}
+
+const ThemeScopeDark = ({ children }: ThemeSomeScopeProps) => {
+  return <ThemeScope mode={ThemeModeSystem.Dark}>{children}</ThemeScope>
+}
+
+export { ThemeScopeLight, ThemeScopeDark }
+export default ThemeScope

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

@@ -1,15 +1,27 @@
 import { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react'
-import { type ThemeMode, type ThemeModeSystem, type themes } from './constants'
+import { type ThemeAccent, type ThemeMode, type ThemeModeSystem, type themes } from './constants'
 
+/** Набор токенов активной темы. */
 type Theme = (typeof themes)[ThemeModeSystem]
 
-interface ThemeContextValue {
+/** Значение контекста темы. */
+type ThemeContextValue = {
   theme: Theme
   themeMode: ThemeMode
   themeModeSystem: ThemeModeSystem
+  themeAccent: ThemeAccent
   setThemeMode: Dispatch<SetStateAction<ThemeMode>>
+  setThemeAccent: Dispatch<SetStateAction<ThemeAccent>>
 }
 
+/** Пропсы провайдера темы. */
 type ThemeProviderProps = PropsWithChildren
 
-export type { Theme, ThemeContextValue, ThemeProviderProps }
+/** Пропсы локальной области темы. */
+type ThemeScopeProps = PropsWithChildren<{
+  mode: ThemeModeSystem
+}>
+
+type ThemeSomeScopeProps = PropsWithChildren
+
+export type { Theme, ThemeContextValue, ThemeProviderProps, ThemeScopeProps, ThemeSomeScopeProps }

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

@@ -0,0 +1,81 @@
+import { clamp } from '@mediacubeco/base/utils'
+
+const transparencyCache = new Map<string, string>()
+
+const parseColor = (color: string) => {
+  const sanitized = color.trim().toLowerCase()
+
+  if (sanitized === 'transparent') {
+    return { red: 0, green: 0, blue: 0 }
+  }
+
+  const isRgb = sanitized.startsWith('rgb(')
+  const isRgba = sanitized.startsWith('rgba(')
+  const isClosed = sanitized.endsWith(')')
+
+  if ((!isRgb && !isRgba) || !isClosed) {
+    throw new Error(`Unsupported color format: ${color}`)
+  }
+
+  const valuesBody = sanitized.slice(sanitized.indexOf('(') + 1, sanitized.length - 1)
+  const valueList = valuesBody.split(',').map((value) => value.trim())
+
+  if (valueList.length !== 3 && valueList.length !== 4) {
+    throw new Error(`Unsupported color format: ${color}`)
+  }
+
+  const redValue = Number(valueList[0])
+  const greenValue = Number(valueList[1])
+  const blueValue = Number(valueList[2])
+
+  if (Number.isNaN(redValue) || Number.isNaN(greenValue) || Number.isNaN(blueValue)) {
+    throw new Error(`Unsupported color format: ${color}`)
+  }
+
+  const red = clamp(Math.round(redValue), 0, 255)
+  const green = clamp(Math.round(greenValue), 0, 255)
+  const blue = clamp(Math.round(blueValue), 0, 255)
+
+  return { red, green, blue }
+}
+
+const brightnessCache = new Map<string, string>()
+
+/** Затемняет (factor < 1) или осветляет (factor > 1) цвет умножением RGB-каналов. */
+const withBrightness = (color: string, factor: number) => {
+  const cacheKey = `${color}|${factor}`
+  const cachedColor = brightnessCache.get(cacheKey)
+
+  if (cachedColor) {
+    return cachedColor
+  }
+
+  const { red, green, blue } = parseColor(color)
+  const scaledRed = clamp(Math.round(red * factor), 0, 255)
+  const scaledGreen = clamp(Math.round(green * factor), 0, 255)
+  const scaledBlue = clamp(Math.round(blue * factor), 0, 255)
+  const scaledColor = `rgba(${scaledRed}, ${scaledGreen}, ${scaledBlue}, 1)`
+
+  brightnessCache.set(cacheKey, scaledColor)
+
+  return scaledColor
+}
+
+const withTransparency = (color: string, alpha: number) => {
+  const cacheKey = `${color}|${alpha}`
+  const cachedColor = transparencyCache.get(cacheKey)
+
+  if (cachedColor) {
+    return cachedColor
+  }
+
+  const { red, green, blue } = parseColor(color)
+  const clampedAlpha = clamp(alpha, 0, 1)
+  const transparentColor = `rgba(${red}, ${green}, ${blue}, ${clampedAlpha})`
+
+  transparencyCache.set(cacheKey, transparentColor)
+
+  return transparentColor
+}
+
+export { withBrightness, withTransparency }

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

@@ -1 +1,3 @@
+export { withBrightness, withTransparency } from './color'
+export { themeSnapshot } from './snapshot'
 export { themeStorage } from './storage'

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

@@ -0,0 +1,17 @@
+import { ThemeModeSystem, themes } from '../constants'
+import { type Theme } from '../theme.types'
+
+/** Актуальная тема приложения; до инициализации провайдера — светлая. */
+let currentTheme: Theme = themes[ThemeModeSystem.Light]
+
+/** Снапшот текущей темы для кода вне React-дерева (сервисы, хелперы); обновляется из ThemeProvider. */
+const themeSnapshot = {
+  get() {
+    return currentTheme
+  },
+  set: (theme: Theme) => {
+    currentTheme = theme
+  },
+}
+
+export { themeSnapshot }

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

@@ -1,7 +1,10 @@
 import { Storage } from '@mediacubeco/base/services'
 import { storageModel } from '../../storage'
-import { type ThemeMode } from '../constants'
+import { type ThemeAccent, type ThemeMode } from '../constants'
 
-const themeStorage = new Storage(storageModel).create<'mode', ThemeMode>('mode')
+/** Хранилище настроек темы: режим и акцентный цвет. */
+const themeStorage = new Storage(storageModel)
+  .create<'mode', ThemeMode>('mode')
+  .create<'accent', ThemeAccent>('accent')
 
 export { themeStorage }

package/src/shared/services/browser/browser.ts

@@ -0,0 +1,66 @@
+import { ErrorHandler, Log } from '@mediacubeco/base/helpers'
+import * as WebBrowser from 'expo-web-browser'
+import { themeSnapshot } from '../../lib'
+
+/** Работа с системным in-app браузером. */
+class Browser {
+  /** Завершает подвисшую auth-сессию браузера после возврата в приложение. */
+  static async init() {
+    try {
+      WebBrowser.maybeCompleteAuthSession()
+
+      Log.formatted.success('browser', 'init success')
+    } catch (error) {
+      ErrorHandler.capture(error, {
+        signal: 'browser',
+        message: 'init error',
+      })
+    }
+  }
+
+  /** Открывает URL в in-app браузере (iOS — page sheet, Android — Custom Tabs) в цветах текущей темы. */
+  static async open(url: string) {
+    try {
+      const { COLORS } = themeSnapshot.get()
+
+      await WebBrowser.openBrowserAsync(url, {
+        showTitle: true,
+        createTask: true,
+        readerMode: false,
+        showInRecents: true,
+        useProxyActivity: true,
+        enableBarCollapsing: true,
+        enableDefaultShareMenuItem: true,
+        dismissButtonStyle: 'close',
+        toolbarColor: COLORS.BACKGROUND.BASE,
+        secondaryToolbarColor: COLORS.BACKGROUND.SECONDARY,
+        controlsColor: COLORS.TYPOGRAPHY.PRIMARY,
+        presentationStyle: WebBrowser.WebBrowserPresentationStyle.PAGE_SHEET,
+      })
+
+      Log.formatted.success('browser', 'open success', { url })
+    } catch (error) {
+      ErrorHandler.capture(error, {
+        signal: 'browser',
+        message: 'open error',
+        payload: { url },
+      })
+    }
+  }
+
+  /** Закрывает открытый in-app браузер. */
+  static async close() {
+    try {
+      await WebBrowser.dismissBrowser()
+
+      Log.formatted.success('browser', 'close success')
+    } catch (error) {
+      ErrorHandler.capture(error, {
+        signal: 'browser',
+        message: 'close error',
+      })
+    }
+  }
+}
+
+export default Browser

package/src/shared/services/browser/index.ts

@@ -0,0 +1 @@
+export { default as Browser } from './browser'

package/src/shared/services/cookies/cookies.ts

@@ -0,0 +1,73 @@
+import { ErrorHandler, Log } from '@mediacubeco/base/helpers'
+import NitroCookies, { type Cookie } from 'react-native-nitro-cookies'
+import { APP_URL } from '../../constants'
+
+/** Управление cookie в нативном хранилище, общем с WebView. */
+class Cookies {
+  /** Базовый URL веб-приложения, для которого управляются cookie. */
+  private static url = ''
+
+  /** Запоминает базовый URL веб-приложения из окружения. */
+  static async init() {
+    Cookies.url = APP_URL
+
+    Log.formatted.success('cookies', 'init success', { url: Cookies.url })
+  }
+
+  /** Записывает cookie; `useWebKit` пишет в хранилище WKWebView (iOS). */
+  static async set(cookie: Cookie, useWebKit?: boolean) {
+    try {
+      if (!Cookies.url) {
+        ErrorHandler.throw('Cookies not initialized')
+      }
+
+      await NitroCookies.set(Cookies.url, cookie, useWebKit)
+
+      Log.formatted.success('cookies', 'set success', { name: cookie.name, useWebKit })
+    } catch (error) {
+      ErrorHandler.forward(error, {
+        signal: 'cookies',
+        message: 'set error',
+        payload: { name: cookie.name, useWebKit },
+      })
+    }
+  }
+
+  /** Возвращает cookie, доступные для базового URL. */
+  static async get(useWebKit?: boolean) {
+    try {
+      if (!Cookies.url) {
+        ErrorHandler.throw('Cookies not initialized')
+      }
+
+      const cookies = await NitroCookies.get(Cookies.url, useWebKit)
+
+      Log.formatted.success('cookies', 'get success', { useWebKit })
+
+      return cookies
+    } catch (error) {
+      ErrorHandler.forward(error, {
+        signal: 'cookies',
+        message: 'get error',
+        payload: { useWebKit },
+      })
+    }
+  }
+
+  /** Полностью очищает cookie-хранилище (например, при логауте). */
+  static async clear(useWebKit?: boolean) {
+    try {
+      await NitroCookies.clearAll(useWebKit)
+
+      Log.formatted.success('cookies', 'clear success', { useWebKit })
+    } catch (error) {
+      ErrorHandler.forward(error, {
+        signal: 'cookies',
+        message: 'clear error',
+        payload: { useWebKit },
+      })
+    }
+  }
+}
+
+export default Cookies

package/src/shared/services/cookies/index.ts

@@ -0,0 +1 @@
+export { default as Cookies } from './cookies'

package/src/shared/services/index.ts

@@ -0,0 +1,5 @@
+export * from './browser'
+export * from './cookies'
+export * from './linking'
+export * from './share'
+export * from './universal-links'

package/src/shared/services/linking/index.ts

@@ -0,0 +1 @@
+export { default as Linking } from './linking'

package/src/shared/services/linking/linking.ts

@@ -0,0 +1,22 @@
+import { ErrorHandler, Log } from '@mediacubeco/base/helpers'
+import { openURL } from 'expo-linking'
+
+/** Открытие внешних ссылок в соответствующем системном приложении. */
+class Linking {
+  /** Открывает URL вне приложения (системный браузер, App Store, Google Play и т. п.). */
+  static async open(url: string) {
+    try {
+      await openURL(url)
+
+      Log.formatted.success('linking', 'open success', { url })
+    } catch (error) {
+      ErrorHandler.capture(error, {
+        signal: 'linking',
+        message: 'open error',
+        payload: { url },
+      })
+    }
+  }
+}
+
+export default Linking

package/src/shared/services/share/index.ts

@@ -0,0 +1 @@
+export { default as Share } from './share'

package/src/shared/services/share/share.ts

@@ -0,0 +1,28 @@
+import { Platform } from '@mediacubeco/base-react-native/helpers'
+import { Share as ShareNative } from 'react-native'
+import * as Sharing from 'expo-sharing'
+import { File, Paths } from 'expo-file-system'
+
+/** Шаринг файлов и текста через системный share sheet. */
+class Share {
+  /** Отдаёт base64-содержимое в share sheet, предварительно записав его во временный файл кэша. */
+  static async openBase64(base64: string, fileName: string) {
+    const file = new File(Paths.cache, fileName)
+
+    file.write(base64, { encoding: 'base64' })
+
+    await Sharing.shareAsync(file.uri)
+  }
+
+  /** Отдаёт текстовое сообщение в share sheet. */
+  static async openMessage(message: string) {
+    await ShareNative.share({ message })
+  }
+
+  /** Отдаёт ссылку в share sheet: на iOS нативным полем `url`, на остальных платформах текстом. */
+  static async openUrl(url: string) {
+    await ShareNative.share(Platform.isIos ? { url } : { message: url })
+  }
+}
+
+export default Share

package/src/shared/services/universal-links/index.ts

@@ -0,0 +1,104 @@
+export { default as UniversalLinks } from './universal-links'
+export type { UniversalLinksHandler } from './universal-links.types'
+
+/**
+ * Backend hosting (required to verify domain ownership):
+ *
+ * ──────────────────────────────────────────────────────────────────────────
+ * iOS — Universal Links
+ * Host at: https://garna.io/.well-known/apple-app-site-association
+ *   - no file extension (NOT .json)
+ *   - Content-Type: application/json
+ *   - HTTPS, no redirects
+ *   - replace <APPLE_TEAM_ID> with the value from EXPO_PUBLIC_APPLE_TEAM_ID
+ *
+ * {
+ *   "applinks": {
+ *     "apps": [],
+ *     "details": [
+ *       {
+ *         "appID": "<APPLE_TEAM_ID>.com.mediacube.application",
+ *         "paths": ["/auth/*", "/invite/*", "/app/*"]
+ *       }
+ *     ]
+ *   }
+ * }
+ *
+ * ──────────────────────────────────────────────────────────────────────────
+ * Android — App Links
+ * Host at: https://garna.io/.well-known/assetlinks.json
+ *   - Content-Type: application/json
+ *   - HTTPS, no redirects
+ *   - replace <SHA256_CERT_FINGERPRINT> with the signing fingerprint(s) from
+ *     `eas credentials` and Play Console → App integrity (App signing key)
+ *
+ * [
+ *   {
+ *     "relation": ["delegate_permission/common.handle_all_urls"],
+ *     "target": {
+ *       "namespace": "android_app",
+ *       "package_name": "com.mediacube.application",
+ *       "sha256_cert_fingerprints": ["<SHA256_CERT_FINGERPRINT>"]
+ *     }
+ *   }
+ * ]
+ * ──────────────────────────────────────────────────────────────────────────
+ *
+ * `getAppleAssociation()` / `getAndroidAssociation()` below build these exact
+ * payloads at runtime once the env value and fingerprints are filled in.
+ *
+ * ══════════════════════════════════════════════════════════════════════════
+ * Ignoring domains and paths
+ * ══════════════════════════════════════════════════════════════════════════
+ *
+ * The app only claims what is explicitly declared — anything else opens in the
+ * browser. Rules differ per platform and per scope (domain vs path).
+ *
+ * ── Ignore a whole domain / subdomain ─────────────────────────────────────
+ *   - iOS: omit it from app.json `ios.associatedDomains`. Avoid the wildcard
+ *     `applinks:*.garna.io` if some subdomains must stay in the browser; list
+ *     explicit hosts instead, e.g. ["applinks:app.garna.io", "applinks:garna.io"].
+ *   - Android: omit its `host` from app.json `android.intentFilters[].data`.
+ *
+ * ── Ignore paths on iOS (edit AASA, app.json untouched) ───────────────────
+ * First match wins, so put excludes first.
+ *
+ * Modern format (iOS 13+, recommended) — `exclude: true`:
+ * {
+ *   "applinks": {
+ *     "details": [
+ *       {
+ *         "appIDs": ["<APPLE_TEAM_ID>.com.mediacube.application"],
+ *         "components": [
+ *           { "/": "/help/*", "exclude": true, "comment": "open in Safari" },
+ *           { "/": "/blog/*", "exclude": true },
+ *           { "/": "/auth/*" },
+ *           { "/": "/invite/*" },
+ *           { "/": "/app/*" }
+ *         ]
+ *       }
+ *     ]
+ *   }
+ * }
+ *
+ * Legacy format — `NOT ` prefix:
+ *   "paths": ["NOT /help/*", "NOT /blog/*", "/auth/*", "/invite/*", "/app/*"]
+ *
+ * ── Ignore paths on Android (edit app.json, assetlinks untouched) ─────────
+ * No "exclude" exists — whitelist allowed paths via pathPrefix / pathPattern.
+ * Everything outside the listed prefixes opens in the browser:
+ *
+ * "intentFilters": [
+ *   {
+ *     "action": "VIEW",
+ *     "autoVerify": true,
+ *     "category": ["BROWSABLE", "DEFAULT"],
+ *     "data": [
+ *       { "scheme": "https", "host": "garna.io", "pathPrefix": "/auth" },
+ *       { "scheme": "https", "host": "garna.io", "pathPrefix": "/invite" },
+ *       { "scheme": "https", "host": "garna.io", "pathPrefix": "/app" }
+ *     ]
+ *   }
+ * ]
+ * ──────────────────────────────────────────────────────────────────────────
+ */

package/src/shared/services/universal-links/universal-links.ts

@@ -0,0 +1,25 @@
+import { type EmitterSubscription } from 'react-native'
+import * as Linking from 'expo-linking'
+import { type UniversalLinksHandler } from './universal-links.types'
+
+class UniversalLinks {
+  static subscription: EmitterSubscription
+
+  static get() {
+    return Linking.getInitialURL()
+  }
+
+  static parse(url: string) {
+    return Linking.parse(url)
+  }
+
+  static subscribe(handler: UniversalLinksHandler) {
+    UniversalLinks.subscription = Linking.addEventListener('url', handler)
+  }
+
+  static unsubscribe() {
+    UniversalLinks.subscription.remove()
+  }
+}
+
+export default UniversalLinks

package/src/shared/services/universal-links/universal-links.types.ts

@@ -0,0 +1,5 @@
+import { type URLListener } from 'expo-linking'
+
+type UniversalLinksHandler = URLListener
+
+export type { UniversalLinksHandler }