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

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,164 @@
+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
+
+  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>
+        <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['1'],
+  },
+  finished: {
+    backgroundColor: COLORS.GREEN_1,
+    ...SHADOWS['1'],
+  },
+  hovered: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    boxShadow:
+      '0px 0px 1px 0px #33333366, 0px 1px 3px 0px #3333331A, 4px 4px 10px rgba(51, 51, 51, 0.15)',
+  },
+  hoveredFinished: {
+    backgroundColor: COLORS.GREEN_2,
+  },
+  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],
+  },
+})

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

@@ -0,0 +1,76 @@
+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 loaderOpeningId = useUnit(model.solving.$loaderOpeningId)
+
+  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) => {
+              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}
+            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/locked/PmStatusOverlay.tsx

@@ -0,0 +1,101 @@
+import React, { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  COLORS,
+  ErrorIcon,
+  HeadingVariants,
+  LockIcon,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+import { TranslationKeys } from '../../../../shared/translation/types'
+import { PmProgressStatus } from '../../shared/pmProgress.constants'
+
+type EmptyStateVariant = {
+  icon: ReactNode
+  circleColor: string
+  titleKey: TranslationKeys
+  subtitleKey: TranslationKeys
+}
+
+const PM_EMPTY_STATE_VARIANTS: Record<PmProgressStatus, EmptyStateVariant> = {
+  [PmProgressStatus.LOCKED]: {
+    icon: <LockIcon color={COLORS.NEUTRAL_6} size={40} />,
+    circleColor: COLORS.NEUTRAL_2,
+    titleKey: 'pmProgress.allLockedTitle',
+    subtitleKey: 'pmProgress.allLockedSubtitle',
+  },
+  [PmProgressStatus.ERROR]: {
+    icon: <ErrorIcon color={COLORS.PRIMARY_RED} size={40} />,
+    circleColor: COLORS.RED_1,
+    titleKey: 'pmProgress.initErrorTitle',
+    subtitleKey: 'pmProgress.initErrorSubtitle',
+  },
+}
+
+type PmStatusOverlayProps = {
+  status: PmProgressStatus
+}
+
+export const PmStatusOverlay = ({ status }: PmStatusOverlayProps) => {
+  const t = useText()
+
+  const variant = PM_EMPTY_STATE_VARIANTS[status]
+  if (!variant) return null
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={[styles.iconCircle, { backgroundColor: variant.circleColor }]}>
+          {variant.icon}
+        </View>
+        <View style={styles.text}>
+          <Typography variant={HeadingVariants.H2} style={styles.title}>
+            {t(variant.titleKey)}
+          </Typography>
+          <Typography variant={HeadingVariants.H7} style={styles.subtitle}>
+            {t(variant.subtitleKey)}
+          </Typography>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+    gap: SPACING[500],
+    paddingBottom: SPACING[800],
+  },
+  iconCircle: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    alignItems: 'center',
+    gap: SPACING[200],
+    maxWidth: 340,
+  },
+  title: {
+    color: COLORS.NEUTRAL_9,
+    textAlign: 'center',
+    fontSize: 24,
+    fontWeight: '500',
+  },
+  subtitle: {
+    color: COLORS.NEUTRAL_7,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '400',
+  },
+})