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

package/src/features/fluency-teacher/components/drawer/FluencyTeacherDrawer.tsx

@@ -1,89 +0,0 @@
-import React, { useEffect } from 'react'
-import { Animated, Modal, Pressable, ScrollView, StyleSheet, View } from 'react-native'
-import { useUnit } from 'effector-react'
-import { COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
-
-import { DrawerHeader } from './DrawerHeader'
-import { DrawerStats } from './DrawerStats'
-import { DrawerMatrixes } from './DrawerMatrixes'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { DrawerMasteryLegend } from './DrawerMasteryLegend'
-
-const DRAWER_WIDTH = 700
-const BACKDROP_COLOR = 'rgba(0, 0, 0, 0.2)'
-
-const backdropOpacity = new Animated.Value(0)
-const drawerTranslateX = new Animated.Value(DRAWER_WIDTH)
-
-export const FluencyTeacherDrawer = () => {
-  const { model } = useTeacherFluency()
-  const student = useUnit(model.table.$studentInfoDrawer)
-  const isVisible = student !== null
-
-  useEffect(() => {
-    if (!isVisible) return
-    Animated.parallel([
-      Animated.timing(backdropOpacity, { toValue: 1, duration: 200, useNativeDriver: true }),
-      Animated.timing(drawerTranslateX, { toValue: 0, duration: 250, useNativeDriver: true }),
-    ]).start()
-  }, [isVisible])
-
-  if (!isVisible) return null
-
-  const closeDrawer = () => {
-    Animated.parallel([
-      Animated.timing(backdropOpacity, { toValue: 0, duration: 200, useNativeDriver: true }),
-      Animated.timing(drawerTranslateX, {
-        toValue: DRAWER_WIDTH,
-        duration: 250,
-        useNativeDriver: true,
-      }),
-    ]).start(() => model.table.setStudentInfoDrawer(null))
-  }
-
-  return (
-    <Modal visible={isVisible} transparent animationType="none" onRequestClose={closeDrawer}>
-      <View style={styles.root}>
-        <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
-          <Pressable style={StyleSheet.absoluteFill} onPress={closeDrawer} />
-        </Animated.View>
-
-        <Animated.View style={[styles.drawer, { transform: [{ translateX: drawerTranslateX }] }]}>
-          <DrawerHeader student={student} onClose={closeDrawer} />
-
-          <View style={styles.content}>
-            <DrawerStats scores={student.scores} />
-            <ScrollView showsVerticalScrollIndicator={false}>
-              <DrawerMatrixes />
-              <DrawerMasteryLegend />
-            </ScrollView>
-          </View>
-        </Animated.View>
-      </View>
-    </Modal>
-  )
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: BACKDROP_COLOR,
-  },
-  drawer: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    width: DRAWER_WIDTH,
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[3],
-  },
-  content: {
-    flex: 1,
-    paddingVertical: SPACING[500],
-    paddingHorizontal: SPACING[700],
-  },
-})

package/src/features/fluency-teacher/components/header/AverageTimePerStudent.tsx

@@ -1,122 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  FONT_FAMILY,
-  HeadingVariants,
-  SHADOWS,
-  SPACING,
-  TimerIcon,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { useUnit } from 'effector-react'
-import { useText } from '../../../../i18n/i18n'
-import { TEACHER_FLUENCY_GOAL_MINUTES } from '../../fluencyTeacher.constants'
-
-export const AverageTimePerStudent = () => {
-  const t = useText()
-  const { model } = useTeacherFluency()
-  const data = useUnit(model.table.$stats)
-
-  const students = data?.students ?? []
-  const totalWeeklyMs = students.reduce((sum, { weeklyTimeMs }) => sum + weeklyTimeMs, 0)
-  const currentMinutes = students.length > 0 ? Math.round(totalWeeklyMs / students.length / 60000) : 0
-  const fillPercent = Math.min(currentMinutes / TEACHER_FLUENCY_GOAL_MINUTES, 1)
-
-  return (
-    <View style={styles.container} testID="average-time-per-student">
-      <View style={styles.accentBar} />
-
-      <View style={styles.content}>
-        <View style={styles.header}>
-          <TimerIcon size={16} color={COLORS.PRIMARY_PURPLE} />
-          <Typography variant={HeadingVariants.H9} style={styles.title}>
-            {t('teacher.fluency.avgTimeTitle')}
-          </Typography>
-        </View>
-
-        <View style={styles.divider} />
-
-        <View style={styles.data}>
-          <View style={styles.time}>
-            <Text style={styles.bigNumber}>{currentMinutes}</Text>
-            <Typography variant={HeadingVariants.H2} style={styles.goalText}>
-              {t('teacher.fluency.minGoal', { goal: TEACHER_FLUENCY_GOAL_MINUTES })}
-            </Typography>
-          </View>
-          <View style={styles.progressTrack}>
-            <View style={[styles.progressFill, { width: `${fillPercent * 100}%` }]} />
-          </View>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: 282,
-    height: 170,
-    flexDirection: 'row',
-    borderRadius: BORDER_RADIUS[300],
-    overflow: 'hidden',
-    ...SHADOWS[1],
-  },
-  accentBar: {
-    width: 6,
-    backgroundColor: COLORS.PRIMARY_PURPLE,
-  },
-  content: {
-    flex: 1,
-    backgroundColor: COLORS.NEUTRAL_1,
-    padding: SPACING[200],
-    gap: SPACING[100],
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[200],
-    padding: SPACING[100],
-  },
-  title: {
-    flex: 1,
-    color: COLORS.NEUTRAL_6,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: COLORS.NEUTRAL_3,
-  },
-  data: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    gap: SPACING[200],
-  },
-  time: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    gap: SPACING[200],
-    padding: SPACING[100],
-  },
-  bigNumber: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 64,
-    lineHeight: 64,
-    color: COLORS.PRIMARY_PURPLE,
-  },
-  goalText: {
-    color: COLORS.NEUTRAL_6,
-  },
-  progressTrack: {
-    height: 26,
-    backgroundColor: COLORS.NEUTRAL_3,
-    borderRadius: 36,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: '100%',
-    backgroundColor: COLORS.PRIMARY_PURPLE,
-    borderRadius: 36,
-  },
-})

package/src/features/fluency-teacher/components/header/FluencyTeacherHeader.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-// import { AverageTimePerStudent } from './AverageTimePerStudent'
-// import { TopHardestFacts } from './TopHardestFacts'
-
-export const FluencyTeacherHeader = () => {
-  const t = useText()
-  return (
-    <View style={styles.container} testID="teacher-fluency-header">
-      <Typography variant={HeadingVariants.H2} style={styles.title}>
-        {t('teacher.fluency.factFluency')}
-      </Typography>
-
-      {/* TODO: it is ready code but commented out on purpose */}
-      {/*<TopHardestFacts />*/}
-      {/*<AverageTimePerStudent />*/}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: SPACING[400],
-  },
-  title: {
-    flex: 1,
-    color: COLORS.NEUTRAL_9,
-  },
-})

package/src/features/fluency-teacher/components/header/HardestFact.tsx

@@ -1,98 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  HeadingVariants,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { PersonIcon } from '../../assets/PersonIcon'
-import { FluencyMathOperatorSymbol, FluencyOperator } from '../../fluencyTeacher.constants'
-
-type Operator = { symbol: FluencyMathOperatorSymbol; color: string }
-
-const OPERATOR_CONFIG: Record<FluencyOperator, Operator> = {
-  [FluencyOperator.ADDITION]: {
-    symbol: FluencyMathOperatorSymbol.ADDITION,
-    color: COLORS.PRIMARY_GREEN,
-  },
-  [FluencyOperator.SUBTRACTION]: {
-    symbol: FluencyMathOperatorSymbol.SUBTRACTION,
-    color: COLORS.PRIMARY_ORANGE,
-  },
-  [FluencyOperator.MULTIPLICATION]: {
-    symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
-    color: COLORS.PRIMARY_BLUE,
-  },
-  [FluencyOperator.DIVISION]: {
-    symbol: FluencyMathOperatorSymbol.DIVISION,
-    color: COLORS.PRIMARY_PURPLE,
-  },
-}
-
-type HardestFactProps = {
-  symbol: FluencyOperator
-  leftOperand: number
-  rightOperand: number
-  studentsCount: number
-}
-
-export const HardestFact = ({
-  symbol,
-  leftOperand,
-  rightOperand,
-  studentsCount,
-}: HardestFactProps) => {
-  const { symbol: mathOperatorSymbol, color } = OPERATOR_CONFIG[symbol]
-  return (
-    <View style={styles.container}>
-      <View style={styles.equation}>
-        <Typography variant={HeadingVariants.H3} style={styles.operand}>
-          {leftOperand}
-        </Typography>
-        <Typography variant={HeadingVariants.H3} style={[styles.operator, { color }]}>
-          {mathOperatorSymbol}
-        </Typography>
-        <Typography variant={HeadingVariants.H3} style={styles.operand}>
-          {rightOperand}
-        </Typography>
-      </View>
-
-      <View style={styles.studentCount}>
-        <Typography variant={HeadingVariants.H3} style={styles.count}>
-          {studentsCount}
-        </Typography>
-        <PersonIcon size={16} color={COLORS.PRIMARY_RED} />
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: SPACING[100],
-    borderRadius: BORDER_RADIUS[200],
-  },
-  equation: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    gap: SPACING[100],
-  },
-  operand: {
-    color: COLORS.NEUTRAL_9,
-  },
-  operator: {},
-  studentCount: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[100],
-  },
-  count: {
-    color: COLORS.PRIMARY_RED,
-  },
-})

package/src/features/fluency-teacher/components/header/TopHardestFacts.tsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useUnit } from 'effector-react'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  HeadingVariants,
-  InfoIcon,
-  SHADOWS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { HardestFact } from './HardestFact'
-
-export const TopHardestFacts = () => {
-  const t = useText()
-  const { model } = useTeacherFluency()
-  const stats = useUnit(model.table.$stats)
-
-  return (
-    <View style={styles.container} testID="top-hardest-facts">
-      <View style={styles.accentBar} />
-
-      <View style={styles.content}>
-        <View style={styles.header}>
-          <InfoIcon size={16} color={COLORS.PRIMARY_RED} />
-          <Typography variant={HeadingVariants.H9} style={styles.title}>
-            {t('teacher.fluency.hardestFactsTitle')}
-          </Typography>
-        </View>
-
-        <View style={styles.divider} />
-
-        {stats?.hardestFacts?.length ? (
-          stats.hardestFacts.map((fact) => (
-            <HardestFact
-              key={fact.factId}
-              symbol={fact.operator}
-              leftOperand={fact.numbers[0]}
-              rightOperand={fact.numbers[1]}
-              studentsCount={fact.strugglingStudentIds.length}
-            />
-          ))
-        ) : (
-          <View style={styles.empty}>
-            <Typography variant={HeadingVariants.H9} style={styles.emptyText}>
-              {t('teacher.fluency.hardestFactsEmpty')}
-            </Typography>
-          </View>
-        )}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: 282,
-    height: 170,
-    flexDirection: 'row',
-    borderRadius: BORDER_RADIUS[300],
-    overflow: 'hidden',
-    ...SHADOWS[1],
-  },
-  accentBar: {
-    width: 6,
-    backgroundColor: COLORS.PRIMARY_RED,
-  },
-  content: {
-    flex: 1,
-    backgroundColor: COLORS.NEUTRAL_1,
-    padding: SPACING[200],
-    gap: SPACING[100],
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[200],
-    padding: SPACING[100],
-  },
-  title: {
-    flex: 1,
-    color: COLORS.NEUTRAL_6,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: COLORS.NEUTRAL_3,
-  },
-  empty: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  emptyText: {
-    color: COLORS.NEUTRAL_6,
-    textAlign: 'center',
-  },
-})

package/src/features/fluency-teacher/components/matrix/DrawerMatrix.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import type { LayoutChangeEvent } from 'react-native'
-import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import { MatrixHeaderRow } from './MatrixHeaderRow'
-import { MatrixRow } from './MatrixRow'
-import type { DrawerGrid } from '../../hooks/useDrawerGrid'
-
-type DrawerMatrixProps = {
-  grid: DrawerGrid | null
-  cellSize: number
-  fontSize: number
-  borderRadius: number
-  cellColorMap: Record<number, string>
-  onLayout: (e: LayoutChangeEvent) => void
-}
-
-export const DrawerMatrix = ({
-  grid,
-  cellSize,
-  fontSize,
-  borderRadius,
-  cellColorMap,
-  onLayout,
-}: DrawerMatrixProps) => {
-  const t = useText()
-  return (
-    <View style={styles.container} onLayout={onLayout}>
-      {!grid ? (
-        <Text style={styles.emptyText}>{t('teacher.fluency.noFactsPracticed')}</Text>
-      ) : (
-        cellSize > 0 && (
-          <View style={styles.grid}>
-            <MatrixHeaderRow colLabels={grid.colLabels} cellSize={cellSize} fontSize={fontSize} />
-            {grid.rows.map((row) => (
-              <MatrixRow
-                key={row.label}
-                label={row.label}
-                cells={row.cells}
-                cellSize={cellSize}
-                borderRadius={borderRadius}
-                colorMap={cellColorMap}
-                fontSize={fontSize}
-              />
-            ))}
-          </View>
-        )
-      )}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  grid: {
-    gap: 2,
-  },
-  emptyText: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontSize: 13,
-    color: COLORS.NEUTRAL_6,
-    textAlign: 'center',
-  },
-})

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

@@ -1,38 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
-import { getCellColor } from '../../fluencyTeacher.helpers'
-
-export type MatrixCellProps = {
-  box: number | null
-  isEmpty: boolean
-  cellSize: number
-  borderRadius: number
-  colorMap: Record<number, string>
-  fontSize: number
-}
-
-export const MatrixCell = ({ box, isEmpty, cellSize, borderRadius, colorMap, fontSize }: MatrixCellProps) => (
-  <View
-    style={[
-      styles.cell,
-      { width: cellSize, height: cellSize, borderRadius },
-      { backgroundColor: isEmpty ? 'transparent' : getCellColor(box, colorMap) },
-    ]}
-  >
-    {isEmpty && <Text style={[styles.label, { fontSize }]}>-</Text>}
-  </View>
-)
-
-const styles = StyleSheet.create({
-  cell: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    color: COLORS.NEUTRAL_7,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-})

package/src/features/fluency-teacher/components/matrix/MatrixHeaderRow.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
-
-export type MatrixHeaderRowProps = {
-  colLabels: number[]
-  cellSize: number
-  fontSize: number
-}
-
-export const MatrixHeaderRow = ({ colLabels, cellSize, fontSize }: MatrixHeaderRowProps) => (
-  <View style={styles.row}>
-    <View style={{ width: cellSize, height: cellSize }} />
-    {colLabels.map((col) => (
-      <View key={col} style={[styles.labelCell, { width: cellSize, height: cellSize }]}>
-        <Text style={[styles.label, { fontSize }]}>{col}</Text>
-      </View>
-    ))}
-  </View>
-)
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    gap: 2,
-  },
-  labelCell: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    color: COLORS.NEUTRAL_7,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-})

package/src/features/fluency-teacher/components/matrix/MatrixRow.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
-import { MatrixCell } from './MatrixCell'
-import type { DrawerGridCell } from '../../hooks/useDrawerGrid'
-
-export type MatrixRowProps = {
-  label: number
-  cells: DrawerGridCell[]
-  cellSize: number
-  borderRadius: number
-  colorMap: Record<number, string>
-  fontSize: number
-}
-
-export const MatrixRow = ({
-  label,
-  cells,
-  cellSize,
-  borderRadius,
-  colorMap,
-  fontSize,
-}: MatrixRowProps) => (
-  <View style={styles.row}>
-    <View style={[styles.labelCell, { width: cellSize, height: cellSize }]}>
-      <Text style={[styles.label, { fontSize }]}>{label}</Text>
-    </View>
-    {cells.map((cell, i) => (
-      <MatrixCell
-        key={i}
-        box={cell.box}
-        isEmpty={cell.isEmpty}
-        cellSize={cellSize}
-        borderRadius={borderRadius}
-        colorMap={colorMap}
-        fontSize={fontSize}
-      />
-    ))}
-  </View>
-)
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    gap: 2,
-  },
-  labelCell: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    color: COLORS.NEUTRAL_7,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-})