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

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

@@ -1,51 +1,15 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
-import {
-  COLORS,
-  FONT_FAMILY,
-  RulerIcon,
-  SelectGroup,
-  SelectOptionSize,
-  TabOptionProps,
-} from '@magmamath/react-native-ui'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { COLORS, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
 import { Locale, useText } from '../../../../shared/translation'
-import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
-import { RectangleIcon } from '../../../../shared/icons/RectangleIcon'
-import { VolumeIcon } from '../../../../shared/icons/VolumeIcon'
-import { WeightIcon } from '../../../../shared/icons/WeightIcon'
 import { UnitTabs } from './UnitTabs'
-import { KeyboardLayoutProps, KeyboardType } from '../../types'
-import {
-  KeyboardUnitsGroupType,
-  MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS,
-  MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
-  MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
-  MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
-} from './keyboardGroups'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { KeyboardUnitsGroupType } from './keyboardGroups'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
-
-const UNITS_KEYBOARD_GROUPS = new Map([
-  [
-    KeyboardUnitsGroupType.LENGTH,
-    {
-      keys: MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys,
-      icon: RulerIcon,
-    },
-  ],
-  [
-    KeyboardUnitsGroupType.AREA,
-    { keys: MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS.keys, icon: RectangleIcon },
-  ],
-  [
-    KeyboardUnitsGroupType.VOLUME,
-    { keys: MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS.keys, icon: VolumeIcon },
-  ],
-  [
-    KeyboardUnitsGroupType.WEIGHT,
-    { keys: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS.keys, icon: WeightIcon },
-  ],
-])
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { useLayoutSelectOptions } from './hooks/useLayoutSelectOptions'
+import { useUnitTabs } from './hooks/useUnitTabs'
 
 enum SelectedLayout {
   ALGEBRA = 'algebra',
@@ -53,82 +17,38 @@ enum SelectedLayout {
 }
 
 export const UnitsLayout = (props: KeyboardLayoutProps) => {
-  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.ALGEBRA)
-  const t = useText()
-  const basicExtendedKeys =
-    KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtended]
-  const tabs: TabOptionProps[] = useMemo(
-    () => [
-      {
-        title: t('keyboard.length'),
-        style: { paddingHorizontal: 10 },
-        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
-        key: KeyboardUnitsGroupType.LENGTH,
-      },
-      {
-        title: t('keyboard.area'),
-        style: { paddingHorizontal: 10 },
-        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
-        key: KeyboardUnitsGroupType.AREA,
-      },
-      {
-        title: t('keyboard.volume'),
-        style: { paddingHorizontal: 10 },
-        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
-        key: KeyboardUnitsGroupType.VOLUME,
-      },
-      {
-        title: t('keyboard.weight'),
-        style: { paddingHorizontal: 10 },
-        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
-        key: KeyboardUnitsGroupType.WEIGHT,
-      },
-    ],
-    [],
+  const { width } = useWindowDimensions()
+  const isDesktop = width > MOBILE_LAYOUT_WIDTH
+  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(
+    isDesktop ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS,
   )
+  const t = useText()
+  const basicPlusKeys = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicPlus]
+  const tabs = useUnitTabs()
   const [activeTab, setActiveTab] = useState(tabs[0])
-  const selectOptions = useMemo(() => {
-    const SelectedIcon =
-      UNITS_KEYBOARD_GROUPS.get(activeTab.key as KeyboardUnitsGroupType)?.icon || RulerIcon
-    return [
-      {
-        title: (
-          <AlgebraIcon
-            color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={16}
-          />
-        ),
-        key: '1',
-      },
-      {
-        title: (
-          <SelectedIcon
-            color={selectedLayout === SelectedLayout.UNITS ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={16}
-          />
-        ),
-        key: '2',
-      },
-    ]
-  }, [activeTab, selectedLayout])
+  const selectOptions = useLayoutSelectOptions({
+    activeTabKey: activeTab.key as KeyboardUnitsGroupType,
+    selectedLayout,
+    setSelectedLayout,
+  })
 
   return (
     <View style={styles.container}>
-      <SelectGroup
-        numOfRows={2}
-        options={selectOptions}
-        size={SelectOptionSize.SMALL}
-        style={{
-          container: styles.optionContainer,
-        }}
-        color={props.color}
-        selectedOptions={[
-          selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
-        ]}
-        onOptionChange={(option) => {
-          setSelectedLayout(option.key === '1' ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS)
-        }}
-      />
+      {isDesktop && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
+          style={{
+            container: styles.optionContainer,
+            option: { container: styles.option },
+          }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
+          ]}
+        />
+      )}
       {selectedLayout === SelectedLayout.UNITS ? (
         <UnitTabs
           tabs={tabs}
@@ -139,12 +59,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           {...props}
         />
       ) : (
-        <KeysList
-          keys={basicExtendedKeys.keys}
-          numOfRows={3}
-          {...props}
-          style={{ container: styles.basicExtendedContainer, option: { button: styles.key } }}
-        />
+        <KeysList keys={basicPlusKeys.keys} numOfRows={3} {...props} />
       )}
     </View>
   )
@@ -156,24 +71,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 16,
     paddingRight: 16,
-    width: 480,
-  },
-  basicExtendedContainer: {
-    gap: 8,
   },
   option: {
-    minWidth: 42,
+    flexBasis: 45,
+    width: 44,
   },
   optionContainer: {
     flexGrow: 0,
     flexShrink: 0,
     flexBasis: 'auto',
     width: 'auto',
-    paddingRight: 16,
+    paddingRight: 18,
     borderRightWidth: 1,
     borderRightColor: COLORS.NEUTRAL_3,
-  },
-  key: {
-    width: 42,
+    maxWidth: 65,
+    gap: 9,
   },
 })

package/src/features/keyboard/components/UnitsLayout/constants.ts

@@ -0,0 +1,33 @@
+import {
+  KeyboardUnitsGroupType,
+  MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS,
+  MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
+  MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
+  MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
+} from './keyboardGroups'
+import { RulerIcon } from '@magmamath/react-native-ui'
+import { RectangleIcon } from '../../../../shared/icons/RectangleIcon'
+import { VolumeIcon } from '../../../../shared/icons/VolumeIcon'
+import { WeightIcon } from '../../../../shared/icons/WeightIcon'
+
+export const UNITS_KEYBOARD_GROUPS = new Map([
+  [
+    KeyboardUnitsGroupType.LENGTH,
+    {
+      keys: MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys,
+      icon: RulerIcon,
+    },
+  ],
+  [
+    KeyboardUnitsGroupType.AREA,
+    { keys: MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS.keys, icon: RectangleIcon },
+  ],
+  [
+    KeyboardUnitsGroupType.VOLUME,
+    { keys: MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS.keys, icon: VolumeIcon },
+  ],
+  [
+    KeyboardUnitsGroupType.WEIGHT,
+    { keys: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS.keys, icon: WeightIcon },
+  ],
+])

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

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+import { COLORS, RulerIcon } from '@magmamath/react-native-ui'
+import { AlgebraIcon } from '../../../../../shared/icons/AlgebraIcon'
+import { UNITS_KEYBOARD_GROUPS } from '../constants'
+import { KeyboardUnitsGroupType } from '../keyboardGroups'
+import React from 'react'
+
+export enum SelectedLayout {
+  ALGEBRA = 'algebra',
+  UNITS = 'units',
+}
+
+interface UseLayoutSelectOptionsProps {
+  activeTabKey: KeyboardUnitsGroupType
+  selectedLayout: SelectedLayout
+  setSelectedLayout: (layout: SelectedLayout) => void
+}
+
+export const useLayoutSelectOptions = ({
+  activeTabKey,
+  selectedLayout,
+  setSelectedLayout,
+}: UseLayoutSelectOptionsProps) => {
+  return useMemo(() => {
+    const SelectedIcon = UNITS_KEYBOARD_GROUPS.get(activeTabKey)?.icon || RulerIcon
+
+    return [
+      {
+        key: SelectedLayout.ALGEBRA,
+        title: (
+          <AlgebraIcon
+            color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+            size={22}
+          />
+        ),
+        onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
+      },
+      {
+        key: SelectedLayout.UNITS,
+        title: (
+          <SelectedIcon
+            color={selectedLayout === SelectedLayout.UNITS ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+            size={16}
+          />
+        ),
+        onPressIn: () => setSelectedLayout(SelectedLayout.UNITS),
+      },
+    ]
+  }, [activeTabKey, selectedLayout, setSelectedLayout])
+}

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

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import {
+  KEYBOARD_UNITS_GROUPS_BY_LOCALE,
+  MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
+  KeyboardUnitsGroupType,
+} from '../keyboardGroups'
+import { useText } from '../../../../../shared/translation'
+import { Locale } from '../../../../../shared/translation'
+
+export const useTabKeys = (activeKey: KeyboardUnitsGroupType) => {
+  const t = useText()
+  return useMemo(() => {
+    const locale = t('locale') as Locale
+    const groups = KEYBOARD_UNITS_GROUPS_BY_LOCALE[locale]?.[activeKey]?.keys
+    return groups || MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys
+  }, [activeKey, t])
+}

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

@@ -0,0 +1,37 @@
+import { useText } from '../../../../../shared/translation'
+import { useMemo } from 'react'
+import { FONT_FAMILY, TabOptionProps } from '@magmamath/react-native-ui'
+import { KeyboardUnitsGroupType } from '../keyboardGroups'
+
+export const useUnitTabs = (): TabOptionProps[] => {
+  const t = useText()
+  return useMemo(
+    () => [
+      {
+        title: t('keyboard.length'),
+        style: { paddingLeft: 0, paddingRight: 32, marginRight: -16 },
+        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
+        key: KeyboardUnitsGroupType.LENGTH,
+      },
+      {
+        title: t('keyboard.area'),
+        style: { paddingHorizontal: 10 },
+        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
+        key: KeyboardUnitsGroupType.AREA,
+      },
+      {
+        title: t('keyboard.volume'),
+        style: { paddingHorizontal: 10 },
+        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
+        key: KeyboardUnitsGroupType.VOLUME,
+      },
+      {
+        title: t('keyboard.weight'),
+        style: { paddingHorizontal: 10, paddingRight: 0 },
+        titleStyle: { active: { fontStyle: FONT_FAMILY.buenosAiresBold } },
+        key: KeyboardUnitsGroupType.WEIGHT,
+      },
+    ],
+    [],
+  )
+}

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

@@ -1,4 +1,4 @@
-import { KeyboardGroup, KeyboardKey } from '../../types'
+import { KeyboardGroup, KeyboardKey } from '../../types/types'
 import {
   MATH_AREA_UNITS,
   MATH_LENGTH_UNITS,

package/src/features/keyboard/{constants.ts → constants/constants.ts}

@@ -4,3 +4,5 @@ export const DEFAULT_KEY_ICON_PROPS = {
   size: 16,
   color: COLORS.NEUTRAL_9,
 } as const
+
+export const MOBILE_LAYOUT_WIDTH = 1280

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

@@ -1,23 +1,23 @@
-import { KeyboardType } from '../types'
+import { KeyboardType } from '../types/types'
 import { AlgebraLayout } from '../components/AlgebraLayout/AlgebraLayout'
 import { BasicLayout } from '../components/BasicLayout/BasicLayout'
-import { BasicExtendedLayout } from '../components/BasicExtendedLayout/BasicExtendedLayout'
+import { BasicPlusLayout } from '../components/BasicPlusLayout/BasicPlusLayout'
 import { TimeBasicLayout } from '../components/BasicLayout/TimeBasicLayout'
 import { CurrencyBasicLayout } from '../components/BasicLayout/CurrencyBasicLayout'
 import { UnitsLayout } from '../components/UnitsLayout/UnitsLayout'
-import { BasicExtendedPlusLayout } from '../components/BasicExtendedPlusLayout/BasicExtendedPlusLayout'
+import { BasicPlusPlusLayout } from '../components/BasicPlusPlusLayout/BasicPlusPlusLayout'
 
 export const KEYBOARD_LAYOUTS = {
   [KeyboardType.AlgebraAdvanced]: {
     Component: AlgebraLayout,
-    characterTypes: [6, 19, 21, 22],
+    characterTypes: [6, 19, 20, 21, 22],
   },
   [KeyboardType.Basic]: {
     Component: BasicLayout,
     characterTypes: [10],
   },
-  [KeyboardType.BasicExtended]: {
-    Component: BasicExtendedLayout,
+  [KeyboardType.BasicPlus]: {
+    Component: BasicPlusLayout,
     characterTypes: [1, 2, 3, 4, 11, 12, 13],
   },
   [KeyboardType.BasicTime]: {
@@ -30,10 +30,10 @@ export const KEYBOARD_LAYOUTS = {
   },
   [KeyboardType.BasicUnits]: {
     Component: UnitsLayout,
-    characterTypes: [5, 14, 20],
+    characterTypes: [5, 14],
   },
-  [KeyboardType.BasicExtendedPlus]: {
-    Component: BasicExtendedPlusLayout,
+  [KeyboardType.BasicPlusPlus]: {
+    Component: BasicPlusPlusLayout,
     characterTypes: [17, 18],
   },
 }

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

@@ -1,35 +1,40 @@
-import { KeyboardGroup, KeyboardKey, KeyboardType } from '../types'
+import { KeyboardGroup, KeyboardType } from '../types/types'
 import {
   MATH_CURRENCY_SW_KEYBOARD_GROUP,
+  MATH_CURRENCY_UK_KEYBOARD_GROUP,
   MATH_CURRENCY_US_KEYBOARD_GROUP,
   MATH_ENTRY_BASIC_KEYBOARD_GROUP,
+  MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP,
   MATH_TIME_SW_KEYBOARD_GROUP,
   MATH_TIME_US_KEYBOARD_GROUP,
 } from '../components/BasicLayout/keyboardGroup'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from '../components/AlgebraLayout/keyboardGroups'
 import {
-  MATH_ENTRY_BASIC_SW_EXTENDED,
-  MATH_ENTRY_BASIC_US_EXTENDED,
-} from '../components/BasicExtendedLayout/keyboardGroups'
+  MATH_ENTRY_BASIC_PLUS_MOBILE,
+  MATH_ENTRY_BASIC_PLUS_MOBILE_SW,
+  MATH_ENTRY_BASIC_SW_PLUS,
+  MATH_ENTRY_BASIC_US_PLUS,
+} from '../components/BasicPlusLayout/keyboardGroups'
 import {
-  MATH_ENTRY_BASIC_EXTENDED_PLUS,
-  MATH_ENTRY_BASIC_EXTENDED_PLUS_SW,
-} from '../components/BasicExtendedPlusLayout/keyboardGroups'
+  MATH_ENTRY_BASIC_PLUS_PLUS,
+  MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE,
+  MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE_SW,
+  MATH_ENTRY_BASIC_PLUS_PLUS_SW,
+} from '../components/BasicPlusPlusLayout/keyboardGroups'
 import {
   MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP,
   MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
 } from '../components/Numpad/keyboardGroups'
 import { MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS } from '../components/UnitsLayout/keyboardGroups'
-import { MATH_BASIC_OPERATORS } from '../types/MathKeysGroups/basicOperators'
-import { MATH_AREA_UNITS, MATH_VOLUME_UNITS } from '../types/MathKeysGroups/units'
-import { MATH_INTEGRALS_AND_DERIVATIVES } from '../types/MathKeysGroups/calculusOperators'
 import { Locale } from '../../../shared/translation'
 
 export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, KeyboardGroup>> = {
   [Locale.CA]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
-    [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
-    [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicPlus]: MATH_ENTRY_BASIC_US_PLUS,
+    [KeyboardType.BasicPlusMobile]: MATH_ENTRY_BASIC_PLUS_MOBILE,
+    [KeyboardType.BasicPlusPlus]: MATH_ENTRY_BASIC_PLUS_PLUS,
+    [KeyboardType.BasicPlusPlusMobile]: MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
@@ -41,34 +46,40 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
   },
   [Locale.SCT]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
-    [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
-    [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicPlus]: MATH_ENTRY_BASIC_US_PLUS,
+    [KeyboardType.BasicPlusMobile]: MATH_ENTRY_BASIC_PLUS_MOBILE,
+    [KeyboardType.BasicPlusPlus]: MATH_ENTRY_BASIC_PLUS_PLUS,
+    [KeyboardType.BasicPlusPlusMobile]: MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
     },
-    [KeyboardType.BasicCurrency]: MATH_CURRENCY_SW_KEYBOARD_GROUP,
+    [KeyboardType.BasicCurrency]: MATH_CURRENCY_UK_KEYBOARD_GROUP,
     [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
     [KeyboardType.AlgebraAdvanced]: MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP,
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
   },
   [Locale.GB]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
-    [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
-    [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicPlus]: MATH_ENTRY_BASIC_US_PLUS,
+    [KeyboardType.BasicPlusMobile]: MATH_ENTRY_BASIC_PLUS_MOBILE,
+    [KeyboardType.BasicPlusPlus]: MATH_ENTRY_BASIC_PLUS_PLUS,
+    [KeyboardType.BasicPlusPlusMobile]: MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
     },
-    [KeyboardType.BasicCurrency]: MATH_CURRENCY_SW_KEYBOARD_GROUP,
+    [KeyboardType.BasicCurrency]: MATH_CURRENCY_UK_KEYBOARD_GROUP,
     [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
     [KeyboardType.AlgebraAdvanced]: MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP,
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
   },
   [Locale.EN]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
-    [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
-    [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicPlus]: MATH_ENTRY_BASIC_US_PLUS,
+    [KeyboardType.BasicPlusMobile]: MATH_ENTRY_BASIC_PLUS_MOBILE,
+    [KeyboardType.BasicPlusPlus]: MATH_ENTRY_BASIC_PLUS_PLUS,
+    [KeyboardType.BasicPlusPlusMobile]: MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
@@ -79,9 +90,11 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
   },
   [Locale.SW]: {
-    [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
-    [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_SW_EXTENDED,
-    [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS_SW,
+    [KeyboardType.Basic]: MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP,
+    [KeyboardType.BasicPlus]: MATH_ENTRY_BASIC_SW_PLUS,
+    [KeyboardType.BasicPlusMobile]: MATH_ENTRY_BASIC_PLUS_MOBILE_SW,
+    [KeyboardType.BasicPlusPlus]: MATH_ENTRY_BASIC_PLUS_PLUS_SW,
+    [KeyboardType.BasicPlusPlusMobile]: MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE_SW,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
@@ -92,31 +105,3 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP,
   },
 }
-
-export const DISABLED_KEYS: KeyboardKey[] = [
-  MATH_BASIC_OPERATORS.PARENTHESES,
-  MATH_BASIC_OPERATORS.INTERVAL,
-  MATH_BASIC_OPERATORS.ABSOLUTE_VALUE,
-  MATH_BASIC_OPERATORS.ORDERED_PAIR,
-  MATH_BASIC_OPERATORS.NTH_ROOT,
-  MATH_BASIC_OPERATORS.FRACTION,
-  MATH_INTEGRALS_AND_DERIVATIVES.DEFINITEINTEGRAL,
-  MATH_AREA_UNITS.SQUARE_YARD,
-  MATH_AREA_UNITS.SQUARE_MILE,
-  MATH_AREA_UNITS.SQUARE_FOOT,
-  MATH_AREA_UNITS.SQUARE_INCH,
-  MATH_AREA_UNITS.SQUARE_KILOMETER,
-  MATH_AREA_UNITS.SQUARE_METER,
-  MATH_AREA_UNITS.SQUARE_CENTIMETER,
-  MATH_AREA_UNITS.SQUARE_MILLIMETER,
-  MATH_AREA_UNITS.SQUARE_DECIMETER,
-  MATH_VOLUME_UNITS.CUBIC_YARD,
-  MATH_VOLUME_UNITS.CUBIC_MILE,
-  MATH_VOLUME_UNITS.CUBIC_FOOT,
-  MATH_VOLUME_UNITS.CUBIC_INCH,
-  MATH_VOLUME_UNITS.CUBIC_KILOMETER,
-  MATH_VOLUME_UNITS.CUBIC_METER,
-  MATH_VOLUME_UNITS.CUBIC_CENTIMETER,
-  MATH_VOLUME_UNITS.CUBIC_MILLIMETER,
-  MATH_VOLUME_UNITS.FLOZ,
-]

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

@@ -0,0 +1,47 @@
+import {
+  KeyboardKey,
+  MATH_AREA_UNITS,
+  MATH_BASIC_OPERATORS,
+  MATH_BASIC_TRIGONOMETRIC_FUNCTIONS,
+  MATH_INTEGRALS_AND_DERIVATIVES,
+  MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS,
+  MATH_VOLUME_UNITS,
+} from '@magmamath/students-features'
+
+export const DISABLED_KEYS: KeyboardKey[] = [
+  MATH_BASIC_OPERATORS.PARENTHESES,
+  MATH_BASIC_OPERATORS.INTERVAL,
+  MATH_BASIC_OPERATORS.ABSOLUTE_VALUE,
+  MATH_BASIC_OPERATORS.ORDERED_PAIR,
+  MATH_BASIC_OPERATORS.NTH_ROOT,
+  MATH_BASIC_OPERATORS.FRACTION,
+  MATH_AREA_UNITS.SQUARE_YARD,
+  MATH_AREA_UNITS.SQUARE_MILE,
+  MATH_AREA_UNITS.SQUARE_FOOT,
+  MATH_AREA_UNITS.SQUARE_INCH,
+  MATH_AREA_UNITS.SQUARE_KILOMETER,
+  MATH_AREA_UNITS.SQUARE_METER,
+  MATH_AREA_UNITS.SQUARE_CENTIMETER,
+  MATH_AREA_UNITS.SQUARE_MILLIMETER,
+  MATH_AREA_UNITS.SQUARE_DECIMETER,
+  MATH_VOLUME_UNITS.CUBIC_YARD,
+  MATH_VOLUME_UNITS.CUBIC_MILE,
+  MATH_VOLUME_UNITS.CUBIC_FOOT,
+  MATH_VOLUME_UNITS.CUBIC_INCH,
+  MATH_VOLUME_UNITS.CUBIC_KILOMETER,
+  MATH_VOLUME_UNITS.CUBIC_METER,
+  MATH_VOLUME_UNITS.CUBIC_CENTIMETER,
+  MATH_VOLUME_UNITS.CUBIC_MILLIMETER,
+  MATH_VOLUME_UNITS.CUBIC_DECIMETER,
+  MATH_VOLUME_UNITS.FLOZ,
+  MATH_INTEGRALS_AND_DERIVATIVES.DEFINITEINTEGRAL,
+  MATH_INTEGRALS_AND_DERIVATIVES.INTEGRAL,
+  MATH_INTEGRALS_AND_DERIVATIVES.DERIVATIVE,
+  MATH_INTEGRALS_AND_DERIVATIVES.DOUBLEINTEGRAL,
+  MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.TAN,
+  MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.SIN,
+  MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.COS,
+  MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCTAN,
+  MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCSIN,
+  MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCCOS,
+]

package/src/features/keyboard/helpers.ts

@@ -1,8 +1,14 @@
 import { KEYBOARD_GROUPS_BY_LOCALE } from './constants/keysValues'
-import { KeyboardGroup, KeyboardType } from './types'
+import { KeyboardGroup, KeyboardType } from './types/types'
 import { Locale } from '../../shared/translation/types'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from './components/AlgebraLayout/keyboardGroups'
 
 export function getKeyboardGroup(locale: Locale, type: KeyboardType): KeyboardGroup {
   return KEYBOARD_GROUPS_BY_LOCALE[locale]?.[type] ?? MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP
 }
+
+export const getIsIpadOrIphoneDevice = () => {
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
+  const isIpadOS = navigator?.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform)
+  return isIOS || isIpadOS
+}

package/src/features/keyboard/index.ts

@@ -1,2 +1,3 @@
-export * from './types'
+export * from './types/types'
 export { Keyboard } from './components/Keyboard'
+export * from './types/MathKeysGroups'

package/src/features/keyboard/types/MathKeysGroups/basicOperators.tsx

@@ -36,8 +36,8 @@ import { PlusMinusIcon } from '../../../../shared/icons/MATH/PlusMinusIcon/PlusM
 import { SigmaSumIcon } from '../../../../shared/icons/MATH/SigmaSumIcon/SigmaSumIcon'
 import { ParenthesesIcon } from '../../../../shared/icons/MATH/ParenthesesIcon/ParenthesesIcon'
 import { OrderedPairIcon } from '../../../../shared/icons/MATH/OrderedPairIcon/OrderedPairIcon'
-import { MathKeysGroup } from '../../types'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
+import { MathKeysGroup } from '../types'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
 import { DivisionIcon } from '../../../../shared/icons/MATH/DivisionIcon/DivisionIcon'
 import { EqualsIcon } from '../../../../shared/icons/MATH/EqualsIcon/EqualsIcon'
 import { AbsoluteValueIcon } from '../../../../shared/icons/MATH/AbsoluteValueIcon/AbsoluteValueIcon'
@@ -102,7 +102,7 @@ export const MATH_BASIC_OPERATORS: MathKeysGroup<typeof MathBasicOperator> = {
   [MathBasicOperator.MULTIPLICATION]: {
     icon: <MultiplicationIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\times',
-    katexValue: 'x',
+    katexValue: '×',
   },
   [MathBasicOperator.DIVISION]: {
     icon: <DivisionIcon {...DEFAULT_KEY_ICON_PROPS} />,
@@ -113,11 +113,13 @@ export const MATH_BASIC_OPERATORS: MathKeysGroup<typeof MathBasicOperator> = {
     icon: <LessThanIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '<',
     katexValue: 'LESS_THAN',
+    spreadsheetValue: '<',
   },
   [MathBasicOperator.GREATER_THAN]: {
     icon: <GreaterThanIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '>',
     katexValue: 'GREATER_THAN',
+    spreadsheetValue: '>',
   },
   [MathBasicOperator.LESS_THAN_OR_EQUAL]: {
     icon: <LessThanOrEqualIcon {...DEFAULT_KEY_ICON_PROPS} />,