@magmamath/students-features 0.9.0-rc2 → 0.9.0-rc20

package/src/features/keyboard/components/{BasicExtendedPlusLayout → BasicPlusLayout}/keyboardGroups.tsx

@@ -1,11 +1,11 @@
-import { KeyboardGroup } from '../../types'
 import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_TEXT_SYMBOLS } from '../../types/MathKeysGroups/textSymbols'
+import { KeyboardGroup } from '../../types/types'
 import { MATH_SYMBOLS } from '../../types/MathKeysGroups/symbols'
 import { MATH_GEOMETRY_SYMBOLS } from '../../types/MathKeysGroups/geometry'
-import { MATH_TEXT_SYMBOLS } from '../../types/MathKeysGroups/textSymbols'
 
-export const MATH_ENTRY_BASIC_EXTENDED_PLUS: KeyboardGroup = {
-  id: 'math-entry-basic-extended-plus',
+export const MATH_ENTRY_BASIC_SW_PLUS: KeyboardGroup = {
+  id: 'math-entry-basic-sw-plus',
   keys: [
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
@@ -13,31 +13,21 @@ export const MATH_ENTRY_BASIC_EXTENDED_PLUS: KeyboardGroup = {
     MATH_BASIC_OPERATORS.PARENTHESES,
     MATH_BASIC_OPERATORS.SQUARE_POWER,
     MATH_BASIC_OPERATORS.SQUARE_ROOT,
-    MATH_BASIC_OPERATORS.PLUS_MINUS,
-    MATH_SYMBOLS.PI,
-    MATH_GEOMETRY_SYMBOLS.RADIAN,
-    MATH_BASIC_OPERATORS.MULTIPLICATION,
-    MATH_BASIC_OPERATORS.FRACTION,
-    MATH_BASIC_OPERATORS.SLASH,
-    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.DIVISION,
+    MATH_BASIC_OPERATORS.DOT,
     MATH_BASIC_OPERATORS.PERCENT,
     MATH_BASIC_OPERATORS.NTH_POWER,
     MATH_BASIC_OPERATORS.NTH_ROOT,
-    MATH_SYMBOLS.THETA,
-    MATH_GEOMETRY_SYMBOLS.DEGREE,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
     MATH_BASIC_OPERATORS.PERMILLE,
-    MATH_BASIC_OPERATORS.LESS_THAN,
-    MATH_BASIC_OPERATORS.LESS_THAN_OR_EQUAL,
-    MATH_BASIC_OPERATORS.GREATER_THAN_OR_EQUAL,
-    MATH_BASIC_OPERATORS.GREATER_THAN,
   ],
 }
 
-export const MATH_ENTRY_BASIC_EXTENDED_PLUS_SW: KeyboardGroup = {
-  id: 'math-entry-basic-extended-plus-sw',
+export const MATH_ENTRY_BASIC_PLUS_MOBILE_SW: KeyboardGroup = {
+  id: 'math-entry-basic-plus-mobile-sw',
   keys: [
     MATH_BASIC_OPERATORS.ADDITION,
     MATH_BASIC_OPERATORS.SUBTRACTION,
@@ -45,25 +35,67 @@ export const MATH_ENTRY_BASIC_EXTENDED_PLUS_SW: KeyboardGroup = {
     MATH_BASIC_OPERATORS.PARENTHESES,
     MATH_BASIC_OPERATORS.SQUARE_POWER,
     MATH_BASIC_OPERATORS.SQUARE_ROOT,
-    MATH_BASIC_OPERATORS.PLUS_MINUS,
-    MATH_SYMBOLS.PI,
-    MATH_GEOMETRY_SYMBOLS.RADIAN,
-    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.C_DOT,
     MATH_BASIC_OPERATORS.FRACTION,
-    MATH_BASIC_OPERATORS.SLASH,
     MATH_BASIC_OPERATORS.DOT,
-    MATH_BASIC_OPERATORS.PERCENT,
     MATH_BASIC_OPERATORS.NTH_POWER,
     MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
     MATH_SYMBOLS.THETA,
     MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_US_PLUS: KeyboardGroup = {
+  id: 'math-entry-basic-us-plus',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.DIVISION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.PERCENT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
     MATH_TEXT_SYMBOLS.X,
     MATH_TEXT_SYMBOLS.Y,
     MATH_TEXT_SYMBOLS.Z,
     MATH_BASIC_OPERATORS.PERMILLE,
-    MATH_BASIC_OPERATORS.LESS_THAN,
-    MATH_BASIC_OPERATORS.LESS_THAN_OR_EQUAL,
-    MATH_BASIC_OPERATORS.GREATER_THAN_OR_EQUAL,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_MOBILE: KeyboardGroup = {
+  id: 'math-entry-basic-plus-mobile',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
     MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
   ],
 }

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { KeysList } from '../KeysList/KeysList'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { Locale, useText } from '../../../../shared/translation'
+import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
+
+export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
+  const t = useText()
+  const { width } = useWindowDimensions()
+  const keysGroup =
+    width > 1180
+      ? KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicPlusPlus]
+      : KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicPlusPlusMobile]
+
+  return (
+    <View style={styles.container}>
+      <KeysList keys={keysGroup.keys} numOfRows={3} {...props} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 16,
+    paddingRight: 16,
+  },
+})

package/src/features/keyboard/components/BasicPlusPlusLayout/keyboardGroups.tsx

@@ -0,0 +1,121 @@
+import { KeyboardGroup } from '../../types/types'
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_SYMBOLS } from '../../types/MathKeysGroups/symbols'
+import { MATH_GEOMETRY_SYMBOLS } from '../../types/MathKeysGroups/geometry'
+import { MATH_TEXT_SYMBOLS } from '../../types/MathKeysGroups/textSymbols'
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS: KeyboardGroup = {
+  id: 'math-entry-basic-plus-plus',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.PLUS_MINUS,
+    MATH_SYMBOLS.PI,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.SLASH,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.PERCENT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.LESS_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE: KeyboardGroup = {
+  id: 'math-entry-basic-plus-plus-mobile',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS_SW: KeyboardGroup = {
+  id: 'math-entry-basic-plus-plus-sw',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.PLUS_MINUS,
+    MATH_SYMBOLS.PI,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.SLASH,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.PERCENT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.LESS_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE_SW: KeyboardGroup = {
+  id: 'math-entry-basic-plus-plus-mobile-sw',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}

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

@@ -1,48 +1,47 @@
-import React, { useEffect, useRef } from 'react'
-import {
-  Animated,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-  Easing,
-  useWindowDimensions,
-} from 'react-native'
-import { COLORS, SelectOptionColor } from '@magmamath/react-native-ui'
+import React, { useEffect, useMemo, useRef } from 'react'
+import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
+import { COLORS, SelectOptionColor, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { getLayoutByCharType, KEYBOARD_LAYOUTS } from '../constants/keyboardLayouts'
+import { KeyboardKey, KeyboardKeyValue, KeyboardType } from '../types/types'
 import { Numpad } from './Numpad/Numpad'
-import { getLayoutByCharType } from '../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../types'
+import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
 
 type KeyboardProps = {
-  onKeyPress: ({ katexValue, mathliveValue }: KeyboardKeyValue) => void
+  onKeyPress: ({ katexValue, mathliveValue, isSpecialSymbol }: KeyboardKeyValue) => void
   characterType?: number
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
-  onBackspacePress?: () => void
-  onSpecialKeyPress?: (value: KeyboardKey) => void
   visible?: boolean
   isSpecialButtonsDisabled?: boolean
   isDisabled?: boolean
+  disabledKeys?: KeyboardKey[]
 }
 
 export const Keyboard = ({ style, characterType, visible = true, ...props }: KeyboardProps) => {
   const slideAnim = useRef(new Animated.Value(600)).current
   const { width } = useWindowDimensions()
+  const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
+  const isBasicMobileLayout =
+    characterType &&
+    width <= MOBILE_LAYOUT_WIDTH &&
+    KEYBOARD_LAYOUTS[KeyboardType.Basic].characterTypes.includes(characterType)
+  const isAlgebraMobileLayout =
+    characterType &&
+    width <= MOBILE_LAYOUT_WIDTH &&
+    (KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].characterTypes.includes(characterType) ||
+      KEYBOARD_LAYOUTS[KeyboardType.BasicPlus].characterTypes.includes(characterType))
 
   useEffect(() => {
-    Animated.timing(slideAnim, {
+    Animated.spring(slideAnim, {
       toValue: visible ? 0 : 600,
-      duration: 600,
-      easing: Easing.out(Easing.ease),
+      stiffness: visible ? 320 : 720,
+      damping: visible ? 40 : 60,
+      mass: 1,
+      velocity: 0,
       useNativeDriver: true,
     }).start()
   }, [visible])
 
-  if (width < 820) {
-    return null
-  }
-
-  const Layout = getLayoutByCharType(characterType)
-
   return (
     <Animated.View
       style={[
@@ -54,7 +53,13 @@ export const Keyboard = ({ style, characterType, visible = true, ...props }: Key
       ]}
     >
       <Layout {...props} />
-      {width >= 1075 && <Numpad {...props} />}
+      <Numpad
+        {...props}
+        style={{
+          borderColor: isBasicMobileLayout ? 'transparent' : COLORS.NEUTRAL_3,
+          paddingLeft: SPACING[isAlgebraMobileLayout ? 200 : 800],
+        }}
+      />
     </Animated.View>
   )
 }
@@ -73,5 +78,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     width: 'auto',
     overflow: 'hidden',
+    height: 155,
+    ...SHADOWS[2],
   },
 })

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import {
   ButtonStyle,
@@ -6,13 +6,13 @@ import {
   SelectOptionColor,
   SelectOptionSize,
 } from '@magmamath/react-native-ui'
-import { KeyboardKey, KeyboardLayoutProps } from '../../types'
-import { MathSpecialOperator } from '../../types/MathKeysGroups/specialOperators'
-import { DISABLED_KEYS } from '../../constants/keysValues'
+import { KeyboardKey, KeyboardLayoutProps } from '../../types/types'
+import { mapKeyToOption } from './helpers'
 
 type KeysListProps = {
   keys: KeyboardKey[]
   numOfRows?: number
+  disabledKeys?: KeyboardKey[]
   color?: SelectOptionColor
   style?: {
     container?: StyleProp<ViewStyle>
@@ -25,57 +25,57 @@ export const KeysList = ({
   numOfRows,
   style,
   onKeyPress,
-  onSpecialKeyPress,
-  onBackspacePress,
   isSpecialButtonsDisabled,
   isDisabled,
+  disabledKeys,
 }: KeysListProps) => {
+  const options = useMemo(
+    () =>
+      keys.map((key) =>
+        mapKeyToOption({
+          key,
+          onKeyPress,
+          isSpecialButtonsDisabled,
+          disabledKeys,
+          optionStyle: style?.option,
+        }),
+      ),
+    [keys, onKeyPress, isSpecialButtonsDisabled, disabledKeys, style?.option],
+  )
+
   return (
     <SelectGroup
       style={{
         container: [styles.container, style?.container],
-        row: { gap: 4 },
-        option: {
-          container: {
-            flexGrow: 0,
-            flexShrink: 0,
-            flexBasis: 'auto',
-          },
-          ...style?.option,
-        },
+        row: styles.row,
       }}
       numOfRows={numOfRows}
       color={SelectOptionColor.GREY}
       disabled={isDisabled}
-      options={keys.map((key) => ({
-        key: key.katexValue,
-        title: key.icon ? key.icon : key.label,
-        disabled: isSpecialButtonsDisabled && DISABLED_KEYS.includes(key),
-      }))}
+      options={options}
       size={SelectOptionSize.SMALL}
-      onOptionChange={(option) => {
-        const key = keys.find((k) => k.katexValue === option.key)
-        if (!key) return
-        if (key.katexValue === MathSpecialOperator.BACKSPACE.toLowerCase()) {
-          onBackspacePress?.()
-          return
-        }
-        if (key.isSpecialSymbol) {
-          onSpecialKeyPress?.({
-            katexValue: key.katexValue,
-            mathliveValue: key.mathliveValue,
-          })
-          return
-        }
-        onKeyPress?.({ katexValue: key.katexValue, mathliveValue: key.mathliveValue })
-      }}
     />
   )
 }
 
-const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
   container: {
     width: 'auto',
     gap: 9,
   },
+  row: {
+    gap: 3,
+  },
+  optionContainer: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+  },
+  optionButton: {
+    width: 40,
+  },
+  optionText: {
+    fontSize: 16,
+    fontWeight: 700,
+  },
 })

package/src/features/keyboard/components/KeysList/helpers.ts

@@ -0,0 +1,55 @@
+import { GestureResponderEvent } from 'react-native'
+import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
+import { ButtonStyle } from '@magmamath/react-native-ui'
+import { styles } from './KeysList'
+import { getIsIpadOrIphoneDevice } from '../../helpers'
+import { DISABLED_KEYS } from '../../constants/spreadsheetDisabledKeys'
+
+type MapKeyToOptionProps = {
+  key: KeyboardKey
+  onKeyPress?: (key: KeyboardKeyValue) => void
+  isSpecialButtonsDisabled?: boolean
+  disabledKeys?: KeyboardKey[]
+  optionStyle?: ButtonStyle
+}
+
+export const IS_IOS_WEB = getIsIpadOrIphoneDevice()
+
+const mergeOptionStyles = (keyStyle?: ButtonStyle, override?: ButtonStyle) => ({
+  container: [styles.optionContainer, keyStyle?.container, override?.container],
+  button: [styles.optionButton, keyStyle?.button, override?.button],
+  text: [styles.optionText, keyStyle?.text, override?.text],
+})
+
+const isKeyDisabled = (
+  key: KeyboardKey,
+  isSpecialButtonsDisabled?: boolean,
+  disabledKeys?: KeyboardKey[],
+) => (isSpecialButtonsDisabled && DISABLED_KEYS.includes(key)) || disabledKeys?.includes(key)
+
+export const mapKeyToOption = ({
+  key,
+  onKeyPress,
+  isSpecialButtonsDisabled,
+  disabledKeys,
+  optionStyle,
+}: MapKeyToOptionProps) => {
+  const pressHandler = (e: GestureResponderEvent) => {
+    onKeyPress?.({
+      event: e,
+      katexValue: key.katexValue,
+      mathliveValue: key.mathliveValue,
+      spreadsheetValue: key.spreadsheetValue,
+      isSpecialSymbol: key.isSpecialSymbol,
+    })
+  }
+
+  return {
+    key: key.katexValue,
+    title: key.icon ?? key.label,
+    delayPressIn: 0,
+    style: mergeOptionStyles(key.style, optionStyle),
+    ...(IS_IOS_WEB ? { onPress: pressHandler } : { onPressIn: pressHandler }),
+    disabled: isKeyDisabled(key, isSpecialButtonsDisabled, disabledKeys),
+  }
+}

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

@@ -1,23 +1,26 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
-import { COLORS, SPACING } from '@magmamath/react-native-ui'
-import { KeyboardLayoutProps, KeyboardType } from '../../types'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
 
-export const Numpad = (props: KeyboardLayoutProps) => {
+type NumpadProps = {
+  style?: StyleProp<ViewStyle>
+} & KeyboardLayoutProps
+
+export const Numpad = ({ style, ...props }: NumpadProps) => {
   const t = useText()
   const keyboardGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Numpad)
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, style]}>
       <KeysList
         keys={keyboardGroup.keys}
         numOfRows={3}
         style={{
           container: styles.keysContainer,
-          option: { text: styles.keyText, button: styles.keyButton },
         }}
         {...props}
       />
@@ -28,8 +31,9 @@ export const Numpad = (props: KeyboardLayoutProps) => {
 const styles = StyleSheet.create({
   container: {
     borderLeftWidth: 1,
-    borderColor: COLORS.NEUTRAL_3,
+    borderColor: 'transparent',
     paddingLeft: SPACING[800],
+    marginLeft: 'auto',
   },
   keysContainer: {
     display: 'flex',
@@ -39,11 +43,4 @@ const styles = StyleSheet.create({
     flexBasis: 'auto',
     gap: 9,
   },
-  keyText: {
-    fontSize: 16,
-    fontWeight: 700,
-  },
-  keyButton: {
-    width: 42,
-  },
 })

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

@@ -1,6 +1,6 @@
 import { MATH_SPECIAL_OPERATORS } from '../../types/MathKeysGroups/specialOperators'
 import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
-import { KeyboardGroup } from '../../types'
+import { KeyboardGroup } from '../../types/types'
 
 export const MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-numbers-sw',

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

@@ -2,13 +2,9 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
 import { COLORS, TabGroup, TabOptionProps, TabVariant } from '@magmamath/react-native-ui'
-import {
-  KEYBOARD_UNITS_GROUPS_BY_LOCALE,
-  KeyboardUnitsGroupType,
-  MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
-} from './keyboardGroups'
-import { KeyboardLayoutProps } from '../../types'
-import { Locale, useText } from '../../../../shared/translation'
+import { KeyboardUnitsGroupType } from './keyboardGroups'
+import { KeyboardLayoutProps } from '../../types/types'
+import { useTabKeys } from './hooks/useTabKeys'
 
 type UnitTabsProps = {
   tabs: TabOptionProps[]
@@ -17,10 +13,8 @@ type UnitTabsProps = {
 } & KeyboardLayoutProps
 
 export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsProps) => {
-  const t = useText()
-  const keyboardGroup =
-    KEYBOARD_UNITS_GROUPS_BY_LOCALE[t('locale') as Locale][activeTab.key as KeyboardUnitsGroupType]
-      .keys || MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys
+  const keyboardGroups = useTabKeys(activeTab.key as KeyboardUnitsGroupType)
+
   return (
     <View style={{ width: 283 }}>
       <View style={styles.tabsContainer}>
@@ -32,15 +26,16 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
           variant={TabVariant.SMALL}
         />
         <View style={styles.keyGroupContainer}>
-          {keyboardGroup.map((keyGroup) => (
+          {keyboardGroups.map((keyGroup) => (
             <KeysList
               keys={keyGroup}
               numOfRows={1}
+              {...props}
               style={{
-                container: styles.keysContainer,
-                option: { button: styles.option, text: styles.text },
+                option: {
+                  text: styles.keysText,
+                },
               }}
-              {...props}
             />
           ))}
         </View>
@@ -50,26 +45,6 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
 }
 
 const styles = StyleSheet.create({
-  keysContainer: {
-    gap: 10,
-  },
-  option: {
-    minWidth: 42,
-  },
-  text: {
-    fontWeight: 700,
-    fontSize: 14,
-  },
-  optionContainer: {
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    width: 'auto',
-    paddingRight: 16,
-    borderRightWidth: 1,
-    borderRightColor: COLORS.NEUTRAL_3,
-  },
-
   tabsContainer: {
     gap: 16,
     flex: 1,
@@ -82,4 +57,8 @@ const styles = StyleSheet.create({
   keyGroupContainer: {
     gap: 8,
   },
+  keysText: {
+    fontSize: 14,
+    fontWeight: 700,
+  },
 })