@magmamath/students-features 1.5.0 → 1.5.1

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

@@ -0,0 +1,101 @@
+import React, { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  ErrorIcon,
+  HeadingVariants,
+  InfoIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { FluencyStatus } from '../shared/fluency.constants'
+import type { TranslationKey } from '../../../i18n/i18n'
+import { useText } from '../../../i18n/i18n'
+
+type StatusVariant = {
+  icon: ReactNode
+  circleColor: string
+  titleKey: TranslationKey
+  subtitleKey: TranslationKey
+}
+
+const FLUENCY_STATUS_VARIANTS: Record<FluencyStatus, StatusVariant> = {
+  [FluencyStatus.ERROR]: {
+    icon: <ErrorIcon color={COLORS.PRIMARY_RED} size={40} />,
+    circleColor: COLORS.RED_1,
+    titleKey: 'student.fluency.errorTitle',
+    subtitleKey: 'student.fluency.errorSubtitle',
+  },
+  [FluencyStatus.EMPTY]: {
+    icon: <InfoIcon color={COLORS.NEUTRAL_6} size={40} />,
+    circleColor: COLORS.NEUTRAL_2,
+    titleKey: 'student.fluency.emptyTitle',
+    subtitleKey: 'student.fluency.emptySubtitle',
+  },
+}
+
+type FluencyStatusOverlayProps = {
+  status: FluencyStatus
+}
+
+export const FluencyStatusOverlay = ({ status }: FluencyStatusOverlayProps) => {
+  const t = useText()
+
+  const variant = FLUENCY_STATUS_VARIANTS[status]
+  if (!variant) return null
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={[styles.iconCircle, { backgroundColor: variant.circleColor }]}>
+          {variant.icon}
+        </View>
+        <View style={styles.text}>
+          <Typography variant={HeadingVariants.H2} style={styles.title}>
+            {t(variant.titleKey)}
+          </Typography>
+          <Typography variant={HeadingVariants.H7} style={styles.subtitle}>
+            {t(variant.subtitleKey)}
+          </Typography>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+    gap: SPACING[500],
+    paddingBottom: SPACING[800],
+  },
+  iconCircle: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    alignItems: 'center',
+    gap: SPACING[200],
+    maxWidth: 340,
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+    fontSize: 24,
+    fontWeight: '500',
+  },
+  subtitle: {
+    color: COLORS.NEUTRAL_7,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '400',
+  },
+})

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

@@ -0,0 +1,86 @@
+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 '../../shared/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

@@ -0,0 +1,67 @@
+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 '../../shared/fluency.constants'
+import { generateStreakDates } from '../../shared/fluency.helpers'
+
+const DAY_LABEL_KEYS: TranslationKey[] = [
+  'student.fluency.dayMonday',
+  'student.fluency.dayTuesday',
+  'student.fluency.dayWednesday',
+  'student.fluency.dayThursday',
+  'student.fluency.dayFriday',
+] as const
+
+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],
+  },
+})

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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,71 @@
+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],
+  },
+})