@magmamath/students-features 1.2.1-rc.12 → 1.2.1-rc.13

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

@@ -16,7 +16,7 @@ type FluencyProps = {
 export const Fluency = ({ data }: FluencyProps) => {
   const t = useText()
   const { model, onStandardPress } = usePmProgress()
-  const highlightedId = useUnit(model.tree.$highlightedId)
+  const expandedId = useUnit(model.highlight.$expandedId)
 
   if (!data) return null
 
@@ -28,7 +28,7 @@ export const Fluency = ({ data }: FluencyProps) => {
         items={data.standards.map((standard) => ({ ...standard, id: standard.standardId }))}
         progress={data.scorePercentage}
         color={COLORS.PRIMARY_ORANGE}
-        onPress={() => model.tree.setHighlightedId(CustomDomain.FLUENCY)}
+        onPress={() => model.highlight.expand(CustomDomain.FLUENCY)}
         onItemPress={async (item) => {
           const skill = await model.solving.start({
             type: SolvingFlow.STANDARD,
@@ -38,7 +38,7 @@ export const Fluency = ({ data }: FluencyProps) => {
         }}
         isFirst
         isLast
-        isExpanded={highlightedId === CustomDomain.FLUENCY}
+        isExpanded={expandedId === CustomDomain.FLUENCY}
         icon={<SliceDiamondIcon color={COLORS.PRIMARY_ORANGE} />}
       />
     </View>

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

@@ -38,6 +38,8 @@ type ListCardProps<T extends ListCardItem> = {
   onItemPress?: (item: T) => void
   isExpanded?: boolean
   onPress?: () => void
+  onHoverIn?: () => void
+  onHoverOut?: () => void
   progress?: number
   rightContent?: React.ReactNode
   isFirst?: boolean
@@ -45,6 +47,7 @@ type ListCardProps<T extends ListCardItem> = {
   maxItems?: number
   expandedColor?: string
   isSkillsLeftHidden?: boolean
+  isHighlighted?: boolean
 }
 
 export const ListCard = <T extends ListCardItem>({
@@ -53,7 +56,10 @@ export const ListCard = <T extends ListCardItem>({
   color,
   items,
   isExpanded = false,
+  isHighlighted = false,
   onPress,
+  onHoverIn,
+  onHoverOut,
   onItemPress,
   progress = 0,
   rightContent,
@@ -67,7 +73,7 @@ export const ListCard = <T extends ListCardItem>({
   const [isHovered, setIsHovered] = useState(false)
 
   const { visible, remainingCount } = getVisibleItems(items, maxItems)
-  const isHighlighted = isHovered || isExpanded
+  const withHighlight = isHovered || isExpanded || isHighlighted
 
   const Caret = isExpanded ? CaretDownIcon : CaretRightIcon
 
@@ -78,7 +84,7 @@ export const ListCard = <T extends ListCardItem>({
         !isFirst && styles.containerCollapsed,
         isFirst && styles.containerFirst,
         isLast && styles.containerLast,
-        isHighlighted && { backgroundColor: expandedColor },
+        withHighlight && { backgroundColor: expandedColor },
       ]}
     >
       <Pressable
@@ -89,8 +95,14 @@ export const ListCard = <T extends ListCardItem>({
           isHighlighted && { backgroundColor: expandedColor },
         ]}
         onPress={onPress}
-        onHoverIn={() => setIsHovered(true)}
-        onHoverOut={() => setIsHovered(false)}
+        onHoverIn={() => {
+          setIsHovered(true)
+          onHoverIn?.()
+        }}
+        onHoverOut={() => {
+          setIsHovered(false)
+          onHoverOut?.()
+        }}
       >
         {icon}
         <View style={styles.caret}>

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

@@ -12,7 +12,8 @@ import { SolvingFlow } from '../../shared/pmProgress.constants'
 export const PmDomainList = () => {
   const { model, onStandardPress } = usePmProgress()
   const domains = useUnit(model.tree.$domains)
-  const highlightedId = useUnit(model.tree.$highlightedId)
+  const expandedId = useUnit(model.highlight.$expandedId)
+  const hoveredId = useUnit(model.highlight.$hoveredId)
 
   const fluency = domains.find(({ title }) => isFluencyDomain(title))
   const list = fluency ? domains.filter(({ title }) => !isFluencyDomain(title)) : domains
@@ -32,7 +33,9 @@ export const PmDomainList = () => {
             items={item.standards.map((standard) => ({ ...standard, id: standard.standardId }))}
             progress={item.scorePercentage}
             color={item.color}
-            onPress={() => model.tree.setHighlightedId(item.domainId)}
+            onPress={() => model.highlight.expand(item.domainId)}
+            onHoverIn={() => model.highlight.hover(item.domainId)}
+            onHoverOut={() => model.highlight.hover(null)}
             onItemPress={async (item) => {
               const skill = await model.solving.start({
                 type: SolvingFlow.STANDARD,
@@ -42,7 +45,8 @@ export const PmDomainList = () => {
             }}
             isLast={index === list.length - 1}
             isFirst={index === 0}
-            isExpanded={highlightedId === item.domainId}
+            isExpanded={expandedId === item.domainId}
+            isHighlighted={hoveredId === item.domainId || expandedId === item.domainId}
             icon={<SliceDiamondIcon color={item.color} />}
           />
         )}

package/src/features/pmProgress/components/recs/PmTeacherRecs.tsx

@@ -18,7 +18,7 @@ import { usePmProgress } from '../../context/PmProgressContext'
 export const PmTeacherRecs = () => {
   const t = useText()
   const { model, onPracticePress, onTeacherRecommendationPress } = usePmProgress()
-  const highlightedId = useUnit(model.tree.$highlightedId)
+  const expandedId = useUnit(model.highlight.$expandedId)
 
   // TODO: rework this, probably split and pass renderer to ListCard
   const recommendations = useStoreMap(model.recommendations.$teacher, ({ items }) =>
@@ -40,7 +40,7 @@ export const PmTeacherRecs = () => {
           maxItems={3}
           color={COLORS.PRIMARY_YELLOW}
           expandedColor={COLORS.YELLOW_1}
-          onPress={() => model.tree.setHighlightedId(CustomDomain.TEACHER)}
+          onPress={() => model.highlight.expand(CustomDomain.TEACHER)}
           onItemPress={async (item) => {
             const skill = await model.solving.start({
               type: SolvingFlow.TEACHER,
@@ -51,7 +51,7 @@ export const PmTeacherRecs = () => {
           isLast
           isFirst
           isSkillsLeftHidden
-          isExpanded={highlightedId === CustomDomain.TEACHER}
+          isExpanded={expandedId === CustomDomain.TEACHER}
           icon={<PentagonIcon color={COLORS.PRIMARY_YELLOW} />}
           rightContent={
             <Button

package/src/features/pmProgress/components/standard/StandardTag.tsx

@@ -0,0 +1,177 @@
+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import { DomainColor, PmProgressModel } from '@magmamath/students-features'
+import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
+import { usePmProgress } from '../../context/PmProgressContext'
+import { useStoreMap } from 'effector-react'
+
+type ColorPreset = {
+  background: string
+  titleColor: string
+  tagColor: string
+}
+
+const DOMAIN_COLOR_PRESETS: Record<DomainColor, ColorPreset> = {
+  [COLORS.PRIMARY_RED]: {
+    background: COLORS.RED_1,
+    titleColor: COLORS.RED_6,
+    tagColor: COLORS.PRIMARY_RED,
+  },
+  [COLORS.PRIMARY_MAGENTA]: {
+    background: COLORS.MAGENTA_1,
+    titleColor: COLORS.MAGENTA_6,
+    tagColor: COLORS.PRIMARY_MAGENTA,
+  },
+  [COLORS.PRIMARY_PURPLE]: {
+    background: COLORS.PURPLE_1,
+    titleColor: COLORS.PURPLE_6,
+    tagColor: COLORS.PRIMARY_PURPLE,
+  },
+  [COLORS.PRIMARY_INDIGO]: {
+    background: COLORS.INDIGO_1,
+    titleColor: COLORS.INDIGO_6,
+    tagColor: COLORS.PRIMARY_INDIGO,
+  },
+  [COLORS.PRIMARY_TURQUOISE]: {
+    background: COLORS.TURQUOISE_1,
+    titleColor: COLORS.TURQUOISE_6,
+    tagColor: COLORS.PRIMARY_TURQUOISE,
+  },
+  [COLORS.PRIMARY_GREEN]: {
+    background: COLORS.GREEN_1,
+    titleColor: COLORS.GREEN_6,
+    tagColor: COLORS.PRIMARY_GREEN,
+  },
+  [COLORS.PRIMARY_ORANGE]: {
+    background: COLORS.ORANGE_1,
+    titleColor: COLORS.ORANGE_6,
+    tagColor: COLORS.PRIMARY_ORANGE,
+  },
+  [COLORS.RED_4]: { background: COLORS.RED_1, titleColor: COLORS.RED_6, tagColor: COLORS.RED_4 },
+  [COLORS.MAGENTA_4]: {
+    background: COLORS.MAGENTA_1,
+    titleColor: COLORS.MAGENTA_6,
+    tagColor: COLORS.MAGENTA_4,
+  },
+  [COLORS.PURPLE_4]: {
+    background: COLORS.PURPLE_1,
+    titleColor: COLORS.PURPLE_6,
+    tagColor: COLORS.PURPLE_4,
+  },
+  [COLORS.INDIGO_4]: {
+    background: COLORS.INDIGO_1,
+    titleColor: COLORS.INDIGO_6,
+    tagColor: COLORS.INDIGO_4,
+  },
+  [COLORS.TURQUOISE_4]: {
+    background: COLORS.TURQUOISE_1,
+    titleColor: COLORS.TURQUOISE_6,
+    tagColor: COLORS.TURQUOISE_4,
+  },
+  [COLORS.GREEN_4]: {
+    background: COLORS.GREEN_1,
+    titleColor: COLORS.GREEN_6,
+    tagColor: COLORS.GREEN_4,
+  },
+  [COLORS.ORANGE_4]: {
+    background: COLORS.ORANGE_1,
+    titleColor: COLORS.ORANGE_6,
+    tagColor: COLORS.ORANGE_4,
+  },
+  [COLORS.RED_6]: { background: COLORS.RED_1, titleColor: COLORS.RED_6, tagColor: COLORS.RED_6 },
+  [COLORS.MAGENTA_6]: {
+    background: COLORS.MAGENTA_1,
+    titleColor: COLORS.MAGENTA_6,
+    tagColor: COLORS.MAGENTA_6,
+  },
+  [COLORS.PURPLE_6]: {
+    background: COLORS.PURPLE_1,
+    titleColor: COLORS.PURPLE_6,
+    tagColor: COLORS.PURPLE_6,
+  },
+  [COLORS.INDIGO_6]: {
+    background: COLORS.INDIGO_1,
+    titleColor: COLORS.INDIGO_6,
+    tagColor: COLORS.INDIGO_6,
+  },
+  [COLORS.TURQUOISE_6]: {
+    background: COLORS.TURQUOISE_1,
+    titleColor: COLORS.TURQUOISE_6,
+    tagColor: COLORS.TURQUOISE_6,
+  },
+  [COLORS.GREEN_6]: {
+    background: COLORS.GREEN_1,
+    titleColor: COLORS.GREEN_6,
+    tagColor: COLORS.GREEN_6,
+  },
+  [COLORS.ORANGE_6]: {
+    background: COLORS.ORANGE_1,
+    titleColor: COLORS.ORANGE_6,
+    tagColor: COLORS.ORANGE_6,
+  },
+}
+
+type StandardTagProps = {
+  skillId: string
+  model: PmProgressModel
+}
+
+export const StandardTag = ({ skillId, model }: StandardTagProps) => {
+  const standardInfo = useStoreMap({
+    store: model.tree.$domains,
+    keys: [skillId],
+    fn: (domains, [skillId]) => {
+      const domain = domains.find((d) => d.standards.some((s) => s.skillIds.includes(skillId)))
+      const standard = domain?.standards.find(({ skillIds }) => skillIds.includes(skillId))
+      if (!standard || !domain) return null
+      return { title: standard.title, tag: standard.subtitle, color: domain.color }
+    },
+  })
+
+  if (!standardInfo) return null
+
+  const preset = DOMAIN_COLOR_PRESETS[standardInfo.color as DomainColor]
+
+  return (
+    <View style={[styles.container, { backgroundColor: preset.background }]}>
+      <SliceDiamondIcon color={preset.tagColor} />
+      <View style={styles.textContainer}>
+        <Text numberOfLines={1} style={[styles.title, { color: preset.titleColor }]}>{standardInfo.title}</Text>
+        <Text numberOfLines={1} style={[styles.tag, { color: preset.tagColor }]}>{standardInfo.tag}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: 175,
+    maxWidth: 200,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    alignSelf: 'flex-start',
+    shadowColor: '#333333',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  textContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  title: {
+    fontSize: 13,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+  tag: {
+    fontSize: 10,
+    fontFamily: FONT_FAMILY.buenosAires,
+  },
+})

package/src/features/pmProgress/index.ts

@@ -1,6 +1,8 @@
 export { PmProgress } from './PmProgress'
 export { PmProgressModel } from './model/PmProgressModel'
+export { StandardTag } from './components/standard/StandardTag'
 export * from './shared/pmProgress.types'
+export * from './shared/pmProgress.constants'
 
 // TODO:
 // !!! case when card is failed and easier card suggested !!!

package/src/features/pmProgress/model/PmHighlightModel.ts

@@ -0,0 +1,11 @@
+import { createEvent, createStore, restore } from 'effector'
+
+export class PmHighlightModel {
+  public readonly expand = createEvent<string>()
+  public readonly hover = createEvent<string | null>()
+
+  public readonly $hoveredId = restore(this.hover, null)
+  public readonly $expandedId = createStore<string | null>(null).on(this.expand, (current, id) =>
+    current === id ? null : id,
+  )
+}

package/src/features/pmProgress/model/PmProgressModel.ts

@@ -6,6 +6,7 @@ import { PmTreeModel } from './PmTreeModel'
 import { PmInsightsModel } from './PmInsightsModel'
 import { PmRecommendationsModel } from './PmRecommendationsModel'
 import { PmSolvingFlowModel } from './PmSolvingFlowModel'
+import { PmHighlightModel } from './PmHighlightModel'
 
 type PmProgressModelProps = {
   api: PmProgressApiProps
@@ -16,12 +17,14 @@ export class PmProgressModel {
 
   public readonly api: PmProgressApi
   public readonly tree: PmTreeModel
+  public readonly highlight: PmHighlightModel
   public readonly insights: PmInsightsModel
   public readonly recommendations: PmRecommendationsModel
   public readonly solving: PmSolvingFlowModel
 
   constructor({ api }: PmProgressModelProps) {
     this.api = new PmProgressApi(api)
+    this.highlight = new PmHighlightModel()
     this.insights = new PmInsightsModel(this.api)
     this.tree = new PmTreeModel(this.api)
     this.recommendations = new PmRecommendationsModel(this.api)

package/src/features/pmProgress/model/PmTreeModel.ts

@@ -29,18 +29,13 @@ export class PmTreeModel {
   private readonly setupInitialGrade = createEvent<SetupInitialGradeProps>()
   private readonly setDomains = createEvent<Domain[]>()
   public readonly setGrade = createEvent<number | null>()
-  public readonly setHighlightedId = createEvent<string>()
-
   public readonly $grade = restore(this.setGrade, null)
   public readonly $domains = restore(this.setDomains, [])
   public readonly $grades = createStore<Grade[]>([])
-  public readonly $highlightedId = createStore<string | null>(null).on(
-    this.setHighlightedId,
-    (highlightedId, idToHighlight) => (highlightedId === idToHighlight ? null : idToHighlight),
-  )
 
   constructor(private readonly api: PmProgressApi) {
     persist({ key: SessionStorageKeys.GRADE, store: this.$grade })
+    persist({ key: SessionStorageKeys.DOMAINS, store: this.$domains })
 
     createAction(this.initTreeFx.done, {
       target: {

package/src/features/pmProgress/shared/pmProgress.constants.ts

@@ -23,6 +23,7 @@ export enum SolvingFlow {
 export enum SessionStorageKeys {
   SOLVING_QUEUE = 'PM_SOLVING_QUEUE',
   GRADE = 'PM_GRADE',
+  DOMAINS = 'PM_DOMAINS',
 }
 
 /**

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

@@ -1,4 +1,4 @@
-import { SolvingFlow } from './pmProgress.constants'
+import { DOMAIN_COLORS, SolvingFlow } from './pmProgress.constants'
 import type { SkillsToPracticeDto } from '@matteappen/skills-utils/enhanceProgressData/types'
 
 type StatsSkill = {
@@ -205,3 +205,5 @@ export type StartSolvingStandard = {
 }
 
 export type StartSolvingProps = StartSolvingTeacher | StartSolvingMagma | StartSolvingStandard
+
+export type DomainColor = (typeof DOMAIN_COLORS)[number]