@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/src/shared/ui/molecules/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/molecules/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/organisms/bar/bar.styles.ts

@@ -0,0 +1,100 @@
+import { DEFAULT_LAYOUT, useLayout } from '@mediacubeco/base-react-native/hooks'
+import { useState } from 'react'
+import { StyleSheet } from 'react-native'
+import {
+  clamp,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+import { useThemeMode } from '../../../lib'
+import { type BarStylesContext } from './bar.types'
+
+const useBarStyles = ({ index, initIndex = 0, itemCount }: BarStylesContext) => {
+  const [wrapperLayout, setLayout] = useState(DEFAULT_LAYOUT)
+  const { SIZES, COLORS, SHADOWS } = useThemeMode()
+  const position = useSharedValue(0)
+  const focus = useSharedValue(0)
+  const defaultIndex = useSharedValue(initIndex)
+  const handleWrapperLayout = useLayout({ setLayout })
+
+  const activeIndex = index ?? defaultIndex
+
+  const BAR_PADDING = SIZES['M']
+  const BAR_GAP = SIZES['M']
+  const BAR_AREA = BAR_PADDING * 2 + BAR_GAP * (itemCount - 1)
+  const BAR_ITEM_WIDTH = (wrapperLayout.width - BAR_AREA) / itemCount
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      overflow: 'visible',
+      padding: BAR_PADDING,
+      borderRadius: SIZES['INFINITY'],
+      backgroundColor: COLORS.BAR.BASE,
+      ...SHADOWS.BASE,
+    },
+    data: {
+      flexDirection: 'row',
+      gap: BAR_GAP,
+    },
+    item: {
+      flex: 1,
+    },
+    indicator: {
+      zIndex: -1,
+      overflow: 'hidden',
+      position: 'absolute',
+      top: SIZES['MIN'],
+      left: SIZES['MIN'],
+      width: BAR_ITEM_WIDTH,
+      height: SIZES['MAX'],
+      borderWidth: SIZES['2XS'],
+      borderRadius: SIZES['INFINITY'],
+      backgroundColor: COLORS.BAR.SECONDARY,
+    },
+  })
+
+  const animatedStyles = {
+    wrapper: useAnimatedStyle(() => {
+      return {
+        transform: [
+          {
+            scale: interpolate(focus.value, [0, 1], [1, 1.05]),
+          },
+        ],
+      }
+    }),
+    indicator: useAnimatedStyle(() => {
+      return {
+        transform: [
+          { translateX: clamp(activeIndex.value, 0, itemCount - 1) * (BAR_ITEM_WIDTH + BAR_GAP) },
+          { scaleX: interpolate(focus.value, [0, 1], [1, 1.2]) },
+          { scaleY: interpolate(focus.value, [0, 1], [1, 1.5]) },
+        ],
+        borderColor: interpolateColor(
+          focus.value,
+          [0, 1],
+          [COLORS.FILL.TRANSPARENT, COLORS.BAR.BASE]
+        ),
+        backgroundColor: interpolateColor(
+          focus.value,
+          [0, 1],
+          [COLORS.BAR.SECONDARY, COLORS.BAR.DISABLED]
+        ),
+      }
+    }),
+  }
+
+  return {
+    BAR_ITEM_WIDTH,
+    activeIndex,
+    position,
+    focus,
+    styles,
+    animatedStyles,
+    handleWrapperLayout,
+  }
+}
+
+export { useBarStyles }

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

@@ -0,0 +1,89 @@
+import { runCallback } from '@mediacubeco/base/utils'
+import { useCallback, useMemo } from 'react'
+import { View } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { withDelay, withTiming } from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+// import { Blur } from '../../atoms'
+import { useBarStyles } from './bar.styles'
+import { type BarProps } from './bar.types'
+
+// const AnimatedBlur = Animated.createAnimatedComponent(Blur)
+
+/**
+ * Горизонтальный бар с перетаскиваемым индикатором активного элемента.
+ * Элементы рендерятся через компонент renderItem — каждый на собственном
+ * fiber, чтобы их хуки не регистрировались на fiber самого бара.
+ */
+const Bar = <Item,>({
+  ref,
+  style,
+  data,
+  index,
+  initIndex = 0,
+  onChange,
+  renderItem: RenderItem,
+}: BarProps<Item>) => {
+  const itemCount = data.length
+
+  const {
+    BAR_ITEM_WIDTH,
+    activeIndex,
+    position,
+    focus,
+    styles,
+    animatedStyles,
+    handleWrapperLayout,
+  } = useBarStyles({ index, initIndex, itemCount })
+
+  const handleChange = useCallback(
+    (index: number) => {
+      runCallback(onChange, index)
+    },
+    [onChange]
+  )
+
+  const panGesture = useMemo(() => {
+    return Gesture.Pan()
+      .onBegin((event) => {
+        position.set(event.x - BAR_ITEM_WIDTH / 2)
+        focus.set(withDelay(50, withTiming(1)))
+        activeIndex.set(withTiming((event.x - BAR_ITEM_WIDTH / 2) / BAR_ITEM_WIDTH))
+      })
+      .onUpdate((event) => {
+        activeIndex.set((event.translationX + position.value) / BAR_ITEM_WIDTH)
+      })
+      .onFinalize((event) => {
+        const currentIndex = Math.round((event.translationX + position.value) / BAR_ITEM_WIDTH)
+        const index = Math.max(0, Math.min(currentIndex, itemCount - 1))
+
+        runOnJS(handleChange)(index)
+
+        focus.set(withDelay(50, withTiming(0)))
+        activeIndex.set(withTiming(index))
+      })
+  }, [BAR_ITEM_WIDTH, itemCount, activeIndex, position, focus, handleChange])
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View
+        ref={ref}
+        style={[styles.wrapper, animatedStyles.wrapper, style]}
+        onLayout={handleWrapperLayout}
+      >
+        <View style={styles.data}>
+          {data.map((item, index) => (
+            <View key={index} style={styles.item}>
+              {RenderItem && (
+                <RenderItem index={index} item={item} data={data} activeIndex={activeIndex} />
+              )}
+            </View>
+          ))}
+          <Animated.View style={[styles.indicator, animatedStyles.indicator]} />
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+export default Bar

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

@@ -0,0 +1,49 @@
+import { type ComponentType, type Ref } from 'react'
+import { type View, type ViewProps } from 'react-native'
+import { type SharedValue } from 'react-native-reanimated'
+
+/** Пропсы элемента бара, передаваемые компоненту renderItem. */
+type BarRenderItemInfo<Item = unknown> = {
+  index: number
+  item: Item
+  data: Item[]
+  activeIndex: SharedValue<number>
+}
+
+/**
+ * Компонент элемента бара. Рендерится как JSX-элемент (не вызывается как функция),
+ * поэтому обязан быть стабильной ссылкой на компонент — иначе элементы будут
+ * перемонтироваться на каждом рендере.
+ */
+type BarRenderItem<Item = unknown> = ComponentType<BarRenderItemInfo<Item>>
+
+type BarOnChange = (index: number) => void
+
+type BarProps<Item = unknown> = {
+  ref?: Ref<View>
+  style?: ViewProps['style']
+  data: Item[]
+  index?: SharedValue<number>
+  initIndex?: number
+  onChange?: BarOnChange
+  renderItem?: BarRenderItem<Item>
+}
+// & (
+//   | {
+//       index?: never
+//       initIndex?: number
+//       onChange?: (index: number) => void
+//     }
+//   | {
+//       index?: SharedValue<number>
+//       initIndex?: never
+//       onChange?: never
+//     }
+// )
+
+type BarStylesContext = Required<Pick<BarProps, 'initIndex'>> &
+  Pick<BarProps, 'index'> & {
+    itemCount: number
+  }
+
+export type { BarProps, BarRenderItem, BarRenderItemInfo, BarOnChange, BarStylesContext }

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

@@ -0,0 +1,2 @@
+export { default as Bar } from './bar'
+export type { BarProps, BarRenderItem, BarRenderItemInfo, BarOnChange } from './bar.types'

package/src/shared/ui/organisms/bar-tab/bar-tab.tsx

@@ -0,0 +1,9 @@
+import { Bar } from '../bar'
+import { Tab } from './components'
+import { type BarTabProps } from './bar-tab.types'
+
+const BarTab = ({ ...props }: BarTabProps) => {
+  return <Bar {...props} renderItem={Tab} />
+}
+
+export default BarTab

package/src/shared/ui/organisms/bar-tab/bar-tab.types.ts

@@ -0,0 +1,5 @@
+import { type BarProps } from '../bar'
+
+type BarTabProps = Omit<BarProps<string>, 'renderItem'>
+
+export type { BarTabProps }

package/src/shared/ui/organisms/bar-tab/components/index.ts

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

package/src/shared/ui/organisms/bar-tab/components/tab/index.ts

@@ -0,0 +1,2 @@
+export { default as Tab } from './tab'
+export type { TabProps } from './tab.types'

package/src/shared/ui/organisms/bar-tab/components/tab/tab.styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '../../../../../lib'
+
+const useTabStyles = () => {
+  const { SIZES } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    tab: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: SIZES['L'],
+      paddingHorizontal: SIZES['2XL'],
+      borderRadius: SIZES['INFINITY'],
+    },
+  })
+
+  return { styles }
+}
+
+export { useTabStyles }

package/src/shared/ui/organisms/bar-tab/components/tab/tab.tsx

@@ -0,0 +1,18 @@
+import { View } from 'react-native'
+import { Text } from '../../../../atoms'
+import { useTabStyles } from './tab.styles'
+import { type TabProps } from './tab.types'
+
+const Tab = ({ item }: TabProps) => {
+  const { styles } = useTabStyles()
+
+  return (
+    <View style={styles.tab}>
+      <Text type={'outlineSB'} lineCount={1}>
+        {item}
+      </Text>
+    </View>
+  )
+}
+
+export default Tab

package/src/shared/ui/organisms/bar-tab/components/tab/tab.types.ts

@@ -0,0 +1,5 @@
+import { type BarRenderItemInfo } from '../../../bar'
+
+type TabProps = BarRenderItemInfo<string> & {}
+
+export type { TabProps }

package/src/shared/ui/organisms/bar-tab/index.ts

@@ -0,0 +1,2 @@
+export { default as BarTab } from './bar-tab'
+export type { BarTabProps } from './bar-tab.types'

package/src/shared/ui/organisms/bar-tab-navigation/bar-tab-navigation.styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+import { useNavigationSafeArea, useNavigationTabs, useThemeMode } from '../../../lib'
+
+const useBarTabNavigationStyles = () => {
+  const { SIZES } = useThemeMode()
+  const { BOTTOM } = useNavigationSafeArea()
+  const { handleLayout } = useNavigationTabs()
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      ...StyleSheet.absoluteFill,
+      top: 'auto',
+      paddingTop: SIZES['L'],
+      paddingBottom: BOTTOM,
+      paddingHorizontal: SIZES['2XL'],
+    },
+  })
+
+  return { styles, handleWrapperLayout: handleLayout }
+}
+
+export default useBarTabNavigationStyles

package/src/shared/ui/organisms/bar-tab-navigation/bar-tab-navigation.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { View } from 'react-native'
+import { useSharedValue, withTiming } from 'react-native-reanimated'
+import { Bar, type BarOnChange } from '../bar'
+import { TabNavigation } from './components'
+import useBarTabNavigationStyles from './bar-tab-navigation.styles'
+import { type BarTabNavigationProps } from './bar-tab-navigation.types'
+
+/**
+ * Таб-бар навигации поверх компонента Bar. Индикатор анимируется баром при тапе;
+ * эффект ресинка догоняет индекс только при внешней навигации (deep link, back),
+ * сравнивая state.index с последним целевым индексом, а не с текущим анимируемым
+ * значением — иначе каждый собственный тап перезапускал бы анимацию доезда.
+ */
+const BarTabNavigation = ({ state, navigation }: BarTabNavigationProps) => {
+  const index = useSharedValue(state.index)
+  const targetIndexRef = useRef(state.index)
+  const { styles, handleWrapperLayout } = useBarTabNavigationStyles()
+
+  const handleChange: BarOnChange = useCallback(
+    (nextIndex) => {
+      const route = state.routes[nextIndex]
+
+      if (!route) {
+        return
+      }
+
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: route.key,
+        canPreventDefault: true,
+      })
+
+      if (event.defaultPrevented) {
+        index.set(withTiming(targetIndexRef.current))
+
+        return
+      }
+
+      targetIndexRef.current = nextIndex
+      navigation.navigate(route.name, route.params)
+    },
+    [index, navigation, state.routes]
+  )
+
+  useEffect(() => {
+    if (targetIndexRef.current !== state.index) {
+      targetIndexRef.current = state.index
+
+      index.set(withTiming(state.index))
+    }
+  }, [index, state.index])
+
+  return (
+    <View style={styles.wrapper} onLayout={handleWrapperLayout}>
+      <Bar
+        data={state.routes.map((route) => route.name)}
+        index={index}
+        onChange={handleChange}
+        renderItem={TabNavigation}
+      />
+    </View>
+  )
+}
+
+export default BarTabNavigation

package/src/shared/ui/organisms/bar-tab-navigation/bar-tab-navigation.types.ts

@@ -0,0 +1,5 @@
+import { type BottomTabBarProps } from 'expo-router/js-tabs'
+
+type BarTabNavigationProps = BottomTabBarProps
+
+export type { BarTabNavigationProps }

package/src/shared/ui/organisms/bar-tab-navigation/components/index.ts

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

package/src/shared/ui/organisms/bar-tab-navigation/components/tab-navigation/index.ts

@@ -0,0 +1,2 @@
+export { default as TabNavigation } from './tab-navigation'
+export type { TabNavigationProps } from './tab-navigation.types'

package/src/shared/ui/organisms/bar-tab-navigation/components/tab-navigation/tab-navigation.styles.ts

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native'
+import { interpolate, interpolateColor, useAnimatedStyle } from 'react-native-reanimated'
+import { useThemeMode } from '../../../../../lib'
+import { type TabNavigationStylesContext } from './tab-navigation.types'
+
+/** Стили элемента таб-бара: кроссфейд контурной/залитой иконки и цвет подписи по активному индексу. */
+const useTabNavigationStyles = ({ data, index, activeIndex }: TabNavigationStylesContext) => {
+  const { SIZES, COLORS, TRANSPARENCIES } = useThemeMode()
+
+  const inputRange = data.map((_, i) => i)
+  const colorOutputRange = data.map((_, i) =>
+    i === index ? COLORS.TYPOGRAPHY.PRIMARY : COLORS.TYPOGRAPHY.BASE
+  )
+  const solidOpacityOutputRange = data.map((_, i) =>
+    i === index ? TRANSPARENCIES.VISIBLE : TRANSPARENCIES.INVISIBLE
+  )
+  const baseOpacityOutputRange = data.map((_, i) =>
+    i === index ? TRANSPARENCIES.INVISIBLE : TRANSPARENCIES.VISIBLE
+  )
+
+  const styles = StyleSheet.create({
+    tab: {
+      flexGrow: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: SIZES['L'],
+      paddingHorizontal: SIZES['2XL'],
+      borderRadius: SIZES['INFINITY'],
+    },
+    iconSolid: {
+      ...StyleSheet.absoluteFill,
+    },
+  })
+
+  const animatedStyles = {
+    iconBase: useAnimatedStyle(() => {
+      return {
+        opacity: interpolate(activeIndex.value, inputRange, baseOpacityOutputRange),
+      }
+    }),
+    iconSolid: useAnimatedStyle(() => {
+      return {
+        opacity: interpolate(activeIndex.value, inputRange, solidOpacityOutputRange),
+      }
+    }),
+    text: useAnimatedStyle(() => {
+      return {
+        color: interpolateColor(activeIndex.value, inputRange, colorOutputRange),
+      }
+    }),
+  }
+
+  return { styles, animatedStyles }
+}
+
+export { useTabNavigationStyles }

package/src/shared/ui/organisms/bar-tab-navigation/components/tab-navigation/tab-navigation.tsx

@@ -0,0 +1,30 @@
+import { View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { Icon, Text } from '../../../../atoms'
+import { useTabNavigationStyles } from './tab-navigation.styles'
+import { type TabNavigationProps } from './tab-navigation.types'
+
+const AnimatedText = Animated.createAnimatedComponent(Text)
+
+/** Элемент таб-бара: контурная иконка неактивного таба кроссфейдом сменяется залитой на активном. */
+const TabNavigation = ({ item, data, index, activeIndex }: TabNavigationProps) => {
+  const { styles, animatedStyles } = useTabNavigationStyles({ data, index, activeIndex })
+
+  return (
+    <View style={styles.tab}>
+      <View>
+        <Animated.View style={animatedStyles.iconBase}>
+          <Icon name={'default'} variant={'base'} />
+        </Animated.View>
+        <Animated.View style={[styles.iconSolid, animatedStyles.iconSolid]}>
+          <Icon name={'default'} variant={'primary'} />
+        </Animated.View>
+      </View>
+      <AnimatedText style={animatedStyles.text} type={'smallSB'} lineCount={1}>
+        {item}
+      </AnimatedText>
+    </View>
+  )
+}
+
+export default TabNavigation

package/src/shared/ui/organisms/bar-tab-navigation/components/tab-navigation/tab-navigation.types.ts

@@ -0,0 +1,7 @@
+import { type BarRenderItemInfo } from '../../../bar'
+
+type TabNavigationProps = BarRenderItemInfo<string> & {}
+
+type TabNavigationStylesContext = Required<Omit<TabNavigationProps, 'item'>>
+
+export type { TabNavigationProps, TabNavigationStylesContext }

package/src/shared/ui/organisms/bar-tab-navigation/index.ts

@@ -0,0 +1,2 @@
+export { default as BarTabNavigation } from './bar-tab-navigation'
+export type { BarTabNavigationProps } from './bar-tab-navigation.types'

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

@@ -1 +1,4 @@
-export const organisms = {}
+export * from './bar'
+export * from './bar-tab'
+export * from './bar-tab-navigation'
+export * from './slider'

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