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

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

@@ -1,141 +0,0 @@
-import React, { useRef } from 'react'
-import { View, StyleSheet, TextInput, Platform } from 'react-native'
-import {
-  COLORS,
-  FONT_FAMILY,
-  HeadingVariants,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useText, type TranslationKey } from '../../../../../i18n/i18n'
-import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
-import { usePreventWebKeys } from '../../../hooks/usePreventWebKeys'
-import {
-  AttemptStatus,
-  MAX_INPUT_LENGTH,
-  type FluencyMode,
-} from '../../../shared/fluency.constants'
-
-const CURSOR_MOVE_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End']
-
-const STATUS_LABELS: Record<AttemptStatus, TranslationKey> = {
-  [AttemptStatus.CORRECT]: 'student.fluency.correct',
-  [AttemptStatus.INCORRECT]: 'student.fluency.incorrect',
-  [AttemptStatus.SKIPPED]: 'student.fluency.skipped',
-}
-
-const STATUS_COLOR: Record<AttemptStatus, string> = {
-  [AttemptStatus.CORRECT]: COLORS.PRIMARY_GREEN,
-  [AttemptStatus.INCORRECT]: COLORS.PRIMARY_RED,
-  [AttemptStatus.SKIPPED]: COLORS.NEUTRAL_7,
-}
-
-type EquationContentProps = {
-  leftOperand: number
-  rightOperand: number
-  mode?: FluencyMode
-  value?: string
-  readOnly?: boolean
-  status?: AttemptStatus
-  correctAnswer?: number
-  onChange?: (text: string) => void
-}
-
-export const EquationContent = ({
-  leftOperand,
-  rightOperand,
-  mode,
-  value = '',
-  readOnly = false,
-  status,
-  correctAnswer,
-  onChange,
-}: EquationContentProps) => {
-  const t = useText()
-  const modePreset = useFluencySolvingPreset({ mode })
-  const labelColor = status ? STATUS_COLOR[status] : COLORS.NEUTRAL_7
-  const labelText = status
-    ? t(STATUS_LABELS[status], { answer: correctAnswer })
-    : t('student.fluency.typeYourAnswer')
-  const answerAreaColor =
-    status === AttemptStatus.INCORRECT ? COLORS.PRIMARY_RED : modePreset.colors.accent
-
-  const inputRef = useRef<TextInput>(null)
-  usePreventWebKeys({ ref: inputRef, keys: CURSOR_MOVE_KEYS, enabled: !readOnly })
-
-  return (
-    <>
-      <Typography variant={HeadingVariants.H9} style={[styles.cardLabel, { color: labelColor }]}>
-        {labelText}
-      </Typography>
-      <View style={styles.equationRow}>
-        <Typography style={styles.number}>{leftOperand}</Typography>
-        <Typography style={[styles.number, { color: modePreset.colors.accent }]}>
-          {modePreset.symbol}
-        </Typography>
-        <Typography style={styles.number}>{rightOperand}</Typography>
-        <Typography style={styles.equals}>=</Typography>
-        <View
-          style={[styles.answerBox, value.length > 0 && { borderBottomColor: answerAreaColor }]}
-        >
-          <TextInput
-            ref={readOnly ? undefined : inputRef}
-            value={value}
-            onChangeText={readOnly ? undefined : onChange}
-            editable={!readOnly}
-            keyboardType="number-pad"
-            maxLength={MAX_INPUT_LENGTH}
-            selection={readOnly ? undefined : { start: value.length, end: value.length }}
-            style={[styles.number, styles.answerInput, { color: answerAreaColor }]}
-            autoFocus={false}
-          />
-        </View>
-      </View>
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  cardLabel: {
-    fontSize: 11,
-    fontWeight: '700',
-    letterSpacing: 1.3,
-    marginBottom: SPACING[500],
-    color: COLORS.NEUTRAL_7,
-  },
-  equationRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[300],
-    marginTop: SPACING[600],
-  },
-  number: {
-    fontSize: 75,
-    color: COLORS.NEUTRAL_10,
-    fontWeight: '700',
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-  equals: {
-    fontSize: 75,
-    color: COLORS.NEUTRAL_7,
-    fontWeight: '700',
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-  answerBox: {
-    width: 135,
-    height: 44,
-    marginBottom: -SPACING[800],
-    alignItems: 'center',
-    borderBottomWidth: 8,
-    borderBottomColor: COLORS.NEUTRAL_10,
-  },
-  answerInput: {
-    position: 'absolute',
-    bottom: -SPACING[400],
-    textAlign: 'center',
-    width: '100%',
-    borderWidth: 0,
-    backgroundColor: 'transparent',
-    ...(Platform.OS === 'web' && { outlineStyle: 'none', caretColor: 'transparent' }),
-  },
-})

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

@@ -1,131 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import Animated from 'react-native-reanimated'
-import { BORDER_RADIUS, COLORS, SHADOWS } from '@magmamath/react-native-ui'
-
-import { GradientView } from '../../../../../lib/components/GradientView'
-import { FluencyEquationCard } from './FluencyEquationCard'
-import type { SnapStyles } from '../../../hooks/useCardSnapAnimation'
-import { AttemptStatus } from '../../../shared/fluency.constants'
-import type { FluencyCardDisplayContent } from '../../../shared/fluencySolving.types'
-
-const CARD_GRADIENT_COLORS: Record<
-  AttemptStatus.CORRECT | AttemptStatus.INCORRECT,
-  [string, string]
-> = {
-  [AttemptStatus.CORRECT]: ['#ecfbf3', '#ffffff'],
-  [AttemptStatus.INCORRECT]: ['#fff0f1', '#ffffff'],
-}
-
-type FluencyCardDeckProps = {
-  currentCardContent: FluencyCardDisplayContent
-  exitingCardContent: FluencyCardDisplayContent | null
-  exitingCardStatus: AttemptStatus | null
-  snapStyles: SnapStyles
-  onAnswerChange: (text: string) => void
-}
-
-const hideAnswer = (cardContent: FluencyCardDisplayContent): FluencyCardDisplayContent => ({
-  ...cardContent,
-  answer: '',
-})
-
-export const FluencyCardDeck = ({
-  currentCardContent,
-  exitingCardContent,
-  exitingCardStatus,
-  snapStyles,
-  onAnswerChange,
-}: FluencyCardDeckProps) => {
-  const backingCardContent = hideAnswer(currentCardContent)
-
-  return (
-    <View style={styles.stack}>
-      <Animated.View style={[styles.card, styles.cardFar, snapStyles.far]} />
-      <Animated.View style={[styles.card, styles.cardMid, snapStyles.mid]} />
-
-      <Animated.View style={[styles.card, styles.cardNear, snapStyles.near]}>
-        <FluencyEquationCard cardContent={backingCardContent} readOnly />
-      </Animated.View>
-
-      {!exitingCardContent && (
-        <Animated.View style={[styles.card, styles.cardFront]}>
-          <FluencyEquationCard cardContent={currentCardContent} onAnswerChange={onAnswerChange} />
-        </Animated.View>
-      )}
-
-      {exitingCardContent && (
-        <Animated.View
-          style={[
-            styles.card,
-            styles.cardFront,
-            snapStyles.front,
-            exitingCardStatus === AttemptStatus.INCORRECT && styles.cardIncorrect,
-            exitingCardStatus === AttemptStatus.CORRECT && styles.cardCorrect,
-          ]}
-        >
-          {(exitingCardStatus === AttemptStatus.CORRECT ||
-            exitingCardStatus === AttemptStatus.INCORRECT) && (
-            <GradientView
-              colors={CARD_GRADIENT_COLORS[exitingCardStatus]}
-              style={[StyleSheet.absoluteFill, { borderRadius: BORDER_RADIUS[400] }]}
-              pointerEvents="none"
-            />
-          )}
-          <FluencyEquationCard
-            cardContent={exitingCardContent}
-            status={exitingCardStatus ?? undefined}
-            readOnly
-          />
-        </Animated.View>
-      )}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  stack: {
-    width: '100%',
-    maxWidth: 560,
-  },
-  card: {
-    height: 260,
-    borderRadius: BORDER_RADIUS[400],
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[5],
-  },
-  cardFar: {
-    position: 'absolute',
-    top: 36,
-    left: 60,
-    right: 60,
-    opacity: 0,
-  },
-  cardMid: {
-    position: 'absolute',
-    top: 24,
-    left: 40,
-    right: 40,
-  },
-  cardNear: {
-    position: 'absolute',
-    top: 12,
-    left: 20,
-    right: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...SHADOWS[5],
-  },
-  cardFront: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  cardCorrect: {
-    borderWidth: 1.5,
-    borderColor: COLORS.PRIMARY_GREEN,
-  },
-  cardIncorrect: {
-    borderWidth: 1.5,
-    borderColor: COLORS.PRIMARY_RED,
-  },
-})

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

@@ -1,51 +0,0 @@
-import React from 'react'
-
-import { EquationContent } from './EquationContent'
-import type { FluencyCardDisplayContent, SolvingFact } from '../../../shared/fluencySolving.types'
-import type { AttemptStatus, FluencyMode } from '../../../shared/fluency.constants'
-
-type DisplayedEquation = {
-  leftOperand: number
-  rightOperand: number
-  mode?: FluencyMode
-}
-
-type FluencyEquationCardProps = {
-  cardContent: FluencyCardDisplayContent
-  readOnly?: boolean
-  status?: AttemptStatus
-  onAnswerChange?: (text: string) => void
-}
-
-const getDisplayedEquation = (fact: SolvingFact | null): DisplayedEquation => {
-  const left = fact?.numbers[0] ?? 0
-  const right = fact?.numbers[1] ?? 0
-
-  return {
-    leftOperand: left,
-    rightOperand: right,
-    mode: fact?.mode,
-  }
-}
-
-export const FluencyEquationCard = ({
-  cardContent,
-  readOnly = false,
-  status,
-  onAnswerChange,
-}: FluencyEquationCardProps) => {
-  const equation = getDisplayedEquation(cardContent.fact)
-
-  return (
-    <EquationContent
-      leftOperand={equation.leftOperand}
-      rightOperand={equation.rightOperand}
-      mode={equation.mode}
-      value={cardContent.answer}
-      readOnly={readOnly}
-      status={status}
-      correctAnswer={cardContent.fact?.answer}
-      onChange={onAnswerChange}
-    />
-  )
-}

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

@@ -1,54 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FONT_FAMILY, SelectGroup, SelectOptionColor, SelectOptionSize, SPACING } from '@magmamath/react-native-ui'
-import { useFluencyNumpad } from '../../../hooks/useFluencyNumpad'
-
-type FluencyNumpadProps = {
-  onSubmit: () => void
-}
-
-export const FluencyNumpad = ({ onSubmit }: FluencyNumpadProps) => {
-  const { options } = useFluencyNumpad({ onSubmit })
-
-  return (
-    <View style={styles.container}>
-      <SelectGroup
-        numOfRows={4}
-        color={SelectOptionColor.GREY}
-        size={SelectOptionSize.SMALL}
-        options={options}
-        style={{
-          container: styles.grid,
-          row: styles.row,
-          option: {
-            button: styles.optionButton,
-            text: styles.optionText,
-          },
-        }}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    paddingVertical: SPACING[400],
-    marginTop: SPACING[200],
-  },
-  grid: {
-    width: 360,
-    gap: SPACING[200],
-  },
-  row: {
-    gap: SPACING[200],
-  },
-  optionButton: {
-    height: 60,
-  },
-  optionText: {
-    fontSize: 24,
-    fontWeight: '700',
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-})

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

@@ -1,71 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { useUnit } from 'effector-react/effector-react.mjs'
-import { SPACING } from '@magmamath/react-native-ui'
-
-import { FluencyNumpad } from './FluencyNumpad'
-import { FluencyCardDeck } from './FluencyCardDeck'
-import { useFluency } from '../../../context/FluencyContext'
-import { useFluencyCardDeckAnimation } from '../../../hooks/useFluencyCardDeckAnimation'
-import { useSuccessSound } from '../../../hooks/useSuccessSound'
-import { AttemptStatus } from '../../../shared/fluency.constants'
-import type { SnapDirection } from '../../../hooks/useCardSnapAnimation'
-
-export const FluencySolvingCard = () => {
-  const { model } = useFluency()
-  const { currentAnswer, currentFact } = useUnit({
-    currentAnswer: model.solving.$answer,
-    currentFact: model.solving.$current,
-  })
-  const cardDeckAnimation = useFluencyCardDeckAnimation()
-  const successSound = useSuccessSound()
-
-  const currentCardContent = { fact: currentFact, answer: currentAnswer ?? '' }
-
-  const updateAnswer = (text: string) => {
-    const digits = text.replace(/\D/g, '')
-    model.solving.setAnswer(digits || null)
-  }
-
-  const submit = () => {
-    if (!currentFact) return
-    if (currentAnswer === null) return
-
-    const isCorrect = Number(currentAnswer) === currentFact.answer
-    const direction: SnapDirection = isCorrect ? 'right' : 'left'
-    const status = isCorrect ? AttemptStatus.CORRECT : AttemptStatus.INCORRECT
-
-    if (!cardDeckAnimation.startCardExit({ cardContent: currentCardContent, direction, status }))
-      return
-
-    if (isCorrect) {
-      successSound.play()
-    }
-
-    model.solving.submit()
-  }
-
-  return (
-    <View>
-      <View style={styles.wrapper}>
-        <FluencyCardDeck
-          currentCardContent={currentCardContent}
-          exitingCardContent={cardDeckAnimation.exitingCardContent}
-          exitingCardStatus={cardDeckAnimation.exitingCardStatus}
-          snapStyles={cardDeckAnimation.snapStyles}
-          onAnswerChange={updateAnswer}
-        />
-      </View>
-      <FluencyNumpad onSubmit={submit} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-    paddingVertical: SPACING[400],
-    paddingHorizontal: SPACING[600],
-    marginTop: SPACING[300],
-  },
-})

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

@@ -1,75 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  BORDER_RADIUS,
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  HeadingVariants,
-  SHADOWS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
-import { XCloseIcon } from '../../../../../shared/icons/XCloseIcon'
-
-type FluencySolvingHeaderProps = {
-  onClosePress?: () => void
-}
-
-export const FluencySolvingHeader = ({ onClosePress }: FluencySolvingHeaderProps) => {
-  const modePreset = useFluencySolvingPreset()
-
-  return (
-    <View style={styles.container}>
-      <Button
-        variant={ButtonVariant.SECONDARY}
-        size={ButtonSize.LARGE}
-        colorScheme={ButtonColor.WHITE}
-        icon={<XCloseIcon />}
-        onPress={onClosePress}
-      />
-      <View style={[styles.operatorBadge, { backgroundColor: modePreset.colors.accent }]}>
-        <Typography variant={HeadingVariants.H7} style={styles.symbol}>
-          {modePreset.symbol}
-        </Typography>
-      </View>
-      <Typography variant={HeadingVariants.H4} style={styles.title}>
-        {modePreset.label}
-      </Typography>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: 76,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 14,
-    paddingVertical: SPACING[400],
-    paddingHorizontal: SPACING[600],
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[1],
-  },
-  operatorBadge: {
-    width: 32,
-    height: 32,
-    borderRadius: BORDER_RADIUS[200],
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...SHADOWS[1],
-  },
-  title: {
-    color: COLORS.NEUTRAL_10,
-    fontWeight: '700',
-  },
-  symbol: {
-    fontSize: 32,
-    fontWeight: '100',
-    marginBottom: 2,
-    color: COLORS.NEUTRAL_1,
-  },
-})

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 '../../../shared/fluency.constants'
-import type { QuestionOutcome } from '../../../shared/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,
-  },
-})