@magmamath/students-features 1.5.0 → 1.5.1

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

@@ -0,0 +1,75 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useFluencySolvingPreset } from '../../../hooks/useFluencySolvingPreset'
+import { XCloseIcon } from '../../../../../shared/icons/XCloseIcon'
+
+type FluencySolvingHeaderProps = {
+  onClosePress?: () => void
+}
+
+export const FluencySolvingHeader = ({ onClosePress }: FluencySolvingHeaderProps) => {
+  const modePreset = useFluencySolvingPreset()
+
+  return (
+    <View style={styles.container}>
+      <Button
+        variant={ButtonVariant.SECONDARY}
+        size={ButtonSize.LARGE}
+        colorScheme={ButtonColor.WHITE}
+        icon={<XCloseIcon />}
+        onPress={onClosePress}
+      />
+      <View style={[styles.operatorBadge, { backgroundColor: modePreset.colors.accent }]}>
+        <Typography variant={HeadingVariants.H7} style={styles.symbol}>
+          {modePreset.symbol}
+        </Typography>
+      </View>
+      <Typography variant={HeadingVariants.H4} style={styles.title}>
+        {modePreset.label}
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 76,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1],
+  },
+  operatorBadge: {
+    width: 32,
+    height: 32,
+    borderRadius: BORDER_RADIUS[200],
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  title: {
+    color: COLORS.NEUTRAL_10,
+    fontWeight: '700',
+  },
+  symbol: {
+    fontSize: 32,
+    fontWeight: '100',
+    marginBottom: 2,
+    color: COLORS.NEUTRAL_1,
+  },
+})

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { AttemptStatus, SESSION_LENGTH } from '../../../shared/fluency.constants'
+import type { QuestionOutcome } from '../../../shared/fluencySolving.types'
+import { FluencySolvingProgressDot } from './FluencySolvingProgressDot'
+import { useFluency } from '../../../context/FluencyContext'
+import { useUnit } from 'effector-react'
+
+const GROUP_SIZE = 5
+
+type ProgressDotProps = {
+  index: number
+  activeIndex: number
+  outcome: QuestionOutcome | undefined
+}
+
+const ProgressDot = ({ index, activeIndex, outcome }: ProgressDotProps) => {
+  if (index === activeIndex) return <FluencySolvingProgressDot />
+  if (index < activeIndex && outcome) return <View style={DOT_STYLE_BY_OUTCOME[outcome.status]} />
+  return <View style={styles.dot} />
+}
+
+export const FluencySolvingProgress = () => {
+  const { model } = useFluency()
+  const outcomes = useUnit(model.solving.$outcomes)
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: SESSION_LENGTH / GROUP_SIZE }, (_, groupIndex) => (
+        <View key={groupIndex} style={styles.group}>
+          {Array.from({ length: GROUP_SIZE }, (_, dotIndex) => {
+            const index = groupIndex * GROUP_SIZE + dotIndex
+            return (
+              <ProgressDot
+                key={index}
+                index={index}
+                activeIndex={outcomes.length}
+                outcome={outcomes[index]}
+              />
+            )
+          })}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SPACING[500],
+    paddingHorizontal: SPACING[600],
+    paddingVertical: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  group: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+  },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.NEUTRAL_4,
+  },
+  dotCorrect: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.PRIMARY_GREEN,
+  },
+  dotWrong: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: COLORS.PRIMARY_RED,
+  },
+})
+
+const DOT_STYLE_BY_OUTCOME: Record<AttemptStatus, object> = {
+  [AttemptStatus.CORRECT]: styles.dotCorrect,
+  [AttemptStatus.INCORRECT]: styles.dotWrong,
+  [AttemptStatus.SKIPPED]: styles.dot,
+}

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

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react'
+import { View, StyleSheet } from 'react-native'
+import Animated, {
+  cancelAnimation,
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated'
+import { COLORS } from '@magmamath/react-native-ui'
+
+const DOT_SIZE = 16
+const RING_SPREAD_MIN = 4
+const RING_SPREAD_MAX = 8
+const RING_SIZE = DOT_SIZE + RING_SPREAD_MAX * 2
+const RING_SCALE_MIN = (DOT_SIZE + RING_SPREAD_MIN * 2) / RING_SIZE
+const RING_OPACITY_MIN = 0.06
+const RING_OPACITY_MAX = 0.12
+const PULSE_DURATION_MS = 800
+
+export const FluencySolvingProgressDot = () => {
+  const progress = useSharedValue(0)
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) }),
+        withTiming(0, { duration: PULSE_DURATION_MS, easing: Easing.inOut(Easing.ease) })
+      ),
+      -1,
+      false
+    )
+    return () => cancelAnimation(progress)
+  }, [progress])
+
+  const ringStyle = useAnimatedStyle(() => {
+    const scale = interpolate(progress.value, [0, 1], [RING_SCALE_MIN, 1])
+    const opacity = interpolate(progress.value, [0, 1], [RING_OPACITY_MAX, RING_OPACITY_MIN])
+    return {
+      opacity,
+      transform: [{ scale }],
+    }
+  }, [progress])
+
+  return (
+    <View style={styles.dot}>
+      <Animated.View style={[styles.ring, ringStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_SIZE / 2,
+    backgroundColor: COLORS.NEUTRAL_10,
+  },
+  ring: {
+    position: 'absolute',
+    top: -RING_SPREAD_MAX,
+    left: -RING_SPREAD_MAX,
+    width: RING_SIZE,
+    height: RING_SIZE,
+    borderRadius: RING_SIZE / 2,
+    backgroundColor: COLORS.NEUTRAL_10,
+  },
+})

package/src/features/fluency/components/matrix/FluencyMatrix.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { MatrixLegend } from './components/MatrixLegend'
+import { MatrixFill } from './components/MatrixFill'
+
+export const FluencyMatrix = () => (
+  <View style={styles.container}>
+    <View style={styles.matrixFillContainer}>
+      <MatrixFill />
+    </View>
+
+    <MatrixLegend />
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+    ...SHADOWS[1],
+  },
+  matrixFillContainer: {
+    flex: 1,
+    padding: SPACING[300],
+  },
+})

package/src/features/fluency/components/matrix/components/CellTooltip.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+
+type CellTooltipProps = {
+  label: string
+}
+
+export const CellTooltip = ({ label }: CellTooltipProps) => (
+  <View style={styles.container}>
+    <View style={styles.bubble}>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+    <View style={styles.arrow} />
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  bubble: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[150],
+    paddingHorizontal: SPACING[200],
+    paddingVertical: SPACING[100],
+    ...SHADOWS[4],
+  },
+  label: {
+    fontSize: 13,
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+  },
+  arrow: {
+    width: 0,
+    height: 0,
+    marginTop: -4,
+    borderLeftWidth: 9,
+    borderRightWidth: 9,
+    borderTopWidth: 12,
+    borderStyle: 'solid',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: COLORS.NEUTRAL_1,
+  },
+})

package/src/features/fluency/components/matrix/components/MatrixCell.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+import { Pressable, View, Text, StyleSheet } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+import { FluencyMasteryLevel } from '../../../shared/fluency.constants'
+import { StarFillIcon } from '../../../assets/StarFillIcon'
+import { CellTooltip } from './CellTooltip'
+import type { GridCell } from '../../../shared/fluency.types'
+
+type MatrixCellProps = Omit<GridCell, 'label'> & {
+  label: string | number | null
+  levelColors: Record<FluencyMasteryLevel, string>
+  tooltipLabel: string | null
+}
+
+export const MatrixCell = ({
+  label,
+  box,
+  isHeader,
+  isEmpty,
+  levelColors,
+  tooltipLabel,
+}: MatrixCellProps) => {
+  const [isActive, setIsActive] = useState(false)
+  const masteryLevel = box || null
+  const isMastered = masteryLevel === FluencyMasteryLevel.MASTERED
+
+  const bgColor = (() => {
+    if (masteryLevel) return levelColors[masteryLevel]
+    if (isHeader) return COLORS.NEUTRAL_5
+    return COLORS.NEUTRAL_2
+  })()
+
+  const showTooltip = isActive && !!tooltipLabel
+
+  const activate = () => setIsActive(true)
+  const deactivate = () => setIsActive(false)
+
+  if (isEmpty) {
+    return (
+      <View style={styles.wrapper}>
+        <View style={[styles.cell, styles.emptyCell]}>
+          <Text style={styles.emptyCellText}>−</Text>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={[styles.wrapper, showTooltip && styles.wrapperActive]}>
+      {showTooltip && (
+        <Animated.View
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(200)}
+          style={[styles.tooltipContainer, { pointerEvents: 'none' }]}
+        >
+          <CellTooltip label={tooltipLabel} />
+        </Animated.View>
+      )}
+      <Pressable
+        style={[styles.cell, { backgroundColor: bgColor }]}
+        onHoverIn={activate}
+        onHoverOut={deactivate}
+        onPressIn={activate}
+        onPressOut={deactivate}
+      >
+        {isMastered && <StarFillIcon color={isActive ? COLORS.PRIMARY_YELLOW : undefined} />}
+
+        {label !== null && (
+          <Text style={typeof label === 'string' ? styles.symbolText : styles.headerText}>
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+  },
+  wrapperActive: {
+    zIndex: 1,
+  },
+  cell: {
+    flex: 1,
+    borderRadius: BORDER_RADIUS[100],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tooltipContainer: {
+    position: 'absolute',
+    bottom: '80%',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingBottom: SPACING[50],
+    zIndex: 1,
+  },
+  emptyCell: {
+    backgroundColor: COLORS.NEUTRAL_2,
+  },
+  emptyCellText: {
+    fontSize: 12,
+    color: COLORS.NEUTRAL_5,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  headerText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_2,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  symbolText: {
+    fontSize: 24,
+    color: COLORS.NEUTRAL_7,
+  },
+})

package/src/features/fluency/components/matrix/components/MatrixFill.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { MatrixCell } from './MatrixCell'
+import { useFluency } from '../../../context/FluencyContext'
+import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
+
+export const MatrixFill = () => {
+  const { model } = useFluency()
+  const modePreset = useFluencyModePreset()
+  const grid = useUnit(model.matrix.$matrix)
+
+  if (!grid) return null
+
+  return (
+    <View style={styles.grid}>
+      {grid.map((row, rowIdx) => (
+        <View key={rowIdx} style={styles.row}>
+          {row.map((cell, colIdx) => {
+            const isOriginCell = rowIdx === 0 && colIdx === 0
+            const tooltipLabel = cell.numbers
+              ? `${cell.numbers[0]}${modePreset.symbol}${cell.numbers[1]}`
+              : null
+
+            return (
+              <MatrixCell
+                key={colIdx}
+                {...cell}
+                label={isOriginCell ? modePreset.symbol : cell.label}
+                levelColors={modePreset.colors.level}
+                tooltipLabel={tooltipLabel}
+              />
+            )
+          })}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  grid: {
+    flex: 1,
+    gap: SPACING[100],
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    gap: SPACING[100],
+  },
+})

package/src/features/fluency/components/matrix/components/MatrixLegend.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  PlayIcon,
+  SHADOWS,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
+import { useFluency } from '../../../context/FluencyContext'
+import { useText } from '../../../../../i18n/i18n'
+import { useUnit } from 'effector-react'
+
+export const MatrixLegend = () => {
+  const t = useText()
+  const modePreset = useFluencyModePreset()
+  const { model, onPracticePress } = useFluency()
+  const mode = useUnit(model.matrix.$mode)
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.legendItems}>
+        {modePreset.legend.items.map((item) => (
+          <View key={item.label} style={styles.legendItem}>
+            <View
+              style={[
+                styles.legendDot,
+                { backgroundColor: item.color },
+                item.withBorder && styles.legendDotBorder,
+              ]}
+            />
+            <Text style={styles.legendLabel}>{item.label}</Text>
+          </View>
+        ))}
+      </View>
+      <Button
+        onPress={() => {
+          model.solving.start(mode)
+          onPracticePress?.()
+        }}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.MEDIUM}
+        colorScheme={modePreset.colors.button}
+        icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
+        raiseLevel={3}
+        style={{ container: styles.practiceButton, text: styles.practiceButtonText }}
+      >
+        {`${t('student.fluency.practice')} ${modePreset.label}`}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 65,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderBottomColor: COLORS.NEUTRAL_5,
+    paddingHorizontal: SPACING[300],
+    paddingVertical: SPACING[300],
+    borderTopLeftRadius: BORDER_RADIUS[400],
+    borderTopRightRadius: BORDER_RADIUS[400],
+    ...SHADOWS[1],
+  },
+  legendItems: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[400],
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[150],
+  },
+  legendDot: {
+    width: 14,
+    height: 14,
+    borderRadius: 3,
+  },
+  legendDotBorder: {
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  legendLabel: {
+    fontSize: 12,
+    color: COLORS.NEUTRAL_7,
+  },
+  practiceButton: {
+    alignSelf: 'center',
+  },
+  practiceButtonText: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/fluency/components/mobile-menu/MobileMenu.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { View, StyleSheet, useWindowDimensions } from 'react-native'
+import { Button, ButtonVariant, SPACING } from '@magmamath/react-native-ui'
+import { MenuIcon } from '../../../../shared/icons/MenuIcon'
+import { BURGER_MENU_BREAKPOINT, isWeb } from '../../../../shared/common.constants'
+
+type MobileMenuProps = {
+  onPress?: () => void
+}
+
+export const MobileMenu = ({ onPress }: MobileMenuProps) => {
+  const dimensions = useWindowDimensions()
+  const isVisible = isWeb && dimensions.width <= BURGER_MENU_BREAKPOINT
+
+  if (!isVisible) return null
+
+  return (
+    <View style={styles.container}>
+      <Button onPress={onPress} variant={ButtonVariant.TERTIARY} icon={<MenuIcon size={24} />} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginRight: SPACING[200],
+  },
+})

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

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, SelectOption, SelectOptionColor, SPACING } from '@magmamath/react-native-ui'
+import { ProgressBar } from './ProgressBar'
+
+export type MathOperatorRowProps = {
+  title: string
+  icon: ReactNode
+  progress: number
+  color: SelectOptionColor
+  selected: boolean
+  onSelect: () => void
+  showDivider?: boolean
+}
+
+export const MathOperatorRow = ({
+  title,
+  icon,
+  progress,
+  color,
+  selected,
+  onSelect,
+  showDivider = true,
+}: MathOperatorRowProps) => (
+  <View>
+    <SelectOption title={title} icon={icon} color={color} selected={selected} onPress={onSelect} />
+    <ProgressBar progress={progress} color={color} />
+    {showDivider && <View style={styles.divider} />}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.NEUTRAL_3,
+    marginVertical: SPACING[600],
+  },
+})