@magmamath/students-features 1.6.4 → 1.7.0-rc.0

package/src/features/fluency/hooks/useCardSnapAnimation.ts

@@ -1,170 +0,0 @@
-import { useRef } from 'react'
-import { Dimensions } from 'react-native'
-import {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withDelay,
-  withSequence,
-  Easing,
-  runOnJS,
-} from 'react-native-reanimated'
-import type { AnimatedStyle } from 'react-native-reanimated'
-import type { ViewStyle } from 'react-native'
-
-export type SnapDirection = 'left' | 'right'
-
-export type SnapStyles = {
-  front: AnimatedStyle<ViewStyle>
-  near: AnimatedStyle<ViewStyle>
-  mid: AnimatedStyle<ViewStyle>
-  far: AnimatedStyle<ViewStyle>
-}
-
-type UseCardSnapAnimationParams = {
-  onComplete?: () => void
-}
-
-const SHAKE_STEP_DURATION = 60
-
-const SNAP_SUCCESS_DURATION = 300
-
-const SNAP = {
-  duration: 240,
-  easing: Easing.bezier(0.6, 0, 0.4, 1),
-  rotate: 18,
-  scale: 0.85,
-  y: -40,
-} as const
-
-const STEP_UP = {
-  delay: 80,
-  duration: 320,
-  easing: Easing.bezier(0.3, 0.9, 0.2, 1),
-} as const
-
-const L = [
-  { top: 12, side: 20 },
-  { top: 24, side: 40 },
-  { top: 36, side: 60 },
-]
-
-export const useCardSnapAnimation = (params: UseCardSnapAnimationParams = {}) => {
-  const isAnimating = useRef(false)
-  const onCompleteRef = useRef(params.onComplete)
-  onCompleteRef.current = params.onComplete
-
-  const translateX = useSharedValue(0)
-  const translateY = useSharedValue(0)
-  const rotate = useSharedValue(0)
-  const scale = useSharedValue(1)
-  const opacity = useSharedValue(1)
-
-  const l1Top = useSharedValue(L[0].top)
-  const l1Side = useSharedValue(L[0].side)
-  const l2Top = useSharedValue(L[1].top)
-  const l2Side = useSharedValue(L[1].side)
-  const l3Top = useSharedValue(L[2].top)
-  const l3Side = useSharedValue(L[2].side)
-  const l3Opacity = useSharedValue(0)
-
-  const front = useAnimatedStyle(
-    () => ({
-      transform: [
-        { translateX: translateX.value },
-        { translateY: translateY.value },
-        { rotate: `${rotate.value}deg` },
-        { scale: scale.value },
-      ],
-      opacity: opacity.value,
-    }),
-    [translateX, translateY, rotate, scale, opacity],
-  )
-
-  const near = useAnimatedStyle(
-    () => ({ top: l1Top.value, left: l1Side.value, right: l1Side.value }),
-    [l1Top, l1Side],
-  )
-
-  const mid = useAnimatedStyle(
-    () => ({ top: l2Top.value, left: l2Side.value, right: l2Side.value }),
-    [l2Top, l2Side],
-  )
-
-  const far = useAnimatedStyle(
-    () => ({ top: l3Top.value, left: l3Side.value, right: l3Side.value, opacity: l3Opacity.value }),
-    [l3Top, l3Side, l3Opacity],
-  )
-
-  const complete = () => {
-    isAnimating.current = false
-    onCompleteRef.current?.()
-  }
-
-  const resetBackingCards = () => {
-    l1Top.value = L[0].top
-    l1Side.value = L[0].side
-    l2Top.value = L[1].top
-    l2Side.value = L[1].side
-    l3Top.value = L[2].top
-    l3Side.value = L[2].side
-    l3Opacity.value = 0
-  }
-
-  const resetFrontCard = () => {
-    translateX.value = 0
-    translateY.value = 0
-    rotate.value = 0
-    scale.value = 1
-    opacity.value = 1
-  }
-
-  const snap = (toX: number, toRotate: number, duration: number = SNAP.duration) => {
-    const snapConfig = { duration, easing: SNAP.easing }
-    const stepConfig = { duration: STEP_UP.duration, easing: STEP_UP.easing }
-
-    translateX.value = withTiming(toX, snapConfig)
-    translateY.value = withTiming(SNAP.y, snapConfig)
-    rotate.value = withTiming(toRotate, snapConfig)
-    scale.value = withTiming(SNAP.scale, snapConfig)
-    opacity.value = withTiming(0, snapConfig)
-
-    l1Top.value = withDelay(
-      STEP_UP.delay,
-      withTiming(0, stepConfig, () => runOnJS(complete)()),
-    )
-    l1Side.value = withDelay(STEP_UP.delay, withTiming(0, stepConfig))
-    l2Top.value = withDelay(STEP_UP.delay, withTiming(L[0].top, stepConfig))
-    l2Side.value = withDelay(STEP_UP.delay, withTiming(L[0].side, stepConfig))
-    l3Top.value = withDelay(STEP_UP.delay, withTiming(L[1].top, stepConfig))
-    l3Side.value = withDelay(STEP_UP.delay, withTiming(L[1].side, stepConfig))
-    l3Opacity.value = withDelay(STEP_UP.delay, withTiming(1, stepConfig))
-  }
-
-  const trigger = (direction: SnapDirection) => {
-    if (isAnimating.current) return false
-    isAnimating.current = true
-    resetFrontCard()
-    resetBackingCards()
-
-    const screenWidth = Dimensions.get('window').width
-    const toX = direction === 'right' ? screenWidth * 1.6 : -screenWidth * 1.6
-    const toRotate = direction === 'right' ? SNAP.rotate : -SNAP.rotate
-
-    if (direction === 'right') {
-      snap(toX, toRotate, SNAP_SUCCESS_DURATION)
-      return true
-    }
-
-    translateX.value = withSequence(
-      withTiming(-10, { duration: SHAKE_STEP_DURATION }),
-      withTiming(10, { duration: SHAKE_STEP_DURATION }),
-      withTiming(-6, { duration: SHAKE_STEP_DURATION }),
-      withTiming(6, { duration: SHAKE_STEP_DURATION }),
-      withTiming(0, { duration: SHAKE_STEP_DURATION }, () => runOnJS(snap)(toX, toRotate)),
-    )
-    return true
-  }
-
-  return { snapStyles: { front, near, mid, far } as SnapStyles, trigger, resetBackingCards }
-}

package/src/features/fluency/hooks/useFluencyCardDeckAnimation.ts

@@ -1,49 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from 'react'
-
-import { useCardSnapAnimation, type SnapDirection } from './useCardSnapAnimation'
-import { type AttemptStatus } from '../shared/fluency.constants'
-import type { FluencyCardDisplayContent } from '../shared/fluencySolving.types'
-
-type StartCardExitParams = {
-  cardContent: FluencyCardDisplayContent
-  direction: SnapDirection
-  status: AttemptStatus
-}
-
-export const useFluencyCardDeckAnimation = () => {
-  const [exitingCardContent, setExitingCardContent] = useState<FluencyCardDisplayContent | null>(
-    null,
-  )
-  const [exitingCardStatus, setExitingCardStatus] = useState<AttemptStatus | null>(null)
-  const [shouldResetBackingCards, setShouldResetBackingCards] = useState(false)
-
-  const clearExitingCard = useCallback(() => {
-    setExitingCardContent(null)
-    setExitingCardStatus(null)
-    setShouldResetBackingCards(true)
-  }, [])
-
-  const animation = useCardSnapAnimation({ onComplete: clearExitingCard })
-
-  useLayoutEffect(() => {
-    if (!shouldResetBackingCards || exitingCardContent) return
-
-    animation.resetBackingCards()
-    setShouldResetBackingCards(false)
-  })
-
-  const startCardExit = ({ cardContent, direction, status }: StartCardExitParams) => {
-    if (!animation.trigger(direction)) return false
-
-    setExitingCardContent(cardContent)
-    setExitingCardStatus(status)
-    return true
-  }
-
-  return {
-    exitingCardContent,
-    exitingCardStatus,
-    snapStyles: animation.snapStyles,
-    startCardExit,
-  }
-}

package/src/features/fluency/hooks/useFluencyModePreset.ts

@@ -1,58 +0,0 @@
-import { useUnit } from 'effector-react'
-import { COLORS } from '@magmamath/react-native-ui'
-import type { ButtonColor } from '@magmamath/react-native-ui'
-import { FLUENCY_MODE_PRESETS, FluencyMasteryLevel } from '../shared/fluency.constants'
-import type { LegendItem } from '../shared/fluency.types'
-import { useFluency } from '../context/FluencyContext'
-import { useText } from '../../../i18n/i18n'
-
-type UseFluencyModePresetResult = {
-  symbol: string
-  label: string
-  colors: {
-    level: Record<FluencyMasteryLevel, string>
-    accent: string
-    streak: { gained: string; todayBorder: string }
-    button: ButtonColor
-  }
-  legend: { items: LegendItem[] }
-}
-
-export const useFluencyModePreset = (): UseFluencyModePresetResult => {
-  const t = useText()
-  const { model } = useFluency()
-  const mode = useUnit(model.matrix.$mode)
-  const preset = FLUENCY_MODE_PRESETS[mode]
-
-  const legendItems: LegendItem[] = [
-    { label: t('student.fluency.notStarted'), color: COLORS.NEUTRAL_2, withBorder: true },
-    {
-      label: t('student.fluency.masteryLearning'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.LEARNING],
-    },
-    {
-      label: t('student.fluency.masteryGrowing'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.GROWING],
-    },
-    {
-      label: t('student.fluency.masteryStrong'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.STRONG],
-    },
-    {
-      label: t('student.fluency.masteryMastered'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.MASTERED],
-    },
-  ]
-
-  return {
-    symbol: preset.symbol,
-    label: t(preset.matrix.operatorLabel),
-    colors: {
-      level: preset.matrix.levelColors,
-      accent: preset.accentColor,
-      streak: preset.header.streakColor,
-      button: preset.buttonColor,
-    },
-    legend: { items: legendItems },
-  }
-}

package/src/features/fluency/hooks/useFluencyNumpad.tsx

@@ -1,141 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { COLORS } from '@magmamath/react-native-ui'
-import { ButtonStates } from '@magmamath/react-native-ui'
-import { BackspaceIcon } from '../../../shared/icons/keyboard/BackspaceIcon'
-import { useUnit } from 'effector-react'
-import { isWeb } from '../../../shared/common.constants'
-import { KeyboardKeys } from '../../../lib/constants'
-import { useText } from '../../../i18n/i18n'
-import { useFluency } from '../context/FluencyContext'
-import { MAX_INPUT_LENGTH } from '../shared/fluency.constants'
-
-type UseFluencyNumpadProps = {
-  onSubmit: () => void
-}
-
-type NumpadKey = {
-  key: string
-  title: string | React.ReactNode
-  value: number | KeyboardKeys.BACKSPACE | KeyboardKeys.ENTER
-  customColorScheme?: typeof ACTION_KEY_COLOR_SCHEME
-}
-
-const ACTION_KEY_COLOR_SCHEME = {
-  [ButtonStates.DEFAULT]: {
-    backgroundColor: COLORS.NEUTRAL_3,
-    borderColor: COLORS.NEUTRAL_5,
-    raiseColor: COLORS.NEUTRAL_5,
-    color: COLORS.NEUTRAL_9,
-  },
-  [ButtonStates.HOVER]: {
-    backgroundColor: COLORS.NEUTRAL_2,
-    borderColor: COLORS.NEUTRAL_4,
-    raiseColor: COLORS.NEUTRAL_4,
-    color: COLORS.NEUTRAL_9,
-  },
-}
-
-const NUMPAD_KEYS: NumpadKey[] = [
-  { key: '1', title: '1', value: 1 },
-  { key: '2', title: '2', value: 2 },
-  { key: '3', title: '3', value: 3 },
-  { key: '4', title: '4', value: 4 },
-  { key: '5', title: '5', value: 5 },
-  { key: '6', title: '6', value: 6 },
-  { key: '7', title: '7', value: 7 },
-  { key: '8', title: '8', value: 8 },
-  { key: '9', title: '9', value: 9 },
-  {
-    key: KeyboardKeys.BACKSPACE,
-    title: <BackspaceIcon size={20} color={COLORS.NEUTRAL_9} />,
-    value: KeyboardKeys.BACKSPACE,
-    customColorScheme: ACTION_KEY_COLOR_SCHEME,
-  },
-  { key: '0', title: '0', value: 0 },
-  {
-    key: KeyboardKeys.ENTER,
-    title: 'Enter',
-    value: KeyboardKeys.ENTER,
-    customColorScheme: ACTION_KEY_COLOR_SCHEME,
-  },
-]
-
-const ENTER_COLOR_SCHEME = {
-  [ButtonStates.DEFAULT]: {
-    backgroundColor: COLORS.PRIMARY_GREEN,
-    borderColor: COLORS.GREEN_6,
-    raiseColor: COLORS.GREEN_6,
-    color: COLORS.NEUTRAL_1,
-  },
-  [ButtonStates.HOVER]: {
-    backgroundColor: COLORS.PRIMARY_GREEN,
-    borderColor: COLORS.GREEN_6,
-    raiseColor: COLORS.GREEN_6,
-    color: COLORS.NEUTRAL_1,
-  },
-  [ButtonStates.PRESSED]: {
-    backgroundColor: COLORS.PRIMARY_GREEN,
-    borderColor: COLORS.GREEN_6,
-    raiseColor: COLORS.GREEN_6,
-    color: COLORS.NEUTRAL_1,
-  },
-  [ButtonStates.ACTIVE]: {
-    backgroundColor: COLORS.PRIMARY_GREEN,
-    borderColor: COLORS.GREEN_6,
-    raiseColor: COLORS.GREEN_6,
-    color: COLORS.NEUTRAL_1,
-  },
-}
-
-export const useFluencyNumpad = ({ onSubmit }: UseFluencyNumpadProps) => {
-  const t = useText()
-  const { model } = useFluency()
-  const answer = useUnit(model.solving.$answer)
-  const [pressedKey, setPressedKey] = useState<string | null>(null)
-  const pressedKeyTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
-  const onSubmitRef = useRef(onSubmit)
-  onSubmitRef.current = onSubmit
-
-  const pressKey = (key: string) => {
-    if (key === KeyboardKeys.ENTER) {
-      onSubmitRef.current()
-      return
-    }
-    if (key === KeyboardKeys.BACKSPACE) {
-      model.solving.setAnswer(answer === null || answer.length <= 1 ? null : answer.slice(0, -1))
-      return
-    }
-    if (answer !== null && answer.length >= MAX_INPUT_LENGTH) return
-    model.solving.setAnswer(answer === null ? key : answer + key)
-  }
-
-  useEffect(() => {
-    if (!isWeb) return
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const { key } = event
-      if (!/^\d$/.test(key) && key !== KeyboardKeys.ENTER && key !== KeyboardKeys.BACKSPACE) return
-
-      clearTimeout(pressedKeyTimeoutRef.current)
-      setPressedKey(key)
-      pressedKeyTimeoutRef.current = setTimeout(() => setPressedKey(null), 175)
-      pressKey(key)
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [answer])
-
-  const options = NUMPAD_KEYS.map(({ value, customColorScheme, ...props }) => ({
-    ...props,
-    title: props.key === KeyboardKeys.ENTER ? t('student.fluency.enter') : props.title,
-    selected: pressedKey === props.key,
-    customColorScheme:
-      props.key === KeyboardKeys.ENTER && answer !== null ? ENTER_COLOR_SCHEME : customColorScheme,
-    onPressIn: () => pressKey(props.key),
-  }))
-
-  return { options }
-}

package/src/features/fluency/hooks/useFluencySolvingPreset.ts

@@ -1,71 +0,0 @@
-import { useUnit } from 'effector-react'
-import { COLORS } from '@magmamath/react-native-ui'
-import type { ButtonColor } from '@magmamath/react-native-ui'
-import {
-  FLUENCY_MODE_PRESETS,
-  FluencyMasteryLevel,
-  type FluencyMode,
-} from '../shared/fluency.constants'
-import type { LegendItem } from '../shared/fluency.types'
-import { useFluency } from '../context/FluencyContext'
-import { useText } from '../../../i18n/i18n'
-
-type UseFluencySolvingPresetParams = {
-  mode?: FluencyMode
-}
-
-type UseFluencySolvingPresetResult = {
-  symbol: string
-  label: string
-  colors: {
-    level: Record<FluencyMasteryLevel, string>
-    accent: string
-    streak: { gained: string; todayBorder: string }
-    button: ButtonColor
-  }
-  legend: { items: LegendItem[] }
-}
-
-export const useFluencySolvingPreset = (
-  params?: UseFluencySolvingPresetParams,
-): UseFluencySolvingPresetResult => {
-  const t = useText()
-  const { model } = useFluency()
-  const { matrixMode, current } = useUnit({
-    matrixMode: model.matrix.$mode,
-    current: model.solving.$current,
-  })
-  const preset = FLUENCY_MODE_PRESETS[params?.mode ?? current?.mode ?? matrixMode]
-
-  const legendItems: LegendItem[] = [
-    { label: t('student.fluency.notStarted'), color: COLORS.NEUTRAL_2, withBorder: true },
-    {
-      label: t('student.fluency.masteryLearning'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.LEARNING],
-    },
-    {
-      label: t('student.fluency.masteryGrowing'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.GROWING],
-    },
-    {
-      label: t('student.fluency.masteryStrong'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.STRONG],
-    },
-    {
-      label: t('student.fluency.masteryMastered'),
-      color: preset.matrix.levelColors[FluencyMasteryLevel.MASTERED],
-    },
-  ]
-
-  return {
-    symbol: preset.symbol,
-    label: t(preset.matrix.operatorLabel),
-    colors: {
-      level: preset.matrix.levelColors,
-      accent: preset.accentColor,
-      streak: preset.header.streakColor,
-      button: preset.buttonColor,
-    },
-    legend: { items: legendItems },
-  }
-}

package/src/features/fluency/hooks/usePreventPageLeave.ts

@@ -1,11 +0,0 @@
-import { useEffect } from 'react'
-import { Platform } from 'react-native'
-
-export const usePreventPageLeave = () => {
-  useEffect(() => {
-    if (Platform.OS !== 'web') return
-    const handleBeforeUnload = (event: BeforeUnloadEvent) => event.preventDefault()
-    window.addEventListener('beforeunload', handleBeforeUnload)
-    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
-  }, [])
-}

package/src/features/fluency/hooks/usePreventWebKeys.ts

@@ -1,24 +0,0 @@
-import { RefObject, useEffect } from 'react'
-import { Platform } from 'react-native'
-
-type UsePreventWebKeysProps = {
-  ref: RefObject<unknown>
-  keys: string[]
-  enabled: boolean
-}
-
-export const usePreventWebKeys = ({ ref, keys, enabled }: UsePreventWebKeysProps) => {
-  useEffect(() => {
-    if (Platform.OS !== 'web' || !enabled) return
-
-    const element = ref.current as unknown as HTMLInputElement
-    if (!element) return
-
-    const preventKeys = (event: KeyboardEvent) => {
-      if (keys.includes(event.key)) event.preventDefault()
-    }
-
-    element.addEventListener('keydown', preventKeys)
-    return () => element.removeEventListener('keydown', preventKeys)
-  }, [ref, keys, enabled])
-}

package/src/features/fluency/hooks/useSuccessSound.ts

@@ -1,20 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { AudioPlayer, createAudioPlayer } from 'expo-audio'
-import SUCCESS_SOUND from '../assets/success.mp3'
-
-export const useSuccessSound = () => {
-  const playerRef = useRef<AudioPlayer | null>(null)
-
-  useEffect(() => {
-    const player = createAudioPlayer(SUCCESS_SOUND)
-    playerRef.current = player
-    return () => player.remove()
-  }, [])
-
-  const play = () => {
-    playerRef.current?.seekTo(0)
-    playerRef.current?.play()
-  }
-
-  return { play }
-}

package/src/features/fluency/index.ts

@@ -1,6 +0,0 @@
-export * from './shared/fluency.constants'
-export * from './shared/fluency.types'
-export * from './shared/fluency.helpers'
-export { Fluency } from './components/Fluency'
-export { FluencySolving } from './components/FluencySolving'
-export { FluencyModel } from './model/FluencyModel'

package/src/features/fluency/model/FluencyApiModel.ts

@@ -1,20 +0,0 @@
-import { createEffect, Effect } from 'effector'
-import type {
-  FluencyAttemptPayload,
-  FluencyModelProps,
-  GetMatrixPayload,
-  GetMatrixResponse,
-  GetWeeklyStatsResponse,
-} from '../shared/fluency.types'
-
-export class FluencyApiModel {
-  public readonly getMatrixFx: Effect<GetMatrixPayload, GetMatrixResponse>
-  public readonly getWeeklyStatsFx: Effect<void, GetWeeklyStatsResponse>
-  public readonly postAttemptFx: Effect<FluencyAttemptPayload, void>
-
-  constructor(api: FluencyModelProps['api']) {
-    this.getMatrixFx = createEffect(api.getMatrix)
-    this.getWeeklyStatsFx = createEffect(() => api.getWeeklyStats())
-    this.postAttemptFx = createEffect(api.postAttempt)
-  }
-}

package/src/features/fluency/model/FluencyDaysStreakModel.ts

@@ -1,11 +0,0 @@
-import { createStore } from 'effector'
-import type { FluencyApiModel } from './FluencyApiModel'
-import type { GetWeeklyStatsResponse } from '../shared/fluency.types'
-
-export class FluencyDaysStreakModel {
-  public readonly $stats = createStore<GetWeeklyStatsResponse | null>(null)
-
-  constructor(private readonly api: FluencyApiModel) {
-    this.$stats.on(this.api.getWeeklyStatsFx.doneData, (_, data) => data)
-  }
-}

package/src/features/fluency/model/FluencyMatrixModel.ts

@@ -1,20 +0,0 @@
-import { combine, createEvent, createStore, restore } from 'effector'
-import { FluencyMode } from '../shared/fluency.constants'
-import { buildMatrixGrid } from '../shared/fluency.helpers'
-import type { GetMatrixResponse, MatrixGrid } from '../shared/fluency.types'
-import type { FluencyApiModel } from './FluencyApiModel'
-
-export class FluencyMatrixModel {
-  public readonly setMode = createEvent<FluencyMode>()
-  public readonly $mode = restore(this.setMode, FluencyMode.ADDITION)
-
-  public readonly $data = createStore<GetMatrixResponse | null>(null)
-  public readonly $matrix = combine(this.$data, this.$mode, (data, mode): MatrixGrid | null => {
-    if (!data) return null
-    return buildMatrixGrid(data, mode)
-  })
-
-  constructor(api: FluencyApiModel) {
-    this.$data.on(api.getMatrixFx.doneData, (_, data) => data)
-  }
-}