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

package/src/features/fluency/assets/DivideIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS } from '@magmamath/react-native-ui'
+
+type DivideIconProps = {
+  size?: number
+  color?: string
+}
+
+export const DivideIcon = ({ size = 20, color = COLORS.NEUTRAL_9 }: DivideIconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 .22a.75.75 0 010 1.06L1.28 16a.75.75 0 01-1.06-1.06L14.94.22a.75.75 0 011.06 0z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/assets/SpringIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+export const SpringIcon = () => {
+  return (
+    <Svg width={89} height={28} viewBox="0 0 89 28" fill="none">
+      <Path
+        opacity={0.3}
+        d="M78.6 22.803c5.16-6.21 7.39-12.429 7.39-12.429s-9.147.354-13.334-3.964m4.843 8.342C40.345 31.653 33.237 6.535 44.312 2.88 55.388-.774 56.293 23.042 28.317 24.918 17.69 25.63 8.093 23.18 2.5 18.683"
+        stroke="#33334D"
+        strokeWidth={5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/assets/StarFillIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+export const StarFillIcon = () => {
+  return (
+    <Svg width={10} height={11} viewBox="0 0 10 11" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.767.432a.89.89 0 00-1.526 0L2.925 2.625l-2.25.563A.89.89 0 00.26 4.68l1.664 1.664-.553 2.626a.89.89 0 001.287.97l2.34-1.24 1.55.862.824.412a.89.89 0 001.269-.98l-.559-2.65L9.747 4.68a.89.89 0 00-.413-1.492l-2.251-.563L5.767.432z"
+        fill="#33334D"
+        fillOpacity={0.25}
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/components/Fluency.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { View, StyleSheet, useWindowDimensions } from 'react-native'
+import {
+  Button,
+  ButtonVariant,
+  Typography,
+  HeadingVariants,
+  SPACING,
+  COLORS,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../i18n/i18n'
+import { StartBanner } from './start-banner/StartBanner'
+import { DayStreakCounter } from './day-streak-counter/DayStreakCounter'
+import { SelectMathOperator } from './select-math-operator/SelectMathOperator'
+import { FluencyMatrix } from './matrix/FluencyMatrix'
+import type { FluencyModel } from '../model/FluencyModel'
+import { FluencyProvider } from '../context/FluencyContext'
+import type { FluencyMode } from '../fluency.constants'
+import { isWeb } from '../../../shared/common.constants'
+import { MenuIcon } from '../../../shared/icons/MenuIcon'
+import { BURGER_MENU_BREAKPOINT } from '@magmamath/students-features'
+
+type FluencyProps = {
+  model: FluencyModel
+  onMenuPress?: () => void
+  onStartPress?: () => void
+  onPracticePress?: () => void
+  onModeSelectPress?: (mode: FluencyMode) => void
+}
+
+export const Fluency = ({
+  model,
+  onMenuPress,
+  onStartPress,
+  onPracticePress,
+  onModeSelectPress,
+}: FluencyProps) => {
+  const t = useText()
+  const dimensions = useWindowDimensions()
+  const withMenuButton = isWeb && dimensions.width <= BURGER_MENU_BREAKPOINT
+
+  return (
+    <FluencyProvider value={{ model, onStartPress, onPracticePress, onModeSelectPress }}>
+      <View style={styles.container}>
+        <View style={styles.titleRow}>
+          {withMenuButton && (
+            <View style={styles.burgerMenu}>
+              <Button
+                onPress={onMenuPress}
+                variant={ButtonVariant.TERTIARY}
+                icon={<MenuIcon size={24} />}
+              />
+            </View>
+          )}
+          <Typography variant={HeadingVariants.H2} style={styles.title}>
+            {t('student.fluency.title')}
+          </Typography>
+        </View>
+
+        <View style={styles.header}>
+          <StartBanner />
+          <DayStreakCounter />
+        </View>
+
+        <View style={styles.matrixContainer}>
+          <View style={styles.operatorWrapper}>
+            <SelectMathOperator />
+          </View>
+          <FluencyMatrix />
+        </View>
+      </View>
+    </FluencyProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  burgerMenu: {
+    marginRight: SPACING[200],
+  },
+  title: { color: COLORS.NEUTRAL_9 },
+  header: {
+    height: 182,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[400],
+    zIndex: 1,
+  },
+  matrixContainer: {
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[200],
+  },
+  operatorWrapper: {
+    alignSelf: 'flex-start',
+  },
+})

package/src/features/fluency/components/FluencySolving.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { COLORS } from '@magmamath/react-native-ui'
+import type { FluencyModel } from '../model/FluencyModel'
+import { FluencyProvider } from '../context/FluencyContext'
+import { FluencySolvingHeader } from './fluency-solving/FluencySolvingHeader'
+import { FluencySolvingProgress } from './fluency-solving/FluencySolvingProgress'
+import { FluencySolvingCard } from './fluency-solving/FluencySolvingCard'
+
+type FluencySolvingProps = {
+  model: FluencyModel
+  onClosePress?: () => void
+}
+
+export const FluencySolving = ({ model, onClosePress }: FluencySolvingProps) => {
+  return (
+    <FluencyProvider value={{ model }}>
+      <View style={styles.container}>
+        <FluencySolvingHeader onClosePress={onClosePress} />
+        <FluencySolvingProgress total={20} activeIndex={4} />
+        <FluencySolvingCard />
+      </View>
+    </FluencyProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+})

package/src/features/fluency/components/day-streak-counter/DayStreak.tsx

@@ -0,0 +1,82 @@
+import {
+  BORDER_RADIUS,
+  COLORS,
+  CorrectIcon,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import React from 'react'
+import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
+import type { FluencyModePreset } from '../../fluency.types'
+
+const CIRCLE_SIZE = SPACING[800]
+const CIRCLE_BORDER_RADIUS = BORDER_RADIUS[400]
+
+type StreakStatus = 'missed' | 'gained' | 'today'
+
+type StreakDayProps = {
+  label: string
+  status: StreakStatus
+  streakColor: FluencyModePreset['header']['streakColor']
+}
+
+type StatusStyle = {
+  circle: ViewStyle
+  label: TextStyle
+  hasIcon: boolean
+}
+
+const getStatusStyle = (
+  status: StreakStatus,
+  streakColor: FluencyModePreset['header']['streakColor']
+): StatusStyle => {
+  if (status === 'gained') {
+    return {
+      circle: { backgroundColor: streakColor.gained, borderWidth: 1, borderColor: COLORS.NEUTRAL_3 },
+      label: { color: streakColor.gained },
+      hasIcon: true,
+    }
+  }
+  if (status === 'today') {
+    return {
+      circle: { backgroundColor: COLORS.NEUTRAL_2, borderWidth: 3, borderColor: streakColor.todayBorder },
+      label: { color: streakColor.todayBorder },
+      hasIcon: false,
+    }
+  }
+  return {
+    circle: { backgroundColor: COLORS.NEUTRAL_2, borderWidth: 1, borderColor: COLORS.NEUTRAL_3 },
+    label: { color: COLORS.NEUTRAL_4 },
+    hasIcon: false,
+  }
+}
+
+export const StreakDay = ({ label, status, streakColor }: StreakDayProps) => {
+  const { circle, label: labelStyle, hasIcon } = getStatusStyle(status, streakColor)
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.circle, circle]}>
+        {hasIcon && <CorrectIcon color={COLORS.NEUTRAL_1} />}
+      </View>
+      <Typography variant={HeadingVariants.H3} style={labelStyle}>
+        {label}
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  circle: {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    borderRadius: CIRCLE_BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/features/fluency/components/day-streak-counter/DayStreakCounter.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui'
+import { StreakDay } from './DayStreak'
+import { useFluencyModePreset } from '../../hooks/useFluencyModePreset'
+import { useText } from '../../../../i18n/i18n'
+
+export const DayStreakCounter = () => {
+  const t = useText()
+  const { header } = useFluencyModePreset()
+
+  return (
+    <View style={styles.container}>
+      <Typography style={styles.label}>{t('student.fluency.practiceThisWeek')}</Typography>
+
+      <View style={styles.streakDays}>
+        {/* TODO: Replace hardcoded days and statuses with real streak data from the model */}
+        <StreakDay
+          label={t('student.fluency.dayMonday')}
+          status="gained"
+          streakColor={header.streakColor}
+        />
+        <StreakDay
+          label={t('student.fluency.dayTuesday')}
+          status="gained"
+          streakColor={header.streakColor}
+        />
+        <StreakDay
+          label={t('student.fluency.dayWednesday')}
+          status="missed"
+          streakColor={header.streakColor}
+        />
+        <StreakDay
+          label={t('student.fluency.dayThursday')}
+          status="today"
+          streakColor={header.streakColor}
+        />
+        <StreakDay
+          label={t('student.fluency.dayFriday')}
+          status="gained"
+          streakColor={header.streakColor}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: 230,
+    paddingVertical: SPACING[200],
+    paddingHorizontal: SPACING[400],
+    borderRadius: BORDER_RADIUS[300],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1],
+  },
+  label: {
+    fontSize: SPACING[300],
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_8,
+  },
+  streakDays: {
+    flexDirection: 'row',
+    marginTop: 10,
+    gap: SPACING[200],
+  },
+})

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

@@ -0,0 +1,115 @@
+import React, { ComponentType } from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+type FluencyEquationCardProps = {
+  accentColor: string
+  OperatorIcon: ComponentType<{ color?: string; size?: number }>
+  input: string
+}
+
+export const FluencyEquationCard = ({
+  accentColor,
+  OperatorIcon,
+  input,
+}: FluencyEquationCardProps) => {
+  const answerTextStyle = [styles.number, styles.answerText, { color: accentColor }]
+
+  return (
+    <View style={styles.stack}>
+      <View style={[styles.cardBase, styles.cardLayer2]} />
+      <View style={[styles.cardBase, styles.cardLayer1]} />
+      <View style={[styles.cardBase, styles.cardFront]}>
+        <Typography variant={HeadingVariants.H9} style={styles.cardLabel}>
+          Type your answer
+        </Typography>
+
+        <View style={styles.equationRow}>
+          <Typography style={styles.number}>6</Typography>
+          <OperatorIcon color={accentColor} size={36} />
+          <Typography style={styles.number}>6</Typography>
+          <Typography style={styles.equals}>=</Typography>
+
+          <View style={styles.answerBox}>
+            <Typography style={answerTextStyle}>{input}</Typography>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const CARD_HEIGHT = 260
+
+const styles = StyleSheet.create({
+  stack: {
+    width: '100%',
+    maxWidth: 560,
+  },
+  cardBase: {
+    height: CARD_HEIGHT,
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[5],
+  },
+  cardLayer2: {
+    position: 'absolute',
+    top: 24,
+    left: 40,
+    right: 40,
+  },
+  cardLayer1: {
+    position: 'absolute',
+    top: 12,
+    left: 20,
+    right: 20,
+    ...SHADOWS[5],
+  },
+  cardFront: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 1.3,
+    marginBottom: SPACING[300],
+    color: COLORS.NEUTRAL_7,
+  },
+  equationRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[300],
+    marginTop: SPACING[600],
+  },
+  number: {
+    fontSize: 60,
+    color: COLORS.NEUTRAL_10,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  equals: {
+    fontSize: 60,
+    color: COLORS.NEUTRAL_7,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  answerBox: {
+    width: 100,
+    height: 44,
+    alignItems: 'center',
+    borderBottomWidth: 8,
+    borderBottomColor: COLORS.NEUTRAL_10,
+  },
+  answerText: {
+    position: 'absolute',
+  },
+})

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

@@ -0,0 +1,150 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  ButtonStates,
+  COLORS,
+  FONT_FAMILY,
+  SelectGroup,
+  SelectOptionColor,
+  SelectOptionSize,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { BackspaceIcon } from '../../../../shared/icons/keyboard/BackspaceIcon'
+import { useFluency } from '../../context/FluencyContext'
+import { useFluencyModePreset } from '../../hooks/useFluencyModePreset'
+
+type NumpadKey = {
+  key: string
+  title: string | React.ReactNode
+  value: number | 'backspace' | 'enter'
+  customColorScheme?: typeof ACTION_KEY_COLOR_SCHEME
+}
+
+const ACTION_KEY_COLOR_SCHEME = {
+  [ButtonStates.DEFAULT]: {
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderColor: COLORS.NEUTRAL_5,
+    raiseColor: COLORS.NEUTRAL_5,
+    color: COLORS.NEUTRAL_9,
+  },
+  [ButtonStates.HOVER]: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderColor: COLORS.NEUTRAL_4,
+    raiseColor: COLORS.NEUTRAL_4,
+    color: COLORS.NEUTRAL_9,
+  },
+}
+
+const NUMPAD_KEYS: NumpadKey[] = [
+  { key: '1', title: '1', value: 1 },
+  { key: '2', title: '2', value: 2 },
+  { key: '3', title: '3', value: 3 },
+  { key: '4', title: '4', value: 4 },
+  { key: '5', title: '5', value: 5 },
+  { key: '6', title: '6', value: 6 },
+  { key: '7', title: '7', value: 7 },
+  { key: '8', title: '8', value: 8 },
+  { key: '9', title: '9', value: 9 },
+  {
+    key: 'backspace',
+    title: <BackspaceIcon size={20} color={COLORS.NEUTRAL_9} />,
+    value: 'backspace',
+    customColorScheme: ACTION_KEY_COLOR_SCHEME,
+  },
+  { key: '0', title: '0', value: 0 },
+  { key: 'enter', title: 'Enter', value: 'enter', customColorScheme: ACTION_KEY_COLOR_SCHEME },
+]
+
+export const FluencyNumpad = () => {
+  const { model } = useFluency()
+  const { header, matrix } = useFluencyModePreset()
+  const input = useUnit(model.input.$state)
+
+  const accentColor = header.streakColor.todayBorder
+  const accentBorderColor = matrix.mastery.mastered
+
+  const enterAccentScheme = {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1,
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1,
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1,
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: accentColor,
+      borderColor: accentBorderColor,
+      raiseColor: accentBorderColor,
+      color: COLORS.NEUTRAL_1,
+    },
+  }
+
+  const options = NUMPAD_KEYS.map(({ value, customColorScheme, ...props }) => {
+    const isEnterKey = value === 'enter'
+    const colorScheme = isEnterKey && input ? enterAccentScheme : customColorScheme
+
+    return {
+      ...props,
+      customColorScheme: colorScheme,
+      onPressIn: () => {
+        if (value === 'backspace') return model.input.set({ erase: 'latest' })
+        if (value === 'enter') return model.input.submitFx()
+        model.input.set({ value })
+      },
+    }
+  })
+
+  return (
+    <View style={styles.container}>
+      <SelectGroup
+        numOfRows={4}
+        color={SelectOptionColor.GREY}
+        size={SelectOptionSize.SMALL}
+        options={options}
+        style={{
+          container: styles.grid,
+          row: styles.row,
+          option: {
+            button: styles.optionButton,
+            text: styles.optionText,
+          },
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingVertical: SPACING[400],
+    marginTop: SPACING[200],
+  },
+  grid: {
+    width: 360,
+    gap: SPACING[200],
+  },
+  row: {
+    gap: SPACING[200],
+  },
+  optionButton: {
+    height: 60,
+  },
+  optionText: {
+    fontSize: 24,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+})

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

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import { FluencyNumpad } from './FluencyNumpad'
+import { FluencyEquationCard } from './FluencyEquationCard'
+import { SPACING } from '@magmamath/react-native-ui'
+import { useFluencyModePreset } from '../../hooks/useFluencyModePreset'
+import { useFluency } from '../../context/FluencyContext'
+import { isWeb } from '../../../../shared/common.constants'
+
+export const FluencySolvingCard = () => {
+  const { model } = useFluency()
+  const { header, icon: OperatorIcon } = useFluencyModePreset()
+  const accentColor = header.streakColor.todayBorder // TODO: add accentColor in mode preset.
+  const input = useUnit(model.input.$state)
+
+  useEffect(() => {
+    if (!isWeb) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isDigit = /^\d$/.test(event.key)
+      if (isDigit) return model.input.set({ value: Number(event.key) })
+      if (event.key === 'Backspace') return model.input.set({ erase: 'latest' })
+      if (event.key === 'Enter') return model.input.submitFx()
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  return (
+    <View>
+      <View style={styles.wrapper}>
+        <FluencyEquationCard accentColor={accentColor} OperatorIcon={OperatorIcon} input={input} />
+      </View>
+
+      <FluencyNumpad />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    marginTop: SPACING[300],
+  },
+})