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

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

@@ -1,114 +0,0 @@
-import React, { useEffect } from 'react'
-import { StyleSheet } from 'react-native'
-import Animated, {
-  cancelAnimation,
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated'
-import { SparkleIcon } from '../../assets/SparkleIcon'
-
-// QUICK easing from Figma ≈ cubic-bezier(0.2, 0, 0, 1)
-const QUICK = Easing.bezier(0.2, 0, 0, 1)
-
-// Hold duration at End state before dissolving back to Start
-const END_HOLD_MS = 800
-
-type SparkleItemConfig = {
-  leftPercent: number
-  topOffset: number
-  size: number
-  triggerDelay: number
-  appearDuration: number
-  dissolveDuration: number
-}
-
-// Positions derived from Figma (15,73,87,135,204 px within ~230 px container)
-// Timing values from Figma interaction table
-const SPARKLE_CONFIGS: SparkleItemConfig[] = [
-  { leftPercent: 6.5, topOffset: -3, size: 14, triggerDelay: 550, appearDuration: 868, dissolveDuration: 744 },
-  { leftPercent: 31.7, topOffset: 7, size: 14, triggerDelay: 550, appearDuration: 868, dissolveDuration: 744 },
-  { leftPercent: 37.8, topOffset: -5, size: 14, triggerDelay: 250, appearDuration: 744, dissolveDuration: 868 },
-  { leftPercent: 58.7, topOffset: 5, size: 20, triggerDelay: 50, appearDuration: 868, dissolveDuration: 868 },
-  { leftPercent: 88.7, topOffset: -5, size: 14, triggerDelay: 250, appearDuration: 744, dissolveDuration: 868 },
-]
-
-type SparkleItemProps = {
-  config: SparkleItemConfig
-  color: string
-}
-
-const SparkleItem = ({ config, color }: SparkleItemProps) => {
-  const loop = useSharedValue(0)
-
-  useEffect(() => {
-    // Loop value: 0 = Start (invisible), 1 = End (visible), 2 = dissolved back to Start
-    // Cycle: wait → SMART_ANIMATE to End → hold → DISSOLVE back → instant reset → repeat
-    loop.value = withRepeat(
-      withSequence(
-        withDelay(config.triggerDelay, withTiming(1, { duration: config.appearDuration, easing: QUICK })),
-        withDelay(END_HOLD_MS, withTiming(2, { duration: config.dissolveDuration, easing: QUICK })),
-        withTiming(0, { duration: 0 })
-      ),
-      -1,
-      false
-    )
-    return () => cancelAnimation(loop)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const v = loop.value
-    if (v <= 1) {
-      // SMART_ANIMATE phase: scale + rotation morph from Start → End
-      return {
-        opacity: v,
-        transform: [{ scale: v }, { rotate: `${(-90 + v * 90).toFixed(1)}deg` }],
-      }
-    }
-    // DISSOLVE phase: fade out only, shape stays at End
-    return {
-      opacity: 2 - v,
-      transform: [{ scale: 1 }, { rotate: '0deg' }],
-    }
-  }, [loop])
-
-  return (
-    <Animated.View
-      style={[
-        styles.sparkle,
-        animatedStyle,
-        {
-          left: `${config.leftPercent}%`,
-          top: config.topOffset,
-          width: config.size,
-          height: config.size,
-        },
-      ]}
-    >
-      <SparkleIcon size={config.size} color={color} />
-    </Animated.View>
-  )
-}
-
-export type ProgressBarSparklesProps = {
-  color: string
-}
-
-export const ProgressBarSparkles = ({ color }: ProgressBarSparklesProps) => (
-  <>
-    {SPARKLE_CONFIGS.map((config, index) => (
-      <SparkleItem key={index} config={config} color={color} />
-    ))}
-  </>
-)
-
-const styles = StyleSheet.create({
-  sparkle: {
-    position: 'absolute',
-  },
-})

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

@@ -1,73 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  HeadingVariants,
-  SHADOWS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useUnit } from 'effector-react'
-import { FLUENCY_MODES } from '../../fluency.constants'
-import { MathOperatorRow } from './MathOperatorRow'
-import { useFluency } from '../../context/FluencyContext'
-import { useText } from '../../../../i18n/i18n'
-
-export const SelectMathOperator = () => {
-  const t = useText()
-  const { model, onModeSelectPress } = useFluency()
-  const fluencyMode = useUnit(model.matrix.$mode)
-  const matrix = useUnit(model.matrix.$data)
-
-  return (
-    <View style={styles.container}>
-      {FLUENCY_MODES.map(({ mode, label, symbol, select }, index) => {
-        const isSelectedMode = mode === fluencyMode
-        const progress = (matrix?.operations[mode].completionRate ?? 0) * 100
-
-        return (
-          <MathOperatorRow
-            key={mode}
-            title={t(label)}
-            icon={
-              <Typography
-                variant={HeadingVariants.H6}
-                style={[styles.symbol, isSelectedMode && styles.symbolSelected]}
-              >
-                {symbol}
-              </Typography>
-            }
-            progress={progress}
-            color={select}
-            selected={isSelectedMode}
-            onSelect={() => {
-              model.matrix.setMode(mode)
-              onModeSelectPress?.(mode)
-            }}
-            showDivider={index < FLUENCY_MODES.length - 1}
-          />
-        )
-      })}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-start',
-    width: 270,
-    padding: SPACING[400],
-    borderRadius: BORDER_RADIUS[400],
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[1],
-  },
-  symbol: {
-    fontSize: 32,
-    fontWeight: '100',
-    color: COLORS.NEUTRAL_9,
-  },
-  symbolSelected: {
-    color: COLORS.NEUTRAL_1,
-  },
-})

package/src/features/fluency/components/session-results/FluencySessionResults.tsx

@@ -1,190 +0,0 @@
-import React, { useState } from 'react'
-import { Modal, View, StyleSheet, Text } from 'react-native'
-import {
-  BORDER_RADIUS,
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  CorrectIcon,
-  FONT_FAMILY,
-  SHADOWS,
-  SPACING,
-  TimerIcon,
-} from '@magmamath/react-native-ui'
-import { useUnit } from 'effector-react'
-import { CloseIcon } from '@magmamath/students-features'
-import { useText } from '../../../../i18n/i18n'
-import { useFluency } from '../../context/FluencyContext'
-import { AttemptStatus } from '../../fluency.constants'
-import {
-  calculateMaxStreak,
-  formatSessionDuration,
-} from '../fluency-solving/fluencySolving.helpers'
-import { SessionStatCard } from './SessionStatCard'
-import { FlameIcon } from '../../assets/FlameIcon'
-import { SnurrisnurrBg } from '../../assets/SnurrisnurrBg'
-import { TrophyBg } from '../../assets/TrophyBg'
-
-type FluencySessionResultsProps = {
-  onEndModalPress?: () => void
-  onClosePress?: () => void
-}
-
-export const FluencySessionResults = ({
-  onClosePress,
-  onEndModalPress,
-}: FluencySessionResultsProps) => {
-  const [isOpen, setIsOpen] = useState(true)
-  const t = useText()
-  const { model } = useFluency()
-  const { outcomes, completedDurationMs, isSessionComplete, config } = useUnit({
-    outcomes: model.solving.$outcomes,
-    completedDurationMs: model.solving.$completedDurationMs,
-    isSessionComplete: model.solving.$isSessionComplete,
-    config: model.$config,
-  })
-
-  if (!isSessionComplete) return null
-
-  const correctCount = outcomes.filter((o) => o.status === AttemptStatus.CORRECT).length
-  const maxStreak = calculateMaxStreak(outcomes)
-  const durationDisplay = formatSessionDuration(completedDurationMs)
-
-  return (
-    <Modal visible={isOpen} transparent animationType="fade">
-      <View style={styles.overlay}>
-        <View style={styles.container}>
-          <View style={[styles.snurrisnurrLayer, { pointerEvents: 'none' }]}>
-            <SnurrisnurrBg />
-          </View>
-          <View style={[styles.trophyLayer, { pointerEvents: 'none' }]}>
-            <TrophyBg />
-          </View>
-          <View style={styles.close}>
-            <Button
-              onPress={() => {
-                setIsOpen(false)
-                onClosePress?.()
-              }}
-              icon={<CloseIcon width={20} height={20} color={COLORS.NEUTRAL_7} />}
-              variant={ButtonVariant.TERTIARY}
-            />
-          </View>
-
-          <View style={styles.titleContainer}>
-            <Text style={styles.title}>{t('student.fluency.resultTitle')}</Text>
-            <Text style={styles.subtitle}>
-              {t('student.fluency.resultSubtitle', { name: config?.name ?? '' })}
-            </Text>
-          </View>
-
-          <View style={styles.resultsContainer}>
-            <SessionStatCard
-              value={String(correctCount)}
-              label={t('student.fluency.resultCorrectCardLabel')}
-              icon={<CorrectIcon size={30} color={COLORS.NEUTRAL_1} />}
-              color={COLORS.PRIMARY_GREEN}
-            />
-            <SessionStatCard
-              value={durationDisplay}
-              label={t('student.fluency.fast')}
-              icon={
-                <View style={styles.timerIconOffset}>
-                  <TimerIcon size={30} color={COLORS.NEUTRAL_1} />
-                </View>
-              }
-              color={COLORS.PRIMARY_PURPLE}
-            />
-            <SessionStatCard
-              value={String(maxStreak)}
-              label={t('student.fluency.resultStreakCardLabel')}
-              icon={<FlameIcon size={30} color={COLORS.NEUTRAL_1} />}
-              color={COLORS.PRIMARY_ORANGE}
-            />
-          </View>
-
-          <View style={styles.claimProgressButtonContainer}>
-            <Button
-              onPress={() => {
-                setIsOpen(false)
-                onEndModalPress?.()
-              }}
-              variant={ButtonVariant.PRIMARY}
-              size={ButtonSize.LARGE}
-              colorScheme={ButtonColor.YELLOW}
-              raiseLevel={6}
-            >
-              {t('student.fluency.claimProgress')}
-            </Button>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  )
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  container: {
-    width: 700,
-    height: 440,
-    padding: SPACING[800],
-    gap: SPACING[400],
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderRadius: BORDER_RADIUS[400],
-    overflow: 'hidden',
-    ...SHADOWS[5],
-  },
-  close: {
-    position: 'absolute',
-    top: SPACING[400],
-    right: SPACING[400],
-  },
-  titleContainer: {
-    gap: SPACING[200],
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 36,
-    fontWeight: '900',
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.NEUTRAL_9,
-  },
-  subtitle: {
-    fontSize: 18,
-    fontWeight: '400',
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.NEUTRAL_7,
-  },
-  resultsContainer: {
-    flexDirection: 'row',
-    height: 184,
-    gap: 10,
-    paddingTop: 32,
-    paddingBottom: 64,
-  },
-  snurrisnurrLayer: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-  },
-  trophyLayer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-  },
-  timerIconOffset: {
-    paddingBottom: 2,
-    paddingLeft: 2,
-  },
-  claimProgressButtonContainer: {
-    alignItems: 'center',
-  },
-})

package/src/features/fluency/components/session-results/SessionStatCard.tsx

@@ -1,58 +0,0 @@
-import React, { type ReactNode } from 'react'
-import { StyleSheet, Text, View, type ViewStyle } from 'react-native'
-import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
-
-type SessionStatCardProps = {
-  value: string
-  label: string
-  icon: ReactNode
-  color: string
-}
-
-export const SessionStatCard = ({ value, label, icon, color }: SessionStatCardProps) => {
-  return (
-    <View style={[styles.card, { borderColor: color }]}>
-      <View style={[styles.iconCircle, { backgroundColor: color }]}>{icon}</View>
-      <View style={styles.textContainer}>
-        <Text style={[styles.value, { color }]}>{value}</Text>
-        <Text style={styles.label}>{label}</Text>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  card: {
-    flex: 1,
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderWidth: 4,
-    borderRadius: BORDER_RADIUS[400],
-    padding: SPACING[400],
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[300],
-  },
-  textContainer: {
-    gap: SPACING[50],
-  },
-  iconCircle: {
-    width: 48,
-    height: 48,
-    borderRadius: 1000,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...SHADOWS[1],
-  },
-  value: {
-    fontSize: 32,
-    lineHeight: 34,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '700',
-  },
-  label: {
-    fontSize: 16,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '600',
-    color: COLORS.NEUTRAL_7,
-  },
-})

package/src/features/fluency/components/session-results/SkillProgressionRow.tsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING, Typography } from '@magmamath/react-native-ui'
-
-const BAR_WIDTH = 80
-
-type SkillProgressionRowProps = {
-  symbol: string
-  symbolColor: string
-  symbolBackground: string
-  operationName: string
-  levelLabel: string
-  levelColor: string
-  progressRate: number
-  progressColor: string
-  isActive?: boolean
-}
-
-export const SkillProgressionRow = ({
-  symbol,
-  symbolColor,
-  symbolBackground,
-  operationName,
-  levelLabel,
-  levelColor,
-  progressRate,
-  progressColor,
-  isActive,
-}: SkillProgressionRowProps) => {
-  return (
-    <View
-      style={[
-        styles.row,
-        isActive && { borderWidth: 1.5, borderColor: progressColor, backgroundColor: symbolBackground },
-      ]}
-    >
-      <View style={[styles.symbolCircle, { backgroundColor: symbolBackground }]}>
-        <Typography style={[styles.symbol, { color: symbolColor }]}>{symbol}</Typography>
-      </View>
-      <View style={styles.col}>
-        <Typography style={styles.name}>{operationName}</Typography>
-        <Typography style={[styles.level, { color: levelColor }]}>{levelLabel}</Typography>
-      </View>
-      <View style={styles.barTrack}>
-        <View style={[styles.barFill, { width: BAR_WIDTH * progressRate, backgroundColor: progressColor }]} />
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[300],
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    backgroundColor: COLORS.NEUTRAL_2,
-    borderRadius: 14,
-  },
-  symbolCircle: {
-    width: 36,
-    height: 36,
-    borderRadius: BORDER_RADIUS[250],
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-  },
-  symbol: {
-    fontSize: 18,
-    fontWeight: '900',
-    fontFamily: FONT_FAMILY.buenosAires,
-  },
-  col: {
-    flex: 1,
-    gap: 2,
-  },
-  name: {
-    fontSize: 14,
-    fontWeight: '700',
-    color: COLORS.NEUTRAL_10,
-    textAlign: 'center',
-  },
-  level: {
-    fontSize: 12,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  barTrack: {
-    width: BAR_WIDTH,
-    height: 6,
-    backgroundColor: COLORS.NEUTRAL_4,
-    borderRadius: BORDER_RADIUS[100],
-    overflow: 'hidden',
-  },
-  barFill: {
-    height: 6,
-    borderRadius: BORDER_RADIUS[100],
-  },
-})

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

@@ -1,45 +0,0 @@
-import React from 'react'
-import { MathFlashcard, FlashcardLayout } from './MathFlashcard'
-
-export type FlashcardExample = {
-  left: string
-  right: string
-}
-
-const CARD_LAYOUTS: FlashcardLayout[] = [
-  {
-    card: { width: 175, height: 106, radius: 8 },
-    answer: { width: 24, height: 34, radius: 5 },
-    fontSize: 31,
-    position: { right: 69, top: 84, zIndex: 1 },
-    rotation: '5.63deg',
-  },
-  {
-    card: { width: 234, height: 141, radius: 10 },
-    answer: { width: 32, height: 46, radius: 7 },
-    fontSize: 41,
-    position: { right: 35, top: 37, zIndex: 2 },
-    rotation: '-2.47deg',
-  },
-  {
-    card: { width: 286, height: 172, radius: 13 },
-    answer: { width: 39, height: 56, radius: 8 },
-    fontSize: 51,
-    position: { right: 9, top: -5, zIndex: 3 },
-    rotation: '3.07deg',
-  },
-]
-
-type BannerFlashcardsProps = {
-  examples: FlashcardExample[]
-}
-
-export const BannerFlashcards = ({ examples }: BannerFlashcardsProps) => (
-  <>
-    {CARD_LAYOUTS.map((layout, index) => {
-      const example = examples[index]
-      if (!example) return null
-      return <MathFlashcard key={index} left={example.left} right={example.right} layout={layout} />
-    })}
-  </>
-)

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

@@ -1,70 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import { COLORS, FONT_FAMILY, SHADOWS } from '@magmamath/react-native-ui'
-
-export type FlashcardLayout = {
-  card: { width: number; height: number; radius: number }
-  answer: { width: number; height: number; radius: number }
-  fontSize: number
-  position: { right: number; top: number; zIndex: number }
-  rotation: string
-}
-
-type MathFlashcardProps = {
-  left: string
-  right: string
-  layout: FlashcardLayout
-}
-
-export const MathFlashcard = ({ left, right, layout }: MathFlashcardProps) => (
-  <View
-    style={[
-      styles.card,
-      {
-        width: layout.card.width,
-        height: layout.card.height,
-        borderRadius: layout.card.radius,
-        right: layout.position.right,
-        top: layout.position.top,
-        zIndex: layout.position.zIndex,
-        transform: [{ rotate: layout.rotation }],
-      },
-    ]}
-  >
-    <View style={styles.row}>
-      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{left}</Text>
-      <View
-        style={[
-          styles.answerBox,
-          { width: layout.answer.width, height: layout.answer.height, borderRadius: layout.answer.radius },
-        ]}
-      />
-      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{right}</Text>
-    </View>
-  </View>
-)
-
-const styles = StyleSheet.create({
-  card: {
-    position: 'absolute',
-    backgroundColor: COLORS.NEUTRAL_1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...SHADOWS[1],
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 1,
-  },
-  text: {
-    fontWeight: 'bold',
-    fontFamily: FONT_FAMILY.buenosAires,
-    color: COLORS.BLACK,
-  },
-  answerBox: {
-    backgroundColor: COLORS.NEUTRAL_2,
-    borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_5,
-  },
-})