@magmamath/students-features 1.5.0 → 1.5.1

package/src/features/fluency-teacher/model/TeacherFluencyTableModel.ts

@@ -0,0 +1,70 @@
+import { createEvent, createStore, createEffect, combine } from 'effector'
+import { spread } from 'patronum'
+import { TeacherFluencyApiModel } from './TeacherFluencyApiModel'
+import { buildClassAverageStats, buildStudentsFluencyTable } from '../fluencyTeacher.helpers'
+import type {
+  ClassFluencyStats,
+  StudentDrawerInfo,
+  StudentResult,
+  TeacherFluencyGateProps,
+} from '../fluencyTeacher.types'
+import { TeacherFluencyFiltersModel } from './TeacherFluencyFiltersModel'
+import { FluencyTableColumn } from '../fluencyTeacher.constants'
+import { SortingDirection } from '../../../shared/common.constants'
+
+export class TeacherFluencyTableModel {
+  public readonly reset = createEvent()
+
+  public readonly $stats = createStore<ClassFluencyStats | null>(null).reset(this.reset)
+  public readonly $table = createStore<StudentResult[]>([]).reset(this.reset)
+  public readonly $filteredTable
+
+  public readonly setStudentInfoDrawer = createEvent<StudentResult | null>()
+  public readonly $studentInfoDrawer = createStore<StudentDrawerInfo | null>(null)
+    .reset(this.reset)
+    .on(this.setStudentInfoDrawer, (_, student) => (student ? { ...student, details: null } : null))
+
+  public readonly initFx = createEffect(async (props: TeacherFluencyGateProps) => {
+    const response = await this.api.getClassSummaryFx({
+      studentIds: props.students.map(({ id }) => id),
+    })
+    return {
+      stats: buildClassAverageStats(response),
+      table: buildStudentsFluencyTable({ response, students: props.students }),
+    }
+  })
+
+  constructor(
+    private readonly api: TeacherFluencyApiModel,
+    private readonly filters: TeacherFluencyFiltersModel,
+  ) {
+    spread({
+      source: this.initFx.doneData,
+      targets: {
+        stats: this.$stats,
+        table: this.$table,
+      },
+    })
+
+    this.$studentInfoDrawer.on(this.api.getStudentDetailsFx.doneData, (state, details) =>
+      state ? { ...state, details } : null,
+    )
+
+    this.$filteredTable = combine(
+      this.$table,
+      this.filters.$search,
+      this.filters.$sort,
+      (students, search, sort) => {
+        const filtered = search
+          ? students.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
+          : students
+
+        return [...filtered].sort((a, b) => {
+          const aVal = sort.column === FluencyTableColumn.AVERAGE ? a.averagePercent : a.scores[sort.column]
+          const bVal = sort.column === FluencyTableColumn.AVERAGE ? b.averagePercent : b.scores[sort.column]
+          return sort.direction === SortingDirection.DESC ? bVal - aVal : aVal - bVal
+        })
+      },
+    )
+  }
+}

package/src/features/pmProgress/components/content/PmContent.tsx

@@ -7,7 +7,6 @@ import { PmDomainList } from '../list/PmDomainList'
 import { PmInsights } from '../insights/PmInsights'
 import { PmStatusOverlay } from '../locked/PmStatusOverlay'
 import { usePmProgress } from '../../context/PmProgressContext'
-import { PmProgressStatus } from '@magmamath/students-features'
 
 export const PmProgressContent = () => {
   const { model } = usePmProgress()

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -15,14 +15,14 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
-import { isWeb } from '../../../../shared/common.constants'
+import { BURGER_MENU_BREAKPOINT, isWeb } from '../../../../shared/common.constants'
 import { useStoreMap, useUnit } from 'effector-react'
 import { usePmProgress } from '../../context/PmProgressContext'
 import { formatGradeLabel } from '../../shared/pmProgress.helpers'
 import { MenuIcon } from '../../../../shared/icons/MenuIcon'
 import { TEST_IDS } from '@magmamath/students-qa'
 import { NextUp } from './NextUp'
-import { BURGER_MENU_BREAKPOINT, MENU_MAX_HEIGHT } from '@magmamath/students-features'
+import { MENU_MAX_HEIGHT } from '../../shared/pmProgress.constants'
 import { useText } from '../../../../i18n/i18n'
 
 const menuItemProps: MenuItemProps = {

package/src/features/pmProgress/components/locked/PmStatusOverlay.tsx

@@ -1,6 +1,13 @@
 import React, { ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, ErrorIcon, HeadingVariants, LockIcon, SPACING, Typography, } from '@magmamath/react-native-ui'
+import {
+  COLORS,
+  ErrorIcon,
+  HeadingVariants,
+  LockIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
 import { PmProgressStatus } from '../../shared/pmProgress.constants'
 import { TranslationKey, useText } from '../../../../i18n/i18n'
 

package/src/features/pmProgress/components/standard/StandardTag.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native'
-import { PmProgressModel } from '@magmamath/students-features'
+import { PmProgressModel } from '../../model/PmProgressModel'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
 import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
 import { useStoreMap } from 'effector-react'

package/src/features/pmProgress/context/PmProgressContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import { PmProgressModel } from '../model/PmProgressModel'
-import { Skill, GradeLabelsMap } from '@magmamath/students-features'
+import { Skill, GradeLabelsMap } from '../shared/pmProgress.types'
 
 export type PmProgressContextValue = {
   model: PmProgressModel

package/src/features/pmProgress/shared/pmProgress.constants.ts

@@ -92,7 +92,6 @@ export const DOMAIN_BORDER_COLORS = [
   COLORS.GREEN_6,
 ]
 
-export const BURGER_MENU_BREAKPOINT = 1024
 export const SMALL_SCREEN_THRESHOLD = 568
 export const SMALL_SCREEN_MENU_MAX_HEIGHT = 300
 export const WINDOW_HEIGHT = Dimensions.get('window').height

package/src/i18n/.generated/schema.json

@@ -35,7 +35,7 @@
     "allLockedTitle": "All grades are locked",
     "allTime": "All time",
     "andMore": "and {{ count }} more...",
-    "fluency": "Fluency",
+    "fluency": "Fact Fluency",
     "grade": "Grade",
     "gradeK": "K",
     "gradeOther": "Other",
@@ -59,14 +59,20 @@
       "addition": "Addition",
       "cardsReady": "individualized facts ready",
       "claimProgress": "Claim progress",
+      "correct": "Correct!   ",
       "dayFriday": "F",
       "dayMonday": "M",
       "dayThursday": "T",
       "dayTuesday": "T",
       "dayWednesday": "W",
       "division": "Division",
+      "emptySubtitle": "Ask your teacher to unlock fluency for your grade",
+      "emptyTitle": "No facts available for your grade",
       "enter": "Submit",
+      "errorSubtitle": "We couldn't load your exercises. Please try again later.",
+      "errorTitle": "Something went wrong",
       "fast": "Fast!",
+      "incorrect": "INCORRECT — ANSWER: {{answer}}",
       "masteryGrowing": "Growing",
       "masteryLearning": "Learning",
       "masteryMastered": "Mastered",
@@ -79,6 +85,7 @@
       "resultStreakCardLabel": "Nice streak!",
       "resultSubtitle": "Nice job {{name}}!",
       "resultTitle": "Checked and done",
+      "skipped": "Skipped",
       "startPractice": "Start fluency practice",
       "subtraction": "Subtraction",
       "title": "Fluency practice",
@@ -88,6 +95,30 @@
   "teacherFeedback": {
     "noComments": "No comments yet"
   },
+  "teacher": {
+    "fluency": {
+      "allPupils": "All students",
+      "average": "Average",
+      "avgTimeTitle": "Avg Time / Student",
+      "factFluency": "Fact Fluency",
+      "factsGridLabel": "{{cols}}×{{rows}} facts",
+      "hardestFactsEmpty": "No hardest facts yet",
+      "hardestFactsTitle": "Top 3 Hardest Facts",
+      "minGoal": "/ {{goal}} min goal",
+      "noFactsPracticed": "No facts practiced yet",
+      "noStudents": "This class has no students",
+      "noStudentsFound": "No students match your search",
+      "overallMastery": "Overall mastery",
+      "progressDeveloping": "Developing",
+      "progressFluent": "Fluent",
+      "progressLearning": "Learning",
+      "progressNotStarted": "Not started",
+      "progressProficient": "Proficient",
+      "rowClickHint": "Click a student row to see their full fluency breakdown.",
+      "search": "Search",
+      "studentFluency": "Student Fluency"
+    }
+  },
   "time": {
     "dayAgo": "day ago",
     "daysAgo": "{{count}} days ago",

package/src/index.ts

@@ -14,4 +14,6 @@ export * from './shared/icons'
 export * from './features/voice'
 export * from './features/featureUsage'
 export * from './features/uiMode'
+export * from './features/fluency'
+export * from './features/fluency-teacher'
 export * from './features/translation'

package/src/lib/components/GradientView.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { View, Platform, ColorValue } from 'react-native'
+import { LinearGradient } from 'expo-linear-gradient'
+import type { StyleProp, ViewStyle } from 'react-native'
+
+type Point = { x: number; y: number }
+
+type GradientViewProps = {
+  colors: string[]
+  start?: Point
+  end?: Point
+  locations?: number[]
+  style?: StyleProp<ViewStyle>
+  pointerEvents?: 'none' | 'box-none' | 'box-only' | 'auto'
+  children?: React.ReactNode
+}
+
+const buildCssGradient = (
+  colors: string[],
+  start: Point,
+  end: Point,
+  locations?: number[],
+): string => {
+  const angle = Math.round(Math.atan2(end.x - start.x, -(end.y - start.y)) * (180 / Math.PI))
+  const stops = colors
+    .map((color, i) => {
+      const pct = locations
+        ? `${Math.round(locations[i] * 100)}%`
+        : `${Math.round((i / (colors.length - 1)) * 100)}%`
+      return `${color} ${pct}`
+    })
+    .join(', ')
+  return `linear-gradient(${angle}deg, ${stops})`
+}
+
+export const GradientView = ({
+  colors,
+  start = { x: 0, y: 0 },
+  end = { x: 0, y: 1 },
+  locations,
+  style,
+  pointerEvents,
+  children,
+}: GradientViewProps) => {
+  if (Platform.OS === 'web') {
+    return (
+      <View
+        pointerEvents={pointerEvents}
+        style={[
+          style,
+          { backgroundImage: buildCssGradient(colors, start, end, locations) } as ViewStyle,
+        ]}
+      >
+        {children}
+      </View>
+    )
+  }
+
+  return (
+    <LinearGradient
+      colors={colors as [ColorValue, ColorValue]}
+      start={start}
+      end={end}
+      locations={locations as [number, number]}
+      style={style}
+      pointerEvents={pointerEvents}
+    >
+      {children}
+    </LinearGradient>
+  )
+}

package/src/lib/constants.ts

@@ -1,3 +1,4 @@
 export enum KeyboardKeys {
-    ENTER = 'Enter',
-  }
+  ENTER = 'Enter',
+  BACKSPACE = 'Backspace',
+}

package/src/shared/common.constants.ts

@@ -1,3 +1,10 @@
 import { Platform } from 'react-native'
 
 export const isWeb = Platform.OS === 'web'
+
+export enum SortingDirection {
+  DESC = 'desc',
+  ASC = 'asc',
+}
+
+export const BURGER_MENU_BREAKPOINT = 1024

package/src/types/types.d.ts

@@ -2,3 +2,8 @@ declare module '*.scss' {
   const content: Record<string, string>
   export default content
 }
+
+declare module '*.mp3' {
+  const src: string | number
+  export default src
+}