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

package/src/features/fluency/components/fluency-solving/FluencySolvingHeader.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../i18n/i18n'
+import { useFluencyModePreset } from '../../hooks/useFluencyModePreset'
+import { XCloseIcon } from '../../../../shared/icons/XCloseIcon'
+
+type FluencySolvingHeaderProps = {
+  onClosePress?: () => void
+}
+
+export const FluencySolvingHeader = ({ onClosePress }: FluencySolvingHeaderProps) => {
+  const t = useText()
+  const { matrix, header, icon: OperatorIcon } = useFluencyModePreset()
+  const accentColor = header.streakColor.todayBorder
+
+  return (
+    <View style={styles.container}>
+      <Button
+        variant={ButtonVariant.SECONDARY}
+        size={ButtonSize.LARGE}
+        icon={<XCloseIcon />}
+        onPress={onClosePress}
+      />
+      <View style={[styles.operatorBadge, { backgroundColor: accentColor }]}>
+        <OperatorIcon color={COLORS.NEUTRAL_1} size={16} />
+      </View>
+      <Typography variant={HeadingVariants.H4} style={styles.title}>
+        {t(matrix.operatorName)}
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 76,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    ...SHADOWS[1],
+  },
+  operatorBadge: {
+    width: 32,
+    height: 32,
+    borderRadius: BORDER_RADIUS[200],
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  title: {
+    color: COLORS.NEUTRAL_10,
+    fontWeight: '700',
+  },
+})

package/src/features/fluency/components/fluency-solving/FluencySolvingProgress.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+
+type FluencySolvingProgressProps = {
+  total: number
+  activeIndex: number
+}
+
+export const FluencySolvingProgress = ({ total, activeIndex }: FluencySolvingProgressProps) => {
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: total }).map((_, index) => (
+        <View key={index} style={index === activeIndex ? styles.dotActive : styles.dot} />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SPACING[200],
+    paddingHorizontal: SPACING[600],
+    paddingVertical: 14,
+    justifyContent: 'center',
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: COLORS.NEUTRAL_4,
+  },
+  dotActive: {
+    width: 34,
+    height: 12,
+    backgroundColor: COLORS.NEUTRAL_10,
+    borderRadius: 9999,
+  },
+})

package/src/features/fluency/components/matrix/FluencyMatrix.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { MatrixLegend } from './components/MatrixLegend'
+import { MatrixFill } from './components/MatrixFill'
+
+export const FluencyMatrix = () => (
+  <View style={styles.container}>
+    <View style={styles.body}>
+      <MatrixFill />
+    </View>
+    <MatrixLegend />
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+    ...SHADOWS[1],
+  },
+  body: {
+    flex: 1,
+    padding: SPACING[300],
+    minHeight: 354,
+  },
+})

package/src/features/fluency/components/matrix/components/MatrixCell.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui'
+import {
+  getCellBackground,
+  getCellColorByScore,
+  getCellLabel,
+  getMasteryLevel,
+} from '../../../fluency.helpers'
+import { FluencyMasteryLevel } from '../../../fluency.constants'
+import { StarFillIcon } from '../../../assets/StarFillIcon'
+import type { FluencyModePreset } from '../../../fluency.types'
+
+type MatrixCellProps = {
+  row: number
+  col: number
+  score: number | null
+  mastery: FluencyModePreset['matrix']['mastery']
+}
+
+export const MatrixCell = ({ row, col, score, mastery }: MatrixCellProps) => {
+  const label = getCellLabel(row, col)
+  const isMastered = score !== null && getMasteryLevel(score) === FluencyMasteryLevel.MASTERED
+  const background =
+    score !== null ? getCellColorByScore(score, mastery) : getCellBackground(row, col)
+
+  return (
+    <View style={[styles.cell, { backgroundColor: background }]}>
+      {isMastered && <StarFillIcon />}
+      {label !== null && <Text style={styles.headerText}>{label}</Text>}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  cell: {
+    flex: 1,
+    borderRadius: BORDER_RADIUS[100],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerText: {
+    fontSize: 13,
+    color: COLORS.NEUTRAL_2,
+  },
+})

package/src/features/fluency/components/matrix/components/MatrixFill.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
+import { MatrixCell } from './MatrixCell'
+import { MATRIX_SIZE } from '../../../fluency.constants'
+import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
+
+const MOCK_SCORES: Record<string, number> = {
+  '1-1': 90,
+  '2-3': 70,
+  '3-5': 50,
+  '5-2': 30,
+  '4-4': 10,
+  '1-5': 85,
+  '3-3': 45,
+}
+
+export const MatrixFill = () => {
+  const { matrix } = useFluencyModePreset()
+
+  return (
+    <View style={styles.grid}>
+      {Array.from({ length: MATRIX_SIZE }, (_, row) => (
+        <View key={row} style={styles.row}>
+          {Array.from({ length: MATRIX_SIZE }, (_, col) => (
+            <MatrixCell
+              key={col}
+              row={row}
+              col={col}
+              score={MOCK_SCORES[`${row}-${col}`] ?? null}
+              mastery={matrix.mastery}
+            />
+          ))}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  grid: {
+    flex: 1,
+    gap: SPACING[50],
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    gap: SPACING[50],
+  },
+})

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

@@ -0,0 +1,102 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  PlayIcon,
+  SHADOWS,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { useFluencyModePreset } from '../../../hooks/useFluencyModePreset'
+import { useFluency } from '../../../context/FluencyContext'
+import { useText } from '../../../../../i18n/i18n'
+
+const LEGEND_DOT_SIZE = 14
+const LEGEND_DOT_BORDER_RADIUS = 3
+const LEGEND_LABEL_FONT_SIZE = 12
+
+type MatrixLegendProps = {}
+
+export const MatrixLegend = ({}: MatrixLegendProps) => {
+  const t = useText()
+  const { matrix, buttonColor, legendItems } = useFluencyModePreset()
+  const { onPracticePress } = useFluency()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.legendItems}>
+        {legendItems.map((item) => (
+          <View key={item.label} style={styles.legendItem}>
+            <View
+              style={[
+                styles.legendDot,
+                { backgroundColor: item.color },
+                item.withBorder && styles.legendDotBorder,
+              ]}
+            />
+            <Text style={styles.legendLabel}>{item.label}</Text>
+          </View>
+        ))}
+      </View>
+      <Button
+        onPress={onPracticePress}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.MEDIUM}
+        colorScheme={buttonColor}
+        icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
+        raiseLevel={3}
+        style={{ container: styles.practiceButton, text: styles.practiceButtonText }}
+      >
+        {`${t('student.fluency.practice')} ${t(matrix.operatorName)}`}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 65,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderBottomColor: COLORS.NEUTRAL_5,
+    paddingHorizontal: SPACING[300],
+    paddingVertical: SPACING[300],
+    borderTopLeftRadius: BORDER_RADIUS[400],
+    borderTopRightRadius: BORDER_RADIUS[400],
+    ...SHADOWS[1],
+  },
+  legendItems: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[400],
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[150],
+  },
+  legendDot: {
+    width: LEGEND_DOT_SIZE,
+    height: LEGEND_DOT_SIZE,
+    borderRadius: LEGEND_DOT_BORDER_RADIUS,
+  },
+  legendDotBorder: {
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+  legendLabel: {
+    fontSize: LEGEND_LABEL_FONT_SIZE,
+    color: COLORS.NEUTRAL_7,
+  },
+  practiceButton: {
+    alignSelf: 'center',
+  },
+  practiceButtonText: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/fluency/components/select-math-operator/MathOperatorRow.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, SelectOption, SelectOptionColor, SPACING } from '@magmamath/react-native-ui'
+import { ProgressBar } from './ProgressBar'
+
+export type MathOperatorRowProps = {
+  title: string
+  icon: ReactNode
+  progress: number
+  color: SelectOptionColor
+  selected: boolean
+  onSelect: () => void
+  showDivider?: boolean
+}
+
+export const MathOperatorRow = ({
+  title,
+  icon,
+  progress,
+  color,
+  selected,
+  onSelect,
+  showDivider = true,
+}: MathOperatorRowProps) => (
+  <View>
+    <SelectOption title={title} icon={icon} color={color} selected={selected} onPress={onSelect} />
+    <ProgressBar progress={progress} color={color} />
+    {showDivider && <View style={styles.divider} />}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.NEUTRAL_3,
+    marginVertical: SPACING[600],
+  },
+})

package/src/features/fluency/components/select-math-operator/ProgressBar.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  SelectOptionColor,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+type ProgressShades = {
+  low: string
+  medium: string
+  high: string
+  max: string
+}
+
+const PROGRESS_COLOR_SHADES: Record<SelectOptionColor, ProgressShades> = {
+  [SelectOptionColor.GREEN]: {
+    low: COLORS.GREEN_2,
+    medium: COLORS.GREEN_3,
+    high: COLORS.GREEN_6,
+    max: COLORS.GREEN_7,
+  },
+  [SelectOptionColor.ORANGE]: {
+    low: COLORS.ORANGE_2,
+    medium: COLORS.ORANGE_3,
+    high: COLORS.ORANGE_6,
+    max: COLORS.ORANGE_7,
+  },
+  [SelectOptionColor.BLUE]: {
+    low: COLORS.BLUE_2,
+    medium: COLORS.BLUE_3,
+    high: COLORS.BLUE_6,
+    max: COLORS.BLUE_7,
+  },
+  [SelectOptionColor.RED]: {
+    low: COLORS.RED_2,
+    medium: COLORS.RED_3,
+    high: COLORS.RED_6,
+    max: COLORS.RED_7,
+  },
+  [SelectOptionColor.YELLOW]: {
+    low: COLORS.YELLOW_2,
+    medium: COLORS.YELLOW_3,
+    high: COLORS.YELLOW_6,
+    max: COLORS.YELLOW_7,
+  },
+  [SelectOptionColor.PURPLE]: {
+    low: COLORS.PURPLE_2,
+    medium: COLORS.PURPLE_3,
+    high: COLORS.PURPLE_6,
+    max: COLORS.PURPLE_7,
+  },
+  [SelectOptionColor.GREY]: {
+    low: COLORS.NEUTRAL_2,
+    medium: COLORS.NEUTRAL_3,
+    high: COLORS.NEUTRAL_6,
+    max: COLORS.NEUTRAL_7,
+  },
+  [SelectOptionColor.SUNSET]: {
+    low: COLORS.RED_2,
+    medium: COLORS.RED_3,
+    high: COLORS.RED_6,
+    max: COLORS.RED_7,
+  },
+}
+
+const PRIMARY_COLOR_MAP: Record<SelectOptionColor, string> = {
+  [SelectOptionColor.GREEN]: COLORS.PRIMARY_GREEN,
+  [SelectOptionColor.ORANGE]: COLORS.PRIMARY_ORANGE,
+  [SelectOptionColor.BLUE]: COLORS.PRIMARY_BLUE,
+  [SelectOptionColor.RED]: COLORS.PRIMARY_RED,
+  [SelectOptionColor.YELLOW]: COLORS.PRIMARY_YELLOW,
+  [SelectOptionColor.PURPLE]: COLORS.PRIMARY_PURPLE,
+  [SelectOptionColor.GREY]: COLORS.NEUTRAL_6,
+  [SelectOptionColor.SUNSET]: COLORS.PRIMARY_RED,
+}
+
+const getFillColor = (shades: ProgressShades, progress: number): string => {
+  if (progress <= 10) return shades.low
+  if (progress <= 20) return shades.medium
+  if (progress <= 80) return shades.high
+  return shades.max
+}
+
+export type ProgressBarProps = {
+  progress: number
+  color: SelectOptionColor
+}
+
+export const ProgressBar = ({ progress, color = SelectOptionColor.GREEN }: ProgressBarProps) => {
+  const normalized = Math.round(Math.min(100, Math.max(0, progress)))
+  const fillColor = getFillColor(PROGRESS_COLOR_SHADES[color], normalized)
+  const textColor = PRIMARY_COLOR_MAP[color]
+  return (
+    <View style={styles.container}>
+      <View style={styles.track}>
+        <View style={[styles.fill, { backgroundColor: fillColor, width: `${normalized}%` }]} />
+      </View>
+      <Typography variant={HeadingVariants.H10} style={{ color: textColor }}>
+        {normalized}%
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginTop: SPACING[200],
+    gap: SPACING[200],
+    alignItems: 'center',
+  },
+  track: {
+    flex: 1,
+    height: 18,
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderRadius: BORDER_RADIUS[450],
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: BORDER_RADIUS[450],
+  },
+})

package/src/features/fluency/components/select-math-operator/SelectMathOperator.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { FLUENCY_MODES } from '../../fluency.constants'
+import { MathOperatorRow } from './MathOperatorRow'
+import { useFluency } from '../../context/FluencyContext'
+import { useText } from '../../../../i18n/i18n'
+
+export const SelectMathOperator = () => {
+  const t = useText()
+  const { model, onModeSelectPress } = useFluency()
+  const fluencyMode = useUnit(model.$mode)
+
+  return (
+    <View style={styles.container}>
+      {FLUENCY_MODES.map(({ mode, label, icon: Icon, select }, index) => {
+        const isSelectedMode = mode === fluencyMode
+        return (
+          <MathOperatorRow
+            key={mode}
+            title={t(label)}
+            icon={<Icon color={isSelectedMode ? COLORS.NEUTRAL_1 : undefined} />}
+            // progress={0}
+            progress={Math.random() * 100}
+            color={select}
+            selected={isSelectedMode}
+            onSelect={() => {
+              model.setMode(mode)
+              onModeSelectPress?.(mode)
+            }}
+            showDivider={index < FLUENCY_MODES.length - 1}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 270,
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[200],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1],
+  },
+})

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { MathFlashcard, FlashcardLayout } from './MathFlashcard'
+
+export type FlashcardExample = {
+  left: string
+  right: string
+}
+
+const CARD_LAYOUTS: FlashcardLayout[] = [
+  {
+    card: { width: 146, height: 88, radius: 6 },
+    answer: { width: 20, height: 29, radius: 4 },
+    fontSize: 26,
+    position: { right: 283, top: 31, zIndex: 1 },
+    rotation: '21.3deg',
+  },
+  {
+    card: { width: 195, height: 118, radius: 9 },
+    answer: { width: 27, height: 38, radius: 6 },
+    fontSize: 35,
+    position: { right: 148, top: -6, zIndex: 2 },
+    rotation: '-15.43deg',
+  },
+  {
+    card: { width: 260, height: 157, radius: 12 },
+    answer: { width: 36, height: 51, radius: 8 },
+    fontSize: 46,
+    position: { right: 0, top: -11, zIndex: 3 },
+    rotation: '8.83deg',
+  },
+]
+
+type BannerFlashcardsProps = {
+  examples: FlashcardExample[]
+}
+
+export const BannerFlashcards = ({ examples }: BannerFlashcardsProps) => (
+  <>
+    {CARD_LAYOUTS.map((layout, index) => {
+      const example = examples[index]
+      if (!example) return null
+      return <MathFlashcard key={index} left={example.left} right={example.right} layout={layout} />
+    })}
+  </>
+)

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { COLORS, SHADOWS } from '@magmamath/react-native-ui'
+
+export type FlashcardLayout = {
+  card: { width: number; height: number; radius: number }
+  answer: { width: number; height: number; radius: number }
+  fontSize: number
+  position: { right: number; top: number; zIndex: number }
+  rotation: string
+}
+
+type MathFlashcardProps = {
+  left: string
+  right: string
+  layout: FlashcardLayout
+}
+
+export const MathFlashcard = ({ left, right, layout }: MathFlashcardProps) => (
+  <View
+    style={[
+      styles.card,
+      {
+        width: layout.card.width,
+        height: layout.card.height,
+        borderRadius: layout.card.radius,
+        right: layout.position.right,
+        top: layout.position.top,
+        zIndex: layout.position.zIndex,
+        transform: [{ rotate: layout.rotation }],
+      },
+    ]}
+  >
+    <View style={styles.row}>
+      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{left}</Text>
+      <View
+        style={[
+          styles.answerBox,
+          { width: layout.answer.width, height: layout.answer.height, borderRadius: layout.answer.radius },
+        ]}
+      />
+      <Text style={[styles.text, { fontSize: layout.fontSize }]}>{right}</Text>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  card: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 1,
+  },
+  text: {
+    fontWeight: 'bold',
+    color: COLORS.BLACK,
+  },
+  answerBox: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5,
+  },
+})