@magmamath/students-features 1.3.26-rc.13 → 1.3.26-rc.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.26-rc.13",
+  "version": "1.3.26-rc.15",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -19,7 +19,7 @@
     "pull-translations": "node scripts/pullTranslations.mjs"
   },
   "peerDependencies": {
-    "@magmamath/frontend-config": ">=1.3.5",
+    "@magmamath/frontend-config": ">=1.4.0",
     "@magmamath/react-native-draw-board": "*",
     "@magmamath/react-native-ui": "*",
     "@magmamath/students-qa": "*",
@@ -45,10 +45,10 @@
     "react-i18next": ">=15"
   },
   "devDependencies": {
-    "@magmamath/frontend-config": "1.3.5",
+    "@magmamath/frontend-config": "1.4.0",
     "@magmamath/react-native-draw-board": "1.8.2",
     "@magmamath/react-native-ui": "0.4.83",
-    "@magmamath/students-qa": "0.1.0",
+    "@magmamath/students-qa": "0.1.9",
     "@matteappen/skills-utils": "^3.7.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-native/eslint-config": "^0.73.1",

package/src/features/chatbot/helpers.ts

@@ -105,6 +105,7 @@ export function prepareChatRequestPayload(
       language,
       ...(imageCdnId && { imageCdnId }),
       ...(imageAltText && { altText: imageAltText }),
+      ...(chatHistory && { chatHistory }),
       ...(!!problemStandards?.length && { problemStandards }),
       ...(!!answerOptions?.length && { answerOptions }),
       ...(assignmentGrade !== undefined && { assignmentGrade }),

package/src/features/fluency-teacher/components/matrix/DrawerMatrix.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 import type { LayoutChangeEvent } from 'react-native'
+import { COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 import { MatrixHeaderRow } from './MatrixHeaderRow'
 import { MatrixRow } from './MatrixRow'
 import type { DrawerGrid } from '../../hooks/useDrawerGrid'
@@ -23,21 +24,25 @@ export const DrawerMatrix = ({
   onLayout,
 }: DrawerMatrixProps) => (
   <View style={styles.container} onLayout={onLayout}>
-    {grid && cellSize > 0 && (
-      <View style={styles.grid}>
-        <MatrixHeaderRow colLabels={grid.colLabels} cellSize={cellSize} fontSize={fontSize} />
-        {grid.rows.map((row) => (
-          <MatrixRow
-            key={row.label}
-            label={row.label}
-            cells={row.cells}
-            cellSize={cellSize}
-            borderRadius={borderRadius}
-            colorMap={cellColorMap}
-            fontSize={fontSize}
-          />
-        ))}
-      </View>
+    {!grid ? (
+      <Text style={styles.emptyText}>No facts practiced yet</Text>
+    ) : (
+      cellSize > 0 && (
+        <View style={styles.grid}>
+          <MatrixHeaderRow colLabels={grid.colLabels} cellSize={cellSize} fontSize={fontSize} />
+          {grid.rows.map((row) => (
+            <MatrixRow
+              key={row.label}
+              label={row.label}
+              cells={row.cells}
+              cellSize={cellSize}
+              borderRadius={borderRadius}
+              colorMap={cellColorMap}
+              fontSize={fontSize}
+            />
+          ))}
+        </View>
+      )
     )}
   </View>
 )
@@ -51,4 +56,10 @@ const styles = StyleSheet.create({
   grid: {
     gap: 2,
   },
+  emptyText: {
+    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
+    fontSize: 13,
+    color: COLORS.NEUTRAL_6,
+    textAlign: 'center',
+  },
 })

package/src/features/keyboard/components/AlgebraLayout/AlgebraLayout.tsx

@@ -5,6 +5,7 @@ import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
 import { IntegralABIcon } from '../../../../shared/icons/IntegralABIcon'
 import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
 import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
+import { TEST_IDS } from '@magmamath/students-qa'
 
 const ALGEBRA_CONFIG: SwitchableLayoutConfig = {
   secondaryKeyboardType: KeyboardType.AlgebraAdvanced,
@@ -17,5 +18,11 @@ const ALGEBRA_CONFIG: SwitchableLayoutConfig = {
 }
 
 export const AlgebraLayout = (props: KeyboardLayoutProps) => {
-  return <SwitchableLayout {...props} config={ALGEBRA_CONFIG} />
+  return (
+    <SwitchableLayout
+      {...props}
+      config={ALGEBRA_CONFIG}
+      testID={TEST_IDS.KEYBOARD_ALGEBRA_LAYOUT}
+    />
+  )
 }

package/src/features/keyboard/components/GeometryLayout/GeometryLayout.tsx

@@ -5,6 +5,7 @@ import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
 import { GeometryIcon } from '../../../../shared/icons/GeometryIcon'
 import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
 import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
+import { TEST_IDS } from '@magmamath/students-qa'
 
 const GEOMETRY_CONFIG: SwitchableLayoutConfig = {
   secondaryKeyboardType: KeyboardType.Geometry,
@@ -17,5 +18,11 @@ const GEOMETRY_CONFIG: SwitchableLayoutConfig = {
 }
 
 export const GeometryLayout = (props: KeyboardLayoutProps) => {
-  return <SwitchableLayout {...props} config={GEOMETRY_CONFIG} />
+  return (
+    <SwitchableLayout
+      {...props}
+      config={GEOMETRY_CONFIG}
+      testID={TEST_IDS.KEYBOARD_GEOMETRY_LAYOUT}
+    />
+  )
 }

package/src/features/keyboard/components/SwitchableLayout/SwitchableLayout.tsx

@@ -8,6 +8,7 @@ import {
   SelectOptionSize,
   SPACING,
 } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
 import { KeyboardType } from '../../types/types'
 import { SelectedLayout, SwitchableLayoutProps } from './types'
 import { getMainKeyboardGroup } from '../../helpers'
@@ -18,6 +19,7 @@ export const SwitchableLayout = ({
   onLayoutChange,
   keys,
   config,
+  testID,
   ...props
 }: SwitchableLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
@@ -63,7 +65,7 @@ export const SwitchableLayout = ({
   const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={testID}>
       {isDesktop && (
         <SelectGroup
           numOfRows={2}
@@ -79,7 +81,15 @@ export const SwitchableLayout = ({
           ]}
         />
       )}
-      <KeysList keys={currentKeys} numOfRows={3} {...props} />
+      <View
+        testID={
+          selectedLayout === SelectedLayout.BASIC
+            ? TEST_IDS.KEYBOARD_KEYS_BASIC
+            : TEST_IDS.KEYBOARD_KEYS_SECONDARY
+        }
+      >
+        <KeysList keys={currentKeys} numOfRows={3} {...props} />
+      </View>
     </View>
   )
 }

package/src/features/keyboard/components/SwitchableLayout/helpers.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { TEST_IDS } from '@magmamath/students-qa'
 import { SelectedLayout, LayoutOption } from './types'
 
 type GetSelectOptionsProps = {
@@ -21,11 +22,13 @@ export function getSelectOptions({
       key: SelectedLayout.BASIC,
       title: BasicIcon(selectedLayout === SelectedLayout.BASIC),
       onPressIn: onBasicPressIn,
+      testID: TEST_IDS.KEYBOARD_LAYOUT_SWITCH_BASIC,
     },
     {
       key: SelectedLayout.SECONDARY,
       title: SecondaryIcon(selectedLayout === SelectedLayout.SECONDARY),
       onPressIn: onSecondaryPressIn,
+      testID: TEST_IDS.KEYBOARD_LAYOUT_SWITCH_SECONDARY,
     },
   ]
 }

package/src/features/keyboard/components/SwitchableLayout/types.ts

@@ -11,6 +11,7 @@ export type LayoutOption = {
   key: SelectedLayout
   title: ReactNode
   onPressIn: () => void
+  testID?: string
 }
 
 export type SwitchableLayoutConfig = {
@@ -21,4 +22,5 @@ export type SwitchableLayoutConfig = {
 
 export type SwitchableLayoutProps = KeyboardLayoutProps & {
   config: SwitchableLayoutConfig
+  testID?: string
 }

package/src/features/keyboard/constants/groups/currency.constants.ts

@@ -17,4 +17,7 @@ export const KEYBOARD_CURRENCY: Record<string, KeyboardGroup> = {
   ZLOTY_GROSZ: {
     keys: [MATH_CURRENCY_UNITS.ZLOTY, MATH_CURRENCY_UNITS.GROSZ],
   },
+  FRANC_RAPPEN: {
+    keys: [MATH_CURRENCY_UNITS.FRANC, MATH_CURRENCY_UNITS.RAPPEN],
+  },
 }

package/src/features/keyboard/constants/keyboard.helpers.ts

@@ -100,6 +100,7 @@ const CURRENCY_MAP: Record<KeyboardCurrencyVariant, KeyboardGroup> = {
   [KeyboardCurrencyVariant.KRONE_EURO_POUND]: KEYBOARD_CURRENCY.KRONE_EURO_POUND,
   [KeyboardCurrencyVariant.EURO_DOLLAR_POUND]: KEYBOARD_CURRENCY.EURO_DOLLAR_POUND,
   [KeyboardCurrencyVariant.ZLOTY_GROSZ]: KEYBOARD_CURRENCY.ZLOTY_GROSZ,
+  [KeyboardCurrencyVariant.FRANC_RAPPEN]: KEYBOARD_CURRENCY.FRANC_RAPPEN,
 }
 
 const TIME_MAP: Record<KeyboardTimeVariant, KeyboardGroup> = {

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -10,6 +10,8 @@ import { PesoIcon } from '../../../../shared/icons/keyboard/PesoIcon'
 import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon'
 import { ZlotyIcon } from '../../../../shared/icons/keyboard/ZlotyIcon'
 import { GroszIcon } from '../../../../shared/icons/keyboard/GroszIcon'
+import { FrancIcon } from '../../../../shared/icons/keyboard/FrancIcon'
+import { RappenIcon } from '../../../../shared/icons/keyboard/RappenIcon'
 
 export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
   KRONE: {
@@ -58,6 +60,16 @@ export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
     mathliveValue: '\\mathrm{gr}',
     katexValue: 'gr',
   },
+  FRANC: {
+    icon: <FrancIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{Fr}',
+    katexValue: 'Fr',
+  },
+  RAPPEN: {
+    icon: <RappenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\mathrm{Rp}',
+    katexValue: 'Rp',
+  },
 } as const
 
 export const MATH_LENGTH_UNITS: MathOperatorsGroup = {

package/src/shared/icons/keyboard/FrancIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Text as SvgText } from 'react-native-svg'
+
+export const FrancIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <SvgText
+        x="8"
+        y="12"
+        fill={color}
+        fontSize="10"
+        fontWeight="600"
+        textAnchor="middle"
+      >
+        Fr
+      </SvgText>
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/RappenIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Text as SvgText } from 'react-native-svg'
+
+export const RappenIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <SvgText
+        x="8"
+        y="12"
+        fill={color}
+        fontSize="8"
+        fontWeight="600"
+        textAnchor="middle"
+      >
+        Rp
+      </SvgText>
+    </Svg>
+  )
+}