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

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

@@ -1,193 +0,0 @@
-import * as 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/StarFillIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import Svg, { Path } from 'react-native-svg'
-
-type StarFillIconProps = {
-  color?: string
-}
-
-export const StarFillIcon = ({ color }: StarFillIconProps) => {
-  return (
-    <Svg width={10} height={11} viewBox="0 0 10 11" fill="none">
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.767.432a.89.89 0 00-1.526 0L2.925 2.625l-2.25.563A.89.89 0 00.26 4.68l1.664 1.664-.553 2.626a.89.89 0 001.287.97l2.34-1.24 1.55.862.824.412a.89.89 0 001.269-.98l-.559-2.65L9.747 4.68a.89.89 0 00-.413-1.492l-2.251-.563L5.767.432z"
-        fill={color ?? '#33334D'}
-        fillOpacity={color ? 1 : 0.25}
-      />
-    </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.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { useGate } from 'effector-react'
-import { View, StyleSheet } from 'react-native'
-import { Typography, HeadingVariants, SPACING, COLORS } from '@magmamath/react-native-ui'
-import { useText } from '../../../i18n/i18n'
-import { StartBanner } from './start-banner/StartBanner'
-import { DayStreakCounter } from './day-streak-counter/DayStreakCounter'
-import { SelectMathOperator } from './select-math-operator/SelectMathOperator'
-import { FluencyMatrix } from './matrix/FluencyMatrix'
-import { MobileMenu } from './mobile-menu/MobileMenu'
-import { FluencyProvider } from '../context/FluencyContext'
-import type { FluencyModel } from '../model/FluencyModel'
-import type { FluencyMode } from '../fluency.constants'
-import type { FluencyConfig } from '../fluency.types'
-
-type FluencyProps = {
-  model: FluencyModel
-  config: FluencyConfig
-  onMenuPress?: () => void
-  onStartPress?: () => void
-  onPracticePress?: () => void
-  onModeSelectPress?: (mode: FluencyMode) => void
-}
-
-export const Fluency = ({
-  model,
-  config,
-  onMenuPress,
-  onStartPress,
-  onPracticePress,
-  onModeSelectPress,
-}: FluencyProps) => {
-  useGate(model.gate, { config })
-  const t = useText()
-
-  return (
-    <FluencyProvider value={{ model, onStartPress, onPracticePress, onModeSelectPress }}>
-      <View>
-        <View style={styles.title}>
-          <MobileMenu onPress={onMenuPress} />
-          <Typography variant={HeadingVariants.H2} style={styles.titleText}>
-            {t('student.fluency.title')}
-          </Typography>
-        </View>
-
-        <View style={styles.header}>
-          <StartBanner />
-          <DayStreakCounter />
-        </View>
-
-        <View style={styles.matrix}>
-          <SelectMathOperator />
-          <FluencyMatrix />
-        </View>
-      </View>
-    </FluencyProvider>
-  )
-}
-
-const styles = StyleSheet.create({
-  title: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  titleText: { color: COLORS.NEUTRAL_9 },
-  header: {
-    height: 182,
-    flexDirection: 'row',
-    marginTop: SPACING[400],
-    gap: SPACING[400],
-    zIndex: 1,
-  },
-  matrix: {
-    flexDirection: 'row',
-    marginTop: SPACING[400],
-    gap: SPACING[200],
-  },
-})

package/src/features/fluency/components/FluencySolving.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { COLORS } from '@magmamath/react-native-ui'
-import { FluencyProvider } from '../context/FluencyContext'
-import { FluencySolvingHeader } from './fluency-solving/components/FluencySolvingHeader'
-import { FluencySolvingProgress } from './fluency-solving/components/FluencySolvingProgress'
-import { FluencySolvingCard } from './fluency-solving/components/FluencySolvingCard'
-import { FluencySessionResults } from './session-results/FluencySessionResults'
-import { usePreventPageLeave } from '../hooks/usePreventPageLeave'
-import type { FluencyModel } from '../model/FluencyModel'
-
-type FluencySolvingProps = {
-  model: FluencyModel
-  onClosePress?: () => void
-  onEndModalPress?: () => void
-}
-
-export const FluencySolving = ({ model, onClosePress, onEndModalPress }: FluencySolvingProps) => {
-  usePreventPageLeave()
-
-  return (
-    <FluencyProvider value={{ model }}>
-      <View style={styles.container}>
-        <FluencySolvingHeader onClosePress={onClosePress} />
-        <FluencySolvingProgress />
-        <FluencySolvingCard />
-      </View>
-
-      <FluencySessionResults onClosePress={onClosePress} onEndModalPress={onEndModalPress} />
-    </FluencyProvider>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: COLORS.NEUTRAL_1,
-  },
-})

package/src/features/fluency/components/day-streak-counter/DayStreak.tsx

@@ -1,86 +0,0 @@
-import {
-  BORDER_RADIUS,
-  COLORS,
-  CorrectIcon,
-  HeadingVariants,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import React from 'react'
-import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
-import { StreakStatus } from '../../fluency.constants'
-
-type StreakDayProps = {
-  label: string
-  status: StreakStatus
-}
-
-type StatusStyle = {
-  circle: ViewStyle
-  label: TextStyle
-  hasIcon: boolean
-}
-
-const STATUS_STYLES: Record<StreakStatus, StatusStyle> = {
-  [StreakStatus.GAINED]: {
-    circle: {
-      backgroundColor: COLORS.PRIMARY_YELLOW,
-      borderWidth: 1,
-      borderColor: COLORS.NEUTRAL_3,
-    },
-    label: { color: COLORS.PRIMARY_YELLOW },
-    hasIcon: true,
-  },
-  [StreakStatus.TODAY]: {
-    circle: {
-      backgroundColor: COLORS.NEUTRAL_2,
-      borderWidth: 3,
-      borderColor: COLORS.YELLOW_6,
-    },
-    label: { color: COLORS.YELLOW_6 },
-    hasIcon: false,
-  },
-  [StreakStatus.TODAY_GAINED]: {
-    circle: {
-      backgroundColor: COLORS.PRIMARY_YELLOW,
-      borderWidth: 3,
-      borderColor: COLORS.YELLOW_6,
-    },
-    label: { color: COLORS.YELLOW_6 },
-    hasIcon: true,
-  },
-  [StreakStatus.MISSED]: {
-    circle: { backgroundColor: COLORS.NEUTRAL_2, borderWidth: 1, borderColor: COLORS.NEUTRAL_3 },
-    label: { color: COLORS.NEUTRAL_4 },
-    hasIcon: false,
-  },
-}
-
-export const StreakDay = ({ label, status }: StreakDayProps) => {
-  const { circle, label: labelStyle, hasIcon } = STATUS_STYLES[status]
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.circle, circle]}>
-        {hasIcon && <CorrectIcon color={COLORS.NEUTRAL_1} />}
-      </View>
-      <Typography variant={HeadingVariants.H3} style={labelStyle}>
-        {label}
-      </Typography>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    gap: SPACING[100],
-  },
-  circle: {
-    width: SPACING[800],
-    height: SPACING[800],
-    borderRadius: BORDER_RADIUS[400],
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-})

package/src/features/fluency/components/day-streak-counter/DayStreakCounter.tsx

@@ -1,84 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  FONT_FAMILY,
-  SHADOWS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { StreakDay } from './DayStreak'
-import { TranslationKey, useText } from '../../../../i18n/i18n'
-import { useFluency } from '../../context/FluencyContext'
-import { useStoreMap } from 'effector-react'
-import { StreakStatus } from '../../fluency.constants'
-import { GetWeeklyStatsResponse } from '@magmamath/students-features'
-
-const ONE_DAY_MS = 86_400_000
-const DAY_LABEL_KEYS: TranslationKey[] = [
-  'student.fluency.dayMonday',
-  'student.fluency.dayTuesday',
-  'student.fluency.dayWednesday',
-  'student.fluency.dayThursday',
-  'student.fluency.dayFriday',
-] as const
-
-const generateStreakDates = (stats: GetWeeklyStatsResponse) => {
-  const todayMs = new Date().setHours(0, 0, 0, 0)
-  const startMs = new Date(stats.weekStart).setHours(0, 0, 0, 0)
-  const practiced = new Set(stats.practicedDates.map((d) => new Date(d).setHours(0, 0, 0, 0)))
-
-  return [0, 1, 2, 3, 4].map((i) => {
-    const dayMs = startMs + i * ONE_DAY_MS
-    const isPracticed = practiced.has(dayMs)
-    const isToday = dayMs === todayMs
-    if (isPracticed && isToday) return StreakStatus.TODAY_GAINED
-    if (isPracticed) return StreakStatus.GAINED
-    if (isToday) return StreakStatus.TODAY
-    return StreakStatus.MISSED
-  })
-}
-
-export const DayStreakCounter = () => {
-  const t = useText()
-  const { model } = useFluency()
-  const statuses = useStoreMap(model.streak.$stats, (stats) =>
-    stats ? generateStreakDates(stats) : [],
-  )
-
-  return (
-    <View style={styles.container}>
-      <Typography style={styles.label}>{t('student.fluency.practiceThisWeek')}</Typography>
-
-      <View style={styles.streakDays}>
-        {DAY_LABEL_KEYS.map((key, i) => (
-          <StreakDay key={key} label={t(key)} status={statuses[i] ?? StreakStatus.MISSED} />
-        ))}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: 230,
-    height: 110,
-    paddingVertical: SPACING[200],
-    paddingHorizontal: SPACING[400],
-    borderRadius: BORDER_RADIUS[300],
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[1],
-  },
-  label: {
-    fontSize: 12,
-    fontWeight: '700',
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.NEUTRAL_8,
-  },
-  streakDays: {
-    flexDirection: 'row',
-    marginTop: 10,
-    gap: SPACING[200],
-  },
-})