@magmamath/students-features 1.2.1-rc.39 → 1.2.1-rc.4

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

@@ -1,141 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Animated, StyleSheet, View } from 'react-native'
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  HeadingVariants,
-  PlayIcon,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
-
-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
-
-  const scaleAnimation = Animated.timing(scaleAnimValue, {
-    toValue: 1,
-    duration: 1000,
-    useNativeDriver: true,
-  })
-
-  const fadeOutAnimation = Animated.timing(fadeAnimValue, {
-    toValue: 0,
-    duration: 1000,
-    useNativeDriver: true,
-  })
-
-  const pulsationAnimation = Animated.loop(
-    Animated.sequence([scaleAnimation, Animated.delay(1000), fadeOutAnimation]),
-  )
-
-  useEffect(() => {
-    if (sizes && withPulsation) {
-      pulsationAnimation.start()
-    }
-  }, [sizes, withPulsation])
-
-  return (
-    <View
-      style={styles.container}
-      onLayout={(event) => {
-        setSizes({
-          width: event.nativeEvent.layout.width + 16,
-          height: event.nativeEvent.layout.height + 18,
-        })
-        setAspectRatio(event.nativeEvent.layout.width / event.nativeEvent.layout.height)
-      }}
-    >
-      {showPulsation && (
-        <Animated.View
-          style={[
-            styles.animatedBackground,
-            {
-              width: sizes.width,
-              height: sizes.height,
-              top: -6,
-              left: -8,
-              transform: [
-                {
-                  scaleX: scaleAnimValue.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [aspectRatio / 10 > 0.7 ? 0.7 : 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: 8,
-  },
-  startButton: {
-    minWidth: 145,
-  },
-  startButtonText: {
-    fontWeight: '700',
-    textTransform: 'uppercase',
-    color: COLORS.NEUTRAL_1,
-  },
-  animatedBackground: {
-    backgroundColor: '#FFBE4E66',
-    position: 'absolute',
-    borderRadius: 50,
-  },
-})

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

@@ -1,65 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,54 +0,0 @@
-import React, { ReactNode } from 'react'
-import { View, StyleSheet, Text, ViewStyle } from 'react-native'
-import { COLORS, FONT_FAMILY } 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: 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

@@ -1,69 +0,0 @@
-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
-
-  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={expandedId === data.domainId}
-        isHighlighted={hoveredId === data.domainId || expandedId === data.domainId}
-        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

@@ -1,230 +0,0 @@
-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'
-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?.()
-        }}
-      >
-        {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]}>
-          {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',
-    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],
-  },
-})