@magmamath/students-features 1.3.25 → 1.3.26-rc.1

package/src/features/fluency/components/start-banner/StartBanner.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  Typography,
+  PlayIcon,
+  COLORS,
+  SHADOWS,
+  SPACING,
+  FONT_FAMILY,
+  BORDER_RADIUS,
+} from '@magmamath/react-native-ui'
+import { BannerFlashcards } from './BannerFlashcards'
+import { useFluency } from '../../context/FluencyContext'
+import { useText } from '../../../../i18n/i18n'
+import { SpringIcon } from '../../assets/SpringIcon'
+
+export const StartBanner = () => {
+  const t = useText()
+  const { onStartPress } = useFluency()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <View style={styles.buttonGroup}>
+          <Button
+            onPress={onStartPress}
+            disabled={false}
+            isLoading={false}
+            isActive={false}
+            icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
+            variant={ButtonVariant.PRIMARY}
+            size={ButtonSize.LARGE}
+            colorScheme={ButtonColor.YELLOW}
+            raiseLevel={6}
+            style={{ container: styles.button }}
+          >
+            {t('student.fluency.startPractice')}
+          </Button>
+          <Typography style={styles.buttonSubtitle}>0 {t('student.fluency.cardsReady')}</Typography>
+          <View style={styles.springIcon}>
+            <SpringIcon />
+          </View>
+        </View>
+      </View>
+
+      <BannerFlashcards
+        examples={[
+          { left: '15*', right: '=30' },
+          { left: '10-', right: '=25' },
+          { left: '5+', right: '=19' },
+        ]}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1],
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    zIndex: 4,
+  },
+  buttonGroup: {
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  button: {
+    minWidth: 220,
+    maxWidth: 315,
+    textTransform: 'uppercase',
+  },
+  buttonSubtitle: {
+    fontSize: 13,
+    fontWeight: '400',
+    color: COLORS.BLACK,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  flashcard: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  springIcon: {
+    position: 'absolute',
+    bottom: -28,
+    right: 0,
+    marginTop: 6,
+    alignSelf: 'flex-end',
+  },
+})

package/src/features/fluency/context/FluencyContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+import type { FluencyModel } from '../model/FluencyModel'
+import type { FluencyMode } from '../fluency.constants'
+
+export type FluencyContextValue = {
+  model: FluencyModel
+  onStartPress?: () => void
+  onPracticePress?: () => void
+  onModeSelectPress?: (mode: FluencyMode) => void
+}
+
+const FluencyContext = createContext<FluencyContextValue | null>(null)
+
+export const useFluency = (): FluencyContextValue => {
+  const value = useContext(FluencyContext)
+  if (!value) throw new Error('useFluency must be used within FluencyProvider')
+  return value
+}
+
+export const FluencyProvider = FluencyContext.Provider

package/src/features/fluency/fluency.constants.ts

@@ -0,0 +1,83 @@
+import { CrossIcon, MinusIcon, PlusIcon } from '@magmamath/react-native-ui'
+import { ButtonColor, COLORS, SelectOptionColor } from '@magmamath/react-native-ui'
+import { createFluencyMode } from './fluency.helpers'
+import type { FluencyColorPalette, FluencyModeConfig, FluencyModePreset } from './fluency.types'
+import { DivideIcon } from './assets/DivideIcon'
+
+export const MATRIX_SIZE = 21
+export const MAX_INPUT_LENGTH = 3
+
+export enum FluencyMode {
+  ADDITION = 'ADDITION',
+  SUBTRACTION = 'SUBTRACTION',
+  MULTIPLICATION = 'MULTIPLICATION',
+  DIVISION = 'DIVISION',
+}
+
+export enum FluencyMasteryLevel {
+  LEARNING = 'learning',
+  GROWING = 'growing',
+  STRONG = 'strong',
+  MASTERED = 'mastered',
+}
+
+export enum FluencyColorFamily {
+  GREEN = 'GREEN',
+  ORANGE = 'ORANGE',
+  BLUE = 'BLUE',
+  PURPLE = 'PURPLE',
+}
+
+export const COLOR_FAMILY_PALETTES: Record<FluencyColorFamily, FluencyColorPalette> = {
+  [FluencyColorFamily.GREEN]: {
+    shades: [COLORS.GREEN_2, COLORS.GREEN_3, COLORS.PRIMARY_GREEN, COLORS.GREEN_6],
+    button: ButtonColor.GREEN,
+    select: SelectOptionColor.GREEN,
+  },
+  [FluencyColorFamily.ORANGE]: {
+    shades: [COLORS.ORANGE_2, COLORS.ORANGE_3, COLORS.PRIMARY_ORANGE, COLORS.ORANGE_6],
+    button: ButtonColor.ORANGE,
+    select: SelectOptionColor.ORANGE,
+  },
+  [FluencyColorFamily.BLUE]: {
+    shades: [COLORS.BLUE_2, COLORS.BLUE_3, COLORS.PRIMARY_BLUE, COLORS.BLUE_6],
+    button: ButtonColor.BLUE,
+    select: SelectOptionColor.BLUE,
+  },
+  [FluencyColorFamily.PURPLE]: {
+    shades: [COLORS.PURPLE_2, COLORS.PURPLE_3, COLORS.PRIMARY_PURPLE, COLORS.PURPLE_6],
+    button: ButtonColor.PURPLE,
+    select: SelectOptionColor.PURPLE,
+  },
+}
+
+export const FLUENCY_MODES: readonly FluencyModeConfig[] = [
+  createFluencyMode({
+    mode: FluencyMode.ADDITION,
+    label: 'student.fluency.addition',
+    icon: PlusIcon,
+    colorFamily: FluencyColorFamily.GREEN,
+  }),
+  createFluencyMode({
+    mode: FluencyMode.SUBTRACTION,
+    label: 'student.fluency.subtraction',
+    icon: MinusIcon,
+    colorFamily: FluencyColorFamily.ORANGE,
+  }),
+  createFluencyMode({
+    mode: FluencyMode.MULTIPLICATION,
+    label: 'student.fluency.multiplication',
+    icon: CrossIcon,
+    colorFamily: FluencyColorFamily.BLUE,
+  }),
+  createFluencyMode({
+    mode: FluencyMode.DIVISION,
+    label: 'student.fluency.division',
+    icon: DivideIcon,
+    colorFamily: FluencyColorFamily.PURPLE,
+  }),
+]
+
+export const FLUENCY_MODE_PRESETS: Record<FluencyMode, FluencyModePreset> = Object.fromEntries(
+  FLUENCY_MODES.map(({ mode, preset }) => [mode, preset]),
+) as Record<FluencyMode, FluencyModePreset>

package/src/features/fluency/fluency.helpers.ts

@@ -0,0 +1,71 @@
+import type { ComponentType } from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+import {
+  FluencyColorFamily,
+  FluencyMasteryLevel,
+  FluencyMode,
+  COLOR_FAMILY_PALETTES,
+} from './fluency.constants'
+import type { FluencyModeConfig, FluencyModePreset } from './fluency.types'
+import type { TranslationKey } from '../../i18n/i18n'
+
+// TODO: Threshold values to be aligned with BE response schema.
+export const getMasteryLevel = (score: number): FluencyMasteryLevel => {
+  if (score >= 80) return FluencyMasteryLevel.MASTERED
+  if (score >= 60) return FluencyMasteryLevel.STRONG
+  if (score >= 40) return FluencyMasteryLevel.GROWING
+  return FluencyMasteryLevel.LEARNING
+}
+
+export const getCellColorByScore = (
+  score: number,
+  mastery: FluencyModePreset['matrix']['mastery'],
+): string => mastery[getMasteryLevel(score)]
+
+export const getCellBackground = (row: number, col: number): string => {
+  if (row === 0 && col === 0) return COLORS.NEUTRAL_2
+  if (row === 0 || col === 0) return COLORS.NEUTRAL_5
+  return COLORS.NEUTRAL_2
+}
+
+export const getCellLabel = (row: number, col: number): number | null => {
+  if (row === 0 && col === 0) return null
+  if (row === 0) return col
+  if (col === 0) return row
+  return null
+}
+
+type CreateFluencyModeParams = {
+  mode: FluencyMode
+  label: TranslationKey
+  icon: ComponentType<{ color?: string }>
+  colorFamily: FluencyColorFamily
+}
+
+export const createFluencyMode = ({
+  mode,
+  label,
+  icon,
+  colorFamily,
+}: CreateFluencyModeParams): FluencyModeConfig => {
+  const palette = COLOR_FAMILY_PALETTES[colorFamily]
+  const [learning, growing, strong, mastered] = palette.shades
+
+  return {
+    mode,
+    label,
+    icon,
+    select: palette.select,
+    preset: {
+      buttonColor: palette.button,
+      icon,
+      header: {
+        streakColor: { gained: growing, todayBorder: strong },
+      },
+      matrix: {
+        operatorName: label,
+        mastery: { learning, growing, strong, mastered },
+      },
+    },
+  }
+}

package/src/features/fluency/fluency.types.ts

@@ -0,0 +1,41 @@
+import type { ComponentType } from 'react'
+import type { ButtonColor, SelectOptionColor } from '@magmamath/react-native-ui'
+import type { FluencyMode } from './fluency.constants'
+import type { TranslationKey } from '../../i18n/i18n'
+
+export type LegendItem = {
+  label: string
+  color: string
+  withBorder?: boolean
+}
+
+export type FluencyColorPalette = {
+  shades: readonly [string, string, string, string]
+  button: ButtonColor
+  select: SelectOptionColor
+}
+
+export type FluencyModePreset = {
+  buttonColor: ButtonColor
+  icon: ComponentType<{ color?: string; size?: number }>
+  header: {
+    streakColor: { gained: string; todayBorder: string }
+  }
+  matrix: {
+    operatorName: TranslationKey
+    mastery: {
+      learning: string
+      growing: string
+      strong: string
+      mastered: string
+    }
+  }
+}
+
+export type FluencyModeConfig = {
+  mode: FluencyMode
+  label: TranslationKey
+  icon: ComponentType<{ color?: string }>
+  select: SelectOptionColor
+  preset: FluencyModePreset
+}

package/src/features/fluency/hooks/useFluencyModePreset.ts

@@ -0,0 +1,24 @@
+import { useUnit } from 'effector-react'
+import { COLORS } from '@magmamath/react-native-ui'
+import { FLUENCY_MODE_PRESETS, FluencyMasteryLevel } from '../fluency.constants'
+import type { FluencyModePreset, LegendItem } from '../fluency.types'
+import { useFluency } from '../context/FluencyContext'
+import { useText } from '../../../i18n/i18n'
+
+type UseFluencyModePresetResult = FluencyModePreset & { legendItems: LegendItem[] }
+
+export const useFluencyModePreset = (): UseFluencyModePresetResult => {
+  const t = useText()
+  const mode = useUnit(useFluency().model.$mode)
+  const preset = FLUENCY_MODE_PRESETS[mode]
+
+  const legendItems: LegendItem[] = [
+    { label: t('student.fluency.notStarted'), color: COLORS.NEUTRAL_2, withBorder: true },
+    { label: t('student.fluency.masteryLearning'), color: preset.matrix.mastery[FluencyMasteryLevel.LEARNING] },
+    { label: t('student.fluency.masteryGrowing'), color: preset.matrix.mastery[FluencyMasteryLevel.GROWING] },
+    { label: t('student.fluency.masteryStrong'), color: preset.matrix.mastery[FluencyMasteryLevel.STRONG] },
+    { label: t('student.fluency.masteryMastered'), color: preset.matrix.mastery[FluencyMasteryLevel.MASTERED] },
+  ]
+
+  return { ...preset, legendItems }
+}

package/src/features/fluency/index.ts

@@ -0,0 +1,6 @@
+export * from './fluency.constants'
+export * from './fluency.types'
+export * from './fluency.helpers'
+export { Fluency } from './components/Fluency'
+export { FluencySolving } from './components/FluencySolving'
+export { FluencyModel } from './model/FluencyModel'

package/src/features/fluency/model/FluencyApiModel.ts

@@ -0,0 +1,5 @@
+type FluencyApiProps = {}
+
+export class FluencyApiModel {
+  constructor({}: FluencyApiProps) {}
+}

package/src/features/fluency/model/FluencyDaysStreakModel.ts

@@ -0,0 +1 @@
+export class FluencyDaysStreakModel {}

package/src/features/fluency/model/FluencyInputModel.ts

@@ -0,0 +1,21 @@
+import { createEffect, createEvent, createStore } from 'effector'
+import { MAX_INPUT_LENGTH } from '../fluency.constants'
+
+type SetPayload = { value: number } | { erase: 'latest' | 'all' }
+
+export class FluencyInputModel {
+  public readonly set = createEvent<SetPayload>()
+  public readonly $state = createStore('').on(this.set, (input, payload) => {
+    const isEraseAction = 'erase' in payload
+    if (isEraseAction) return payload.erase === 'all' ? '' : input.slice(0, -1)
+
+    const isDisabled = input.length >= MAX_INPUT_LENGTH || input === '0'
+    if (isDisabled) return input
+
+    return input + payload.value
+  })
+
+  public readonly submitFx = createEffect(() => {
+    console.log('submit')
+  })
+}

package/src/features/fluency/model/FluencyMatrixModel.ts

@@ -0,0 +1 @@
+export class FluencyMatrixModel {}

package/src/features/fluency/model/FluencyModel.ts

@@ -0,0 +1,30 @@
+import { createEvent, restore } from 'effector'
+import { FluencyMode } from '../fluency.constants'
+import { FluencyDaysStreakModel } from './FluencyDaysStreakModel'
+import { FluencyMatrixModel } from './FluencyMatrixModel'
+import { FluencyApiModel } from './FluencyApiModel'
+import { FluencySolvingModel } from './FluencySolvingModel'
+import { FluencyInputModel } from './FluencyInputModel'
+
+type FluencyModelProps = {
+  api: {}
+}
+
+export class FluencyModel {
+  public readonly api: FluencyApiModel
+  public readonly streak: FluencyDaysStreakModel
+  public readonly matrix: FluencyMatrixModel
+  public readonly solving: FluencySolvingModel
+  public readonly input: FluencyInputModel
+
+  public readonly setMode = createEvent<FluencyMode>()
+  public readonly $mode = restore(this.setMode, FluencyMode.ADDITION)
+
+  constructor({ api }: FluencyModelProps) {
+    this.api = new FluencyApiModel(api)
+    this.streak = new FluencyDaysStreakModel()
+    this.matrix = new FluencyMatrixModel()
+    this.solving = new FluencySolvingModel()
+    this.input = new FluencyInputModel()
+  }
+}

package/src/features/fluency/model/FluencySolvingModel.ts

@@ -0,0 +1 @@
+export class FluencySolvingModel {}

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

@@ -54,6 +54,29 @@
     "time": "Practice time",
     "title": "Practice & Progress"
   },
+  "student": {
+    "fluency": {
+      "addition": "Addition",
+      "cardsReady": "new cards ready",
+      "dayFriday": "F",
+      "dayMonday": "M",
+      "dayThursday": "T",
+      "dayTuesday": "T",
+      "dayWednesday": "W",
+      "division": "Division",
+      "masteryGrowing": "Growing",
+      "masteryLearning": "Learning",
+      "masteryMastered": "Mastered",
+      "masteryStrong": "Strong",
+      "multiplication": "Multiplication",
+      "notStarted": "Not started",
+      "practice": "Practice",
+      "practiceThisWeek": "Practice this week",
+      "startPractice": "Start fluency practice",
+      "subtraction": "Subtraction",
+      "title": "Fluency practice"
+    }
+  },
   "teacherFeedback": {
     "noComments": "No comments yet"
   },

package/src/index.ts

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