@magmamath/students-features 1.8.0 → 1.8.1-rc.0

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

@@ -10,22 +10,21 @@ import {
 import { useUnit } from 'effector-react'
 import { useText } from '../../../../i18n/i18n'
 import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { COLUMN_TO_OPERATOR } from '../../fluencyTeacher.constants'
-import { getTableOperatorColumns } from '../../fluencyTeacher.helpers'
-import { AverageCell } from './AverageCell'
+import { toAverageLabel } from '../../fluencyTeacher.helpers'
+import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
+import { TableRowAverageProgress } from './TableRowAverageProgress'
 import { OperatorBadge } from './OperatorBadge'
-import { tableCellStyles } from './tableCell.styles'
 
 export const AllPupilsTableRow = () => {
   const t = useText()
-  const { model, grade } = useTeacherFluency()
+  const { model } = useTeacherFluency()
   const stats = useUnit(model.table.$stats)
 
   if (!stats) return null
 
   return (
     <View style={styles.row}>
-      <View style={tableCellStyles.name}>
+      <View style={styles.name}>
         <View style={styles.icon}>
           <StudentsIcon size={25} color={COLORS.NEUTRAL_7} />
         </View>
@@ -34,16 +33,20 @@ export const AllPupilsTableRow = () => {
         </Typography>
       </View>
 
-      <View style={tableCellStyles.average}>
-        <AverageCell percent={stats.classAverage} />
+      <View style={styles.average}>
+        <TableRowAverageProgress
+          percent={stats.classAverage}
+          label={t(toAverageLabel(stats.classAverage / 100))}
+        />
       </View>
 
-      <View style={tableCellStyles.operators}>
-        {getTableOperatorColumns(grade).map(({ operator }) => (
-          <View key={operator} style={tableCellStyles.operator}>
+      <View style={styles.operators}>
+        {TABLE_OPERATOR_COLUMNS.map(({ operator, badgeBg, badgeText }) => (
+          <View key={operator} style={styles.operator}>
             <OperatorBadge
               value={stats.operatorAverages[operator]}
-              operator={COLUMN_TO_OPERATOR[operator]}
+              bgColor={badgeBg}
+              textColor={badgeText}
             />
           </View>
         ))}
@@ -61,7 +64,14 @@ const styles = StyleSheet.create({
     gap: SPACING[400],
     backgroundColor: COLORS.NEUTRAL_2,
     borderBottomWidth: 1,
-    borderBottomColor: COLORS.NEUTRAL_6,
+    borderBottomColor: COLORS.NEUTRAL_4,
+  },
+  name: {
+    width: 137,
+    height: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
   },
   icon: {
     width: 25,
@@ -73,4 +83,21 @@ const styles = StyleSheet.create({
     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/AverageSortButton.tsx

@@ -1,22 +1,76 @@
 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'
+import { SortingDirection } from '../../../../shared/common.constants'
 import { FluencyTableColumn } from '../../fluencyTeacher.constants'
-import { TableColumnSortButton } from './TableColumnSortButton'
 
-type AverageSortButtonProps = {
+export type AverageSortButtonProps = {
   sort: SortState
   onPress: () => void
 }
 
 export const AverageSortButton = ({ sort, onPress }: AverageSortButtonProps) => {
   const t = useText()
+  const isActive = sort.column === FluencyTableColumn.AVERAGE
+  const color = isActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_7
+
+  const ActiveSortIcon = (() => {
+    return sort.direction === SortingDirection.DESC ? (
+      <CaretUpIcon size={12} color={color} />
+    ) : (
+      <CaretDownIcon size={12} color={color} />
+    )
+  })()
+
   return (
-    <TableColumnSortButton
-      label={t('teacher.fluency.average')}
-      isActive={sort.column === FluencyTableColumn.AVERAGE}
-      direction={sort.direction}
-      onPress={onPress}
-    />
+    <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/FluencyTeacherStudentsTable.tsx

@@ -1,15 +1,11 @@
-import React, { ComponentType } from 'react'
+import React from 'react'
 import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native'
 import { useUnit } from 'effector-react'
 import {
   BORDER_RADIUS,
   COLORS,
-  CrossIcon,
   FONT_FAMILY,
   HeadingVariants,
-  IconProps,
-  MinusIcon,
-  PlusIcon,
   SHADOWS,
   SPACING,
   Typography,
@@ -17,48 +13,19 @@ import {
 import { useText } from '../../../../i18n/i18n'
 import { useTeacherFluency } from '../../context/TeacherFluencyContext'
 import { TableRow } from './TableRow'
-import { FluencyTableColumn } from '../../fluencyTeacher.constants'
-import { getTableOperatorColumns } from '../../fluencyTeacher.helpers'
-import type { FluencyOperatorColumn } from '../../fluencyTeacher.types'
+import { FluencyTableColumn, TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
 import { TableColumnSortButton } from './TableColumnSortButton'
 import { AllPupilsTableRow } from './AllPupilsTableRow'
 import { AverageSortButton } from './AverageSortButton'
-import { tableCellStyles } from './tableCell.styles'
-import { DivisionIcon } from '../../assets/DivisionIcon'
-
-type OperatorColumnDisplay = {
-  Icon: ComponentType<IconProps>
-  activeColor: string
-}
-
-const OPERATOR_COLUMN_DISPLAY: Record<FluencyOperatorColumn, OperatorColumnDisplay> = {
-  [FluencyTableColumn.ADDITION]: {
-    Icon: PlusIcon,
-    activeColor: COLORS.PRIMARY_GREEN,
-  },
-  [FluencyTableColumn.SUBTRACTION]: {
-    Icon: MinusIcon,
-    activeColor: COLORS.PRIMARY_ORANGE,
-  },
-  [FluencyTableColumn.MULTIPLICATION]: {
-    Icon: CrossIcon,
-    activeColor: COLORS.PRIMARY_BLUE,
-  },
-  [FluencyTableColumn.DIVISION]: {
-    Icon: DivisionIcon,
-    activeColor: COLORS.PRIMARY_PURPLE,
-  },
-}
 
 export const FluencyTeacherStudentsTable = () => {
   const t = useText()
-  const { model, grade } = useTeacherFluency()
-  const { sort, isLoading, table, filteredTable, studentInfoDrawer } = useUnit({
+  const { model } = useTeacherFluency()
+  const { sort, isLoading, table, filteredTable } = useUnit({
     sort: model.filters.$sort,
     table: model.table.$table,
     filteredTable: model.table.$filteredTable,
     isLoading: model.api.getClassSummaryFx.pending,
-    studentInfoDrawer: model.table.$studentInfoDrawer,
   })
 
   const hasStudents = table.length > 0
@@ -68,22 +35,23 @@ export const FluencyTeacherStudentsTable = () => {
       <View style={[styles.row, styles.headerRow]}>
         <View style={styles.nameCell} />
 
-        <View style={tableCellStyles.headerAverage}>
+        <View style={styles.average}>
           <AverageSortButton
             sort={sort}
             onPress={() => model.filters.toggleSort(FluencyTableColumn.AVERAGE)}
           />
         </View>
 
-        <View style={tableCellStyles.operators}>
-          {getTableOperatorColumns(grade).map(({ operator, labelKey }) => (
-            <View key={operator} style={tableCellStyles.operator}>
+        <View style={styles.operators}>
+          {TABLE_OPERATOR_COLUMNS.map(({ operator, labelKey, symbol, badgeBg, badgeText }) => (
+            <View key={operator} style={styles.operator}>
               <TableColumnSortButton
-                Icon={OPERATOR_COLUMN_DISPLAY[operator].Icon}
-                activeColor={OPERATOR_COLUMN_DISPLAY[operator].activeColor}
+                symbol={symbol}
                 label={t(labelKey)}
                 isActive={sort.column === operator}
                 direction={sort.direction}
+                activeBg={badgeBg}
+                activeText={badgeText}
                 onPress={() => model.filters.toggleSort(operator)}
               />
             </View>
@@ -100,15 +68,14 @@ export const FluencyTeacherStudentsTable = () => {
           <AllPupilsTableRow />
           <FlatList
             data={filteredTable}
-            extraData={studentInfoDrawer}
             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}
-                isSelected={studentInfoDrawer?.id === student.id}
               />
             )}
             contentContainerStyle={filteredTable.length === 0 ? styles.emptyContainer : undefined}
@@ -130,13 +97,13 @@ export const FluencyTeacherStudentsTable = () => {
 
 const styles = StyleSheet.create({
   container: {
-    flexShrink: 1,
+    flex: 1,
     borderRadius: BORDER_RADIUS[300],
     overflow: 'hidden',
     ...SHADOWS[1],
   },
   loader: {
-    minHeight: 200,
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -146,21 +113,40 @@ const styles = StyleSheet.create({
     paddingHorizontal: SPACING[400],
     paddingVertical: SPACING[200],
     gap: SPACING[400],
-    backgroundColor: COLORS.NEUTRAL_2,
+    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',
+  },
   emptyContainer: {
     flexGrow: 1,
   },
   emptyState: {
     flex: 1,
-    minHeight: 200,
     alignItems: 'center',
     justifyContent: 'center',
   },

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

@@ -1,36 +1,29 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { BORDER_RADIUS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
-import { getOperatorBandColors } from '../../fluencyTeacher.helpers'
-import { FluencyOperator } from '../../fluencyTeacher.constants'
 
-type OperatorBadgeProps = {
+export type OperatorBadgeProps = {
   value: number
-  operator: FluencyOperator
+  bgColor: string
+  textColor: string
 }
 
-export const OperatorBadge = ({ value, operator }: OperatorBadgeProps) => {
-  const { background, text } = getOperatorBandColors(operator, value)
-  return (
-    <View style={[styles.badge, { backgroundColor: background }]}>
-      <Typography variant={HeadingVariants.H9} style={[styles.badgeText, { color: text }]}>
-        {value}%
-      </Typography>
-    </View>
-  )
-}
+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: 64,
-    height: 32,
+    width: 90,
     paddingVertical: SPACING[200],
     borderRadius: BORDER_RADIUS[200],
     alignItems: 'center',
-    justifyContent: 'center',
   },
   badgeText: {
     textAlign: 'center',
-    textTransform: 'uppercase',
   },
 })

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

@@ -1,52 +1,65 @@
-import React, { ComponentType } from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY, IconProps, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+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 { SortingDirection } from '../../../../shared/common.constants'
-import { SortOrderCarets } from './SortOrderCarets'
 
-type TableColumnSortButtonProps = {
-  Icon?: ComponentType<IconProps>
+export type TableColumnSortButtonProps = {
+  symbol: string
   label: string
   isActive: boolean
-  activeColor?: string
   direction: SortingDirection
+  activeBg: string
+  activeText: string
   onPress: () => void
 }
 
 export const TableColumnSortButton = ({
-  Icon,
+  symbol,
   label,
   isActive,
-  activeColor = COLORS.PRIMARY_YELLOW,
   direction,
+  activeBg,
+  activeText,
   onPress,
 }: TableColumnSortButtonProps) => {
-  const contentColor = isActive ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_7
+  const contentColor = isActive ? activeText : COLORS.NEUTRAL_7
   return (
-    <Pressable onPress={onPress} style={styles.wrap}>
-      <View style={[styles.button, isActive && { backgroundColor: activeColor }]}>
-        {Icon && <Icon size={16} color={contentColor} />}
-        <Text selectable={false} style={[styles.label, { color: contentColor }]}>
-          {label}
-        </Text>
-      </View>
-      <SortOrderCarets isActive={isActive} direction={direction} />
+    <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 === SortingDirection.DESC ? (
+          <CaretDownIcon size={12} color={contentColor} />
+        ) : (
+          <CaretUpIcon size={12} color={contentColor} />
+        )
+      ) : (
+        <SortDefaultIcon size={10} color={contentColor} />
+      )}
     </Pressable>
   )
 }
 
 const styles = StyleSheet.create({
-  wrap: {
+  sortButton: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: SPACING[100],
-    paddingLeft: SPACING[100],
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: SPACING[100],
     paddingLeft: 6,
     paddingRight: SPACING[200],
     paddingVertical: SPACING[100],
@@ -56,8 +69,16 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.NEUTRAL_1,
     ...SHADOWS[2],
   },
-  label: {
-    paddingHorizontal: SPACING[100],
+  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,

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

@@ -1,25 +1,16 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef } from 'react'
 import { Animated, Pressable, StyleSheet, View } from 'react-native'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  HeadingVariants,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { COLUMN_TO_OPERATOR } from '../../fluencyTeacher.constants'
-import { getTableOperatorColumns } from '../../fluencyTeacher.helpers'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
 import { OperatorBadge } from './OperatorBadge'
-import { AverageCell } from './AverageCell'
-import { tableCellStyles } from './tableCell.styles'
+import { TableRowAverageProgress } from './TableRowAverageProgress'
 import type { StudentOperatorScores } from '../../fluencyTeacher.types'
 
-type TableRowProps = {
+export type TableRowProps = {
   name: string
   scores: StudentOperatorScores
   averagePercent?: number
-  isSelected?: boolean
+  averageLabel?: string
   onPress?: () => void
 }
 
@@ -29,87 +20,95 @@ export const TableRow = ({
   name,
   scores,
   averagePercent = 0,
-  isSelected = false,
+  averageLabel = '',
   onPress,
 }: TableRowProps) => {
-  const { grade } = useTeacherFluency()
   const hoverProgress = useRef(new Animated.Value(0)).current
-  const [isHovered, setIsHovered] = useState(false)
 
   const fadeIn = () => {
-    setIsHovered(true)
     Animated.timing(hoverProgress, { toValue: 1, duration: 150, useNativeDriver: false }).start()
   }
 
   const fadeOut = () => {
-    setIsHovered(false)
     Animated.timing(hoverProgress, { toValue: 0, duration: 150, useNativeDriver: false }).start()
   }
 
-  const hoverBackgroundColor = hoverProgress.interpolate({
+  const backgroundColor = hoverProgress.interpolate({
     inputRange: [0, 1],
-    outputRange: [COLORS.NEUTRAL_1, COLORS.ORANGE_1],
+    outputRange: [COLORS.NEUTRAL_1, COLORS.NEUTRAL_2],
   })
-  const isHighlighted = isHovered || isSelected
 
   return (
-    <View style={styles.rowWrapper}>
-      <AnimatedPressable
-        onHoverIn={fadeIn}
-        onHoverOut={fadeOut}
-        onPress={onPress}
-        style={[
-          styles.row,
-          { backgroundColor: isSelected ? COLORS.ORANGE_1 : hoverBackgroundColor },
-        ]}
-      >
-        <View style={tableCellStyles.name}>
-          <Typography
-            variant={HeadingVariants.H7}
-            style={[styles.nameText, isHighlighted && styles.nameTextHighlighted]}
-            numberOfLines={1}
-          >
-            {name}
-          </Typography>
-        </View>
+    <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={tableCellStyles.average}>
-          <AverageCell percent={averagePercent} />
-        </View>
+      <View style={styles.average}>
+        <TableRowAverageProgress percent={averagePercent} label={averageLabel} />
+      </View>
 
-        <View style={tableCellStyles.operators}>
-          {getTableOperatorColumns(grade).map(({ operator }) => (
-            <View key={operator} style={tableCellStyles.operator}>
-              <OperatorBadge value={scores[operator]} operator={COLUMN_TO_OPERATOR[operator]} />
-            </View>
-          ))}
-        </View>
-      </AnimatedPressable>
-    </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({
-  rowWrapper: {
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SPACING[400],
+    paddingVertical: SPACING[200],
+    gap: SPACING[400],
     backgroundColor: COLORS.NEUTRAL_1,
     borderBottomWidth: 1,
-    borderBottomColor: COLORS.NEUTRAL_3,
+    borderBottomColor: COLORS.NEUTRAL_4,
   },
-  row: {
+  name: {
+    width: 137,
+    height: 40,
     flexDirection: 'row',
     alignItems: 'center',
-    marginHorizontal: SPACING[100],
-    marginVertical: 2,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    gap: SPACING[400],
-    borderRadius: BORDER_RADIUS[200],
+    gap: 12,
+  },
+  icon: {
+    width: 25,
+    height: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   nameText: {
     width: 100,
     color: COLORS.NEUTRAL_9,
   },
-  nameTextHighlighted: {
-    color: COLORS.PRIMARY_ORANGE,
+  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',
   },
 })