@magmamath/students-features 1.0.2 → 1.0.3-rc.1

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

@@ -1,27 +1,25 @@
 import React, { useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
-import { COLORS, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
-import { Locale, useText } from '../../../../shared/translation'
+import { COLORS, IS_MOBILE, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
 import { UnitTabs } from './UnitTabs'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/keyboard.constants'
 import { useUnitTabs } from './hooks/useUnitTabs'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { KeyboardUnitsGroupType, SelectedLayout } from './types'
 import { getSelectOptions } from './helpers'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
+export const UnitsLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
-  const t = useText()
-  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 basicPlusKeys = getKeyboardGroup(locale, KeyboardType.BasicPlus)
+
+  const basicPlusKeys = getMainKeyboardGroup(keys, KeyboardType.BasicPlus)
   const { tabs, activeTab, setActiveTab } = useUnitTabs()
+
   const selectOptions = getSelectOptions({
     activeTabKey: activeTab.key as KeyboardUnitsGroupType,
     selectedLayout,
@@ -48,7 +46,13 @@ export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) =
       )}
 
       {selectedLayout === SelectedLayout.UNITS ? (
-        <UnitTabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} {...props} />
+        <UnitTabs
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          keys={keys}
+          {...props}
+        />
       ) : (
         <KeysList keys={basicPlusKeys.keys} numOfRows={3} {...props} />
       )}

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

@@ -1,8 +1,18 @@
-import { COLORS, RulerIcon } from '@magmamath/react-native-ui'
-import { UNITS_KEYBOARD_GROUPS } from './keyboardGroups'
-import React from 'react'
+import { COLORS, IconProps, RulerIcon, TimeIcon } from '@magmamath/react-native-ui'
+import React, { ComponentType } from 'react'
 import { KeyboardUnitsGroupType, SelectedLayout } from './types'
 import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { RectangleIcon } from '../../../../shared/icons/RectangleIcon'
+import { VolumeIcon } from '../../../../shared/icons/VolumeIcon'
+import { WeightIcon } from '../../../../shared/icons/WeightIcon'
+
+const ICON_BY_UNIT_GROUP: Record<KeyboardUnitsGroupType, ComponentType<IconProps>> = {
+  [KeyboardUnitsGroupType.LENGTH]: RulerIcon,
+  [KeyboardUnitsGroupType.AREA]: RectangleIcon,
+  [KeyboardUnitsGroupType.VOLUME]: VolumeIcon,
+  [KeyboardUnitsGroupType.WEIGHT]: WeightIcon,
+  [KeyboardUnitsGroupType.TIME]: TimeIcon,
+}
 
 type UseLayoutSelectOptionsProps = {
   activeTabKey: KeyboardUnitsGroupType
@@ -17,38 +27,36 @@ export const getSelectOptions = ({
   setSelectedLayout,
   onLayoutChange,
 }: UseLayoutSelectOptionsProps) => {
-  {
-    const SelectedIcon = UNITS_KEYBOARD_GROUPS.get(activeTabKey)?.icon || RulerIcon
+  const SelectedIcon = ICON_BY_UNIT_GROUP[activeTabKey]
 
-    return [
-      {
-        key: SelectedLayout.ALGEBRA,
-        title: (
-          <AlgebraIcon
-            color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={22}
-          />
-        ),
-        onPressIn: () => {
-          setSelectedLayout(SelectedLayout.ALGEBRA)
-          onLayoutChange?.(false)
-        },
+  return [
+    {
+      key: SelectedLayout.ALGEBRA,
+      title: (
+        <AlgebraIcon
+          color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+          size={22}
+        />
+      ),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.ALGEBRA)
+        onLayoutChange?.(false)
       },
-      {
-        key: SelectedLayout.UNITS,
-        title: (
-          <SelectedIcon
-            color={selectedLayout === SelectedLayout.UNITS ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={16}
-          />
-        ),
-        onPressIn: () => {
-          setSelectedLayout(SelectedLayout.UNITS)
-          onLayoutChange?.(true)
-        },
+    },
+    {
+      key: SelectedLayout.UNITS,
+      title: (
+        <SelectedIcon
+          color={selectedLayout === SelectedLayout.UNITS ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+          size={16}
+        />
+      ),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.UNITS)
+        onLayoutChange?.(true)
       },
-    ]
-  }
+    },
+  ]
 }
 
 export const isKeyboardUnitsGroupType = (k: string): k is KeyboardUnitsGroupType =>

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

@@ -1,4 +1,3 @@
-import { KeyboardGroup, KeyboardKey } from '@magmamath/students-features'
 import { TabOptionProps } from '@magmamath/react-native-ui'
 
 export enum SelectedLayout {
@@ -14,10 +13,6 @@ export enum KeyboardUnitsGroupType {
   TIME = 'time',
 }
 
-export type UnitKeyboardGroups = {
-  keys: KeyboardKey[][]
-} & Omit<KeyboardGroup, 'keys'>
-
 export type UnitTab = Omit<TabOptionProps, 'key'> & {
   key: KeyboardUnitsGroupType
   minBreakpoint?: number

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

@@ -0,0 +1,33 @@
+import {
+  MATH_BASIC_OPERATORS,
+  MATH_BASIC_TRIGONOMETRIC_FUNCTIONS,
+  MATH_INTEGRALS_AND_DERIVATIVES,
+  MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS,
+  MATH_SPECIAL_OPERATORS,
+} from '../keys'
+import { KeyboardGroup } from '../../types/types'
+
+export const KEYBOARD_ALGEBRA: KeyboardGroup = {
+  keys: [
+    MATH_INTEGRALS_AND_DERIVATIVES.INTEGRAL,
+    MATH_BASIC_OPERATORS.SUM,
+    MATH_BASIC_OPERATORS.APPROXIMATELY_EQUAL,
+    MATH_SPECIAL_OPERATORS.LIM,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.SIN,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCSIN,
+    MATH_BASIC_OPERATORS.INTERVAL,
+    MATH_INTEGRALS_AND_DERIVATIVES.DEFINITEINTEGRAL,
+    MATH_BASIC_OPERATORS.INFINITY,
+    MATH_BASIC_OPERATORS.SIMILARITY,
+    MATH_SPECIAL_OPERATORS.LN,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.COS,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCCOS,
+    MATH_BASIC_OPERATORS.ABSOLUTE_VALUE,
+    MATH_INTEGRALS_AND_DERIVATIVES.DOUBLEINTEGRAL,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.NOT_EQUAL,
+    MATH_SPECIAL_OPERATORS.LOG,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.TAN,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCTAN,
+  ],
+}

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

@@ -0,0 +1,25 @@
+import { MATH_BASIC_OPERATORS } from '../keys'
+import { KeyboardGroups } from '../../types/types'
+
+export const KEYBOARD_BASIC: KeyboardGroups = {
+  DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.COMMA,
+    ],
+  },
+  COMMA: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.C_DOT,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.DOT,
+    ],
+  },
+}

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

@@ -0,0 +1,91 @@
+import { MATH_BASIC_OPERATORS, MATH_TEXT_SYMBOLS } from '../keys'
+import { KeyboardGroups } from '../../types/types'
+
+export const KEYBOARD_BASIC_PLUS: KeyboardGroups = {
+  DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.COMMA,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.NTH_ROOT,
+    ],
+  },
+  COMMA: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.C_DOT,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.DOT,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.NTH_ROOT,
+    ],
+  },
+  MOBILE_DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.COMMA,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+    ],
+  },
+  MOBILE_COMMA: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.C_DOT,
+      MATH_BASIC_OPERATORS.DIVISION,
+      MATH_BASIC_OPERATORS.DOT,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.PERMILLE,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+    ],
+  },
+}

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

@@ -0,0 +1,120 @@
+import {
+  MATH_BASIC_OPERATORS,
+  MATH_GEOMETRY_SYMBOLS,
+  MATH_SYMBOLS,
+  MATH_TEXT_SYMBOLS,
+} from '../keys'
+import { KeyboardGroups } from '../../types/types'
+
+export const KEYBOARD_BASIC_PLUS_PLUS: KeyboardGroups = {
+  DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_SYMBOLS.PI,
+      MATH_GEOMETRY_SYMBOLS.RADIAN,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.SLASH,
+      MATH_BASIC_OPERATORS.PLUS_MINUS,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.NTH_ROOT,
+      MATH_SYMBOLS.THETA,
+      MATH_GEOMETRY_SYMBOLS.DEGREE,
+      MATH_BASIC_OPERATORS.COMMA,
+      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,
+    ],
+  },
+  COMMA: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_SYMBOLS.PI,
+      MATH_GEOMETRY_SYMBOLS.RADIAN,
+      MATH_BASIC_OPERATORS.C_DOT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.SLASH,
+      MATH_BASIC_OPERATORS.PLUS_MINUS,
+      MATH_BASIC_OPERATORS.PERCENT,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.NTH_ROOT,
+      MATH_SYMBOLS.THETA,
+      MATH_GEOMETRY_SYMBOLS.DEGREE,
+      MATH_BASIC_OPERATORS.DOT,
+      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,
+    ],
+  },
+  MOBILE_DOT: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_SYMBOLS.PI,
+      MATH_GEOMETRY_SYMBOLS.RADIAN,
+      MATH_BASIC_OPERATORS.MULTIPLICATION,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.COMMA,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_SYMBOLS.THETA,
+      MATH_GEOMETRY_SYMBOLS.DEGREE,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.LESS_THAN,
+      MATH_BASIC_OPERATORS.GREATER_THAN,
+    ],
+  },
+  MOBILE_COMMA: {
+    keys: [
+      MATH_BASIC_OPERATORS.ADDITION,
+      MATH_BASIC_OPERATORS.SUBTRACTION,
+      MATH_BASIC_OPERATORS.EQUALS,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_LEFT,
+      MATH_BASIC_OPERATORS.ROUND_BRACKET_RIGHT,
+      MATH_SYMBOLS.PI,
+      MATH_GEOMETRY_SYMBOLS.RADIAN,
+      MATH_BASIC_OPERATORS.C_DOT,
+      MATH_BASIC_OPERATORS.FRACTION,
+      MATH_BASIC_OPERATORS.DOT,
+      MATH_BASIC_OPERATORS.SQUARE_POWER,
+      MATH_BASIC_OPERATORS.SQUARE_ROOT,
+      MATH_SYMBOLS.THETA,
+      MATH_GEOMETRY_SYMBOLS.DEGREE,
+      MATH_TEXT_SYMBOLS.X,
+      MATH_TEXT_SYMBOLS.Y,
+      MATH_TEXT_SYMBOLS.Z,
+      MATH_BASIC_OPERATORS.NTH_POWER,
+      MATH_BASIC_OPERATORS.LESS_THAN,
+      MATH_BASIC_OPERATORS.GREATER_THAN,
+    ],
+  },
+}

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

@@ -0,0 +1,17 @@
+import { MATH_CURRENCY_UNITS } from '../keys'
+import { KeyboardGroup } from '../../types/types'
+
+export const KEYBOARD_CURRENCY: Record<string, KeyboardGroup> = {
+  DOLLAR_CENT: {
+    keys: [MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.CENT],
+  },
+  POUND_PENCE: {
+    keys: [MATH_CURRENCY_UNITS.POUND, MATH_CURRENCY_UNITS.PESO],
+  },
+  KRONE_EURO_POUND: {
+    keys: [MATH_CURRENCY_UNITS.KRONE, MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.POUND],
+  },
+  EURO_DOLLAR_POUND: {
+    keys: [MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.POUND],
+  },
+}

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

@@ -0,0 +1,9 @@
+export * from './algebra.constants'
+export * from './basic.constants'
+export * from './basicPlus.constants'
+export * from './basicPlusPlus.constants'
+export * from './currency.constants'
+export * from './numpad.constants'
+export * from './time.constants'
+export * from './underlined.constants'
+export * from './units.constants'

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

@@ -0,0 +1,37 @@
+import { MATH_BASIC_OPERATORS, MATH_SPECIAL_OPERATORS } from '../keys'
+import { KeyboardGroups } from '../../types/types'
+
+export const KEYBOARD_NUMPAD: KeyboardGroups = {
+  DOT: {
+    keys: [
+      { label: '1', mathliveValue: '1', katexValue: '1' },
+      { label: '2', mathliveValue: '2', katexValue: '2' },
+      { label: '3', mathliveValue: '3', katexValue: '3' },
+      MATH_SPECIAL_OPERATORS.BACKSPACE,
+      { label: '4', mathliveValue: '4', katexValue: '4' },
+      { label: '5', mathliveValue: '5', katexValue: '5' },
+      { label: '6', mathliveValue: '6', katexValue: '6' },
+      MATH_BASIC_OPERATORS.DOT,
+      { label: '7', mathliveValue: '7', katexValue: '7' },
+      { label: '8', mathliveValue: '8', katexValue: '8' },
+      { label: '9', mathliveValue: '9', katexValue: '9' },
+      { label: '0', mathliveValue: '0', katexValue: '0' },
+    ],
+  },
+  COMMA: {
+    keys: [
+      { label: '1', mathliveValue: '1', katexValue: '1' },
+      { label: '2', mathliveValue: '2', katexValue: '2' },
+      { label: '3', mathliveValue: '3', katexValue: '3' },
+      MATH_SPECIAL_OPERATORS.BACKSPACE,
+      { label: '4', mathliveValue: '4', katexValue: '4' },
+      { label: '5', mathliveValue: '5', katexValue: '5' },
+      { label: '6', mathliveValue: '6', katexValue: '6' },
+      MATH_BASIC_OPERATORS.COMMA,
+      { label: '7', mathliveValue: '7', katexValue: '7' },
+      { label: '8', mathliveValue: '8', katexValue: '8' },
+      { label: '9', mathliveValue: '9', katexValue: '9' },
+      { label: '0', mathliveValue: '0', katexValue: '0' },
+    ],
+  },
+}

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

@@ -0,0 +1,19 @@
+import { MATH_BASIC_OPERATORS, MATH_TIME_UNITS } from '../keys'
+import { KeyboardGroups } from '../../types/types'
+
+export const KEYBOARD_TIME: KeyboardGroups = {
+  H24: {
+    keys: [MATH_TIME_UNITS.S, MATH_TIME_UNITS.M, MATH_TIME_UNITS.H],
+  },
+  H12: {
+    numOfRows: 3,
+    keys: [
+      MATH_BASIC_OPERATORS.COLON,
+      MATH_TIME_UNITS.S,
+      MATH_TIME_UNITS.AM,
+      MATH_TIME_UNITS.M,
+      MATH_TIME_UNITS.PM,
+      MATH_TIME_UNITS.H,
+    ],
+  },
+}

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

@@ -0,0 +1,11 @@
+import { MATH_BASIC_OPERATORS, MATH_SPECIAL_OPERATORS } from '../keys'
+import { KeyboardGroup } from '../../types/types'
+
+export const KEYBOARD_UNDERLINED: KeyboardGroup = {
+  keys: [
+    MATH_SPECIAL_OPERATORS.UNDERLINED_TEN,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_U,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_ONE,
+    MATH_BASIC_OPERATORS.SLASH,
+  ],
+}

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

@@ -0,0 +1,157 @@
+import {
+  MATH_AREA_UNITS,
+  MATH_LENGTH_UNITS,
+  MATH_TIME_UNITS,
+  MATH_VOLUME_UNITS,
+  MATH_WEIGHT_UNITS,
+} from '../keys'
+import { KeyboardRowsGroups } from '../../types/types'
+
+export const KEYBOARD_LENGTH: KeyboardRowsGroups = {
+  METRIC: {
+    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],
+    ],
+  },
+  MIXED: {
+    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 KEYBOARD_AREA: KeyboardRowsGroups = {
+  METRIC: {
+    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],
+    ],
+  },
+  MIXED: {
+    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 KEYBOARD_VOLUME: KeyboardRowsGroups = {
+  METRIC: {
+    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,
+      ],
+    ],
+  },
+  MIXED: {
+    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,
+      ],
+    ],
+  },
+  MIXED_ALT: {
+    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 KEYBOARD_WEIGHT: KeyboardRowsGroups = {
+  METRIC: {
+    keys: [
+      [
+        MATH_WEIGHT_UNITS.MG,
+        MATH_WEIGHT_UNITS.G,
+        MATH_WEIGHT_UNITS.HG,
+        MATH_WEIGHT_UNITS.KG,
+        MATH_WEIGHT_UNITS.T,
+      ],
+    ],
+  },
+  MIXED: {
+    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 KEYBOARD_TIME_UNITS: KeyboardRowsGroups = {
+  DEFAULT: {
+    keys: [[MATH_TIME_UNITS.S, MATH_TIME_UNITS.M, MATH_TIME_UNITS.H]],
+  },
+}