@magmamath/students-features 1.3.15 → 1.3.16-rc.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.15",
+  "version": "1.3.16-rc.22",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -15,10 +15,11 @@
   "scripts": {
     "clean": "del-cli dist",
     "prepare": "bob build",
-    "release": "release-it"
+    "release": "release-it",
+    "pull-translations": "node scripts/pullTranslations.mjs"
   },
   "peerDependencies": {
-    "@magmamath/frontend-config": "1.1.3",
+    "@magmamath/frontend-config": ">=1.2.0",
     "@magmamath/react-native-draw-board": "*",
     "@magmamath/react-native-ui": "*",
     "@matteappen/skills-utils": "^3.7.1",
@@ -37,10 +38,12 @@
     "react-native-linear-gradient": "*",
     "react-native-modalfy": "*",
     "react-native-reanimated": ">=0.3.16",
-    "react-native-svg": "^15.10.0"
+    "react-native-svg": "^15.10.0",
+    "i18next": ">=23",
+    "react-i18next": ">=15"
   },
   "devDependencies": {
-    "@magmamath/frontend-config": "1.1.3",
+    "@magmamath/frontend-config": "1.3.2",
     "@magmamath/react-native-draw-board": "1.8.2",
     "@magmamath/react-native-ui": "0.4.83",
     "@matteappen/skills-utils": "^3.7.1",
@@ -73,7 +76,9 @@
     "react-native-reanimated": "^3.17.2",
     "react-native-svg": "^15.10.0",
     "release-it": "^17.10.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "i18next": "^25.2.1",
+    "react-i18next": "^15.5.2"
   },
   "resolutions": {
     "@types/react": "^18.2.44"

package/src/features/chatbot/components/ChatInput/FreeText/FreeTextInputBlock.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 import { ColorScheme } from '../../../types/style.types'
 import { HintButtonVariant, RequestHintButton } from '../RequestHintButton'
 import { useChatModel } from '../../../context/ChatBotModelContext'
-import { t } from '../../../../../shared/translation'
+import { getText as t } from '../../../../../i18n/i18n'
 import { ChatTextInput } from './ChatTextInput'
 
 type FreeTextInputBlockProps = {

package/src/features/chatbot/errorSpotting/ErrorSpottingButton.tsx

@@ -5,7 +5,7 @@ import { useStoreMap, useUnit } from 'effector-react'
 import { StyleSheet } from 'react-native'
 import { HighlighterIcon } from '../../../shared/icons/HighlighterIcon'
 import { ConversationMessage } from '../types/units.types'
-import { useText } from '../../../shared/translation'
+import { useText } from '../../../i18n/i18n'
 
 type ErrorSpottingButtonProps = {
   contextMessage: ConversationMessage

package/src/features/chatbot/helpers.ts

@@ -2,7 +2,7 @@ import { IS_WEB } from '@magmamath/react-native-ui'
 // https://stackoverflow.com/questions/56575859/google-translate-api-does-not-return-apostrophe-as-apostrophe-in-python
 import { KATEX_REPLACEMENTS, KATEX_REPLACEMENTS_REVERSE } from './constants'
 import { GetAlternativesResponse, PostMessagePayload } from './types/api.types'
-import { t } from '../../shared/translation'
+import { getText as t } from '../../i18n/i18n'
 import { ThreadItem } from './model/ThreadItem'
 import { ChatRequestPayload, ChatRequestType } from './types/model.types'
 

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

@@ -1,13 +1,11 @@
 import { DefaultMessagesCreator } from './DefaultMessageCreator'
-import { TranslationKeys } from '../../../shared/translation/types'
-import { getText } from '../../../shared/translation/helpers'
 import { ChatbotMessages } from '../types/model.types'
-import { $localization } from '../../../shared/translation'
+import { getText, TranslationKey } from '../../../i18n/i18n'
 
 export class ChatBotTextManager {
-  private readonly messagesCreator = new DefaultMessagesCreator<TranslationKeys>({
+  private readonly messagesCreator = new DefaultMessagesCreator<TranslationKey>({
     textGetter: getText,
-  }).bindToLanguageChanged($localization.updates)
+  }).bindToLanguageChanged()
 
   public readonly messages: ChatbotMessages = {
     error: this.messagesCreator.createMessage('chat.errorMessage', {
@@ -20,9 +18,7 @@ export class ChatBotTextManager {
   }
   private readonly defaultMessages = { ...this.messages }
 
-  public update(
-    cb: (manager: DefaultMessagesCreator<TranslationKeys>) => Partial<ChatbotMessages>,
-  ) {
+  public update(cb: (manager: DefaultMessagesCreator<TranslationKey>) => Partial<ChatbotMessages>) {
     Object.assign(this.messages, cb(this.messagesCreator))
   }
 

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

@@ -1,5 +1,5 @@
+import i18next from 'i18next'
 import { PostMessageResponse } from '../types/api.types'
-import { Event } from 'effector'
 import { ChatAnswer } from '../types/units.types'
 
 type ChatMessage = Omit<PostMessageResponse, 'threadId'> & {
@@ -45,8 +45,8 @@ export class DefaultMessagesCreator<K extends string> {
     return option
   }
 
-  public bindToLanguageChanged(event: Event<unknown>) {
-    event.watch(() => {
+  public bindToLanguageChanged() {
+    i18next.on('languageChanged', () => {
       this.list.forEach((key, chatMessage) => {
         if ('message' in chatMessage) {
           chatMessage.message = this.getter(key)

package/src/features/exampleSolution/components/ExampleSolutionModalContent.tsx

@@ -1,12 +1,11 @@
 import { StyleSheet, View } from 'react-native'
 import React from 'react'
 import { COLORS, HeadingVariants, IS_WEB, SPACING, Typography } from '@magmamath/react-native-ui'
-import { useUnit } from 'effector-react'
-import { $localization } from '../../../shared/translation'
 import { ExampleSolutionModalParams } from '../types'
 import { QuestionSection } from './QuestionSection'
 import { SolutionSection } from './SolutionSection'
 import { useExampleSolution } from '../hooks/useExampleSolution'
+import { useText } from '../../../i18n/i18n'
 
 type ExampleSolutionModalContentProps = {
   params: ExampleSolutionModalParams
@@ -18,7 +17,7 @@ export const ExampleSolutionModalContent = ({
   params: { model, payload, cacheKey },
 }: ExampleSolutionModalContentProps) => {
   const { result, status } = useExampleSolution({ model, payload, cacheKey })
-  const localization = useUnit($localization)
+  const t = useText()
 
   return (
     <View
@@ -28,7 +27,7 @@ export const ExampleSolutionModalContent = ({
       ]}
     >
       <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
-        {localization.exampleSolution.exampleSolution}
+        {t('exampleSolution.exampleSolution')}
       </Typography>
       <View style={styles.content}>
         <QuestionSection

package/src/features/exampleSolution/model/ExampleSolutionApi.ts

@@ -1,7 +1,7 @@
 import { createControllerEffect } from './../../../lib/effector/createControllerEffect'
 import { ExampleSolutionApiRequests, ExampleSolutionErrorHandler } from '../types'
-import { $localization } from '../../../shared/translation'
-import { createEffect, sample, attach, StoreValue } from 'effector'
+import { createEffect, sample } from 'effector'
+import { getText } from '../../../i18n/i18n'
 
 type ExampleSolutionApiProps = {
   api: ExampleSolutionApiRequests
@@ -12,13 +12,9 @@ export class ExampleSolutionsApi {
   public readonly generateExampleSolutionFx
   public readonly errorHandlerFx?: ExampleSolutionErrorHandler
 
-  public readonly errorHandlingFx = attach({
-    source: $localization,
-    effect: createEffect((localization: StoreValue<typeof $localization>) => {
-      if (!this.errorHandlerFx) return
-      const errorMessage = localization.exampleSolution.errorMessage
-      this.errorHandlerFx(errorMessage)
-    }),
+  public readonly errorHandlingFx = createEffect(() => {
+    if (!this.errorHandlerFx) return
+    this.errorHandlerFx(getText('exampleSolution.errorMessage'))
   })
 
   constructor({ api, errorHandler }: ExampleSolutionApiProps) {

package/src/features/feedback/components/EmptyComment.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { COLORS } from '@magmamath/react-native-ui'
 import { BUENOS_AIRES_FONT } from '../constants'
-import { useText } from '../../../shared/translation'
+import { useText } from '../../../i18n/i18n'
 
 export const EmptyComment = () => {
   const t = useText()

package/src/features/feedback/model/comments.ts

@@ -2,7 +2,7 @@ import { createEvent, restore, sample, Store } from 'effector'
 import { AddCommentProps, CommentsMap, Credits, DeleteCommentProps, TeacherComment } from '../types'
 import { TeacherFeedbackAPI } from './api'
 import { updateCommentsState } from '../helpers'
-import { getText } from '../../../shared/translation/helpers'
+import { getText } from '../../../i18n/i18n'
 import { EMPTY_COMMENT } from '@magmamath/students-features'
 
 type TeacherCommentsModelProps = {

package/src/features/gifCelebrations/components/Gif.tsx

@@ -3,7 +3,7 @@ import React, { useLayoutEffect, useState } from 'react'
 import { BORDER_RADIUS, COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
 import { CustomGetCachePathMethod, GifObject, TextComponentType } from '../types/model.types'
 import { MAX_GIF_SIZE, MIN_GIF_SIZE } from '../constants'
-import { useText } from '../../../shared/translation'
+import { useText } from '../../../i18n/i18n'
 import { constrainDimension, getGifLabel, getImagePath } from '../helpers'
 import gifFallback from '../assets/gifFallback.gif'
 import { Size } from '../../../types/common.types'

package/src/features/gifCelebrations/helpers.ts

@@ -1,4 +1,4 @@
-import { TranslationKeys } from 'src/shared/translation/types'
+import { TranslationKey } from 'src/i18n/i18n'
 import {
   CustomGetCachePathMethod,
   GifsGroups,
@@ -86,7 +86,7 @@ export const generateGifsStructure = (gifs: GifsGroups): GifsStructure =>
     ]),
   )
 
-export const getGifLabel = (relatedGroup: GroupNumber): TranslationKeys => {
+export const getGifLabel = (relatedGroup: GroupNumber): TranslationKey => {
   if (relatedGroup === 2) {
     return 'gifCelebrations.onTheWay'
   }

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

@@ -3,7 +3,7 @@ import { KeysList } from '../KeysList/KeysList'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { SPACING } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
 import { getMainKeyboardGroup } from '../../helpers'
 
 type NumpadProps = {

package/src/features/keyboard/components/UnitsLayout/hooks/useUnitTabs.ts

@@ -1,4 +1,4 @@
-import { useText } from '../../../../../shared/translation'
+import { useText } from '../../../../../i18n/i18n'
 import { useMemo, useState } from 'react'
 import { KeyboardUnitsGroupType, UnitTab } from '../types'
 import { useWindowDimensions } from 'react-native'

package/src/features/pmProgress/components/header/NextUp.tsx

@@ -3,12 +3,12 @@ import { StyleSheet, View } from 'react-native'
 import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
 import { SketchArrowRight } from '../../../../shared/icons/SketchArrowRight'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
-import { useText } from '../../../../shared/translation'
 import { useUnit } from 'effector-react'
 import { usePmProgress } from '../../context/PmProgressContext'
 import { OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
 import { StartButton } from './StartButton'
 import { useNextUpDomain } from '../../hooks/useNextUpDomain'
+import { useText } from '../../../../i18n/i18n'
 
 export const NextUp = () => {
   const t = useText()

package/src/features/pmProgress/components/header/PmProgressHeader.tsx

@@ -14,13 +14,13 @@ import {
   Typography,
 } from '@magmamath/react-native-ui'
 import { isWeb } from '../../../../shared/common.constants'
-import { useText } from '../../../../shared/translation'
-import { useUnit, useStoreMap } from 'effector-react'
+import { useStoreMap, useUnit } from 'effector-react'
 import { usePmProgress } from '../../context/PmProgressContext'
 import { formatGradeLabel } from '../../shared/pmProgress.helpers'
 import { MenuIcon } from '../../../../shared/icons/MenuIcon'
 import { NextUp } from './NextUp'
 import { BURGER_MENU_BREAKPOINT, MENU_MAX_HEIGHT } from '@magmamath/students-features'
+import { useText } from '../../../../i18n/i18n'
 
 const menuItemProps: MenuItemProps = {
   style: {

package/src/features/pmProgress/components/header/StartButton.tsx

@@ -11,7 +11,7 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
 
 const PULSATION_COLOR = '#FFBE4E66'
 const PULSE_OVERFLOW_X = 16

package/src/features/pmProgress/components/insights/PmTimeframeStats.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import {
+  BORDER_RADIUS,
   COLORS,
   FONT_FAMILY,
   SelectGroup,
@@ -12,12 +13,11 @@ import {
 import { StatsCard } from './StatsCard'
 import { StarIcon } from '../../../../shared/icons/StarIcon'
 import { TimerIcon } from '../../../../shared/icons/TimerIcon'
-import { BORDER_RADIUS } from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
 import { useUnit } from 'effector-react'
 import { formatTime } from '../../shared/pmProgress.helpers'
 import { InsightsTimeframe, STATS_MAX_HEIGHT } from '../../shared/pmProgress.constants'
 import { usePmProgress } from '../../context/PmProgressContext'
+import { useText } from '../../../../i18n/i18n'
 
 const optionStyle: SelectOptionProps['style'] = {
   text: {

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

@@ -3,11 +3,11 @@ import { StyleSheet, View } from 'react-native'
 import { ListCard } from './ListCard'
 import { COLORS, SPACING } from '@magmamath/react-native-ui'
 import { SliceDiamondIcon } from '../../../../shared/icons/SliceDiamondIcon'
-import { useText } from '../../../../shared/translation'
 import { useUnit } from 'effector-react'
 import { SolvingFlow } from '../../shared/pmProgress.constants'
 import { Domain } from '../../shared/pmProgress.types'
 import { usePmProgress } from '../../context/PmProgressContext'
+import { useText } from '../../../../i18n/i18n'
 
 type FluencyProps = {
   data: Domain | undefined

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Pressable, View, StyleSheet, Platform, ViewStyle } from 'react-native'
+import { Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native'
 import {
   BORDER_RADIUS,
   CaretDownIcon,
@@ -10,7 +10,8 @@ import {
   Typography,
 } from '@magmamath/react-native-ui'
 import { ListItem } from './ListItem'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
+
 const HEADER_HEIGHT = 60
 const PROGRESS_BAR_WIDTH = 50
 const PROGRESS_BAR_HEIGHT = 10

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { ActivityIndicator, View, Pressable, StyleSheet, Text } from 'react-native'
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native'
 import {
   ArrowRightIcon,
   BORDER_RADIUS,
@@ -11,7 +11,7 @@ import {
   SPACING,
   Typography,
 } from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
 
 const CARD_HEIGHT = 52
 const ICON_SIZE = 25

package/src/features/pmProgress/components/locked/PmStatusOverlay.tsx

@@ -1,22 +1,14 @@
 import React, { ReactNode } from 'react'
 import { StyleSheet, View } from 'react-native'
-import {
-  COLORS,
-  ErrorIcon,
-  HeadingVariants,
-  LockIcon,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
-import { TranslationKeys } from '../../../../shared/translation/types'
+import { COLORS, ErrorIcon, HeadingVariants, LockIcon, SPACING, Typography, } from '@magmamath/react-native-ui'
 import { PmProgressStatus } from '../../shared/pmProgress.constants'
+import { TranslationKey, useText } from '../../../../i18n/i18n'
 
 type EmptyStateVariant = {
   icon: ReactNode
   circleColor: string
-  titleKey: TranslationKeys
-  subtitleKey: TranslationKeys
+  titleKey: TranslationKey
+  subtitleKey: TranslationKey
 }
 
 const PM_EMPTY_STATE_VARIANTS: Record<PmProgressStatus, EmptyStateVariant> = {

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

@@ -11,10 +11,10 @@ import {
   SHADOWS,
   SPACING,
 } from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
-import { useUnit, useStoreMap } from 'effector-react'
+import { useStoreMap, useUnit } from 'effector-react'
 import { CustomDomain, OpeningLoaderId, SolvingFlow } from '../../shared/pmProgress.constants'
 import { usePmProgress } from '../../context/PmProgressContext'
+import { useText } from '../../../../i18n/i18n'
 
 export const PmTeacherRecs = () => {
   const t = useText()

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

@@ -1,5 +1,6 @@
 import { COLORS } from '@magmamath/react-native-ui'
 import type { ProgressMatrixStatsDto } from '@matteappen/skills-utils/enhanceProgressData/types'
+import type { GradeLabelsMap } from './pmProgress.types'
 import {
   Domain,
   DomainStandard,
@@ -13,8 +14,7 @@ import {
 import { CustomDomain, DOMAIN_BORDER_COLORS, DOMAIN_COLORS } from './pmProgress.constants'
 import { dynamicCornerRadius, dynamicInnerRadius } from '../components/chart/chart.helpers'
 import type { PieChartManagerConfig } from '../components/chart/chart.types'
-import { getText } from '../../../shared/translation/helpers'
-import type { GradeLabelsMap } from './pmProgress.types'
+import { getText } from '../../../i18n/i18n'
 
 const groupStandardsByDomain = (
   standardStats: ProgressMatrixStatsDto[number]['standardStats'],

package/src/features/voice/playing/components/VoiceTranscriptionsDropdown.tsx

@@ -24,7 +24,7 @@ import { useVoiceTranscriptionsDropdown } from '../hooks/useVoiceTranscriptionsD
 import { VoicePlayerModel, PlayerState } from '../model'
 import { VoiceTranscriptionsDropdownItem } from './VoiceTranscriptionsDropdownItem'
 import { DROPDOWN_MAX_CONTENT_HEIGHT, NO_AUDIO_BE_MESSAGE } from '../../constants'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
 import { PlayButton } from '../../../../shared/components/PlayButton'
 import { getActiveAttempt, getAudioStatus } from '../../helpers'
 

package/src/features/voice/playing/components/VoiceTranscriptionsDropdownItem.tsx

@@ -12,7 +12,7 @@ import {
 } from '@magmamath/react-native-ui'
 import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
 import { useVoiceTranscriptionsDropdownItemAnimation } from '../hooks/useVoiceTranscriptionsDropdownItemAnimation'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
 
 type VoiceTranscriptionsDropdownItemProps = {
   attempt: number

package/src/features/voice/recording/components/VoiceRecordButton.tsx

@@ -16,8 +16,8 @@ import { Pressable, StyleSheet } from 'react-native'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
 import { VOICE_RECORD_SHADOWS, VoiceRecorderState } from '../../constants'
-import { useText } from '../../../../shared/translation'
 import { RecordButtonVariant } from '../../types'
+import { useText } from '../../../../i18n/i18n'
 
 type VoiceRecordButtonProps = {
   model: VoiceRecordModel

package/src/features/voice/recording/modal/ModalFooterButtons.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import { Button, ButtonColor, ButtonSize, ButtonVariant, SPACING } from '@magmamath/react-native-ui'
 import { StyleSheet, View } from 'react-native'
-import { useText } from '../../../../shared/translation'
-import { TranslationKeys } from '../../../../shared/translation/types'
+import { TranslationKey, useText } from '../../../../i18n/i18n'
 
 type ModalFooterButtonsProps = {
   onCancel: () => void
   onConfirm: () => void
-  confirmLabel: TranslationKeys
+  confirmLabel: TranslationKey
   confirmColor?: ButtonColor
 }
 

package/src/features/voice/recording/modal/VoiceRecordDeleteModal.tsx

@@ -3,7 +3,7 @@ import { BaseModal, ButtonColor } from '@magmamath/react-native-ui'
 import { StyleSheet } from 'react-native'
 import { useUnit } from 'effector-react'
 import { VoiceRecorderState } from '../../constants'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
 import { ModalFooterButtons } from './ModalFooterButtons'
 import { VoiceRecordModalParams } from '../../types'
 

package/src/features/voice/recording/modal/VoiceRecordUndoModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { BaseModal } from '@magmamath/react-native-ui'
 import { StyleSheet } from 'react-native'
-import { useText } from '../../../../shared/translation'
+import { useText } from '../../../../i18n/i18n'
 import { ModalFooterButtons } from './ModalFooterButtons'
 import { VoiceRecordModalParams } from '../../types'
 

package/src/features/voice/recording/model/VoiceRecord.model.ts

@@ -10,7 +10,7 @@ import {
 } from '../../types'
 import { ensureRecordingPermissions, getAvailableInputs } from '../../helpers'
 import { VOICE_RECORDER_MIN_DURATION_MS } from '../../constants'
-import { t } from '../../../../shared/translation'
+import { getText as t } from '../../../../i18n/i18n'
 
 type VoiceRecordModelParams = {
   api: VoiceRecorderApi