@magmamath/students-features 1.4.1 → 1.4.2

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],
+  },
+})

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

@@ -0,0 +1,81 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SelectOptionColor,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { ProgressBarSparkles } from './ProgressBarSparkles'
+
+const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
+  [SelectOptionColor.GREEN]: COLORS.PRIMARY_GREEN,
+  [SelectOptionColor.ORANGE]: COLORS.PRIMARY_ORANGE,
+  [SelectOptionColor.BLUE]: COLORS.PRIMARY_BLUE,
+  [SelectOptionColor.RED]: COLORS.PRIMARY_RED,
+  [SelectOptionColor.YELLOW]: COLORS.PRIMARY_YELLOW,
+  [SelectOptionColor.PURPLE]: COLORS.PRIMARY_PURPLE,
+  [SelectOptionColor.GREY]: COLORS.NEUTRAL_6,
+  [SelectOptionColor.SUNSET]: COLORS.PRIMARY_RED,
+}
+
+const SPARKLE_COLOR_MAP: Record<SelectOptionColor, string> = {
+  [SelectOptionColor.GREEN]: COLORS.GREEN_3,
+  [SelectOptionColor.ORANGE]: COLORS.ORANGE_3,
+  [SelectOptionColor.BLUE]: COLORS.BLUE_3,
+  [SelectOptionColor.RED]: COLORS.RED_3,
+  [SelectOptionColor.YELLOW]: COLORS.YELLOW_3,
+  [SelectOptionColor.PURPLE]: COLORS.PURPLE_3,
+  [SelectOptionColor.GREY]: COLORS.NEUTRAL_4,
+  [SelectOptionColor.SUNSET]: COLORS.RED_3,
+}
+
+export type ProgressBarProps = {
+  progress: number
+  color: SelectOptionColor
+}
+
+export const ProgressBar = ({ progress, color = SelectOptionColor.GREEN }: ProgressBarProps) => {
+  const progressRounded = Math.round(Math.min(100, Math.max(0, progress)))
+  const variantColor = PRIMARY_COLOR_MAP[color]
+  const isComplete = progressRounded === 100
+  return (
+    <View style={styles.container}>
+      <View style={styles.trackWrapper}>
+        <View style={styles.track}>
+          <View
+            style={[styles.fill, { backgroundColor: variantColor, width: `${progressRounded}%` }]}
+          />
+        </View>
+        {isComplete && <ProgressBarSparkles color={SPARKLE_COLOR_MAP[color]} />}
+      </View>
+      <Typography variant={HeadingVariants.H10} style={{ color: variantColor }}>
+        {progressRounded}%
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginTop: SPACING[200],
+    gap: SPACING[200],
+    alignItems: 'center',
+  },
+  trackWrapper: {
+    flex: 1,
+  },
+  track: {
+    height: 18,
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderRadius: BORDER_RADIUS[450],
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: BORDER_RADIUS[450],
+  },
+})

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

@@ -0,0 +1,142 @@
+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'
+
+const QUICK = Easing.bezier(0.2, 0, 0, 1)
+const END_HOLD_MS = 800
+
+type SparkleItemConfig = {
+  leftPercent: number
+  topOffset: number
+  size: number
+  triggerDelay: number
+  appearDuration: number
+  dissolveDuration: number
+}
+
+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 = 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)
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const v = loop.value
+    if (v <= 1) {
+      return {
+        opacity: v,
+        transform: [{ scale: v }, { rotate: `${(-90 + v * 90).toFixed(1)}deg` }],
+      }
+    }
+    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',
+  },
+})