@magmamath/students-features 1.3.4-rc.3 → 1.3.4

package/dist/module/features/pmProgress/components/insights/PmTimeframeStats.js

@@ -0,0 +1,94 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { COLORS, SelectGroup, SelectOptionColor, SPACING } from '@magmamath/react-native-ui';
+import { StatsCard } from "./StatsCard.js";
+import { StarIcon } from "../../../../shared/icons/StarIcon.js";
+import { TimerIcon } from "../../../../shared/icons/TimerIcon.js";
+import { BORDER_RADIUS } from '@magmamath/react-native-ui';
+import { useText } from "../../../../shared/translation/index.js";
+import { useUnit } from 'effector-react';
+import { formatTime } from "../../shared/pmProgress.helpers.js";
+import { InsightsTimeframe, STATS_MAX_HEIGHT } from "../../shared/pmProgress.constants.js";
+import { usePmProgress } from "../../context/PmProgressContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PmTimeframeStats = () => {
+  const t = useText();
+  const {
+    model
+  } = usePmProgress();
+  const timeframe = useUnit(model.insights.$timeframe);
+  const insights = useUnit(model.insights.$insights);
+  const OPTIONS = [{
+    key: InsightsTimeframe.WEEK,
+    title: t('pmProgress.thisWeek')
+  }, {
+    key: InsightsTimeframe.LAST_WEEK,
+    title: t('pmProgress.lastWeek')
+  }, {
+    key: InsightsTimeframe.ALL,
+    title: t('pmProgress.allTime')
+  }];
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.cards,
+        children: [/*#__PURE__*/_jsx(StatsCard, {
+          value: insights?.numberOfStars ?? 0,
+          label: t('pmProgress.stars'),
+          color: COLORS.PRIMARY_YELLOW,
+          icon: /*#__PURE__*/_jsx(StarIcon, {})
+        }), /*#__PURE__*/_jsx(StatsCard, {
+          value: formatTime(insights?.timeInPracticeMs ?? 0),
+          label: t('pmProgress.time'),
+          color: COLORS.PRIMARY_PURPLE,
+          iconStyle: styles.timeIcon,
+          icon: /*#__PURE__*/_jsx(TimerIcon, {})
+        })]
+      }), /*#__PURE__*/_jsx(SelectGroup, {
+        color: SelectOptionColor.GREY,
+        options: OPTIONS,
+        selectedOptions: OPTIONS.filter(({
+          key
+        }) => key === timeframe),
+        onOptionChange: ({
+          key
+        }) => model.insights.setTimeframe(key)
+      })]
+    })
+  });
+};
+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
+  }
+});
+//# sourceMappingURL=PmTimeframeStats.js.map

package/dist/module/features/pmProgress/components/insights/PmTimeframeStats.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","COLORS","SelectGroup","SelectOptionColor","SPACING","StatsCard","StarIcon","TimerIcon","BORDER_RADIUS","useText","useUnit","formatTime","InsightsTimeframe","STATS_MAX_HEIGHT","usePmProgress","jsx","_jsx","jsxs","_jsxs","PmTimeframeStats","t","model","timeframe","insights","$timeframe","$insights","OPTIONS","key","WEEK","title","LAST_WEEK","ALL","style","styles","container","children","content","cards","value","numberOfStars","label","color","PRIMARY_YELLOW","icon","timeInPracticeMs","PRIMARY_PURPLE","iconStyle","timeIcon","GREY","options","selectedOptions","filter","onOptionChange","setTimeframe","create","maxHeight","height","padding","backgroundColor","NEUTRAL_1","borderRadius","shadowColor","NEUTRAL_9","shadowOffset","width","shadowOpacity","shadowRadius","elevation","gap","marginBottom","flexDirection","justifyContent","paddingBottom","paddingLeft"],"sourceRoot":"../../../../../../src","sources":["features/pmProgress/components/insights/PmTimeframeStats.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/pmProgress/components/insights/StatsCard.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SPACING } from '@magmamath/react-native-ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const StatsCard = ({
+  value,
+  label,
+  color,
+  icon,
+  iconStyle
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.card, {
+      borderColor: color
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.iconContainer, {
+        backgroundColor: color
+      }, iconStyle],
+      children: icon
+    }), /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.value, {
+          color
+        }],
+        children: value
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.label,
+        children: label
+      })]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    height: 65,
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderRadius: BORDER_RADIUS[300],
+    borderWidth: 4,
+    padding: SPACING[200],
+    gap: SPACING[200]
+  },
+  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
+  }
+});
+//# sourceMappingURL=StatsCard.js.map

package/dist/module/features/pmProgress/components/insights/StatsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Text","BORDER_RADIUS","COLORS","FONT_FAMILY","SPACING","jsx","_jsx","jsxs","_jsxs","StatsCard","value","label","color","icon","iconStyle","style","styles","card","borderColor","children","iconContainer","backgroundColor","create","flex","height","alignItems","flexDirection","borderRadius","borderWidth","padding","gap","width","justifyContent","fontSize","fontWeight","fontFamily","buenosAires","NEUTRAL_8","top"],"sourceRoot":"../../../../../../src","sources":["features/pmProgress/components/insights/StatsCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,IAAI,EAAEC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAChE,SAASC,aAAa,EAAEC,MAAM,EAAEC,WAAW,EAAEC,OAAO,QAAQ,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAUxF,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,IAAI;EAAEC;AAA0B,CAAC,KAAK;EACrF,oBACEN,KAAA,CAACV,IAAI;IAACiB,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAE;MAAEC,WAAW,EAAEN;IAAM,CAAC,CAAE;IAAAO,QAAA,gBACjDb,IAAA,CAACR,IAAI;MAACiB,KAAK,EAAE,CAACC,MAAM,CAACI,aAAa,EAAE;QAAEC,eAAe,EAAET;MAAM,CAAC,EAAEE,SAAS,CAAE;MAAAK,QAAA,EAAEN;IAAI,CAAO,CAAC,eACzFL,KAAA,CAACV,IAAI;MAAAqB,QAAA,gBACHb,IAAA,CAACN,IAAI;QAACe,KAAK,EAAE,CAACC,MAAM,CAACN,KAAK,EAAE;UAAEE;QAAM,CAAC,CAAE;QAAAO,QAAA,EAAET;MAAK,CAAO,CAAC,eACtDJ,IAAA,CAACN,IAAI;QAACe,KAAK,EAAEC,MAAM,CAACL,KAAM;QAAAQ,QAAA,EAAER;MAAK,CAAO,CAAC;IAAA,CACrC,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAGjB,UAAU,CAACuB,MAAM,CAAC;EAC/BL,IAAI,EAAE;IACJM,IAAI,EAAE,CAAC;IACPC,MAAM,EAAE,EAAE;IACVC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE,KAAK;IACpBC,YAAY,EAAE1B,aAAa,CAAC,GAAG,CAAC;IAChC2B,WAAW,EAAE,CAAC;IACdC,OAAO,EAAEzB,OAAO,CAAC,GAAG,CAAC;IACrB0B,GAAG,EAAE1B,OAAO,CAAC,GAAG;EAClB,CAAC;EACDgB,aAAa,EAAE;IACbW,KAAK,EAAE,EAAE;IACTP,MAAM,EAAE,EAAE;IACVC,UAAU,EAAE,QAAQ;IACpBO,cAAc,EAAE,QAAQ;IACxBL,YAAY,EAAE;EAChB,CAAC;EACDjB,KAAK,EAAE;IACLuB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAEhC,WAAW,CAACiC;EAC1B,CAAC;EACDzB,KAAK,EAAE;IACLC,KAAK,EAAEV,MAAM,CAACmC,SAAS;IACvBJ,QAAQ,EAAE,EAAE;IACZE,UAAU,EAAEhC,WAAW,CAACiC,WAAW;IACnCE,GAAG,EAAE,CAAC;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/pmProgress/components/list/Fluency.js

@@ -0,0 +1,76 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ListCard } from "./ListCard.js";
+import { COLORS, SPACING } from '@magmamath/react-native-ui';
+import { SliceDiamondIcon } from "../../../../shared/icons/SliceDiamondIcon.js";
+import { useText } from "../../../../shared/translation/index.js";
+import { useUnit } from 'effector-react';
+import { SolvingFlow } from "../../shared/pmProgress.constants.js";
+import { usePmProgress } from "../../context/PmProgressContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Fluency = ({
+  data
+}) => {
+  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;
+  const isExpanded = expandedId === data.domainId;
+  const isHighlighted = hoveredId === data.domainId || isExpanded;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.separator
+    }), /*#__PURE__*/_jsx(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: true,
+      isLast: true,
+      isExpanded: isExpanded,
+      isHighlighted: isHighlighted,
+      icon: /*#__PURE__*/_jsx(SliceDiamondIcon, {
+        color: COLORS.PRIMARY_ORANGE
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: SPACING[800]
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: SPACING[100],
+    marginVertical: SPACING[200],
+    backgroundColor: COLORS.NEUTRAL_4
+  }
+});
+//# sourceMappingURL=Fluency.js.map

package/dist/module/features/pmProgress/components/list/Fluency.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","ListCard","COLORS","SPACING","SliceDiamondIcon","useText","useUnit","SolvingFlow","usePmProgress","jsx","_jsx","jsxs","_jsxs","Fluency","data","t","model","onStandardPress","expandedId","highlight","$expandedId","hoveredId","$hoveredId","loaderOpeningId","solving","$loaderOpeningId","isExpanded","domainId","isHighlighted","style","styles","container","children","separator","title","items","standards","map","standard","id","standardId","progress","scorePercentage","color","PRIMARY_ORANGE","onPress","expand","onHoverIn","hover","onHoverOut","onItemPress","item","setLoaderOpeningId","skill","start","type","STANDARD","loadingItemId","isFirst","isLast","icon","create","marginBottom","height","marginHorizontal","marginVertical","backgroundColor","NEUTRAL_4"],"sourceRoot":"../../../../../../src","sources":["features/pmProgress/components/list/Fluency.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/pmProgress/components/list/ListCard.js

@@ -0,0 +1,200 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Pressable, View, StyleSheet, Platform } from 'react-native';
+import { BORDER_RADIUS, CaretDownIcon, CaretRightIcon, COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui';
+import { ListItem } from "./ListItem.js";
+import { useText } from "../../../../shared/translation/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HEADER_HEIGHT = 60;
+const PROGRESS_BAR_WIDTH = 50;
+const PROGRESS_BAR_HEIGHT = 10;
+function getVisibleItems(items, maxItems) {
+  const visible = maxItems != null ? items.slice(0, maxItems) : items;
+  const remainingCount = maxItems != null ? Math.max(0, items.length - maxItems) : 0;
+  return {
+    visible,
+    remainingCount
+  };
+}
+export const ListCard = ({
+  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
+}) => {
+  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 /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, !isFirst && styles.containerCollapsed, isFirst && styles.containerFirst, isLast && styles.containerLast, withHighlight && {
+      backgroundColor: expandedColor
+    }],
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      style: [styles.header, isFirst && styles.headerFirst, isLast && !isExpanded && styles.headerLast, withHighlight && {
+        backgroundColor: expandedColor
+      }],
+      onPress: onPress,
+      onHoverIn: () => {
+        setIsHovered(true);
+        onHoverIn?.();
+      },
+      onHoverOut: () => {
+        setIsHovered(false);
+        onHoverOut?.();
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        children: icon
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.caret,
+        children: /*#__PURE__*/_jsx(Caret, {
+          color: COLORS.NEUTRAL_9
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: HeadingVariants.H6,
+        style: styles.title,
+        children: title
+      }), rightContent ?? /*#__PURE__*/_jsxs(View, {
+        style: styles.progress,
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          variant: HeadingVariants.H7,
+          style: [styles.percentage, {
+            color
+          }],
+          children: [Math.round(progress), "%"]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.track,
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.fill, {
+              width: `${Math.round(progress)}%`,
+              backgroundColor: color
+            }]
+          })
+        })]
+      })]
+    }), isExpanded && /*#__PURE__*/_jsxs(View, {
+      style: [styles.items, isLast && styles.itemsLast],
+      children: [standards.map(standard => /*#__PURE__*/_jsx(ListItem, {
+        title: standard.title,
+        skillsLeft: standard.skillsLeft,
+        subtitle: standard.subtitle,
+        isFinished: standard.isCompleted,
+        isLoading: loadingItemId === standard.id,
+        isSkillsLeftHidden: isSkillsLeftHidden,
+        onPress: () => onItemPress?.(standard)
+      }, standard.id)), remainingCount > 0 && /*#__PURE__*/_jsx(Typography, {
+        variant: HeadingVariants.H8,
+        style: styles.moreText,
+        children: t('pmProgress.andMore', {
+          count: `${remainingCount}`
+        })
+      })]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    backgroundColor: COLORS.NEUTRAL_2,
+    overflow: 'hidden',
+    ...Platform.select({
+      web: {
+        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,
+    ...Platform.select({
+      web: {
+        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]
+  }
+});
+//# sourceMappingURL=ListCard.js.map

package/dist/module/features/pmProgress/components/list/ListCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","View","StyleSheet","Platform","BORDER_RADIUS","CaretDownIcon","CaretRightIcon","COLORS","HeadingVariants","SPACING","Typography","ListItem","useText","jsx","_jsx","jsxs","_jsxs","HEADER_HEIGHT","PROGRESS_BAR_WIDTH","PROGRESS_BAR_HEIGHT","getVisibleItems","items","maxItems","visible","slice","remainingCount","Math","max","length","ListCard","title","icon","color","isExpanded","isHighlighted","onPress","onHoverIn","onHoverOut","onItemPress","progress","rightContent","isFirst","isLast","expandedColor","NEUTRAL_3","isSkillsLeftHidden","loadingItemId","t","isHovered","setIsHovered","standards","withHighlight","Caret","style","styles","container","containerCollapsed","containerFirst","containerLast","backgroundColor","children","header","headerFirst","headerLast","caret","NEUTRAL_9","variant","H6","H7","percentage","round","track","fill","width","itemsLast","map","standard","skillsLeft","subtitle","isFinished","isCompleted","isLoading","id","H8","moreText","count","create","justifyContent","NEUTRAL_2","overflow","select","web","cursor","marginTop","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","flexDirection","alignItems","height","padding","borderWidth","borderColor","NEUTRAL_4","marginLeft","flex","gap","textAlign","borderRadius","NEUTRAL_1","NEUTRAL_7","marginVertical"],"sourceRoot":"../../../../../../src","sources":["features/pmProgress/components/list/ListCard.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/pmProgress/components/list/ListItem.js

@@ -0,0 +1,132 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { ActivityIndicator, View, Pressable, StyleSheet, Text } from 'react-native';
+import { ArrowRightIcon, BORDER_RADIUS, CheckIcon, COLORS, FONT_FAMILY, HeadingVariants, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
+import { useText } from "../../../../shared/translation/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const CARD_HEIGHT = 52;
+const ICON_SIZE = 25;
+const SUBTITLE_FONT_SIZE = 10;
+const SUBTITLE_LINE_HEIGHT = 14;
+export const ListItem = ({
+  title,
+  subtitle,
+  skillsLeft,
+  isFinished = false,
+  isLoading = false,
+  onPress,
+  isSkillsLeftHidden = false
+}) => {
+  const t = useText();
+  const [isHovered, setIsHovered] = useState(false);
+  const isSkillsLeftVisible = skillsLeft > 0 && !isFinished && !isSkillsLeftHidden;
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: onPress,
+    disabled: isLoading,
+    style: [styles.card, isFinished && styles.finished, isHovered && styles.hovered, isHovered && isFinished && styles.hoveredFinished, isLoading && styles.loading],
+    onHoverIn: () => setIsHovered(true),
+    onHoverOut: () => setIsHovered(false),
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: HeadingVariants.H10,
+        style: [styles.title, isFinished && styles.titleFinished],
+        numberOfLines: 1,
+        children: title
+      }), /*#__PURE__*/_jsx(Typography, {
+        style: [styles.subtitle, isFinished && styles.subtitleFinished],
+        numberOfLines: 1,
+        children: subtitle
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.trailing,
+      children: isLoading ? /*#__PURE__*/_jsxs(View, {
+        style: styles.loadingIndicator,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          children: [t('pmProgress.loading'), " "]
+        }), /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: COLORS.NEUTRAL_7
+        })]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [isSkillsLeftVisible && /*#__PURE__*/_jsxs(Typography, {
+          variant: HeadingVariants.H10,
+          style: styles.skills,
+          children: [skillsLeft, ' ', skillsLeft === 1 ? t('pmProgress.skillLeft') : t('pmProgress.skillsLeft')]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.icon,
+          children: isFinished ? /*#__PURE__*/_jsx(CheckIcon, {
+            color: COLORS.PRIMARY_GREEN
+          }) : /*#__PURE__*/_jsx(ArrowRightIcon, {
+            color: COLORS.NEUTRAL_9
+          })
+        })]
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: CARD_HEIGHT,
+    paddingLeft: SPACING[800],
+    paddingRight: SPACING[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[300],
+    gap: SPACING[200],
+    ...SHADOWS['1']
+  },
+  finished: {
+    backgroundColor: COLORS.GREEN_1,
+    ...SHADOWS['1']
+  },
+  hovered: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    boxShadow: '0px 0px 1px 0px #33333366, 0px 1px 3px 0px #3333331A, 4px 4px 10px rgba(51, 51, 51, 0.15)'
+  },
+  hoveredFinished: {
+    backgroundColor: COLORS.GREEN_2
+  },
+  content: {
+    flex: 1
+  },
+  title: {
+    color: COLORS.NEUTRAL_9
+  },
+  titleFinished: {
+    color: COLORS.GREEN_7
+  },
+  subtitle: {
+    color: COLORS.NEUTRAL_7,
+    fontSize: SUBTITLE_FONT_SIZE,
+    fontFamily: FONT_FAMILY.buenosAires,
+    lineHeight: SUBTITLE_LINE_HEIGHT
+  },
+  subtitleFinished: {
+    color: COLORS.GREEN_6
+  },
+  trailing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  skills: {
+    color: COLORS.NEUTRAL_9
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  loading: {
+    opacity: 0.5
+  },
+  loadingIndicator: {
+    flexDirection: 'row',
+    gap: SPACING[200]
+  }
+});
+//# sourceMappingURL=ListItem.js.map

package/dist/module/features/pmProgress/components/list/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ActivityIndicator","View","Pressable","StyleSheet","Text","ArrowRightIcon","BORDER_RADIUS","CheckIcon","COLORS","FONT_FAMILY","HeadingVariants","SHADOWS","SPACING","Typography","useText","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CARD_HEIGHT","ICON_SIZE","SUBTITLE_FONT_SIZE","SUBTITLE_LINE_HEIGHT","ListItem","title","subtitle","skillsLeft","isFinished","isLoading","onPress","isSkillsLeftHidden","t","isHovered","setIsHovered","isSkillsLeftVisible","disabled","style","styles","card","finished","hovered","hoveredFinished","loading","onHoverIn","onHoverOut","children","content","variant","H10","titleFinished","numberOfLines","subtitleFinished","trailing","loadingIndicator","size","color","NEUTRAL_7","skills","icon","PRIMARY_GREEN","NEUTRAL_9","create","flexDirection","alignItems","height","paddingLeft","paddingRight","backgroundColor","NEUTRAL_1","borderRadius","gap","GREEN_1","NEUTRAL_2","boxShadow","GREEN_2","flex","GREEN_7","fontSize","fontFamily","buenosAires","lineHeight","GREEN_6","width","justifyContent","opacity"],"sourceRoot":"../../../../../../src","sources":["features/pmProgress/components/list/ListItem.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,iBAAiB,EAAEC,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACnF,SACEC,cAAc,EACdC,aAAa,EACbC,SAAS,EACTC,MAAM,EACNC,WAAW,EACXC,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,UAAU,QACL,4BAA4B;AACnC,SAASC,OAAO,QAAQ,yCAAgC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAExD,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,SAAS,GAAG,EAAE;AACpB,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,oBAAoB,GAAG,EAAE;AAY/B,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EACvBC,KAAK;EACLC,QAAQ;EACRC,UAAU;EACVC,UAAU,GAAG,KAAK;EAClBC,SAAS,GAAG,KAAK;EACjBC,OAAO;EACPC,kBAAkB,GAAG;AACR,CAAC,KAAK;EACnB,MAAMC,CAAC,GAAGnB,OAAO,CAAC,CAAC;EACnB,MAAM,CAACoB,SAAS,EAAEC,YAAY,CAAC,GAAGpC,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMqC,mBAAmB,GAAGR,UAAU,GAAG,CAAC,IAAI,CAACC,UAAU,IAAI,CAACG,kBAAkB;EAEhF,oBACEd,KAAA,CAAChB,SAAS;IACR6B,OAAO,EAAEA,OAAQ;IACjBM,QAAQ,EAAEP,SAAU;IACpBQ,KAAK,EAAE,CACLC,MAAM,CAACC,IAAI,EACXX,UAAU,IAAIU,MAAM,CAACE,QAAQ,EAC7BP,SAAS,IAAIK,MAAM,CAACG,OAAO,EAC3BR,SAAS,IAAIL,UAAU,IAAIU,MAAM,CAACI,eAAe,EACjDb,SAAS,IAAIS,MAAM,CAACK,OAAO,CAC3B;IACFC,SAAS,EAAEA,CAAA,KAAMV,YAAY,CAAC,IAAI,CAAE;IACpCW,UAAU,EAAEA,CAAA,KAAMX,YAAY,CAAC,KAAK,CAAE;IAAAY,QAAA,gBAEtC7B,KAAA,CAACjB,IAAI;MAACqC,KAAK,EAAEC,MAAM,CAACS,OAAQ;MAAAD,QAAA,gBAC1B/B,IAAA,CAACH,UAAU;QACToC,OAAO,EAAEvC,eAAe,CAACwC,GAAI;QAC7BZ,KAAK,EAAE,CAACC,MAAM,CAACb,KAAK,EAAEG,UAAU,IAAIU,MAAM,CAACY,aAAa,CAAE;QAC1DC,aAAa,EAAE,CAAE;QAAAL,QAAA,EAEhBrB;MAAK,CACI,CAAC,eACbV,IAAA,CAACH,UAAU;QACTyB,KAAK,EAAE,CAACC,MAAM,CAACZ,QAAQ,EAAEE,UAAU,IAAIU,MAAM,CAACc,gBAAgB,CAAE;QAChED,aAAa,EAAE,CAAE;QAAAL,QAAA,EAEhBpB;MAAQ,CACC,CAAC;IAAA,CACT,CAAC,eACPX,IAAA,CAACf,IAAI;MAACqC,KAAK,EAAEC,MAAM,CAACe,QAAS;MAAAP,QAAA,EAC1BjB,SAAS,gBACRZ,KAAA,CAACjB,IAAI;QAACqC,KAAK,EAAEC,MAAM,CAACgB,gBAAiB;QAAAR,QAAA,gBACnC7B,KAAA,CAACd,IAAI;UAAA2C,QAAA,GAAEd,CAAC,CAAC,oBAAoB,CAAC,EAAC,GAAC;QAAA,CAAM,CAAC,eACvCjB,IAAA,CAAChB,iBAAiB;UAACwD,IAAI,EAAC,OAAO;UAACC,KAAK,EAAEjD,MAAM,CAACkD;QAAU,CAAE,CAAC;MAAA,CACvD,CAAC,gBAEPxC,KAAA,CAAAE,SAAA;QAAA2B,QAAA,GACGX,mBAAmB,iBAClBlB,KAAA,CAACL,UAAU;UAACoC,OAAO,EAAEvC,eAAe,CAACwC,GAAI;UAACZ,KAAK,EAAEC,MAAM,CAACoB,MAAO;UAAAZ,QAAA,GAC5DnB,UAAU,EAAE,GAAG,EACfA,UAAU,KAAK,CAAC,GAAGK,CAAC,CAAC,sBAAsB,CAAC,GAAGA,CAAC,CAAC,uBAAuB,CAAC;QAAA,CAChE,CACb,eACDjB,IAAA,CAACf,IAAI;UAACqC,KAAK,EAAEC,MAAM,CAACqB,IAAK;UAAAb,QAAA,EACtBlB,UAAU,gBACTb,IAAA,CAACT,SAAS;YAACkD,KAAK,EAAEjD,MAAM,CAACqD;UAAc,CAAE,CAAC,gBAE1C7C,IAAA,CAACX,cAAc;YAACoD,KAAK,EAAEjD,MAAM,CAACsD;UAAU,CAAE;QAC3C,CACG,CAAC;MAAA,CACP;IACH,CACG,CAAC;EAAA,CACE,CAAC;AAEhB,CAAC;AAED,MAAMvB,MAAM,GAAGpC,UAAU,CAAC4D,MAAM,CAAC;EAC/BvB,IAAI,EAAE;IACJwB,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE7C,WAAW;IACnB8C,WAAW,EAAEvD,OAAO,CAAC,GAAG,CAAC;IACzBwD,YAAY,EAAExD,OAAO,CAAC,GAAG,CAAC;IAC1ByD,eAAe,EAAE7D,MAAM,CAAC8D,SAAS;IACjCC,YAAY,EAAEjE,aAAa,CAAC,GAAG,CAAC;IAChCkE,GAAG,EAAE5D,OAAO,CAAC,GAAG,CAAC;IACjB,GAAGD,OAAO,CAAC,GAAG;EAChB,CAAC;EACD8B,QAAQ,EAAE;IACR4B,eAAe,EAAE7D,MAAM,CAACiE,OAAO;IAC/B,GAAG9D,OAAO,CAAC,GAAG;EAChB,CAAC;EACD+B,OAAO,EAAE;IACP2B,eAAe,EAAE7D,MAAM,CAACkE,SAAS;IACjCC,SAAS,EACP;EACJ,CAAC;EACDhC,eAAe,EAAE;IACf0B,eAAe,EAAE7D,MAAM,CAACoE;EAC1B,CAAC;EACD5B,OAAO,EAAE;IACP6B,IAAI,EAAE;EACR,CAAC;EACDnD,KAAK,EAAE;IACL+B,KAAK,EAAEjD,MAAM,CAACsD;EAChB,CAAC;EACDX,aAAa,EAAE;IACbM,KAAK,EAAEjD,MAAM,CAACsE;EAChB,CAAC;EACDnD,QAAQ,EAAE;IACR8B,KAAK,EAAEjD,MAAM,CAACkD,SAAS;IACvBqB,QAAQ,EAAExD,kBAAkB;IAC5ByD,UAAU,EAAEvE,WAAW,CAACwE,WAAW;IACnCC,UAAU,EAAE1D;EACd,CAAC;EACD6B,gBAAgB,EAAE;IAChBI,KAAK,EAAEjD,MAAM,CAAC2E;EAChB,CAAC;EACD7B,QAAQ,EAAE;IACRU,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBO,GAAG,EAAE;EACP,CAAC;EACDb,MAAM,EAAE;IACNF,KAAK,EAAEjD,MAAM,CAACsD;EAChB,CAAC;EACDF,IAAI,EAAE;IACJwB,KAAK,EAAE9D,SAAS;IAChB4C,MAAM,EAAE5C,SAAS;IACjB+D,cAAc,EAAE,QAAQ;IACxBpB,UAAU,EAAE;EACd,CAAC;EACDrB,OAAO,EAAE;IACP0C,OAAO,EAAE;EACX,CAAC;EACD/B,gBAAgB,EAAE;IAChBS,aAAa,EAAE,KAAK;IACpBQ,GAAG,EAAE5D,OAAO,CAAC,GAAG;EAClB;AACF,CAAC,CAAC","ignoreList":[]}