@magmamath/students-features 0.9.0-rc8 → 0.9.0

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

@@ -2,13 +2,12 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
 import { COLORS, TabGroup, TabOptionProps, TabVariant, IS_MOBILE } from '@magmamath/react-native-ui'
-import {
-  KEYBOARD_UNITS_GROUPS_BY_LOCALE,
-  KeyboardUnitsGroupType,
-  MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
-} from './keyboardGroups'
+import { MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS } from './keyboardGroups'
 import { KeyboardLayoutProps } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
+import { Locale } from '@magmamath/students-features'
+import { useText } from '../../../../shared/translation'
+import { KEYBOARD_UNITS_GROUPS_BY_LOCALE } from '../../constants/keyboardGroupsByLocale'
+import { KeyboardUnitsGroupType } from './types'
 
 type UnitTabsProps = {
   tabs: TabOptionProps[]
@@ -18,11 +17,13 @@ type UnitTabsProps = {
 
 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 locale = t('locale') as Locale
+  const keyboardGroups =
+    KEYBOARD_UNITS_GROUPS_BY_LOCALE[locale]?.[activeTab.key as KeyboardUnitsGroupType]?.keys ||
+    MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS.keys
+
   return (
-    <View style={{ width: 283 }}>
+    <View style={styles.container}>
       <View style={styles.tabsContainer}>
         <TabGroup
           activeTab={activeTab}
@@ -32,19 +33,19 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
           variant={TabVariant.SMALL}
         />
         <View style={styles.keyGroupContainer}>
-          {keyboardGroup.map((keyGroup) => (
+          {keyboardGroups.map((keyGroup, index) => (
             <KeysList
+              key={index}
               keys={keyGroup}
               numOfRows={1}
+              {...props}
               style={{
-                container: styles.keysContainer,
                 option: {
-                  button: styles.option,
-                  text: styles.text,
-                  ...(IS_MOBILE && { container: { flexBasis: 58, maxWidth: 58 } }),
+                  text: styles.keysText,
+                  container: styles.keyContainer,
+                  button: styles.keyButton,
                 },
               }}
-              {...props}
             />
           ))}
         </View>
@@ -54,26 +55,10 @@ 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,
+  container: {
+    width: 283,
+    flex: 1,
   },
-
   tabsContainer: {
     gap: 16,
     flex: 1,
@@ -86,4 +71,14 @@ const styles = StyleSheet.create({
   keyGroupContainer: {
     gap: 8,
   },
+  keysText: {
+    fontSize: 14,
+    fontWeight: 700,
+  },
+  keyButton: {
+    width: IS_MOBILE ? 54 : 40,
+  },
+  keyContainer: {
+    flexBasis: IS_MOBILE ? 58 : 'auto',
+  },
 })

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

@@ -1,159 +1,55 @@
-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,
-  IS_MOBILE,
-  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/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 { 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 },
-  ],
-])
-
-enum SelectedLayout {
-  ALGEBRA = 'algebra',
-  UNITS = 'units',
-}
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { useUnitTabs } from './hooks/useUnitTabs'
+import { getKeyboardGroup } from '../../helpers'
+import { KeyboardUnitsGroupType, SelectedLayout } from './types'
+import { getSelectOptions } from './helpers'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const UnitsLayout = (props: KeyboardLayoutProps) => {
-  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.ALGEBRA)
+  const { width } = useWindowDimensions()
   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 locale = t('locale') as Locale
+  const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
+  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(
+    isDesktop ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS,
   )
-  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={20}
-          />
-        ),
-        key: '1',
-      },
-      {
-        title: (
-          <SelectedIcon
-            color={selectedLayout === SelectedLayout.UNITS ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={16}
-          />
-        ),
-        key: '2',
-      },
-    ]
-  }, [activeTab, selectedLayout])
+  const basicPlusKeys = getKeyboardGroup(locale, KeyboardType.BasicPlus)
+  const { tabs, activeTab, setActiveTab } = useUnitTabs()
+  const selectOptions = getSelectOptions({
+    activeTabKey: activeTab.key as KeyboardUnitsGroupType,
+    selectedLayout,
+    setSelectedLayout,
+  })
 
   return (
     <View style={styles.container}>
-      <SelectGroup
-        numOfRows={2}
-        options={selectOptions}
-        size={SelectOptionSize.SMALL}
-        style={{
-          container: styles.optionContainer,
-          option: { ...(IS_MOBILE && { container: { flexBasis: 45 } }) },
-        }}
-        color={props.color}
-        selectedOptions={[
-          selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
-        ]}
-        onOptionChange={(option) => {
-          setSelectedLayout(option.key === '1' ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS)
-        }}
-      />
-      {selectedLayout === SelectedLayout.UNITS ? (
-        <UnitTabs
-          tabs={tabs}
-          activeTab={activeTab}
-          onTabChange={(tab) => {
-            setActiveTab(tab)
-          }}
-          {...props}
-        />
-      ) : (
-        <KeysList
-          keys={basicExtendedKeys.keys}
-          numOfRows={3}
-          {...props}
+      {isDesktop && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
           style={{
-            container: styles.basicExtendedContainer,
-            option: {
-              button: styles.key,
-              ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
-            },
+            container: styles.optionContainer,
+            option: { container: styles.option },
           }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
+          ]}
         />
       )}
+      {selectedLayout === SelectedLayout.UNITS ? (
+        <UnitTabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} {...props} />
+      ) : (
+        <KeysList keys={basicPlusKeys.keys} numOfRows={3} {...props} />
+      )}
     </View>
   )
 }
@@ -161,28 +57,23 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
 const styles = StyleSheet.create({
   container: {
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: IS_MOBILE ? 'column' : '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,
-    maxWidth: 60,
-  },
-  key: {
-    width: 42,
+    maxWidth: 65,
+    gap: 9,
   },
 })

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

@@ -0,0 +1,44 @@
+import { COLORS, RulerIcon } from '@magmamath/react-native-ui'
+import { UNITS_KEYBOARD_GROUPS } from './keyboardGroups'
+import React from 'react'
+import { KeyboardUnitsGroupType, SelectedLayout } from './types'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+
+type UseLayoutSelectOptionsProps = {
+  activeTabKey: KeyboardUnitsGroupType
+  selectedLayout: SelectedLayout
+  setSelectedLayout: (layout: SelectedLayout) => void
+}
+
+export const getSelectOptions = ({
+  activeTabKey,
+  selectedLayout,
+  setSelectedLayout,
+}: UseLayoutSelectOptionsProps) => {
+  {
+    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),
+      },
+    ]
+  }
+}

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

@@ -0,0 +1,36 @@
+import { useText } from '../../../../../shared/translation'
+import { useMemo, useState } from 'react'
+import { TabOptionProps } from '@magmamath/react-native-ui'
+
+import { KeyboardUnitsGroupType } from '../types'
+
+export const useUnitTabs = () => {
+  const t = useText()
+  const tabs = useMemo(
+    () => [
+      {
+        title: t('keyboard.length'),
+        style: { paddingLeft: 0, paddingRight: 32, marginRight: -16 },
+        key: KeyboardUnitsGroupType.LENGTH,
+      },
+      {
+        title: t('keyboard.area'),
+        style: { paddingHorizontal: 10 },
+        key: KeyboardUnitsGroupType.AREA,
+      },
+      {
+        title: t('keyboard.volume'),
+        style: { paddingHorizontal: 10 },
+        key: KeyboardUnitsGroupType.VOLUME,
+      },
+      {
+        title: t('keyboard.weight'),
+        style: { paddingHorizontal: 10, paddingRight: 0 },
+        key: KeyboardUnitsGroupType.WEIGHT,
+      },
+    ],
+    [t],
+  )
+  const [activeTab, setActiveTab] = useState<TabOptionProps>(tabs[0])
+  return { tabs, activeTab, setActiveTab }
+}

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

@@ -0,0 +1,202 @@
+import {
+  MATH_AREA_UNITS,
+  MATH_LENGTH_UNITS,
+  MATH_VOLUME_UNITS,
+  MATH_WEIGHT_UNITS,
+} from '../../types/MathKeysGroups/units'
+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'
+import { KeyboardUnitsGroupType, UnitKeyboardGroups } from './types'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+
+export const MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.LENGTH_UNITS_SW,
+  keys: [
+    [
+      MATH_LENGTH_UNITS.MILLIMETER,
+      MATH_LENGTH_UNITS.CENTIMETER,
+      MATH_LENGTH_UNITS.DECIMETER,
+      MATH_LENGTH_UNITS.METER,
+    ],
+    [MATH_LENGTH_UNITS.KILOMETER, MATH_LENGTH_UNITS.MILE_SE],
+  ],
+}
+
+export const MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.LENGTH_UNITS_US,
+  keys: [
+    [
+      MATH_LENGTH_UNITS.MILLIMETER,
+      MATH_LENGTH_UNITS.CENTIMETER,
+      MATH_LENGTH_UNITS.DECIMETER,
+      MATH_LENGTH_UNITS.METER,
+      MATH_LENGTH_UNITS.KILOMETER,
+    ],
+    [
+      MATH_LENGTH_UNITS.INCH,
+      MATH_LENGTH_UNITS.FOOT,
+      MATH_LENGTH_UNITS.YARD,
+      MATH_LENGTH_UNITS.MILE,
+    ],
+  ],
+}
+
+export const MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.AREA_UNITS_SW,
+  keys: [
+    [
+      MATH_AREA_UNITS.SQUARE_MILLIMETER,
+      MATH_AREA_UNITS.SQUARE_CENTIMETER,
+      MATH_AREA_UNITS.SQUARE_DECIMETER,
+      MATH_AREA_UNITS.SQUARE_METER,
+      MATH_AREA_UNITS.SQUARE_KILOMETER,
+    ],
+    [MATH_AREA_UNITS.HECTARE],
+  ],
+}
+
+export const MATH_ENTRY_AREA_UNITS_US_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.AREA_UNITS_US,
+  keys: [
+    [
+      MATH_AREA_UNITS.SQUARE_MILLIMETER,
+      MATH_AREA_UNITS.SQUARE_CENTIMETER,
+      MATH_AREA_UNITS.SQUARE_DECIMETER,
+      MATH_AREA_UNITS.SQUARE_METER,
+      MATH_AREA_UNITS.SQUARE_KILOMETER,
+    ],
+    [
+      MATH_AREA_UNITS.SQUARE_INCH,
+      MATH_AREA_UNITS.SQUARE_FOOT,
+      MATH_AREA_UNITS.SQUARE_YARD,
+      MATH_AREA_UNITS.SQUARE_MILE,
+    ],
+  ],
+}
+
+export const MATH_ENTRY_AREA_UNITS_UK_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.AREA_UNITS_UK,
+  keys: [
+    [
+      MATH_AREA_UNITS.SQUARE_MILLIMETER,
+      MATH_AREA_UNITS.SQUARE_CENTIMETER,
+      MATH_AREA_UNITS.SQUARE_DECIMETER,
+      MATH_AREA_UNITS.SQUARE_METER,
+      MATH_AREA_UNITS.SQUARE_KILOMETER,
+    ],
+    [
+      MATH_AREA_UNITS.SQUARE_INCH,
+      MATH_AREA_UNITS.SQUARE_FOOT,
+      MATH_AREA_UNITS.SQUARE_YARD,
+      MATH_AREA_UNITS.SQUARE_MILE,
+    ],
+  ],
+}
+
+export const MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.VOLUME_UNITS_SW,
+  keys: [
+    [
+      MATH_VOLUME_UNITS.CUBIC_MILLIMETER,
+      MATH_VOLUME_UNITS.CUBIC_CENTIMETER,
+      MATH_VOLUME_UNITS.CUBIC_DECIMETER,
+      MATH_VOLUME_UNITS.CUBIC_METER,
+      MATH_VOLUME_UNITS.CUBIC_KILOMETER,
+    ],
+    [
+      MATH_VOLUME_UNITS.MILLILITER,
+      MATH_VOLUME_UNITS.CL,
+      MATH_VOLUME_UNITS.DL,
+      MATH_VOLUME_UNITS.LITER_SE,
+    ],
+  ],
+}
+
+export const MATH_ENTRY_VOLUME_UNITS_US_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.VOLUME_UNITS_US,
+  keys: [
+    [
+      MATH_VOLUME_UNITS.CUBIC_MILLIMETER,
+      MATH_VOLUME_UNITS.CUBIC_CENTIMETER,
+      MATH_VOLUME_UNITS.CUBIC_METER,
+      MATH_VOLUME_UNITS.CUBIC_KILOMETER,
+      MATH_VOLUME_UNITS.MILLILITER_SE,
+      MATH_VOLUME_UNITS.GAL,
+    ],
+    [
+      MATH_VOLUME_UNITS.CUBIC_INCH,
+      MATH_VOLUME_UNITS.CUBIC_FOOT,
+      MATH_VOLUME_UNITS.CUBIC_YARD,
+      MATH_VOLUME_UNITS.CUBIC_MILE,
+      MATH_VOLUME_UNITS.CUP,
+      MATH_VOLUME_UNITS.FLOZ,
+    ],
+  ],
+}
+
+export const MATH_ENTRY_VOLUME_UNITS_UK_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.VOLUME_UNITS_UK,
+  keys: [
+    [
+      MATH_VOLUME_UNITS.CUBIC_MILLIMETER,
+      MATH_VOLUME_UNITS.CUBIC_CENTIMETER,
+      MATH_VOLUME_UNITS.CUBIC_METER,
+      MATH_VOLUME_UNITS.CUBIC_KILOMETER,
+      MATH_VOLUME_UNITS.MILLILITER,
+      MATH_VOLUME_UNITS.GAL,
+    ],
+    [
+      MATH_VOLUME_UNITS.CUBIC_INCH,
+      MATH_VOLUME_UNITS.CUBIC_FOOT,
+      MATH_VOLUME_UNITS.CUBIC_YARD,
+      MATH_VOLUME_UNITS.CUBIC_MILE,
+      MATH_VOLUME_UNITS.CUP,
+      MATH_VOLUME_UNITS.FLOZ,
+    ],
+  ],
+}
+
+export const MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.WEIGHT_UNITS_SW,
+  keys: [
+    [
+      MATH_WEIGHT_UNITS.MG,
+      MATH_WEIGHT_UNITS.G,
+      MATH_WEIGHT_UNITS.HG,
+      MATH_WEIGHT_UNITS.KG,
+      MATH_WEIGHT_UNITS.T,
+    ],
+  ],
+}
+
+export const MATH_ENTRY_WEIGHT_UNITS_US_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.WEIGHT_UNITS_US,
+  keys: [
+    [MATH_WEIGHT_UNITS.MG, MATH_WEIGHT_UNITS.G, MATH_WEIGHT_UNITS.KG, MATH_WEIGHT_UNITS.T],
+    [MATH_WEIGHT_UNITS.OZ, MATH_WEIGHT_UNITS.LB, MATH_WEIGHT_UNITS.TON],
+  ],
+}
+
+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/types.ts

@@ -0,0 +1,17 @@
+import { KeyboardGroup, KeyboardKey } from '@magmamath/students-features'
+
+export enum SelectedLayout {
+  ALGEBRA = 'algebra',
+  UNITS = 'units',
+}
+
+export enum KeyboardUnitsGroupType {
+  LENGTH = 'length',
+  AREA = 'area',
+  VOLUME = 'volume',
+  WEIGHT = 'weight',
+}
+
+export type UnitKeyboardGroups = {
+  keys: KeyboardKey[][]
+} & Omit<KeyboardGroup, 'keys'>

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

@@ -0,0 +1,38 @@
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { KEYBOARD_LAYOUTS } from '../constants/keyboardLayouts'
+
+export const KEYBOARD_SLIDE_DISTANCE = 600
+
+export const LAYOUT_STYLES_CONFIG = {
+  DEFAULT: {
+    borderColor: COLORS.NEUTRAL_3,
+    paddingLeft: SPACING[800],
+  },
+  BASIC: { borderColor: 'transparent', paddingLeft: SPACING[800] },
+  ALGEBRA: { borderColor: COLORS.NEUTRAL_3, paddingLeft: SPACING[200] },
+} as const
+
+export const getLayoutConfigStyles = (characterType?: number, isMobile?: boolean) => {
+  if (!characterType || !isMobile) return LAYOUT_STYLES_CONFIG.DEFAULT
+
+  const { Basic, AlgebraAdvanced, BasicPlus } = KEYBOARD_LAYOUTS
+
+  if (Basic.characterTypes.includes(characterType)) return LAYOUT_STYLES_CONFIG.BASIC
+
+  if ([...AlgebraAdvanced.characterTypes, ...BasicPlus.characterTypes].includes(characterType))
+    return LAYOUT_STYLES_CONFIG.ALGEBRA
+
+  return LAYOUT_STYLES_CONFIG.DEFAULT
+}
+
+export const slideInAnimationSettings = {
+  toValue: KEYBOARD_SLIDE_DISTANCE,
+  stiffness: 720,
+  damping: 60,
+}
+
+export const slideOutAnimationSettings = {
+  toValue: 0,
+  stiffness: 320,
+  damping: 40,
+}

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

@@ -0,0 +1,8 @@
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const DEFAULT_KEY_ICON_PROPS = {
+  size: 16,
+  color: COLORS.NEUTRAL_9,
+} as const
+
+export const MOBILE_LAYOUT_WIDTH = 1280