@magmamath/students-features 1.8.0-rc.0-fluency-visuals → 1.8.0

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerHeader.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
 var _i18n = require("../../../../i18n/i18n.js");
+var _AverageCell = require("../table/AverageCell.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerHeader = ({
@@ -17,31 +18,36 @@ const DrawerHeader = ({
   const t = (0, _i18n.useText)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.left,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeUi.Typography, {
-        variant: _reactNativeUi.HeadingVariants.H9,
-        style: styles.label,
-        children: t('teacher.fluency.studentFluency')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.name,
-        children: student.name
-      })]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.name,
+      numberOfLines: 1,
+      children: student.name
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.right,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.masteryLabel,
-        children: t('teacher.fluency.overallMastery')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: styles.masteryValue,
-        children: [student.averagePercent, "%"]
+      style: styles.mastery,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.masteryRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.masteryLabel,
+          numberOfLines: 1,
+          children: t('teacher.fluency.overallMastery')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.masteryValue,
+          children: [student.averagePercent, "%"]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.masteryBar,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AverageCell.AverageCell, {
+          percent: student.averagePercent,
+          height: 22,
+          showPercent: false
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeUi.Button, {
-      variant: _reactNativeUi.ButtonVariant.SECONDARY,
+      variant: _reactNativeUi.ButtonVariant.TERTIARY,
       colorScheme: _reactNativeUi.ButtonColor.WHITE,
       icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeUi.CrossIcon, {
         size: 18,
-        color: _reactNativeUi.COLORS.NEUTRAL_7
+        color: _reactNativeUi.COLORS.NEUTRAL_9
       }),
       onPress: onClose,
       style: {
@@ -55,45 +61,44 @@ const styles = _reactNative.StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: _reactNativeUi.SPACING[500],
-    paddingHorizontal: _reactNativeUi.SPACING[700],
-    borderTopWidth: 1,
+    gap: _reactNativeUi.SPACING[400],
+    padding: _reactNativeUi.SPACING[400],
     borderBottomWidth: 1,
     borderColor: _reactNativeUi.COLORS.NEUTRAL_4
   },
-  left: {
-    marginLeft: 48
-  },
-  label: {
-    color: _reactNativeUi.COLORS.GREEN_7,
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '600'
-  },
   name: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 22,
+    flex: 1,
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
     color: _reactNativeUi.COLORS.NEUTRAL_10
   },
-  right: {
+  mastery: {
+    alignItems: 'flex-end'
+  },
+  masteryBar: {
+    width: 150
+  },
+  masteryRow: {
+    flexDirection: 'row',
     alignItems: 'flex-end',
-    marginLeft: 'auto'
+    gap: _reactNativeUi.SPACING[100]
   },
   masteryLabel: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAires,
+    fontWeight: '400',
     fontSize: 13,
+    lineHeight: 26,
     color: _reactNativeUi.COLORS.NEUTRAL_7
   },
   masteryValue: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 28,
-    color: _reactNativeUi.COLORS.GREEN_7
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24,
+    color: _reactNativeUi.COLORS.PRIMARY_YELLOW
   },
   closeButton: {
-    alignSelf: 'center',
-    marginLeft: _reactNativeUi.SPACING[600]
+    alignSelf: 'center'
   }
 });
 //# sourceMappingURL=DrawerHeader.js.map

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_jsxRuntime","e","__esModule","default","DrawerHeader","student","onClose","t","useText","jsxs","View","style","styles","container","children","left","jsx","Typography","variant","HeadingVariants","H9","label","Text","name","right","masteryLabel","masteryValue","averagePercent","Button","ButtonVariant","SECONDARY","colorScheme","ButtonColor","WHITE","icon","CrossIcon","size","color","COLORS","NEUTRAL_7","onPress","closeButton","exports","StyleSheet","create","flexDirection","alignItems","paddingVertical","SPACING","paddingHorizontal","borderTopWidth","borderBottomWidth","borderColor","NEUTRAL_4","marginLeft","GREEN_7","fontFamily","FONT_FAMILY","buenosAiresSemiBold","fontWeight","buenosAiresBold","fontSize","NEUTRAL_10","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerHeader.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_AverageCell","_jsxRuntime","e","__esModule","default","DrawerHeader","student","onClose","t","useText","jsxs","View","style","styles","container","children","jsx","Text","name","numberOfLines","mastery","masteryRow","masteryLabel","masteryValue","averagePercent","masteryBar","AverageCell","percent","height","showPercent","Button","variant","ButtonVariant","TERTIARY","colorScheme","ButtonColor","WHITE","icon","CrossIcon","size","color","COLORS","NEUTRAL_9","onPress","closeButton","exports","StyleSheet","create","flexDirection","alignItems","gap","SPACING","padding","borderBottomWidth","borderColor","NEUTRAL_4","flex","fontFamily","FONT_FAMILY","buenosAiresSemiBold","fontWeight","fontSize","NEUTRAL_10","width","buenosAires","lineHeight","NEUTRAL_7","PRIMARY_YELLOW","alignSelf"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerHeader.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerMatrixes.js

@@ -8,39 +8,23 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
 var _i18n = require("../../../../i18n/i18n.js");
+var _TeacherFluencyContext = require("../../context/TeacherFluencyContext.js");
 var _DrawerOperatorBox = require("./DrawerOperatorBox.js");
 var _fluencyTeacherConstants = require("../../fluencyTeacher.constants.js");
+var _fluencyTeacherHelpers = require("../../fluencyTeacher.helpers.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerMatrixes = () => {
   const t = (0, _i18n.useText)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const {
+    grade
+  } = (0, _TeacherFluencyContext.useTeacherFluency)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.grid,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.addition'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.ADDITION,
-      iconBg: _reactNativeUi.COLORS.GREEN_1,
-      iconColor: _reactNativeUi.COLORS.GREEN_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.ADDITION
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.subtraction'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.SUBTRACTION,
-      iconBg: _reactNativeUi.COLORS.ORANGE_1,
-      iconColor: _reactNativeUi.COLORS.ORANGE_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.SUBTRACTION
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.multiplication'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.MULTIPLICATION,
-      iconBg: _reactNativeUi.COLORS.BLUE_1,
-      iconColor: _reactNativeUi.COLORS.BLUE_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.MULTIPLICATION
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
-      title: t('student.fluency.division'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.DIVISION,
-      iconBg: _reactNativeUi.COLORS.PURPLE_1,
-      iconColor: _reactNativeUi.COLORS.PURPLE_7,
-      operator: _fluencyTeacherConstants.FluencyOperator.DIVISION
-    })]
+    children: (0, _fluencyTeacherHelpers.getOperatorsForGrade)(grade).map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorBox.DrawerOperatorBox, {
+      title: t(_fluencyTeacherConstants.OPERATOR_CARD_CONFIG[operator].labelKey),
+      operator: operator
+    }, operator))
   });
 };
 exports.DrawerMatrixes = DrawerMatrixes;
@@ -48,8 +32,7 @@ const styles = _reactNative.StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: _reactNativeUi.SPACING[300],
-    marginTop: _reactNativeUi.SPACING[300],
+    gap: _reactNativeUi.SPACING[400],
     marginBottom: _reactNativeUi.SPACING[600]
   }
 });

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerMatrixes.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_DrawerOperatorBox","_fluencyTeacherConstants","_jsxRuntime","e","__esModule","default","DrawerMatrixes","t","useText","jsxs","View","style","styles","grid","children","jsx","DrawerOperatorBox","title","symbol","FluencyMathOperatorSymbol","ADDITION","iconBg","COLORS","GREEN_1","iconColor","GREEN_7","operator","FluencyOperator","SUBTRACTION","ORANGE_1","ORANGE_7","MULTIPLICATION","BLUE_1","BLUE_7","DIVISION","PURPLE_1","PURPLE_7","exports","StyleSheet","create","flexDirection","flexWrap","gap","SPACING","marginTop","marginBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerMatrixes.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,wBAAA,GAAAL,OAAA;AAA2F,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpF,MAAMG,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EACnB,oBACE,IAAAN,WAAA,CAAAO,IAAA,EAACZ,YAAA,CAAAa,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,gBACvB,IAAAZ,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,0BAA0B,CAAE;MACrCW,MAAM,EAAEC,kDAAyB,CAACC,QAAS;MAC3CC,MAAM,EAAEC,qBAAM,CAACC,OAAQ;MACvBC,SAAS,EAAEF,qBAAM,CAACG,OAAQ;MAC1BC,QAAQ,EAAEC,wCAAe,CAACP;IAAS,CACpC,CAAC,eACF,IAAAlB,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,6BAA6B,CAAE;MACxCW,MAAM,EAAEC,kDAAyB,CAACS,WAAY;MAC9CP,MAAM,EAAEC,qBAAM,CAACO,QAAS;MACxBL,SAAS,EAAEF,qBAAM,CAACQ,QAAS;MAC3BJ,QAAQ,EAAEC,wCAAe,CAACC;IAAY,CACvC,CAAC,eACF,IAAA1B,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,gCAAgC,CAAE;MAC3CW,MAAM,EAAEC,kDAAyB,CAACY,cAAe;MACjDV,MAAM,EAAEC,qBAAM,CAACU,MAAO;MACtBR,SAAS,EAAEF,qBAAM,CAACW,MAAO;MACzBP,QAAQ,EAAEC,wCAAe,CAACI;IAAe,CAC1C,CAAC,eACF,IAAA7B,WAAA,CAAAa,GAAA,EAACf,kBAAA,CAAAgB,iBAAiB;MAChBC,KAAK,EAAEV,CAAC,CAAC,0BAA0B,CAAE;MACrCW,MAAM,EAAEC,kDAAyB,CAACe,QAAS;MAC3Cb,MAAM,EAAEC,qBAAM,CAACa,QAAS;MACxBX,SAAS,EAAEF,qBAAM,CAACc,QAAS;MAC3BV,QAAQ,EAAEC,wCAAe,CAACO;IAAS,CACpC,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAAAG,OAAA,CAAA/B,cAAA,GAAAA,cAAA;AAED,MAAMM,MAAM,GAAG0B,uBAAU,CAACC,MAAM,CAAC;EAC/B1B,IAAI,EAAE;IACJ2B,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,MAAM;IAChBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,SAAS,EAAED,sBAAO,CAAC,GAAG,CAAC;IACvBE,YAAY,EAAEF,sBAAO,CAAC,GAAG;EAC3B;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_TeacherFluencyContext","_DrawerOperatorBox","_fluencyTeacherConstants","_fluencyTeacherHelpers","_jsxRuntime","e","__esModule","default","DrawerMatrixes","t","useText","grade","useTeacherFluency","jsx","View","style","styles","grid","children","getOperatorsForGrade","map","operator","DrawerOperatorBox","title","OPERATOR_CARD_CONFIG","labelKey","exports","StyleSheet","create","flexDirection","flexWrap","gap","SPACING","marginBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerMatrixes.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA;AACA,IAAAM,wBAAA,GAAAN,OAAA;AACA,IAAAO,sBAAA,GAAAP,OAAA;AAAmE,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE5D,MAAMG,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EACnB,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,wCAAiB,EAAC,CAAC;EACrC,oBACE,IAAAR,WAAA,CAAAS,GAAA,EAAChB,YAAA,CAAAiB,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,EACtB,IAAAC,2CAAoB,EAACR,KAAK,CAAC,CAACS,GAAG,CAAEC,QAAQ,iBACxC,IAAAjB,WAAA,CAAAS,GAAA,EAACZ,kBAAA,CAAAqB,iBAAiB;MAEhBC,KAAK,EAAEd,CAAC,CAACe,6CAAoB,CAACH,QAAQ,CAAC,CAACI,QAAQ,CAAE;MAClDJ,QAAQ,EAAEA;IAAS,GAFdA,QAGN,CACF;EAAC,CACE,CAAC;AAEX,CAAC;AAAAK,OAAA,CAAAlB,cAAA,GAAAA,cAAA;AAED,MAAMQ,MAAM,GAAGW,uBAAU,CAACC,MAAM,CAAC;EAC/BX,IAAI,EAAE;IACJY,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,MAAM;IAChBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,YAAY,EAAED,sBAAO,CAAC,GAAG;EAC3B;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerOperatorBox.js

@@ -11,14 +11,13 @@ var _reactNativeUi = require("@magmamath/react-native-ui");
 var _i18n = require("../../../../i18n/i18n.js");
 var _useDrawerMatrix = require("../../hooks/useDrawerMatrix.js");
 var _DrawerMatrix = require("../matrix/DrawerMatrix.js");
+var _MatrixLegend = require("../matrix/MatrixLegend.js");
 var _TeacherFluencyContext = require("../../context/TeacherFluencyContext.js");
+var _fluencyTeacherConstants = require("../../fluencyTeacher.constants.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerOperatorBox = ({
   title,
-  symbol,
-  iconBg,
-  iconColor,
   operator
 }) => {
   const t = (0, _i18n.useText)();
@@ -32,24 +31,14 @@ const DrawerOperatorBox = ({
     rows: matrixProps.grid.rows.length
   }) : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
+    style: [styles.container, {
+      borderColor: _fluencyTeacherConstants.OPERATOR_PALETTES[operator].boxBorder
+    }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.iconBox, {
-          backgroundColor: iconBg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.symbol, {
-            color: iconColor
-          }],
-          children: symbol
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.title,
         children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.spacer
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.factsLabel,
         children: factsLabel
@@ -62,8 +51,13 @@ const DrawerOperatorBox = ({
           size: "large",
           color: _reactNativeUi.COLORS.PRIMARY_BLUE
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerMatrix.DrawerMatrix, {
-        ...matrixProps
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerMatrix.DrawerMatrix, {
+          ...matrixProps
+        }), matrixProps.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MatrixLegend.MatrixLegend, {
+          operator: operator,
+          grid: matrixProps.grid
+        })]
       })
     })]
   });
@@ -71,48 +65,37 @@ const DrawerOperatorBox = ({
 exports.DrawerOperatorBox = DrawerOperatorBox;
 const styles = _reactNative.StyleSheet.create({
   container: {
-    width: 315,
-    height: 315,
+    flexGrow: 1,
+    flexBasis: '45%',
     borderWidth: 1,
-    borderColor: _reactNativeUi.COLORS.NEUTRAL_4,
     borderRadius: _reactNativeUi.BORDER_RADIUS[300],
-    padding: _reactNativeUi.SPACING[400]
+    backgroundColor: _reactNativeUi.COLORS.NEUTRAL_1,
+    padding: _reactNativeUi.SPACING[400],
+    gap: _reactNativeUi.SPACING[300]
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: _reactNativeUi.SPACING[200],
-    marginBottom: _reactNativeUi.SPACING[300]
-  },
-  iconBox: {
-    width: 24,
-    height: 24,
-    borderRadius: 6,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  symbol: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontSize: 20,
-    marginBottom: 2
+    gap: _reactNativeUi.SPACING[200]
   },
   title: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
-    fontWeight: '700',
-    fontSize: 15,
+    flex: 1,
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAires,
+    fontWeight: '400',
+    fontSize: 16,
     color: _reactNativeUi.COLORS.NEUTRAL_10
   },
-  spacer: {
-    flex: 1
-  },
   factsLabel: {
     fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
     fontSize: 13,
     fontWeight: '600',
+    textTransform: 'uppercase',
     color: _reactNativeUi.COLORS.NEUTRAL_7
   },
   content: {
-    flex: 1
+    height: 210,
+    flexDirection: 'row',
+    gap: _reactNativeUi.SPACING[200]
   },
   loader: {
     flex: 1,

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerOperatorBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_effectorReact","_reactNativeUi","_i18n","_useDrawerMatrix","_DrawerMatrix","_TeacherFluencyContext","_jsxRuntime","e","__esModule","default","DrawerOperatorBox","title","symbol","iconBg","iconColor","operator","t","useText","model","useTeacherFluency","isLoading","useUnit","api","getStudentDetailsFx","pending","matrixProps","useDrawerMatrix","factsLabel","grid","cols","colLabels","length","rows","jsxs","View","style","styles","container","children","header","jsx","iconBox","backgroundColor","Text","color","spacer","content","loader","ActivityIndicator","size","COLORS","PRIMARY_BLUE","DrawerMatrix","exports","StyleSheet","create","width","height","borderWidth","borderColor","NEUTRAL_4","borderRadius","BORDER_RADIUS","padding","SPACING","flexDirection","alignItems","gap","marginBottom","justifyContent","fontFamily","FONT_FAMILY","buenosAiresBold","fontSize","buenosAiresSemiBold","fontWeight","NEUTRAL_10","flex","NEUTRAL_7"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,sBAAA,GAAAP,OAAA;AAAuE,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAYhE,MAAMG,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;EACLC,MAAM;EACNC,MAAM;EACNC,SAAS;EACTC;AACsB,CAAC,KAAK;EAC5B,MAAMC,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EACnB,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,wCAAiB,EAAC,CAAC;EACrC,MAAMC,SAAS,GAAG,IAAAC,sBAAO,EAACH,KAAK,CAACI,GAAG,CAACC,mBAAmB,CAACC,OAAO,CAAC;EAChE,MAAMC,WAAW,GAAG,IAAAC,gCAAe,EAACX,QAAQ,CAAC;EAC7C,MAAMY,UAAU,GAAGF,WAAW,CAACG,IAAI,GAC/BZ,CAAC,CAAC,gCAAgC,EAAE;IAClCa,IAAI,EAAEJ,WAAW,CAACG,IAAI,CAACE,SAAS,CAACC,MAAM;IACvCC,IAAI,EAAEP,WAAW,CAACG,IAAI,CAACI,IAAI,CAACD;EAC9B,CAAC,CAAC,GACF,EAAE;EAEN,oBACE,IAAAzB,WAAA,CAAA2B,IAAA,EAAClC,YAAA,CAAAmC,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5B,IAAAhC,WAAA,CAAA2B,IAAA,EAAClC,YAAA,CAAAmC,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACG,MAAO;MAAAD,QAAA,gBACzB,IAAAhC,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAAmC,IAAI;QAACC,KAAK,EAAE,CAACC,MAAM,CAACK,OAAO,EAAE;UAAEC,eAAe,EAAE7B;QAAO,CAAC,CAAE;QAAAyB,QAAA,eACzD,IAAAhC,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAA4C,IAAI;UAACR,KAAK,EAAE,CAACC,MAAM,CAACxB,MAAM,EAAE;YAAEgC,KAAK,EAAE9B;UAAU,CAAC,CAAE;UAAAwB,QAAA,EAAE1B;QAAM,CAAO;MAAC,CAC/D,CAAC,eACP,IAAAN,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAA4C,IAAI;QAACR,KAAK,EAAEC,MAAM,CAACzB,KAAM;QAAA2B,QAAA,EAAE3B;MAAK,CAAO,CAAC,eACzC,IAAAL,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAAmC,IAAI;QAACC,KAAK,EAAEC,MAAM,CAACS;MAAO,CAAE,CAAC,eAC9B,IAAAvC,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAA4C,IAAI;QAACR,KAAK,EAAEC,MAAM,CAACT,UAAW;QAAAW,QAAA,EAAEX;MAAU,CAAO,CAAC;IAAA,CAC/C,CAAC,eACP,IAAArB,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAAmC,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACU,OAAQ;MAAAR,QAAA,EACzBlB,SAAS,gBACR,IAAAd,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAAmC,IAAI;QAACC,KAAK,EAAEC,MAAM,CAACW,MAAO;QAAAT,QAAA,eACzB,IAAAhC,WAAA,CAAAkC,GAAA,EAACzC,YAAA,CAAAiD,iBAAiB;UAACC,IAAI,EAAC,OAAO;UAACL,KAAK,EAAEM,qBAAM,CAACC;QAAa,CAAE;MAAC,CAC1D,CAAC,gBAEP,IAAA7C,WAAA,CAAAkC,GAAA,EAACpC,aAAA,CAAAgD,YAAY;QAAA,GAAK3B;MAAW,CAAG;IACjC,CACG,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAAA4B,OAAA,CAAA3C,iBAAA,GAAAA,iBAAA;AAED,MAAM0B,MAAM,GAAGkB,uBAAU,CAACC,MAAM,CAAC;EAC/BlB,SAAS,EAAE;IACTmB,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAET,qBAAM,CAACU,SAAS;IAC7BC,YAAY,EAAEC,4BAAa,CAAC,GAAG,CAAC;IAChCC,OAAO,EAAEC,sBAAO,CAAC,GAAG;EACtB,CAAC;EACDzB,MAAM,EAAE;IACN0B,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAEH,sBAAO,CAAC,GAAG,CAAC;IACjBI,YAAY,EAAEJ,sBAAO,CAAC,GAAG;EAC3B,CAAC;EACDvB,OAAO,EAAE;IACPe,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVI,YAAY,EAAE,CAAC;IACfK,UAAU,EAAE,QAAQ;IACpBG,cAAc,EAAE;EAClB,CAAC;EACDzD,MAAM,EAAE;IACN0D,UAAU,EAAEC,0BAAW,CAACC,eAAe;IACvCC,QAAQ,EAAE,EAAE;IACZL,YAAY,EAAE;EAChB,CAAC;EACDzD,KAAK,EAAE;IACL2D,UAAU,EAAEC,0BAAW,CAACG,mBAAmB;IAC3CC,UAAU,EAAE,KAAK;IACjBF,QAAQ,EAAE,EAAE;IACZ7B,KAAK,EAAEM,qBAAM,CAAC0B;EAChB,CAAC;EACD/B,MAAM,EAAE;IACNgC,IAAI,EAAE;EACR,CAAC;EACDlD,UAAU,EAAE;IACV2C,UAAU,EAAEC,0BAAW,CAACG,mBAAmB;IAC3CD,QAAQ,EAAE,EAAE;IACZE,UAAU,EAAE,KAAK;IACjB/B,KAAK,EAAEM,qBAAM,CAAC4B;EAChB,CAAC;EACDhC,OAAO,EAAE;IACP+B,IAAI,EAAE;EACR,CAAC;EACD9B,MAAM,EAAE;IACN8B,IAAI,EAAE,CAAC;IACPR,cAAc,EAAE,QAAQ;IACxBH,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_effectorReact","_reactNativeUi","_i18n","_useDrawerMatrix","_DrawerMatrix","_MatrixLegend","_TeacherFluencyContext","_fluencyTeacherConstants","_jsxRuntime","e","__esModule","default","DrawerOperatorBox","title","operator","t","useText","model","useTeacherFluency","isLoading","useUnit","api","getStudentDetailsFx","pending","matrixProps","useDrawerMatrix","factsLabel","grid","cols","colLabels","length","rows","jsxs","View","style","styles","container","borderColor","OPERATOR_PALETTES","boxBorder","children","header","jsx","Text","content","loader","ActivityIndicator","size","color","COLORS","PRIMARY_BLUE","Fragment","DrawerMatrix","MatrixLegend","exports","StyleSheet","create","flexGrow","flexBasis","borderWidth","borderRadius","BORDER_RADIUS","backgroundColor","NEUTRAL_1","padding","SPACING","gap","flexDirection","alignItems","flex","fontFamily","FONT_FAMILY","buenosAires","fontWeight","fontSize","NEUTRAL_10","buenosAiresSemiBold","textTransform","NEUTRAL_7","height","justifyContent"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorBox.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.js

@@ -7,71 +7,78 @@ exports.DrawerOperatorStatCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
+var _fluencyTeacherHelpers = require("../../fluencyTeacher.helpers.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerOperatorStatCard = ({
   title,
   value,
   symbol,
-  color
-}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-  style: styles.container,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.iconContainer, {
-      backgroundColor: color + '26'
+  operator
+}) => {
+  const {
+    background,
+    border,
+    text
+  } = (0, _fluencyTeacherHelpers.getOperatorBandColors)(operator, value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: background,
+      borderColor: border
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.symbol, {
-        color
-      }],
-      children: symbol
-    })
-  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.title,
-      children: title
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.titleRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.symbol, {
+          color: text
+        }],
+        children: symbol
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.title, {
+          color: text
+        }],
+        numberOfLines: 1,
+        children: title
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-      style: styles.value,
+      style: [styles.value, {
+        color: text
+      }],
       children: [value, "%"]
     })]
-  })]
-});
+  });
+};
 exports.DrawerOperatorStatCard = DrawerOperatorStatCard;
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: _reactNativeUi.SPACING[300],
-    padding: _reactNativeUi.SPACING[300],
-    borderRadius: _reactNativeUi.SPACING[300],
-    borderWidth: 1,
-    borderColor: _reactNativeUi.COLORS.NEUTRAL_4,
-    backgroundColor: _reactNativeUi.COLORS.NEUTRAL_2
+    justifyContent: 'center',
+    gap: _reactNativeUi.SPACING[100],
+    padding: _reactNativeUi.SPACING[200],
+    borderRadius: _reactNativeUi.BORDER_RADIUS[200],
+    borderWidth: 1
   },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    borderRadius: _reactNativeUi.SPACING[200],
+  titleRow: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    gap: _reactNativeUi.SPACING[100]
   },
   symbol: {
+    width: 16,
     fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontSize: 28,
-    marginBottom: 2
+    fontSize: 16,
+    textAlign: 'center'
   },
   title: {
+    flexShrink: 1,
     fontFamily: _reactNativeUi.FONT_FAMILY.buenosAires,
     fontWeight: '400',
-    fontSize: 12,
-    color: _reactNativeUi.COLORS.NEUTRAL_7
+    fontSize: 16
   },
   value: {
-    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresBold,
-    fontWeight: '700',
-    fontSize: 18,
-    color: _reactNativeUi.COLORS.NEUTRAL_10
+    fontFamily: _reactNativeUi.FONT_FAMILY.buenosAiresSemiBold,
+    fontWeight: '600',
+    fontSize: 24
   }
 });
 //# sourceMappingURL=DrawerOperatorStatCard.js.map

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerOperatorStatCard.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_jsxRuntime","e","__esModule","default","DrawerOperatorStatCard","title","value","symbol","color","jsxs","View","style","styles","container","children","jsx","iconContainer","backgroundColor","Text","exports","StyleSheet","create","flex","flexDirection","alignItems","gap","SPACING","padding","borderRadius","borderWidth","borderColor","COLORS","NEUTRAL_4","NEUTRAL_2","width","height","justifyContent","fontFamily","FONT_FAMILY","buenosAiresBold","fontSize","marginBottom","buenosAires","fontWeight","NEUTRAL_7","NEUTRAL_10"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorStatCard.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAAyE,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASlE,MAAMG,sBAAsB,GAAGA,CAAC;EACrCC,KAAK;EACLC,KAAK;EACLC,MAAM;EACNC;AAC2B,CAAC,kBAC5B,IAAAR,WAAA,CAAAS,IAAA,EAACX,YAAA,CAAAY,IAAI;EAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;EAAAC,QAAA,gBAC5B,IAAAd,WAAA,CAAAe,GAAA,EAACjB,YAAA,CAAAY,IAAI;IAACC,KAAK,EAAE,CAACC,MAAM,CAACI,aAAa,EAAE;MAAEC,eAAe,EAAET,KAAK,GAAG;IAAK,CAAC,CAAE;IAAAM,QAAA,eACrE,IAAAd,WAAA,CAAAe,GAAA,EAACjB,YAAA,CAAAoB,IAAI;MAACP,KAAK,EAAE,CAACC,MAAM,CAACL,MAAM,EAAE;QAAEC;MAAM,CAAC,CAAE;MAAAM,QAAA,EAAEP;IAAM,CAAO;EAAC,CACpD,CAAC,eACP,IAAAP,WAAA,CAAAS,IAAA,EAACX,YAAA,CAAAY,IAAI;IAAAI,QAAA,gBACH,IAAAd,WAAA,CAAAe,GAAA,EAACjB,YAAA,CAAAoB,IAAI;MAACP,KAAK,EAAEC,MAAM,CAACP,KAAM;MAAAS,QAAA,EAAET;IAAK,CAAO,CAAC,eACzC,IAAAL,WAAA,CAAAS,IAAA,EAACX,YAAA,CAAAoB,IAAI;MAACP,KAAK,EAAEC,MAAM,CAACN,KAAM;MAAAQ,QAAA,GAAER,KAAK,EAAC,GAAC;IAAA,CAAM,CAAC;EAAA,CACtC,CAAC;AAAA,CACH,CACP;AAAAa,OAAA,CAAAf,sBAAA,GAAAA,sBAAA;AAED,MAAMQ,MAAM,GAAGQ,uBAAU,CAACC,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,OAAO,EAAED,sBAAO,CAAC,GAAG,CAAC;IACrBE,YAAY,EAAEF,sBAAO,CAAC,GAAG,CAAC;IAC1BG,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEC,qBAAM,CAACC,SAAS;IAC7Bf,eAAe,EAAEc,qBAAM,CAACE;EAC1B,CAAC;EACDjB,aAAa,EAAE;IACbkB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVP,YAAY,EAAEF,sBAAO,CAAC,GAAG,CAAC;IAC1BF,UAAU,EAAE,QAAQ;IACpBY,cAAc,EAAE;EAClB,CAAC;EACD7B,MAAM,EAAE;IACN8B,UAAU,EAAEC,0BAAW,CAACC,eAAe;IACvCC,QAAQ,EAAE,EAAE;IACZC,YAAY,EAAE;EAChB,CAAC;EACDpC,KAAK,EAAE;IACLgC,UAAU,EAAEC,0BAAW,CAACI,WAAW;IACnCC,UAAU,EAAE,KAAK;IACjBH,QAAQ,EAAE,EAAE;IACZhC,KAAK,EAAEuB,qBAAM,CAACa;EAChB,CAAC;EACDtC,KAAK,EAAE;IACL+B,UAAU,EAAEC,0BAAW,CAACC,eAAe;IACvCI,UAAU,EAAE,KAAK;IACjBH,QAAQ,EAAE,EAAE;IACZhC,KAAK,EAAEuB,qBAAM,CAACc;EAChB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_fluencyTeacherHelpers","_jsxRuntime","e","__esModule","default","DrawerOperatorStatCard","title","value","symbol","operator","background","border","text","getOperatorBandColors","jsxs","View","style","styles","container","backgroundColor","borderColor","children","titleRow","jsx","Text","color","numberOfLines","exports","StyleSheet","create","flex","justifyContent","gap","SPACING","padding","borderRadius","BORDER_RADIUS","borderWidth","flexDirection","alignItems","width","fontFamily","FONT_FAMILY","buenosAiresBold","fontSize","textAlign","flexShrink","buenosAires","fontWeight","buenosAiresSemiBold"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerOperatorStatCard.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AAAoE,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAU7D,MAAMG,sBAAsB,GAAGA,CAAC;EACrCC,KAAK;EACLC,KAAK;EACLC,MAAM;EACNC;AAC2B,CAAC,KAAK;EACjC,MAAM;IAAEC,UAAU;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,4CAAqB,EAACJ,QAAQ,EAAEF,KAAK,CAAC;EAC3E,oBACE,IAAAN,WAAA,CAAAa,IAAA,EAAChB,YAAA,CAAAiB,IAAI;IAACC,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAET,UAAU;MAAEU,WAAW,EAAET;IAAO,CAAC,CAAE;IAAAU,QAAA,gBACpF,IAAApB,WAAA,CAAAa,IAAA,EAAChB,YAAA,CAAAiB,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACK,QAAS;MAAAD,QAAA,gBAC3B,IAAApB,WAAA,CAAAsB,GAAA,EAACzB,YAAA,CAAA0B,IAAI;QAACR,KAAK,EAAE,CAACC,MAAM,CAACT,MAAM,EAAE;UAAEiB,KAAK,EAAEb;QAAK,CAAC,CAAE;QAAAS,QAAA,EAAEb;MAAM,CAAO,CAAC,eAC9D,IAAAP,WAAA,CAAAsB,GAAA,EAACzB,YAAA,CAAA0B,IAAI;QAACR,KAAK,EAAE,CAACC,MAAM,CAACX,KAAK,EAAE;UAAEmB,KAAK,EAAEb;QAAK,CAAC,CAAE;QAACc,aAAa,EAAE,CAAE;QAAAL,QAAA,EAC5Df;MAAK,CACF,CAAC;IAAA,CACH,CAAC,eACP,IAAAL,WAAA,CAAAa,IAAA,EAAChB,YAAA,CAAA0B,IAAI;MAACR,KAAK,EAAE,CAACC,MAAM,CAACV,KAAK,EAAE;QAAEkB,KAAK,EAAEb;MAAK,CAAC,CAAE;MAAAS,QAAA,GAAEd,KAAK,EAAC,GAAC;IAAA,CAAM,CAAC;EAAA,CACzD,CAAC;AAEX,CAAC;AAAAoB,OAAA,CAAAtB,sBAAA,GAAAA,sBAAA;AAED,MAAMY,MAAM,GAAGW,uBAAU,CAACC,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,OAAO,EAAED,sBAAO,CAAC,GAAG,CAAC;IACrBE,YAAY,EAAEC,4BAAa,CAAC,GAAG,CAAC;IAChCC,WAAW,EAAE;EACf,CAAC;EACDf,QAAQ,EAAE;IACRgB,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBP,GAAG,EAAEC,sBAAO,CAAC,GAAG;EAClB,CAAC;EACDzB,MAAM,EAAE;IACNgC,KAAK,EAAE,EAAE;IACTC,UAAU,EAAEC,0BAAW,CAACC,eAAe;IACvCC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE;EACb,CAAC;EACDvC,KAAK,EAAE;IACLwC,UAAU,EAAE,CAAC;IACbL,UAAU,EAAEC,0BAAW,CAACK,WAAW;IACnCC,UAAU,EAAE,KAAK;IACjBJ,QAAQ,EAAE;EACZ,CAAC;EACDrC,KAAK,EAAE;IACLkC,UAAU,EAAEC,0BAAW,CAACO,mBAAmB;IAC3CD,UAAU,EAAE,KAAK;IACjBJ,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerStats.js

@@ -8,45 +8,35 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeUi = require("@magmamath/react-native-ui");
 var _i18n = require("../../../../i18n/i18n.js");
+var _TeacherFluencyContext = require("../../context/TeacherFluencyContext.js");
 var _DrawerOperatorStatCard = require("./DrawerOperatorStatCard.js");
 var _fluencyTeacherConstants = require("../../fluencyTeacher.constants.js");
+var _fluencyTeacherHelpers = require("../../fluencyTeacher.helpers.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DrawerStats = ({
   scores
 }) => {
   const t = (0, _i18n.useText)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const {
+    grade
+  } = (0, _TeacherFluencyContext.useTeacherFluency)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorStatCard.DrawerOperatorStatCard, {
-      title: t('student.fluency.addition'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.ADDITION,
-      color: _reactNativeUi.COLORS.PRIMARY_GREEN,
-      value: scores.addition
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorStatCard.DrawerOperatorStatCard, {
-      title: t('student.fluency.subtraction'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.SUBTRACTION,
-      color: _reactNativeUi.COLORS.PRIMARY_ORANGE,
-      value: scores.subtraction
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorStatCard.DrawerOperatorStatCard, {
-      title: t('student.fluency.multiplication'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.MULTIPLICATION,
-      color: _reactNativeUi.COLORS.PRIMARY_BLUE,
-      value: scores.multiplication
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorStatCard.DrawerOperatorStatCard, {
-      title: t('student.fluency.division'),
-      symbol: _fluencyTeacherConstants.FluencyMathOperatorSymbol.DIVISION,
-      color: _reactNativeUi.COLORS.PRIMARY_PURPLE,
-      value: scores.division
-    })]
+    children: (0, _fluencyTeacherHelpers.getOperatorsForGrade)(grade).map(operator => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerOperatorStatCard.DrawerOperatorStatCard, {
+      title: t(_fluencyTeacherConstants.OPERATOR_CARD_CONFIG[operator].labelKey),
+      symbol: _fluencyTeacherConstants.OPERATOR_CARD_CONFIG[operator].symbol,
+      operator: operator,
+      value: scores[_fluencyTeacherConstants.OPERATOR_TO_COLUMN[operator]]
+    }, operator))
   });
 };
 exports.DrawerStats = DrawerStats;
 const styles = _reactNative.StyleSheet.create({
   container: {
     flexDirection: 'row',
-    gap: _reactNativeUi.SPACING[300],
-    paddingBottom: _reactNativeUi.SPACING[300]
+    gap: _reactNativeUi.SPACING[400],
+    paddingBottom: _reactNativeUi.SPACING[400]
   }
 });
 //# sourceMappingURL=DrawerStats.js.map

package/dist/commonjs/features/fluency-teacher/components/drawer/DrawerStats.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_DrawerOperatorStatCard","_fluencyTeacherConstants","_jsxRuntime","e","__esModule","default","DrawerStats","scores","t","useText","jsxs","View","style","styles","container","children","jsx","DrawerOperatorStatCard","title","symbol","FluencyMathOperatorSymbol","ADDITION","color","COLORS","PRIMARY_GREEN","value","addition","SUBTRACTION","PRIMARY_ORANGE","subtraction","MULTIPLICATION","PRIMARY_BLUE","multiplication","DIVISION","PRIMARY_PURPLE","division","exports","StyleSheet","create","flexDirection","gap","SPACING","paddingBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerStats.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;AAGA,IAAAK,wBAAA,GAAAL,OAAA;AAA0E,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMnE,MAAMG,WAAW,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAMC,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EACnB,oBACE,IAAAP,WAAA,CAAAQ,IAAA,EAACb,YAAA,CAAAc,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5B,IAAAb,WAAA,CAAAc,GAAA,EAAChB,uBAAA,CAAAiB,sBAAsB;MACrBC,KAAK,EAAEV,CAAC,CAAC,0BAA0B,CAAE;MACrCW,MAAM,EAAEC,kDAAyB,CAACC,QAAS;MAC3CC,KAAK,EAAEC,qBAAM,CAACC,aAAc;MAC5BC,KAAK,EAAElB,MAAM,CAACmB;IAAS,CACxB,CAAC,eACF,IAAAxB,WAAA,CAAAc,GAAA,EAAChB,uBAAA,CAAAiB,sBAAsB;MACrBC,KAAK,EAAEV,CAAC,CAAC,6BAA6B,CAAE;MACxCW,MAAM,EAAEC,kDAAyB,CAACO,WAAY;MAC9CL,KAAK,EAAEC,qBAAM,CAACK,cAAe;MAC7BH,KAAK,EAAElB,MAAM,CAACsB;IAAY,CAC3B,CAAC,eACF,IAAA3B,WAAA,CAAAc,GAAA,EAAChB,uBAAA,CAAAiB,sBAAsB;MACrBC,KAAK,EAAEV,CAAC,CAAC,gCAAgC,CAAE;MAC3CW,MAAM,EAAEC,kDAAyB,CAACU,cAAe;MACjDR,KAAK,EAAEC,qBAAM,CAACQ,YAAa;MAC3BN,KAAK,EAAElB,MAAM,CAACyB;IAAe,CAC9B,CAAC,eACF,IAAA9B,WAAA,CAAAc,GAAA,EAAChB,uBAAA,CAAAiB,sBAAsB;MACrBC,KAAK,EAAEV,CAAC,CAAC,0BAA0B,CAAE;MACrCW,MAAM,EAAEC,kDAAyB,CAACa,QAAS;MAC3CX,KAAK,EAAEC,qBAAM,CAACW,cAAe;MAC7BT,KAAK,EAAElB,MAAM,CAAC4B;IAAS,CACxB,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAAAC,OAAA,CAAA9B,WAAA,GAAAA,WAAA;AAED,MAAMO,MAAM,GAAGwB,uBAAU,CAACC,MAAM,CAAC;EAC/BxB,SAAS,EAAE;IACTyB,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,aAAa,EAAED,sBAAO,CAAC,GAAG;EAC5B;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeUi","_i18n","_TeacherFluencyContext","_DrawerOperatorStatCard","_fluencyTeacherConstants","_fluencyTeacherHelpers","_jsxRuntime","e","__esModule","default","DrawerStats","scores","t","useText","grade","useTeacherFluency","jsx","View","style","styles","container","children","getOperatorsForGrade","map","operator","DrawerOperatorStatCard","title","OPERATOR_CARD_CONFIG","labelKey","symbol","value","OPERATOR_TO_COLUMN","exports","StyleSheet","create","flexDirection","gap","SPACING","paddingBottom"],"sourceRoot":"../../../../../../src","sources":["features/fluency-teacher/components/drawer/DrawerStats.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AACA,IAAAK,uBAAA,GAAAL,OAAA;AAGA,IAAAM,wBAAA,GAAAN,OAAA;AACA,IAAAO,sBAAA,GAAAP,OAAA;AAAmE,IAAAQ,WAAA,GAAAR,OAAA;AAAA,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAM5D,MAAMG,WAAW,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EAC3D,MAAMC,CAAC,GAAG,IAAAC,aAAO,EAAC,CAAC;EACnB,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,wCAAiB,EAAC,CAAC;EACrC,oBACE,IAAAT,WAAA,CAAAU,GAAA,EAACjB,YAAA,CAAAkB,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,EAC3B,IAAAC,2CAAoB,EAACR,KAAK,CAAC,CAACS,GAAG,CAAEC,QAAQ,iBACxC,IAAAlB,WAAA,CAAAU,GAAA,EAACb,uBAAA,CAAAsB,sBAAsB;MAErBC,KAAK,EAAEd,CAAC,CAACe,6CAAoB,CAACH,QAAQ,CAAC,CAACI,QAAQ,CAAE;MAClDC,MAAM,EAAEF,6CAAoB,CAACH,QAAQ,CAAC,CAACK,MAAO;MAC9CL,QAAQ,EAAEA,QAAS;MACnBM,KAAK,EAAEnB,MAAM,CAACoB,2CAAkB,CAACP,QAAQ,CAAC;IAAE,GAJvCA,QAKN,CACF;EAAC,CACE,CAAC;AAEX,CAAC;AAAAQ,OAAA,CAAAtB,WAAA,GAAAA,WAAA;AAED,MAAMS,MAAM,GAAGc,uBAAU,CAACC,MAAM,CAAC;EAC/Bd,SAAS,EAAE;IACTe,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAEC,sBAAO,CAAC,GAAG,CAAC;IACjBC,aAAa,EAAED,sBAAO,CAAC,GAAG;EAC5B;AACF,CAAC,CAAC","ignoreList":[]}