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

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

@@ -0,0 +1,66 @@
+import React, { useMemo, useState } from 'react'
+import { useStoreMap } from 'effector-react'
+import { LayoutChangeEvent, StyleSheet, View } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, 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],
+    ...SHADOWS['1'],
+  },
+})

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

@@ -0,0 +1,94 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  FONT_FAMILY,
+  SelectGroup,
+  SelectOptionColor,
+  SelectOptionProps,
+  SHADOWS,
+  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'
+
+const optionStyle: SelectOptionProps['style'] = {
+  text: {
+    fontSize: 13,
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_9,
+  },
+}
+
+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'), style: optionStyle },
+    { key: InsightsTimeframe.LAST_WEEK, title: t('pmProgress.lastWeek'), style: optionStyle },
+    { key: InsightsTimeframe.ALL, title: t('pmProgress.allTime'), style: optionStyle },
+  ]
+
+  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],
+    ...SHADOWS['1'],
+  },
+  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,
+  },
+})

package/src/features/pmProgress/components/list/Fluency.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { ListCard } from './ListCard'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
+import { useText } from '../../../../shared/translation'
+import { useUnit } from 'effector-react'
+import { SolvingFlow } from '../../shared/pmProgress.constants'
+import { Domain } from '../../shared/pmProgress.types'
+import { usePmProgress } from '../../context/PmProgressContext'
+
+type FluencyProps = {
+  data: Domain | undefined
+}
+
+export const Fluency = ({ data }: FluencyProps) => {
+  const t = useText()
+  const { model, onStandardPress } = usePmProgress()
+  const expandedId = useUnit(model.highlight.$expandedId)
+  const hoveredId = useUnit(model.highlight.$hoveredId)
+  const loaderOpeningId = useUnit(model.solving.$loaderOpeningId)
+
+  if (!data) return null
+
+  const isExpanded = expandedId === data.domainId
+  const isHighlighted = hoveredId === data.domainId || isExpanded
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.separator} />
+      <ListCard
+        title={t('pmProgress.fluency')}
+        items={data.standards.map((standard) => ({ ...standard, id: standard.standardId }))}
+        progress={data.scorePercentage}
+        color={COLORS.PRIMARY_ORANGE}
+        onPress={() => model.highlight.expand(data.domainId)}
+        onHoverIn={() => model.highlight.hover(data.domainId)}
+        onHoverOut={() => model.highlight.hover(null)}
+        onItemPress={async (item) => {
+          try {
+            model.solving.setLoaderOpeningId(item.id)
+            const skill = await model.solving.start({
+              type: SolvingFlow.STANDARD,
+              standardId: item.standardId,
+            })
+            await onStandardPress?.(skill)
+          } finally {
+            model.solving.setLoaderOpeningId(null)
+          }
+        }}
+        loadingItemId={loaderOpeningId}
+        isFirst
+        isLast
+        isExpanded={isExpanded}
+        isHighlighted={isHighlighted}
+        icon={<SliceDiamondIcon color={COLORS.PRIMARY_ORANGE} />}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: SPACING[800],
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: SPACING[100],
+    marginVertical: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_4,
+  },
+})

package/src/features/pmProgress/components/list/ListCard.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from 'react'
+import { Pressable, View, StyleSheet, Platform, ViewStyle } from 'react-native'
+import {
+  BORDER_RADIUS,
+  CaretDownIcon,
+  CaretRightIcon,
+  COLORS,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { ListItem } from './ListItem'
+import { useText } from '../../../../shared/translation'
+const HEADER_HEIGHT = 60
+const PROGRESS_BAR_WIDTH = 50
+const PROGRESS_BAR_HEIGHT = 10
+
+export type ListCardItem = {
+  id: string
+  title: string
+  subtitle: string
+  isCompleted: boolean
+  skillsLeft: number
+}
+
+function getVisibleItems<T>(items: T[], maxItems?: number) {
+  const visible = maxItems != null ? items.slice(0, maxItems) : items
+  const remainingCount = maxItems != null ? Math.max(0, items.length - maxItems) : 0
+  return { visible, remainingCount }
+}
+
+type ListCardProps<T extends ListCardItem> = {
+  title: string
+  icon: React.ReactElement
+  color: string
+  items: T[]
+  onItemPress?: (item: T) => void
+  isExpanded?: boolean
+  onPress?: () => void
+  onHoverIn?: () => void
+  onHoverOut?: () => void
+  progress?: number
+  rightContent?: React.ReactNode
+  isFirst?: boolean
+  isLast?: boolean
+  maxItems?: number
+  expandedColor?: string
+  isSkillsLeftHidden?: boolean
+  isHighlighted?: boolean
+  loadingItemId?: string | null
+}
+
+export const ListCard = <T extends ListCardItem>({
+  title,
+  icon,
+  color,
+  items,
+  isExpanded = false,
+  isHighlighted = false,
+  onPress,
+  onHoverIn,
+  onHoverOut,
+  onItemPress,
+  progress = 0,
+  rightContent,
+  isFirst,
+  isLast,
+  maxItems,
+  expandedColor = COLORS.NEUTRAL_3,
+  isSkillsLeftHidden = false,
+  loadingItemId = null,
+}: ListCardProps<T>) => {
+  const t = useText()
+  const [isHovered, setIsHovered] = useState(false)
+
+  const { visible: standards, remainingCount } = getVisibleItems(items, maxItems)
+  const withHighlight = isHovered || isExpanded || isHighlighted
+
+  const Caret = isExpanded ? CaretDownIcon : CaretRightIcon
+
+  return (
+    <View
+      style={[
+        styles.container,
+        !isFirst && styles.containerCollapsed,
+        isFirst && styles.containerFirst,
+        isLast && styles.containerLast,
+        withHighlight && { backgroundColor: expandedColor },
+      ]}
+    >
+      <Pressable
+        style={[
+          styles.header,
+          isFirst && styles.headerFirst,
+          isLast && !isExpanded && styles.headerLast,
+          withHighlight && { backgroundColor: expandedColor },
+        ]}
+        onPress={onPress}
+        onHoverIn={() => {
+          setIsHovered(true)
+          onHoverIn?.()
+        }}
+        onHoverOut={() => {
+          setIsHovered(false)
+          onHoverOut?.()
+        }}
+      >
+        <View>{icon}</View>
+
+        <View style={styles.caret}>
+          <Caret color={COLORS.NEUTRAL_9} />
+        </View>
+        <Typography variant={HeadingVariants.H6} style={styles.title}>
+          {title}
+        </Typography>
+        {rightContent ?? (
+          <View style={styles.progress}>
+            <Typography variant={HeadingVariants.H7} style={[styles.percentage, { color }]}>
+              {Math.round(progress)}%
+            </Typography>
+            <View style={styles.track}>
+              <View
+                style={[styles.fill, { width: `${Math.round(progress)}%`, backgroundColor: color }]}
+              />
+            </View>
+          </View>
+        )}
+      </Pressable>
+      {isExpanded && (
+        <View style={[styles.items, isLast && styles.itemsLast]}>
+          {standards.map((standard) => (
+            <ListItem
+              key={standard.id}
+              title={standard.title}
+              skillsLeft={standard.skillsLeft}
+              subtitle={standard.subtitle}
+              isFinished={standard.isCompleted}
+              isLoading={loadingItemId === standard.id}
+              isSkillsLeftHidden={isSkillsLeftHidden}
+              onPress={() => onItemPress?.(standard)}
+            />
+          ))}
+          {remainingCount > 0 && (
+            <Typography variant={HeadingVariants.H8} style={styles.moreText}>
+              {t('pmProgress.andMore', { count: `${remainingCount}` })}
+            </Typography>
+          )}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    backgroundColor: COLORS.NEUTRAL_2,
+    overflow: 'hidden',
+    ...Platform.select({ web: { cursor: 'pointer' } as ViewStyle }),
+  },
+  containerCollapsed: {
+    marginTop: -1,
+  },
+  containerFirst: {
+    borderTopLeftRadius: BORDER_RADIUS[200],
+    borderTopRightRadius: BORDER_RADIUS[200],
+  },
+  containerLast: {
+    borderBottomLeftRadius: BORDER_RADIUS[200],
+    borderBottomRightRadius: BORDER_RADIUS[200],
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: HEADER_HEIGHT,
+    padding: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+    ...Platform.select({ web: { cursor: 'pointer' } as ViewStyle }),
+  },
+  headerFirst: {
+    borderTopLeftRadius: BORDER_RADIUS[200],
+    borderTopRightRadius: BORDER_RADIUS[200],
+  },
+  headerLast: {
+    borderBottomLeftRadius: BORDER_RADIUS[200],
+    borderBottomRightRadius: BORDER_RADIUS[200],
+  },
+  caret: {
+    marginLeft: SPACING[400],
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    marginLeft: SPACING[200],
+    flex: 1,
+  },
+  progress: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  percentage: {
+    textAlign: 'right',
+  },
+  track: {
+    width: PROGRESS_BAR_WIDTH,
+    height: PROGRESS_BAR_HEIGHT,
+    backgroundColor: COLORS.NEUTRAL_4,
+    borderRadius: BORDER_RADIUS[200],
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: BORDER_RADIUS[200],
+  },
+  items: {
+    gap: SPACING[200],
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  itemsLast: {
+    borderBottomLeftRadius: BORDER_RADIUS[200],
+    borderBottomRightRadius: BORDER_RADIUS[200],
+  },
+  moreText: {
+    textAlign: 'center',
+    color: COLORS.NEUTRAL_7,
+    marginVertical: SPACING[200],
+  },
+})

package/src/features/pmProgress/components/list/ListItem.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react'
+import { ActivityIndicator, View, Pressable, StyleSheet, Text } from 'react-native'
+import {
+  ArrowRightIcon,
+  BORDER_RADIUS,
+  CheckIcon,
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+
+const CARD_HEIGHT = 52
+const ICON_SIZE = 25
+const SUBTITLE_FONT_SIZE = 10
+const SUBTITLE_LINE_HEIGHT = 14
+
+export type ListItemProps = {
+  title: string
+  subtitle: string
+  skillsLeft: number
+  isFinished?: boolean
+  isLoading?: boolean
+  onPress?: () => void
+  isSkillsLeftHidden?: boolean
+}
+
+export const ListItem = ({
+  title,
+  subtitle,
+  skillsLeft,
+  isFinished = false,
+  isLoading = false,
+  onPress,
+  isSkillsLeftHidden = false,
+}: ListItemProps) => {
+  const t = useText()
+  const [isHovered, setIsHovered] = useState(false)
+  const isSkillsLeftVisible = skillsLeft > 0 && !isFinished && !isSkillsLeftHidden
+  const hasDistinctSubtitle = title !== subtitle
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isLoading}
+      style={[
+        styles.card,
+        isFinished && styles.finished,
+        isHovered && styles.hovered,
+        isHovered && isFinished && styles.hoveredFinished,
+        isLoading && styles.loading,
+      ]}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+    >
+      <View style={styles.content}>
+        <Typography
+          variant={HeadingVariants.H10}
+          style={[styles.title, isFinished && styles.titleFinished]}
+          numberOfLines={1}
+        >
+          {title}
+        </Typography>
+        {hasDistinctSubtitle && (
+          <Typography
+            style={[styles.subtitle, isFinished && styles.subtitleFinished]}
+            numberOfLines={1}
+          >
+            {subtitle}
+          </Typography>
+        )}
+      </View>
+      <View style={styles.trailing}>
+        {isLoading ? (
+          <View style={styles.loadingIndicator}>
+            <Text>{t('pmProgress.loading')} </Text>
+            <ActivityIndicator size="small" color={COLORS.NEUTRAL_7} />
+          </View>
+        ) : (
+          <>
+            {isSkillsLeftVisible && (
+              <Typography variant={HeadingVariants.H10} style={styles.skills}>
+                {skillsLeft}{' '}
+                {skillsLeft === 1 ? t('pmProgress.skillLeft') : t('pmProgress.skillsLeft')}
+              </Typography>
+            )}
+            <View style={styles.icon}>
+              {isFinished ? (
+                <CheckIcon color={COLORS.PRIMARY_GREEN} />
+              ) : (
+                <ArrowRightIcon color={COLORS.NEUTRAL_9} />
+              )}
+            </View>
+          </>
+        )}
+      </View>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: CARD_HEIGHT,
+    paddingLeft: SPACING[800],
+    paddingRight: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[300],
+    gap: SPACING[200],
+    ...SHADOWS['2'],
+  },
+  finished: {
+    backgroundColor: COLORS.GREEN_1,
+    ...SHADOWS['2'],
+  },
+  hovered: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    ...SHADOWS['3'],
+  },
+  hoveredFinished: {
+    backgroundColor: COLORS.GREEN_2,
+    ...SHADOWS['3'],
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+  },
+  titleFinished: {
+    color: COLORS.GREEN_7,
+  },
+  subtitle: {
+    color: COLORS.NEUTRAL_7,
+    fontSize: SUBTITLE_FONT_SIZE,
+    fontFamily: FONT_FAMILY.buenosAires,
+    lineHeight: SUBTITLE_LINE_HEIGHT,
+  },
+  subtitleFinished: {
+    color: COLORS.GREEN_6,
+  },
+  trailing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  skills: {
+    color: COLORS.NEUTRAL_9,
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loading: {
+    opacity: 0.5,
+  },
+  loadingIndicator: {
+    flexDirection: 'row',
+    gap: SPACING[200],
+  },
+})