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

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

@@ -0,0 +1,71 @@
+import { arc, pie } from 'd3-shape'
+import type { PieChartManagerConfig, SliceInputData, SliceShape } from '../chart.types'
+
+export class SliceShapeGenerator {
+  private innerRadius = 0
+  private readonly d3Pie = pie<SliceInputData>()
+    .value(({ value }) => value)
+    .sort(null)
+
+  constructor(private readonly config: PieChartManagerConfig) {}
+
+  public generateSlices(data: SliceInputData[]): SliceShape[] {
+    this.innerRadius = this.getInnerRadius(data.length)
+
+    return this.d3Pie(data).map((datum, index) => ({
+      index,
+      startAngle: datum.startAngle,
+      endAngle: datum.endAngle,
+      fillPercent: datum.data.fillPercent ?? 0,
+      backgroundColor: datum.data.backgroundColor ?? this.config.colors.background,
+      fillColor: datum.data.fillColor,
+      borderColor: datum.data.borderColor,
+      data: datum.data,
+    }))
+  }
+
+  public generateSlicePath(slice: SliceShape): string {
+    const cornerRadius = this.getCornerRadius(100)
+    return this.buildArc(slice, this.config.outerRadius, cornerRadius)
+  }
+
+  public generateFillPath(slice: SliceShape): string {
+    const innerRadius = this.innerRadius
+    const outerRadius = this.config.outerRadius
+    const fillRadius = innerRadius + (outerRadius - innerRadius) * (slice.fillPercent / 100)
+    const radialThickness = fillRadius - innerRadius
+    const cornerRadius = Math.min(this.getCornerRadius(slice.fillPercent), radialThickness / 2)
+
+    return this.buildArc(slice, fillRadius, cornerRadius)
+  }
+
+  private getInnerRadius(sliceCount: number): number {
+    const { innerRadius } = this.config
+    return typeof innerRadius === 'function' ? innerRadius(sliceCount) : innerRadius
+  }
+
+  private getCornerRadius(fillPercent: number): number {
+    const { cornerRadius } = this.config
+    return typeof cornerRadius === 'function' ? cornerRadius(fillPercent) : cornerRadius
+  }
+
+  private get padAngle(): number {
+    return this.config.gapBetweenSlices / this.config.outerRadius
+  }
+
+  private buildArc(slice: SliceShape, outerRadius: number, cornerRadius: number): string {
+    const innerRadius = this.innerRadius
+
+    return arc()
+      .outerRadius(outerRadius)
+      .innerRadius(innerRadius)
+      .cornerRadius(cornerRadius)
+      .padAngle(this.padAngle)
+      .padRadius(this.config.outerRadius)({
+      startAngle: slice.startAngle,
+      endAngle: slice.endAngle,
+      innerRadius,
+      outerRadius,
+    }) as string
+  }
+}

package/src/features/pmProgress/header/PracticeProgressHeader.tsx

@@ -0,0 +1,178 @@
+import React, { useState } from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  Dropdown,
+  HeadingVariants,
+  Menu,
+  Typography,
+  CaretDownIcon,
+  CaretUpIcon,
+  Button,
+  ButtonVariant,
+  SPACING,
+  ButtonSize,
+  PlayIcon,
+  COLORS,
+  ButtonColor,
+} from '@magmamath/react-native-ui'
+import { SketchArrowRight } from '../../../shared/icons/SketchArrowRight'
+import { SliceDiamondIcon } from '../../../shared/icons/SliceDiamondIcon'
+
+// TODO: temp, remove and pass from props
+const items = [
+  {
+    key: 'item-1',
+    title: 'Grade1',
+  },
+  {
+    key: 'item-1',
+    title: 'Grade2',
+  },
+  {
+    key: 'item-1',
+    title: 'Grade3',
+  },
+]
+
+type PracticeProgressHeaderProps = {
+  title: string
+  grade: string
+  nextUp: string
+  topic: string
+  buttonLabel: string
+  topicColor: string
+}
+
+export const PracticeProgressHeader = ({
+  title,
+  grade,
+  nextUp,
+  topic,
+  buttonLabel,
+  topicColor,
+}: PracticeProgressHeaderProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const CaretIcon = isDropdownOpen ? CaretUpIcon : CaretDownIcon
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.title}>
+        <Typography variant={HeadingVariants.H2} style={styles.dark}>
+          {title}
+        </Typography>
+        <Dropdown
+          isOpen={isDropdownOpen}
+          anchor={
+            <Button
+              variant={ButtonVariant.TERTIARY}
+              onPress={() => setIsDropdownOpen((prev) => !prev)}
+            >
+              <Typography variant={HeadingVariants.H8} style={styles.dark}>
+                {grade}
+              </Typography>
+              <View style={styles.caret}>
+                <CaretIcon color={COLORS.NEUTRAL_9} />
+              </View>
+            </Button>
+          }
+        >
+          <Menu style={styles.menu} items={items} />
+        </Dropdown>
+      </View>
+
+      <View style={styles.nextUp}>
+        <View style={styles.content}>
+          <View style={styles.subtitle}>
+            <Typography variant={HeadingVariants.H2} style={styles.dark}>
+              {nextUp}
+            </Typography>
+          </View>
+          <View style={[styles.row, styles.tilted]}>
+            <Typography variant={HeadingVariants.H7} style={styles.muted}>
+              {topic}
+            </Typography>
+            <View style={styles.diamond}>
+              <SliceDiamondIcon color={topicColor} />
+            </View>
+          </View>
+        </View>
+        <View style={styles.arrow}>
+          <SketchArrowRight />
+        </View>
+        <Button
+          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}>
+            {buttonLabel}
+          </Typography>
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: SPACING[400],
+  },
+  title: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+  },
+  dark: {
+    color: COLORS.NEUTRAL_9,
+  },
+  caret: {
+    marginLeft: SPACING[100],
+  },
+  menu: {
+    top: SPACING[100],
+    minWidth: 110,
+  },
+  nextUp: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[400],
+  },
+  content: {
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  subtitle: {
+    transform: [{ rotate: '355deg' }],
+    marginRight: SPACING[300],
+  },
+  tilted: {
+    transform: [{ rotate: '355deg' }],
+  },
+  row: {
+    flexDirection: 'row',
+    gap: SPACING[100],
+  },
+  muted: {
+    color: COLORS.NEUTRAL_8,
+  },
+  diamond: {
+    bottom: 10,
+  },
+  arrow: {
+    transform: [{ rotate: '358deg' }],
+  },
+  startButton: {
+    minWidth: 145,
+  },
+  startButtonText: {
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    color: COLORS.NEUTRAL_1,
+  },
+})

package/src/features/pmProgress/index.ts

@@ -0,0 +1 @@
+export { PracticeProgress } from './PracticeProgress'

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

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { Pressable, View, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  CaretDownIcon,
+  CaretUpIcon,
+  COLORS,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { ListItem, type ListItemData } from './ListItem'
+
+const HEADER_HEIGHT = 60
+const RADIUS = BORDER_RADIUS[200]
+const PROGRESS_BAR_WIDTH = 50
+const PROGRESS_BAR_HEIGHT = 10
+
+type ListCardProps = {
+  title: string
+  icon: JSX.Element
+  color: string
+  items: ListItemData[]
+  progress?: number
+  rightContent?: React.ReactNode
+  isFirst?: boolean
+  isLast?: boolean
+}
+
+export const ListCard = ({
+  title,
+  icon,
+  color,
+  items,
+  progress = 0,
+  rightContent,
+  isFirst,
+  isLast,
+}: ListCardProps) => {
+  const [expanded, setExpanded] = useState(false)
+  const Caret = expanded ? CaretUpIcon : CaretDownIcon
+
+  return (
+    <View style={[styles.container, isFirst && styles.first, isLast && styles.last]}>
+      <Pressable style={styles.header} onPress={() => setExpanded((prev) => !prev)}>
+        {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: `${progress}%`, backgroundColor: color }]}
+              />
+            </View>
+          </View>
+        )}
+      </Pressable>
+      {expanded && (
+        <View style={styles.items}>
+          {items.map((item, index) => (
+            <ListItem key={index} {...item} />
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_4,
+    borderTopWidth: 0,
+    overflow: 'hidden',
+  },
+  first: {
+    borderTopWidth: 1,
+    borderTopLeftRadius: RADIUS,
+    borderTopRightRadius: RADIUS,
+  },
+  last: {
+    borderBottomLeftRadius: RADIUS,
+    borderBottomRightRadius: RADIUS,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: HEADER_HEIGHT,
+    padding: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_2,
+  },
+  caret: {
+    marginLeft: SPACING[400],
+  },
+  title: {
+    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,
+  },
+})

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

@@ -0,0 +1,113 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { ArrowRightIcon, CheckIcon } from '@magmamath/react-native-ui'
+
+const TEXT_COLOR = '#4D4D63'
+const SUBTITLE_COLOR = '#80808F'
+const FINISHED_BG = '#EFFBF5'
+const FINISHED_TITLE = '#00804A'
+const FINISHED_SUBTITLE = '#29A96F'
+const FINISHED_ICON = '#5CD497'
+const SHADOW_COLOR = '#333333'
+const ICON_SIZE = 25
+const FONT_FAMILY = 'Buenos Aires'
+
+export type ListItemData = {
+  title: string
+  subtitle: string
+  skillsLeft: number
+  isFinished?: boolean
+}
+
+type ListItemProps = ListItemData
+
+export const ListItem = ({ title, subtitle, skillsLeft, isFinished = false }: ListItemProps) => {
+  return (
+    <View style={[styles.card, isFinished && styles.finished]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, isFinished && styles.titleFinished]} numberOfLines={1}>
+          {title}
+        </Text>
+        <Text style={[styles.subtitle, isFinished && styles.subtitleFinished]} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      </View>
+      <View style={styles.trailing}>
+        {!isFinished && <Text style={styles.skills}>{skillsLeft} skills left</Text>}
+        <View style={styles.icon}>
+          {isFinished ? (
+            <CheckIcon color={FINISHED_ICON} />
+          ) : (
+            <ArrowRightIcon color={TEXT_COLOR} />
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingLeft: 32,
+    paddingRight: 16,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    gap: 8,
+    shadowColor: SHADOW_COLOR,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+  finished: {
+    backgroundColor: FINISHED_BG,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.4,
+    shadowRadius: 0.5,
+    elevation: 1,
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    color: TEXT_COLOR,
+    fontSize: 13,
+    fontFamily: FONT_FAMILY,
+    fontWeight: '400',
+    lineHeight: 18.2,
+  },
+  titleFinished: {
+    color: FINISHED_TITLE,
+  },
+  subtitle: {
+    color: SUBTITLE_COLOR,
+    fontSize: 10,
+    fontFamily: FONT_FAMILY,
+    fontWeight: '400',
+    lineHeight: 14,
+  },
+  subtitleFinished: {
+    color: FINISHED_SUBTITLE,
+  },
+  trailing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  skills: {
+    color: TEXT_COLOR,
+    fontSize: 13,
+    fontFamily: FONT_FAMILY,
+    fontWeight: '400',
+    lineHeight: 18.2,
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/features/pmProgress/recs/TeacherRecs.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+
+export const TeacherRecs = () => {
+  return (
+    <View>
+      <Text></Text>
+    </View>
+  )
+}

package/src/features/pmProgress/stats/PracticeProgressStats.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { COLORS, SelectGroup, SelectOptionColor, SPACING } from '@magmamath/react-native-ui'
+import { StatsCard } from './StatsCard'
+import { StarIcon } from '../../../shared/icons/StarIcon'
+import { TimerIcon } from '../../../shared/icons/TimerIcon'
+
+type Option = {
+  key: string
+  title: string
+}
+
+const OPTIONS: Option[] = [
+  { key: '1', title: 'This week' },
+  { key: '2', title: 'Last week' },
+  { key: '3', title: 'All time' },
+]
+
+const DEFAULT_SELECTED = [OPTIONS[0]]
+
+export const PracticeProgressStats = () => {
+  const [selected, setSelected] = useState<Option[]>(DEFAULT_SELECTED)
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.cards}>
+        <StatsCard
+          value="46"
+          label="Practice stars"
+          color={COLORS.PRIMARY_YELLOW}
+          icon={<StarIcon />}
+        />
+        <StatsCard
+          value="24m"
+          label="Practice time"
+          color={COLORS.PRIMARY_PURPLE}
+          icon={<TimerIcon />}
+        />
+      </View>
+
+      <SelectGroup
+        color={SelectOptionColor.GREY}
+        options={OPTIONS}
+        selectedOptions={selected}
+        onOptionChange={(option) => setSelected([option as Option])}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: SPACING[100],
+  },
+  cards: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: SPACING[300],
+  },
+})

package/src/features/pmProgress/stats/StatsCard.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { View, StyleSheet, Text, Platform } from 'react-native'
+import {
+  COLORS,
+  HeadingVariants,
+  ParagraphVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+type StatsCardProps = {
+  value: string
+  label: string
+  color: string
+  icon: JSX.Element
+}
+
+export const StatsCard = ({ value, label, color, icon }: StatsCardProps) => {
+  return (
+    <View style={[styles.card, { borderColor: color }]}>
+      <View
+        style={{
+          width: 42,
+          height: 42,
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: '100%',
+          backgroundColor: color,
+        }}
+      >
+        {icon}
+      </View>
+      <View>
+        <Text style={{ color, fontSize: 32, fontWeight: 700, fontFamily: 'Buenos Aires' }}>
+          {value}
+        </Text>
+        <Text
+          style={{ color: COLORS.NEUTRAL_8, fontSize: 10, fontFamily: 'Buenos Aires', top: -6 }}
+        >
+          {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,
+  },
+})

package/src/features/pmProgress/temp.ts

@@ -0,0 +1,67 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import { dynamicInnerRadius, dynamicCornerRadius } from './chart/chart.helpers'
+import type { PieChartManagerConfig, SliceInputData } from './chart/chart.types'
+
+export const SAMPLE_DATA: SliceInputData[] = [
+  {
+    value: 1, // Large slice
+    fillPercent: 100,
+    backgroundColor: COLORS.NEUTRAL_4,
+    fillColor: COLORS.PRIMARY_BLUE,
+    borderColor: COLORS.BLUE_6,
+  },
+  {
+    value: 1,
+    fillPercent: 75,
+    backgroundColor: COLORS.NEUTRAL_4,
+    fillColor: COLORS.PRIMARY_TURQUOISE,
+    borderColor: COLORS.TURQUOISE_6,
+  }, // Small
+  {
+    value: 1,
+    fillPercent: 75,
+    backgroundColor: COLORS.NEUTRAL_4,
+    fillColor: COLORS.PRIMARY_TURQUOISE,
+    borderColor: COLORS.TURQUOISE_6,
+  }, // Small
+  {
+    value: 1,
+    fillPercent: 50,
+    backgroundColor: COLORS.NEUTRAL_4,
+    fillColor: COLORS.PRIMARY_GREEN,
+    borderColor: COLORS.GREEN_6,
+  },
+  {
+    value: 1, // Small slice
+    fillPercent: 20,
+    backgroundColor: COLORS.NEUTRAL_4,
+    fillColor: COLORS.PRIMARY_ORANGE,
+    borderColor: COLORS.ORANGE_6,
+  },
+  {
+    value: 1, // Large slice
+    fillPercent: 90,
+    backgroundColor: COLORS.NEUTRAL_4,
+    fillColor: COLORS.PRIMARY_PURPLE,
+    borderColor: COLORS.PURPLE_6,
+  },
+]
+
+export const DEFAULT_CONFIG: PieChartManagerConfig = {
+  size: 430,
+  outerRadius: 210,
+  innerRadius: dynamicInnerRadius,
+  gapBetweenSlices: 8,
+  cornerRadius: dynamicCornerRadius,
+  // minSlicePercent: 5, // Minimum visual size for any slice (prevents tiny slices)
+  pressOffset: 4, // How far slice moves on Y axis when pressed
+  borderWidth: 4, // Stroke width when pressed
+  colors: {
+    background: 'white', // page background color don't update
+  },
+  outerArc: {
+    color: '#FFFFFF40',
+    strokeWidth: 11.75, // Height of each pattern row
+    dashWidth: 22, // Width of dashes (fixed for all slices)
+  },
+}

package/src/index.ts

@@ -9,5 +9,6 @@ export * from './features/problemSelector'
 export * from './features/gifCelebrations'
 export * from './features/exampleSolution'
 export * from './features/keyboard'
+export * from './features/pmProgress'
 export * from './features/openEnded'
 export * from './shared/icons'