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

package/src/features/fluency/components/start-banner/StartBanner.tsx

@@ -1,124 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  Typography,
-  PlayIcon,
-  COLORS,
-  SHADOWS,
-  SPACING,
-  FONT_FAMILY,
-  BORDER_RADIUS,
-} from '@magmamath/react-native-ui'
-import { GradientView } from '../../../../lib/components/GradientView'
-import { BannerFlashcards } from './BannerFlashcards'
-import { useFluency } from '../../context/FluencyContext'
-import { useText } from '../../../../i18n/i18n'
-import { FlashIcon } from '../../assets/FlashIcon'
-
-export const StartBanner = () => {
-  const t = useText()
-  const { model, onStartPress } = useFluency()
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.gradientClip}>
-        <GradientView
-          colors={['#FFFFFF', '#FFF7E9']}
-          locations={[0.231, 0.8173]}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 0 }}
-          style={StyleSheet.absoluteFill}
-          pointerEvents="none"
-        />
-      </View>
-
-      <View style={styles.buttonContainer}>
-        <View style={styles.buttonGroup}>
-          <Button
-            onPress={() => {
-              model.solving.start()
-              onStartPress?.()
-            }}
-            disabled={false}
-            isLoading={false}
-            isActive={false}
-            icon={<FlashIcon color={COLORS.NEUTRAL_1} />}
-            variant={ButtonVariant.PRIMARY}
-            size={ButtonSize.LARGE}
-            colorScheme={ButtonColor.YELLOW}
-            raiseLevel={6}
-            style={{ container: styles.button }}
-          >
-            {t('student.fluency.startPractice')}
-          </Button>
-          <Typography style={styles.buttonSubtitle}>
-            20 {t('student.fluency.cardsReady')}
-          </Typography>
-        </View>
-      </View>
-
-      <BannerFlashcards
-        examples={[
-          { left: '15*', right: '=30' },
-          { left: '10-', right: '=25' },
-          { left: '5+', right: '=19' },
-        ]}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    height: '100%',
-    justifyContent: 'center',
-    paddingVertical: SPACING[400],
-    paddingHorizontal: SPACING[800],
-    borderRadius: BORDER_RADIUS[400],
-    ...SHADOWS[1],
-  },
-  gradientClip: {
-    ...StyleSheet.absoluteFillObject,
-    borderRadius: BORDER_RADIUS[400],
-    overflow: 'hidden',
-  },
-  buttonContainer: {
-    alignItems: 'flex-start',
-    zIndex: 4,
-  },
-  buttonGroup: {
-    alignItems: 'center',
-    gap: SPACING[200],
-  },
-  button: {
-    minWidth: 220,
-    maxWidth: 315,
-    textTransform: 'uppercase',
-  },
-  buttonSubtitle: {
-    fontSize: 13,
-    fontWeight: '700',
-    color: COLORS.BLACK,
-    fontFamily: FONT_FAMILY.buenosAires,
-    textTransform: 'uppercase',
-  },
-  flashcard: {
-    position: 'absolute',
-    backgroundColor: COLORS.NEUTRAL_1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...SHADOWS[1],
-  },
-  springIcon: {
-    position: 'absolute',
-    bottom: -28,
-    right: 0,
-    marginTop: 6,
-    alignSelf: 'flex-end',
-  },
-})

package/src/features/fluency/context/FluencyContext.ts

@@ -1,20 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { FluencyModel } from '../model/FluencyModel'
-import type { FluencyMode } from '../fluency.constants'
-
-export type FluencyContextValue = {
-  model: FluencyModel
-  onStartPress?: () => void
-  onPracticePress?: () => void
-  onModeSelectPress?: (mode: FluencyMode) => void
-}
-
-const FluencyContext = createContext<FluencyContextValue | null>(null)
-
-export const useFluency = (): FluencyContextValue => {
-  const value = useContext(FluencyContext)
-  if (!value) throw new Error('useFluency must be used within FluencyProvider')
-  return value
-}
-
-export const FluencyProvider = FluencyContext.Provider

package/src/features/fluency/fluency.constants.ts

@@ -1,101 +0,0 @@
-import { ButtonColor, COLORS, SelectOptionColor } from '@magmamath/react-native-ui'
-import { createFluencyMode } from './fluency.helpers'
-import type { FluencyColorPalette, FluencyModeConfig, FluencyModePreset } from './fluency.types'
-
-export const FALLBACK_MATRIX_SIZE = 21
-export const MAX_INPUT_LENGTH = 3
-export const SESSION_LENGTH = 20
-export const TIME_THRESHOLD_MS = 4000
-export const FLUSH_ATTEMPTS_COUNT = 5
-
-export enum FluencyMode {
-  ADDITION = 'addition',
-  SUBTRACTION = 'subtraction',
-  MULTIPLICATION = 'multiplication',
-  DIVISION = 'division',
-}
-
-export enum FluencyMasteryLevel {
-  LEARNING = 'learning',
-  GROWING = 'growing',
-  STRONG = 'strong',
-  MASTERED = 'mastered',
-}
-
-export enum FluencyColorFamily {
-  GREEN = 'GREEN',
-  ORANGE = 'ORANGE',
-  BLUE = 'BLUE',
-  PURPLE = 'PURPLE',
-}
-
-export enum StreakStatus {
-  MISSED = 'missed',
-  GAINED = 'gained',
-  TODAY = 'today',
-  TODAY_GAINED = 'today_gained',
-}
-
-export enum AttemptStatus {
-  CORRECT = 'correct',
-  INCORRECT = 'incorrect',
-  SKIPPED = 'skipped',
-}
-
-export enum MatrixConfig {
-  STANDARD = 'standard',
-}
-
-export const COLOR_FAMILY_PALETTES: Record<FluencyColorFamily, FluencyColorPalette> = {
-  [FluencyColorFamily.GREEN]: {
-    shades: [COLORS.GREEN_2, COLORS.GREEN_3, COLORS.PRIMARY_GREEN, COLORS.GREEN_6],
-    button: ButtonColor.GREEN,
-    select: SelectOptionColor.GREEN,
-  },
-  [FluencyColorFamily.ORANGE]: {
-    shades: [COLORS.ORANGE_2, COLORS.ORANGE_3, COLORS.PRIMARY_ORANGE, COLORS.ORANGE_6],
-    button: ButtonColor.ORANGE,
-    select: SelectOptionColor.ORANGE,
-  },
-  [FluencyColorFamily.BLUE]: {
-    shades: [COLORS.BLUE_2, COLORS.BLUE_3, COLORS.PRIMARY_BLUE, COLORS.BLUE_6],
-    button: ButtonColor.BLUE,
-    select: SelectOptionColor.BLUE,
-  },
-  [FluencyColorFamily.PURPLE]: {
-    shades: [COLORS.PURPLE_2, COLORS.PURPLE_3, COLORS.PRIMARY_PURPLE, COLORS.PURPLE_6],
-    button: ButtonColor.PURPLE,
-    select: SelectOptionColor.PURPLE,
-  },
-}
-
-export const FLUENCY_MODES: readonly FluencyModeConfig[] = [
-  createFluencyMode({
-    mode: FluencyMode.ADDITION,
-    label: 'student.fluency.addition',
-    symbol: '+',
-    colorFamily: FluencyColorFamily.GREEN,
-  }),
-  createFluencyMode({
-    mode: FluencyMode.SUBTRACTION,
-    label: 'student.fluency.subtraction',
-    symbol: '−',
-    colorFamily: FluencyColorFamily.ORANGE,
-  }),
-  createFluencyMode({
-    mode: FluencyMode.MULTIPLICATION,
-    label: 'student.fluency.multiplication',
-    symbol: '×',
-    colorFamily: FluencyColorFamily.BLUE,
-  }),
-  createFluencyMode({
-    mode: FluencyMode.DIVISION,
-    label: 'student.fluency.division',
-    symbol: '÷',
-    colorFamily: FluencyColorFamily.PURPLE,
-  }),
-]
-
-export const FLUENCY_MODE_PRESETS: Record<FluencyMode, FluencyModePreset> = Object.fromEntries(
-  FLUENCY_MODES.map(({ mode, preset }) => [mode, preset]),
-) as Record<FluencyMode, FluencyModePreset>

package/src/features/fluency/fluency.helpers.ts

@@ -1,100 +0,0 @@
-import {
-  FluencyColorFamily,
-  FluencyMasteryLevel,
-  FluencyMode,
-  COLOR_FAMILY_PALETTES,
-} from './fluency.constants'
-import type { FluencyModeConfig, GetMatrixResponse, GridCell, MatrixGrid } from './fluency.types'
-import type { TranslationKey } from '../../i18n/i18n'
-
-export const getMasteryLevelByBox = (box: number): FluencyMasteryLevel | null => {
-  if (box === 5) return FluencyMasteryLevel.MASTERED
-  if (box === 4) return FluencyMasteryLevel.STRONG
-  if (box === 3) return FluencyMasteryLevel.GROWING
-  if (box === 2) return FluencyMasteryLevel.LEARNING
-  return null
-}
-
-type CreateFluencyModeParams = {
-  mode: FluencyMode
-  label: TranslationKey
-  symbol: string
-  colorFamily: FluencyColorFamily
-}
-
-export const createFluencyMode = ({
-  mode,
-  label,
-  symbol,
-  colorFamily,
-}: CreateFluencyModeParams): FluencyModeConfig => {
-  const palette = COLOR_FAMILY_PALETTES[colorFamily]
-  const [learning, growing, strong, mastered] = palette.shades
-
-  return {
-    mode,
-    label,
-    symbol,
-    select: palette.select,
-    preset: {
-      buttonColor: palette.button,
-      symbol,
-      accentColor: strong, // TODO
-      header: {
-        streakColor: { gained: growing, todayBorder: strong },
-      },
-      matrix: {
-        operatorLabel: label,
-        levelColors: { learning, growing, strong, mastered },
-      },
-    },
-  }
-}
-
-export const buildMatrixGrid = (data: GetMatrixResponse, mode: FluencyMode): MatrixGrid => {
-  const facts = Object.values(data.operations[mode].facts)
-  const maxRow = Math.max(0, ...facts.map((f) => f.position.row))
-  const maxColumn = Math.max(0, ...facts.map((f) => f.position.column))
-  const isDivision = mode === FluencyMode.DIVISION
-  const isCommutative = mode === FluencyMode.ADDITION || mode === FluencyMode.MULTIPLICATION
-
-  const factAt = (row: number, col: number) =>
-    facts.find((f) => f.position.row === row && f.position.column === col)
-
-  // Division columns are 1-indexed in the API (÷1, ÷2...); all others are 0-indexed
-  const rowNumbers = Array.from({ length: maxRow + 1 }, (_, i) => i)
-  const columnNumbers = isDivision
-    ? Array.from({ length: maxColumn }, (_, i) => i + 1)
-    : Array.from({ length: maxColumn + 1 }, (_, i) => i)
-
-  const headerRow: GridCell[] = [
-    { isHeader: false, label: null, box: null, numbers: null },
-    ...columnNumbers.map(
-      (col): GridCell => ({ isHeader: true, label: col, box: null, numbers: null }),
-    ),
-  ]
-
-  const dataRows: GridCell[][] = rowNumbers.map((row) => [
-    { isHeader: true, label: row, box: null, numbers: null },
-    ...columnNumbers.map((col): GridCell => {
-      const fact = factAt(row, col)
-      const mirrorFact = isCommutative ? factAt(col, row) : null
-      const primaryBox = fact?.box ?? null
-      const mirrorBox = mirrorFact?.box ?? null
-      const effectiveBox =
-        primaryBox !== null && mirrorBox !== null
-          ? Math.max(primaryBox, mirrorBox)
-          : primaryBox ?? mirrorBox
-      const numbers: readonly [number, number] =
-        fact?.numbers ?? (isDivision ? [row * col, col] : [row, col])
-      return {
-        isHeader: false,
-        label: null,
-        box: effectiveBox,
-        numbers,
-      }
-    }),
-  ])
-
-  return [headerRow, ...dataRows]
-}

package/src/features/fluency/fluency.types.ts

@@ -1,125 +0,0 @@
-import type { ButtonColor, SelectOptionColor } from '@magmamath/react-native-ui'
-import type {
-  AttemptStatus,
-  FluencyMasteryLevel,
-  FluencyMode,
-  MatrixConfig,
-} from './fluency.constants'
-import type { TranslationKey } from '../../i18n/i18n'
-
-export type LegendItem = {
-  label: string
-  color: string
-  withBorder?: boolean
-}
-
-export type FluencyColorPalette = {
-  shades: readonly [string, string, string, string]
-  button: ButtonColor
-  select: SelectOptionColor
-}
-
-export type FluencyModePreset = {
-  buttonColor: ButtonColor
-  symbol: string
-  accentColor: string
-  header: {
-    streakColor: { gained: string; todayBorder: string }
-  }
-  matrix: {
-    operatorLabel: TranslationKey
-    levelColors: Record<FluencyMasteryLevel, string>
-  }
-}
-
-export type FluencyModeConfig = {
-  mode: FluencyMode
-  label: TranslationKey
-  symbol: string
-  select: SelectOptionColor
-  preset: FluencyModePreset
-}
-
-export type GetMatrixPayload = {
-  grade: number
-}
-
-export type FluencyAttemptItem = {
-  factId: string
-  status: AttemptStatus
-  startedAt: string
-  timeToSolve: number
-  boxAfter: number
-}
-
-export type FluencyAttemptPayload = {
-  grade: number
-  attempts: FluencyAttemptItem[]
-  matrixConfig?: MatrixConfig
-}
-
-export type FluencyAttemptResponse = {}
-
-export type FluencyModelProps = {
-  api: {
-    getMatrix: (payload: GetMatrixPayload) => Promise<GetMatrixResponse>
-    getWeeklyStats: () => Promise<GetWeeklyStatsResponse>
-    postAttempt: (payload: FluencyAttemptPayload) => Promise<FluencyAttemptResponse>
-  }
-}
-
-export type FluencyConfig = {
-  grade: number
-  name: string
-}
-
-export type FluencyModelGateProps = {
-  config: FluencyConfig
-}
-
-type FactPosition = {
-  column: number
-  row: number
-}
-
-export type Fact = {
-  attemptsCount: number
-  averageTimeMs: number | null
-  box: number | null
-  correctCount: number
-  difficulty: number
-  lastAttemptedAt: string | null
-  lastSolvedAt: string | null
-  numbers: readonly [number, number]
-  position: FactPosition
-  streak: number
-}
-
-type Operator = 'addition' | 'subtraction' | 'multiplication' | 'division'
-
-type Operation = {
-  completionRate: number
-  grade: number | null
-  facts: Record<string, Fact>
-}
-
-export type GetMatrixResponse = {
-  studentId: string
-  operations: Record<Operator, Operation>
-}
-
-export type GetWeeklyStatsResponse = {
-  daysPracticed: number
-  daysWithoutPractice: number
-  practicedDates: string[]
-  weekStart: string
-}
-
-export type GridCell = {
-  isHeader: boolean
-  label: number | null
-  box: number | null
-  numbers: readonly [number, number] | null  // null for header cells
-}
-
-export type MatrixGrid = GridCell[][]

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 '../fluency.constants'
-import type { FluencyCardDisplayContent } from '../components/fluency-solving/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,
-  }
-}