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

package/src/features/fluency-teacher/assets/DivisionIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import Svg, { Path } from 'react-native-svg'
-import { COLORS, IconProps } from '@magmamath/react-native-ui'
-
-export const DivisionIcon = ({ color = COLORS.NEUTRAL_9, size = 16 }: IconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-    <Path
-      d="M8.0002 10.7996C8.82854 10.7996 9.50006 11.4713 9.5002 12.2996C9.5002 13.128 8.82862 13.7996 8.0002 13.7996C7.17177 13.7996 6.5002 13.128 6.5002 12.2996C6.50033 11.4713 7.17185 10.7996 8.0002 10.7996Z"
-      fill={color}
-    />
-    <Path
-      d="M14.4006 7.2C14.8423 7.20019 15.2004 7.55809 15.2004 7.9998C15.2004 8.4415 14.8422 8.79942 14.4006 8.79961H1.59981C1.15819 8.79937 0.800026 8.44146 0.8 7.9998C0.8 7.55812 1.15818 7.20024 1.5998 7.2H14.4006Z"
-      fill={color}
-    />
-    <Path
-      d="M8.0002 2.2C8.82862 2.2 9.5002 2.87157 9.5002 3.7C9.50006 4.52831 8.82854 5.2 8.0002 5.2C7.17185 5.2 6.50033 4.52831 6.5002 3.7C6.5002 2.87157 7.17177 2.2 8.0002 2.2Z"
-      fill={color}
-    />
-  </Svg>
-)

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

@@ -1,81 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
-import { useText } from '../../../../i18n/i18n'
-import {
-  FluencyOperator,
-  LEGEND_LEVELS,
-  MATRIX_CELL_COLORS,
-  MATRIX_NOT_STARTED_COLOR,
-  OPERATOR_PALETTES,
-} from '../../fluencyTeacher.constants'
-import { countFactsByMasteryLevel } from '../../fluencyTeacher.helpers'
-import type { DrawerGrid } from '../../fluencyTeacher.types'
-
-type MatrixLegendProps = {
-  operator: FluencyOperator
-  grid: DrawerGrid | null
-}
-
-export const MatrixLegend = ({ operator, grid }: MatrixLegendProps) => {
-  const t = useText()
-  const counts = countFactsByMasteryLevel(grid, operator)
-  const countColor = OPERATOR_PALETTES[operator].legendCount
-
-  return (
-    <View style={styles.container}>
-      {LEGEND_LEVELS.map(({ box, labelKey }) => (
-        <View key={labelKey} style={styles.item}>
-          <View style={styles.labelWrap}>
-            <View
-              style={[
-                styles.swatch,
-                {
-                  backgroundColor:
-                    box === null ? MATRIX_NOT_STARTED_COLOR : MATRIX_CELL_COLORS[operator][box],
-                },
-              ]}
-            />
-            <Text style={styles.label}>{t(labelKey)}:</Text>
-          </View>
-          <Text style={[styles.count, { color: countColor }]}>{counts.get(box) ?? 0}</Text>
-        </View>
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: 130,
-    gap: SPACING[100],
-    paddingTop: SPACING[200],
-    paddingHorizontal: SPACING[100],
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  labelWrap: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[100],
-  },
-  swatch: {
-    width: 10,
-    height: 10,
-    borderRadius: 4,
-  },
-  label: {
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '400',
-    fontSize: 10,
-    color: COLORS.NEUTRAL_7,
-  },
-  count: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '600',
-    fontSize: 13,
-  },
-})

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

@@ -1,45 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { BORDER_RADIUS, COLORS, HeadingVariants, Typography } from '@magmamath/react-native-ui'
-
-type AverageCellProps = {
-  percent: number
-  height?: number
-  showPercent?: boolean
-}
-
-export const AverageCell = ({ percent, height = 32, showPercent = true }: AverageCellProps) => (
-  <View style={[styles.track, { height }]}>
-    <View style={[styles.fill, { width: `${percent}%` }]} />
-    {showPercent && (
-      <Typography variant={HeadingVariants.H9} style={styles.percent}>
-        {percent}%
-      </Typography>
-    )}
-  </View>
-)
-
-const styles = StyleSheet.create({
-  track: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: BORDER_RADIUS[200],
-    borderWidth: 1.5,
-    borderColor: COLORS.PRIMARY_YELLOW,
-    backgroundColor: COLORS.YELLOW_1,
-    overflow: 'hidden',
-  },
-  fill: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    backgroundColor: COLORS.PRIMARY_YELLOW,
-  },
-  percent: {
-    color: COLORS.YELLOW_9,
-    textTransform: 'uppercase',
-  },
-})

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

@@ -1,37 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { CaretDownIcon, CaretUpIcon, COLORS } from '@magmamath/react-native-ui'
-import { SortingDirection } from '../../../../shared/common.constants'
-
-type SortOrderCaretsProps = {
-  isActive: boolean
-  direction: SortingDirection
-}
-
-const getCaretColor = (isHighlighted: boolean) =>
-  isHighlighted ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_5
-
-export const SortOrderCarets = ({ isActive, direction }: SortOrderCaretsProps) => (
-  <View style={styles.container}>
-    <View style={styles.upCaret}>
-      <CaretUpIcon
-        size={16}
-        color={getCaretColor(isActive && direction === SortingDirection.ASC)}
-      />
-    </View>
-    <CaretDownIcon
-      size={16}
-      color={getCaretColor(isActive && direction === SortingDirection.DESC)}
-    />
-  </View>
-)
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  upCaret: {
-    marginBottom: -5,
-  },
-})

package/src/features/fluency-teacher/components/table/tableCell.styles.ts

@@ -1,39 +0,0 @@
-import { StyleSheet } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
-
-// Single source of the column dimensions that keep the header,
-// all-pupils row, and student rows aligned.
-export const tableCellStyles = StyleSheet.create({
-  name: {
-    width: 137,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-  },
-  average: {
-    width: 145,
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: SPACING[100],
-    justifyContent: 'center',
-  },
-  headerAverage: {
-    width: 145,
-    height: 40,
-    paddingHorizontal: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  operators: {
-    flex: 1,
-    height: 40,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[800],
-  },
-  operator: {
-    flex: 1,
-    alignItems: 'center',
-  },
-})