@magmamath/students-features 1.2.1-rc.2 → 1.2.1-rc.21

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

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react'
+import { View, StyleSheet, Text, Platform } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+
+type StatsCardProps = {
+  value: number | string
+  label: string
+  color: string
+  icon: ReactNode
+}
+
+export const StatsCard = ({ value, label, color, icon }: StatsCardProps) => {
+  return (
+    <View style={[styles.card, { borderColor: color }]}>
+      <View style={[styles.iconContainer, { backgroundColor: color }]}>{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: 12,
+    borderWidth: 4,
+    padding: 8,
+    gap: 8,
+  },
+  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,58 @@
+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 { CustomDomain, 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)
+
+  if (!data) return null
+
+  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(CustomDomain.FLUENCY)}
+        onItemPress={async (item) => {
+          const skill = await model.solving.start({
+            type: SolvingFlow.STANDARD,
+            standardId: item.standardId,
+          })
+          onStandardPress?.(skill)
+        }}
+        isFirst
+        isLast
+        isExpanded={expandedId === CustomDomain.FLUENCY}
+        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 } 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'
+import { SkillsCount } from '../../shared/pmProgress.types'
+
+const HEADER_HEIGHT = 60
+const PROGRESS_BAR_WIDTH = 50
+const PROGRESS_BAR_HEIGHT = 10
+
+export type ListCardItem = {
+  id: string
+  title: string
+  subtitle: string
+  skillsCount: SkillsCount
+}
+
+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
+}
+
+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,
+}: ListCardProps<T>) => {
+  const t = useText()
+  const [isHovered, setIsHovered] = useState(false)
+
+  const { visible, 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?.()
+        }}
+      >
+        {icon}
+        <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]}>
+          {visible.map((item) => {
+            const skillsLeft = item.skillsCount.total - item.skillsCount.achieved
+            return (
+              <ListItem
+                key={item.id}
+                title={item.title}
+                skillsLeft={skillsLeft}
+                subtitle={item.subtitle}
+                isFinished={skillsLeft === 0}
+                isSkillsLeftHidden={isSkillsLeftHidden}
+                onPress={() => onItemPress?.(item)}
+              />
+            )
+          })}
+          {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',
+    cursor: 'pointer',
+  },
+  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,
+    cursor: 'pointer',
+  },
+  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,136 @@
+import React, { useState } from 'react'
+import { View, Pressable, StyleSheet } from 'react-native'
+import {
+  ArrowRightIcon,
+  CheckIcon,
+  COLORS,
+  FONT_FAMILY,
+  HeadingVariants,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+
+const FINISHED_BG = '#EFFBF5'
+const FINISHED_TITLE = '#00804A'
+const FINISHED_SUBTITLE = '#29A96F'
+const FINISHED_ICON = '#5CD497'
+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
+  onPress?: () => void
+  isSkillsLeftHidden?: boolean
+}
+
+export const ListItem = ({
+  title,
+  subtitle,
+  skillsLeft,
+  isFinished = false,
+  onPress,
+  isSkillsLeftHidden = false,
+}: ListItemProps) => {
+  const t = useText()
+  const [isHovered, setIsHovered] = useState(false)
+  const isSkillsLeftVisible = skillsLeft > 0 && !isFinished && !isSkillsLeftHidden
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.card, isFinished && styles.finished, isHovered && styles.hovered]}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+    >
+      <View style={styles.content}>
+        <Typography
+          variant={HeadingVariants.H10}
+          style={[styles.title, isFinished && styles.titleFinished]}
+          numberOfLines={1}
+        >
+          {title}
+        </Typography>
+        <Typography
+          style={[styles.subtitle, isFinished && styles.subtitleFinished]}
+          numberOfLines={1}
+        >
+          {subtitle}
+        </Typography>
+      </View>
+      <View style={styles.trailing}>
+        {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={FINISHED_ICON} />
+          ) : (
+            <ArrowRightIcon color={COLORS.NEUTRAL_9} />
+          )}
+        </View>
+      </View>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: CARD_HEIGHT,
+    paddingLeft: 32,
+    paddingRight: 16,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    gap: 8,
+    boxShadow: '0px 0px 1px 0px #33333366, 0px 1px 3px 0px #3333331A',
+  },
+  finished: {
+    backgroundColor: FINISHED_BG,
+    boxShadow: '0px 0px 1px 0px #33333366, 0px 1px 3px 0px #3333331A',
+  },
+  hovered: {
+    backgroundColor: '#FAFAFB',
+    boxShadow:
+      '0px 0px 1px 0px #33333366, 0px 1px 3px 0px #3333331A, 4px 4px 10px rgba(51, 51, 51, 0.15)',
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+  },
+  titleFinished: {
+    color: FINISHED_TITLE,
+  },
+  subtitle: {
+    color: COLORS.NEUTRAL_7,
+    fontSize: SUBTITLE_FONT_SIZE,
+    fontFamily: FONT_FAMILY.buenosAires,
+    lineHeight: SUBTITLE_LINE_HEIGHT,
+  },
+  subtitleFinished: {
+    color: FINISHED_SUBTITLE,
+  },
+  trailing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  skills: {
+    color: COLORS.NEUTRAL_9,
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import { BORDER_RADIUS, COLORS, ScrollableList, SPACING } from '@magmamath/react-native-ui'
+import { ListCard } from './ListCard'
+import { Fluency } from './Fluency'
+import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { isFluencyDomain } from '../../shared/pmProgress.helpers'
+import { SolvingFlow } from '../../shared/pmProgress.constants'
+
+export const PmDomainList = () => {
+  const { model, onStandardPress } = usePmProgress()
+  const domains = useUnit(model.tree.$domains)
+  const expandedId = useUnit(model.highlight.$expandedId)
+  const hoveredId = useUnit(model.highlight.$hoveredId)
+
+  const fluency = domains.find(({ title }) => isFluencyDomain(title))
+  const list = fluency ? domains.filter(({ title }) => !isFluencyDomain(title)) : domains
+
+  return (
+    <View style={styles.container}>
+      <ScrollableList
+        data={list}
+        hideShadow
+        scrollbarWidth={8}
+        style={styles.scroll}
+        ListFooterComponent={<Fluency data={fluency} />}
+        keyExtractor={(item) => item.domainId}
+        renderItem={({ item, index }) => (
+          <ListCard
+            title={item.title}
+            items={item.standards.map((standard) => ({ ...standard, id: standard.standardId }))}
+            progress={item.scorePercentage}
+            color={item.color}
+            onPress={() => model.highlight.expand(item.domainId)}
+            onHoverIn={() => model.highlight.hover(item.domainId)}
+            onHoverOut={() => model.highlight.hover(null)}
+            onItemPress={async (item) => {
+              const skill = await model.solving.start({
+                type: SolvingFlow.STANDARD,
+                standardId: item.standardId,
+              })
+              onStandardPress?.(skill)
+            }}
+            isLast={index === list.length - 1}
+            isFirst={index === 0}
+            isExpanded={expandedId === item.domainId}
+            isHighlighted={hoveredId === item.domainId || expandedId === item.domainId}
+            icon={<SliceDiamondIcon color={item.color} />}
+          />
+        )}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+    padding: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[400],
+  },
+  scroll: {
+    flex: 1,
+  },
+})

package/src/features/pmProgress/components/recs/PmTeacherRecs.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { ListCard } from '../list/ListCard'
+import { PentagonIcon } from '../../../../shared/icons/PentagonIcon'
+import {
+  BORDER_RADIUS,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  COLORS,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+import { useStoreMap, useUnit } from 'effector-react'
+import { CustomDomain, SolvingFlow } from '../../shared/pmProgress.constants'
+import { usePmProgress } from '../../context/PmProgressContext'
+
+export const PmTeacherRecs = () => {
+  const t = useText()
+  const { model, onPracticePress, onTeacherRecommendationPress } = usePmProgress()
+  const expandedId = useUnit(model.highlight.$expandedId)
+
+  // TODO: rework this, probably split and pass renderer to ListCard
+  const recommendations = useStoreMap(model.recommendations.$teacher, ({ items }) =>
+    items.map((skill) => ({
+      id: skill._id,
+      skillId: skill._id,
+      title: skill.nameTranslations,
+      subtitle: skill.shortDescriptionTranslations,
+      skillsCount: { total: 1, achieved: 0, failed: 0 }, // TODO: fix this to be able to determine if isFinished - I think need to find this in skillsMapping or something??
+    })),
+  )
+
+  if (!recommendations.length) return null
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.wrapper}>
+        <ListCard
+          title={t('pmProgress.teacherRecs')}
+          items={recommendations}
+          maxItems={3}
+          color={COLORS.PRIMARY_YELLOW}
+          expandedColor={COLORS.YELLOW_1}
+          onPress={() => model.highlight.expand(CustomDomain.TEACHER)}
+          onItemPress={async (item) => {
+            const skill = await model.solving.start({
+              type: SolvingFlow.TEACHER,
+              skillId: item.skillId,
+            })
+            onPracticePress?.(skill)
+          }}
+          isLast
+          isFirst
+          isSkillsLeftHidden
+          isExpanded={expandedId === CustomDomain.TEACHER}
+          isHighlighted={expandedId === CustomDomain.TEACHER}
+          icon={<PentagonIcon color={COLORS.PRIMARY_YELLOW} />}
+          rightContent={
+            <Button
+              onPress={async () => {
+                const skill = await model.solving.start({ type: SolvingFlow.TEACHER })
+                onTeacherRecommendationPress?.(skill)
+              }}
+              size={ButtonSize.SMALL}
+              variant={ButtonVariant.SECONDARY}
+            >
+              {t('pmProgress.practiceButton')}
+            </Button>
+          }
+        />
+        {recommendations.length > 0 && (
+          <View style={styles.badge}>
+            <Text style={styles.text}>{recommendations.length}</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'visible',
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  wrapper: {
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    top: -8,
+    right: -8,
+    width: 20,
+    height: 20,
+    backgroundColor: COLORS.PRIMARY_RED,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+  },
+  text: {
+    textAlign: 'center',
+    fontSize: 12,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_1,
+  },
+})