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

package/example/metro.config.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const { getDefaultConfig } = require('@expo/metro-config');
+const { getConfig } = require('react-native-builder-bob/metro-config');
+const pkg = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+module.exports = getConfig(getDefaultConfig(__dirname), {
+  root,
+  pkg,
+  project: __dirname,
+});

package/example/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@magmamath/students-features-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~4.0.0",
+    "expo": "~52.0.11",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "react-native-builder-bob": "^0.33.3"
+  },
+  "private": true
+}

package/example/src/App.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Text } from 'react-native'
+
+const App = () => {
+  return <Text>Hello</Text>
+}
+
+export default App

package/example/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    // Avoid expo-cli auto-generating a tsconfig
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.3-rc.3",
+  "version": "1.3.3",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -15,8 +15,7 @@
   "scripts": {
     "clean": "del-cli dist",
     "prepare": "bob build",
-    "release": "release-it",
-    "pull-translations": "node scripts/pullTranslations.mjs"
+    "release": "release-it"
   },
   "peerDependencies": {
     "@magmamath/frontend-config": "1.1.0",
@@ -33,9 +32,7 @@
     "expo-audio": "^1.1.1",
     "expo": ">=52.0.47",
     "@react-native-masked-view/masked-view": "*",
-    "react-native-linear-gradient": "*",
-    "i18next": ">=22",
-    "react-i18next": ">=11"
+    "react-native-linear-gradient": "*"
   },
   "devDependencies": {
     "@magmamath/react-native-ui": "0.4.83",
@@ -66,9 +63,7 @@
     "typescript": "^5.2.2",
     "axios": "^1.13.5",
     "@react-native-masked-view/masked-view": "^0.3.2",
-    "react-native-linear-gradient": "^2.8.3",
-    "i18next": "^22.5.1",
-    "react-i18next": "^11.3.4"
+    "react-native-linear-gradient": "^2.8.3"
   },
   "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 { getText as t } from '../../../../../shared/translation/i18n'
+import { t } from '../../../../../shared/translation'
 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/i18n'
+import { useText } from '../../../shared/translation'
 
 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 { getText as t } from '../../shared/translation/i18n'
+import { t } from '../../shared/translation'
 import { ThreadItem } from './model/ThreadItem'
 import { ChatRequestPayload, ChatRequestType } from './types/model.types'
 
@@ -65,6 +65,7 @@ export function prepareChatRequestPayload(
     imageAltText,
     answerOptions,
     answer,
+    chatHistory,
   } = payload
 
   if (freeTextMessage) {
@@ -86,6 +87,7 @@ export function prepareChatRequestPayload(
             language,
             ...(imageCdnId && { imageCdnId }),
             ...(imageAltText && { altText: imageAltText }),
+            ...(chatHistory && { chatHistory }),
             ...(!!problemStandards?.length && { problemStandards }),
             ...(!!answerOptions?.length && { answerOptions }),
           },

package/src/features/chatbot/index.ts

@@ -7,7 +7,15 @@ export {
   type IChatDrawBoardAdapter,
 } from './types/model.types'
 export type { RequestOptionalConfig } from '../../lib/effector/createControllerEffect'
-export type { PostMessageResponse } from './types/api.types'
+export type {
+  PostMessageResponse,
+  ChatHintPayload,
+  ChatHintResponse,
+  GetAlternativesPayload,
+  GetAlternativesResponse,
+  SendMessagePayload,
+  SendMessageResponse,
+} from './types/api.types'
 export { DefaultMessagesCreator } from './model/DefaultMessageCreator'
 export type { ChatAnswer } from './types/units.types'
 export type { ConversationMessage } from './types/units.types'

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

@@ -234,15 +234,6 @@ export class ChatbotModel {
             messages: [messagesHelper.createOwn({ message, translatedMessage })],
           })
 
-          const chatHistory =
-            context.assignmentId && context.problemId
-              ? {
-                  exerciseId: context.assignmentId,
-                  problemId: context.problemId,
-                  chatVersion: alternatives?.version,
-                }
-              : undefined
-
           // Request is overridden by ThreadManager.postMessage (delegates to sendMessage/getHint)
           const response = await this.api.postMessageFx({
             answer: context.answer,
@@ -254,8 +245,14 @@ export class ChatbotModel {
             imageAltText: context.imageDescription,
             imageCdnId: context.imageCdnId,
             conversationId: cache[key].conversationId,
-            chatHistory,
             ...(isFreeText && { freeTextMessage: message }),
+            ...(context.assignmentId && {
+              chatHistory: {
+                exerciseId: context.assignmentId,
+                problemId: context.problemId,
+                chatVersion: alternatives?.version,
+              },
+            }),
           })
 
           const thread = this.threadManager.get(key)

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

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

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() {
-    i18next.on('languageChanged', () => {
+  public bindToLanguageChanged(event: Event<unknown>) {
+    event.watch(() => {
       this.list.forEach((key, chatMessage) => {
         if ('message' in chatMessage) {
           chatMessage.message = this.getter(key)

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

@@ -30,14 +30,15 @@ export type GetAlternativesResponse = {
 }
 
 export type SendMessagePayload = {
+  message: string
   problemDescription?: string
   problemStandards?: ProblemStandard[]
   correctAnswer?: string | string[]
   answerOptions?: string[]
   altText?: string
   language?: string
-  message: string
   conversationId?: string
+  chatHistory?: ChatHistory
 }
 
 export type SendMessageResponse = {
@@ -45,6 +46,12 @@ export type SendMessageResponse = {
   conversationId?: string | null
 }
 
+export type ChatHistory = {
+  exerciseId: string
+  problemId?: string
+  chatVersion?: string
+}
+
 export type PostMessagePayload = {
   language: string
   problemAnswer: string[]
@@ -56,11 +63,7 @@ export type PostMessagePayload = {
   imageCdnId?: string
   freeTextMessage?: string
   conversationId?: string | null
-  chatHistory?: {
-    exerciseId: string
-    problemId: string
-    chatVersion?: string
-  }
+  chatHistory?: ChatHistory
 }
 
 export type PostMessageResponse = {
@@ -134,6 +137,7 @@ export type ChatHintResponse = {
   errorCellIds?: string[]
   errorChars?: ErrorChar[]
 }
+
 export type ErrorSpottingPayload = {
   strokes: FullStrokeData[]
   problemDescription: string
@@ -141,6 +145,7 @@ export type ErrorSpottingPayload = {
   userAnswer: string | string[]
   hint: string
 }
+
 export type ErrorSpottingResponse = {
   highlightedStrokeIds: string[]
 }

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

@@ -1,11 +1,12 @@
 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 '../../../shared/translation/i18n'
 
 type ExampleSolutionModalContentProps = {
   params: ExampleSolutionModalParams
@@ -17,7 +18,7 @@ export const ExampleSolutionModalContent = ({
   params: { model, payload, cacheKey },
 }: ExampleSolutionModalContentProps) => {
   const { result, status } = useExampleSolution({ model, payload, cacheKey })
-  const t = useText()
+  const localization = useUnit($localization)
 
   return (
     <View
@@ -27,7 +28,7 @@ export const ExampleSolutionModalContent = ({
       ]}
     >
       <Typography align="center" variant={HeadingVariants.H2} style={{ color: COLORS.NEUTRAL_9 }}>
-        {t('exampleSolution.exampleSolution')}
+        {localization.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 { createEffect, sample } from 'effector'
-import { getText } from '../../../shared/translation/i18n'
+import { $localization } from '../../../shared/translation'
+import { createEffect, sample, attach, StoreValue } from 'effector'
 
 type ExampleSolutionApiProps = {
   api: ExampleSolutionApiRequests
@@ -12,9 +12,13 @@ export class ExampleSolutionsApi {
   public readonly generateExampleSolutionFx
   public readonly errorHandlerFx?: ExampleSolutionErrorHandler
 
-  public readonly errorHandlingFx = createEffect(() => {
-    if (!this.errorHandlerFx) return
-    this.errorHandlerFx(getText('exampleSolution.errorMessage'))
+  public readonly errorHandlingFx = attach({
+    source: $localization,
+    effect: createEffect((localization: StoreValue<typeof $localization>) => {
+      if (!this.errorHandlerFx) return
+      const errorMessage = localization.exampleSolution.errorMessage
+      this.errorHandlerFx(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/i18n'
+import { useText } from '../../../shared/translation'
 
 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/i18n'
+import { getText } from '../../../shared/translation/helpers'
 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/i18n'
+import { useText } from '../../../shared/translation'
 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/i18n'
+import { TranslationKeys } from 'src/shared/translation/types'
 import {
   CustomGetCachePathMethod,
   GifsGroups,

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

@@ -1,77 +1,21 @@
-import React, { useMemo, useState } from 'react'
-import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, useWindowDimensions, View } from 'react-native'
-import { COLORS, IS_MOBILE, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
+import React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { SelectedLayout } from './types'
-import { getMainKeyboardGroup } from '../../helpers'
-import { getSelectOptions } from './helpers'
-import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { IntegralABIcon } from '../../../../shared/icons/IntegralABIcon'
+import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
+import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
 
-export const AlgebraLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
-  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
-  const { width } = useWindowDimensions()
-  const selectOptions = getSelectOptions({ selectedLayout, setSelectedLayout, onLayoutChange })
-  const isDesktop =
-    width > KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint && !IS_MOBILE
-
-  const keyboardGroups = useMemo(() => {
-    const algebra = getMainKeyboardGroup(keys, KeyboardType.AlgebraAdvanced)
-    const basic = getMainKeyboardGroup(
-      keys,
-      isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
-    )
-
-    return new Map([
-      [SelectedLayout.BASIC, basic],
-      [SelectedLayout.ALGEBRA, algebra],
-    ])
-  }, [isDesktop, keys])
-
-  const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
-
-  return (
-    <View style={styles.container}>
-      {isDesktop && (
-        <SelectGroup
-          numOfRows={2}
-          options={selectOptions}
-          size={SelectOptionSize.SMALL}
-          style={{
-            container: styles.optionContainer,
-            option: { container: styles.option },
-          }}
-          color={props.color}
-          selectedOptions={[
-            selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
-          ]}
-        />
-      )}
-      <KeysList keys={currentKeys} numOfRows={3} {...props} />
-    </View>
-  )
+const ALGEBRA_CONFIG: SwitchableLayoutConfig = {
+  secondaryKeyboardType: KeyboardType.AlgebraAdvanced,
+  BasicIcon: (isSelected) => (
+    <AlgebraIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={22} />
+  ),
+  SecondaryIcon: (isSelected) => (
+    <IntegralABIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={25} />
+  ),
 }
 
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 16,
-    paddingRight: 16,
-  },
-  optionContainer: {
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: IS_MOBILE ? 60 : 'auto',
-    width: 'auto',
-    paddingRight: 18,
-    borderRightWidth: 1,
-    borderRightColor: COLORS.NEUTRAL_3,
-    maxWidth: 65,
-    gap: 9,
-  },
-  option: {
-    flexBasis: 45,
-    width: 44,
-  },
-})
+export const AlgebraLayout = (props: KeyboardLayoutProps) => {
+  return <SwitchableLayout {...props} config={ALGEBRA_CONFIG} />
+}

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { GeometryIcon } from '../../../../shared/icons/GeometryIcon'
+import { SwitchableLayout } from '../SwitchableLayout/SwitchableLayout'
+import { SwitchableLayoutConfig } from '../SwitchableLayout/types'
+
+const GEOMETRY_CONFIG: SwitchableLayoutConfig = {
+  secondaryKeyboardType: KeyboardType.Geometry,
+  BasicIcon: (isSelected) => (
+    <AlgebraIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={22} />
+  ),
+  SecondaryIcon: (isSelected) => (
+    <GeometryIcon color={isSelected ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9} size={16} />
+  ),
+}
+
+export const GeometryLayout = (props: KeyboardLayoutProps) => {
+  return <SwitchableLayout {...props} config={GEOMETRY_CONFIG} />
+}

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/i18n'
+import { useText } from '../../../../shared/translation'
 import { getMainKeyboardGroup } from '../../helpers'
 
 type NumpadProps = {

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

@@ -0,0 +1,100 @@
+import React, { useMemo, useState } from 'react'
+import { KeysList } from '../KeysList/KeysList'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import {
+  COLORS,
+  IS_MOBILE,
+  SelectGroup,
+  SelectOptionSize,
+  SPACING,
+} from '@magmamath/react-native-ui'
+import { KeyboardType } from '../../types/types'
+import { SelectedLayout, SwitchableLayoutProps } from './types'
+import { getMainKeyboardGroup } from '../../helpers'
+import { getSelectOptions } from './helpers'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+
+export const SwitchableLayout = ({
+  onLayoutChange,
+  keys,
+  config,
+  ...props
+}: SwitchableLayoutProps) => {
+  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
+  const { width } = useWindowDimensions()
+  const selectOptions = getSelectOptions({
+    selectedLayout,
+    onBasicPressIn: () => {
+      setSelectedLayout(SelectedLayout.BASIC)
+      onLayoutChange?.(false)
+    },
+    onSecondaryPressIn: () => {
+      setSelectedLayout(SelectedLayout.SECONDARY)
+      onLayoutChange?.(true)
+    },
+    BasicIcon: config.BasicIcon,
+    SecondaryIcon: config.SecondaryIcon,
+  })
+  const isDesktop =
+    width > KEYBOARD_LAYOUTS[config.secondaryKeyboardType].mobileBreakpoint && !IS_MOBILE
+
+  const keyboardGroups = useMemo(() => {
+    const secondary = getMainKeyboardGroup(keys, config.secondaryKeyboardType)
+    const basic = getMainKeyboardGroup(
+      keys,
+      isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
+    )
+
+    return new Map([
+      [SelectedLayout.BASIC, basic],
+      [SelectedLayout.SECONDARY, secondary],
+    ])
+  }, [isDesktop, keys, config.secondaryKeyboardType])
+
+  const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
+
+  return (
+    <View style={styles.container}>
+      {isDesktop && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
+          style={{
+            container: styles.optionContainer,
+            option: { container: styles.option },
+          }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
+          ]}
+        />
+      )}
+      <KeysList keys={currentKeys} numOfRows={3} {...props} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: SPACING[400],
+    paddingRight: SPACING[400],
+  },
+  optionContainer: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: IS_MOBILE ? 60 : 'auto',
+    width: 'auto',
+    paddingRight: 18,
+    borderRightWidth: 1,
+    borderRightColor: COLORS.NEUTRAL_3,
+    maxWidth: 65,
+    gap: 9,
+  },
+  option: {
+    flexBasis: 45,
+    width: 44,
+  },
+})

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react'
+import { SelectedLayout, LayoutOption } from './types'
+
+type GetSelectOptionsProps = {
+  selectedLayout: SelectedLayout
+  onBasicPressIn: () => void
+  onSecondaryPressIn: () => void
+  BasicIcon: (isSelected: boolean) => ReactNode
+  SecondaryIcon: (isSelected: boolean) => ReactNode
+}
+
+export function getSelectOptions({
+  selectedLayout,
+  onBasicPressIn,
+  onSecondaryPressIn,
+  BasicIcon,
+  SecondaryIcon,
+}: GetSelectOptionsProps): LayoutOption[] {
+  return [
+    {
+      key: SelectedLayout.BASIC,
+      title: BasicIcon(selectedLayout === SelectedLayout.BASIC),
+      onPressIn: onBasicPressIn,
+    },
+    {
+      key: SelectedLayout.SECONDARY,
+      title: SecondaryIcon(selectedLayout === SelectedLayout.SECONDARY),
+      onPressIn: onSecondaryPressIn,
+    },
+  ]
+}