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

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

@@ -0,0 +1,112 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  PlayIcon,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { useFluencyModeUIPreset } from '../../../hooks/useFluencyModeUIPreset'
+
+const LEGEND_DOT_SIZE = 14
+const LEGEND_DOT_BORDER_RADIUS = 3
+const LEGEND_LABEL_FONT_SIZE = 12
+
+type LegendItem = {
+  label: string
+  color: string
+  withBorder?: boolean
+}
+
+type MatrixLegendProps = {}
+
+export const MatrixLegend = ({}: MatrixLegendProps) => {
+  const { mastery, buttonColor, operatorName } = useFluencyModeUIPreset()
+
+  const legendItems: LegendItem[] = [
+    { label: 'Not started', color: COLORS.NEUTRAL_2, withBorder: true },
+    { label: 'Learning', color: mastery.learning },
+    { label: 'Growing', color: mastery.growing },
+    { label: 'Strong', color: mastery.strong },
+    { label: 'Mastered', color: mastery.mastered },
+  ]
+
+  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
+        // TODO: Wire to the practice action when the model gains a startPractice event.
+        onPress={() => {}}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.MEDIUM}
+        colorScheme={buttonColor}
+        icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
+        raiseLevel={3}
+        style={{ container: styles.practiceButton, text: styles.practiceButtonText }}
+      >
+        {`Practice ${operatorName}`}
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 65,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.NEUTRAL_5,
+    paddingHorizontal: SPACING[300],
+    paddingVertical: SPACING[300],
+    borderTopLeftRadius: BORDER_RADIUS[400],
+    borderTopRightRadius: BORDER_RADIUS[400],
+  },
+  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,90 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  CrossIcon,
+  MinusIcon,
+  PlusIcon,
+  SelectOptionColor,
+  SHADOWS,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { useUnit } from 'effector-react'
+import { FluencyMode } from '../../fluency.constants'
+import { fluencyModel } from '../../model/fluency.instance'
+import { MathOperatorRow } from './MathOperatorRow'
+
+type OperatorConfig = {
+  mode: FluencyMode
+  title: string
+  Icon: React.ComponentType<{ color?: string }>
+  color: SelectOptionColor
+  progress: number
+}
+
+const OPERATOR_CONFIG: OperatorConfig[] = [
+  {
+    mode: FluencyMode.ADDITION,
+    title: 'Addition',
+    Icon: PlusIcon,
+    color: SelectOptionColor.GREEN,
+    progress: 72,
+  },
+  {
+    mode: FluencyMode.SUBTRACTION,
+    title: 'Subtraction',
+    Icon: MinusIcon,
+    color: SelectOptionColor.ORANGE,
+    progress: 45,
+  },
+  {
+    mode: FluencyMode.MULTIPLICATION,
+    title: 'Multiplication',
+    Icon: CrossIcon,
+    color: SelectOptionColor.BLUE,
+    progress: 18,
+  },
+  // TODO: Replace with DivisionIcon once added to rn-ui — division needs its own symbol (÷).
+  {
+    mode: FluencyMode.DIVISION,
+    title: 'Division',
+    Icon: MinusIcon,
+    color: SelectOptionColor.PURPLE,
+    progress: 33,
+  },
+]
+
+type SelectMathOperatorProps = {}
+
+export const SelectMathOperator = ({}: SelectMathOperatorProps) => {
+  const { mode } = useUnit({ mode: fluencyModel.$mode })
+
+  return (
+    <View style={styles.container}>
+      {OPERATOR_CONFIG.map((op, index) => (
+        <MathOperatorRow
+          key={op.mode}
+          title={op.title}
+          icon={<op.Icon color={mode === op.mode ? COLORS.NEUTRAL_1 : undefined} />}
+          progress={op.progress}
+          color={op.color}
+          selected={mode === op.mode}
+          onSelect={() => fluencyModel.setMode(op.mode)}
+          showDivider={index < OPERATOR_CONFIG.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,
+  },
+})

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

@@ -0,0 +1,92 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  PlayIcon,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { BannerFlashcards } from './BannerFlashcards'
+import { useFluencyModeUIPreset } from '../../hooks/useFluencyModeUIPreset'
+
+type StartBannerProps = {}
+
+export const StartBanner = ({}: StartBannerProps) => {
+  const { buttonColor } = useFluencyModeUIPreset()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        <View style={styles.buttonGroup}>
+          <Button
+            onPress={() => {}}
+            disabled={false}
+            isLoading={false}
+            isActive={false}
+            icon={<PlayIcon color={COLORS.NEUTRAL_1} />}
+            variant={ButtonVariant.PRIMARY}
+            size={ButtonSize.LARGE}
+            colorScheme={buttonColor}
+            raiseLevel={6}
+            style={{ container: styles.button }}
+          >
+            Start fluency practice
+          </Button>
+          <Typography style={styles.buttonSubtitle}>20 individualized ready</Typography>
+        </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: 12,
+    fontWeight: '700',
+    color: COLORS.BLACK,
+    textTransform: 'uppercase',
+  },
+  flashcard: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1],
+  },
+})

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

@@ -0,0 +1,75 @@
+import { ButtonColor, COLORS } from '@magmamath/react-native-ui'
+
+export enum FluencyMode {
+  ADDITION = 'ADDITION',
+  SUBTRACTION = 'SUBTRACTION',
+  MULTIPLICATION = 'MULTIPLICATION',
+  DIVISION = 'DIVISION',
+}
+
+export type FluencyModePreset = {
+  operatorName: string
+  mastery: {
+    learning: string
+    developing: string
+    growing: string
+    strong: string
+    mastered: string
+  }
+  buttonColor: ButtonColor
+  streakColor: {
+    gained: string
+    todayBorder: string
+  }
+}
+
+export const FLUENCY_MODE_PRESETS: Record<FluencyMode, FluencyModePreset> = {
+  [FluencyMode.ADDITION]: {
+    operatorName: 'Addition',
+    mastery: {
+      learning: COLORS.GREEN_2,
+      developing: COLORS.GREEN_3,
+      growing: COLORS.PRIMARY_GREEN,
+      strong: COLORS.GREEN_6,
+      mastered: COLORS.GREEN_7,
+    },
+    buttonColor: ButtonColor.GREEN,
+    streakColor: { gained: COLORS.PRIMARY_GREEN, todayBorder: COLORS.GREEN_6 },
+  },
+  [FluencyMode.SUBTRACTION]: {
+    operatorName: 'Subtraction',
+    mastery: {
+      learning: COLORS.ORANGE_2,
+      developing: COLORS.ORANGE_3,
+      growing: COLORS.PRIMARY_ORANGE,
+      strong: COLORS.ORANGE_6,
+      mastered: COLORS.ORANGE_7,
+    },
+    buttonColor: ButtonColor.ORANGE,
+    streakColor: { gained: COLORS.PRIMARY_ORANGE, todayBorder: COLORS.ORANGE_6 },
+  },
+  [FluencyMode.MULTIPLICATION]: {
+    operatorName: 'Multiplication',
+    mastery: {
+      learning: COLORS.BLUE_2,
+      developing: COLORS.BLUE_3,
+      growing: COLORS.PRIMARY_BLUE,
+      strong: COLORS.BLUE_6,
+      mastered: COLORS.BLUE_7,
+    },
+    buttonColor: ButtonColor.BLUE,
+    streakColor: { gained: COLORS.PRIMARY_BLUE, todayBorder: COLORS.BLUE_6 },
+  },
+  [FluencyMode.DIVISION]: {
+    operatorName: 'Division',
+    mastery: {
+      learning: COLORS.PURPLE_2,
+      developing: COLORS.PURPLE_3,
+      growing: COLORS.PRIMARY_PURPLE,
+      strong: COLORS.PURPLE_6,
+      mastered: COLORS.PURPLE_7,
+    },
+    buttonColor: ButtonColor.PURPLE,
+    streakColor: { gained: COLORS.PRIMARY_PURPLE, todayBorder: COLORS.PURPLE_6 },
+  },
+}

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

@@ -0,0 +1 @@
+export const getFluency = () => {}

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

@@ -0,0 +1 @@
+export type Fluency = {}

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

@@ -0,0 +1,8 @@
+import { useUnit } from 'effector-react'
+import { FLUENCY_MODE_PRESETS, FluencyModePreset } from '../fluency.constants'
+import { fluencyModel } from '../model/fluency.instance'
+
+export const useFluencyModeUIPreset = (): FluencyModePreset => {
+  const mode = useUnit(fluencyModel.$mode)
+  return FLUENCY_MODE_PRESETS[mode]
+}

package/src/features/fluency/index.ts

@@ -0,0 +1,5 @@
+export * from './fluency.constants'
+export * from './fluency.types'
+export * from './fluency.helpers'
+export { Fluency } from './components/Fluency'
+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/FluencyMatrixModel.ts

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