@magmamath/students-features 1.3.26-rc.19 → 1.3.26-rc.2

package/src/features/fluency-teacher/fluencyTeacher.constants.ts

@@ -1,76 +0,0 @@
-import { COLORS } from '@magmamath/react-native-ui'
-import { type OperatorColumnConfig } from './fluencyTeacher.types'
-
-export const TEACHER_FLUENCY_GOAL_MINUTES = 25
-
-export enum FluencyOperator {
-  ADDITION = 'addition',
-  SUBTRACTION = 'subtraction',
-  MULTIPLICATION = 'multiplication',
-  DIVISION = 'division',
-}
-
-export const MATRIX_CELL_COLORS: Record<FluencyOperator, Record<number, string>> = {
-  [FluencyOperator.ADDITION]: {
-    1: COLORS.GREEN_2,
-    2: COLORS.GREEN_3,
-    3: COLORS.PRIMARY_GREEN,
-    4: COLORS.GREEN_6,
-  },
-  [FluencyOperator.SUBTRACTION]: {
-    1: COLORS.ORANGE_2,
-    2: COLORS.ORANGE_3,
-    3: COLORS.PRIMARY_ORANGE,
-    4: COLORS.ORANGE_6,
-  },
-  [FluencyOperator.MULTIPLICATION]: {
-    1: COLORS.BLUE_2,
-    2: COLORS.BLUE_3,
-    3: COLORS.PRIMARY_BLUE,
-    4: COLORS.BLUE_6,
-  },
-  [FluencyOperator.DIVISION]: {
-    1: COLORS.PURPLE_2,
-    2: COLORS.PURPLE_3,
-    3: COLORS.PRIMARY_PURPLE,
-    4: COLORS.PURPLE_6,
-  },
-}
-
-export enum FluencyMathOperatorSymbol {
-  ADDITION = '+',
-  SUBTRACTION = '−',
-  MULTIPLICATION = '×',
-  DIVISION = '÷',
-}
-
-export const TABLE_OPERATOR_COLUMNS: readonly OperatorColumnConfig[] = [
-  {
-    operator: FluencyOperator.ADDITION,
-    labelKey: 'student.fluency.addition',
-    symbol: FluencyMathOperatorSymbol.ADDITION,
-    badgeBg: COLORS.GREEN_3,
-    badgeText: COLORS.GREEN_8,
-  },
-  {
-    operator: FluencyOperator.SUBTRACTION,
-    labelKey: 'student.fluency.subtraction',
-    symbol: FluencyMathOperatorSymbol.SUBTRACTION,
-    badgeBg: COLORS.ORANGE_3,
-    badgeText: COLORS.ORANGE_8,
-  },
-  {
-    operator: FluencyOperator.DIVISION,
-    labelKey: 'student.fluency.division',
-    symbol: FluencyMathOperatorSymbol.DIVISION,
-    badgeBg: COLORS.BLUE_3,
-    badgeText: COLORS.BLUE_8,
-  },
-  {
-    operator: FluencyOperator.MULTIPLICATION,
-    labelKey: 'student.fluency.multiplication',
-    symbol: FluencyMathOperatorSymbol.MULTIPLICATION,
-    badgeBg: COLORS.PURPLE_2,
-    badgeText: COLORS.PURPLE_8,
-  },
-]

package/src/features/fluency-teacher/fluencyTeacher.helpers.ts

@@ -1,73 +0,0 @@
-import { COLORS } from '@magmamath/react-native-ui'
-import type { TranslationKey } from '../../i18n/i18n'
-import type { ClassFluencySummaryResponse, ClassFluencyStats, ClassOperatorAverages, FluencyStudent } from './fluencyTeacher.types'
-
-export const getCellColor = (box: number | null, colorMap: Record<number, string>): string =>
-  box ? (colorMap[box] ?? COLORS.NEUTRAL_2) : COLORS.NEUTRAL_2
-
-export const toAverageLabel = (overallPercent: number): TranslationKey => {
-  if (overallPercent >= 0.9) return 'teacher.fluency.progressFluent'
-  if (overallPercent >= 0.65) return 'teacher.fluency.progressProficient'
-  if (overallPercent >= 0.35) return 'teacher.fluency.progressDeveloping'
-  if (overallPercent >= 0.05) return 'teacher.fluency.progressLearning'
-  return 'teacher.fluency.progressNotStarted'
-}
-
-const toPercent = (decimal: number): number => Math.round(decimal * 100)
-
-type BuildStudentsFluencyTableProps = {
-  students: FluencyStudent[]
-  response: ClassFluencySummaryResponse
-}
-
-const buildOperatorAverages = (response: ClassFluencySummaryResponse): ClassOperatorAverages => {
-  const count = response.students.length
-  if (count === 0) return { addition: 0, subtraction: 0, multiplication: 0, division: 0 }
-
-  const sums = response.students.reduce(
-    (acc, row) => ({
-      addition: acc.addition + row.byOperator.addition,
-      subtraction: acc.subtraction + row.byOperator.subtraction,
-      multiplication: acc.multiplication + row.byOperator.multiplication,
-      division: acc.division + row.byOperator.division,
-    }),
-    { addition: 0, subtraction: 0, multiplication: 0, division: 0 }
-  )
-
-  return {
-    addition: toPercent(sums.addition / count),
-    subtraction: toPercent(sums.subtraction / count),
-    multiplication: toPercent(sums.multiplication / count),
-    division: toPercent(sums.division / count),
-  }
-}
-
-export const buildClassAverageStats = (response: ClassFluencySummaryResponse): ClassFluencyStats => ({
-  ...response,
-  classAverage: toPercent(response.classAverage),
-  operatorAverages: buildOperatorAverages(response),
-})
-
-export const buildStudentsFluencyTable = ({
-  students,
-  response,
-}: BuildStudentsFluencyTableProps) => {
-  return response.students
-    .map((row) => {
-      const student = students.find(({ id }) => id === row.studentId)
-      if (!student) return null
-      return {
-        id: row.studentId,
-        name: student?.name ?? '',
-        averagePercent: toPercent(row.overallPercent),
-        averageLabel: toAverageLabel(row.overallPercent),
-        scores: {
-          addition: toPercent(row.byOperator.addition),
-          subtraction: toPercent(row.byOperator.subtraction),
-          multiplication: toPercent(row.byOperator.multiplication),
-          division: toPercent(row.byOperator.division),
-        },
-      }
-    })
-    .filter((item) => item !== null)
-}

package/src/features/fluency-teacher/fluencyTeacher.types.ts

@@ -1,124 +0,0 @@
-import type { TranslationKey } from '../../i18n/i18n'
-import { FluencyOperator } from './fluencyTeacher.constants'
-
-type FactId = string
-
-type FactPosition = {
-  column: number
-  row: number
-}
-
-type FactState = {
-  box: number
-  lastAttemptedAt: string | null
-  lastSolvedAt: string | null
-  attemptsCount: number
-  correctCount: number
-  averageTimeMs: number | null
-  numbers: [number, number]
-  position: FactPosition
-  streak: number
-}
-
-type ClassFluencyOperationView = {
-  facts: Record<FactId, FactState>
-}
-
-type TeacherFluencyTableRow = {
-  studentId: string
-  overallPercent: number
-  byOperator: {
-    addition: number
-    subtraction: number
-    multiplication: number
-    division: number
-  }
-  lastAttemptedAt: string | null
-  weeklyTimeMs: number
-}
-
-type TeacherFluencyHardestFact = {
-  factId: string
-  operator: FluencyOperator
-  correctRate: number
-  attemptCount: number
-  strugglingStudentIds: string[]
-  numbers: [number, number]
-}
-
-export type FluencyStudent = {
-  id: string
-  name: string
-}
-
-export type ClassFluencySummaryPayload = {
-  studentIds: string[]
-}
-
-export type ClassFluencySummaryResponse = {
-  classAverage: number
-  students: TeacherFluencyTableRow[]
-  hardestFacts: TeacherFluencyHardestFact[]
-}
-
-export type ClassOperatorAverages = {
-  addition: number
-  subtraction: number
-  multiplication: number
-  division: number
-}
-
-export type ClassFluencyStats = ClassFluencySummaryResponse & {
-  operatorAverages: ClassOperatorAverages
-}
-
-export type StudFluencyDetailsResponse = {
-  operations: Record<FluencyOperator, ClassFluencyOperationView>
-}
-
-export type StudFluencyDetailsPayload = {
-  studentId: string
-  grade: number
-}
-
-export type SortColumn = 'average' | FluencyOperator
-export type SortDirection = 'asc' | 'desc'
-
-export type SortState = {
-  column: SortColumn
-  direction: SortDirection
-}
-
-export type StudentOperatorScores = Record<FluencyOperator, number>
-
-export type StudentResult = {
-  id: string
-  name: string
-  averagePercent: number
-  averageLabel: TranslationKey
-  scores: StudentOperatorScores
-}
-
-export type StudentDrawerInfo = StudentResult & {
-  details: StudFluencyDetailsResponse | null
-}
-
-export type OperatorColumnConfig = {
-  operator: FluencyOperator
-  labelKey: TranslationKey
-  symbol: string
-  badgeBg: string
-  badgeText: string
-}
-
-export type TeacherFluencyGateProps = {
-  students: FluencyStudent[]
-  grade: number
-}
-
-export type TeacherFluencyModelProps = {
-  api: {
-    getClassSummary: (payload: ClassFluencySummaryPayload) => Promise<ClassFluencySummaryResponse>
-    getStudentDetails: (payload: StudFluencyDetailsPayload) => Promise<StudFluencyDetailsResponse>
-  }
-}

package/src/features/fluency-teacher/hooks/useDrawerGrid.ts

@@ -1,58 +0,0 @@
-import { useMemo } from 'react'
-import { useUnit } from 'effector-react'
-import { useTeacherFluency } from '../context/TeacherFluencyContext'
-import { FluencyOperator } from '../fluencyTeacher.constants'
-
-export type DrawerGridCell = { box: number | null; isEmpty: boolean }
-export type DrawerGridRow = { label: number; cells: DrawerGridCell[] }
-export type DrawerGrid = { colLabels: number[]; rows: DrawerGridRow[] }
-
-export const useDrawerGrid = (operator: FluencyOperator): DrawerGrid | null => {
-  const { model } = useTeacherFluency()
-  const drawerInfo = useUnit(model.table.$studentInfoDrawer)
-
-  return useMemo(() => {
-    const factRecord = drawerInfo?.details?.operations[operator]?.facts ?? {}
-    const factList = Object.values(factRecord)
-
-    if (!factList.length) return null
-
-    const isDivision = operator === FluencyOperator.DIVISION
-    const isSubtraction = operator === FluencyOperator.SUBTRACTION
-    const isCommutative =
-      operator === FluencyOperator.ADDITION || operator === FluencyOperator.MULTIPLICATION
-
-    const maxRow = Math.max(...factList.map((f) => f.position.row))
-    const maxCol = Math.max(...factList.map((f) => f.position.column))
-
-    const factAt = (row: number, col: number) =>
-      factList.find((f) => f.position.row === row && f.position.column === col)
-
-    const colLabels = isDivision
-      ? Array.from({ length: maxCol }, (_, i) => i + 1)
-      : Array.from({ length: maxCol + 1 }, (_, i) => i)
-
-    const maxMinuend = isSubtraction ? Math.max(...factList.map((f) => f.numbers[0])) : maxRow
-    const rowNums = Array.from({ length: maxMinuend + 1 }, (_, i) => i)
-
-    const rows = rowNums.map((rowNum) => ({
-      label: rowNum,
-      cells: colLabels.map((colLabel) => {
-        if (isSubtraction && colLabel > rowNum) return { box: null, isEmpty: true }
-
-        const fact = isSubtraction ? factAt(rowNum - colLabel, colLabel) : factAt(rowNum, colLabel)
-        const mirrorFact = isCommutative ? factAt(colLabel, rowNum) : null
-        const primaryBox = fact?.box ?? null
-        const mirrorBox = mirrorFact?.box ?? null
-        const box =
-          primaryBox !== null && mirrorBox !== null
-            ? Math.max(primaryBox, mirrorBox)
-            : (primaryBox ?? mirrorBox)
-
-        return { box, isEmpty: false }
-      }),
-    }))
-
-    return { colLabels, rows }
-  }, [drawerInfo, operator])
-}

package/src/features/fluency-teacher/hooks/useDrawerMatrix.ts

@@ -1,44 +0,0 @@
-import { useMemo, useState } from 'react'
-import type { LayoutChangeEvent } from 'react-native'
-import { FluencyOperator, MATRIX_CELL_COLORS } from '../fluencyTeacher.constants'
-import { useDrawerGrid, type DrawerGrid } from './useDrawerGrid'
-
-const MATRIX_CELL_GAP = 2
-
-type DrawerMatrixLayout = {
-  grid: DrawerGrid | null
-  cellSize: number
-  fontSize: number
-  borderRadius: number
-  cellColorMap: Record<number, string>
-  onLayout: (e: LayoutChangeEvent) => void
-}
-
-export const useDrawerMatrix = (operator: FluencyOperator): DrawerMatrixLayout => {
-  const grid = useDrawerGrid(operator)
-  const [containerWidth, setContainerWidth] = useState(0)
-  const [containerHeight, setContainerHeight] = useState(0)
-
-  const onLayout = (e: LayoutChangeEvent) => {
-    setContainerWidth(e.nativeEvent.layout.width)
-    setContainerHeight(e.nativeEvent.layout.height)
-  }
-
-  const cellSize = useMemo(() => {
-    if (!grid || !containerWidth || !containerHeight) return 0
-    const totalCols = grid.colLabels.length + 1
-    const totalRows = grid.rows.length + 1
-    const cellW = Math.floor((containerWidth - MATRIX_CELL_GAP * (totalCols - 1)) / totalCols)
-    const cellH = Math.floor((containerHeight - MATRIX_CELL_GAP * (totalRows - 1)) / totalRows)
-    return Math.min(cellW, cellH)
-  }, [grid, containerWidth, containerHeight])
-
-  return {
-    grid,
-    cellSize,
-    fontSize: Math.max(8, Math.floor(cellSize * 0.55)),
-    borderRadius: Math.max(2, Math.floor(cellSize * 0.25)),
-    cellColorMap: MATRIX_CELL_COLORS[operator],
-    onLayout,
-  }
-}

package/src/features/fluency-teacher/index.ts

@@ -1,2 +0,0 @@
-export { TeacherFluencyModel } from './model/TeacherFluencyModel'
-export { FluencyTeacher } from './components/FluencyTeacher'

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

@@ -1,18 +0,0 @@
-import { createEffect, Effect } from 'effector'
-import type {
-  TeacherFluencyModelProps,
-  ClassFluencySummaryPayload,
-  ClassFluencySummaryResponse,
-  StudFluencyDetailsPayload,
-  StudFluencyDetailsResponse,
-} from '../fluencyTeacher.types'
-
-export class TeacherFluencyApiModel {
-  public readonly getClassSummaryFx: Effect<ClassFluencySummaryPayload, ClassFluencySummaryResponse>
-  public readonly getStudentDetailsFx: Effect<StudFluencyDetailsPayload, StudFluencyDetailsResponse>
-
-  constructor(api: TeacherFluencyModelProps['api']) {
-    this.getClassSummaryFx = createEffect(api.getClassSummary)
-    this.getStudentDetailsFx = createEffect(api.getStudentDetails)
-  }
-}

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

@@ -1,17 +0,0 @@
-import { createEvent, createStore, restore } from 'effector'
-import type { SortColumn, SortState } from '../fluencyTeacher.types'
-
-export class TeacherFluencyFiltersModel {
-  public readonly setSearch = createEvent<string>()
-  public readonly $search = restore(this.setSearch, '')
-
-  public readonly toggleSort = createEvent<SortColumn>()
-  public readonly $sort = createStore<SortState>({ column: 'average', direction: 'desc' }).on(
-    this.toggleSort,
-    (state, column) => {
-      if (state.column !== column) return { column, direction: 'desc' }
-      const direction = state.direction === 'desc' ? 'asc' : 'desc'
-      return { column, direction }
-    },
-  )
-}

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

@@ -1,45 +0,0 @@
-import { sample } from 'effector'
-import { createGate } from 'effector-react'
-import { TeacherFluencyApiModel } from './TeacherFluencyApiModel'
-import { TeacherFluencyFiltersModel } from './TeacherFluencyFiltersModel'
-import { TeacherFluencyTableModel } from './TeacherFluencyTableModel'
-import type { TeacherFluencyGateProps, TeacherFluencyModelProps } from '../fluencyTeacher.types'
-
-export class TeacherFluencyModel {
-  public readonly gate = createGate<TeacherFluencyGateProps>()
-
-  public readonly api: TeacherFluencyApiModel
-  public readonly filters: TeacherFluencyFiltersModel
-  public readonly table: TeacherFluencyTableModel
-
-  constructor({ api }: TeacherFluencyModelProps) {
-    this.api = new TeacherFluencyApiModel(api)
-    this.filters = new TeacherFluencyFiltersModel()
-    this.table = new TeacherFluencyTableModel(this.api)
-    this.init()
-  }
-
-  private init() {
-    sample({
-      clock: this.gate.state,
-      filter: (props) => props.students.length === 0,
-      target: this.table.reset,
-    })
-
-    sample({
-      clock: this.gate.state,
-      source: this.table.initFx.pending,
-      filter: (isPending, props) => !isPending && props.students.length > 0,
-      fn: (_, props) => props,
-      target: this.table.initFx,
-    })
-
-    sample({
-      clock: this.table.setStudentInfoDrawer,
-      source: this.gate.state,
-      filter: (_, student) => student !== null,
-      fn: (gateProps, student) => ({ studentId: student!.id, grade: gateProps.grade }),
-      target: this.api.getStudentDetailsFx,
-    })
-  }
-}

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

@@ -1,46 +0,0 @@
-import { createEvent, createStore, createEffect } 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'
-
-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 setStudentInfoDrawer = createEvent<StudentResult | null>()
-  public readonly $studentInfoDrawer = createStore<StudentDrawerInfo | null>(null)
-    .reset(this.reset)
-    .on(this.setStudentInfoDrawer, (_, student) => (student ? { ...student, details: null } : null))
-
-  constructor(private readonly api: TeacherFluencyApiModel) {
-    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,
-    )
-  }
-
-  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 }),
-    }
-  })
-}

package/src/lib/components/GradientView.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { View, Platform } from 'react-native'
-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 any]}
-      >
-        {children}
-      </View>
-    )
-  }
-
-  const { LinearGradient } = require('expo-linear-gradient')
-  return (
-    <LinearGradient
-      colors={colors}
-      start={start}
-      end={end}
-      locations={locations}
-      style={style}
-      pointerEvents={pointerEvents}
-    >
-      {children}
-    </LinearGradient>
-  )
-}

package/src/shared/icons/keyboard/FrancIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { IconProps } from './icon.types'
-import Svg, { Text as SvgText } from 'react-native-svg'
-
-export const FrancIcon = ({ size = 20, color }: IconProps) => {
-  return (
-    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-      <SvgText
-        x="8"
-        y="12"
-        fill={color}
-        fontSize="10"
-        fontWeight="600"
-        textAnchor="middle"
-      >
-        Fr
-      </SvgText>
-    </Svg>
-  )
-}

package/src/shared/icons/keyboard/RappenIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { IconProps } from './icon.types'
-import Svg, { Text as SvgText } from 'react-native-svg'
-
-export const RappenIcon = ({ size = 20, color }: IconProps) => {
-  return (
-    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-      <SvgText
-        x="8"
-        y="12"
-        fill={color}
-        fontSize="8"
-        fontWeight="600"
-        textAnchor="middle"
-      >
-        Rp
-      </SvgText>
-    </Svg>
-  )
-}