@magmamath/students-features 1.3.26-rc.17 → 1.3.26-rc.2

package/src/features/fluency/components/fluency-solving/components/FluencySolvingProgress.tsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { COLORS, SPACING } from '@magmamath/react-native-ui'
-import { AttemptStatus, SESSION_LENGTH } from '../../../fluency.constants'
-import type { QuestionOutcome } from '../fluencySolving.types'
-import { FluencySolvingProgressDot } from './FluencySolvingProgressDot'
-import { useFluency } from '../../../context/FluencyContext'
-import { useUnit } from 'effector-react'
-
-const GROUP_SIZE = 5
-
-type ProgressDotProps = {
-  index: number
-  activeIndex: number
-  outcome: QuestionOutcome | undefined
-}
-
-const ProgressDot = ({ index, activeIndex, outcome }: ProgressDotProps) => {
-  if (index === activeIndex) return <FluencySolvingProgressDot />
-  if (index < activeIndex && outcome) return <View style={DOT_STYLE_BY_OUTCOME[outcome.status]} />
-  return <View style={styles.dot} />
-}
-
-export const FluencySolvingProgress = () => {
-  const { model } = useFluency()
-  const outcomes = useUnit(model.solving.$outcomes)
-
-  return (
-    <View style={styles.container}>
-      {Array.from({ length: SESSION_LENGTH / GROUP_SIZE }, (_, groupIndex) => (
-        <View key={groupIndex} style={styles.group}>
-          {Array.from({ length: GROUP_SIZE }, (_, dotIndex) => {
-            const index = groupIndex * GROUP_SIZE + dotIndex
-            return (
-              <ProgressDot
-                key={index}
-                index={index}
-                activeIndex={outcomes.length}
-                outcome={outcomes[index]}
-              />
-            )
-          })}
-        </View>
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    gap: SPACING[500],
-    paddingHorizontal: SPACING[600],
-    paddingVertical: 14,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  group: {
-    flexDirection: 'row',
-    gap: 8,
-    alignItems: 'center',
-  },
-  dot: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: COLORS.NEUTRAL_4,
-  },
-  dotCorrect: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: COLORS.PRIMARY_GREEN,
-  },
-  dotWrong: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: COLORS.PRIMARY_RED,
-  },
-})
-
-const DOT_STYLE_BY_OUTCOME: Record<AttemptStatus, object> = {
-  [AttemptStatus.CORRECT]: styles.dotCorrect,
-  [AttemptStatus.INCORRECT]: styles.dotWrong,
-  [AttemptStatus.SKIPPED]: styles.dot,
-}

package/src/features/fluency/components/fluency-solving/components/FluencySolvingProgressDot.tsx

@@ -1,71 +0,0 @@
-import React, { useEffect } from 'react'
-import { View, StyleSheet } from 'react-native'
-import Animated, {
-  cancelAnimation,
-  Easing,
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated'
-import { COLORS } from '@magmamath/react-native-ui'
-
-const DOT_SIZE = 16
-const RING_SPREAD_MIN = 4
-const RING_SPREAD_MAX = 8
-const RING_SIZE = DOT_SIZE + RING_SPREAD_MAX * 2
-const RING_SCALE_MIN = (DOT_SIZE + RING_SPREAD_MIN * 2) / RING_SIZE
-const RING_OPACITY_MIN = 0.06
-const RING_OPACITY_MAX = 0.12
-const PULSE_DURATION_MS = 800
-
-export const FluencySolvingProgressDot = () => {
-  const progress = useSharedValue(0)
-
-  useEffect(() => {
-    progress.value = withRepeat(
-      withSequence(
-        withTiming(1, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) }),
-        withTiming(0, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) })
-      ),
-      -1,
-      false
-    )
-    return () => cancelAnimation(progress)
-  }, [progress])
-
-  const ringStyle = useAnimatedStyle(() => {
-    const scale = interpolate(progress.value, [0, 1], [RING_SCALE_MIN, 1])
-    const opacity = interpolate(progress.value, [0, 1], [RING_OPACITY_MAX, RING_OPACITY_MIN])
-    return {
-      opacity,
-      transform: [{ scale }],
-    }
-  }, [progress])
-
-  return (
-    <View style={styles.dot}>
-      <Animated.View style={[styles.ring, ringStyle]} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  dot: {
-    width: DOT_SIZE,
-    height: DOT_SIZE,
-    borderRadius: DOT_SIZE / 2,
-    backgroundColor: COLORS.NEUTRAL_10,
-  },
-  ring: {
-    position: 'absolute',
-    top: -RING_SPREAD_MAX,
-    left: -RING_SPREAD_MAX,
-    width: RING_SIZE,
-    height: RING_SIZE,
-    borderRadius: RING_SIZE / 2,
-    backgroundColor: COLORS.NEUTRAL_10,
-  },
-})

package/src/features/fluency/components/fluency-solving/fluencySolving.constants.ts

@@ -1,25 +0,0 @@
-import { FluencyMode } from '../../fluency.constants'
-import type { PickerParams } from './fluencySolving.types'
-
-const HOUR_MS = 60 * 60 * 1000
-const BOX_1_INTERVAL = 4 * HOUR_MS
-const BOX_2_INTERVAL = 36 * HOUR_MS // 1.5 days
-const BOX_3_INTERVAL = 144 * HOUR_MS // 6 days
-const BOX_4_INTERVAL = 672 * HOUR_MS // 4 weeks
-const BOX_5_INTERVAL = 2016 * HOUR_MS // 12 weeks
-
-export const DEFAULT_PICKER_PARAMS: PickerParams = {
-  wDue: 0.05,
-  wWeak: 0.35,
-  wEase: 0.3,
-  wRand: 0.02,
-  numBoxes: 5,
-  boxIntervals: [0, BOX_1_INTERVAL, BOX_2_INTERVAL, BOX_3_INTERVAL, BOX_4_INTERVAL, BOX_5_INTERVAL],
-}
-
-export const MODE_ANSWER_EVAL_FORMULA: Record<FluencyMode, (a: number, b: number) => number> = {
-  [FluencyMode.ADDITION]: (a, b) => a + b,
-  [FluencyMode.SUBTRACTION]: (a, b) => a - b,
-  [FluencyMode.MULTIPLICATION]: (a, b) => a * b,
-  [FluencyMode.DIVISION]: (a, b) => a / b,
-}

package/src/features/fluency/components/fluency-solving/fluencySolving.helpers.ts

@@ -1,102 +0,0 @@
-import { AttemptStatus, FluencyMode } from '../../fluency.constants'
-import type { Fact } from '../../fluency.types'
-import { DEFAULT_PICKER_PARAMS, MODE_ANSWER_EVAL_FORMULA } from './fluencySolving.constants'
-import type { PickerParams, QuestionOutcome, SolvingFact } from './fluencySolving.types'
-
-export function toSolvingFacts(factMap: Record<string, Fact>, mode: FluencyMode): SolvingFact[] {
-  return Object.entries(factMap).map(([id, fact]) => {
-    const [a, b] = fact.numbers
-    const answer = MODE_ANSWER_EVAL_FORMULA[mode](a, b)
-    const box = fact.box ?? 0
-    return {
-      id,
-      mode,
-      numbers: fact.numbers,
-      answer,
-      difficulty: fact.difficulty,
-      box,
-      lastSeenMs: fact.lastAttemptedAt ? new Date(fact.lastAttemptedAt).getTime() : null,
-      sessionStartBox: box,
-      hasFailedThisSession: false,
-      attemptsCount: fact.attemptsCount,
-      correctCount: fact.correctCount,
-    }
-  })
-}
-
-function computePriority(
-  fact: SolvingFact,
-  now: number,
-  params: PickerParams,
-  maxDifficulty: number,
-): number {
-  const interval = Math.max(0.001, params.boxIntervals[Math.max(1, fact.box)])
-  const overdueness =
-    fact.lastSeenMs === null ? 1.0 : Math.min(1, (now - fact.lastSeenMs) / (2 * interval))
-  const weakness = (params.numBoxes - fact.box) / params.numBoxes
-  const ease = (1 - fact.difficulty / Math.max(0.1, maxDifficulty)) * weakness
-  return (
-    params.wDue * overdueness +
-    params.wWeak * weakness +
-    params.wEase * ease +
-    params.wRand * Math.random()
-  )
-}
-
-export function selectNextFact(
-  facts: SolvingFact[],
-  now: number,
-  params: PickerParams = DEFAULT_PICKER_PARAMS,
-): SolvingFact | null {
-  if (facts.length === 0) return null
-  const available = facts.filter((f) => f.box < params.numBoxes)
-  const pool = available.length > 0 ? available : facts
-  const maxDifficulty = pool.reduce((m, f) => Math.max(m, f.difficulty), 1)
-  let best = pool[0]
-  let bestScore = -Infinity
-  for (const f of pool) {
-    const score = computePriority(f, now, params, maxDifficulty)
-    if (score > bestScore) {
-      bestScore = score
-      best = f
-    }
-  }
-  return best
-}
-
-export const formatSessionDuration = (ms: number): string => {
-  const totalSeconds = Math.floor(ms / 1000)
-  const minutes = Math.floor(totalSeconds / 60)
-  const seconds = totalSeconds % 60
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`
-}
-
-export const calculateMaxStreak = (outcomes: QuestionOutcome[]): number =>
-  outcomes.reduce(
-    (acc, outcome) => {
-      const current = outcome.status === AttemptStatus.CORRECT ? acc.current + 1 : 0
-      return { max: Math.max(acc.max, current), current }
-    },
-    { max: 0, current: 0 },
-  ).max
-
-type BoxTransitionParams = {
-  currentBox: number
-  isCorrect: boolean
-  isFast: boolean
-  sessionStartBox: number
-  hasFailedThisSession: boolean
-}
-
-export function calculateNextBox({
-  currentBox,
-  isCorrect,
-  isFast,
-  sessionStartBox,
-  hasFailedThisSession,
-}: BoxTransitionParams): number {
-  if (!isCorrect) return Math.max(1, currentBox - 1)
-  if (!isFast) return currentBox
-  if (hasFailedThisSession || currentBox >= sessionStartBox + 1) return currentBox
-  return Math.min(currentBox + 1, 5)
-}

package/src/features/fluency/components/fluency-solving/fluencySolving.types.ts

@@ -1,37 +0,0 @@
-import type { AttemptStatus, FluencyMode } from '../../fluency.constants'
-
-export type SolvingFact = {
-  id: string
-  mode: FluencyMode
-  numbers: readonly [number, number]
-  answer: number
-  difficulty: number
-  box: number
-  lastSeenMs: number | null
-  sessionStartBox: number
-  hasFailedThisSession: boolean
-  attemptsCount: number
-  correctCount: number
-}
-
-export type FluencyCardDisplayContent = {
-  fact: SolvingFact | null
-  answer: string
-}
-
-export type QuestionOutcome = {
-  factId: string
-  status: AttemptStatus
-  answer: string | null
-  numbers: readonly [number, number]
-  mode: FluencyMode
-}
-
-export type PickerParams = {
-  wDue: number
-  wWeak: number
-  wEase: number
-  wRand: number
-  numBoxes: number
-  boxIntervals: readonly number[]
-}

package/src/features/fluency/components/matrix/components/CellTooltip.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
-
-type CellTooltipProps = {
-  label: string
-}
-
-export const CellTooltip = ({ label }: CellTooltipProps) => (
-  <View style={styles.container}>
-    <View style={styles.bubble}>
-      <Text style={styles.label}>{label}</Text>
-    </View>
-    <View style={styles.arrow} />
-  </View>
-)
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-  },
-  bubble: {
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderRadius: BORDER_RADIUS[150],
-    paddingHorizontal: SPACING[200],
-    paddingVertical: SPACING[100],
-    ...SHADOWS[4],
-  },
-  label: {
-    fontSize: 13,
-    color: COLORS.NEUTRAL_9,
-    textAlign: 'center',
-  },
-  arrow: {
-    width: 0,
-    height: 0,
-    marginTop: -4,
-    borderLeftWidth: 9,
-    borderRightWidth: 9,
-    borderTopWidth: 12,
-    borderStyle: 'solid',
-    borderLeftColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderTopColor: COLORS.NEUTRAL_1,
-  },
-})

package/src/features/fluency/components/mobile-menu/MobileMenu.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { View, StyleSheet, useWindowDimensions } from 'react-native'
-import { Button, ButtonVariant, SPACING } from '@magmamath/react-native-ui'
-import { MenuIcon } from '../../../../shared/icons/MenuIcon'
-import { isWeb } from '../../../../shared/common.constants'
-import { BURGER_MENU_BREAKPOINT } from '@magmamath/students-features'
-
-type MobileMenuProps = {
-  onPress?: () => void
-}
-
-export const MobileMenu = ({ onPress }: MobileMenuProps) => {
-  const dimensions = useWindowDimensions()
-  const isVisible = isWeb && dimensions.width <= BURGER_MENU_BREAKPOINT
-
-  if (!isVisible) return null
-
-  return (
-    <View style={styles.container}>
-      <Button onPress={onPress} variant={ButtonVariant.TERTIARY} icon={<MenuIcon size={24} />} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginRight: SPACING[200],
-  },
-})

package/src/features/fluency/components/select-math-operator/ProgressBarSparkles.tsx

@@ -1,142 +0,0 @@
-import React, { useEffect } from 'react'
-import { StyleSheet } from 'react-native'
-import Animated, {
-  cancelAnimation,
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated'
-import { SparkleIcon } from '../../assets/SparkleIcon'
-
-const QUICK = Easing.bezier(0.2, 0, 0, 1)
-const END_HOLD_MS = 800
-
-type SparkleItemConfig = {
-  leftPercent: number
-  topOffset: number
-  size: number
-  triggerDelay: number
-  appearDuration: number
-  dissolveDuration: number
-}
-
-const SPARKLE_CONFIGS: SparkleItemConfig[] = [
-  {
-    leftPercent: 6.5,
-    topOffset: -3,
-    size: 14,
-    triggerDelay: 550,
-    appearDuration: 868,
-    dissolveDuration: 744,
-  },
-  {
-    leftPercent: 31.7,
-    topOffset: 7,
-    size: 14,
-    triggerDelay: 550,
-    appearDuration: 868,
-    dissolveDuration: 744,
-  },
-  {
-    leftPercent: 37.8,
-    topOffset: -5,
-    size: 14,
-    triggerDelay: 250,
-    appearDuration: 744,
-    dissolveDuration: 868,
-  },
-  {
-    leftPercent: 58.7,
-    topOffset: 5,
-    size: 20,
-    triggerDelay: 50,
-    appearDuration: 868,
-    dissolveDuration: 868,
-  },
-  {
-    leftPercent: 88.7,
-    topOffset: -5,
-    size: 14,
-    triggerDelay: 250,
-    appearDuration: 744,
-    dissolveDuration: 868,
-  },
-]
-
-type SparkleItemProps = {
-  config: SparkleItemConfig
-  color: string
-}
-
-const SparkleItem = ({ config, color }: SparkleItemProps) => {
-  const loop = useSharedValue(0)
-
-  useEffect(() => {
-    loop.value = withRepeat(
-      withSequence(
-        withDelay(
-          config.triggerDelay,
-          withTiming(1, { duration: config.appearDuration, easing: QUICK }),
-        ),
-        withDelay(END_HOLD_MS, withTiming(2, { duration: config.dissolveDuration, easing: QUICK })),
-        withTiming(0, { duration: 0 }),
-      ),
-      -1,
-      false,
-    )
-    return () => cancelAnimation(loop)
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const v = loop.value
-    if (v <= 1) {
-      return {
-        opacity: v,
-        transform: [{ scale: v }, { rotate: `${(-90 + v * 90).toFixed(1)}deg` }],
-      }
-    }
-    return {
-      opacity: 2 - v,
-      transform: [{ scale: 1 }, { rotate: '0deg' }],
-    }
-  }, [loop])
-
-  return (
-    <Animated.View
-      style={[
-        styles.sparkle,
-        animatedStyle,
-        {
-          left: `${config.leftPercent}%`,
-          top: config.topOffset,
-          width: config.size,
-          height: config.size,
-        },
-      ]}
-    >
-      <SparkleIcon size={config.size} color={color} />
-    </Animated.View>
-  )
-}
-
-export type ProgressBarSparklesProps = {
-  color: string
-}
-
-export const ProgressBarSparkles = ({ color }: ProgressBarSparklesProps) => (
-  <>
-    {SPARKLE_CONFIGS.map((config, index) => (
-      <SparkleItem key={index} config={config} color={color} />
-    ))}
-  </>
-)
-
-const styles = StyleSheet.create({
-  sparkle: {
-    position: 'absolute',
-  },
-})