@magmamath/students-features 1.3.26-rc.9 → 1.3.26

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/FluencyMatrix.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
-import { MatrixLegend } from './components/MatrixLegend'
-import { MatrixFill } from './components/MatrixFill'
-
-export const FluencyMatrix = () => (
-  <View style={styles.container}>
-    <View style={styles.matrixFillContainer}>
-      <MatrixFill />
-    </View>
-
-    <MatrixLegend />
-  </View>
-)
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderRadius: BORDER_RADIUS[400],
-    overflow: 'hidden',
-    ...SHADOWS[1],
-  },
-  matrixFillContainer: {
-    flex: 1,
-    padding: SPACING[300],
-    minHeight: 354,
-  },
-})

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/matrix/components/MatrixCell.tsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react'
-import { Pressable, View, Text, StyleSheet } from 'react-native'
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
-import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-import { getMasteryLevelByBox } from '../../../fluency.helpers'
-import { FluencyMasteryLevel } from '../../../fluency.constants'
-import { StarFillIcon } from '../../../assets/StarFillIcon'
-import { CellTooltip } from './CellTooltip'
-import type { GridCell } from '../../../fluency.types'
-
-type MatrixCellProps = Omit<GridCell, 'label'> & {
-  label: string | number | null
-  levelColors: Record<FluencyMasteryLevel, string>
-  tooltipLabel: string | null
-}
-
-export const MatrixCell = ({
-  label,
-  box,
-  isHeader,
-  levelColors,
-  tooltipLabel,
-}: MatrixCellProps) => {
-  const [isActive, setIsActive] = useState(false)
-  const masteryLevel = box ? getMasteryLevelByBox(box) : null
-  const isMastered = masteryLevel === FluencyMasteryLevel.MASTERED
-
-  const bgColor = (() => {
-    if (masteryLevel) return levelColors[masteryLevel]
-    if (isHeader) return COLORS.NEUTRAL_5
-    return COLORS.NEUTRAL_2
-  })()
-
-  const showTooltip = isActive && !!tooltipLabel
-
-  const activate = () => setIsActive(true)
-  const deactivate = () => setIsActive(false)
-
-  return (
-    <View style={[styles.wrapper, showTooltip && styles.wrapperActive]}>
-      {showTooltip && (
-        <Animated.View
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(200)}
-          style={[styles.tooltipContainer, { pointerEvents: 'none' }]}
-        >
-          <CellTooltip label={tooltipLabel} />
-        </Animated.View>
-      )}
-      <Pressable
-        style={[styles.cell, { backgroundColor: bgColor }]}
-        onHoverIn={activate}
-        onHoverOut={deactivate}
-        onPressIn={activate}
-        onPressOut={deactivate}
-      >
-        {isMastered && <StarFillIcon color={isActive ? COLORS.PRIMARY_YELLOW : undefined} />}
-
-        {label !== null && (
-          <Text style={typeof label === 'string' ? styles.symbolText : styles.headerText}>
-            {label}
-          </Text>
-        )}
-      </Pressable>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  wrapper: {
-    flex: 1,
-  },
-  wrapperActive: {
-    zIndex: 1,
-  },
-  cell: {
-    flex: 1,
-    borderRadius: BORDER_RADIUS[100],
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  tooltipContainer: {
-    position: 'absolute',
-    bottom: '80%',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    paddingBottom: SPACING[50],
-    zIndex: 1,
-  },
-  headerText: {
-    fontSize: 12,
-    fontWeight: '600',
-    color: COLORS.NEUTRAL_2,
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-  symbolText: {
-    fontSize: 24,
-    color: COLORS.NEUTRAL_7,
-  },
-})

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

@@ -1,53 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
-import { useUnit } from 'effector-react'
-import { MatrixCell } from './MatrixCell'
-import { useFluency } from '../../../context/FluencyContext'
-import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
-
-export const MatrixFill = () => {
-  const { model } = useFluency()
-  const modePreset = useFluencyModePreset()
-  const grid = useUnit(model.matrix.$matrix)
-
-  if (!grid) return null
-
-  return (
-    <View style={styles.grid}>
-      {grid.map((row, rowIdx) => (
-        <View key={rowIdx} style={styles.row}>
-          {row.map((cell, colIdx) => {
-            const isOriginCell = rowIdx === 0 && colIdx === 0
-            const tooltipLabel = cell.numbers
-              ? `${cell.numbers[0]}${modePreset.symbol}${cell.numbers[1]}`
-              : null
-
-            return (
-              <MatrixCell
-                key={colIdx}
-                {...cell}
-                label={isOriginCell ? modePreset.symbol : cell.label}
-                levelColors={modePreset.colors.level}
-                tooltipLabel={tooltipLabel}
-              />
-            )
-          })}
-        </View>
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  grid: {
-    flex: 1,
-    gap: SPACING[100],
-  },
-  row: {
-    flex: 1,
-    minHeight: SPACING[800],
-    flexDirection: 'row',
-    gap: SPACING[100],
-  },
-})

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

@@ -1,101 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import {
-  BORDER_RADIUS,
-  Button,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  PlayIcon,
-  SHADOWS,
-  SPACING,
-} from '@magmamath/react-native-ui'
-import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
-import { useFluency } from '../../../context/FluencyContext'
-import { useText } from '../../../../../i18n/i18n'
-import { useUnit } from 'effector-react'
-
-export const MatrixLegend = () => {
-  const t = useText()
-  const modePreset = useFluencyModePreset()
-  const { model, onPracticePress } = useFluency()
-  const mode = useUnit(model.matrix.$mode)
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.legendItems}>
-        {modePreset.legend.items.map((item) => (
-          <View key={item.label} style={styles.legendItem}>
-            <View
-              style={[
-                styles.legendDot,
-                { backgroundColor: item.color },
-                item.withBorder && styles.legendDotBorder,
-              ]}
-            />
-            <Text style={styles.legendLabel}>{item.label}</Text>
-          </View>
-        ))}
-      </View>
-      <Button
-        onPress={() => {
-          model.solving.start(mode)
-          onPracticePress?.()
-        }}
-        variant={ButtonVariant.PRIMARY}
-        size={ButtonSize.MEDIUM}
-        colorScheme={modePreset.colors.button}
-        icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
-        raiseLevel={3}
-        style={{ container: styles.practiceButton, text: styles.practiceButtonText }}
-      >
-        {`${t('student.fluency.practice')} ${modePreset.label}`}
-      </Button>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: 65,
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    justifyContent: 'space-between',
-    backgroundColor: COLORS.NEUTRAL_2,
-    borderBottomColor: COLORS.NEUTRAL_5,
-    paddingHorizontal: SPACING[300],
-    paddingVertical: SPACING[300],
-    borderTopLeftRadius: BORDER_RADIUS[400],
-    borderTopRightRadius: BORDER_RADIUS[400],
-    ...SHADOWS[1],
-  },
-  legendItems: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[400],
-  },
-  legendItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[150],
-  },
-  legendDot: {
-    width: 14,
-    height: 14,
-    borderRadius: 3,
-  },
-  legendDotBorder: {
-    borderWidth: 0.5,
-    borderColor: COLORS.NEUTRAL_5,
-  },
-  legendLabel: {
-    fontSize: 12,
-    color: COLORS.NEUTRAL_7,
-  },
-  practiceButton: {
-    alignSelf: 'center',
-  },
-  practiceButtonText: {
-    textTransform: 'uppercase',
-  },
-})

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/MathOperatorRow.tsx

@@ -1,38 +0,0 @@
-import React, { ReactNode } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { COLORS, SelectOption, SelectOptionColor, SPACING } from '@magmamath/react-native-ui'
-import { ProgressBar } from './ProgressBar'
-
-export type MathOperatorRowProps = {
-  title: string
-  icon: ReactNode
-  progress: number
-  color: SelectOptionColor
-  selected: boolean
-  onSelect: () => void
-  showDivider?: boolean
-}
-
-export const MathOperatorRow = ({
-  title,
-  icon,
-  progress,
-  color,
-  selected,
-  onSelect,
-  showDivider = true,
-}: MathOperatorRowProps) => (
-  <View>
-    <SelectOption title={title} icon={icon} color={color} selected={selected} onPress={onSelect} />
-    <ProgressBar progress={progress} color={color} />
-    {showDivider && <View style={styles.divider} />}
-  </View>
-)
-
-const styles = StyleSheet.create({
-  divider: {
-    height: 1,
-    backgroundColor: COLORS.NEUTRAL_3,
-    marginVertical: SPACING[600],
-  },
-})

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

@@ -1,81 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  HeadingVariants,
-  SelectOptionColor,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { ProgressBarSparkles } from './ProgressBarSparkles'
-
-const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
-  [SelectOptionColor.GREEN]: COLORS.PRIMARY_GREEN,
-  [SelectOptionColor.ORANGE]: COLORS.PRIMARY_ORANGE,
-  [SelectOptionColor.BLUE]: COLORS.PRIMARY_BLUE,
-  [SelectOptionColor.RED]: COLORS.PRIMARY_RED,
-  [SelectOptionColor.YELLOW]: COLORS.PRIMARY_YELLOW,
-  [SelectOptionColor.PURPLE]: COLORS.PRIMARY_PURPLE,
-  [SelectOptionColor.GREY]: COLORS.NEUTRAL_6,
-  [SelectOptionColor.SUNSET]: COLORS.PRIMARY_RED,
-}
-
-const SPARKLE_COLOR_MAP: Record<SelectOptionColor, string> = {
-  [SelectOptionColor.GREEN]: COLORS.GREEN_3,
-  [SelectOptionColor.ORANGE]: COLORS.ORANGE_3,
-  [SelectOptionColor.BLUE]: COLORS.BLUE_3,
-  [SelectOptionColor.RED]: COLORS.RED_3,
-  [SelectOptionColor.YELLOW]: COLORS.YELLOW_3,
-  [SelectOptionColor.PURPLE]: COLORS.PURPLE_3,
-  [SelectOptionColor.GREY]: COLORS.NEUTRAL_4,
-  [SelectOptionColor.SUNSET]: COLORS.RED_3,
-}
-
-export type ProgressBarProps = {
-  progress: number
-  color: SelectOptionColor
-}
-
-export const ProgressBar = ({ progress, color = SelectOptionColor.GREEN }: ProgressBarProps) => {
-  const progressRounded = Math.round(Math.min(100, Math.max(0, progress)))
-  const variantColor = PRIMARY_COLOR_MAP[color]
-  const isComplete = progressRounded === 100
-  return (
-    <View style={styles.container}>
-      <View style={styles.trackWrapper}>
-        <View style={styles.track}>
-          <View
-            style={[styles.fill, { backgroundColor: variantColor, width: `${progressRounded}%` }]}
-          />
-        </View>
-        {isComplete && <ProgressBarSparkles color={SPARKLE_COLOR_MAP[color]} />}
-      </View>
-      <Typography variant={HeadingVariants.H10} style={{ color: variantColor }}>
-        {progressRounded}%
-      </Typography>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    marginTop: SPACING[200],
-    gap: SPACING[200],
-    alignItems: 'center',
-  },
-  trackWrapper: {
-    flex: 1,
-  },
-  track: {
-    height: 18,
-    backgroundColor: COLORS.NEUTRAL_3,
-    borderRadius: BORDER_RADIUS[450],
-    overflow: 'hidden',
-  },
-  fill: {
-    height: '100%',
-    borderRadius: BORDER_RADIUS[450],
-  },
-})