@magmamath/students-features 1.8.0-rc.0-fluency-visuals → 1.8.0

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

@@ -1,10 +0,0 @@
-import React from 'react'
-import Svg, { Path } from 'react-native-svg'
-import { COLORS, IconProps } from '@magmamath/react-native-ui'
-
-export const SortDefaultIcon = ({ color = COLORS.NEUTRAL_9, size = 10 }: IconProps) => (
-  <Svg width={size} height={size} viewBox="0 0 10 10" fill="none">
-    <Path d="M5 1 L8 4 H2 Z" fill={color} />
-    <Path d="M5 9 L2 6 H8 Z" fill={color} />
-  </Svg>
-)

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

@@ -1,63 +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 type { TranslationKey } from '../../../../i18n/i18n'
-
-type MasteryLevelConfig = {
-  labelKey: TranslationKey
-  color: string
-}
-
-const MASTERY_LEVEL_CONFIG: MasteryLevelConfig[] = [
-  { labelKey: 'student.fluency.notStarted', color: COLORS.NEUTRAL_3 },
-  { labelKey: 'student.fluency.masteryLearning', color: COLORS.GREEN_2 },
-  { labelKey: 'student.fluency.masteryGrowing', color: COLORS.GREEN_3 },
-  { labelKey: 'student.fluency.masteryStrong', color: COLORS.GREEN_4 },
-  { labelKey: 'student.fluency.masteryMastered', color: COLORS.GREEN_7 },
-]
-
-export const DrawerMasteryLegend = () => {
-  const t = useText()
-  return (
-    <View style={styles.container}>
-      {MASTERY_LEVEL_CONFIG.map(({ labelKey, color }) => (
-        <View key={labelKey} style={styles.item}>
-          <View style={[styles.swatch, { backgroundColor: color }]} />
-          <Text style={styles.label}>{t(labelKey)}</Text>
-        </View>
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[300],
-    paddingVertical: SPACING[150],
-    paddingHorizontal: SPACING[300],
-    borderRadius: 999,
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderWidth: 1,
-    borderColor: COLORS.NEUTRAL_4,
-    alignSelf: 'center',
-  },
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[150],
-  },
-  swatch: {
-    width: 14,
-    height: 14,
-    borderRadius: 4,
-  },
-  label: {
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    fontSize: 12,
-    fontWeight: '600',
-    color: COLORS.NEUTRAL_8,
-  },
-})

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',
-  },
-})