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

package/src/features/fluency/assets/SnurrisnurrBg.tsx

@@ -1,193 +0,0 @@
-import React from 'react'
-import Svg, { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg'
-
-export const SnurrisnurrBg = () => {
-  return (
-    <Svg width={702} height={441} viewBox="0 0 702 441" fill="none">
-      <G opacity={0.1}>
-        <Path
-          d="M164-484.96a893.984 893.984 0 01222.319 28.085L164 409v-893.96z"
-          fill="url(#paint0_linear_1295_36090)"
-        />
-        <Path
-          d="M-282.98-365.192a893.955 893.955 0 01206.577-86.837L164 409l-446.98-774.192z"
-          fill="url(#paint1_linear_1295_36090)"
-        />
-        <Path
-          d="M-610.192-37.98A894.001 894.001 0 01-474.71-216.471L164 409-610.192-37.98z"
-          fill="url(#paint2_linear_1295_36090)"
-        />
-        <Path
-          d="M-729.96 409a893.984 893.984 0 0128.085-222.319L164 409h-893.96z"
-          fill="url(#paint3_linear_1295_36090)"
-        />
-        <Path
-          d="M-610.192 855.98a893.95 893.95 0 01-86.837-206.577L164 409l-774.192 446.98z"
-          fill="url(#paint4_linear_1295_36090)"
-        />
-        <Path
-          d="M-282.98 1183.19a893.687 893.687 0 01-178.491-135.48L164 409l-446.98 774.19z"
-          fill="url(#paint5_linear_1295_36090)"
-        />
-        <Path
-          d="M610.98-365.192A893.96 893.96 0 01789.471-229.71L164 409l446.98-774.192z"
-          fill="url(#paint6_linear_1295_36090)"
-        />
-        <Path
-          d="M938.192-37.98a894.09 894.09 0 0186.838 206.577L164 409 938.192-37.98z"
-          fill="url(#paint7_linear_1295_36090)"
-        />
-        <Path
-          d="M1057.96 409c0 74.991-9.44 149.684-28.09 222.319L164 409h893.96z"
-          fill="url(#paint8_linear_1295_36090)"
-        />
-        <Path
-          d="M938.192 855.98a893.925 893.925 0 01-135.482 178.49L164 409l774.192 446.98z"
-          fill="url(#paint9_linear_1295_36090)"
-        />
-        <Path
-          d="M610.98 1183.19a893.916 893.916 0 01-206.577 86.84L164 409l446.98 774.19z"
-          fill="url(#paint10_linear_1295_36090)"
-        />
-        <Path
-          d="M164 1302.96a893.94 893.94 0 01-222.319-28.09L164 409v893.96z"
-          fill="url(#paint11_linear_1295_36090)"
-        />
-      </G>
-      <Defs>
-        <LinearGradient
-          id="paint0_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint1_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint2_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint3_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint4_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint5_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint6_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint7_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint8_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint9_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint10_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id="paint11_linear_1295_36090"
-          x1={164}
-          y1={496.93}
-          x2={930.036}
-          y2={496.93}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor="#FF245F" />
-          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
-        </LinearGradient>
-      </Defs>
-    </Svg>
-  )
-}

package/src/features/fluency/assets/SparkleIcon.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import Svg, { Path } from 'react-native-svg'
-import { COLORS, IconProps } from '@magmamath/react-native-ui'
-
-export const SparkleIcon = ({ size = 20, color = COLORS.NEUTRAL_9 }: IconProps) => {
-  return (
-    <Svg width={size} height={size} viewBox="0 0 21 21" fill="none">
-      <Path
-        d="M20.063 11.863c-3.688 1.348-6.782 4.42-8.24 8.244-.505 1.19-2.111 1.19-2.587 0-1.517-3.793-4.61-6.864-8.299-8.18-1.25-.502-1.25-2.352 0-2.79 3.688-1.348 6.782-4.42 8.24-8.244.505-1.19 2.111-1.19 2.587 0 1.517 3.793 4.61 6.864 8.299 8.18 1.25.502 1.25 2.352 0 2.79z"
-        fill={color}
-      />
-    </Svg>
-  )
-}

package/src/features/fluency/assets/TrophyBg.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import Svg, { Path } from 'react-native-svg'
-
-export const TrophyBg = () => {
-  return (
-    <Svg width={465} height={342} viewBox="0 0 465 342" fill="none">
-      <Path
-        d="M257.477 243.501l-5.73 32.767 16.383 2.86c8.048 1.408 15.796 2.106 23.223 2.106 15.696.011 29.984-3.137 42.765-9.389 6.729-3.292 13.025-7.438 18.9-12.448 44.672-38.121 50.248-115.859 49.605-158.813-.288-18.468-9.467-35.849-24.575-46.49-9.356-6.607-20.23-10.21-31.348-10.575a58.006 58.006 0 00-17.936 2.206c-14.355 4.09-26.359 13.379-33.875 25.994L262.51 57.386l-13.457 30.417 39.163 17.325c6.274 2.772 13.246 2.916 19.631.388 6.374-2.516 11.373-7.382 14.056-13.7a24.557 24.557 0 0115.973-14.112c2.993-.853 6.052-1.13 9.056-.853a24.576 24.576 0 0111.961 4.423c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.84-18.822 112.223-32.024 127.143-2.195 2.494-4.212 4.412-5.908 5.864-14.632 12.471-33.465 16.483-57.586 12.271l-16.373-2.871zM36.646 281.238c7.429 0 15.173-.702 23.223-2.11l16.379-2.865-5.73-32.757-16.378 2.865c-24.126 4.221-42.953.203-57.575-12.273-11.858-10.12-39.294-43.337-37.935-133.007.118-7.871 4.035-15.28 10.475-19.82A24.601 24.601 0 01-9.88 77.703 24.606 24.606 0 016.098 91.814c2.683 6.319 7.675 11.186 14.058 13.709 6.384 2.522 13.355 2.38 19.63-.396l39.152-17.329-13.46-30.409-32.37 14.327C25.594 59.106 13.593 49.814-.764 45.721c-16.936-4.827-34.901-1.777-49.293 8.37-15.102 10.646-24.285 28.029-24.565 46.497-.652 42.947 4.926 120.687 49.6 158.806 17.036 14.535 37.71 21.844 61.668 21.844z"
-        fill="#FFD690"
-      />
-      <Path
-        opacity={0.1}
-        d="M334.118 271.846c6.729-3.292 13.025-7.438 18.9-12.448 44.672-38.121 50.248-115.86 49.605-158.814-.288-18.467-9.467-35.848-24.575-46.49-9.356-6.606-20.23-10.209-31.348-10.575 3.325 3.692 14.299 18.058.232 33.333a24.575 24.575 0 0111.961 4.423c6.44 4.533 10.353 11.95 10.475 19.819 1.164 76.841-18.822 112.224-32.024 127.144 0 0 21.66 24.498-3.226 43.608z"
-        fill="#D25B00"
-      />
-      <Path
-        d="M25.176 201.871l20.496-176.73a11.505 11.505 0 0111.429-10.18h213.797a11.505 11.505 0 0111.429 10.18l20.494 176.73c4.463 38.483-10.944 76.387-39.056 96.086l-8.178 5.731c-15.467 10.837-32.136 18.806-49.435 23.744-11.86 3.385-19.699 16.815-18.042 31.208l5.699 49.527H134.19l5.7-49.527c1.656-14.393-6.182-27.824-18.043-31.208-17.299-4.938-33.967-12.905-49.434-23.744l-8.178-5.731c-28.115-19.699-43.522-57.604-39.059-96.086z"
-        fill="#FFD690"
-      />
-      <Path
-        opacity={0.1}
-        d="M168.054 358.634l1.751 36.867h22.547l-4.246-36.867c-1.652-14.388 6.185-27.823 18.046-31.204 17.293-4.933 33.964-12.903 49.428-23.744l8.18-5.731c28.112-19.698 43.52-57.597 39.063-96.084L282.322 25.136a11.505 11.505 0 00-11.429-10.179h-50.531l12.193 186.913c2.506 38.487-6.152 76.386-21.959 96.084l-4.6 5.731c-8.702 10.841-18.068 18.811-27.801 23.744-6.661 3.382-11.073 16.817-10.141 31.205z"
-        fill="#D25B00"
-      />
-      <Path
-        opacity={0.3}
-        d="M72.805 16.15c-1.8.655-4.135 2.152-6.082 4.198-2.015 2.118-2.781 3.928-2.902 4.848-3.966 30.145-7.066 56.336-10.696 87.003-3.112 26.288-9.844 72.334-12.788 92.948-2.944 20.613-2.944 23.442-2.944 35.337 0 22.086 10.365 42.197 10.365 42.197-4.634-5.04-14.078-23.056-15.59-26.678-5.246-12.574-9.598-33.753-7.343-51.81 4.73-37.864 7.789-67.528 10.907-93.863 5.03-41.445 4.878-42.092 8.977-77.441C46.495 17.497 45.79 14.82 58.685 14.82h18.25c-1.45.416-2.835.86-4.13 1.33z"
-        fill="#fff"
-      />
-    </Svg>
-  )
-}

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

@@ -1,140 +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 } from '../../../../../i18n/i18n'
-import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
-import { usePreventWebKeys } from '../../../hooks/usePreventWebKeys'
-import { AttemptStatus, MAX_INPUT_LENGTH, type FluencyMode } from '../../../fluency.constants'
-
-const CURSOR_MOVE_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End']
-
-const STATUS_COLOR: Record<AttemptStatus, string> = {
-  [AttemptStatus.CORRECT]: COLORS.PRIMARY_GREEN,
-  [AttemptStatus.INCORRECT]: COLORS.PRIMARY_RED,
-  [AttemptStatus.SKIPPED]: COLORS.NEUTRAL_7,
-}
-
-const getLabelText = (status: AttemptStatus | undefined, defaultText: string, correctAnswer?: number): string => {
-  switch (status) {
-    case AttemptStatus.CORRECT: return 'Correct!'
-    case AttemptStatus.INCORRECT: return `INCORRECT — ANSWER: ${correctAnswer ?? ''}`
-    case AttemptStatus.SKIPPED: return 'Skipped'
-    default: return defaultText
-  }
-}
-
-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 = getLabelText(status, t('student.fluency.typeYourAnswer'), correctAnswer)
-  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={!readOnly}
-          />
-        </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,128 +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 '../../../fluency.constants'
-import type { FluencyCardDisplayContent } from '../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 '../fluencySolving.types'
-import type { AttemptStatus, FluencyMode } from '../../../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,70 +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 '../../../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
-
-    const isCorrect = currentAnswer !== null && 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],
-  },
-})