@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/.claude/skills/code-style/references/components/payout-speed-option/index.ts

@@ -0,0 +1,2 @@
+export { default as PayoutSpeedOption } from './payout-speed-option'
+export type { PayoutSpeed, PayoutSpeedOptionProps } from './payout-speed-option.types'

package/.claude/skills/code-style/references/components/payout-speed-option/payout-speed-option.styles.ts

@@ -0,0 +1,76 @@
+import { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+import {
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import { useThemeMode } from '~shared/lib'
+
+/**
+ * Стили опции выбора скорости выплаты: карточка с анимированной рамкой
+ * выделения и галочкой. Канонический язык выделения проекта.
+ */
+const usePayoutSpeedOptionStyles = () => {
+  const { COLORS, SIZES, ANIMATIONS } = useThemeMode()
+  const selection = useSharedValue(0)
+
+  /** Радиус карточки опции: щедрое скругление уровня карточки (калибр — меню-капсула). */
+  const OPTION_BORDER_RADIUS = SIZES['5XL']
+
+  /** Радиус тайла иконки: радиус карточки минус её паддинг — вложенные углы концентричны. */
+  const ICON_TILE_BORDER_RADIUS = OPTION_BORDER_RADIUS - SIZES['2XL']
+
+  const handleActive = useCallback(() => {
+    selection.set(withTiming(1, ANIMATIONS.TIMING.BASE))
+  }, [selection, ANIMATIONS.TIMING.BASE])
+
+  const handleInactive = useCallback(() => {
+    selection.set(withTiming(0, ANIMATIONS.TIMING.BASE))
+  }, [selection, ANIMATIONS.TIMING.BASE])
+
+  const styles = StyleSheet.create({
+    option: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SIZES['XL'],
+      padding: SIZES['2XL'],
+      borderWidth: SIZES['S'],
+      borderRadius: OPTION_BORDER_RADIUS,
+      backgroundColor: COLORS.FILL.SECONDARY,
+    },
+    iconTile: {
+      padding: SIZES['M'],
+      borderRadius: ICON_TILE_BORDER_RADIUS,
+      backgroundColor: COLORS.FILL.PRIMARY_LIGHT,
+    },
+    content: {
+      flex: 1,
+      gap: SIZES['3XS'],
+    },
+  })
+
+  const animatedStyles = {
+    option: useAnimatedStyle(() => {
+      return {
+        borderColor: interpolateColor(
+          selection.value,
+          [0, 1],
+          [COLORS.STROKE.TRANSPARENT, COLORS.STROKE.PRIMARY]
+        ),
+      }
+    }),
+    check: useAnimatedStyle(() => {
+      return {
+        opacity: selection.value,
+        transform: [{ scale: interpolate(selection.value, [0, 1], [0, 1]) }],
+      }
+    }),
+  }
+
+  return { styles, animatedStyles, handleActive, handleInactive }
+}
+
+export { usePayoutSpeedOptionStyles }

package/.claude/skills/code-style/references/components/payout-speed-option/payout-speed-option.tsx

@@ -0,0 +1,58 @@
+import { runCallback } from '@mediacubeco/base/utils'
+import { useCallback, useEffect } from 'react'
+import { View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { Icon, Text, Touch } from '~shared/ui'
+import { usePayoutSpeedOptionStyles } from './payout-speed-option.styles'
+import { type PayoutSpeedOptionProps } from './payout-speed-option.types'
+
+/**
+ * Опция выбора скорости выплаты: карточка с иконкой, названием и пояснением,
+ * анимированная рамка выделения и галочка выбранного состояния. Хаптика —
+ * на выборе: это значимое действие, фиксирующее решение.
+ */
+const PayoutSpeedOption = ({
+  title,
+  description,
+  icon,
+  payoutSpeed,
+  isSelected,
+  onPress,
+}: PayoutSpeedOptionProps) => {
+  const { styles, animatedStyles, handleActive, handleInactive } = usePayoutSpeedOptionStyles()
+
+  const handlePress = useCallback(() => {
+    runCallback(onPress, payoutSpeed)
+  }, [onPress, payoutSpeed])
+
+  useEffect(() => {
+    if (isSelected) {
+      handleActive()
+    } else {
+      handleInactive()
+    }
+  }, [isSelected, handleActive, handleInactive])
+
+  return (
+    <Touch withHaptics={true} onPress={handlePress}>
+      <Animated.View style={[styles.option, animatedStyles.option]}>
+        <View style={styles.iconTile}>
+          <Icon name={icon} variant={'primary'} size={'xs'} />
+        </View>
+        <View style={styles.content}>
+          <Text type={'bodySB'}>{title}</Text>
+          {description ? (
+            <Text type={'description'} variant={'secondary'}>
+              {description}
+            </Text>
+          ) : null}
+        </View>
+        <Animated.View style={animatedStyles.check}>
+          <Icon name={'check'} variant={'primary'} />
+        </Animated.View>
+      </Animated.View>
+    </Touch>
+  )
+}
+
+export default PayoutSpeedOption

package/.claude/skills/code-style/references/components/payout-speed-option/payout-speed-option.types.ts

@@ -0,0 +1,22 @@
+import { type IconName } from '~shared/ui'
+
+/** Идентификатор скорости выплаты. */
+type PayoutSpeed = 'instant' | 'daily' | 'weekly'
+
+/** Пропсы опции выбора скорости выплаты. */
+type PayoutSpeedOptionProps = {
+  /** Название опции («Мгновенно»). */
+  title: string
+  /** Пояснение на языке результата («Деньги сегодня к 18:00»), не описания. */
+  description?: string
+  /** Иконка опции. */
+  icon: IconName
+  /** Значение опции. */
+  payoutSpeed: PayoutSpeed
+  /** Выбрана ли опция. */
+  isSelected: boolean
+  /** Колбэк выбора опции. */
+  onPress?: (payoutSpeed: PayoutSpeed) => void
+}
+
+export type { PayoutSpeed, PayoutSpeedOptionProps }

package/.claude/skills/code-style/references/components/post/index.ts

@@ -0,0 +1,2 @@
+export { default as Post } from './post'
+export type { PostProps } from './post.types'

package/.claude/skills/code-style/references/components/post/post.styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '../../../lib'
+
+const usePostStyles = () => {
+  const { SIZES, COLORS } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    container: {
+      gap: SIZES['S'],
+      padding: SIZES['2XL'],
+      borderRadius: SIZES['2XL'],
+      backgroundColor: COLORS.FILL.BASE,
+    },
+  })
+
+  return { styles }
+}
+
+export { usePostStyles }

package/.claude/skills/code-style/references/components/post/post.tsx

@@ -0,0 +1,21 @@
+import { View } from 'react-native'
+import { Text } from '../../atoms'
+import { usePostStyles } from './post.styles'
+import { type PostProps } from './post.types'
+
+const Post = ({ title, body, style }: PostProps) => {
+  const { styles } = usePostStyles()
+
+  return (
+    <View style={[styles.container, style]}>
+      <Text variant={'bodySB'}>{title}</Text>
+      {body ? (
+        <Text variant={'description'} color={'NEUTRAL'}>
+          {body}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+export default Post

package/.claude/skills/code-style/references/components/post/post.types.ts

@@ -0,0 +1,9 @@
+import { type StyleProp, type ViewStyle } from 'react-native'
+
+type PostProps = {
+  title: string
+  body?: string
+  style?: StyleProp<ViewStyle>
+}
+
+export type { PostProps }

package/.claude/skills/code-style/references/components/wrap/index.ts

@@ -0,0 +1,2 @@
+export { default as Wrap } from './wrap'
+export type { WrapProps } from './wrap.types'

package/.claude/skills/code-style/references/components/wrap/wrap.styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native'
+
+const useWrapStyles = () => {
+  const styles = StyleSheet.create({
+    outer: {},
+    inner: {
+      flex: 1,
+      overflow: 'hidden',
+    },
+  })
+
+  return { styles }
+}
+
+export { useWrapStyles }

package/.claude/skills/code-style/references/components/wrap/wrap.tsx

@@ -0,0 +1,31 @@
+import { ScrollView, View } from 'react-native'
+import { useWrapStyles } from './wrap.styles'
+import { type WrapProps } from './wrap.types'
+
+const Wrap = ({
+  /* @ts-ignore */
+  style,
+  ref,
+  children,
+  outerStyle,
+  innerStyle,
+  horizontal,
+  decelerationRate = 'fast',
+  ...props
+}: WrapProps) => {
+  const { styles } = useWrapStyles()
+
+  return (
+    <ScrollView
+      ref={ref}
+      style={[styles.outer, outerStyle]}
+      horizontal={horizontal}
+      decelerationRate={decelerationRate}
+      {...props}
+    >
+      <View style={[styles.inner, innerStyle]}>{children}</View>
+    </ScrollView>
+  )
+}
+
+export default Wrap

package/.claude/skills/code-style/references/components/wrap/wrap.types.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'react'
+import { type ScrollView, type ScrollViewProps, type ViewProps } from 'react-native'
+
+type WrapProps = Omit<ScrollViewProps, 'style'> & {
+  ref?: Ref<ScrollView>
+  outerStyle?: ViewProps['style']
+  innerStyle?: ViewProps['style']
+}
+
+export type { WrapProps }

package/.claude/skills/code-style/references/hooks/use-posts.ts

@@ -0,0 +1,37 @@
+import { useCallback, useMemo, useState } from 'react'
+import { useApiPosts } from '~shared/lib'
+
+/** Приватный помощник: строка поиска и её обработчик. */
+const useSearch = () => {
+  const [search, setSearch] = useState('')
+
+  const handleSearch = useCallback((value: string) => {
+    setSearch(value)
+  }, [])
+
+  return { search, handleSearch }
+}
+
+/** Список постов с фильтрацией по поиску и обновлением по pull-to-refresh. */
+const usePosts = () => {
+  const { search, handleSearch } = useSearch()
+  const { data, isPending, refetch } = useApiPosts()
+
+  const postList = useMemo(() => {
+    return data.filter((post) => post.title.includes(search))
+  }, [data, search])
+
+  const handleRefresh = useCallback(async () => {
+    await refetch()
+  }, [refetch])
+
+  return {
+    search,
+    isPending,
+    postList,
+    handleRefresh,
+    handleSearch,
+  }
+}
+
+export { usePosts }

package/.claude/skills/code-style/references/pages/post/index.ts

@@ -0,0 +1,4 @@
+export * from './post-details'
+export * from './post-guide'
+export * from './post-list'
+export * from './post-share'

package/.claude/skills/code-style/references/pages/post/post-details/index.ts

@@ -0,0 +1 @@
+export { default as PostDetails } from './post-details'

package/.claude/skills/code-style/references/pages/post/post-details/post-details.tsx

@@ -0,0 +1,13 @@
+import { PostContent } from '~widgets/post-content'
+import { ScreenContainerScroll } from '~shared/ui'
+
+/** Экран деталей поста: вся вёрстка живёт в виджете, странице остаётся композиция. */
+const PostDetails = () => {
+  return (
+    <ScreenContainerScroll>
+      <PostContent />
+    </ScreenContainerScroll>
+  )
+}
+
+export default PostDetails

package/.claude/skills/code-style/references/pages/post/post-guide/index.ts

@@ -0,0 +1 @@
+export { default as PostGuide } from './post-guide'

package/.claude/skills/code-style/references/pages/post/post-guide/post-guide.tsx

@@ -0,0 +1,17 @@
+import { useNavigationParams } from '~shared/lib'
+import { WebContainer } from '~shared/ui'
+
+/** Параметры веб-гайда: ссылка и заголовок страницы. */
+type PostGuideParams = {
+  uri: string
+  title: string
+}
+
+/** Веб-экран гайда по постам: страница в модальном WebView. */
+const PostGuide = () => {
+  const { uri, title } = useNavigationParams<PostGuideParams>()
+
+  return <WebContainer uri={uri} title={title} />
+}
+
+export default PostGuide

package/.claude/skills/code-style/references/pages/post/post-list/index.ts

@@ -0,0 +1 @@
+export { default as PostList } from './post-list'

package/.claude/skills/code-style/references/pages/post/post-list/post-list.styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '~shared/lib'
+
+/** Стили экрана списка постов. */
+const usePostListStyles = () => {
+  const { SIZES } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    inner: {
+      gap: SIZES['L'],
+    },
+  })
+
+  return { styles }
+}
+
+export { usePostListStyles }

package/.claude/skills/code-style/references/pages/post/post-list/post-list.tsx

@@ -0,0 +1,25 @@
+import { View } from 'react-native'
+import { usePosts } from '~entities/post'
+import { ScreenContainerScroll, Text } from '~shared/ui'
+import { usePostListStyles } from './post-list.styles'
+
+/** Экран списка постов. */
+const PostList = () => {
+  const { styles } = usePostListStyles()
+
+  const { postList, handleRefresh } = usePosts()
+
+  return (
+    <ScreenContainerScroll onRefresh={handleRefresh}>
+      <View style={styles.inner}>
+        {postList.map((post) => (
+          <Text key={post.id} variant={'primary'}>
+            {post.title}
+          </Text>
+        ))}
+      </View>
+    </ScreenContainerScroll>
+  )
+}
+
+export default PostList

package/.claude/skills/code-style/references/pages/post/post-share/index.ts

@@ -0,0 +1 @@
+export { default as PostShare } from './post-share'

package/.claude/skills/code-style/references/pages/post/post-share/post-share.tsx

@@ -0,0 +1,13 @@
+import { PostShareForm } from '~widgets/post-share-form'
+import { ModalContainerScroll } from '~shared/ui'
+
+/** Модалка «Поделиться постом»: обычная страница домена, отличается только корнем ModalContainer*. */
+const PostShare = () => {
+  return (
+    <ModalContainerScroll>
+      <PostShareForm />
+    </ModalContainerScroll>
+  )
+}
+
+export default PostShare

package/.claude/skills/code-style/references/routes/(stack)/_layout.tsx

@@ -0,0 +1,18 @@
+import { Stack } from 'expo-router'
+import { useNavigationStackOptions } from '~shared/lib'
+
+/** Стек-навигатор домена постов: экраны, шит-модалка и веб-экран в одном layout. */
+const Layout = () => {
+  const { stackOptions, screenOptions, sheetOptions, webOptions } = useNavigationStackOptions()
+
+  return (
+    <Stack screenOptions={stackOptions}>
+      <Stack.Screen name={'index'} options={screenOptions} />
+      <Stack.Screen name={'details'} options={screenOptions} />
+      <Stack.Screen name={'share'} options={sheetOptions} />
+      <Stack.Screen name={'guide'} options={webOptions} />
+    </Stack>
+  )
+}
+
+export default Layout

package/.claude/skills/code-style/references/routes/(stack)/details.tsx

@@ -0,0 +1,8 @@
+import { PostDetails } from '~pages/post'
+
+/** Роут деталей поста. */
+const Page = () => {
+  return <PostDetails />
+}
+
+export default Page

package/.claude/skills/code-style/references/routes/(stack)/guide.tsx

@@ -0,0 +1,8 @@
+import { PostGuide } from '~pages/post'
+
+/** Роут веб-гайда по постам. */
+const Page = () => {
+  return <PostGuide />
+}
+
+export default Page

package/.claude/skills/code-style/references/routes/(stack)/index.tsx

@@ -0,0 +1,8 @@
+import { PostList } from '~pages/post'
+
+/** Роут списка постов. */
+const Page = () => {
+  return <PostList />
+}
+
+export default Page

package/.claude/skills/code-style/references/routes/(stack)/share.tsx

@@ -0,0 +1,8 @@
+import { PostShare } from '~pages/post'
+
+/** Роут модалки «Поделиться постом» в домене постов. */
+const Page = () => {
+  return <PostShare />
+}
+
+export default Page

package/.claude/skills/code-style/references/routes/(tabs)/(post-details)/index.tsx

@@ -0,0 +1,8 @@
+import { PostDetails } from '~pages/post'
+
+/** Роут таба деталей поста. */
+const Page = () => {
+  return <PostDetails />
+}
+
+export default Page

package/.claude/skills/code-style/references/routes/(tabs)/(post-list)/index.tsx

@@ -0,0 +1,8 @@
+import { PostList } from '~pages/post'
+
+/** Роут таба списка постов. */
+const Page = () => {
+  return <PostList />
+}
+
+export default Page

package/.claude/skills/code-style/references/routes/(tabs)/_layout.tsx

@@ -0,0 +1,50 @@
+import { isGlassEffectAPIAvailable } from 'expo-glass-effect'
+import { Tabs } from 'expo-router'
+import { NativeTabs } from 'expo-router/build/native-tabs'
+import {
+  NavigationTabsNativeProvider,
+  NavigationTabsProvider,
+  useLocalizationText,
+  useNavigationTabBarNativeOptions,
+  useNavigationTabBarOptions,
+} from '~shared/lib'
+import { BarTabNavigation } from '~shared/ui'
+
+/** Таб-навигатор: нативные табы на новых ОС, кастомный таб-бар как фолбэк. */
+const Layout = () => {
+  const t = useLocalizationText()
+  const { createTabBarOptions } = useNavigationTabBarOptions(BarTabNavigation)
+  const { createTabBarNativeOptions } = useNavigationTabBarNativeOptions()
+
+  if (isGlassEffectAPIAvailable()) {
+    const tabBarNativeOptions = createTabBarNativeOptions()
+
+    return (
+      <NavigationTabsNativeProvider>
+        <NativeTabs {...tabBarNativeOptions}>
+          <NativeTabs.Trigger name={'(post-list)'}>
+            <NativeTabs.Trigger.Label>{t('post.list.title')}</NativeTabs.Trigger.Label>
+            <NativeTabs.Trigger.Icon sf={'list.bullet'} md={'list'} />
+          </NativeTabs.Trigger>
+          <NativeTabs.Trigger name={'(post-details)'}>
+            <NativeTabs.Trigger.Label>{t('post.details.title')}</NativeTabs.Trigger.Label>
+            <NativeTabs.Trigger.Icon sf={'doc.text'} md={'description'} />
+          </NativeTabs.Trigger>
+        </NativeTabs>
+      </NavigationTabsNativeProvider>
+    )
+  } else {
+    const tabBarOptions = createTabBarOptions()
+
+    return (
+      <NavigationTabsProvider>
+        <Tabs {...tabBarOptions}>
+          <Tabs.Screen name={'(post-list)'} options={{ title: t('post.list.title') }} />
+          <Tabs.Screen name={'(post-details)'} options={{ title: t('post.details.title') }} />
+        </Tabs>
+      </NavigationTabsProvider>
+    )
+  }
+}
+
+export default Layout

package/.claude/skills/code-style/references/routes/_app.tsx

@@ -0,0 +1,20 @@
+import { Stack } from 'expo-router'
+import { useNavigationStackOptions } from '~shared/lib'
+
+/** Корневой стек приложения: гард авторизации и глобально доступные роуты. */
+const App = () => {
+  const { stackOptions, sheetOptions, webOptions } = useNavigationStackOptions()
+  const didAuth = true
+
+  return (
+    <Stack screenOptions={stackOptions}>
+      <Stack.Protected guard={didAuth}>
+        <Stack.Screen name={'(tabs)'} />
+        <Stack.Screen name={'share'} options={sheetOptions} />
+        <Stack.Screen name={'guide'} options={webOptions} />
+      </Stack.Protected>
+    </Stack>
+  )
+}
+
+export default App

package/.claude/skills/code-style/references/routes/guide.tsx

@@ -0,0 +1,8 @@
+import { PostGuide } from '~pages/post'
+
+/** Корневой роут веб-гайда: открывается поверх любого экрана (пуш, диплинк). */
+const Page = () => {
+  return <PostGuide />
+}
+
+export default Page

package/.claude/skills/code-style/references/routes/share.tsx

@@ -0,0 +1,8 @@
+import { PostShare } from '~pages/post'
+
+/** Корневой роут модалки «Поделиться постом»: открывается поверх любого экрана (пуш, диплинк). */
+const Page = () => {
+  return <PostShare />
+}
+
+export default Page