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

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

@@ -1,81 +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 '../../shared/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, matrix } = useUnit({
-    fluencyMode: model.matrix.$mode,
-    matrix: model.matrix.$data,
-  })
-
-  const visibleModes = matrix
-    ? FLUENCY_MODES.filter(
-        ({ mode }) => Object.keys(matrix.operations?.[mode]?.facts ?? {}).length > 0,
-      )
-    : FLUENCY_MODES
-
-  return (
-    <View style={styles.container}>
-      {visibleModes.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 < visibleModes.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,191 +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,
-  CrossIcon,
-} from '@magmamath/react-native-ui'
-import { useUnit } from 'effector-react'
-import { useText } from '../../../../i18n/i18n'
-import { useFluency } from '../../context/FluencyContext'
-import { AttemptStatus } from '../../shared/fluency.constants'
-import { calculateMaxStreak, formatSessionDuration } from '../../shared/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={<CrossIcon size={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}
-              style={{ text: styles.buttonText }}
-              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',
-  },
-  buttonText: {
-    textTransform: 'uppercase',
-  },
-})

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,46 +0,0 @@
-import React from 'react'
-import { MathFlashcard } from './MathFlashcard'
-import { FlashcardLayout } from '../../shared/fluency.types'
-
-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,67 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import { COLORS, FONT_FAMILY, SHADOWS } from '@magmamath/react-native-ui'
-import type { FlashcardLayout } from '../../shared/fluency.types'
-
-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,
-  },
-})

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

@@ -1,121 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  Typography,
-  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'
-import { SESSION_LENGTH } from '../../shared/fluency.constants'
-
-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
-            icon={<FlashIcon color={COLORS.NEUTRAL_1} />}
-            variant={ButtonVariant.PRIMARY}
-            size={ButtonSize.LARGE}
-            colorScheme={ButtonColor.YELLOW}
-            raiseLevel={6}
-            style={{ container: styles.button }}
-            onPress={() => {
-              model.solving.start()
-              onStartPress?.()
-            }}
-          >
-            {t('student.fluency.startPractice')}
-          </Button>
-          <Typography style={styles.buttonSubtitle}>
-            {SESSION_LENGTH} {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 '../shared/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