@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/src/shared/ui/templates/screen-container/screen-container.types.tsx

@@ -21,15 +21,29 @@ type ScreenContainerExcludeExtraNativeProps<
   'style' | 'contentContainerStyle' | 'refreshControl' | 'refreshing' | 'onRefresh' | Prop
 >
 
-type ScreenContainerProps<Component extends ScrollView | FlatList | SectionList> = {
-  reference?: Ref<Component>
+type ScreenContainerProps<
+  Component extends ScrollView | FlatList | SectionList = ScrollView | FlatList | SectionList,
+> = {
+  ref?: Ref<Component>
   wrapperStyle?: StyleProp<ViewStyle>
+  bodyStyle?: StyleProp<ViewStyle>
   outerStyle?: StyleProp<ViewStyle>
   innerStyle?: StyleProp<ViewStyle>
-  header?: ReactNode
-  footer?: ReactNode
+  variant?: 'base' | 'secondary'
+  withScroll?: boolean
+  withBlurTop?: boolean
+  withBlurBottom?: boolean
+  withAreaTop?: boolean
+  withAreaBottom?: boolean
+  withIndentTop?: boolean
+  withIndentBottom?: boolean
   withOverflowTop?: boolean
   withOverflowBottom?: boolean
+  overlay?: ReactNode
+  screenHeader?: ReactNode
+  // screenFooter?: ReactNode
+  header?: ReactNode
+  footer?: ReactNode
   onRefresh?: () => unknown | Promise<unknown>
 }
 
@@ -58,12 +72,25 @@ type ScreenContainerSectionListRenderFooterInfo<Item = unknown> = {
   section: SectionListData<Item>
 }
 
-type ScreenContainerStylesConfig = {
-  withOverflowTop: boolean
-  withOverflowBottom: boolean
+type ScreenContainerStylesConfig = Required<
+  Pick<
+    ScreenContainerProps,
+    | 'withAreaTop'
+    | 'withAreaBottom'
+    | 'withIndentTop'
+    | 'withIndentBottom'
+    | 'withOverflowTop'
+    | 'withOverflowBottom'
+  >
+> & {
+  withScreenHeader: boolean
+  withScreenFooter: boolean
+  withHeader: boolean
+  withFooter: boolean
 }
 
 export type {
+  ScreenContainerProps,
   ScreenContainerScrollProps,
   ScreenContainerListProps,
   ScreenContainerSectionListProps,

package/src/shared/ui/templates/screen-header/components/index.ts

@@ -0,0 +1,6 @@
+export * from './screen-header-description'
+export * from './screen-header-icon'
+export * from './screen-header-icon-back'
+export * from './screen-header-icon-close'
+export * from './screen-header-info'
+export * from './screen-header-title'

package/src/shared/ui/templates/screen-header/components/screen-header-description/index.ts

@@ -0,0 +1,2 @@
+export { default as ScreenHeaderDescription } from './screen-header-description'
+export type { ScreenHeaderDescriptionProps } from './screen-header-description.types'

package/src/shared/ui/templates/screen-header/components/screen-header-description/screen-header-description.tsx

@@ -0,0 +1,15 @@
+import { Text, Touch } from '../../../../atoms'
+import { type ScreenHeaderDescriptionProps } from './screen-header-description.types'
+
+/** Описание в шапке экрана: вторичный текст нейтрального цвета под заголовком. */
+const ScreenHeaderDescription = ({ value, onPress, onLongPress }: ScreenHeaderDescriptionProps) => {
+  return (
+    <Touch onPress={onPress} onLongPress={onLongPress}>
+      <Text type={'description'} variant={'neutral'} align={'center'} lineCount={2} shouldFit>
+        {value}
+      </Text>
+    </Touch>
+  )
+}
+
+export default ScreenHeaderDescription

package/src/shared/ui/templates/screen-header/components/screen-header-description/screen-header-description.types.ts

@@ -0,0 +1,11 @@
+import { type Noop } from '@mediacubeco/base/types'
+
+/** Пропсы описания шапки экрана. */
+type ScreenHeaderDescriptionProps = {
+  /** Текст описания. */
+  value: string
+  onPress?: Noop
+  onLongPress?: Noop
+}
+
+export type { ScreenHeaderDescriptionProps }

package/src/shared/ui/templates/screen-header/components/screen-header-icon/index.ts

@@ -0,0 +1,2 @@
+export { default as ScreenHeaderIcon } from './screen-header-icon'
+export type { ScreenHeaderIconProps } from './screen-header-icon.types'

package/src/shared/ui/templates/screen-header/components/screen-header-icon/screen-header-icon.styles.ts

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '../../../../../lib'
+
+/** Стили иконки-кнопки шапки: круглая стеклянная подложка и растянутая нажимаемая область с отступом под иконку. */
+const useScreenHeaderIconStyles = () => {
+  const { COLORS, SIZES, SHADOWS } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      borderRadius: SIZES['INFINITY'],
+      ...SHADOWS.BASE,
+    },
+    body: {
+      flexDirection: 'row',
+      borderRadius: SIZES['INFINITY'],
+    },
+    glass: {},
+    blur: {
+      overflow: 'hidden',
+    },
+    touch: {
+      padding: SIZES['L'],
+    },
+    icon: {},
+  })
+
+  const stylesByVariant = {
+    body: StyleSheet.create({
+      base: {
+        backgroundColor: COLORS.BAR.BASE,
+      },
+      secondary: {
+        backgroundColor: COLORS.BAR.DISABLED,
+      },
+      contrast: {
+        backgroundColor: COLORS.BAR.DISABLED,
+      },
+    }),
+  }
+
+  return { styles, stylesByVariant }
+}
+
+export { useScreenHeaderIconStyles }

package/src/shared/ui/templates/screen-header/components/screen-header-icon/screen-header-icon.tsx

@@ -0,0 +1,65 @@
+import { type IterableOf } from '@mediacubeco/base/types'
+import { forceList, getValueByKey, runCallback } from '@mediacubeco/base/utils'
+import { useCallback } from 'react'
+import { View } from 'react-native'
+import { isGlassEffectAPIAvailable } from 'expo-glass-effect'
+import { Glass, Icon, type IconProps, Touch } from '../../../../atoms'
+import { useScreenHeaderIconStyles } from './screen-header-icon.styles'
+import { type ScreenHeaderIconProps } from './screen-header-icon.types'
+
+const ScreenHeaderIcon = <Item extends IconProps['name']>({
+  value,
+  variant = 'base',
+  onPress,
+  onLongPress,
+}: ScreenHeaderIconProps<Item>) => {
+  const { styles, stylesByVariant } = useScreenHeaderIconStyles()
+
+  const valueList = forceList(value)
+  const hasGlass = isGlassEffectAPIAvailable()
+
+  const iconVariant = getValueByKey(
+    variant,
+    {
+      secondary: 'base',
+    } as const,
+    variant
+  )
+
+  const handlePress = useCallback(
+    (value: IterableOf<typeof valueList>) => () => {
+      runCallback(onPress, value)
+    },
+    [onPress]
+  )
+
+  const handleLongPress = useCallback(
+    (value: IterableOf<typeof valueList>) => () => {
+      runCallback(onLongPress, value)
+    },
+    [onLongPress]
+  )
+
+  return (
+    <Glass
+      style={[styles.wrapper, hasGlass ? styles.glass : styles.blur]}
+      glassEffectStyle={'clear'}
+    >
+      <View style={[styles.body, stylesByVariant.body[variant]]}>
+        {valueList.map((value) => (
+          <Touch
+            key={value}
+            style={styles.touch}
+            withRipple={!hasGlass}
+            onPress={handlePress(value)}
+            onLongPress={handleLongPress(value)}
+          >
+            <Icon name={value} variant={iconVariant} style={styles.icon} />
+          </Touch>
+        ))}
+      </View>
+    </Glass>
+  )
+}
+
+export default ScreenHeaderIcon

package/src/shared/ui/templates/screen-header/components/screen-header-icon/screen-header-icon.types.ts

@@ -0,0 +1,14 @@
+import { type Callback } from '@mediacubeco/base/types'
+import { type IconProps } from '../../../../atoms'
+
+/** Пропсы иконки-кнопки шапки экрана. */
+type ScreenHeaderIconProps<Value extends IconProps['name'] = IconProps['name']> = {
+  /** Вариант окраски иконки. */
+  variant?: 'base' | 'secondary' | 'contrast'
+  /** Имя отображаемой иконки. */
+  value: Value | Value[]
+  onPress?: Callback<[Value]>
+  onLongPress?: Callback<[Value]>
+}
+
+export type { ScreenHeaderIconProps }

package/src/shared/ui/templates/screen-header/components/screen-header-icon-back/index.ts

@@ -0,0 +1,2 @@
+export { default as ScreenHeaderIconBack } from './screen-header-icon-back'
+export type { ScreenHeaderIconBackProps } from './screen-header-icon-back.types'

package/src/shared/ui/templates/screen-header/components/screen-header-icon-back/screen-header-icon-back.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { useNavigationRoute } from '../../../../../lib'
+import { ScreenHeaderIcon } from '../screen-header-icon'
+import { type ScreenHeaderIconBackProps } from './screen-header-icon-back.types'
+
+/** Иконка-кнопка шапки экрана для возврата на предыдущий экран. */
+const ScreenHeaderIconBack = ({ variant }: ScreenHeaderIconBackProps) => {
+  const navigation = useNavigationRoute()
+
+  const handlePress = useCallback(() => {
+    navigation.back()
+  }, [navigation])
+
+  return <ScreenHeaderIcon value={'back'} variant={variant} onPress={handlePress} />
+}
+
+export default ScreenHeaderIconBack

package/src/shared/ui/templates/screen-header/components/screen-header-icon-back/screen-header-icon-back.types.ts

@@ -0,0 +1,6 @@
+import { type ScreenHeaderIconProps } from '../screen-header-icon'
+
+/** Пропсы иконки-кнопки возврата на предыдущий экран. */
+type ScreenHeaderIconBackProps = Pick<ScreenHeaderIconProps, 'variant'>
+
+export type { ScreenHeaderIconBackProps }

package/src/shared/ui/templates/screen-header/components/screen-header-icon-close/index.ts

@@ -0,0 +1,2 @@
+export { default as ScreenHeaderIconClose } from './screen-header-icon-close'
+export type { ScreenHeaderIconCloseProps } from './screen-header-icon-close.types'

package/src/shared/ui/templates/screen-header/components/screen-header-icon-close/screen-header-icon-close.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from 'react'
+import { useNavigationRoute } from '../../../../../lib'
+import { ScreenHeaderIcon } from '../screen-header-icon'
+import { type ScreenHeaderIconCloseProps } from './screen-header-icon-close.types'
+
+/**
+ * Иконка-кнопка шапки для закрытия флоу с последнего экрана: сворачивает стек к
+ * первому экрану флоу (`to`), а без него — к корню стека. Не путать с
+ * `ScreenHeaderIconBack`, который делает шаг назад.
+ */
+const ScreenHeaderIconClose = ({ to, variant }: ScreenHeaderIconCloseProps) => {
+  const navigation = useNavigationRoute()
+
+  const handlePress = useCallback(() => {
+    if (to) {
+      navigation.dismissTo(to)
+
+      return
+    }
+
+    navigation.dismissAll()
+  }, [to, navigation])
+
+  return <ScreenHeaderIcon value={'close'} variant={variant} onPress={handlePress} />
+}
+
+export default ScreenHeaderIconClose

package/src/shared/ui/templates/screen-header/components/screen-header-icon-close/screen-header-icon-close.types.ts

@@ -0,0 +1,10 @@
+import { type Href } from 'expo-router'
+import { type ScreenHeaderIconProps } from '../screen-header-icon'
+
+/** Пропсы иконки-кнопки закрытия флоу. */
+type ScreenHeaderIconCloseProps = Pick<ScreenHeaderIconProps, 'variant'> & {
+  /** Первый экран флоу, на который свернуть стек; без него — выход к корню стека. */
+  to?: Href
+}
+
+export type { ScreenHeaderIconCloseProps }

package/src/shared/ui/templates/screen-header/components/screen-header-info/index.ts

@@ -0,0 +1,2 @@
+export { default as ScreenHeaderInfo } from './screen-header-info'
+export type { ScreenHeaderInfoProps } from './screen-header-info.types'

package/src/shared/ui/templates/screen-header/components/screen-header-info/screen-header-info.tsx

@@ -0,0 +1,15 @@
+import { ScreenHeaderDescription } from '../screen-header-description'
+import { ScreenHeaderTitle } from '../screen-header-title'
+import { type ScreenHeaderInfoProps } from './screen-header-info.types'
+
+/** Информационный блок шапки экрана: заголовок и описание под ним. */
+const ScreenHeaderInfo = ({ title, description, variant }: ScreenHeaderInfoProps) => {
+  return (
+    <>
+      {title && <ScreenHeaderTitle value={title} variant={variant} />}
+      {description && <ScreenHeaderDescription value={description} />}
+    </>
+  )
+}
+
+export default ScreenHeaderInfo

package/src/shared/ui/templates/screen-header/components/screen-header-info/screen-header-info.types.ts

@@ -0,0 +1,10 @@
+/** Пропсы информационного блока шапки экрана. */
+type ScreenHeaderInfoProps = {
+  variant?: 'base' | 'contrast'
+  /** Текст заголовка. */
+  title?: string
+  /** Текст описания. */
+  description?: string
+}
+
+export type { ScreenHeaderInfoProps }

package/src/shared/ui/templates/screen-header/components/screen-header-title/index.ts

@@ -0,0 +1,2 @@
+export { default as ScreenHeaderTitle } from './screen-header-title'
+export type { ScreenHeaderTitleProps } from './screen-header-title.types'

package/src/shared/ui/templates/screen-header/components/screen-header-title/screen-header-title.tsx

@@ -0,0 +1,19 @@
+import { Text, Touch } from '../../../../atoms'
+import { type ScreenHeaderTitleProps } from './screen-header-title.types'
+
+const ScreenHeaderTitle = ({
+  value,
+  variant = 'base',
+  onPress,
+  onLongPress,
+}: ScreenHeaderTitleProps) => {
+  return (
+    <Touch onPress={onPress} onLongPress={onLongPress}>
+      <Text variant={variant} type={'subtitle'} align={'center'} lineCount={2} shouldFit={true}>
+        {value}
+      </Text>
+    </Touch>
+  )
+}
+
+export default ScreenHeaderTitle

package/src/shared/ui/templates/screen-header/components/screen-header-title/screen-header-title.types.ts

@@ -0,0 +1,13 @@
+import { type Noop } from '@mediacubeco/base/types'
+
+/** Пропсы заголовка шапки экрана. */
+type ScreenHeaderTitleProps = {
+  /** Текст заголовка. */
+  value: string
+  /** Вариант окраски текста. */
+  variant?: 'base' | 'contrast'
+  onPress?: Noop
+  onLongPress?: Noop
+}
+
+export type { ScreenHeaderTitleProps }

package/src/shared/ui/templates/screen-header/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export { default as ScreenHeader } from './screen-header'
+export type { ScreenHeaderProps } from './screen-header.types'

package/src/shared/ui/templates/screen-header/screen-header.styles.ts

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native'
+import { useNavigationSafeArea, useThemeMode } from '../../../lib'
+import { type ScreenHeaderStylesContext } from './screen-header.types'
+
+const useScreenHeaderStyles = ({ withArea }: ScreenHeaderStylesContext) => {
+  const { COLORS, SIZES } = useThemeMode()
+  const { TOP, HEADER } = useNavigationSafeArea()
+
+  const HEADER_AREA = withArea ? TOP : 0
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      justifyContent: 'flex-end',
+      height: HEADER + HEADER_AREA,
+      paddingTop: HEADER_AREA,
+    },
+    wrapperWithBlur: {
+      backgroundColor: COLORS.FILL.TRANSPARENT,
+    },
+    wrapperWithoutBlur: {
+      backgroundColor: COLORS.BACKGROUND.SECONDARY,
+    },
+    body: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: SIZES['L'],
+      paddingVertical: SIZES['M'],
+    },
+    left: {
+      flex: 1,
+      alignItems: 'flex-start',
+      flexBasis: SIZES['MIN'],
+    },
+    center: {
+      flexGrow: 3,
+      flexBasis: SIZES['MIN'],
+      alignItems: 'center',
+    },
+    right: {
+      flex: 1,
+      alignItems: 'flex-end',
+      flexBasis: SIZES['MIN'],
+    },
+  })
+
+  return { styles }
+}
+
+export { useScreenHeaderStyles }

package/src/shared/ui/templates/screen-header/screen-header.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native'
+import { useScreenHeaderStyles } from './screen-header.styles'
+import { type ScreenHeaderProps } from './screen-header.types'
+
+const ScreenHeader = ({
+  ref,
+  style,
+  center = '',
+  left,
+  right,
+  withArea = true,
+}: ScreenHeaderProps) => {
+  const { styles } = useScreenHeaderStyles({ withArea })
+
+  return (
+    <View ref={ref} style={[styles.wrapper, style]}>
+      <View style={styles.body}>
+        <View style={styles.left}>{left}</View>
+        <View style={styles.center}>{center}</View>
+        <View style={styles.right}>{right}</View>
+      </View>
+    </View>
+  )
+}
+
+export default ScreenHeader

package/src/shared/ui/templates/screen-header/screen-header.types.ts

@@ -0,0 +1,15 @@
+import { type ReactNode, type Ref } from 'react'
+import { type View, type ViewProps } from 'react-native'
+
+type ScreenHeaderProps = {
+  ref?: Ref<View>
+  style?: ViewProps['style']
+  center?: ReactNode
+  left?: ReactNode
+  right?: ReactNode
+  withArea?: boolean
+}
+
+type ScreenHeaderStylesContext = Required<Pick<ScreenHeaderProps, 'withArea'>> & {}
+
+export type { ScreenHeaderProps, ScreenHeaderStylesContext }

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

@@ -0,0 +1,2 @@
+export { default as WebContainer } from './web-container'
+export type { WebContainerProps } from './web-container.types'

package/src/shared/ui/templates/web-container/web-container.styles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '../../../lib'
+
+/**
+ * Визуальная логика контейнера WebView. Контейнер живёт внутри formSheet: шапка в потоке
+ * (с запасом сверху под grabber листа), WebView занимает остаток высоты. Загрузка и ошибка —
+ * непрозрачные оверлеи поверх WebView, чтобы скрыть белую вспышку страницы и «голый» экран
+ * при провале навигации. Пропорции шапки повторяют `ScreenHeader`: боковые зоны равной
+ * ширины, поэтому заголовок стоит по центру независимо от кнопки закрытия.
+ */
+const useWebContainerStyles = () => {
+  const { COLORS } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    wrapper: {},
+    outer: {},
+    inner: {
+      paddingHorizontal: 0,
+    },
+    web: {
+      flex: 1,
+      backgroundColor: COLORS.FILL.TRANSPARENT,
+    },
+    spinner: {
+      ...StyleSheet.absoluteFill,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  })
+
+  return { styles }
+}
+
+export { useWebContainerStyles }