@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

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

@@ -3,24 +3,29 @@ import { BlurView } from 'expo-blur'
 import { type BlurProps } from './blur.types'
 
 const Blur = ({
-  reference,
+  style,
+  ref,
+  children,
   blurTarget,
   tint,
-  intensity,
+  intensity = 20,
   blurReductionFactor,
   blurMethod,
   ...props
 }: BlurProps) => {
   return (
     <BlurView
-      ref={reference as Ref<BlurView>}
+      ref={ref as Ref<BlurView>}
+      style={[style]}
       blurTarget={blurTarget}
       tint={tint}
       intensity={intensity}
       blurReductionFactor={blurReductionFactor}
       blurMethod={blurMethod}
       {...props}
-    />
+    >
+      {children}
+    </BlurView>
   )
 }
 

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

@@ -3,7 +3,7 @@ import { type View } from 'react-native'
 import { type BlurViewProps } from 'expo-blur'
 
 type BlurProps = BlurViewProps & {
-  reference?: Ref<View>
+  ref?: Ref<View>
 }
 
 export type { BlurProps }

package/src/shared/ui/atoms/blur-progress/blur-progress.styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native'
+import { useThemeSetup } from '../../../lib'
+
+const useBlurProgressStyles = () => {
+  const { themeModeSystem } = useThemeSetup()
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      flex: 1,
+    },
+  })
+
+  return { styles, themeModeSystem }
+}
+
+export { useBlurProgressStyles }

package/src/shared/ui/atoms/blur-progress/blur-progress.tsx

@@ -0,0 +1,30 @@
+import { Platform } from '@mediacubeco/base-react-native/helpers'
+import { ProgressiveBlurView } from '@sbaiahmed1/react-native-blur'
+import { useBlurProgressStyles } from './blur-progress.styles'
+import { type BlurProgressProps } from './blur-progress.types'
+
+const BlurProgress = ({
+  style,
+  children,
+  blurAmount = Platform.isAndroid ? 100 : 5,
+  blurRounds = 15,
+  startOffset = 0,
+  direction = 'blurredBottomClearTop',
+}: BlurProgressProps) => {
+  const { styles, themeModeSystem } = useBlurProgressStyles()
+
+  return (
+    <ProgressiveBlurView
+      style={[styles.wrapper, style]}
+      blurType={themeModeSystem}
+      blurAmount={blurAmount}
+      blurRounds={blurRounds}
+      startOffset={startOffset}
+      direction={direction}
+    >
+      {children}
+    </ProgressiveBlurView>
+  )
+}
+
+export default BlurProgress

package/src/shared/ui/atoms/blur-progress/blur-progress.types.tsx

@@ -0,0 +1,5 @@
+import { type ProgressiveBlurViewProps } from '@sbaiahmed1/react-native-blur'
+
+type BlurProgressProps = ProgressiveBlurViewProps
+
+export type { BlurProgressProps }

package/src/shared/ui/atoms/blur-progress/index.ts

@@ -0,0 +1 @@
+export { default as BlurProgress } from './blur-progress'

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

@@ -3,8 +3,10 @@ import { Blur } from '../blur'
 import { type GlassProps } from './glass.types'
 
 const Glass = ({
-  reference,
-  glassEffectStyle = 'clear',
+  style,
+  ref,
+  children,
+  glassEffectStyle = 'regular',
   tintColor,
   colorScheme,
   isInteractive = true,
@@ -12,15 +14,21 @@ const Glass = ({
 }: GlassProps) => {
   return isGlassEffectAPIAvailable() ? (
     <GlassView
-      ref={reference}
+      ref={ref}
+      style={style}
       glassEffectStyle={glassEffectStyle}
       tintColor={tintColor}
       colorScheme={colorScheme}
       isInteractive={isInteractive}
       {...props}
-    />
+    >
+      {children}
+    </GlassView>
   ) : (
-    <Blur reference={reference} {...props} />
+    <Blur ref={ref} style={style} {...props}>
+      {children}
+    </Blur>
   )
 }
+
 export default Glass

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

@@ -3,7 +3,7 @@ import { type View } from 'react-native'
 import { type GlassViewProps } from 'expo-glass-effect'
 
 type GlassProps = GlassViewProps & {
-  reference?: Ref<View>
+  ref?: Ref<View>
 }
 
 export type { GlassProps }

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

@@ -0,0 +1,82 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '../../../lib'
+
+const useIconStyles = () => {
+  const { COLORS, SIZES } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    icon: {},
+  })
+
+  const stylesByVariant = StyleSheet.create({
+    base: {
+      color: COLORS.TYPOGRAPHY.BASE,
+    },
+    secondary: {
+      color: COLORS.TYPOGRAPHY.SECONDARY,
+    },
+    disabled: {
+      color: COLORS.TYPOGRAPHY.DISABLED,
+    },
+
+    transparent: {
+      color: COLORS.TYPOGRAPHY.TRANSPARENT,
+    },
+    matter: {
+      color: COLORS.TYPOGRAPHY.MATTER,
+    },
+    contrast: {
+      color: COLORS.TYPOGRAPHY.CONTRAST,
+    },
+
+    primary: {
+      color: COLORS.TYPOGRAPHY.PRIMARY,
+    },
+    info: {
+      color: COLORS.TYPOGRAPHY.INFO,
+    },
+    success: {
+      color: COLORS.TYPOGRAPHY.SUCCESS,
+    },
+    warning: {
+      color: COLORS.TYPOGRAPHY.WARNING,
+    },
+    danger: {
+      color: COLORS.TYPOGRAPHY.DANGER,
+    },
+
+    neutral: {
+      color: COLORS.TYPOGRAPHY.NEUTRAL,
+    },
+    outline: {
+      color: COLORS.TYPOGRAPHY.OUTLINE,
+    },
+  })
+
+  const stylesBySize = StyleSheet.create({
+    xl: {
+      width: SIZES['12XL'],
+      height: SIZES['12XL'],
+    },
+    l: {
+      width: SIZES['6XL'],
+      height: SIZES['6XL'],
+    },
+    m: {
+      width: SIZES['4XL'],
+      height: SIZES['4XL'],
+    },
+    s: {
+      width: SIZES['3XL'],
+      height: SIZES['3XL'],
+    },
+    xs: {
+      width: SIZES['2XL'],
+      height: SIZES['2XL'],
+    },
+  })
+
+  return { styles, stylesByVariant, stylesBySize }
+}
+
+export { useIconStyles }

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

@@ -0,0 +1,21 @@
+import { ICONS } from '../../../assets'
+import { useIconStyles } from './icon.styles'
+import { type IconProps } from './icon.types'
+
+const Icon = ({ ref, style, name, variant = 'base', size = 'm', svgAnimatedProps }: IconProps) => {
+  const { styles, stylesByVariant, stylesBySize } = useIconStyles()
+
+  const SvgIcon = ICONS[name] || ICONS.default
+
+  return (
+    <SvgIcon
+      ref={ref}
+      style={[styles.icon, style]}
+      size={stylesBySize[size].width}
+      color={stylesByVariant[variant].color}
+      animatedProps={svgAnimatedProps}
+    />
+  )
+}
+
+export default Icon

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

@@ -0,0 +1,23 @@
+import { type KeyOf, type SizeRange } from '@mediacubeco/base/types'
+import { type ICONS, type IconProps as SvgIconProps } from '../../../assets'
+import { type COLOR_BY_VARIANT } from '../../../lib'
+
+type IconProps = {
+  ref?: SvgIconProps['ref']
+  style?: SvgIconProps['style']
+  name: keyof typeof ICONS
+  variant?: KeyOf<typeof COLOR_BY_VARIANT>
+  /**
+   * @default 'm'
+   *
+   * @prop 'xs' - 16
+   * @prop 's' - 20
+   * @prop 'm' - 24
+   * @prop 'l' - 32
+   * @prop 'xl' - 56
+   **/
+  size?: SizeRange<1, 1>
+  svgAnimatedProps?: SvgIconProps['animatedProps']
+}
+
+export type { IconProps }

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

@@ -0,0 +1,2 @@
+export { default as Icon } from './icon'
+export type { IconProps } from './icon.types'

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

@@ -1,2 +1,9 @@
 export * from './blur'
+export * from './blur-progress'
 export * from './glass'
+export * from './icon'
+export * from './skeleton'
+export * from './spinner'
+export * from './text'
+export * from './touch'
+export * from './visibility'

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

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './skeleton'
+export type { SkeletonProps } from './skeleton.types'

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

@@ -0,0 +1,69 @@
+import { DEFAULT_LAYOUT, useLayout } from '@mediacubeco/base-react-native/hooks'
+import { useEffect, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+import { useThemeMode } from '../../../lib'
+
+/** Стили плашки-плейсхолдера и бесконечный проезд светового блика по её ширине. */
+const useSkeletonStyles = () => {
+  const [{ width }, setLayout] = useState(DEFAULT_LAYOUT)
+  const translate = useSharedValue(0)
+  const { COLORS, SIZES, ANIMATIONS } = useThemeMode()
+
+  const handleLayout = useLayout({ setLayout: setLayout })
+
+  /** Стопы блика: прозрачные края и светлый центр — даёт мягкий световой проезд. */
+  const shimmerColorList = [
+    COLORS.FILL.TRANSPARENT,
+    COLORS.FILL.CONTRAST_HALF,
+    COLORS.FILL.TRANSPARENT,
+  ] as const
+
+  const styles = StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+      height: SIZES['2XL'],
+      borderRadius: SIZES['L'],
+      backgroundColor: COLORS.FILL.BASE,
+    },
+    shimmer: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+    gradient: {
+      flex: 1,
+    },
+  })
+
+  const animatedStyles = {
+    shimmer: useAnimatedStyle(() => {
+      return {
+        transform: [{ translateX: translate.value }],
+      }
+    }),
+  }
+
+  useEffect(() => {
+    if (width === 0) {
+      return
+    }
+
+    translate.set(-width)
+    translate.set(withRepeat(withTiming(width, ANIMATIONS.TIMING.LONG), -1))
+
+    return () => cancelAnimation(translate)
+  }, [width, translate, ANIMATIONS.TIMING.LONG])
+
+  return { styles, shimmerColorList, animatedStyles, handleLayout }
+}
+
+export { useSkeletonStyles }

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

@@ -0,0 +1,26 @@
+import { View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { LinearGradient } from 'expo-linear-gradient'
+import { useSkeletonStyles } from './skeleton.styles'
+import { type SkeletonProps } from './skeleton.types'
+
+/** Плейсхолдер загрузки: плашка формы контента со световым бликом, проезжающим по ширине. */
+const Skeleton = ({ style }: SkeletonProps) => {
+  const { styles, shimmerColorList, animatedStyles, handleLayout } = useSkeletonStyles()
+
+  return (
+    <View style={[styles.container, style]} onLayout={handleLayout}>
+      <Animated.View style={[styles.shimmer, animatedStyles.shimmer]}>
+        <LinearGradient
+          style={styles.gradient}
+          colors={shimmerColorList}
+          locations={[0, 0.5, 1]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+export default Skeleton

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

@@ -0,0 +1,9 @@
+import { type StyleProp, type ViewStyle } from 'react-native'
+
+/** Пропсы плейсхолдера загрузки Skeleton. */
+type SkeletonProps = {
+  /** Габариты плашки: ширина, высота и радиус задаются через `style` (перекрывают дефолты). */
+  style?: StyleProp<ViewStyle>
+}
+
+export type { SkeletonProps }

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

@@ -0,0 +1,2 @@
+export { default as Spinner } from './spinner'
+export type { SpinnerProps } from './spinner.types'

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

@@ -0,0 +1,102 @@
+import { useEffect } from 'react'
+import { StyleSheet } from 'react-native'
+import {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+import { useThemeMode } from '../../../lib'
+
+/** Стили и бесконечная анимация вращения Spinner. */
+const useSpinnerStyles = () => {
+  const rotate = useSharedValue(0)
+  const { COLORS, SIZES, ANIMATIONS } = useThemeMode()
+
+  const stylesByVariant = StyleSheet.create({
+    base: {
+      color: COLORS.TYPOGRAPHY.BASE,
+    },
+    secondary: {
+      color: COLORS.TYPOGRAPHY.SECONDARY,
+    },
+    disabled: {
+      color: COLORS.TYPOGRAPHY.DISABLED,
+    },
+
+    transparent: {
+      color: COLORS.TYPOGRAPHY.TRANSPARENT,
+    },
+    matter: {
+      color: COLORS.TYPOGRAPHY.MATTER,
+    },
+    contrast: {
+      color: COLORS.TYPOGRAPHY.CONTRAST,
+    },
+
+    primary: {
+      color: COLORS.TYPOGRAPHY.PRIMARY,
+    },
+    info: {
+      color: COLORS.TYPOGRAPHY.INFO,
+    },
+    success: {
+      color: COLORS.TYPOGRAPHY.SUCCESS,
+    },
+    warning: {
+      color: COLORS.TYPOGRAPHY.WARNING,
+    },
+    danger: {
+      color: COLORS.TYPOGRAPHY.DANGER,
+    },
+
+    neutral: {
+      color: COLORS.TYPOGRAPHY.NEUTRAL,
+    },
+    outline: {
+      color: COLORS.TYPOGRAPHY.OUTLINE,
+    },
+  })
+
+  const stylesBySize = StyleSheet.create({
+    xl: {
+      width: SIZES['12XL'],
+      height: SIZES['12XL'],
+    },
+    l: {
+      width: SIZES['6XL'],
+      height: SIZES['6XL'],
+    },
+    m: {
+      width: SIZES['4XL'],
+      height: SIZES['4XL'],
+    },
+    s: {
+      width: SIZES['3XL'],
+      height: SIZES['3XL'],
+    },
+    xs: {
+      width: SIZES['2XL'],
+      height: SIZES['2XL'],
+    },
+  })
+
+  const animatedStyles = {
+    spinner: useAnimatedStyle(() => {
+      return {
+        transform: [{ rotate: `${rotate.value * 360}deg` }],
+      }
+    }),
+  }
+
+  useEffect(() => {
+    rotate.set(withRepeat(withTiming(1, ANIMATIONS.TIMING.LONG), -1))
+
+    return () => cancelAnimation(rotate)
+  }, [rotate, ANIMATIONS.TIMING.LONG])
+
+  return { stylesByVariant, stylesBySize, animatedStyles }
+}
+
+export { useSpinnerStyles }

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

@@ -0,0 +1,48 @@
+import Animated from 'react-native-reanimated'
+import { Circle, Svg } from 'react-native-svg'
+import { useSpinnerStyles } from './spinner.styles'
+import { type SpinnerProps } from './spinner.types'
+
+/** Радиус дуги в системе координат viewBox 24×24. */
+const RADIUS = 9
+/** Длина окружности дуги — база для расчёта штриховки видимого сектора. */
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+/** Доля окружности под видимой дугой; остаток — прозрачный зазор. */
+const ARC_RATIO = 0.7
+
+/** Крутящийся индикатор загрузки: дуга поверх бледной круговой дорожки. */
+const Spinner = ({ ref, style, variant = 'base', size = 'm' }: SpinnerProps) => {
+  const { stylesByVariant, stylesBySize, animatedStyles } = useSpinnerStyles()
+
+  return (
+    <Animated.View style={[stylesBySize[size], animatedStyles.spinner, style]}>
+      <Svg
+        ref={ref}
+        width={stylesBySize[size].width}
+        height={stylesBySize[size].width}
+        viewBox={'0 0 24 24'}
+        fill={'none'}
+      >
+        <Circle
+          cx={12}
+          cy={12}
+          r={RADIUS}
+          stroke={stylesByVariant[variant].color}
+          strokeOpacity={0.2}
+          strokeWidth={2.5}
+        />
+        <Circle
+          cx={12}
+          cy={12}
+          r={RADIUS}
+          stroke={stylesByVariant[variant].color}
+          strokeWidth={2.5}
+          strokeLinecap={'round'}
+          strokeDasharray={`${CIRCUMFERENCE * ARC_RATIO} ${CIRCUMFERENCE}`}
+        />
+      </Svg>
+    </Animated.View>
+  )
+}
+
+export default Spinner

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

@@ -0,0 +1,25 @@
+import { type KeyOf, type SizeRange } from '@mediacubeco/base/types'
+import { type Ref } from 'react'
+import type Svg from 'react-native-svg'
+import { type SvgProps } from 'react-native-svg'
+import { type COLOR_BY_VARIANT } from '../../../lib'
+
+/** Пропсы индикатора загрузки Spinner. */
+type SpinnerProps = {
+  ref?: Ref<Svg>
+  style?: SvgProps['style']
+  /** Цветовой вариант из палитры типографики; перекрывается прямым `color`. */
+  variant?: KeyOf<typeof COLOR_BY_VARIANT>
+  /**
+   * @default 'm'
+   *
+   * @prop 'xs' - 16
+   * @prop 's' - 20
+   * @prop 'm' - 24
+   * @prop 'l' - 32
+   * @prop 'xl' - 56
+   **/
+  size?: SizeRange<1, 1>
+}
+
+export type { SpinnerProps }

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

@@ -0,0 +1,2 @@
+export { default as Text } from './text'
+export type { TextProps } from './text.types'