@magmamath/students-features 0.9.113 → 0.9.114-rc.0

package/src/features/pmProgress/PracticeProgress.tsx

@@ -0,0 +1,249 @@
+import React from 'react'
+import { View, StyleSheet, Text, ListRenderItemInfo } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  SPACING,
+  ScrollableList,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@magmamath/react-native-ui'
+import { PracticeProgressPieChart } from './chart/components/PracticeProgressPieChart'
+import { DEFAULT_CONFIG, SAMPLE_DATA } from './temp'
+import { PracticeProgressHeader } from './header/PracticeProgressHeader'
+import { PracticeProgressStats } from './stats/PracticeProgressStats'
+import { ListCard } from './list/ListCard'
+import { ListItemData } from './list/ListItem'
+import { SliceDiamondIcon } from '../../shared/icons/SliceDiamondIcon'
+import { PentagonIcon } from '../../shared/icons/PentagonIcon'
+
+type CardData = {
+  id: string
+  title: string
+  icon: JSX.Element
+  color: string
+  items: ListItemData[]
+  progress: number
+}
+
+const SAMPLE_ITEMS: ListItemData[] = [
+  { title: 'Solve real-world problems', subtitle: '4.NS.3B', skillsLeft: 3 },
+  { title: 'Divide fractions', subtitle: '4.NS.3A', skillsLeft: 0, isFinished: true },
+  { title: 'Add and subtract fractions', subtitle: '4.NS.2A', skillsLeft: 5 },
+  { title: 'Multiply whole numbers', subtitle: '4.NS.1C', skillsLeft: 0, isFinished: true },
+]
+
+const LIST_DATA: CardData[] = [
+  ...Array.from({ length: 11 }, (_, i) => ({
+    id: `algebra-${i}`,
+    title: 'Algebra and Functions',
+    color: COLORS.PRIMARY_INDIGO,
+    icon: <SliceDiamondIcon color={COLORS.PRIMARY_INDIGO} />,
+    items: SAMPLE_ITEMS,
+    progress: Math.round(10 + i * 8),
+  })),
+  {
+    id: 'data-analysis',
+    title: 'Data Analysis and Probability',
+    color: COLORS.PRIMARY_BLUE,
+    icon: <SliceDiamondIcon color={COLORS.PRIMARY_BLUE} />,
+    items: SAMPLE_ITEMS,
+    progress: 63,
+  },
+  {
+    id: 'ratios',
+    title: 'Ratios and Proportionality',
+    color: COLORS.PRIMARY_RED,
+    icon: <SliceDiamondIcon color={COLORS.PRIMARY_RED} />,
+    items: SAMPLE_ITEMS,
+    progress: 27,
+  },
+]
+
+const FLUENCY_DATA: CardData = {
+  id: 'fluency',
+  title: 'Fluency',
+  color: COLORS.PRIMARY_ORANGE,
+  icon: <SliceDiamondIcon color={COLORS.PRIMARY_ORANGE} />,
+  items: SAMPLE_ITEMS,
+  progress: 85,
+}
+
+const SCROLLBAR_WIDTH = 8
+const BADGE_SIZE = 20
+const BADGE_OFFSET = -8
+const BADGE_FONT_SIZE = 12
+const CHART_SIZE = 432
+const STATS_MAX_HEIGHT = 136
+
+const ListFooter = () => (
+  <>
+    <View style={styles.separator} />
+    <ListCard
+      icon={FLUENCY_DATA.icon}
+      title={FLUENCY_DATA.title}
+      color={FLUENCY_DATA.color}
+      items={FLUENCY_DATA.items}
+      progress={FLUENCY_DATA.progress}
+      isFirst
+      isLast
+    />
+  </>
+)
+
+export const PracticeProgress = () => (
+  <View style={styles.container}>
+    <PracticeProgressHeader
+      title="Practice & Progress"
+      buttonLabel="START"
+      grade="Grade 4"
+      nextUp="Next up!"
+      topic="Algebra and functions"
+      topicColor={COLORS.PRIMARY_RED}
+    />
+
+    <View style={styles.content}>
+      <View style={styles.column}>
+        <View style={styles.recommendations}>
+          <View style={styles.badgeWrapper}>
+            <ListCard
+              icon={<PentagonIcon color={COLORS.PRIMARY_YELLOW} />}
+              title="Teacher Recommendations"
+              color={COLORS.PRIMARY_YELLOW}
+              items={SAMPLE_ITEMS}
+              progress={42}
+              isFirst
+              isLast
+              rightContent={
+                <Button size={ButtonSize.SMALL} variant={ButtonVariant.SECONDARY}>
+                  PRACTICE
+                </Button>
+              }
+            />
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>7</Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={styles.cards}>
+          <ScrollableList<CardData>
+            style={styles.scroll}
+            scrollbarWidth={SCROLLBAR_WIDTH}
+            hideShadow
+            data={LIST_DATA}
+            renderItem={({ item, index }: ListRenderItemInfo<CardData>) => (
+              <ListCard
+                icon={item.icon}
+                title={item.title}
+                color={item.color}
+                items={item.items}
+                progress={item.progress}
+                isFirst={index === 0}
+                isLast={index === LIST_DATA.length - 1}
+              />
+            )}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={styles.list}
+            ListFooterComponent={ListFooter}
+          />
+        </View>
+      </View>
+
+      <View style={styles.metrics}>
+        <View style={styles.chart}>
+          <PracticeProgressPieChart data={SAMPLE_DATA} config={DEFAULT_CONFIG} />
+        </View>
+        <View style={styles.stats}>
+          <PracticeProgressStats />
+        </View>
+      </View>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  column: {
+    flex: 1,
+    gap: SPACING[200],
+    marginRight: SPACING[400] + SPACING[50],
+  },
+  recommendations: {
+    backgroundColor: COLORS.NEUTRAL_1,
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'visible',
+  },
+  badgeWrapper: {
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    top: BADGE_OFFSET,
+    right: BADGE_OFFSET,
+    width: BADGE_SIZE,
+    height: BADGE_SIZE,
+    backgroundColor: COLORS.PRIMARY_RED,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BADGE_SIZE / 2,
+  },
+  badgeText: {
+    fontSize: BADGE_FONT_SIZE,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_1,
+    textAlign: 'center',
+  },
+  cards: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    padding: SPACING[200],
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'visible',
+  },
+  scroll: {
+    flex: 1,
+  },
+  list: {
+    marginRight: SPACING[400],
+  },
+  separator: {
+    height: 1,
+    backgroundColor: COLORS.NEUTRAL_4,
+    marginHorizontal: SPACING[100],
+    marginVertical: SPACING[200],
+  },
+  metrics: {
+    height: '100%',
+  },
+  chart: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[250],
+    width: CHART_SIZE,
+    height: CHART_SIZE,
+    marginBottom: SPACING[400],
+    marginTop: SPACING[400],
+  },
+  stats: {
+    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,
+  },
+})

package/src/features/pmProgress/chart/chart.helpers.ts

@@ -0,0 +1,15 @@
+export const getSliceClipId = (index: number | string) => `slice-clip-${index}`
+export const getFillClipId = (index: number | string) => `fill-clip-${index}`
+
+export const dynamicInnerRadius = (sliceCount: number): number => {
+  if (sliceCount > 5) return 16
+  if (sliceCount > 3) return 20
+  return 30
+}
+
+export const dynamicCornerRadius = (fillPercent: number): number => {
+  return 8
+  if (fillPercent >= 75) return 8
+  if (fillPercent >= 40) return 5
+  return 2
+}

package/src/features/pmProgress/chart/chart.types.ts

@@ -0,0 +1,36 @@
+export type SliceInputData = {
+  value: number
+  fillPercent?: number
+  backgroundColor?: string
+  fillColor: string
+  borderColor: string
+}
+
+export type SliceShape = {
+  index: number
+  startAngle: number
+  endAngle: number
+  fillPercent: number
+  backgroundColor: string
+  fillColor: string
+  borderColor: string
+  data: SliceInputData
+}
+
+export type PieChartManagerConfig = {
+  size: number
+  outerRadius: number
+  innerRadius: number | ((sliceCount: number) => number)
+  cornerRadius: number | ((fillPercent: number) => number)
+  gapBetweenSlices: number
+  borderWidth: number
+  pressOffset: number
+  outerArc: {
+    color: string
+    strokeWidth: number
+    dashWidth: number
+  }
+  colors: {
+    background: string
+  }
+}

package/src/features/pmProgress/chart/components/PracticeProgressPieChart.tsx

@@ -0,0 +1,32 @@
+import React, { memo, useMemo, useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import Svg, { G } from 'react-native-svg'
+import { PieChartManager } from '../model/PieChartManager'
+import { SlicesClipPaths } from './SlicesClipPaths'
+import { SlicesPaths } from './SlicesPaths'
+import type { PieChartManagerConfig, SliceInputData } from '../chart.types'
+
+type PracticeProgressPieChartProps = {
+  data: SliceInputData[]
+  config: PieChartManagerConfig
+}
+
+export const PracticeProgressPieChart = memo(({ data, config }: PracticeProgressPieChartProps) => {
+  const [pieChartManager] = useState(() => new PieChartManager(config))
+  const center = pieChartManager.getCenter()
+
+  const slices = useMemo(() => {
+    return pieChartManager.shape.generateSlices(data)
+  }, [data])
+
+  return (
+    <View>
+      <Svg width={config.size} height={config.size}>
+        <G x={center.x} y={center.y}>
+          <SlicesClipPaths slices={slices} pieChartManager={pieChartManager} />
+          <SlicesPaths slices={slices} pieChartManager={pieChartManager} config={config} />
+        </G>
+      </Svg>
+    </View>
+  )
+})

package/src/features/pmProgress/chart/components/SlicesClipPaths.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { ClipPath, Defs, Path } from 'react-native-svg'
+import { getSliceClipId, getFillClipId } from '../chart.helpers'
+import type { SliceShape } from '../chart.types'
+import type { PieChartManager } from '../model/PieChartManager'
+
+type SlicesClipPathsProps = {
+  slices: SliceShape[]
+  pieChartManager: PieChartManager
+}
+
+export const SlicesClipPaths = ({ slices, pieChartManager }: SlicesClipPathsProps) => {
+  return (
+    <Defs>
+      {slices.map((slice) => {
+        const isPartiallyFilled = slice.fillPercent > 0 && slice.fillPercent < 100
+        const shapeId = getSliceClipId(slice.index)
+        const fillId = getFillClipId(slice.index)
+
+        return (
+          <React.Fragment key={slice.index}>
+            <ClipPath id={shapeId}>
+              <Path d={pieChartManager.shape.generateSlicePath(slice)} />
+            </ClipPath>
+
+            {isPartiallyFilled && (
+              <ClipPath id={fillId}>
+                <Path d={pieChartManager.shape.generateFillPath(slice)} />
+              </ClipPath>
+            )}
+          </React.Fragment>
+        )
+      })}
+    </Defs>
+  )
+}

package/src/features/pmProgress/chart/components/SlicesPaths.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Platform, StyleSheet } from 'react-native'
+import { G } from 'react-native-svg'
+import { useUnit } from 'effector-react'
+import { SliceBackgroundColor } from './layers/SliceBackgroundColor'
+import { SliceFillColor } from './layers/SliceFillColor'
+import { SliceArcPattern } from './layers/SliceArcPattern'
+import type { PieChartManagerConfig, SliceShape } from '../chart.types'
+import type { PieChartManager } from '../model/PieChartManager'
+
+type SlicesPathsProps = {
+  slices: SliceShape[]
+  pieChartManager: PieChartManager
+  config: PieChartManagerConfig
+}
+
+export const SlicesPaths = ({ slices, pieChartManager, config }: SlicesPathsProps) => {
+  const highlightedIndex = useUnit(pieChartManager.highlight.$highlightedIndex)
+
+  return (
+    <>
+      {slices.map((slice) => {
+        const id = `${slice.index}`
+        const shapeSvg = pieChartManager.shape.generateSlicePath(slice)
+        const fillSvg = pieChartManager.shape.generateFillPath(slice)
+        const isHighlighted = highlightedIndex === slice.index
+        const translateY = pieChartManager.highlight.getTranslateY(isHighlighted)
+
+        return (
+          <G
+            key={id}
+            style={styles.container}
+            translateY={translateY}
+            onPressIn={() => pieChartManager.highlight.highlightSlice(slice.index)}
+            onPressOut={() => pieChartManager.highlight.resetHighlight()}
+          >
+            <SliceBackgroundColor path={shapeSvg} color={slice.backgroundColor} />
+
+            <SliceFillColor
+              clipPathId={id}
+              shapeSvg={shapeSvg}
+              fillSvg={fillSvg}
+              color={slice.fillColor}
+              percent={slice.fillPercent}
+              borderColor={isHighlighted ? slice.borderColor : undefined}
+              borderWidth={isHighlighted ? config.borderWidth : undefined}
+            />
+
+            <SliceArcPattern
+              clipPathId={id}
+              slice={slice}
+              config={config}
+              pieChartManager={pieChartManager}
+            />
+          </G>
+        )
+      })}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    cursor: 'pointer',
+    ...(Platform.OS === 'web' ? { transition: 'transform 0.1s ease-in-out' } : {}),
+  },
+})

package/src/features/pmProgress/chart/components/layers/SliceArcPattern.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+import { getSliceClipId } from '../../chart.helpers'
+import type { PieChartManagerConfig, SliceShape } from '../../chart.types'
+import type { PieChartManager } from '../../model/PieChartManager'
+
+type SliceArcPatternProps = {
+  clipPathId: string
+  slice: SliceShape
+  pieChartManager: PieChartManager
+  config: PieChartManagerConfig
+}
+
+export const SliceArcPattern = ({
+  clipPathId,
+  slice,
+  pieChartManager,
+  config,
+}: SliceArcPatternProps) => {
+  const patternSizes = pieChartManager.pattern.getPatternTrackSizes()
+
+  return (
+    <G clipPath={`url(#${getSliceClipId(clipPathId)})`}>
+      {patternSizes.map((radius, rowIndex) => {
+        const arcPath = pieChartManager.pattern.generateArcPath(slice, radius)
+        const dashWidth = pieChartManager.pattern.getDashWidthForRadius(radius)
+        const dashOffset = pieChartManager.pattern.getDashOffset(rowIndex, radius)
+
+        return (
+          <Path
+            key={rowIndex}
+            d={arcPath}
+            fill="none"
+            stroke={config.outerArc.color}
+            strokeWidth={config.outerArc.strokeWidth}
+            strokeDasharray={[dashWidth, dashWidth]}
+            strokeDashoffset={dashOffset}
+            strokeLinecap="butt"
+          />
+        )
+      })}
+    </G>
+  )
+}

package/src/features/pmProgress/chart/components/layers/SliceBackgroundColor.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Path } from 'react-native-svg'
+
+type BackgroundLayerProps = {
+  path: string
+  color: string
+}
+
+export const SliceBackgroundColor = ({ path, color }: BackgroundLayerProps) => {
+  return <Path d={path} fill={color} />
+}

package/src/features/pmProgress/chart/components/layers/SliceFillColor.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+import { getSliceClipId, getFillClipId } from '../../chart.helpers'
+
+type SliceFillColorProps = {
+  clipPathId: string
+  shapeSvg: string
+  fillSvg: string
+  color: string
+  percent: number
+  borderColor?: string
+  borderWidth?: number
+}
+
+export const SliceFillColor = ({
+  clipPathId,
+  shapeSvg,
+  fillSvg,
+  color,
+  percent,
+  borderColor,
+  borderWidth,
+}: SliceFillColorProps) => {
+  const isFullyFilled = percent >= 100
+  const isPartiallyFilled = percent > 0
+  const hasBorder = borderColor != null && borderWidth != null && borderWidth > 0
+
+  if (isFullyFilled) {
+    return (
+      <G clipPath={`url(#${getSliceClipId(clipPathId)})`}>
+        <Path
+          d={shapeSvg}
+          fill={color}
+          stroke={hasBorder ? borderColor : undefined}
+          strokeWidth={hasBorder ? borderWidth * 2 : undefined}
+        />
+      </G>
+    )
+  }
+
+  if (isPartiallyFilled) {
+    return (
+      <G clipPath={`url(#${getFillClipId(clipPathId)})`}>
+        <Path
+          d={fillSvg}
+          fill={color}
+          stroke={hasBorder ? borderColor : undefined}
+          strokeWidth={hasBorder ? borderWidth * 2 : undefined}
+        />
+      </G>
+    )
+  }
+
+  return null
+}

package/src/features/pmProgress/chart/model/ArcPatternGenerator.ts

@@ -0,0 +1,48 @@
+import type { PieChartManagerConfig, SliceShape } from '../chart.types'
+
+export class OuterArcPatternGenerator {
+  constructor(private readonly config: PieChartManagerConfig) {}
+
+  public generateArcPath(slice: SliceShape, radius: number) {
+    const gapAngle = this.config.gapBetweenSlices / (2 * radius)
+    const startAngle = slice.startAngle + gapAngle
+    const endAngle = slice.endAngle - gapAngle
+
+    const startPoint = this.polarToCartesian(radius, startAngle)
+    const endPoint = this.polarToCartesian(radius, endAngle)
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0
+
+    return `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endPoint.x} ${endPoint.y}`
+  }
+
+  /** Returns the sizes of the two rings where the checkerboard dashes are drawn. */
+  public getPatternTrackSizes(): [number, number] {
+    const { outerRadius, outerArc } = this.config
+    return [
+      outerRadius - outerArc.strokeWidth / 2,
+      outerRadius - outerArc.strokeWidth * 1.5,
+    ]
+  }
+
+  public getDashWidthForRadius(radius: number) {
+    return this.config.outerArc.dashWidth * (radius / this.config.outerRadius)
+  }
+
+  public getDashOffset(rowIndex: number, radius: number) {
+    const dashAngle = this.config.outerArc.dashWidth / this.config.outerRadius
+    const dashWidthAtRadius = dashAngle * radius
+    const baseOffset = dashWidthAtRadius / 2
+
+    if (rowIndex === 1) {
+      return baseOffset - dashWidthAtRadius
+    }
+    return baseOffset
+  }
+
+  private polarToCartesian(radius: number, angleInRadians: number) {
+    return {
+      x: radius * Math.sin(angleInRadians),
+      y: -radius * Math.cos(angleInRadians),
+    }
+  }
+}

package/src/features/pmProgress/chart/model/PieChartManager.ts

@@ -0,0 +1,20 @@
+import { SliceShapeGenerator } from './SliceShapeGenerator'
+import { OuterArcPatternGenerator } from './ArcPatternGenerator'
+import { SliceHighlight } from './SliceHighlight'
+import type { PieChartManagerConfig } from '../chart.types'
+
+export class PieChartManager {
+  public readonly shape: SliceShapeGenerator
+  public readonly pattern: OuterArcPatternGenerator
+  public readonly highlight: SliceHighlight
+
+  constructor(public readonly config: PieChartManagerConfig) {
+    this.shape = new SliceShapeGenerator(config)
+    this.pattern = new OuterArcPatternGenerator(config)
+    this.highlight = new SliceHighlight(config)
+  }
+
+  public getCenter() {
+    return { x: this.config.size / 2, y: this.config.size / 2 }
+  }
+}

package/src/features/pmProgress/chart/model/SliceHighlight.ts

@@ -0,0 +1,17 @@
+import { createEvent, createStore } from 'effector'
+import type { PieChartManagerConfig } from '../chart.types'
+
+export class SliceHighlight {
+  public readonly highlightSlice = createEvent<number>()
+  public readonly resetHighlight = createEvent()
+
+  public readonly $highlightedIndex = createStore<number | null>(null)
+    .on(this.highlightSlice, (_, index) => index)
+    .reset(this.resetHighlight)
+
+  constructor(private readonly config: PieChartManagerConfig) {}
+
+  public getTranslateY(isHighlighted: boolean): number {
+    return isHighlighted ? -this.config.pressOffset : 0
+  }
+}