@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/src/shared/ui/atoms/touch/touch.tsx

@@ -0,0 +1,137 @@
+import { runCallback } from '@mediacubeco/base/utils'
+import { useCallback, useRef } from 'react'
+import { type GestureResponderEvent, Pressable } from 'react-native'
+import Animated from 'react-native-reanimated'
+import {
+  Haptics,
+  type HapticsRef,
+  Ripple,
+  type RippleRef,
+  Spring,
+  type SpringRef,
+} from './components'
+import { useTouchStyles } from './touch.styles'
+import { type TouchProps } from './touch.types'
+
+const Touch = ({
+  ref,
+  style,
+  children,
+  isDisabled = false,
+  withHaptics = false,
+  withSpring = false,
+  withRipple = false,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+}: TouchProps) => {
+  const rippleRef = useRef<RippleRef>(null)
+  const springRef = useRef<SpringRef>(null)
+  const hapticsRef = useRef<HapticsRef>(null)
+  const { styles } = useTouchStyles()
+
+  const handlePress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (withHaptics) {
+        hapticsRef.current?.hapticsIn(event)
+      }
+
+      runCallback(onPress, event)
+    },
+    [withHaptics, onPress]
+  )
+
+  const handlePressIn = useCallback(
+    (event: GestureResponderEvent) => {
+      if (withSpring) {
+        springRef.current?.springIn(event)
+      }
+
+      if (withRipple) {
+        rippleRef.current?.rippleIn(event)
+      }
+
+      runCallback(onPressIn, event)
+    },
+    [withSpring, withRipple, onPressIn]
+  )
+
+  const handlePressOut = useCallback(
+    (event: GestureResponderEvent) => {
+      if (withSpring) {
+        springRef.current?.springOut(event)
+      }
+
+      if (withRipple) {
+        rippleRef.current?.rippleOut(event)
+      }
+
+      runCallback(onPressOut, event)
+    },
+    [withSpring, withRipple, onPressOut]
+  )
+
+  const handleLongPress = useCallback(
+    (event: GestureResponderEvent) => {
+      hapticsRef.current?.hapticsIn(event)
+
+      runCallback(onLongPress, event)
+    },
+    [onLongPress]
+  )
+
+  const renderWrapper = useCallback(
+    (children: TouchProps['children'], wrapperStyle?: TouchProps['style']) => {
+      return <Animated.View style={[styles.touch, style, wrapperStyle]}>{children}</Animated.View>
+    },
+    [styles.touch, style]
+  )
+
+  const renderPress = useCallback(() => {
+    return (
+      <Pressable
+        ref={ref}
+        style={styles.press}
+        disabled={isDisabled}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onLongPress={handleLongPress}
+      />
+    )
+  }, [styles.press, ref, isDisabled, handlePress, handlePressIn, handlePressOut, handleLongPress])
+
+  if (withHaptics) {
+    return (
+      <Haptics ref={hapticsRef} renderWrapper={renderWrapper} renderPress={renderPress}>
+        {children}
+      </Haptics>
+    )
+  }
+
+  if (withSpring) {
+    return (
+      <Spring ref={springRef} renderWrapper={renderWrapper} renderPress={renderPress}>
+        {children}
+      </Spring>
+    )
+  }
+
+  if (withRipple) {
+    return (
+      <Ripple ref={rippleRef} renderWrapper={renderWrapper} renderPress={renderPress}>
+        {children}
+      </Ripple>
+    )
+  }
+
+  return renderWrapper(
+    <>
+      {children}
+      {renderPress()}
+    </>
+  )
+}
+
+export default Touch

package/src/shared/ui/atoms/touch/touch.types.ts

@@ -0,0 +1,27 @@
+import { type Ref } from 'react'
+import { type PressableProps, type View, type ViewProps } from 'react-native'
+
+type TouchProps = Pick<PressableProps, 'onPress' | 'onPressIn' | 'onPressOut' | 'onLongPress'> & {
+  ref?: Ref<View>
+  style?: ViewProps['style'] // StyleProp<AnimatedStyle<ViewStyle>>
+  children?: ViewProps['children']
+  isDisabled?: boolean
+} & (
+    | {
+        withHaptics?: boolean
+        withSpring?: never
+        withRipple?: never
+      }
+    | {
+        withHaptics?: never
+        withSpring?: boolean
+        withRipple?: never
+      }
+    | {
+        withHaptics?: never
+        withSpring?: never
+        withRipple?: boolean
+      }
+  )
+
+export type { TouchProps }

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

@@ -0,0 +1,2 @@
+export { default as Visibility } from './visibility'
+export type { VisibilityRef, VisibilityProps } from './visibility.types'

package/src/shared/ui/atoms/visibility/visibility.styles.ts

@@ -0,0 +1,85 @@
+import { DEFAULT_LAYOUT, useLayout } from '@mediacubeco/base-react-native/hooks'
+import { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+import { interpolate, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
+import { useComposeSharedValue } from '../../../hooks'
+import { useThemeMode } from '../../../lib'
+import { type VisibilityStylesContext } from './visibility.types'
+
+const useVisibilityStyles = ({
+  visibility: initVisibility,
+  isVisible,
+}: VisibilityStylesContext) => {
+  const { ANIMATIONS } = useThemeMode()
+  const visibility = useComposeSharedValue(initVisibility, isVisible ? 1 : 0)
+  const wrapperLayout = useSharedValue(DEFAULT_LAYOUT)
+  const handleWrapperShadowLayout = useLayout({ setLayout: wrapperLayout.set })
+
+  const handleShow = useCallback(() => {
+    visibility.set(withSpring(1, ANIMATIONS.SPRING.BASE))
+  }, [visibility, ANIMATIONS.SPRING.BASE])
+
+  const handleHide = useCallback(() => {
+    visibility.set(withSpring(0, ANIMATIONS.SPRING.BASE))
+  }, [visibility, ANIMATIONS.SPRING.BASE])
+
+  const handleToggle = useCallback(() => {
+    if (visibility.value) {
+      handleHide()
+    } else {
+      handleShow()
+    }
+  }, [visibility, handleHide, handleShow])
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      overflow: 'hidden',
+    },
+    wrapperShadow: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      opacity: 0,
+    },
+    content: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+    },
+  })
+
+  const animatedStyles = {
+    wrapper: {},
+  }
+
+  const animatedStylesByVariant = {
+    base: useAnimatedStyle(() => {
+      return {
+        height: interpolate(visibility.value, [0, 1], [0, wrapperLayout.value.height]),
+        opacity: interpolate(
+          visibility.value,
+          [0, 0.2, 0.4, 0.6, 0.8, 1],
+          [0, 0, 0.5, 0.5, 0.5, 1, 1]
+        ),
+      }
+    }),
+    simple: useAnimatedStyle(() => {
+      return {
+        height: wrapperLayout.value.height,
+        opacity: interpolate(visibility.value, [0, 1], [0, 1]),
+      }
+    }),
+  }
+
+  return {
+    styles,
+    animatedStyles,
+    animatedStylesByVariant,
+    handleWrapperShadowLayout,
+    handleShow,
+    handleHide,
+    handleToggle,
+  }
+}
+
+export { useVisibilityStyles }

package/src/shared/ui/atoms/visibility/visibility.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useImperativeHandle } from 'react'
+import { View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useVisibilityStyles } from './visibility.styles'
+import { type VisibilityProps } from './visibility.types'
+
+/** Обёртка, плавно показывающая и скрывающая children через scale + opacity. */
+const Visibility = ({
+  ref,
+  shadowRef,
+  style,
+  children,
+  visibility,
+  variant = 'base',
+  isVisible = false,
+}: VisibilityProps) => {
+  const {
+    styles,
+    animatedStyles,
+    animatedStylesByVariant,
+    handleWrapperShadowLayout,
+    handleShow,
+    handleHide,
+    handleToggle,
+  } = useVisibilityStyles({ visibility, isVisible })
+
+  useEffect(() => {
+    if (isVisible) {
+      handleShow()
+    } else {
+      handleHide()
+    }
+  }, [isVisible, handleShow, handleHide])
+
+  useImperativeHandle(ref, () => {
+    return {
+      show: handleShow,
+      hide: handleHide,
+      toggle: handleToggle,
+    }
+  }, [handleShow, handleHide, handleToggle])
+
+  return (
+    <>
+      <Animated.View
+        style={[styles.wrapper, animatedStyles.wrapper, animatedStylesByVariant[variant], style]}
+      >
+        <View style={styles.content}>{children}</View>
+      </Animated.View>
+      <View
+        ref={shadowRef}
+        style={[styles.wrapperShadow, style]}
+        onLayout={handleWrapperShadowLayout}
+      >
+        {children}
+      </View>
+    </>
+  )
+}
+
+export default Visibility

package/src/shared/ui/atoms/visibility/visibility.types.ts

@@ -0,0 +1,34 @@
+import { type Noop } from '@mediacubeco/base/types'
+import { type ReactNode, type Ref } from 'react'
+import { type View, type ViewProps } from 'react-native'
+import { type SharedValue } from 'react-native-reanimated'
+
+type VisibilityRef = {
+  show: Noop
+  hide: Noop
+  toggle: Noop
+}
+
+/** Пропсы Visibility: управляют показом и скрытием обёрнутого содержимого. */
+type VisibilityProps = {
+  ref?: Ref<VisibilityRef>
+  shadowRef?: Ref<View>
+  style?: ViewProps['style']
+  children?: ReactNode
+  variant?: 'base' | 'simple'
+} & (
+  | {
+      visibility?: SharedValue<number>
+      isVisible?: never
+    }
+  | {
+      visibility?: never
+      isVisible?: boolean
+    }
+)
+
+/** Контекст стилей Visibility, выводится из управляющего флага видимости. */
+type VisibilityStylesContext = Required<Pick<VisibilityProps, 'isVisible'>> &
+  Pick<VisibilityProps, 'visibility'> & {}
+
+export type { VisibilityRef, VisibilityProps, VisibilityStylesContext }

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

@@ -1,19 +1,21 @@
 import { useAnimatedKeyboard } from 'react-native-keyboard-controller'
-import { useAnimated, useAnimatedStyle, useSafeArea } from '../../../hooks'
+import { useAnimatedStyle } from 'react-native-reanimated'
+import { useNavigationSafeArea } from '../../../lib'
 
 const useKeyboardAreaStyles = () => {
-  const { FOOTER } = useSafeArea()
   const { height } = useAnimatedKeyboard()
-  const [safeAreaHeight] = useAnimated(FOOTER)
+  const { BOTTOM } = useNavigationSafeArea()
 
-  const keyboardAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      height: height.value - safeAreaHeight.value,
-    }
-  })
+  const animatedStyles = {
+    keyboard: useAnimatedStyle(() => {
+      return {
+        height: height.value - BOTTOM,
+      }
+    }, [BOTTOM]),
+  }
 
   return {
-    keyboardAnimatedStyle,
+    animatedStyles,
   }
 }
 

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

@@ -1,14 +1,11 @@
-import { View } from 'react-native'
-import { animate } from '../../../hooks'
+import Animated from 'react-native-reanimated'
 import { useKeyboardAreaStyles } from './keyboard-area.styles'
 import { type KeyboardAreaProps } from './keyboard-area.types'
 
-const KeyboardAnimatedArea = animate(View)
-
 const KeyboardArea = ({}: KeyboardAreaProps) => {
-  const { keyboardAnimatedStyle } = useKeyboardAreaStyles()
+  const { animatedStyles } = useKeyboardAreaStyles()
 
-  return <KeyboardAnimatedArea style={keyboardAnimatedStyle} />
+  return <Animated.View style={animatedStyles.keyboard} />
 }
 
 export default KeyboardArea

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

@@ -1,13 +1,11 @@
 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 { type RefreshControlProps } from './refresh-control.types'
 
-const RefreshControl = ({ withOffset = true, onRefresh, ...props }: RefreshControlProps) => {
+const RefreshControl = ({ offset, onRefresh, ...props }: RefreshControlProps) => {
   const [isRefreshing, setIsRefreshing] = useState(false)
-  const { TOP } = useSafeArea()
   const { COLORS } = useThemeMode()
 
   const handleRefresh = useCallback(async () => {
@@ -20,10 +18,10 @@ const RefreshControl = ({ withOffset = true, onRefresh, ...props }: RefreshContr
 
   return (
     <NativeRefreshControl
+      tintColor={COLORS.TYPOGRAPHY.PRIMARY}
+      progressViewOffset={offset}
       refreshing={isRefreshing}
       onRefresh={handleRefresh}
-      progressViewOffset={withOffset ? TOP : 0}
-      tintColor={COLORS.TYPOGRAPHY.PRIMARY}
       {...props}
     />
   )

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

@@ -1,5 +1,5 @@
 type RefreshControlProps = {
-  withOffset: boolean
+  offset?: number
   onRefresh: () => unknown | Promise<unknown>
 }
 

package/src/shared/ui/molecules/slider/components/indicator/components/dot/dot.styles.ts

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native'
+import { clamp, interpolate, interpolateColor, useAnimatedStyle } from 'react-native-reanimated'
+import { useThemeMode } from '../../../../../../../lib'
+import { type DotStylesContext } from './dot.types'
+
+/**
+ * Визуальная модель точки индикатора: статичная геометрия «пилюли» плюс ширина и цвет,
+ * плавно завязанные на прогресс скролла слайдера. Активность точки — близость её слайда
+ * к текущему смещению: активная растягивается и подсвечивается, соседние сжимаются и гаснут.
+ */
+const useDotStyles = ({ index, scrollX, itemWidth }: DotStylesContext) => {
+  const { SIZES, COLORS } = useThemeMode()
+
+  const DOT_SIZE = SIZES['L']
+  const DOT_ACTIVE_WIDTH = SIZES['4XL']
+
+  const styles = StyleSheet.create({
+    dot: {
+      height: DOT_SIZE,
+      borderRadius: SIZES['M'],
+    },
+  })
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const progress = itemWidth.value > 0 ? scrollX.value / itemWidth.value : 0
+    const activeness = clamp(1 - Math.abs(progress - index), 0, 1)
+
+    return {
+      width: interpolate(activeness, [0, 1], [DOT_SIZE, DOT_ACTIVE_WIDTH]),
+      backgroundColor: interpolateColor(
+        activeness,
+        [0, 1],
+        [COLORS.FILL.CONTRAST_HALF, COLORS.FILL.CONTRAST]
+      ),
+    }
+  })
+
+  return { styles, animatedStyle }
+}
+
+export { useDotStyles }

package/src/shared/ui/molecules/slider/components/indicator/components/dot/dot.tsx

@@ -0,0 +1,12 @@
+import Animated from 'react-native-reanimated'
+import { useDotStyles } from './dot.styles'
+import { type DotProps } from './dot.types'
+
+/** Одна точка индикатора-«пилюли»: расширяется и подсвечивается по мере приближения своего слайда. */
+const Dot = ({ index, scrollX, itemWidth }: DotProps) => {
+  const { styles, animatedStyle } = useDotStyles({ index, scrollX, itemWidth })
+
+  return <Animated.View style={[styles.dot, animatedStyle]} />
+}
+
+export default Dot

package/src/shared/ui/molecules/slider/components/indicator/components/dot/dot.types.ts

@@ -0,0 +1,13 @@
+import { type SharedValue } from 'react-native-reanimated'
+
+/** Пропсы одной точки индикатора: её позиция в ряду и общий прогресс скролла слайдера. */
+type DotProps = {
+  index: number
+  scrollX: SharedValue<number>
+  itemWidth: SharedValue<number>
+}
+
+/** Контекст стиль-хука точки — совпадает с её пропсами. */
+type DotStylesContext = DotProps
+
+export type { DotProps, DotStylesContext }

package/src/shared/ui/molecules/slider/components/indicator/components/dot/index.ts

@@ -0,0 +1,2 @@
+export { default as Dot } from './dot'
+export type { DotProps } from './dot.types'

package/src/shared/ui/molecules/slider/components/indicator/index.ts

@@ -0,0 +1,2 @@
+export { default as Indicator } from './indicator'
+export type { IndicatorProps } from './indicator.types'

package/src/shared/ui/molecules/slider/components/indicator/indicator.styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '../../../../../lib'
+
+/** Визуальная модель индикатора: горизонтальный ряд точек по центру с равными промежутками. */
+const useIndicatorStyles = () => {
+  const { SIZES } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: SIZES['M'],
+    },
+  })
+
+  return { styles }
+}
+
+export { useIndicatorStyles }

package/src/shared/ui/molecules/slider/components/indicator/indicator.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import { View } from 'react-native'
+import { Dot } from './components/dot'
+import { useIndicatorStyles } from './indicator.styles'
+import { type IndicatorProps } from './indicator.types'
+
+/** Индикатор текущего слайда: ряд точек, где активная плавно расширяется в «пилюлю» вслед за скроллом. */
+const Indicator = ({ itemCount, scrollX, itemWidth }: IndicatorProps) => {
+  const { styles } = useIndicatorStyles()
+
+  const dotList = useMemo(() => Array.from({ length: itemCount }, (_, index) => index), [itemCount])
+
+  return (
+    <View style={styles.wrapper}>
+      {dotList.map((index) => (
+        <Dot key={index} index={index} scrollX={scrollX} itemWidth={itemWidth} />
+      ))}
+    </View>
+  )
+}
+
+export default Indicator

package/src/shared/ui/molecules/slider/components/indicator/indicator.types.ts

@@ -0,0 +1,10 @@
+import { type SharedValue } from 'react-native-reanimated'
+
+/** Пропсы индикатора слайдов: число точек и общий прогресс скролла слайдера с шириной слайда. */
+type IndicatorProps = {
+  itemCount: number
+  scrollX: SharedValue<number>
+  itemWidth: SharedValue<number>
+}
+
+export type { IndicatorProps }

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

@@ -0,0 +1,3 @@
+export { Indicator, type IndicatorProps } from './components/indicator'
+export { default as Slider } from './slider'
+export type { SliderRef, SliderProps } from './slider.types'

package/src/shared/ui/molecules/slider/slider.styles.ts

@@ -0,0 +1,68 @@
+import { DEFAULT_LAYOUT, useLayout } from '@mediacubeco/base-react-native/hooks'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import { useNavigationDimensions } from '../../../lib'
+import { type SliderStylesContext } from './slider.types'
+
+const useSliderStyles = ({
+  itemCount,
+  itemWidth,
+  itemGap,
+  sliderItemWidth,
+  sliderItemGap,
+}: SliderStylesContext) => {
+  const [wrapperLayout, setLayout] = useState(DEFAULT_LAYOUT)
+  const { WIDTH } = useNavigationDimensions()
+  const handleWrapperLayout = useLayout({ setLayout })
+
+  const SLIDER_ITEM_WIDTH = itemWidth ?? wrapperLayout.width
+  const SLIDER_ITEM_GAP = itemGap ?? (WIDTH - SLIDER_ITEM_WIDTH) / 2
+
+  const styles = StyleSheet.create({
+    wrapper: {},
+    content: {
+      overflow: 'visible',
+    },
+    container: {
+      gap: SLIDER_ITEM_GAP,
+    },
+    item: {
+      width: SLIDER_ITEM_WIDTH,
+    },
+  })
+
+  const snapToOffsets = useMemo(() => {
+    return Array.from(
+      { length: itemCount },
+      (_, index) => index * (SLIDER_ITEM_WIDTH + SLIDER_ITEM_GAP)
+    )
+  }, [itemCount, SLIDER_ITEM_WIDTH, SLIDER_ITEM_GAP])
+
+  const getItemLayout = useCallback(
+    (_: unknown, index: number) => ({
+      length: SLIDER_ITEM_WIDTH,
+      offset: (SLIDER_ITEM_WIDTH + SLIDER_ITEM_GAP) * index,
+      index,
+    }),
+    [SLIDER_ITEM_WIDTH, SLIDER_ITEM_GAP]
+  )
+
+  useEffect(() => {
+    if (sliderItemWidth) {
+      sliderItemWidth.set(SLIDER_ITEM_WIDTH)
+    }
+
+    if (sliderItemGap) {
+      sliderItemGap.set(SLIDER_ITEM_GAP)
+    }
+  }, [sliderItemWidth, sliderItemGap, SLIDER_ITEM_WIDTH, SLIDER_ITEM_GAP])
+
+  return {
+    styles,
+    snapToOffsets,
+    getItemLayout,
+    handleWrapperLayout,
+  }
+}
+
+export { useSliderStyles }