@mediacubeco/expo-template-fsd 1.0.0

package/src/app/_splash.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import * as SplashScreen from 'expo-splash-screen'
+import { useFonts } from 'expo-font'
+import { FONTS } from '~shared/assets'
+
+SplashScreen.preventAutoHideAsync()
+
+const Splash = () => {
+  const [isFontLoaded] = useFonts(FONTS)
+
+  const isReady = isFontLoaded
+
+  useEffect(() => {
+    if (isReady) {
+      setTimeout(() => SplashScreen.hideAsync())
+    }
+  }, [isReady])
+
+  return null
+}
+
+export default Splash

package/src/shared/assets/fonts/index.ts

@@ -0,0 +1,7 @@
+const FONTS = {
+  // BASE_MEDIUM: require('./manrope-medium.ttf'),
+  // BASE_SEMIBOLD: require('./manrope-semibold.ttf'),
+  // BASE_BOLD: require('./manrope-bold.ttf'),
+}
+
+export { FONTS }

package/src/shared/assets/icons/index.ts

@@ -0,0 +1,3 @@
+const ICONS = {}
+
+export { ICONS }

package/src/shared/assets/icons/like.tsx

@@ -0,0 +1,17 @@
+import { Path, Svg } from 'react-native-svg'
+import { IconProps } from './type'
+
+const Like = ({ size, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox={'0 0 24 24'} fill={'none'}>
+      <Path
+        d={
+          'M12.0817 17.2109L11.9999 17.2927L11.91 17.2109C8.0272 13.6878 5.46044 11.3581 5.46044 8.99567C5.46044 7.36079 6.6866 6.13463 8.32147 6.13463C9.58033 6.13463 10.8065 6.95207 11.2397 8.06379H12.7602C13.1934 6.95207 14.4196 6.13463 15.6784 6.13463C17.3133 6.13463 18.5395 7.36079 18.5395 8.99567C18.5395 11.3581 15.9727 13.6878 12.0817 17.2109ZM15.6784 4.49976C14.2561 4.49976 12.891 5.16188 11.9999 6.20003C11.1089 5.16188 9.74382 4.49976 8.32147 4.49976C5.80376 4.49976 3.82556 6.46978 3.82556 8.99567C3.82556 12.0774 6.60485 14.6033 10.8147 18.4207L11.9999 19.4998L13.1852 18.4207C17.395 14.6033 20.1743 12.0774 20.1743 8.99567C20.1743 6.46978 18.1961 4.49976 15.6784 4.49976Z'
+        }
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export default Like

package/src/shared/assets/icons/type.ts

@@ -0,0 +1,6 @@
+type IconProps = {
+  size?: number
+  color?: string
+}
+
+export type { IconProps }

package/src/shared/assets/images/index.ts

@@ -0,0 +1,11 @@
+const IMAGES = {
+  LOGO_WEB: require('./logo-web.png'),
+  LOGO_IOS: require('./logo-ios.png'),
+  LOGO_ANDROID_BACKGROUND: require('./logo-android-background.png'),
+  LOGO_ANDROID_FOREGROUND: require('./logo-android-foreground.png'),
+  LOGO_ANDROID_MONOCHROME: require('./logo-android-monochrome.png'),
+  SPLASH: require('./splash.png'),
+  DEFAULT: require('./default.png'),
+}
+
+export { IMAGES }

package/src/shared/assets/index.ts

@@ -0,0 +1,4 @@
+export * from './fonts'
+export * from './icons'
+export * from './images'
+export * from './translations'

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

@@ -0,0 +1,3 @@
+const en = {}
+
+export default en

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

@@ -0,0 +1,9 @@
+import EN from './en'
+import RU from './ru'
+
+const TRANSLATIONS = {
+  EN,
+  RU,
+}
+
+export { TRANSLATIONS }

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

@@ -0,0 +1,3 @@
+const ru = {}
+
+export default ru

package/src/shared/constants/environment.ts

@@ -0,0 +1,13 @@
+const API_URL = process.env.EXPO_PUBLIC_API_URL as `https://${string}`
+
+if (!API_URL || !API_URL.startsWith('https://')) {
+  throw new Error(`API_URL is invalid: ${API_URL}`)
+}
+
+const API_TOKEN = process.env.EXPO_PUBLIC_API_TOKEN
+
+if (!API_TOKEN) {
+  throw new Error(`API_TOKEN is invalid: ${API_TOKEN}`)
+}
+
+export { API_URL, API_TOKEN }

package/src/shared/constants/index.ts

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

package/src/shared/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './use-animated'
+export * from './use-breakpoints'
+export * from './use-mixins'
+export * from './use-safe-area'

package/src/shared/hooks/use-animated.ts

@@ -0,0 +1,194 @@
+import { useCallback } from 'react'
+import {
+  createAnimatedComponent as animate,
+  Extrapolation as AnimatedExtrapolation,
+  cancelAnimation,
+  interpolate as reInterpolate,
+  interpolateColor as reInterpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withClamp,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import { Theme, useThemeMode } from '../lib'
+
+type AnimatedState = string | number
+
+type AnimatedStateRange = string[] | number[]
+
+type AnimatedConfig = {
+  delay?: keyof Theme['DELAYS']
+  duration?: keyof Theme['DURATIONS']
+  repeat?: number
+  clamp?: [min?: AnimatedState, max?: AnimatedState]
+}
+
+const useAnimated = <Value extends AnimatedState = AnimatedState>(
+  initValue: Value,
+  config?: AnimatedConfig
+) => {
+  const value = useSharedValue(initValue)
+  const { DELAYS, DURATIONS } = useThemeMode()
+
+  const {
+    delay: defaultDelay = 'EMPTY',
+    duration: defaultDuration = 'BASE',
+    repeat: defaultRepeat = 1,
+    clamp: defaultCamp = [],
+  } = config ?? {}
+
+  const timing = useCallback(
+    async (newValue: Value, config?: AnimatedConfig) => {
+      const {
+        delay = defaultDelay,
+        duration = defaultDuration,
+        repeat = defaultRepeat,
+        clamp = defaultCamp,
+      } = config ?? {}
+
+      return new Promise((resolve) => {
+        value.value = withDelay(
+          DELAYS[delay],
+          withRepeat(
+            withClamp(
+              { min: clamp[0], max: clamp[1] },
+              withTiming(newValue, { duration: DURATIONS[duration] })
+            ),
+            repeat,
+            false,
+            () => runOnJS(resolve)(undefined)
+          )
+        ) as Value
+      })
+    },
+    [value, defaultDelay, defaultDuration, defaultRepeat, defaultCamp, DELAYS, DURATIONS]
+  )
+
+  const spring = useCallback(
+    async (newValue: Value, config?: AnimatedConfig) => {
+      const {
+        delay = defaultDelay,
+        duration = defaultDuration,
+        repeat = defaultRepeat,
+        clamp = defaultCamp,
+      } = config ?? {}
+
+      return new Promise((resolve) => {
+        value.value = withDelay(
+          DELAYS[delay],
+          withRepeat(
+            withClamp(
+              { min: clamp[0], max: clamp[1] },
+              withSpring(newValue, { duration: DURATIONS[duration] })
+            ),
+            repeat,
+            false,
+            () => runOnJS(resolve)(undefined)
+          ) as Value
+        )
+      })
+    },
+    [value, defaultDelay, defaultDuration, defaultRepeat, defaultCamp, DELAYS, DURATIONS]
+  )
+
+  const sequenceTiming = useCallback(
+    (newValue: Value[], config?: AnimatedConfig) => {
+      const {
+        delay = defaultDelay,
+        duration = defaultDuration,
+        repeat = defaultRepeat,
+        clamp = defaultCamp,
+      } = config ?? {}
+
+      return new Promise((resolve) => {
+        value.value = withDelay(
+          DELAYS[delay],
+          withRepeat(
+            withClamp(
+              { min: clamp[0], max: clamp[1] },
+              withSequence(
+                ...newValue.map((value) => withTiming(value, { duration: DURATIONS[duration] }))
+              )
+            ),
+            repeat,
+            false,
+            () => runOnJS(resolve)(undefined)
+          ) as Value
+        )
+      })
+    },
+    [value, defaultDelay, defaultDuration, defaultRepeat, defaultCamp, DELAYS, DURATIONS]
+  )
+
+  const sequenceSpring = useCallback(
+    (newValue: Value[], config?: AnimatedConfig) => {
+      const {
+        delay = defaultDelay,
+        duration = defaultDuration,
+        repeat = defaultRepeat,
+        clamp = defaultCamp,
+      } = config ?? {}
+
+      return new Promise((resolve) => {
+        value.value = withDelay(
+          DELAYS[delay],
+          withRepeat(
+            withClamp(
+              { min: clamp[0], max: clamp[1] },
+              withSequence(
+                ...newValue.map((value) => withSpring(value, { duration: DURATIONS[duration] }))
+              )
+            ),
+            repeat,
+            false,
+            () => runOnJS(resolve)(undefined)
+          ) as Value
+        )
+      })
+    },
+    [value, defaultDelay, defaultDuration, defaultRepeat, defaultCamp, DELAYS, DURATIONS]
+  )
+
+  const stop = useCallback(() => {
+    'worklet'
+
+    cancelAnimation(value)
+  }, [value])
+
+  const interpolate = useCallback(
+    <Range extends AnimatedStateRange>(
+      range: Range,
+      inputRange?: number[],
+      extrapolation?: AnimatedExtrapolation
+    ): Range[number] => {
+      'worklet'
+
+      const defaultInputRange = range.map((_, index, { length }) => (1 / (length - 1)) * index)
+
+      if (typeof range[0] === 'number') {
+        return reInterpolate(
+          value.value as number,
+          inputRange ?? defaultInputRange,
+          range as number[],
+          extrapolation
+        )
+      } else {
+        return reInterpolateColor(
+          value.value as number,
+          inputRange ?? defaultInputRange,
+          range as string[]
+        )
+      }
+    },
+    [value]
+  )
+
+  return [value, { timing, spring, sequenceTiming, sequenceSpring, stop, interpolate }] as const
+}
+
+export { useAnimated, useAnimatedStyle, animate, AnimatedExtrapolation }

package/src/shared/hooks/use-breakpoints.ts

@@ -0,0 +1,25 @@
+import { useWindowDimensions } from 'react-native'
+
+const useBreakpoints = () => {
+  const { width } = useWindowDimensions()
+
+  return {
+    isXXLMaxBreakpoint: width <= 1999,
+    isXLMaxBreakpoint: width <= 1399,
+    isLMaxBreakpoint: width <= 1199,
+    isMMaxBreakpoint: width <= 991,
+    isSMaxBreakpoint: width <= 767,
+    isXSMaxBreakpoint: width <= 575,
+    isXXLMinBreakpoint: width >= 2000,
+    isXLMinBreakpoint: width >= 1400,
+    isLMinBreakpoint: width >= 1200,
+    isMMinBreakpoint: width >= 992,
+    isSMinBreakpoint: width >= 768,
+    isXSMinBreakpoint: width >= 576,
+  }
+}
+
+type Breakpoints = ReturnType<typeof useBreakpoints>
+
+export { useBreakpoints }
+export type { Breakpoints }

package/src/shared/hooks/use-mixins.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react'
+import { useWindowDimensions } from 'react-native'
+
+const useMixins = () => {
+  const { width, height } = useWindowDimensions()
+
+  /**
+   * @default 1
+   **/
+  const byWindowWidth = useCallback(
+    (value: number = 1) => {
+      return width * value
+    },
+    [width]
+  )
+
+  /**
+   * @default 1
+   **/
+  const byWindowHeight = useCallback(
+    (value: number = 1) => {
+      return height * value
+    },
+    [height]
+  )
+
+  return {
+    byWindowWidth,
+    byWindowHeight,
+  }
+}
+
+type Mixins = ReturnType<typeof useMixins>
+
+export { useMixins }
+export type { Mixins }

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

@@ -0,0 +1,56 @@
+import { Platform } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
+import { useHeaderHeight } from '@react-navigation/elements'
+
+const ANDROID_TAB_BAR_DEFAULT_HEIGHT = 56
+const IOS_TAB_BAR_DEFAULT_HEIGHT = 50
+
+const useNavigationHeaderHeight = (safeArea: number = 0) => {
+  try {
+    const height = useHeaderHeight()
+
+    return Platform.select({
+      android: height ? 0 : safeArea,
+      ios: height || safeArea,
+      default: safeArea,
+    })
+  } catch (_) {
+    return safeArea
+  }
+}
+
+const useNavigationFooterHeight = (safeArea: number = 0) => {
+  try {
+    const height = useBottomTabBarHeight()
+
+    return Platform.select({
+      android: (height || ANDROID_TAB_BAR_DEFAULT_HEIGHT) + safeArea,
+      ios: (height || IOS_TAB_BAR_DEFAULT_HEIGHT) + safeArea,
+      default: safeArea,
+    })
+  } catch (_) {
+    return Platform.select({
+      android: 0,
+      default: safeArea,
+    })
+  }
+}
+
+const useSafeArea = () => {
+  const { top, bottom, left, right } = useSafeAreaInsets()
+  const header = useNavigationHeaderHeight(top)
+  const footer = useNavigationFooterHeight(bottom)
+
+  return {
+    TOP: header,
+    BOTTOM: footer,
+    LEFT: left,
+    RIGHT: right,
+  }
+}
+
+type SafeArea = ReturnType<typeof useSafeArea>
+
+export { useSafeArea }
+export type { SafeArea }

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

@@ -0,0 +1,47 @@
+import { listenAppState } from '@mediacubeco/base-react-native/utils'
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
+import { focusManager, QueryClient } from '@tanstack/react-query'
+import {
+  PersistQueryClientProvider,
+  PersistQueryClientProviderProps,
+} from '@tanstack/react-query-persist-client'
+import { apiAsyncStorage } from './utils'
+import { ApiProviderProps } from './api.types'
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 2,
+      gcTime: 1000 * 60 * 60 * 24,
+    },
+  },
+})
+
+const persistOptions = {
+  maxAge: 1000 * 60 * 60 * 24,
+  dehydrateOptions: {
+    shouldDehydrateQuery: (query) => {
+      return query.state.status === 'success' && query.meta?.persist === true
+    },
+  },
+  persister: createAsyncStoragePersister({
+    storage: apiAsyncStorage,
+    throttleTime: 1000,
+  }),
+} satisfies PersistQueryClientProviderProps['persistOptions']
+
+listenAppState({
+  onChange: (status) => {
+    focusManager.setFocused(status === 'active')
+  },
+})
+
+const ApiProvider = ({ children }: ApiProviderProps) => {
+  return (
+    <PersistQueryClientProvider client={client} persistOptions={persistOptions}>
+      {children}
+    </PersistQueryClientProvider>
+  )
+}
+
+export default ApiProvider

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

@@ -0,0 +1,7 @@
+import { AuthRepository } from './repositories'
+
+class Api {
+  static authRepository = new AuthRepository('/auth')
+}
+
+export { Api }

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

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react'
+
+type ApiResponse<Response = {}> = {
+  data: Partial<Response>
+}
+
+type ApiProviderProps = PropsWithChildren
+
+export type { ApiResponse, ApiProviderProps }

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

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

package/src/shared/lib/api/entities/common.ts

@@ -0,0 +1,28 @@
+import { generateIdFactory } from '../../../utils'
+import { BaseResource } from '../resources'
+
+const generateId = generateIdFactory()
+
+class BaseEntity<Resource extends BaseResource> {
+  protected readonly resource?: Resource
+  protected readonly context?: BaseResource
+
+  id: string
+  createdAt: Date
+  updatedAt: Date
+
+  constructor(resource?: Resource, context?: BaseResource) {
+    this.resource = resource
+    this.context = context
+
+    this.id = resource?.id ?? generateId()
+    this.createdAt = resource?.createdAt ?? new Date()
+    this.updatedAt = resource?.updatedAt ?? new Date()
+  }
+
+  get isPending() {
+    return this.resource?.isPending ?? this.context?.isPending ?? false
+  }
+}
+
+export { BaseEntity }

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

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

package/src/shared/lib/api/hooks/common.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+const useInfinite = <Config extends ReturnType<typeof useInfiniteQuery>, Parsed>(
+  config: Config,
+  parseData: (data: Config['data']) => Parsed
+) => {
+  const { data, hasNextPage, refetch, fetchNextPage, ...restConfig } = config
+
+  const refresh = useCallback(async () => {
+    await refetch()
+  }, [refetch])
+
+  const reach = useCallback(() => {
+    fetchNextPage()
+  }, [fetchNextPage])
+
+  return {
+    data: parseData(data),
+    hasMore: hasNextPage,
+    refresh,
+    reach,
+    //
+    hasNextPage,
+    refetch,
+    fetchNextPage,
+    ...restConfig,
+  }
+}
+
+export { useInfinite }

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

@@ -0,0 +1,4 @@
+export {} from './entities'
+export {} from './resources'
+export {} from './hooks'
+export { default as ApiProvider } from './api.provider'

package/src/shared/lib/api/models/api-instance/api-instance.constants.ts

@@ -0,0 +1,9 @@
+enum ApiInstanceMethod {
+  Get = 'get',
+  Post = 'post',
+  Put = 'put',
+  Patch = 'patch',
+  Delete = 'delete',
+}
+
+export { ApiInstanceMethod }