@magmamath/students-features 1.3.26-rc.17 → 1.3.26-rc.2

package/src/features/fluency-teacher/components/table/AverageSortButton.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
-import {
-  CaretDownIcon,
-  CaretUpIcon,
-  COLORS,
-  FONT_FAMILY,
-  SHADOWS,
-  SPACING,
-  StudentsIcon,
-} from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import { SortDefaultIcon } from '../../assets/SortDefaultIcon'
-import type { SortState } from '../../fluencyTeacher.types'
-
-export type AverageSortButtonProps = {
-  sort: SortState
-  onPress: () => void
-}
-
-export const AverageSortButton = ({ sort, onPress }: AverageSortButtonProps) => {
-  const t = useText()
-  const isActive = sort.column === 'average'
-  const color = isActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_7
-
-  const ActiveSortIcon = (() => {
-    return sort.direction === 'desc' ? (
-      <CaretUpIcon size={12} color={color} />
-    ) : (
-      <CaretDownIcon size={12} color={color} />
-    )
-  })()
-
-  return (
-    <Pressable onPress={onPress} style={[styles.button, isActive && styles.buttonActive]}>
-      <View style={styles.iconWrapper}>
-        <StudentsIcon size={16} color={color} />
-      </View>
-      <Text selectable={false} style={[styles.label, { color }]}>
-        {t('teacher.fluency.average')}
-      </Text>
-      {isActive ? ActiveSortIcon : <SortDefaultIcon size={10} color={color} />}
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[100],
-    paddingLeft: 6,
-    paddingRight: SPACING[200],
-    paddingVertical: SPACING[100],
-    borderRadius: 6,
-    borderWidth: 0.5,
-    borderColor: COLORS.NEUTRAL_3,
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[2],
-  },
-  buttonActive: {
-    backgroundColor: COLORS.PRIMARY_YELLOW,
-    borderColor: COLORS.PRIMARY_YELLOW,
-  },
-  iconWrapper: {
-    marginHorizontal: SPACING[100],
-  },
-  label: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 12,
-    letterSpacing: 0.24,
-    textTransform: 'uppercase',
-  },
-})

package/src/features/fluency-teacher/components/table/FluencyTeacherFilters.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { useUnit } from 'effector-react'
-import { Search, SPACING } from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-
-export const FluencyTeacherFilters = () => {
-  const t = useText()
-  const { model } = useTeacherFluency()
-  const searchValue = useUnit(model.filters.$search)
-
-  return (
-    <View style={styles.container}>
-      <Search
-        placeholder={t('teacher.fluency.search')}
-        onChangeText={model.filters.setSearch}
-        value={searchValue}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: SPACING[400],
-    width: 250,
-  },
-})

package/src/features/fluency-teacher/components/table/FluencyTeacherStudentsTable.tsx

@@ -1,136 +0,0 @@
-import React from 'react'
-import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native'
-import { useStoreMap, useUnit } from 'effector-react'
-import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { TableRow } from './TableRow'
-import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
-import { TableColumnSortButton } from './TableColumnSortButton'
-import { AllPupilsTableRow } from './AllPupilsTableRow'
-import { AverageSortButton } from './AverageSortButton'
-
-export const FluencyTeacherStudentsTable = () => {
-  const t = useText()
-  const { model } = useTeacherFluency()
-  const { sort, search, isLoading } = useUnit({
-    sort: model.filters.$sort,
-    search: model.filters.$search,
-    isLoading: model.api.getClassSummaryFx.pending,
-  })
-
-  const sortedStudents = useStoreMap({
-    store: model.table.$table,
-    keys: [search, sort] as const,
-    fn: (students, [searchTerm, sortState]) => {
-      const filtered = searchTerm
-        ? students.filter((s) => s.name.toLowerCase().includes(searchTerm.toLowerCase()))
-        : students
-      return [...filtered].sort((a, b) => {
-        const aVal = sortState.column === 'average' ? a.averagePercent : a.scores[sortState.column]
-        const bVal = sortState.column === 'average' ? b.averagePercent : b.scores[sortState.column]
-        return sortState.direction === 'desc' ? bVal - aVal : aVal - bVal
-      })
-    },
-  })
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.row, styles.headerRow]}>
-        <View style={styles.nameCell} />
-
-        <View style={styles.average}>
-          <AverageSortButton sort={sort} onPress={() => model.filters.toggleSort('average')} />
-        </View>
-
-        <View style={styles.operators}>
-          {TABLE_OPERATOR_COLUMNS.map(({ operator, labelKey, symbol, badgeBg, badgeText }) => (
-            <View key={operator} style={styles.operator}>
-              <TableColumnSortButton
-                symbol={symbol}
-                label={t(labelKey)}
-                isActive={sort.column === operator}
-                direction={sort.direction}
-                activeBg={badgeBg}
-                activeText={badgeText}
-                onPress={() => model.filters.toggleSort(operator)}
-              />
-            </View>
-          ))}
-        </View>
-      </View>
-
-      {isLoading ? (
-        <View style={styles.loader}>
-          <ActivityIndicator size="large" color={COLORS.PRIMARY_BLUE} />
-        </View>
-      ) : (
-        <>
-          <AllPupilsTableRow />
-          <FlatList
-            data={sortedStudents}
-            keyExtractor={(student) => student.id}
-            renderItem={({ item: student }) => (
-              <TableRow
-                name={student.name}
-                onPress={() => model.table.setStudentInfoDrawer(student)}
-                averagePercent={student.averagePercent}
-                averageLabel={t(student.averageLabel)}
-                scores={student.scores}
-              />
-            )}
-          />
-        </>
-      )}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    borderRadius: BORDER_RADIUS[300],
-    overflow: 'hidden',
-    ...SHADOWS[1],
-  },
-  loader: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[400],
-    paddingVertical: SPACING[200],
-    gap: SPACING[400],
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderBottomWidth: 1,
-    borderBottomColor: COLORS.NEUTRAL_4,
-  },
-  headerRow: {
-    paddingVertical: SPACING[100],
-    backgroundColor: COLORS.NEUTRAL_2,
-  },
-  nameCell: {
-    width: 137,
-    height: 40,
-  },
-  average: {
-    width: 145,
-    height: 40,
-    paddingHorizontal: 12,
-    justifyContent: 'center',
-  },
-  operators: {
-    flex: 1,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[800],
-  },
-  operator: {
-    flex: 1,
-    alignItems: 'center',
-  },
-})

package/src/features/fluency-teacher/components/table/OperatorBadge.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { BORDER_RADIUS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
-
-export type OperatorBadgeProps = {
-  value: number
-  bgColor: string
-  textColor: string
-}
-
-export const OperatorBadge = ({ value, bgColor, textColor }: OperatorBadgeProps) => (
-  <View style={[styles.badge, { backgroundColor: bgColor }]}>
-    <Typography variant={HeadingVariants.H9} style={[styles.badgeText, { color: textColor }]}>
-      {value}%
-    </Typography>
-  </View>
-)
-
-const styles = StyleSheet.create({
-  badge: {
-    width: 90,
-    paddingVertical: SPACING[200],
-    borderRadius: BORDER_RADIUS[200],
-    alignItems: 'center',
-  },
-  badgeText: {
-    textAlign: 'center',
-  },
-})

package/src/features/fluency-teacher/components/table/TableColumnSortButton.tsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import { Pressable, StyleSheet, Text } from 'react-native'
-import {
-  CaretDownIcon,
-  CaretUpIcon,
-  COLORS,
-  FONT_FAMILY,
-  SHADOWS,
-  SPACING,
-} from '@magmamath/react-native-ui'
-import { SortDefaultIcon } from '../../assets/SortDefaultIcon'
-import type { SortDirection } from '../../fluencyTeacher.types'
-
-export type TableColumnSortButtonProps = {
-  symbol: string
-  label: string
-  isActive: boolean
-  direction: SortDirection
-  activeBg: string
-  activeText: string
-  onPress: () => void
-}
-
-export const TableColumnSortButton = ({
-  symbol,
-  label,
-  isActive,
-  direction,
-  activeBg,
-  activeText,
-  onPress,
-}: TableColumnSortButtonProps) => {
-  const contentColor = isActive ? activeText : COLORS.NEUTRAL_7
-  return (
-    <Pressable
-      onPress={onPress}
-      style={[styles.sortButton, isActive && { backgroundColor: activeBg, borderColor: activeBg }]}
-    >
-      <Text selectable={false} style={[styles.sortButtonSymbol, { color: contentColor }]}>
-        {symbol}
-      </Text>
-      <Text selectable={false} style={[styles.sortButtonLabel, { color: contentColor }]}>
-        {label}
-      </Text>
-      {isActive ? (
-        direction === 'desc' ? (
-          <CaretDownIcon size={12} color={contentColor} />
-        ) : (
-          <CaretUpIcon size={12} color={contentColor} />
-        )
-      ) : (
-        <SortDefaultIcon size={10} color={contentColor} />
-      )}
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  sortButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[100],
-    paddingLeft: 6,
-    paddingRight: SPACING[200],
-    paddingVertical: SPACING[100],
-    borderRadius: 6,
-    borderWidth: 0.5,
-    borderColor: COLORS.NEUTRAL_3,
-    backgroundColor: COLORS.NEUTRAL_1,
-    ...SHADOWS[2],
-  },
-  sortButtonSymbol: {
-    width: 12,
-    height: 12,
-    lineHeight: 10,
-    marginHorizontal: SPACING[100],
-    textAlign: 'center',
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 24,
-  },
-  sortButtonLabel: {
-    fontFamily: FONT_FAMILY.buenosAiresBold,
-    fontSize: 12,
-    letterSpacing: 0.24,
-    textTransform: 'uppercase',
-  },
-})

package/src/features/fluency-teacher/components/table/TableRow.tsx

@@ -1,114 +0,0 @@
-import React, { useRef } from 'react'
-import { Animated, Pressable, StyleSheet, View } from 'react-native'
-import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
-import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
-import { OperatorBadge } from './OperatorBadge'
-import { TableRowAverageProgress } from './TableRowAverageProgress'
-import type { StudentOperatorScores } from '../../fluencyTeacher.types'
-
-export type TableRowProps = {
-  name: string
-  scores: StudentOperatorScores
-  averagePercent?: number
-  averageLabel?: string
-  onPress?: () => void
-}
-
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
-
-export const TableRow = ({
-  name,
-  scores,
-  averagePercent = 0,
-  averageLabel = '',
-  onPress,
-}: TableRowProps) => {
-  const hoverProgress = useRef(new Animated.Value(0)).current
-
-  const fadeIn = () => {
-    Animated.timing(hoverProgress, { toValue: 1, duration: 150, useNativeDriver: false }).start()
-  }
-
-  const fadeOut = () => {
-    Animated.timing(hoverProgress, { toValue: 0, duration: 150, useNativeDriver: false }).start()
-  }
-
-  const backgroundColor = hoverProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [COLORS.NEUTRAL_1, COLORS.NEUTRAL_2],
-  })
-
-  return (
-    <AnimatedPressable
-      onHoverIn={fadeIn}
-      onHoverOut={fadeOut}
-      onPress={onPress}
-      style={[styles.row, { backgroundColor }]}
-    >
-      <View style={styles.name}>
-        <Typography variant={HeadingVariants.H7} style={styles.nameText} numberOfLines={1}>
-          {name}
-        </Typography>
-      </View>
-
-      <View style={styles.average}>
-        <TableRowAverageProgress percent={averagePercent} label={averageLabel} />
-      </View>
-
-      <View style={styles.operators}>
-        {TABLE_OPERATOR_COLUMNS.map(({ operator, badgeBg, badgeText }) => (
-          <View key={operator} style={styles.operator}>
-            <OperatorBadge value={scores[operator]} bgColor={badgeBg} textColor={badgeText} />
-          </View>
-        ))}
-      </View>
-    </AnimatedPressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[400],
-    paddingVertical: SPACING[200],
-    gap: SPACING[400],
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderBottomWidth: 1,
-    borderBottomColor: COLORS.NEUTRAL_4,
-  },
-  name: {
-    width: 137,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-  },
-  icon: {
-    width: 25,
-    height: 25,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  nameText: {
-    width: 100,
-    color: COLORS.NEUTRAL_9,
-  },
-  average: {
-    width: 145,
-    height: 40,
-    paddingHorizontal: 12,
-    justifyContent: 'center',
-  },
-  operators: {
-    flex: 1,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[800],
-  },
-  operator: {
-    flex: 1,
-    alignItems: 'center',
-  },
-})

package/src/features/fluency-teacher/components/table/TableRowAverageProgress.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import {
-  COLORS,
-  FONT_FAMILY,
-  HeadingVariants,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-export type TableRowAverageProgressProps = {
-  percent: number
-  label: string
-}
-
-export const TableRowAverageProgress = ({ percent, label }: TableRowAverageProgressProps) => (
-  <View style={styles.progressTrack}>
-    <View style={[styles.progressFill, { width: `${percent}%` }]} />
-    <View style={styles.progressOverlay}>
-      <Typography variant={HeadingVariants.H9} style={styles.progressPercent}>
-        {percent}%
-      </Typography>
-      <Text style={styles.progressLabel} numberOfLines={1}>
-        {label}
-      </Text>
-    </View>
-  </View>
-)
-
-const styles = StyleSheet.create({
-  progressTrack: {
-    height: 16,
-    borderRadius: 36,
-    backgroundColor: COLORS.NEUTRAL_3,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    borderRadius: 36,
-    backgroundColor: COLORS.YELLOW_4,
-  },
-  progressOverlay: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: SPACING[200],
-  },
-  progressPercent: {
-    color: COLORS.NEUTRAL_9,
-  },
-  progressLabel: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontSize: 10,
-    color: COLORS.NEUTRAL_9,
-    textTransform: 'uppercase',
-  },
-})

package/src/features/fluency-teacher/context/TeacherFluencyContext.ts

@@ -1,16 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { TeacherFluencyModel } from '../model/TeacherFluencyModel'
-
-type TeacherFluencyContextValue = {
-  model: TeacherFluencyModel
-}
-
-const TeacherFluencyContext = createContext<TeacherFluencyContextValue | null>(null)
-
-export const useTeacherFluency = (): TeacherFluencyContextValue => {
-  const value = useContext(TeacherFluencyContext)
-  if (!value) throw new Error('useTeacherFluency must be used within TeacherFluencyProvider')
-  return value
-}
-
-export const TeacherFluencyProvider = TeacherFluencyContext.Provider

package/src/features/fluency-teacher/fluencyTeacher.constants.ts

@@ -1,76 +0,0 @@
-import { COLORS } from '@magmamath/react-native-ui'
-import { type OperatorColumnConfig } from './fluencyTeacher.types'
-
-export const TEACHER_FLUENCY_GOAL_MINUTES = 25
-
-export enum FluencyOperator {
-  ADDITION = 'addition',
-  SUBTRACTION = 'subtraction',
-  MULTIPLICATION = 'multiplication',
-  DIVISION = 'division',
-}
-
-export const MATRIX_CELL_COLORS: Record<FluencyOperator, Record<number, string>> = {
-  [FluencyOperator.ADDITION]: {
-    1: COLORS.GREEN_2,
-    2: COLORS.GREEN_3,
-    3: COLORS.PRIMARY_GREEN,
-    4: COLORS.GREEN_6,
-  },
-  [FluencyOperator.SUBTRACTION]: {
-    1: COLORS.ORANGE_2,
-    2: COLORS.ORANGE_3,
-    3: COLORS.PRIMARY_ORANGE,
-    4: COLORS.ORANGE_6,
-  },
-  [FluencyOperator.MULTIPLICATION]: {
-    1: COLORS.BLUE_2,
-    2: COLORS.BLUE_3,
-    3: COLORS.PRIMARY_BLUE,
-    4: COLORS.BLUE_6,
-  },
-  [FluencyOperator.DIVISION]: {
-    1: COLORS.PURPLE_2,
-    2: COLORS.PURPLE_3,
-    3: COLORS.PRIMARY_PURPLE,
-    4: COLORS.PURPLE_6,
-  },
-}
-
-export enum FluencyMathOperatorSymbol {
-  ADDITION = '+',
-  SUBTRACTION = '−',
-  MULTIPLICATION = '×',
-  DIVISION = '÷',
-}
-
-export const TABLE_OPERATOR_COLUMNS: readonly OperatorColumnConfig[] = [
-  {
-    operator: FluencyOperator.ADDITION,
-    labelKey: 'student.fluency.addition',
-    symbol: FluencyMathOperatorSymbol.ADDITION,
-    badgeBg: COLORS.GREEN_3,
-    badgeText: COLORS.GREEN_8,
-  },
-  {
-    operator: FluencyOperator.SUBTRACTION,
-    labelKey: 'student.fluency.subtraction',
-    symbol: FluencyMathOperatorSymbol.SUBTRACTION,
-    badgeBg: COLORS.ORANGE_3,
-    badgeText: COLORS.ORANGE_8,
-  },
-  {
-    operator: FluencyOperator.DIVISION,
-    labelKey: 'student.fluency.division',
-    symbol: FluencyMathOperatorSymbol.DIVISION,
-    badgeBg: COLORS.BLUE_3,
-    badgeText: COLORS.BLUE_8,
-  },
-  {
-    operator: FluencyOperator.MULTIPLICATION,
-    labelKey: 'student.fluency.multiplication',
-    symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
-    badgeBg: COLORS.PURPLE_2,
-    badgeText: COLORS.PURPLE_8,
-  },
-]

package/src/features/fluency-teacher/fluencyTeacher.helpers.ts

@@ -1,73 +0,0 @@
-import { COLORS } from '@magmamath/react-native-ui'
-import type { TranslationKey } from '../../i18n/i18n'
-import type { ClassFluencySummaryResponse, ClassFluencyStats, ClassOperatorAverages, FluencyStudent } from './fluencyTeacher.types'
-
-export const getCellColor = (box: number | null, colorMap: Record<number, string>): string =>
-  box ? (colorMap[box] ?? COLORS.NEUTRAL_2) : COLORS.NEUTRAL_2
-
-export const toAverageLabel = (overallPercent: number): TranslationKey => {
-  if (overallPercent >= 0.9) return 'teacher.fluency.progressFluent'
-  if (overallPercent >= 0.65) return 'teacher.fluency.progressProficient'
-  if (overallPercent >= 0.35) return 'teacher.fluency.progressDeveloping'
-  if (overallPercent >= 0.05) return 'teacher.fluency.progressLearning'
-  return 'teacher.fluency.progressNotStarted'
-}
-
-const toPercent = (decimal: number): number => Math.round(decimal * 100)
-
-type BuildStudentsFluencyTableProps = {
-  students: FluencyStudent[]
-  response: ClassFluencySummaryResponse
-}
-
-const buildOperatorAverages = (response: ClassFluencySummaryResponse): ClassOperatorAverages => {
-  const count = response.students.length
-  if (count === 0) return { addition: 0, subtraction: 0, multiplication: 0, division: 0 }
-
-  const sums = response.students.reduce(
-    (acc, row) => ({
-      addition: acc.addition + row.byOperator.addition,
-      subtraction: acc.subtraction + row.byOperator.subtraction,
-      multiplication: acc.multiplication + row.byOperator.multiplication,
-      division: acc.division + row.byOperator.division,
-    }),
-    { addition: 0, subtraction: 0, multiplication: 0, division: 0 }
-  )
-
-  return {
-    addition: toPercent(sums.addition / count),
-    subtraction: toPercent(sums.subtraction / count),
-    multiplication: toPercent(sums.multiplication / count),
-    division: toPercent(sums.division / count),
-  }
-}
-
-export const buildClassAverageStats = (response: ClassFluencySummaryResponse): ClassFluencyStats => ({
-  ...response,
-  classAverage: toPercent(response.classAverage),
-  operatorAverages: buildOperatorAverages(response),
-})
-
-export const buildStudentsFluencyTable = ({
-  students,
-  response,
-}: BuildStudentsFluencyTableProps) => {
-  return response.students
-    .map((row) => {
-      const student = students.find(({ id }) => id === row.studentId)
-      if (!student) return null
-      return {
-        id: row.studentId,
-        name: student?.name ?? '',
-        averagePercent: toPercent(row.overallPercent),
-        averageLabel: toAverageLabel(row.overallPercent),
-        scores: {
-          addition: toPercent(row.byOperator.addition),
-          subtraction: toPercent(row.byOperator.subtraction),
-          multiplication: toPercent(row.byOperator.multiplication),
-          division: toPercent(row.byOperator.division),
-        },
-      }
-    })
-    .filter((item) => item !== null)
-}