@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

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

@@ -0,0 +1,186 @@
+import { StyleSheet } from 'react-native'
+import { useThemeMode } from '../../../lib'
+
+/** Стили атома Text: цвет по variant, типографика (семейство/размер) по type, выравнивание по align. */
+const useTextStyles = () => {
+  const { SIZES, FONTS, COLORS } = useThemeMode()
+
+  const styles = StyleSheet.create({
+    text: {},
+  })
+
+  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 stylesByType = StyleSheet.create({
+    bigTitle: {
+      fontFamily: FONTS.BASE_BOLD,
+      fontSize: SIZES['14XL'],
+      lineHeight: SIZES['14XL'] * 1.2,
+      letterSpacing: -SIZES['XS'],
+    },
+    /* big-header */
+    bigHeader: {
+      fontFamily: FONTS.BASE_BOLD,
+      fontSize: SIZES['7XL'],
+      lineHeight: SIZES['7XL'] * 1.2,
+      letterSpacing: -SIZES['2XS'],
+    },
+    /* h1 */
+    h1: {
+      fontFamily: FONTS.BASE_BOLD,
+      fontSize: SIZES['5XL'],
+      lineHeight: SIZES['5XL'] * 1.2,
+      letterSpacing: -SIZES['2XS'],
+    },
+    /* h2 */
+    h2: {
+      fontFamily: FONTS.BASE_BOLD,
+      fontSize: SIZES['3XL'],
+      lineHeight: SIZES['3XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* h3 */
+    h3: {
+      fontFamily: FONTS.BASE_BOLD,
+      fontSize: SIZES['2XL'],
+      lineHeight: SIZES['2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* subtitle */
+    subtitle: {
+      fontFamily: FONTS.BASE_BOLD,
+      fontSize: SIZES['2XL'],
+      lineHeight: SIZES['2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* button */
+    button: {
+      fontFamily: FONTS.BASE_SEMIBOLD,
+      fontSize: SIZES['2XL'],
+      lineHeight: SIZES['2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* button-small */
+    buttonSmall: {
+      fontFamily: FONTS.BASE_SEMIBOLD,
+      fontSize: SIZES['XL-2XL'],
+      lineHeight: SIZES['XL-2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* body */
+    body: {
+      fontFamily: FONTS.BASE_REGULAR,
+      fontSize: SIZES['2XL'],
+      lineHeight: SIZES['2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* outline */
+    outline: {
+      fontFamily: FONTS.BASE_REGULAR,
+      fontSize: SIZES['XL-2XL'],
+      lineHeight: SIZES['XL-2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* description */
+    description: {
+      fontFamily: FONTS.BASE_REGULAR,
+      fontSize: SIZES['XL'],
+      lineHeight: SIZES['XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* small */
+    small: {
+      fontFamily: FONTS.BASE_REGULAR,
+      fontSize: SIZES['L-XL'],
+      lineHeight: SIZES['L-XL'] * 1.2,
+      letterSpacing: -SIZES['4XS'],
+    },
+    /* body-sb */
+    bodySB: {
+      fontFamily: FONTS.BASE_SEMIBOLD,
+      fontSize: SIZES['2XL'],
+      lineHeight: SIZES['2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* outline-sb */
+    outlineSB: {
+      fontFamily: FONTS.BASE_SEMIBOLD,
+      fontSize: SIZES['XL-2XL'],
+      lineHeight: SIZES['XL-2XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* description-sb */
+    descriptionSB: {
+      fontFamily: FONTS.BASE_SEMIBOLD,
+      fontSize: SIZES['XL'],
+      lineHeight: SIZES['XL'] * 1.2,
+      letterSpacing: -SIZES['3XS'],
+    },
+    /* small-sb */
+    smallSB: {
+      fontFamily: FONTS.BASE_SEMIBOLD,
+      fontSize: SIZES['L-XL'],
+      lineHeight: SIZES['L-XL'] * 1.2,
+      letterSpacing: -SIZES['4XS'],
+    },
+  })
+
+  const stylesByAlign = StyleSheet.create({
+    start: {
+      textAlign: 'left',
+    },
+    center: {
+      textAlign: 'center',
+    },
+    end: {
+      textAlign: 'right',
+    },
+  })
+
+  return { styles, stylesByVariant, stylesByType, stylesByAlign }
+}
+
+export { useTextStyles }

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

@@ -0,0 +1,37 @@
+import { Text as NativeText } from 'react-native'
+import { useTextStyles } from './text.styles'
+import { type TextProps } from './text.types'
+
+const Text = ({
+  ref,
+  style,
+  children,
+  type = 'body',
+  variant = 'base',
+  align = 'start',
+  lineCount,
+  shouldFit,
+  onPress,
+}: TextProps) => {
+  const { styles, stylesByVariant, stylesByType, stylesByAlign } = useTextStyles()
+
+  return (
+    <NativeText
+      ref={ref}
+      style={[
+        styles.text,
+        stylesByVariant[variant],
+        stylesByType[type],
+        stylesByAlign[align],
+        style,
+      ]}
+      numberOfLines={lineCount}
+      adjustsFontSizeToFit={shouldFit}
+      onPress={onPress}
+    >
+      {children}
+    </NativeText>
+  )
+}
+
+export default Text

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

@@ -0,0 +1,35 @@
+import { type KeyOf } from '@mediacubeco/base/types'
+import { type Ref } from 'react'
+import { type Text as NativeText, type TextProps as NativeTextProps } from 'react-native'
+import { type COLOR_BY_VARIANT } from '../../../lib'
+
+type TextProps = {
+  ref?: Ref<NativeText>
+  style?: NativeTextProps['style']
+  children?: NativeTextProps['children']
+  /* TODO: maybe rename to size: SizeRange */
+  type?:
+    | 'bigTitle'
+    | 'bigHeader'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'subtitle'
+    | 'button'
+    | 'buttonSmall'
+    | 'body'
+    | 'outline'
+    | 'description'
+    | 'small'
+    | 'bodySB'
+    | 'outlineSB'
+    | 'descriptionSB'
+    | 'smallSB'
+  variant?: KeyOf<typeof COLOR_BY_VARIANT>
+  align?: 'start' | 'center' | 'end'
+  lineCount?: NativeTextProps['numberOfLines']
+  shouldFit?: NativeTextProps['adjustsFontSizeToFit']
+  onPress?: NativeTextProps['onPress']
+}
+
+export type { TextProps }

package/src/shared/ui/atoms/touch/components/haptics/haptics.styles.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+import * as Haptics from 'expo-haptics'
+
+const useHapticsStyles = () => {
+  const styles = StyleSheet.create({
+    haptics: {},
+  })
+
+  const handleHapticsIn = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+  }, [])
+
+  const handleHapticsOut = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+  }, [])
+
+  return { styles, handleHapticsIn, handleHapticsOut }
+}
+
+export { useHapticsStyles }

package/src/shared/ui/atoms/touch/components/haptics/haptics.tsx

@@ -0,0 +1,28 @@
+import { useImperativeHandle } from 'react'
+import { useHapticsStyles } from './haptics.styles'
+import { type HapticsProps } from './haptics.types'
+
+const Haptics = ({ ref, children, renderWrapper, renderPress }: HapticsProps) => {
+  const { styles, handleHapticsIn, handleHapticsOut } = useHapticsStyles()
+
+  useImperativeHandle(ref, () => {
+    return {
+      hapticsIn: handleHapticsIn,
+      hapticsOut: handleHapticsOut,
+    }
+  }, [handleHapticsIn, handleHapticsOut])
+
+  return (
+    <>
+      {renderWrapper(
+        <>
+          {children}
+          {renderPress()}
+        </>,
+        styles.haptics
+      )}
+    </>
+  )
+}
+
+export default Haptics

package/src/shared/ui/atoms/touch/components/haptics/haptics.types.ts

@@ -0,0 +1,17 @@
+import { type Nullable } from '@mediacubeco/base/types'
+import { type ReactNode, type Ref } from 'react'
+import { type GestureResponderEvent, type ViewStyle } from 'react-native'
+
+type HapticsRef = {
+  hapticsIn: (event: GestureResponderEvent) => void
+  hapticsOut: (event: GestureResponderEvent) => void
+}
+
+type HapticsProps = {
+  ref: Ref<Nullable<HapticsRef>>
+  children: ReactNode
+  renderWrapper: (children: ReactNode, style?: ViewStyle) => ReactNode
+  renderPress: () => ReactNode
+}
+
+export type { HapticsRef, HapticsProps }

package/src/shared/ui/atoms/touch/components/haptics/index.ts

@@ -0,0 +1,2 @@
+export { default as Haptics } from './haptics'
+export type { HapticsRef, HapticsProps } from './haptics.types'

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

@@ -0,0 +1,3 @@
+export * from './haptics'
+export * from './ripple'
+export * from './spring'

package/src/shared/ui/atoms/touch/components/ripple/index.ts

@@ -0,0 +1,2 @@
+export { default as Ripple } from './ripple'
+export type { RippleRef, RippleProps } from './ripple.types'

package/src/shared/ui/atoms/touch/components/ripple/ripple.styles.ts

@@ -0,0 +1,78 @@
+import { DEFAULT_LAYOUT, useLayout } from '@mediacubeco/base-react-native/hooks'
+import { useCallback } from 'react'
+import { type GestureResponderEvent, StyleSheet } from 'react-native'
+import { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { useThemeMode, useThemeSetup } from '../../../../../lib'
+
+const useRippleStyles = () => {
+  const { isThemeModeDark } = useThemeSetup()
+  const { COLORS, TRANSPARENCIES, ANIMATIONS } = useThemeMode()
+  const rippleX = useSharedValue(0)
+  const rippleY = useSharedValue(0)
+  const rippleScale = useSharedValue(0)
+  const rippleOpacity = useSharedValue(0)
+  const wrapperLayout = useSharedValue(DEFAULT_LAYOUT)
+  const handleWrapperLayout = useLayout({ setLayout: wrapperLayout.set })
+
+  const transparency = isThemeModeDark ? TRANSPARENCIES.STRONG : TRANSPARENCIES.LIGHT
+
+  const styles = StyleSheet.create({
+    wrapper: {
+      ...StyleSheet.absoluteFill,
+      pointerEvents: 'none',
+      overflow: 'hidden',
+    },
+    ripple: {
+      position: 'absolute',
+      backgroundColor: COLORS.FILL.NEUTRAL_SURFACE,
+    },
+  })
+
+  const animatedStyles = {
+    ripple: useAnimatedStyle(() => {
+      const radius = Math.hypot(
+        Math.max(rippleX.value, wrapperLayout.value.width - rippleX.value),
+        Math.max(rippleY.value, wrapperLayout.value.height - rippleY.value)
+      )
+
+      return {
+        top: rippleY.value - radius,
+        left: rippleX.value - radius,
+        width: radius * 2,
+        height: radius * 2,
+        borderRadius: radius,
+        opacity: interpolate(rippleOpacity.value, [0, 1], [TRANSPARENCIES.INVISIBLE, transparency]),
+        transform: [
+          {
+            scale: rippleScale.value,
+          },
+        ],
+      }
+    }),
+  }
+
+  const handleRippleIn = useCallback(
+    (event: GestureResponderEvent) => {
+      rippleX.set(event.nativeEvent.locationX)
+      rippleY.set(event.nativeEvent.locationY)
+      rippleScale.set(0)
+      rippleOpacity.set(1)
+      rippleScale.set(withTiming(1, ANIMATIONS.TIMING.BASE))
+    },
+    [rippleX, rippleY, rippleScale, rippleOpacity, ANIMATIONS.TIMING.BASE]
+  )
+
+  const handleRippleOut = useCallback(() => {
+    rippleOpacity.set(withTiming(TRANSPARENCIES.INVISIBLE, ANIMATIONS.TIMING.BASE))
+  }, [rippleOpacity, TRANSPARENCIES, ANIMATIONS.TIMING.BASE])
+
+  return {
+    styles,
+    animatedStyles,
+    handleWrapperLayout,
+    handleRippleIn,
+    handleRippleOut,
+  }
+}
+
+export { useRippleStyles }

package/src/shared/ui/atoms/touch/components/ripple/ripple.tsx

@@ -0,0 +1,29 @@
+import { useImperativeHandle } from 'react'
+import { View } from 'react-native'
+import Animated from 'react-native-reanimated'
+import { useRippleStyles } from './ripple.styles'
+import { type RippleProps } from './ripple.types'
+
+const Ripple = ({ ref, children, renderWrapper, renderPress }: RippleProps) => {
+  const { styles, animatedStyles, handleWrapperLayout, handleRippleIn, handleRippleOut } =
+    useRippleStyles()
+
+  useImperativeHandle(ref, () => {
+    return {
+      rippleIn: handleRippleIn,
+      rippleOut: handleRippleOut,
+    }
+  }, [handleRippleIn, handleRippleOut])
+
+  return renderWrapper(
+    <>
+      <View style={styles.wrapper} onLayout={handleWrapperLayout}>
+        <Animated.View style={[styles.ripple, animatedStyles.ripple]} />
+      </View>
+      {children}
+      {renderPress()}
+    </>
+  )
+}
+
+export default Ripple

package/src/shared/ui/atoms/touch/components/ripple/ripple.types.ts

@@ -0,0 +1,17 @@
+import { type Nullable } from '@mediacubeco/base/types'
+import { type ReactNode, type Ref } from 'react'
+import { type GestureResponderEvent, type ViewStyle } from 'react-native'
+
+type RippleRef = {
+  rippleIn: (event: GestureResponderEvent) => void
+  rippleOut: (event: GestureResponderEvent) => void
+}
+
+type RippleProps = {
+  ref: Ref<Nullable<RippleRef>>
+  children: ReactNode
+  renderWrapper: (children: ReactNode, style?: ViewStyle) => ReactNode
+  renderPress: () => ReactNode
+}
+
+export type { RippleRef, RippleProps }

package/src/shared/ui/atoms/touch/components/spring/index.ts

@@ -0,0 +1,2 @@
+export { default as Spring } from './spring'
+export type { SpringRef, SpringProps } from './spring.types'

package/src/shared/ui/atoms/touch/components/spring/spring.styles.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react'
+import { StyleSheet } from 'react-native'
+import { interpolate, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
+
+const useSpringStyles = () => {
+  const spring = useSharedValue(0)
+
+  const styles = StyleSheet.create({
+    spring: {},
+  })
+
+  const animatedStyles = {
+    spring: useAnimatedStyle(() => {
+      return {
+        transform: [{ scale: interpolate(spring.value, [0, 1], [1, 0.95]) }],
+      }
+    }),
+  }
+
+  const handleSpringIn = useCallback(() => {
+    spring.set(withSpring(1))
+  }, [spring])
+
+  const handleSpringOut = useCallback(() => {
+    spring.set(withSpring(0))
+  }, [spring])
+
+  return { styles, animatedStyles, handleSpringIn, handleSpringOut }
+}
+
+export { useSpringStyles }

package/src/shared/ui/atoms/touch/components/spring/spring.tsx

@@ -0,0 +1,28 @@
+import { useImperativeHandle } from 'react'
+import { useSpringStyles } from './spring.styles'
+import { type SpringProps } from './spring.types'
+
+const Spring = ({ ref, children, renderWrapper, renderPress }: SpringProps) => {
+  const { styles, animatedStyles, handleSpringIn, handleSpringOut } = useSpringStyles()
+
+  useImperativeHandle(ref, () => {
+    return {
+      springIn: handleSpringIn,
+      springOut: handleSpringOut,
+    }
+  }, [handleSpringIn, handleSpringOut])
+
+  return (
+    <>
+      {renderWrapper(
+        <>
+          {children}
+          {renderPress()}
+        </>,
+        [styles.spring, animatedStyles.spring]
+      )}
+    </>
+  )
+}
+
+export default Spring

package/src/shared/ui/atoms/touch/components/spring/spring.types.ts

@@ -0,0 +1,17 @@
+import { type Nullable } from '@mediacubeco/base/types'
+import { type ReactNode, type Ref } from 'react'
+import { type GestureResponderEvent, type ViewProps } from 'react-native'
+
+type SpringRef = {
+  springIn: (event: GestureResponderEvent) => void
+  springOut: (event: GestureResponderEvent) => void
+}
+
+type SpringProps = {
+  ref: Ref<Nullable<SpringRef>>
+  children?: ReactNode
+  renderWrapper: (children: ViewProps['children'], style: ViewProps['style']) => ReactNode
+  renderPress: () => ReactNode
+}
+
+export type { SpringRef, SpringProps }

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

@@ -0,0 +1,2 @@
+export { default as Touch } from './touch'
+export type { TouchProps } from './touch.types'

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

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native'
+
+const useTouchStyles = () => {
+  const styles = StyleSheet.create({
+    touch: {},
+    press: {
+      ...StyleSheet.absoluteFill,
+    },
+  })
+
+  return { styles }
+}
+
+export { useTouchStyles }