@magmamath/students-features 0.9.7 → 0.9.8-rc.1

package/dist/typescript/module/features/keyboard/types/MathKeysGroups/units.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/keyboard/types/MathKeysGroups/units.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAA;AAiCzB,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC9B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE1B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmI5B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkE1B,CAAA"}
+{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/keyboard/types/MathKeysGroups/units.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgCzB,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC9B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE1B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmI5B,CAAA;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D5B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkE1B,CAAA"}

package/dist/typescript/module/lib/types/requests.d.ts

@@ -0,0 +1,4 @@
+export type WithAbortSignal<T> = T & {
+    signal?: AbortSignal;
+};
+//# sourceMappingURL=requests.d.ts.map

package/dist/typescript/module/lib/types/requests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"requests.d.ts","sourceRoot":"","sources":["../../../../../src/lib/types/requests.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.9.7",
+  "version": "0.9.8-rc.1",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -29,7 +29,7 @@
     "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.57",
+    "@magmamath/react-native-ui": "0.4.61",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",

package/src/features/chatbot/model/t2s.ts

@@ -86,11 +86,12 @@ export class ChatTextToSpeechModel {
           input: { text },
           voice: config?.voice ?? DEFAULT_VOICE,
           audioConfig: config?.audioConfig ?? AUDIO_CONFIG,
+          enableTimePointing: [],
         })
 
         // Response might be different type based on provided AUDIO_CONFIG
-        if (typeof response === 'string') {
-          audioPath = `data:audio/mpeg;base64,${response}`
+        if (typeof response.audioContent === 'string') {
+          audioPath = `data:audio/mpeg;base64,${response.audioContent}`
         } else {
           audioPath = response?.audioContent ?? ''
         }

package/src/features/chatbot/types/api.types.ts

@@ -77,9 +77,18 @@ export type GoogleText2SpeechPayload = {
     pitch: number
     speakingRate: number
   }
+  enableTimePointing?: string[]
 }
 
-export type GoogleText2SpeechResponse = string | undefined | { audioContent?: string }
+export type Timepoint = {
+  markName: string
+  timeSeconds: number
+}
+
+export type GoogleText2SpeechResponse = {
+  audioContent?: string
+  timepoints?: Timepoint[]
+}
 
 export type ChatHintPayload = {
   problemDescription: string

package/src/features/chatbot/types/model.types.ts

@@ -17,6 +17,7 @@ import {
 } from './api.types'
 import { ExtendWithOptional } from '../../../lib/helpers/types'
 import { ChatAnswer, ChatItem, ConversationMessage, FullStrokeData } from './units.types'
+import { WithAbortSignal } from '../../../lib/types/requests'
 
 export type ChatbotMessages = {
   error: ConversationMessage
@@ -28,7 +29,7 @@ export type ChatbotMessages = {
 export type ChatbotApiRequests = {
   getAlternatives: (props: GetAlternativesPayload) => Promise<GetAlternativesResponse>
   sendMessage: (props: SendMessagePayload) => Promise<SendMessageResponse>
-  postMessage: (props: PostMessagePayload) => Promise<PostMessageResponse>
+  postMessage: (props: WithAbortSignal<PostMessagePayload>) => Promise<PostMessageResponse>
   postTranslateText: (props: GoogleTranslatePayload) => Promise<GoogleTranslateResponse>
   postTextToSpeech: (props: GoogleText2SpeechPayload) => Promise<GoogleText2SpeechResponse>
   /**

package/src/features/endOfAssignment/components/AssessmentScoreCard/AssessmentScoreCard.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { EOAModalText } from '@magmamath/students-features'
+
+type AssessmentScoreCardProps = {
+  textContent: EOAModalText
+  solvedAmount?: number
+  problemsAmount?: number
+}
+
+export const AssessmentScoreCard = ({
+  textContent,
+  solvedAmount = 0,
+  problemsAmount = 0,
+}: AssessmentScoreCardProps) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>
+        {solvedAmount} / {problemsAmount} {textContent.stats?.score ?? 'pt'}
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 130,
+    minWidth: 410,
+    padding: SPACING['400'],
+    borderRadius: BORDER_RADIUS['400'],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS['1'],
+  },
+  text: {
+    fontSize: 96,
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_9,
+    fontFamily: 'Buenos Aires',
+  },
+})

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswer.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useState } from 'react'
 import { View, StyleSheet } from 'react-native'
-
 import { useUnit } from 'effector-react'
 import { SPACING, Typography, COLORS, FONT_FAMILY } from '@magmamath/react-native-ui'
 
@@ -11,6 +10,8 @@ import { GOOD_DRAWING_CARD_APPEARENCE_DELAY } from '../../constants'
 import { AnimatedCardVariant, EOAModalContentProps, EOAModalVariant } from '../../types'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
+import { getEoaButtonColor } from '../../helpers'
+import { AssessmentScoreCard } from '../AssessmentScoreCard/AssessmentScoreCard'
 
 export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -22,6 +23,7 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
     stats,
     hasRecommendations,
     isExam = false,
+    isAssessment = false,
     newerAssignmentAvailable,
   } = popUpData ?? {}
 
@@ -72,14 +74,22 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
       </View>
 
       <View style={styles.animationContainer}>
-        <AnimatedCard
-          variant={AnimatedCardVariant.CORRECT_ANSWER}
-          textContent={textContent}
-          solvedAmount={stats?.solvedAmount}
-          problemsAmount={stats?.problemsAmount}
-          shouldTriggerSparkles={cardsAnimationCompleted}
-          onAnimationEnd={onCorrectAnswerAnimationEnd}
-        />
+        {isAssessment ? (
+          <AssessmentScoreCard
+            textContent={textContent}
+            solvedAmount={stats?.solvedAmount}
+            problemsAmount={stats?.problemsAmount}
+          />
+        ) : (
+          <AnimatedCard
+            variant={AnimatedCardVariant.CORRECT_ANSWER}
+            textContent={textContent}
+            solvedAmount={stats?.solvedAmount}
+            problemsAmount={stats?.problemsAmount}
+            shouldTriggerSparkles={cardsAnimationCompleted}
+            onAnimationEnd={onCorrectAnswerAnimationEnd}
+          />
+        )}
 
         {modalVariant === EOAModalVariant.HAS_GOOD_DRAWING && (
           <AnimatedCard
@@ -96,9 +106,9 @@ export const CorrectAnswer = ({ textContent, model, onPracticePress }: EOAModalC
       <PracticeButtonGroup
         textContent={textContent}
         isPracticeButtonVisible={isPracticeButtonVisible}
-        isExam={isExam}
         onLeftButtonPress={model.hidePopUpAndLeave}
         onRightButtonPress={handlePracticeButtonPress}
+        buttonColor={getEoaButtonColor(popUpData)}
       />
     </View>
   )

package/src/features/endOfAssignment/components/EOAModal.tsx

@@ -14,7 +14,6 @@ import { ExamPaused } from './ExamPaused/ExamPaused'
 import { ExamSubmit } from './ExamSubmit/ExamSubmit'
 
 import { getModalContainerSize, shouldDisplayModalBackground } from '../helpers'
-import { ButtonColor } from '@magmamath/react-native-ui'
 
 const MODAL_CONTENT_VARIANTS_MAP = new Map([
   [EOAModalVariant.NO_CORRECT_ANSWERS, NoAnswer],
@@ -33,7 +32,6 @@ type EOAModalProps = {
   model: EOAModel
   textContent: EOAModalText
   onPracticePress: () => void
-  buttonColor?: ButtonColor
 }
 
 /**
@@ -42,7 +40,7 @@ type EOAModalProps = {
  * Dynamically renders a modal UI after an assignment ends, using the current `modalVariant`
  * to determine which specific view to display (e.g., `NoAnswer`, `CorrectAnswer`, `CheatDetected`).
  */
-export const EOAModal = ({ model, textContent, onPracticePress, buttonColor }: EOAModalProps) => {
+export const EOAModal = ({ model, textContent, onPracticePress }: EOAModalProps) => {
   const popUpData = useUnit(model.$popUpData)
   const modalVariant = useUnit(model.$modalVariant)
 
@@ -64,12 +62,7 @@ export const EOAModal = ({ model, textContent, onPracticePress, buttonColor }: E
       style={getModalContainerSize(modalVariant)}
       onClose={model.hidePopUp}
       content={
-        <ModalContent
-          model={model}
-          textContent={textContent}
-          onPracticePress={onPracticePress}
-          buttonColor={buttonColor}
-        />
+        <ModalContent model={model} textContent={textContent} onPracticePress={onPracticePress} />
       }
       withBackground={withBackground}
     />

package/src/features/endOfAssignment/components/ExamPaused/ExamPaused.tsx

@@ -13,12 +13,12 @@ import {
 import { EOAModalContentProps } from '../../types'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
+import { getEoaButtonColor } from '../../helpers'
+import { useUnit } from 'effector-react'
+
+export const ExamPaused = ({ textContent, model }: EOAModalContentProps) => {
+  const popUpData = useUnit(model.$popUpData)
 
-export const ExamPaused = ({
-  textContent,
-  model,
-  buttonColor = ButtonColor.PURPLE,
-}: EOAModalContentProps) => {
   useKeyBoard({
     callback: (event) => {
       if (event.key === KeyboardKeys.ENTER) {
@@ -39,7 +39,7 @@ export const ExamPaused = ({
 
       <Button
         variant={ButtonVariant.PRIMARY}
-        colorScheme={buttonColor}
+        colorScheme={getEoaButtonColor(popUpData)}
         size={ButtonSize.LARGE}
         style={{ text: styles.buttonText }}
         onPress={model.hidePopUpAndLeave}

package/src/features/endOfAssignment/components/ExamSubmit/ExamSubmit.tsx

@@ -4,7 +4,6 @@ import { View, StyleSheet, Platform, Image } from 'react-native'
 import { useUnit } from 'effector-react'
 import {
   Button,
-  ButtonColor,
   ButtonSize,
   ButtonVariant,
   COLORS,
@@ -18,6 +17,7 @@ import { EOAModalContentProps } from '../../types'
 import { PracticeButton } from '../../ui/PracticeButton'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
+import { getEoaButtonColor } from '../../helpers'
 
 export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
@@ -60,7 +60,7 @@ export const ExamSubmit = ({ textContent, model, onPracticePress }: EOAModalCont
         <Button
           variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
           size={ButtonSize.LARGE}
-          colorScheme={popUpData?.isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
+          colorScheme={getEoaButtonColor(popUpData)}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={model.hidePopUpAndLeave}
         >

package/src/features/endOfAssignment/components/NoAnswer/NoAnswer.tsx

@@ -16,17 +16,19 @@ import { EOAModalContentProps } from '../../types'
 import { NoAnswerContent } from './NoAnswerContent'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
+import { getEoaButtonColor } from '../../helpers'
+import { AssessmentScoreCard } from '../AssessmentScoreCard/AssessmentScoreCard'
 
 export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalContentProps) => {
   const popUpData = useUnit(model.$popUpData)
 
-  const { stats, isExam, user } = popUpData ?? {}
+  const { stats, isExam, isAssessment, user } = popUpData ?? {}
 
   function getButtons() {
     const buttons = [
       {
         text: textContent.leftButtonText ?? '',
-        colorScheme: isExam ? ButtonColor.PURPLE : ButtonColor.BLUE,
+        colorScheme: getEoaButtonColor(popUpData),
         onPress: () => model.hidePopUpAndLeave(),
       },
     ]
@@ -84,10 +86,19 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
           </Typography>
         )}
       </View>
-      <NoAnswerContent
-        solvedAmount={stats?.solvedAmount ?? 0}
-        problemsAmount={stats?.problemsAmount ?? 0}
-      />
+      {isAssessment ? (
+        <AssessmentScoreCard
+          textContent={textContent}
+          solvedAmount={stats?.solvedAmount}
+          problemsAmount={stats?.problemsAmount}
+        />
+      ) : (
+        <NoAnswerContent
+          solvedAmount={stats?.solvedAmount ?? 0}
+          problemsAmount={stats?.problemsAmount ?? 0}
+        />
+      )}
+
       <View style={styles.buttonsContainer}>
         {buttons.map((button, index) => (
           <Button

package/src/features/endOfAssignment/helpers.ts

@@ -1,16 +1,17 @@
 import { MODALS_WITH_BACKGROUND } from './constants'
-import { EOAModalVariant } from './types'
+import { EOAModalData, EOAModalVariant } from './types'
+import { ButtonColor } from '@magmamath/react-native-ui'
 
 export const getModalContainerSize = (modalVariant: EOAModalVariant) => {
   switch (modalVariant) {
     case EOAModalVariant.EXAM_SUBMIT:
     case EOAModalVariant.EXAM_SAFE_MODE_SUBMIT:
-      return { container: { width: 600, height: 384 } }
+      return { container: { width: 620, height: 384 } }
     case EOAModalVariant.EXAM_PAUSED:
     case EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED:
       return { container: { width: 560, height: 338 } }
     case EOAModalVariant.EXAM_SAFE_MODE_LEAVE:
-      return { container: { width: 550, height: 280 } }
+      return { container: { width: 550, height: 325 } }
     case EOAModalVariant.HAS_GOOD_DRAWING:
       return { container: { width: 957, height: 550 } }
     case EOAModalVariant.HAS_CORRECT_ANSWERS:
@@ -26,3 +27,9 @@ export const shouldDisplayModalBackground = (modalVariant: EOAModalVariant | nul
 
   return MODALS_WITH_BACKGROUND.includes(modalVariant)
 }
+
+export const getEoaButtonColor = (popupData: EOAModalData | null): ButtonColor => {
+  if (popupData?.isAssessment) return ButtonColor.SUNSET
+  if (popupData?.isExam) return ButtonColor.PURPLE
+  return ButtonColor.BLUE
+}

package/src/features/endOfAssignment/model/model.ts

@@ -9,6 +9,7 @@ export class EOAModel {
   public readonly leavePressed = createEvent()
   public readonly goToFirstProblemPressed = createEvent()
   public readonly recommendationsUpdated = createEvent<boolean>()
+  public readonly popUpStatsUpdated = createEvent<Partial<EOAModalData['stats']>>()
   public readonly popUpTriggered = createEvent<EOAEventType>()
 
   public readonly $popUpData = createStore<EOAModalData | null>(null)
@@ -16,6 +17,9 @@ export class EOAModel {
     .on(this.recommendationsUpdated, (state, hasRecommendations) =>
       state ? { ...state, hasRecommendations } : state,
     )
+    .on(this.popUpStatsUpdated, (state, payload) =>
+      state ? { ...state, stats: { ...state.stats, ...payload } } : state,
+    )
     .reset(this.hidePopUp)
 
   public readonly $modalVariant = createStore<EOAModalVariant | null>(null)
@@ -33,7 +37,7 @@ export class EOAModel {
       }
 
       if (eventType === EOAEventType.EXAM_PAUSED) return EOAModalVariant.EXAM_PAUSED
-      
+
       if (eventType === EOAEventType.CHEAT_DETECTED) {
         return EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED
       }

package/src/features/endOfAssignment/types.ts

@@ -34,11 +34,11 @@ export type EOAModalContentProps = {
   textContent: EOAModalText
   model: EOAModel
   onPracticePress?: () => void
-  buttonColor?: ButtonColor
 }
 
 export type EOAModalData = {
   isExam: boolean
+  isAssessment: boolean
   newerAssignmentAvailable?: boolean
   examFinished?: boolean
   cheatDetection?: boolean
@@ -63,5 +63,6 @@ export type EOAModalText = {
     correctAnswersPlural?: string
     goodCalculations?: string
     goodCalculationsPlural?: string
+    score?: string
   }
 }

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -11,13 +11,14 @@ import Animated, {
 import { ButtonVariant, SPACING, Button, ButtonSize, ButtonColor } from '@magmamath/react-native-ui'
 
 import { PracticeButton } from './PracticeButton'
+import { getEoaButtonColor } from '../helpers'
 
 type PracticeButtonGroupProps = {
   textContent: { leftButtonText?: string; rightButtonText?: string }
   isPracticeButtonVisible: boolean
   onLeftButtonPress: () => void
   onRightButtonPress: () => void
-  isExam: boolean
+  buttonColor?: ButtonColor
 }
 
 export const PracticeButtonGroup = ({
@@ -25,7 +26,7 @@ export const PracticeButtonGroup = ({
   isPracticeButtonVisible,
   onLeftButtonPress,
   onRightButtonPress,
-  isExam,
+  buttonColor = ButtonColor.BLUE,
 }: PracticeButtonGroupProps) => {
   const buttonsContainerOpacity = useSharedValue(0)
 
@@ -45,7 +46,7 @@ export const PracticeButtonGroup = ({
         <Button
           variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
           size={ButtonSize.LARGE}
-          colorScheme={isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
+          colorScheme={buttonColor}
           style={{ text: { textTransform: 'uppercase' } }}
           onPress={onLeftButtonPress}
         >

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

@@ -28,10 +28,12 @@ export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    display: 'flex',
     flexDirection: 'row',
+    justifyContent: 'space-between',
     flexWrap: 'nowrap',
     gap: 16,
+    height: '100%',
     paddingRight: 16,
   },
 })

package/src/features/keyboard/components/BasicLayout/TimeBasicLayout.tsx

@@ -31,7 +31,7 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
 
 const styles = StyleSheet.create({
   button: {
-    width: IS_MOBILE ? 51 : 45,
+    width: IS_MOBILE ? 50 : 45,
   },
   container: {
     flexBasis: IS_MOBILE ? 55 : 'auto',

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

@@ -66,6 +66,7 @@ export const Keyboard = ({ style, characterType, isVisible = true, ...props }: K
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
+    alignItems: 'flex-start',
     justifyContent: 'space-between',
     backgroundColor: COLORS.NEUTRAL_2,
     borderRadius: 12,
@@ -74,6 +75,7 @@ const styles = StyleSheet.create({
     paddingBottom: 13,
     borderColor: COLORS.NEUTRAL_5,
     borderWidth: 1,
+    width: 'auto',
     height: 155,
     ...SHADOWS[2],
   },

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

@@ -16,6 +16,7 @@ type KeysListProps = {
   disabledKeys?: KeyboardKey[]
   color?: SelectOptionColor
   style?: {
+    container?: StyleProp<ViewStyle>
     option?: ButtonStyle
   }
 } & KeyboardLayoutProps
@@ -45,7 +46,7 @@ export const KeysList = ({
   return (
     <SelectGroup
       style={{
-        container: styles.container,
+        container: [styles.container, style?.container],
         row: styles.row,
       }}
       numOfRows={numOfRows}
@@ -59,14 +60,15 @@ export const KeysList = ({
 
 export const styles = StyleSheet.create({
   container: {
-    gap: 9,
     width: 'auto',
+    gap: 9,
   },
   row: {
     gap: 3,
   },
   optionContainer: {
     flexGrow: 0,
+    flexShrink: 0,
     flexBasis: IS_MOBILE ? 45 : 'auto',
   },
   optionButton: {

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

@@ -74,6 +74,7 @@ export const MainLayout = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
   },
 })

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

@@ -16,7 +16,14 @@ export const Numpad = ({ style, ...props }: NumpadProps) => {
 
   return (
     <View style={[styles.container, style]}>
-      <KeysList keys={keyboardGroup.keys} numOfRows={3} {...props} />
+      <KeysList
+        keys={keyboardGroup.keys}
+        numOfRows={3}
+        style={{
+          container: styles.keysContainer,
+        }}
+        {...props}
+      />
     </View>
   )
 }
@@ -24,6 +31,16 @@ export const Numpad = ({ style, ...props }: NumpadProps) => {
 const styles = StyleSheet.create({
   container: {
     borderLeftWidth: 1,
+    borderColor: 'transparent',
     paddingLeft: SPACING[800],
+    marginLeft: 'auto',
+  },
+  keysContainer: {
+    display: 'flex',
+    width: 'auto',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    gap: 9,
   },
 })

package/src/features/keyboard/components/UnitsLayout/UnitTabs.tsx

@@ -24,29 +24,31 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
 
   return (
     <View style={styles.container}>
-      <TabGroup
-        activeTab={activeTab}
-        tabs={tabs}
-        onTabChange={onTabChange}
-        style={styles.tabs}
-        variant={TabVariant.SMALL}
-      />
-      <View style={styles.keyGroupContainer}>
-        {keyboardGroups.map((keyGroup, index) => (
-          <KeysList
-            key={index}
-            keys={keyGroup}
-            numOfRows={1}
-            {...props}
-            style={{
-              option: {
-                text: styles.keysText,
-                container: styles.keyContainer,
-                button: styles.keyButton,
-              },
-            }}
-          />
-        ))}
+      <View style={styles.tabsContainer}>
+        <TabGroup
+          activeTab={activeTab}
+          tabs={tabs}
+          onTabChange={onTabChange}
+          style={styles.tabs}
+          variant={TabVariant.SMALL}
+        />
+        <View style={styles.keyGroupContainer}>
+          {keyboardGroups.map((keyGroup, index) => (
+            <KeysList
+              key={index}
+              keys={keyGroup}
+              numOfRows={1}
+              {...props}
+              style={{
+                option: {
+                  text: styles.keysText,
+                  container: styles.keyContainer,
+                  button: styles.keyButton,
+                },
+              }}
+            />
+          ))}
+        </View>
       </View>
     </View>
   )
@@ -54,14 +56,17 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
 
 const styles = StyleSheet.create({
   container: {
+    width: 283,
     flex: 1,
+  },
+  tabsContainer: {
     gap: 16,
+    flex: 1,
   },
   tabs: {
     borderBottomWidth: 1,
     borderBottomColor: COLORS.NEUTRAL_3,
     paddingTop: 0,
-    gap: 24,
   },
   keyGroupContainer: {
     gap: 8,

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

@@ -46,7 +46,6 @@ export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) =
           ]}
         />
       )}
-
       {selectedLayout === SelectedLayout.UNITS ? (
         <UnitTabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} {...props} />
       ) : (