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

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

@@ -1,90 +0,0 @@
-import React from 'react'
-import { Platform, StyleSheet, ViewStyle } from 'react-native'
-import { G, Path } 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 { usePmProgress } from '../../../context/PmProgressContext'
-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 { model } = usePmProgress()
-  const [hoveredId, expandedId, domains] = useUnit([
-    model.highlight.$hoveredId,
-    model.highlight.$expandedId,
-    model.tree.$domains,
-  ])
-
-  const highlightedId = hoveredId ?? expandedId
-  const highlightedIndex = highlightedId
-    ? domains.findIndex(({ domainId }) => domainId === highlightedId)
-    : null
-
-  return (
-    <>
-      {slices.map((slice) => {
-        const id = `${slice.index}`
-        const shapeSvg = pieChartManager.shape.generateSlicePath(slice)
-        const fillSvg = pieChartManager.shape.generateFillPath(slice)
-        const fillBorderSvg = pieChartManager.shape.generateFillBorderPath(slice)
-        const isHighlighted = highlightedIndex === slice.index
-        const translateY = pieChartManager.highlight.getTranslateY(isHighlighted)
-        const borderWidth = isHighlighted ? config.borderWidth : 0
-        const domainId = domains[slice.index]?.domainId
-
-        return (
-          <G
-            key={id}
-            style={styles.container}
-            onPress={() => domainId && model.highlight.expand(domainId)}
-            onMouseEnter={() => domainId && model.highlight.hover(domainId)}
-            onMouseLeave={() => model.highlight.hover(null)}
-          >
-            <Path d={shapeSvg} fill="transparent" />
-            <G style={styles.visual} transform={`translate(0, ${translateY})`}>
-              <SliceBackgroundColor
-                path={shapeSvg}
-                color={isHighlighted ? config.colors.highlightedBackground : slice.backgroundColor}
-              />
-
-              <SliceFillColor
-                clipPathId={id}
-                shapeSvg={shapeSvg}
-                fillSvg={fillSvg}
-                fillBorderSvg={fillBorderSvg}
-                color={slice.fillColor}
-                percent={slice.fillPercent}
-                borderColor={isHighlighted ? slice.borderColor : undefined}
-                borderWidth={borderWidth || undefined}
-              />
-
-              <SliceArcPattern
-                clipPathId={id}
-                slice={slice}
-                config={config}
-                pieChartManager={pieChartManager}
-              />
-            </G>
-          </G>
-        )
-      })}
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    cursor: 'pointer',
-  },
-  visual: {
-    ...Platform.select({ web: { transition: 'transform 0.1s ease-in-out' } as ViewStyle }),
-  },
-})

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

@@ -1,44 +0,0 @@
-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/components/chart/components/layers/SliceBackgroundColor.tsx

@@ -1,11 +0,0 @@
-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/components/chart/components/layers/SliceFillColor.tsx

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

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

@@ -1,48 +0,0 @@
-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/components/chart/model/PieChartManager.ts

@@ -1,20 +0,0 @@
-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/components/chart/model/SliceHighlight.ts

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

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

@@ -1,90 +0,0 @@
-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 {
-    return this.buildArc(slice, this.config.outerRadius, this.getCornerRadius(100))
-  }
-
-  public generateFillPath(slice: SliceShape): string {
-    const fillRadius = this.getFillRadius(slice)
-    const cornerRadius = this.getCornerRadius(slice.fillPercent)
-
-    // Build with innerRadius 0 so d3 only rounds the outer corners.
-    // The slice clip path will cut the inner edge to the correct boundary.
-    return arc()
-      .outerRadius(fillRadius)
-      .innerRadius(0)
-      .cornerRadius(cornerRadius)
-      .padAngle(this.padAngle)
-      .padRadius(this.config.outerRadius)({
-      startAngle: slice.startAngle,
-      endAngle: slice.endAngle,
-      innerRadius: 0,
-      outerRadius: fillRadius,
-    }) as string
-  }
-
-  public generateFillBorderPath(slice: SliceShape): string {
-    const fillRadius = this.getFillRadius(slice)
-    const cornerRadius = this.getCornerRadius(slice.fillPercent)
-    return this.buildArc(slice, fillRadius, cornerRadius)
-  }
-
-
-  private getFillRadius(slice: SliceShape): number {
-    return this.innerRadius + (this.config.outerRadius - this.innerRadius) * (slice.fillPercent / 100)
-  }
-
-  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/components/content/PmContent.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { useUnit } from 'effector-react'
-import { StyleSheet, View } from 'react-native'
-import { SPACING } from '@magmamath/react-native-ui'
-import { PmTeacherRecs } from '../recs/PmTeacherRecs'
-import { PmDomainList } from '../list/PmDomainList'
-import { PmInsights } from '../insights/PmInsights'
-import { PmStatusOverlay } from '../locked/PmStatusOverlay'
-import { usePmProgress } from '../../context/PmProgressContext'
-import { PmProgressStatus } from '@magmamath/students-features'
-
-export const PmProgressContent = () => {
-  const { model } = usePmProgress()
-  const status = useUnit(model.tree.$status)
-
-  if (status) {
-    return <PmStatusOverlay status={status} />
-  }
-
-  return (
-    <View style={styles.content}>
-      <View style={styles.column}>
-        <PmTeacherRecs />
-        <PmDomainList />
-      </View>
-
-      <PmInsights />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-    overflow: 'hidden',
-  },
-  column: {
-    flex: 1,
-    overflow: 'hidden',
-    marginRight: SPACING[500],
-    gap: SPACING[200],
-  },
-})

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

@@ -1,211 +0,0 @@
-import React, { useState } from 'react'
-import { Dimensions, Platform, StyleSheet, TextStyle, View } from 'react-native'
-import {
-  Button,
-  ButtonVariant,
-  CaretDownIcon,
-  CaretUpIcon,
-  COLORS,
-  Dropdown,
-  HeadingVariants,
-  Menu,
-  MenuItemProps,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { SketchArrowRight } from '../../../../shared/icons/SketchArrowRight'
-import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
-import { useText } from '../../../../shared/translation'
-import { useUnit, useStoreMap } from 'effector-react'
-import { usePmProgress } from '../../context/PmProgressContext'
-import { formatGradeLabel, isFluencyDomain } from '../../shared/pmProgress.helpers'
-import { OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
-import { StartButton } from './StartButton'
-
-const menuItemProps: MenuItemProps = {
-  style: {
-    text: { whiteSpace: 'nowrap' } as TextStyle,
-  },
-}
-
-export const PmProgressHeader = () => {
-  const t = useText()
-  const { model, onStartPress, customGradeLabels, readOnly } = usePmProgress()
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const status = useUnit(model.tree.$status)
-
-  const grade = useUnit(model.tree.$grade)
-  const grades = useStoreMap({
-    store: model.tree.$grades,
-    keys: [customGradeLabels],
-    fn: (grades) =>
-      grades.map((grade) => ({
-        key: grade.value,
-        title: formatGradeLabel(grade.value, customGradeLabels),
-        disabled: grade.isLocked,
-        ...menuItemProps,
-      })),
-  })
-
-  const loaderOpeningId = useUnit(model.solving.$loaderOpeningId)
-
-  const nextUp = useStoreMap(model.tree.$domains, (domains) =>
-    domains.find((domain) => {
-      const isFluency = isFluencyDomain(domain.title)
-      const isDomainCompleted = domain.standards.every((standard) => standard.isCompleted)
-      return !isFluency && !isDomainCompleted
-    }),
-  )
-
-  const isLoading = loaderOpeningId === OpeningLoaderId.START_BUTTON
-  const isSkillOpeningActionPending = !!(loaderOpeningId !== null || status)
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.title}>
-        <Typography variant={HeadingVariants.H2} style={styles.dark}>
-          {t('pmProgress.title')}
-        </Typography>
-        <Dropdown
-          isOpen={isDropdownOpen}
-          onDismiss={() => setIsDropdownOpen(false)}
-          anchor={
-            <Button
-              variant={ButtonVariant.TERTIARY}
-              onPress={() => setIsDropdownOpen((prev) => !prev)}
-            >
-              <Typography variant={HeadingVariants.H8} style={styles.dark}>
-                {grade !== null
-                  ? formatGradeLabel(grade, customGradeLabels)
-                  : t('pmProgress.grade')}
-              </Typography>
-              <View style={styles.caret}>
-                {isDropdownOpen ? (
-                  <CaretUpIcon color={COLORS.NEUTRAL_9} />
-                ) : (
-                  <CaretDownIcon color={COLORS.NEUTRAL_9} />
-                )}
-              </View>
-            </Button>
-          }
-        >
-          <Menu
-            style={styles.menu}
-            items={grades}
-            onItemPress={(item) => {
-              model.tree.setGrade(item.key as number)
-              setIsDropdownOpen(false)
-            }}
-          />
-        </Dropdown>
-      </View>
-
-      {!readOnly && (
-        <View style={styles.nextUp}>
-          {nextUp && !status && (
-            <>
-              <View style={styles.content}>
-                <View style={styles.subtitle}>
-                  <Typography variant={HeadingVariants.H2} style={styles.dark}>
-                    {t('pmProgress.nextUp')}
-                  </Typography>
-                </View>
-                <View style={[styles.row, styles.tilted]}>
-                  <Typography variant={HeadingVariants.H7} style={styles.muted}>
-                    {nextUp?.title}
-                  </Typography>
-                  <View style={styles.diamond}>
-                    <SliceDiamondIcon color={nextUp?.color} />
-                  </View>
-                </View>
-              </View>
-              <View style={styles.arrow}>
-                <SketchArrowRight />
-              </View>
-            </>
-          )}
-
-          <StartButton
-            onPress={async () => {
-              try {
-                model.solving.setLoaderOpeningId(OpeningLoaderId.START_BUTTON)
-                const skill = await model.solving.start({ type: SolvingFlow.MAGMA })
-                await onStartPress?.(skill)
-              } finally {
-                model.solving.setLoaderOpeningId(null)
-              }
-            }}
-            disabled={isSkillOpeningActionPending}
-            isLoading={isLoading}
-            isActive={isLoading}
-            withPulsation={!!nextUp && !isLoading && !isSkillOpeningActionPending && !status}
-          />
-        </View>
-      )}
-    </View>
-  )
-}
-
-const SMALL_SCREEN_THRESHOLD = 568
-const SMALL_SCREEN_MENU_MAX_HEIGHT = 300
-const WINDOW_HEIGHT = Dimensions.get('window').height
-const MENU_MAX_HEIGHT =
-  WINDOW_HEIGHT <= SMALL_SCREEN_THRESHOLD ? SMALL_SCREEN_MENU_MAX_HEIGHT : WINDOW_HEIGHT * 0.8
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: SPACING[400],
-    zIndex: 1,
-  },
-  title: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: SPACING[200],
-  },
-  dark: {
-    color: COLORS.NEUTRAL_9,
-  },
-  caret: {
-    marginLeft: SPACING[100],
-  },
-  menu: {
-    top: SPACING[100],
-    minWidth: 110,
-    overflow: 'scroll',
-    maxHeight: MENU_MAX_HEIGHT,
-    ...Platform.select({ web: { scrollbarWidth: 'none' } }),
-  },
-  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,
-    transform: [{ rotate: '5deg' }],
-  },
-  arrow: {
-    transform: [{ rotate: '358deg' }],
-  },
-})