@mediacubeco/expo-template-fsd 2.3.0 → 2.4.0

package/src/shared/ui/organisms/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/organisms/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/organisms/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/organisms/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/organisms/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/organisms/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/organisms/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/organisms/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/organisms/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 }

package/src/shared/ui/organisms/slider/slider.tsx

@@ -0,0 +1,64 @@
+import { runCallback } from '@mediacubeco/base/utils'
+import { useCallback } from 'react'
+import { type ListRenderItem, View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useSliderStyles } from './slider.styles'
+import { type SliderProps } from './slider.types'
+
+const Slider = <Item,>({
+  ref,
+  style,
+  data = [],
+  itemWidth,
+  itemGap,
+  sliderItemWidth,
+  sliderItemGap,
+  onScroll,
+  onScrollBeginDrag,
+  onMomentumScrollEnd,
+  renderItem: inputRenderItem,
+}: SliderProps<Item>) => {
+  const itemCount = data.length
+
+  const { styles, snapToOffsets, getItemLayout, handleWrapperLayout } = useSliderStyles({
+    itemCount,
+    itemWidth,
+    itemGap,
+    sliderItemWidth,
+    sliderItemGap,
+  })
+
+  const renderItem: ListRenderItem<Item> = useCallback(
+    ({ item, index, separators }) => {
+      return (
+        <View style={styles.item}>{runCallback(inputRenderItem, { item, index, separators })}</View>
+      )
+    },
+    [styles.item, inputRenderItem]
+  )
+
+  return (
+    <View style={[styles.wrapper, style]} onLayout={handleWrapperLayout}>
+      <Animated.FlatList
+        ref={ref}
+        data={data}
+        style={styles.content}
+        contentContainerStyle={styles.container}
+        scrollEventThrottle={16}
+        decelerationRate={'fast'}
+        snapToAlignment={'center'}
+        snapToOffsets={snapToOffsets}
+        horizontal={true}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        onScroll={onScroll}
+        onScrollBeginDrag={onScrollBeginDrag}
+        onMomentumScrollEnd={onMomentumScrollEnd}
+        getItemLayout={getItemLayout}
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}
+
+export default Slider

package/src/shared/ui/organisms/slider/slider.types.ts

@@ -0,0 +1,28 @@
+import { type FlatListProps, type ListRenderItem, type ViewProps } from 'react-native'
+import type Animated from 'react-native-reanimated'
+import { type AnimatedProps, type AnimatedRef, type SharedValue } from 'react-native-reanimated'
+
+type SliderRef = Animated.FlatList
+
+type SliderProps<Item = unknown> = {
+  ref?: AnimatedRef<SliderRef>
+  style?: ViewProps['style']
+  data: Item[]
+  itemWidth?: number
+  itemGap?: number
+  sliderItemWidth?: SharedValue<number>
+  sliderItemGap?: SharedValue<number>
+  onScroll?: AnimatedProps<FlatListProps<Item>>['onScroll']
+  onScrollBeginDrag?: FlatListProps<Item>['onScrollBeginDrag']
+  onMomentumScrollEnd?: FlatListProps<Item>['onMomentumScrollEnd']
+  renderItem: ListRenderItem<Item>
+}
+
+type SliderStylesContext = Pick<
+  SliderProps,
+  'itemWidth' | 'itemGap' | 'sliderItemWidth' | 'sliderItemGap'
+> & {
+  itemCount: number
+}
+
+export type { SliderRef, SliderProps, SliderStylesContext }

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

@@ -1 +1,4 @@
+export * from './modal-container'
 export * from './screen-container'
+export * from './screen-header'
+export * from './web-container'

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

@@ -0,0 +1,13 @@
+export { default as ModalContainerList } from './modal-container-list'
+export { default as ModalContainerScroll } from './modal-container-scroll'
+export { default as ModalContainerSectionList } from './modal-container-section-list'
+export type {
+  ModalContainerScrollProps,
+  ModalContainerListProps,
+  ModalContainerSectionListProps,
+  ModalContainerListRenderItemInfo,
+  ModalContainerSectionListRenderItemInfo,
+  ModalContainerSectionListRenderHeaderInfo,
+} from './modal-container.types'
+
+// TODO: extends of screen-container

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

@@ -0,0 +1,45 @@
+import { FlatList, View } from 'react-native'
+import { useModalContainerProps } from './modal-container.hooks'
+import { type ModalContainerListProps } from './modal-container.types'
+
+/**
+ * Контейнер модалки поверх FlatList: список облегает контент и скроллится при переполнении.
+ * Высота списка задаётся явно (`bodyHeight` = `min(контент, MAX)`), поэтому короткий список
+ * облегается, а длинный упирается в максимум и виртуализируется. Шапка и футер — абсолютные
+ * оверлеи с блюром поверх списка, поэтому элементы плавно уходят под них.
+ */
+const ModalContainerList = <Item,>(props: ModalContainerListProps<Item>) => {
+  const {
+    ref,
+    header,
+    footer,
+    scrollGuard,
+    isOverflow: _isOverflow,
+    bodyHeight,
+    bottomOffset: _bottomOffset,
+    handleContentLayout: _handleContentLayout,
+    handleContentSizeChange,
+    wrapperStyle,
+    bodyStyle: _bodyStyle,
+    outerStyle,
+    innerStyle,
+    ...flatListProps
+  } = useModalContainerProps<ModalContainerListProps<Item>>(props)
+
+  return (
+    <View style={wrapperStyle}>
+      {scrollGuard}
+      <FlatList
+        ref={ref}
+        style={[{ height: bodyHeight }, outerStyle]}
+        contentContainerStyle={innerStyle}
+        onContentSizeChange={handleContentSizeChange}
+        {...flatListProps}
+      />
+      {header}
+      {footer}
+    </View>
+  )
+}
+
+export default ModalContainerList

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

@@ -0,0 +1,66 @@
+import { type ReactNode, type Ref } from 'react'
+import { type ScrollView, type ScrollViewProps, View } from 'react-native'
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
+import { useModalContainerProps } from './modal-container.hooks'
+import { type ModalContainerScrollProps } from './modal-container.types'
+
+/**
+ * Тело скролл-варианта — `KeyboardAwareScrollView`: доскролливает сфокусированный инпут выше
+ * клавиатуры и приподнятого футера (`bottomOffset`) и добавляет ghost-отступ снизу, чтобы
+ * контент за клавиатурой оставался досягаемым. Окно formSheet не ресайзится ни на одной из
+ * платформ (лист сдвигает система), поэтому обе живут на клавиатурных событиях
+ * keyboard-controller.
+ */
+const ScrollBody = KeyboardAwareScrollView as (
+  props: ScrollViewProps & { ref?: Ref<ScrollView>; bottomOffset?: number }
+) => ReactNode
+
+/**
+ * Контейнер модалки со скроллом: короткий контент облегается плоской `View`, длинный
+ * скроллится внутри `ScrollView`. Шапка и футер — абсолютные оверлеи с блюром поверх тела,
+ * поэтому контент плавно уходит под них.
+ */
+const ModalContainerScroll = (props: ModalContainerScrollProps) => {
+  const {
+    ref,
+    header,
+    footer,
+    scrollGuard,
+    isOverflow,
+    bodyHeight: _bodyHeight,
+    bottomOffset,
+    handleContentLayout,
+    handleContentSizeChange: _handleContentSizeChange,
+    wrapperStyle,
+    bodyStyle,
+    outerStyle,
+    innerStyle,
+    children,
+    ...scrollViewProps
+  } = useModalContainerProps<ModalContainerScrollProps>(props)
+
+  return (
+    <View style={wrapperStyle}>
+      {scrollGuard}
+      {isOverflow ? (
+        <ScrollBody
+          ref={ref}
+          style={[bodyStyle, outerStyle]}
+          contentContainerStyle={innerStyle}
+          bottomOffset={bottomOffset}
+          {...scrollViewProps}
+        >
+          {children}
+        </ScrollBody>
+      ) : (
+        <View style={innerStyle} collapsable={false} onLayout={handleContentLayout}>
+          {children}
+        </View>
+      )}
+      {header}
+      {footer}
+    </View>
+  )
+}
+
+export default ModalContainerScroll

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

@@ -0,0 +1,46 @@
+import { SectionList, View } from 'react-native'
+import { useModalContainerProps } from './modal-container.hooks'
+import { type ModalContainerSectionListProps } from './modal-container.types'
+
+/**
+ * Контейнер модалки поверх SectionList: секции облегают контент и скроллятся при переполнении.
+ * Высота списка задаётся явно (`bodyHeight` = `min(контент, MAX)`), поэтому короткие секции
+ * облегаются, а длинные упираются в максимум и виртуализируются. Шапка и футер — абсолютные
+ * оверлеи с блюром поверх списка, поэтому элементы плавно уходят под них.
+ */
+const ModalContainerSectionList = <Item,>(props: ModalContainerSectionListProps<Item>) => {
+  const {
+    ref,
+    header,
+    footer,
+    scrollGuard,
+    isOverflow: _isOverflow,
+    bodyHeight,
+    bottomOffset: _bottomOffset,
+    handleContentLayout: _handleContentLayout,
+    handleContentSizeChange,
+    wrapperStyle,
+    bodyStyle: _bodyStyle,
+    outerStyle,
+    innerStyle,
+    ...sectionListProps
+  } = useModalContainerProps<ModalContainerSectionListProps<Item>>(props)
+
+  return (
+    <View style={wrapperStyle}>
+      {scrollGuard}
+      <SectionList
+        ref={ref}
+        style={[{ height: bodyHeight }, outerStyle]}
+        contentContainerStyle={innerStyle}
+        onContentSizeChange={handleContentSizeChange}
+        stickySectionHeadersEnabled={false}
+        {...sectionListProps}
+      />
+      {header}
+      {footer}
+    </View>
+  )
+}
+
+export default ModalContainerSectionList

package/src/shared/ui/templates/modal-container/modal-container.hooks.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useMemo, useState } from 'react'
+import { type LayoutChangeEvent, useWindowDimensions, View } from 'react-native'
+import { useAnimatedKeyboard } from 'react-native-keyboard-controller'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import { LinearGradient } from 'expo-linear-gradient'
+import { BlurProgress } from '../../atoms'
+import { useModalContainerStyles } from './modal-container.styles'
+import {
+  type ModalContainerListProps,
+  type ModalContainerScrollProps,
+  type ModalContainerSectionListProps,
+} from './modal-container.types'
+
+/**
+ * Собирает общие пропсы для всех вариантов контейнера модалки. Шапка и футер — абсолютные
+ * оверлеи с прогрессивным блюром (`BlurProgress`): контент скроллится под ними и плавно
+ * растворяется у краёв. Тело отступает от краёв на замеренные высоты оверлеев
+ * (`paddingTop`/`paddingBottom`), поэтому крайние элементы не прячутся под шапкой/футером.
+ * Высоты шапки и футера снимаются через `onLayout`, высота контента — через `onLayout`
+ * плоского тела (скролл-вариант) или `onContentSizeChange` списка. Пока контент помещается в
+ * `MAX_SHEET_HEIGHT`, тело облегает его; когда выше — включается `isOverflow`: враппер
+ * фиксируется по высоте (`wrapperCapped`), тело начинает скроллиться. Нижний отступ — из
+ * сырого safe-area, без таб-бар-логики `useNavigationSafeArea`. Поверх блюра оверлеев лежит градиент
+ * цвета фона, растворяющий контент у кромок листа. Клавиатура: лист целиком сдвигает система
+ * (UIKit на iOS, транслейт react-native-screens на Android) — вверх до упора в
+ * `SHEET_KEYBOARD_TOP`, — а не поместившийся над клавиатурой остаток листа компенсирует
+ * `footerLiftStyle`, приподнимая футер внутри листа на величину перекрытия (детент при этом
+ * не меняется, иначе его анимация сбивает клавиатурный сдвиг листа и лист
+ * «переоткрывается»). `bottomOffset` — зазор для `KeyboardAwareScrollView` скролл-варианта:
+ * сфокусированный инпут доскролливается выше приподнятого футера. `nestedScrollEnabled`
+ * обязателен: на Android formSheet управляется `BottomSheetBehavior`, и без nested scrolling
+ * он забирает жест «палец вниз» себе — закрывает лист вместо скролла контента вверх.
+ */
+const useModalContainerProps = <
+  Props extends
+    | ModalContainerScrollProps
+    | ModalContainerListProps<any>
+    | ModalContainerSectionListProps<any>,
+>({
+  // omit
+  // @ts-ignore
+  style,
+  // @ts-ignore
+  contentContainerStyle,
+  // native
+  header: initHeader,
+  footer: initFooter,
+  wrapperStyle,
+  outerStyle,
+  innerStyle,
+  ...props
+}: Props) => {
+  const {
+    styles,
+    headerGradientColorList,
+    footerGradientColorList,
+    MAX_SHEET_HEIGHT,
+    SHEET_KEYBOARD_TOP,
+    TOP,
+    BOTTOM,
+  } = useModalContainerStyles()
+
+  const withHeader = !!initHeader
+  const withFooter = !!initFooter
+
+  const [headerHeight, setHeaderHeight] = useState(0)
+  const [footerHeight, setFooterHeight] = useState(0)
+  const [contentHeight, setContentHeight] = useState(0)
+
+  const handleHeaderLayout = useCallback((event: LayoutChangeEvent) => {
+    setHeaderHeight(event.nativeEvent.layout.height)
+  }, [])
+
+  const handleFooterLayout = useCallback((event: LayoutChangeEvent) => {
+    setFooterHeight(event.nativeEvent.layout.height)
+  }, [])
+
+  const handleContentLayout = useCallback((event: LayoutChangeEvent) => {
+    setContentHeight(event.nativeEvent.layout.height)
+  }, [])
+
+  const handleContentSizeChange = useCallback((_width: number, height: number) => {
+    setContentHeight(height)
+  }, [])
+
+  const isOverflow = contentHeight > 0 && contentHeight > MAX_SHEET_HEIGHT
+  const bodyHeight =
+    contentHeight > 0 ? Math.min(contentHeight, MAX_SHEET_HEIGHT) : MAX_SHEET_HEIGHT
+
+  const { height: windowHeight } = useWindowDimensions()
+  const { height: keyboardHeight } = useAnimatedKeyboard()
+
+  const footerLiftStyle = useAnimatedStyle(() => {
+    const overlap = Math.max(
+      0,
+      SHEET_KEYBOARD_TOP + bodyHeight + keyboardHeight.value - windowHeight
+    )
+
+    return { transform: [{ translateY: -overlap }] }
+  }, [SHEET_KEYBOARD_TOP, bodyHeight, windowHeight])
+
+  const contentPadding = {
+    paddingTop: withHeader ? headerHeight : TOP,
+    paddingBottom: withFooter ? footerHeight : BOTTOM,
+  }
+
+  /**
+   * Первый ребёнок враппера — обрывает поиск скролла в react-native-screens: для formSheet
+   * RNS идёт по цепочке первых сабвью и найденному скроллу насильно ставит frame размером с
+   * нативный экран листа (выше видимой области), из-за чего низ контента невозможно
+   * доскроллить. Нулевая вью первой в цепочке прячет скролл от этой «коррекции», и его
+   * размером управляет обычный layout.
+   */
+  const scrollGuard = <View style={styles.scrollGuard} collapsable={false} />
+
+  const header = useMemo(() => {
+    return (
+      initHeader && (
+        <View style={styles.header} collapsable={false} onLayout={handleHeaderLayout}>
+          <BlurProgress direction={'blurredTopClearBottom'} style={styles.blur} />
+          <LinearGradient colors={headerGradientColorList} style={styles.blur} />
+          {initHeader}
+        </View>
+      )
+    )
+  }, [styles.header, styles.blur, headerGradientColorList, initHeader, handleHeaderLayout])
+
+  const footer = useMemo(() => {
+    return (
+      initFooter && (
+        <Animated.View style={[styles.footerShell, footerLiftStyle]} collapsable={false}>
+          <View style={styles.footer} collapsable={false} onLayout={handleFooterLayout}>
+            <BlurProgress direction={'blurredBottomClearTop'} style={styles.blur} />
+            <LinearGradient colors={footerGradientColorList} style={styles.blur} />
+            {initFooter}
+          </View>
+        </Animated.View>
+      )
+    )
+  }, [
+    styles.footerShell,
+    styles.footer,
+    styles.blur,
+    footerGradientColorList,
+    footerLiftStyle,
+    initFooter,
+    handleFooterLayout,
+  ])
+
+  return {
+    ...props,
+    header,
+    footer,
+    scrollGuard,
+    isOverflow,
+    bodyHeight,
+    bottomOffset: footerHeight + BOTTOM,
+    handleContentLayout,
+    handleContentSizeChange,
+    wrapperStyle: [styles.wrapper, isOverflow && styles.wrapperCapped, wrapperStyle],
+    bodyStyle: styles.body,
+    outerStyle,
+    innerStyle: [styles.content, contentPadding, innerStyle],
+    showsVerticalScrollIndicator: false,
+    showsHorizontalScrollIndicator: false,
+    nestedScrollEnabled: true,
+    keyboardDismissMode: 'interactive' as const,
+    keyboardShouldPersistTaps: 'handled' as const,
+  }
+}
+
+export { useModalContainerProps }