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

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

@@ -1,103 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import {
-  COLORS,
-  HeadingVariants,
-  SPACING,
-  StudentsIcon,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useUnit } from 'effector-react'
-import { useText } from '../../../../i18n/i18n'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { toAverageLabel } from '../../fluencyTeacher.helpers'
-import { TABLE_OPERATOR_COLUMNS } from '../../fluencyTeacher.constants'
-import { TableRowAverageProgress } from './TableRowAverageProgress'
-import { OperatorBadge } from './OperatorBadge'
-
-export const AllPupilsTableRow = () => {
-  const t = useText()
-  const { model } = useTeacherFluency()
-  const stats = useUnit(model.table.$stats)
-
-  if (!stats) return null
-
-  return (
-    <View style={styles.row}>
-      <View style={styles.name}>
-        <View style={styles.icon}>
-          <StudentsIcon size={25} color={COLORS.NEUTRAL_7} />
-        </View>
-        <Typography variant={HeadingVariants.H7} style={styles.nameText} numberOfLines={1}>
-          {t('teacher.fluency.allPupils')}
-        </Typography>
-      </View>
-
-      <View style={styles.average}>
-        <TableRowAverageProgress
-          percent={stats.classAverage}
-          label={t(toAverageLabel(stats.classAverage / 100))}
-        />
-      </View>
-
-      <View style={styles.operators}>
-        {TABLE_OPERATOR_COLUMNS.map(({ operator, badgeBg, badgeText }) => (
-          <View key={operator} style={styles.operator}>
-            <OperatorBadge
-              value={stats.operatorAverages[operator]}
-              bgColor={badgeBg}
-              textColor={badgeText}
-            />
-          </View>
-        ))}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[400],
-    paddingVertical: SPACING[200],
-    gap: SPACING[400],
-    backgroundColor: COLORS.NEUTRAL_2,
-    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/AverageSortButton.tsx

@@ -1,76 +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'
-import { SortingDirection } from '../../../../shared/common.constants'
-import { FluencyTableColumn } from '../../fluencyTeacher.constants'
-
-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 (
-    <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,159 +0,0 @@
-import React from 'react'
-import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native'
-import { useUnit } from 'effector-react'
-import {
-  BORDER_RADIUS,
-  COLORS,
-  FONT_FAMILY,
-  HeadingVariants,
-  SHADOWS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import { useTeacherFluency } from '../../context/TeacherFluencyContext'
-import { TableRow } from './TableRow'
-import { FluencyTableColumn, 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, isLoading, table, filteredTable } = useUnit({
-    sort: model.filters.$sort,
-    table: model.table.$table,
-    filteredTable: model.table.$filteredTable,
-    isLoading: model.api.getClassSummaryFx.pending,
-  })
-
-  const hasStudents = table.length > 0
-
-  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(FluencyTableColumn.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={filteredTable}
-            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}
-              />
-            )}
-            contentContainerStyle={filteredTable.length === 0 ? styles.emptyContainer : undefined}
-            ListEmptyComponent={
-              <View style={styles.emptyState}>
-                <Typography variant={HeadingVariants.H9} style={styles.emptyText}>
-                  {hasStudents
-                    ? t('teacher.fluency.noStudentsFound')
-                    : t('teacher.fluency.noStudents')}
-                </Typography>
-              </View>
-            }
-          />
-        </>
-      )}
-    </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',
-  },
-  emptyContainer: {
-    flexGrow: 1,
-  },
-  emptyState: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  emptyText: {
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '400',
-    fontSize: 32,
-    color: COLORS.NEUTRAL_9,
-  },
-})

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 { SortingDirection } from '../../../../shared/common.constants'
-
-export type TableColumnSortButtonProps = {
-  symbol: string
-  label: string
-  isActive: boolean
-  direction: SortingDirection
-  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 === SortingDirection.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