@magmamath/students-features 1.3.4-rc.3 → 1.3.4

package/src/features/pmProgress/components/content/PmContent.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { useUnit } from 'effector-react'
+import { StyleSheet, View } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
+import { PmTeacherRecs } from '../recs/PmTeacherRecs'
+import { PmDomainList } from '../list/PmDomainList'
+import { PmInsights } from '../insights/PmInsights'
+import { PmStatusOverlay } from '../locked/PmStatusOverlay'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { PmProgressStatus } from '@magmamath/students-features'
+
+export const PmProgressContent = () => {
+  const { model } = usePmProgress()
+  const status = useUnit(model.tree.$status)
+
+  if (status) {
+    return <PmStatusOverlay status={status} />
+  }
+
+  return (
+    <View style={styles.content}>
+      <View style={styles.column}>
+        <PmTeacherRecs />
+        <PmDomainList />
+      </View>
+
+      <PmInsights />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  column: {
+    flex: 1,
+    overflow: 'hidden',
+    marginRight: SPACING[500],
+    gap: SPACING[200],
+  },
+})

package/src/features/pmProgress/components/header/NextUp.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
+import { SketchArrowRight } from '../../../../shared/icons/SketchArrowRight'
+import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
+import { useText } from '../../../../shared/translation'
+import { useUnit, useStoreMap } from 'effector-react'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { isFluencyDomain } from '../../shared/pmProgress.helpers'
+import { OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
+import { StartButton } from './StartButton'
+
+export const NextUp = () => {
+  const t = useText()
+  const { model, onStartPress } = usePmProgress()
+
+  const status = useUnit(model.tree.$status)
+  const loaderOpeningId = useUnit(model.solving.$loaderOpeningId)
+
+  const nextUp = useStoreMap(model.tree.$domains, (domains) =>
+    domains.find((domain) => {
+      const isFluency = isFluencyDomain(domain.title)
+      const isDomainCompleted = domain.standards.every((standard) => standard.isCompleted)
+      return !isFluency && !isDomainCompleted
+    }),
+  )
+
+  const isLoading = loaderOpeningId === OpeningLoaderId.START_BUTTON
+  const isSkillOpeningActionPending = !!(loaderOpeningId !== null || status)
+
+  return (
+    <View style={styles.container}>
+      {nextUp && !status && (
+        <>
+          <View style={styles.content}>
+            <View style={styles.subtitle}>
+              <Typography variant={HeadingVariants.H2} style={styles.dark}>
+                {t('pmProgress.nextUp')}
+              </Typography>
+            </View>
+            <View style={[styles.row, styles.tilted]}>
+              <Typography variant={HeadingVariants.H7} style={styles.muted}>
+                {nextUp?.title}
+              </Typography>
+              <View style={styles.diamond}>
+                <SliceDiamondIcon color={nextUp?.color} />
+              </View>
+            </View>
+          </View>
+          <View style={styles.arrow}>
+            <SketchArrowRight />
+          </View>
+        </>
+      )}
+
+      <StartButton
+        onPress={async () => {
+          try {
+            model.solving.setLoaderOpeningId(OpeningLoaderId.START_BUTTON)
+            const skill = await model.solving.start({ type: SolvingFlow.MAGMA })
+            await onStartPress?.(skill)
+          } finally {
+            model.solving.setLoaderOpeningId(null)
+          }
+        }}
+        disabled={isSkillOpeningActionPending}
+        isLoading={isLoading}
+        isActive={isLoading}
+        withPulsation={!!nextUp && !isLoading && !isSkillOpeningActionPending && !status}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[400],
+  },
+  content: {
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  dark: {
+    color: COLORS.NEUTRAL_9,
+  },
+  subtitle: {
+    transform: [{ rotate: '355deg' }],
+    marginRight: SPACING[300],
+  },
+  tilted: {
+    transform: [{ rotate: '355deg' }],
+  },
+  row: {
+    flexDirection: 'row',
+    gap: SPACING[100],
+  },
+  muted: {
+    color: COLORS.NEUTRAL_8,
+  },
+  diamond: {
+    bottom: 10,
+    transform: [{ rotate: '5deg' }],
+  },
+  arrow: {
+    transform: [{ rotate: '358deg' }],
+  },
+})

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet, TextStyle, useWindowDimensions, View } from 'react-native'
+import {
+  Button,
+  ButtonVariant,
+  CaretDownIcon,
+  CaretUpIcon,
+  COLORS,
+  Dropdown,
+  HeadingVariants,
+  Menu,
+  MenuItemProps,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { isWeb } from '../../../../shared/common.constants'
+import { useText } from '../../../../shared/translation'
+import { useUnit, useStoreMap } from 'effector-react'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { formatGradeLabel } from '../../shared/pmProgress.helpers'
+import { MenuIcon } from '../../../../shared/icons/MenuIcon'
+import { NextUp } from './NextUp'
+import { BURGER_MENU_BREAKPOINT, MENU_MAX_HEIGHT } from '@magmamath/students-features'
+
+const menuItemProps: MenuItemProps = {
+  style: {
+    text: { whiteSpace: 'nowrap' } as TextStyle,
+  },
+}
+
+export const PmProgressHeader = () => {
+  const t = useText()
+  const { model, customGradeLabels, readOnly, onMenuPress } = usePmProgress()
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const dimensions = useWindowDimensions()
+  const withMenuButton = isWeb && dimensions.width <= BURGER_MENU_BREAKPOINT
+
+  const grade = useUnit(model.tree.$grade)
+  const grades = useStoreMap({
+    store: model.tree.$grades,
+    keys: [customGradeLabels],
+    fn: (grades) =>
+      grades.map((grade) => ({
+        key: grade.value,
+        title: formatGradeLabel(grade.value, customGradeLabels),
+        disabled: grade.isLocked,
+        ...menuItemProps,
+      })),
+  })
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.title}>
+        {withMenuButton && (
+          <View style={styles.burgerMenu}>
+            <Button
+              onPress={onMenuPress}
+              variant={ButtonVariant.TERTIARY}
+              icon={<MenuIcon size={24} />}
+            />
+          </View>
+        )}
+
+        <Typography variant={HeadingVariants.H2} style={styles.dark}>
+          {t('pmProgress.title')}
+        </Typography>
+        <Dropdown
+          isOpen={isDropdownOpen}
+          onDismiss={() => setIsDropdownOpen(false)}
+          anchor={
+            <Button
+              variant={ButtonVariant.TERTIARY}
+              onPress={() => setIsDropdownOpen((prev) => !prev)}
+            >
+              <Typography variant={HeadingVariants.H8} style={styles.dark}>
+                {grade !== null
+                  ? formatGradeLabel(grade, customGradeLabels)
+                  : t('pmProgress.grade')}
+              </Typography>
+              <View style={styles.caret}>
+                {isDropdownOpen ? (
+                  <CaretUpIcon color={COLORS.NEUTRAL_9} />
+                ) : (
+                  <CaretDownIcon color={COLORS.NEUTRAL_9} />
+                )}
+              </View>
+            </Button>
+          }
+        >
+          <Menu
+            style={styles.menu}
+            items={grades}
+            onItemPress={(item) => {
+              model.tree.setGrade(item.key as number)
+              setIsDropdownOpen(false)
+            }}
+          />
+        </Dropdown>
+      </View>
+
+      {!readOnly && <NextUp />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: SPACING[400],
+    zIndex: 1,
+  },
+  burgerMenu: {
+    marginRight: SPACING[200],
+  },
+  title: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  dark: {
+    color: COLORS.NEUTRAL_9,
+  },
+  caret: {
+    marginLeft: SPACING[100],
+  },
+  menu: {
+    top: SPACING[100],
+    minWidth: 110,
+    overflow: 'scroll',
+    maxHeight: MENU_MAX_HEIGHT,
+    ...Platform.select({ web: { scrollbarWidth: 'none' } }),
+  },
+})

package/src/features/pmProgress/components/header/StartButton.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, StyleSheet, View } from 'react-native'
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  HeadingVariants,
+  PlayIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+
+const PULSATION_COLOR = '#FFBE4E66'
+const PULSE_OVERFLOW_X = 16
+const PULSE_OVERFLOW_Y = 18
+const PULSE_OFFSET_TOP = -6
+const PULSE_OFFSET_LEFT = -8
+const PULSE_DURATION = 1000
+const PULSE_DELAY = 1000
+const MIN_SCALE_X = 0.7
+
+type Sizes = {
+  width: number
+  height: number
+}
+
+type StartButtonProps = {
+  onPress: () => void
+  disabled: boolean
+  isLoading: boolean
+  isActive: boolean
+  withPulsation?: boolean
+}
+
+export const StartButton = ({
+  onPress,
+  disabled,
+  isLoading,
+  isActive,
+  withPulsation,
+}: StartButtonProps) => {
+  const t = useText()
+  const [sizes, setSizes] = useState<Sizes | null>(null)
+  const [aspectRatio, setAspectRatio] = useState<number | null>(null)
+  const showPulsation = withPulsation && sizes && aspectRatio
+
+  const scaleAnimValue = useRef(new Animated.Value(0)).current
+  const fadeAnimValue = useRef(new Animated.Value(1)).current
+
+  useEffect(() => {
+    if (!sizes || !withPulsation) return
+
+    const scaleAnimation = Animated.timing(scaleAnimValue, {
+      toValue: 1,
+      duration: PULSE_DURATION,
+      useNativeDriver: true,
+    })
+
+    const fadeOutAnimation = Animated.timing(fadeAnimValue, {
+      toValue: 0,
+      duration: PULSE_DURATION,
+      useNativeDriver: true,
+    })
+
+    const pulsation = Animated.loop(
+      Animated.sequence([scaleAnimation, Animated.delay(PULSE_DELAY), fadeOutAnimation]),
+    )
+
+    pulsation.start()
+
+    return () => {
+      pulsation.stop()
+      scaleAnimValue.setValue(0)
+      fadeAnimValue.setValue(1)
+    }
+  }, [sizes, withPulsation])
+
+  return (
+    <View
+      style={styles.container}
+      onLayout={(event) => {
+        setSizes({
+          width: event.nativeEvent.layout.width + PULSE_OVERFLOW_X,
+          height: event.nativeEvent.layout.height + PULSE_OVERFLOW_Y,
+        })
+        setAspectRatio(event.nativeEvent.layout.width / event.nativeEvent.layout.height)
+      }}
+    >
+      {showPulsation && (
+        <Animated.View
+          style={[
+            styles.animatedBackground,
+            {
+              width: sizes.width,
+              height: sizes.height,
+              top: PULSE_OFFSET_TOP,
+              left: PULSE_OFFSET_LEFT,
+              transform: [
+                {
+                  scaleX: scaleAnimValue.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [
+                      aspectRatio / 10 > MIN_SCALE_X ? MIN_SCALE_X : aspectRatio / 10,
+                      1,
+                    ],
+                  }),
+                },
+                {
+                  scaleY: scaleAnimValue.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 1],
+                  }),
+                },
+              ],
+              opacity: fadeAnimValue,
+            },
+          ]}
+        />
+      )}
+      <Button
+        onPress={onPress}
+        disabled={disabled}
+        isLoading={isLoading}
+        isActive={isActive}
+        icon={<PlayIcon size={16} color={COLORS.NEUTRAL_1} />}
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.LARGE}
+        colorScheme={ButtonColor.YELLOW}
+        raiseLevel={6}
+        style={{ container: styles.startButton }}
+      >
+        <Typography variant={HeadingVariants.H6} style={styles.startButtonText}>
+          {t('pmProgress.startButton')}
+        </Typography>
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginRight: SPACING[200],
+  },
+  startButton: {
+    minWidth: 145,
+  },
+  startButtonText: {
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    color: COLORS.NEUTRAL_1,
+  },
+  animatedBackground: {
+    backgroundColor: PULSATION_COLOR,
+    position: 'absolute',
+    borderRadius: 50,
+  },
+})

package/src/features/pmProgress/components/insights/PmInsights.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo, useState } from 'react'
+import { useStoreMap } from 'effector-react'
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+import { PracticeProgressPieChart } from '../chart/components/PracticeProgressPieChart'
+import { PmTimeframeStats } from './PmTimeframeStats'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { createChartConfig } from '../../shared/pmProgress.helpers'
+import {
+  EMPTY_PIE_CHART_DATA,
+  MAX_PIE_CHART_SIZE,
+  STATS_MAX_HEIGHT,
+} from '../../shared/pmProgress.constants'
+
+export const PmInsights = () => {
+  const { model } = usePmProgress()
+  const [chartSize, setChartSize] = useState(MAX_PIE_CHART_SIZE)
+  const chartData = useStoreMap(model.tree.$domains, (domains) =>
+    domains.map((domain) => ({
+      value: 1,
+      fillPercent: Math.round(domain.scorePercentage),
+      fillColor: domain.color,
+      borderColor: domain.borderColor,
+      backgroundColor: domain.backgroundColor,
+    })),
+  )
+
+  const chartConfig = useMemo(() => {
+    const size = Math.max(0, chartSize - SPACING[400])
+    return createChartConfig(size)
+  }, [chartSize])
+
+  const measureLayout = (event: LayoutChangeEvent) => {
+    const height = event.nativeEvent.layout.height
+    const size = Math.min(height - STATS_MAX_HEIGHT - SPACING[800], MAX_PIE_CHART_SIZE)
+    setChartSize(size)
+  }
+
+  return (
+    <View style={styles.container} onLayout={measureLayout}>
+      <View style={[styles.chart, { width: chartSize, height: chartSize }]}>
+        <PracticeProgressPieChart
+          data={chartData.length > 0 ? chartData : EMPTY_PIE_CHART_DATA}
+          config={chartConfig}
+        />
+      </View>
+      <PmTimeframeStats />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+  },
+  chart: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[250],
+    padding: SPACING[400],
+    marginBottom: SPACING[400],
+    marginTop: SPACING[400],
+  },
+})

package/src/features/pmProgress/components/insights/PmTimeframeStats.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  SelectGroup,
+  SelectOptionColor,
+  SelectOptionProps,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { StatsCard } from './StatsCard'
+import { StarIcon } from '../../../../shared/icons/StarIcon'
+import { TimerIcon } from '../../../../shared/icons/TimerIcon'
+import { BORDER_RADIUS } from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+import { useUnit } from 'effector-react'
+import { formatTime } from '../../shared/pmProgress.helpers'
+import { InsightsTimeframe, STATS_MAX_HEIGHT } from '../../shared/pmProgress.constants'
+import { usePmProgress } from '../../context/PmProgressContext'
+
+export const PmTimeframeStats = () => {
+  const t = useText()
+  const { model } = usePmProgress()
+  const timeframe = useUnit(model.insights.$timeframe)
+  const insights = useUnit(model.insights.$insights)
+
+  const OPTIONS: SelectOptionProps[] = [
+    { key: InsightsTimeframe.WEEK, title: t('pmProgress.thisWeek') },
+    { key: InsightsTimeframe.LAST_WEEK, title: t('pmProgress.lastWeek') },
+    { key: InsightsTimeframe.ALL, title: t('pmProgress.allTime') },
+  ]
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.cards}>
+          <StatsCard
+            value={insights?.numberOfStars ?? 0}
+            label={t('pmProgress.stars')}
+            color={COLORS.PRIMARY_YELLOW}
+            icon={<StarIcon />}
+          />
+          <StatsCard
+            value={formatTime(insights?.timeInPracticeMs ?? 0)}
+            label={t('pmProgress.time')}
+            color={COLORS.PRIMARY_PURPLE}
+            iconStyle={styles.timeIcon}
+            icon={<TimerIcon />}
+          />
+        </View>
+
+        <SelectGroup
+          color={SelectOptionColor.GREY}
+          options={OPTIONS}
+          selectedOptions={OPTIONS.filter(({ key }) => key === timeframe)}
+          onOptionChange={({ key }) => model.insights.setTimeframe(key as InsightsTimeframe)}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: STATS_MAX_HEIGHT,
+    height: '100%',
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[300],
+    shadowColor: COLORS.NEUTRAL_9,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  content: {
+    gap: SPACING[100],
+    marginBottom: 4,
+  },
+  cards: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: SPACING[300],
+  },
+  timeIcon: {
+    paddingBottom: 2,
+    paddingLeft: 2,
+  },
+})

package/src/features/pmProgress/components/insights/StatsCard.tsx

@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react'
+import { View, StyleSheet, Text, ViewStyle } from 'react-native'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui'
+
+type StatsCardProps = {
+  value: number | string
+  label: string
+  color: string
+  icon: ReactNode
+  iconStyle?: ViewStyle
+}
+
+export const StatsCard = ({ value, label, color, icon, iconStyle }: StatsCardProps) => {
+  return (
+    <View style={[styles.card, { borderColor: color }]}>
+      <View style={[styles.iconContainer, { backgroundColor: color }, iconStyle]}>{icon}</View>
+      <View>
+        <Text style={[styles.value, { color }]}>{value}</Text>
+        <Text style={styles.label}>{label}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    height: 65,
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: BORDER_RADIUS[300],
+    borderWidth: 4,
+    padding: SPACING[200],
+    gap: SPACING[200],
+  },
+  iconContainer: {
+    width: 42,
+    height: 42,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 100,
+  },
+  value: {
+    fontSize: 32,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  label: {
+    color: COLORS.NEUTRAL_8,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY.buenosAires,
+    top: -6,
+  },
+})