@mediacubeco/expo-template-fsd 1.0.0

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

@@ -0,0 +1,57 @@
+const PALETTE = {
+  'LIGHT/WHITE': '#FFFFFF',
+  'LIGHT/BLACK': '#111416',
+  'LIGHT/GRAY': '#D4D4D4',
+
+  'LIGHT/NEUTRAL': '#57626F',
+  'LIGHT/DISABLED': '#C3CAD1',
+  'LIGHT/SURFACE': '#F5F8FD',
+  'LIGHT/FAINT': '#EFF2F7',
+
+  'LIGHT/PRIMARY': '#6115CD',
+  'LIGHT/PRIMARY_ACTIVE': '#4E11A4',
+  'LIGHT/PRIMARY_DISABLED': '#D5C9FF',
+
+  'LIGHT/ACCENT': '#FF2B75',
+  'LIGHT/ACCENT_ACTIVE': '#E62464',
+  'LIGHT/ACCENT_DISABLED': '#FFBAD2',
+
+  'TRANSPARENT': '#FFFFFF00',
+}
+
+const LIGHT_COLORS_COMMON = {
+  PRIMARY: PALETTE['LIGHT/PRIMARY'],
+  PRIMARY_ACTIVE: PALETTE['LIGHT/PRIMARY_ACTIVE'],
+  PRIMARY_DISABLED: PALETTE['LIGHT/PRIMARY_DISABLED'],
+
+  ACCENT: PALETTE['LIGHT/ACCENT'],
+  ACCENT_ACTIVE: PALETTE['LIGHT/ACCENT_ACTIVE'],
+  ACCENT_DISABLED: PALETTE['LIGHT/ACCENT_DISABLED'],
+
+  TRANSPARENT: PALETTE['TRANSPARENT'],
+}
+
+const LIGHT_COLORS = {
+  FILL: {
+    BASE: PALETTE['LIGHT/SURFACE'],
+    NEUTRAL: PALETTE['LIGHT/FAINT'],
+    CONTRAST: PALETTE['LIGHT/WHITE'],
+    DISABLED: PALETTE['LIGHT/GRAY'],
+    ...LIGHT_COLORS_COMMON,
+  },
+  STROKE: {
+    BASE: PALETTE['LIGHT/FAINT'],
+    ...LIGHT_COLORS_COMMON,
+  },
+  TYPOGRAPHY: {
+    BASE: PALETTE['LIGHT/BLACK'],
+    NEUTRAL: PALETTE['LIGHT/NEUTRAL'],
+    CONTRAST: PALETTE['LIGHT/WHITE'],
+    DISABLED: PALETTE['LIGHT/DISABLED'],
+    ...LIGHT_COLORS_COMMON,
+  },
+}
+
+const DARK_COLORS = LIGHT_COLORS
+
+export { LIGHT_COLORS, DARK_COLORS }

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

@@ -0,0 +1,8 @@
+const DELAYS = {
+  EMPTY: 0,
+  SHORT: 100,
+  BASE: 200,
+  LONG: 500,
+}
+
+export { DELAYS }

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

@@ -0,0 +1,8 @@
+const DURATIONS = {
+  EMPTY: 0,
+  SHORT: 100,
+  BASE: 200,
+  LONG: 500,
+}
+
+export { DURATIONS }

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

@@ -0,0 +1,7 @@
+const FONTS = {
+  BASE_MEDIUM: 'BASE_MEDIUM',
+  BASE_SEMIBOLD: 'BASE_SEMIBOLD',
+  BASE_BOLD: 'BASE_BOLD',
+}
+
+export { FONTS }

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

@@ -0,0 +1,54 @@
+import { BORDERS } from './borders'
+import { DARK_COLORS, LIGHT_COLORS } from './colors'
+import { DELAYS } from './delays'
+import { DURATIONS } from './durations'
+import { FONTS } from './fonts'
+import { SHADOWS } from './shadows'
+import { SIZES } from './sizes'
+import { TRANSPARENCIES } from './transparencies'
+import { WEIGHTS } from './weights'
+
+const common = {
+  BORDERS,
+  // COLORS,
+  DELAYS,
+  DURATIONS,
+  FONTS,
+  SHADOWS,
+  SIZES,
+  TRANSPARENCIES,
+  WEIGHTS,
+}
+
+const lightTheme = {
+  ...common,
+  COLORS: LIGHT_COLORS,
+}
+
+const darkTheme = {
+  ...common,
+  COLORS: DARK_COLORS,
+}
+
+enum ThemeMode {
+  Light = 'light',
+  Dark = 'dark',
+  System = 'system',
+}
+
+enum ThemeModeSystem {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+enum ThemeModeStatusBar {
+  Dark = 'dark-content',
+  Light = 'light-content',
+}
+
+const themes = {
+  [ThemeModeSystem.Light]: lightTheme,
+  [ThemeModeSystem.Dark]: darkTheme,
+}
+
+export { ThemeMode, ThemeModeSystem, ThemeModeStatusBar, themes }

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

@@ -0,0 +1,40 @@
+const SHADOWS = {
+  EMPTY: {
+    elevation: 0,
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+  },
+  THIN: {
+    elevation: 2,
+    shadowOpacity: 0.2,
+    shadowRadius: 1.5,
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+  },
+  BASE: {
+    elevation: 12,
+    shadowOpacity: 0.4,
+    shadowRadius: 6,
+    shadowOffset: {
+      width: 0,
+      height: 6,
+    },
+  },
+  FAT: {
+    elevation: 24,
+    shadowRadius: 16,
+    shadowOpacity: 0.6,
+    shadowOffset: {
+      width: 0,
+      height: 12,
+    },
+  },
+}
+
+export { SHADOWS }

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

@@ -0,0 +1,32 @@
+const SIZES = {
+  'EMPTY': 0,
+  '2XS': 0.5,
+  'XS': 1,
+  'S': 2,
+  'M': 4,
+  'L': 8,
+  'XL': 12,
+  '2XL': 16,
+  '3XL': 20,
+  '4XL': 24,
+  '5XL': 28,
+  '6XL': 32,
+  '7XL': 36,
+  '8XL': 40,
+  '9XL': 44,
+  '10XL': 48,
+  '11XL': 52,
+  '12XL': 56,
+  '13XL': 60,
+  '14XL': 64,
+  '15XL': 68,
+  '16XL': 72,
+  '17XL': 76,
+  '18XL': 80,
+  '19XL': 84,
+  '20XL': 88,
+  'MAX': '100%' as const,
+  'INFINITY': Number.MAX_SAFE_INTEGER,
+}
+
+export { SIZES }

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

@@ -0,0 +1,10 @@
+const TRANSPARENCIES = {
+  VISIBLE: 1,
+  WEAK: 0.8,
+  HALF: 0.4,
+  STRONG: 0.2,
+  LIGHT: 0.1,
+  INVISIBLE: 0,
+}
+
+export { TRANSPARENCIES }

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

@@ -0,0 +1,13 @@
+const WEIGHTS = {
+  // THIN: '100',
+  // EXTRA_LIGHT: '200',
+  // LIGHT: '300',
+  // REGULAR: '400',
+  MEDIUM: '500',
+  SEMIBOLD: '600',
+  BOLD: '700',
+  // EXTRA_BOLD: '800',
+  // BLACK: '900',
+} as const
+
+export { WEIGHTS }

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

@@ -0,0 +1,2 @@
+export * from './use-theme-mode'
+export * from './use-theme-setup'

package/src/shared/lib/theme/hooks/use-theme-mode.ts

@@ -0,0 +1,9 @@
+import { useTheme } from './use-theme'
+
+const useThemeMode = () => {
+  const { theme } = useTheme()
+
+  return theme
+}
+
+export { useThemeMode }

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

@@ -0,0 +1,49 @@
+import { Log } from '@mediacubeco/base/helpers'
+import { useCallback } from 'react'
+import { ThemeMode, ThemeModeSystem } from '../constants'
+import { useTheme } from './use-theme'
+
+const useThemeSetup = () => {
+  const { themeMode, themeModeSystem, setThemeMode } = useTheme()
+
+  const isThemeModeSystem = themeMode === ThemeMode.System
+  const isThemeModeSystemLight = isThemeModeSystem && themeModeSystem === ThemeModeSystem.Light
+  const isThemeModeSystemDark = isThemeModeSystem && themeModeSystem === ThemeModeSystem.Dark
+
+  const isThemeModeLight = themeMode === ThemeMode.Light || isThemeModeSystemLight
+  const isThemeModeDark = themeMode === ThemeMode.Dark || isThemeModeSystemDark
+
+  const setThemeModeLight = useCallback(() => {
+    setThemeMode(ThemeMode.Light)
+
+    Log.formatted.info('light', 'theme mode')
+  }, [setThemeMode])
+
+  const setThemeModeDark = useCallback(() => {
+    setThemeMode(ThemeMode.Dark)
+
+    Log.formatted.info('dark', 'theme mode')
+  }, [setThemeMode])
+
+  const setThemeModeSystem = useCallback(() => {
+    setThemeMode(ThemeMode.System)
+
+    Log.formatted.info('system', 'theme mode')
+  }, [setThemeMode])
+
+  return {
+    themeMode,
+    themeModeSystem,
+    isThemeModeSystem,
+    isThemeModeSystemLight,
+    isThemeModeSystemDark,
+    isThemeModeLight,
+    isThemeModeDark,
+    setThemeMode,
+    setThemeModeLight,
+    setThemeModeDark,
+    setThemeModeSystem,
+  }
+}
+
+export { useThemeSetup }

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

@@ -0,0 +1,15 @@
+import { ErrorHandler } from '@mediacubeco/base/helpers'
+import { useContext } from 'react'
+import { ThemeContext } from '../theme.context'
+
+const useTheme = () => {
+  const context = useContext(ThemeContext)
+
+  if (!context) {
+    ErrorHandler.throw('useTheme can not be used outside ThemeProvider')
+  }
+
+  return context
+}
+
+export { useTheme }

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

@@ -0,0 +1,4 @@
+export { ThemeMode, ThemeModeSystem } from './constants'
+export { useThemeSetup, useThemeMode } from './hooks'
+export { default as ThemeProvider } from './theme.provider'
+export type { Theme } from './theme.types'

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

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

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

@@ -0,0 +1,60 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { 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'
+
+const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const didDefine = useRef(false)
+  const [themeMode, setThemeMode] = useState(ThemeMode.System)
+  const themeModeSystem = (useColorScheme() as ThemeModeSystem) ?? ThemeModeSystem.Light
+
+  const currentThemeMode = {
+    [ThemeMode.Light]: ThemeModeSystem.Light,
+    [ThemeMode.Dark]: ThemeModeSystem.Dark,
+    [ThemeMode.System]: themeModeSystem,
+  }[themeMode]
+
+  const theme = useMemo(() => {
+    return themes[currentThemeMode]
+  }, [currentThemeMode])
+
+  useEffect(() => {
+    const defineThemeMode = async () => {
+      const storageThemeMode = await themeStorage.mode.get()
+
+      if (storageThemeMode) {
+        setThemeMode(storageThemeMode as ThemeMode)
+      }
+
+      didDefine.current = true
+    }
+
+    defineThemeMode()
+  }, [])
+
+  useEffect(() => {
+    const updateThemeMode = async () => {
+      if (didDefine.current) {
+        await themeStorage.mode.set(themeMode)
+      }
+    }
+
+    updateThemeMode()
+  }, [themeMode])
+
+  useEffect(() => {
+    StatusBar.setBarStyle(
+      currentThemeMode === ThemeModeSystem.Dark ? ThemeModeStatusBar.Light : ThemeModeStatusBar.Dark
+    )
+  }, [currentThemeMode])
+
+  return (
+    <ThemeContext.Provider value={{ theme, themeMode, themeModeSystem, setThemeMode }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export default ThemeProvider

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

@@ -0,0 +1,15 @@
+import { Dispatch, PropsWithChildren, SetStateAction } from 'react'
+import { ThemeMode, ThemeModeSystem, themes } from './constants'
+
+type Theme = (typeof themes)[ThemeModeSystem]
+
+interface ThemeContextValue {
+  theme: Theme
+  themeMode: ThemeMode
+  themeModeSystem: ThemeModeSystem
+  setThemeMode: Dispatch<SetStateAction<ThemeMode>>
+}
+
+type ThemeProviderProps = PropsWithChildren
+
+export type { Theme, ThemeContextValue, ThemeProviderProps }

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

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

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

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

package/src/shared/ui/atoms/index.ts

@@ -0,0 +1 @@
+export const atoms = {}

package/src/shared/ui/index.ts

@@ -0,0 +1,4 @@
+export * from './atoms'
+export * from './molecules'
+export * from './organisms'
+export * from './templates'

package/src/shared/ui/molecules/index.ts

@@ -0,0 +1,2 @@
+export * from './keyboard-area'
+export * from './refresh-control'

package/src/shared/ui/molecules/keyboard-area/index.ts

@@ -0,0 +1,2 @@
+export { default as KeyboardArea } from './keyboard-area'
+export type { KeyboardAreaProps } from './keyboard-area.types'

package/src/shared/ui/molecules/keyboard-area/keyboard-area.styles.ts

@@ -0,0 +1,20 @@
+import { useAnimated, useAnimatedStyle, useSafeArea } from '../../../hooks'
+
+const useKeyboardAreaStyles = () => {
+  const { BOTTOM } = useSafeArea()
+  const [safeAreaHeight] = useAnimated(BOTTOM)
+  const [keyboardHeight] = useAnimated<number>(0)
+
+  const keyboardAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      height: keyboardHeight.value - safeAreaHeight.value,
+    }
+  })
+
+  return {
+    keyboardHeight,
+    keyboardAnimatedStyle,
+  }
+}
+
+export { useKeyboardAreaStyles }

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

@@ -0,0 +1,34 @@
+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'
+
+const KeyboardAnimatedArea = animate(View)
+
+const KeyboardArea = ({}: KeyboardAreaProps) => {
+  const { keyboardHeight, keyboardAnimatedStyle } = useKeyboardAreaStyles()
+
+  useKeyboardHandler(
+    {
+      onStart: () => {
+        'worklet'
+      },
+      onMove: (event) => {
+        'worklet'
+
+        keyboardHeight.set(event.height)
+      },
+      onEnd: (event) => {
+        'worklet'
+
+        keyboardHeight.set(event.height)
+      },
+    },
+    []
+  )
+
+  return <KeyboardAnimatedArea style={keyboardAnimatedStyle} />
+}
+
+export default KeyboardArea

package/src/shared/ui/molecules/keyboard-area/keyboard-area.types.ts

@@ -0,0 +1,3 @@
+type KeyboardAreaProps = {}
+
+export type { KeyboardAreaProps }

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

@@ -0,0 +1,2 @@
+export { default as RefreshControl } from './refresh-control'
+export type { RefreshControlProps } from './refresh-control.types'

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

@@ -0,0 +1,32 @@
+import { runCallback } from '@mediacubeco/base/utils'
+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'
+
+const RefreshControl = ({ withOffset = true, onRefresh, ...props }: RefreshControlProps) => {
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const { TOP } = useSafeArea()
+  const { COLORS } = useThemeMode()
+
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true)
+
+    await runCallback(onRefresh)
+
+    setIsRefreshing(false)
+  }, [onRefresh])
+
+  return (
+    <NativeRefreshControl
+      refreshing={isRefreshing}
+      onRefresh={handleRefresh}
+      progressViewOffset={withOffset ? TOP : 0}
+      tintColor={COLORS.TYPOGRAPHY.PRIMARY}
+      {...props}
+    />
+  )
+}
+
+export default RefreshControl

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

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

package/src/shared/ui/organisms/index.ts

@@ -0,0 +1 @@
+export const organisms = {}

package/src/shared/ui/templates/index.ts

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

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

@@ -0,0 +1,12 @@
+export { default as ScreenContainerScroll } from './screen-container-scroll'
+export { default as ScreenContainerList } from './screen-container-list'
+export { default as ScreenContainerSectionList } from './screen-container-section-list'
+export type {
+  ScreenContainerListProps,
+  ScreenContainerScrollProps,
+  ScreenContainerSectionListProps,
+  ScreenContainerListRenderItemInfo,
+  ScreenContainerSectionListRenderItemInfo,
+  ScreenContainerSectionListRenderHeaderInfo,
+  ScreenContainerSectionListRenderFooterInfo,
+} from './screen-container.types'

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

@@ -0,0 +1,23 @@
+import { FlatList, View } from 'react-native'
+import { useScreenContainerProps } from './screen-container.hooks'
+import { ScreenContainerListProps } from './screen-container.types'
+
+const ScreenContainerList = <Item,>(props: ScreenContainerListProps<Item>) => {
+  const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...flatListProps } =
+    useScreenContainerProps<ScreenContainerListProps<Item>>(props)
+
+  return (
+    <View style={wrapperStyle}>
+      {header}
+      <FlatList
+        ref={reference}
+        style={outerStyle}
+        contentContainerStyle={innerStyle}
+        {...flatListProps}
+      />
+      {footer}
+    </View>
+  )
+}
+
+export default ScreenContainerList

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

@@ -0,0 +1,23 @@
+import { ScrollView, View } from 'react-native'
+import { useScreenContainerProps } from './screen-container.hooks'
+import { ScreenContainerScrollProps } from './screen-container.types'
+
+const ScreenContainerScroll = (props: ScreenContainerScrollProps) => {
+  const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...scrollViewProps } =
+    useScreenContainerProps<ScreenContainerScrollProps>(props)
+
+  return (
+    <View style={wrapperStyle}>
+      {header}
+      <ScrollView
+        ref={reference}
+        style={outerStyle}
+        contentContainerStyle={innerStyle}
+        {...scrollViewProps}
+      />
+      {footer}
+    </View>
+  )
+}
+
+export default ScreenContainerScroll

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

@@ -0,0 +1,24 @@
+import { SectionList, View } from 'react-native'
+import { useScreenContainerProps } from './screen-container.hooks'
+import { ScreenContainerSectionListProps } from './screen-container.types'
+
+const ScreenContainerSectionList = <Item,>(props: ScreenContainerSectionListProps<Item>) => {
+  const { reference, header, footer, wrapperStyle, outerStyle, innerStyle, ...sectionListProps } =
+    useScreenContainerProps<ScreenContainerSectionListProps<Item>>(props)
+
+  return (
+    <View style={wrapperStyle}>
+      {header}
+      <SectionList
+        ref={reference}
+        style={outerStyle}
+        contentContainerStyle={innerStyle}
+        stickySectionHeadersEnabled={false}
+        {...sectionListProps}
+      />
+      {footer}
+    </View>
+  )
+}
+
+export default ScreenContainerSectionList