@magmamath/students-features 0.9.0-rc8 → 0.9.0

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

@@ -0,0 +1,120 @@
+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/keyboardGroups'
+import {
+  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_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_AREA_UNITS_SW_KEYBOARD_GROUPS,
+  MATH_ENTRY_AREA_UNITS_UK_KEYBOARD_GROUPS,
+  MATH_ENTRY_AREA_UNITS_US_KEYBOARD_GROUPS,
+  MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
+  MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
+  MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
+  MATH_ENTRY_VOLUME_UNITS_UK_KEYBOARD_GROUPS,
+  MATH_ENTRY_VOLUME_UNITS_US_KEYBOARD_GROUPS,
+  MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
+  MATH_ENTRY_WEIGHT_UNITS_US_KEYBOARD_GROUPS,
+} from '../components/UnitsLayout/keyboardGroups'
+import { Locale } from '../../../shared/translation'
+import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from '../components/AlgebraLayout/keyboardGroups'
+import { KeyboardUnitsGroupType, UnitKeyboardGroups } from '../components/UnitsLayout/types'
+
+function createKeyboardLocale(overrides: Partial<Record<KeyboardType, KeyboardGroup>>) {
+  const base: Record<KeyboardType, KeyboardGroup> = {
+    [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
+    [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_US_KEYBOARD_GROUP,
+    [KeyboardType.BasicTime]: MATH_TIME_US_KEYBOARD_GROUP,
+    [KeyboardType.AlgebraAdvanced]: MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP,
+    [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
+  }
+  return { ...base, ...overrides }
+}
+
+function createKeyboardUnitsLocale(
+  overrides: Partial<Record<KeyboardUnitsGroupType, UnitKeyboardGroups>>,
+) {
+  const base: Record<KeyboardUnitsGroupType, UnitKeyboardGroups> = {
+    [KeyboardUnitsGroupType.LENGTH]: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.AREA]: MATH_ENTRY_AREA_UNITS_US_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.VOLUME]: MATH_ENTRY_VOLUME_UNITS_US_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.WEIGHT]: MATH_ENTRY_WEIGHT_UNITS_US_KEYBOARD_GROUPS,
+  }
+  return { ...base, ...overrides }
+}
+
+export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, KeyboardGroup>> = {
+  [Locale.CA]: createKeyboardLocale({}),
+  [Locale.SCT]: createKeyboardLocale({
+    [KeyboardType.BasicCurrency]: MATH_CURRENCY_UK_KEYBOARD_GROUP,
+    [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
+  }),
+  [Locale.GB]: createKeyboardLocale({
+    [KeyboardType.BasicCurrency]: MATH_CURRENCY_UK_KEYBOARD_GROUP,
+    [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
+  }),
+  [Locale.EN]: createKeyboardLocale({}),
+  [Locale.SW]: createKeyboardLocale({
+    [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],
+    },
+    [KeyboardType.BasicCurrency]: MATH_CURRENCY_SW_KEYBOARD_GROUP,
+    [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
+    [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP,
+  }),
+}
+export const KEYBOARD_UNITS_GROUPS_BY_LOCALE: Record<
+  Locale,
+  Record<KeyboardUnitsGroupType, UnitKeyboardGroups>
+> = {
+  [Locale.CA]: createKeyboardUnitsLocale({}),
+  [Locale.SCT]: createKeyboardUnitsLocale({
+    [KeyboardUnitsGroupType.AREA]: MATH_ENTRY_AREA_UNITS_UK_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.VOLUME]: MATH_ENTRY_VOLUME_UNITS_UK_KEYBOARD_GROUPS,
+  }),
+  [Locale.GB]: createKeyboardUnitsLocale({
+    [KeyboardUnitsGroupType.AREA]: MATH_ENTRY_AREA_UNITS_UK_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.VOLUME]: MATH_ENTRY_VOLUME_UNITS_UK_KEYBOARD_GROUPS,
+  }),
+  [Locale.EN]: createKeyboardUnitsLocale({}),
+  [Locale.SW]: createKeyboardUnitsLocale({
+    [KeyboardUnitsGroupType.LENGTH]: MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.AREA]: MATH_ENTRY_AREA_UNITS_SW_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.VOLUME]: MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
+    [KeyboardUnitsGroupType.WEIGHT]: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
+  }),
+}

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

@@ -1,40 +1,61 @@
 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'
+import { MyScriptMathCharacterTypes } from '../../../types/characterTypes'
 
 export const KEYBOARD_LAYOUTS = {
   [KeyboardType.AlgebraAdvanced]: {
     Component: AlgebraLayout,
-    characterTypes: [6, 19, 20, 21, 22],
+    characterTypes: [
+      MyScriptMathCharacterTypes.DEFAULT_MATH,
+      MyScriptMathCharacterTypes.ALGEBRA_BASIC,
+      MyScriptMathCharacterTypes.ALGEBRA_ADVANCED,
+      MyScriptMathCharacterTypes.ALGEBRA_GREEK,
+      MyScriptMathCharacterTypes.GENERAL_MATH,
+    ],
   },
   [KeyboardType.Basic]: {
     Component: BasicLayout,
-    characterTypes: [10],
+    characterTypes: [MyScriptMathCharacterTypes.NUMBERS_WHOLE],
   },
-  [KeyboardType.BasicExtended]: {
-    Component: BasicExtendedLayout,
-    characterTypes: [1, 2, 3, 4, 11, 12, 13],
+  [KeyboardType.BasicPlus]: {
+    Component: BasicPlusLayout,
+    characterTypes: [
+      MyScriptMathCharacterTypes.DEFAULT,
+      MyScriptMathCharacterTypes.NUMBERS,
+      MyScriptMathCharacterTypes.NUMBERS_AND_X,
+      MyScriptMathCharacterTypes.NUMBERS_AND_MULTIPLICATION,
+      MyScriptMathCharacterTypes.NUMBERS_RATIONAL,
+      MyScriptMathCharacterTypes.OPERATORS,
+      MyScriptMathCharacterTypes.PERCENT,
+    ],
   },
   [KeyboardType.BasicTime]: {
     Component: TimeBasicLayout,
-    characterTypes: [15],
+    characterTypes: [MyScriptMathCharacterTypes.TIME],
   },
   [KeyboardType.BasicCurrency]: {
     Component: CurrencyBasicLayout,
-    characterTypes: [16],
+    characterTypes: [MyScriptMathCharacterTypes.CURRENCY],
   },
   [KeyboardType.BasicUnits]: {
     Component: UnitsLayout,
-    characterTypes: [5, 14],
+    characterTypes: [
+      MyScriptMathCharacterTypes.NUMBERS_AND_UNITS,
+      MyScriptMathCharacterTypes.UNITS,
+    ],
   },
-  [KeyboardType.BasicExtendedPlus]: {
-    Component: BasicExtendedPlusLayout,
-    characterTypes: [17, 18],
+  [KeyboardType.BasicPlusPlus]: {
+    Component: BasicPlusPlusLayout,
+    characterTypes: [
+      MyScriptMathCharacterTypes.GEOM_ANGLES,
+      MyScriptMathCharacterTypes.GEOM_COORDINATE,
+    ],
   },
 }
 

package/src/features/keyboard/helpers.ts

@@ -1,8 +1,18 @@
-import { KEYBOARD_GROUPS_BY_LOCALE } from './constants/keysValues'
+import { KEYBOARD_GROUPS_BY_LOCALE } from './constants/keyboardGroupsByLocale'
 import { KeyboardGroup, KeyboardType } from './types/types'
 import { Locale } from '../../shared/translation/types'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from './components/AlgebraLayout/keyboardGroups'
+import { IS_WEB } from '@magmamath/react-native-ui'
 
 export function getKeyboardGroup(locale: Locale, type: KeyboardType): KeyboardGroup {
   return KEYBOARD_GROUPS_BY_LOCALE[locale]?.[type] ?? MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP
 }
+
+export const getIsIpadOrIphoneDevice = () => {
+  if (!IS_WEB) {
+    return false
+  }
+  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,3 +1,2 @@
-export * from './types/types'
+export * from './types'
 export { Keyboard } from './components/Keyboard'
-export * from './types/MathKeysGroups'

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

@@ -1,306 +1,269 @@
 import React from 'react'
 import { COLORS } from '@magmamath/react-native-ui'
-import { AdditionIcon } from '../../../../shared/icons/MATH/AdditionIcon/AdditionIcon'
-import { SubtractionIcon } from '../../../../shared/icons/MATH/SubtractionIcon/SubtractionIcon'
-import { LessThanIcon } from '../../../../shared/icons/MATH/LessThanIcon/LessThanIcon'
-import { GreaterThanIcon } from '../../../../shared/icons/MATH/GreaterThanIcon/GreaterThanIcon'
-import { MultiplicationIcon } from '../../../../shared/icons/MATH/MultiplicationIcon/MultiplicationIcon'
-import { LessThanOrEqualIcon } from '../../../../shared/icons/MATH/LessThanOrEqualIcon/LessThanOrEqualIcon'
-import { GreaterThanOrEqualIcon } from '../../../../shared/icons/MATH/GreaterThanOrEqualIcon/GreaterThanOrEqualIcon'
-import { NotEqualIcon } from '../../../../shared/icons/MATH/NotEqualIcon/NotEqualIcon'
-import { ApproximatelyEqualIcon } from '../../../../shared/icons/MATH/ApproximatelyEqualIcon/ApproximatelyEqualIcon'
-import { DecimalPointIcon } from '../../../../shared/icons/MATH/DecimalPointIcon/DecimalPointIcon'
-import { CommaIcon } from '../../../../shared/icons/MATH/CommaIcon/CommaIcon'
-import { ColonIcon } from '../../../../shared/icons/MATH/ColonIcon/ColonIcon'
-import { CDotIcon } from '../../../../shared/icons/MATH/CDotIcon/CDotIcon'
-import { PercentIcon } from '../../../../shared/icons/MATH/PercentIcon/PercentIcon'
-import { PerMilleIcon } from '../../../../shared/icons/MATH/PerMilleIcon/PerMilleIcon'
-import { SlashIcon } from '../../../../shared/icons/MATH/SlashIcon/SlashIcon'
-import { SquarePowerIcon } from '../../../../shared/icons/MATH/SquarePowerIcon/SquarePowerIcon'
-import { CubePowerIcon } from '../../../../shared/icons/MATH/SquarePowerIcon copy/SquarePowerIcon'
-import { NthPowerIcon } from '../../../../shared/icons/MATH/NthPowerIcon/NthPowerIcon'
-import { FractionIcon } from '../../../../shared/icons/MATH/FractionIcon/FractionIcon'
-import { SquareRootIcon } from '../../../../shared/icons/MATH/SquareRootIcon/SquareRootIcon'
-import { CubeRootIcon } from '../../../../shared/icons/MATH/CubeRootIcon/CubeRootIcon'
-import { NthRootIcon } from '../../../../shared/icons/MATH/NthRootIcon/NthRootIcon'
-import { TildeIcon } from '../../../../shared/icons/MATH/TildeIcon/TildeIcon'
-import { CongruentIcon } from '../../../../shared/icons/MATH/CongruentIcon/CongruentIcon'
-import { ElementOfIcon } from '../../../../shared/icons/MATH/ElementOfIcon/ElementOfIcon'
-import { NotElementOfIcon } from '../../../../shared/icons/MATH/NotElementOfIcon/NotElementOfIcon'
-import { SubsetIcon } from '../../../../shared/icons/MATH/SubsetIcon/SubsetIcon'
-import { UnionIcon } from '../../../../shared/icons/MATH/UnionIcon/UnionIcon'
-import { IntersectionIcon } from '../../../../shared/icons/MATH/IntersectionIcon/IntersectionIcon'
-import { InfinityIcon } from '../../../../shared/icons/MATH/InfinityIcon/InfinityIcon'
-import { EmptyIcon } from '../../../../shared/icons/MATH/EmptyIcon/EmptyIcon'
-import { PlusMinusIcon } from '../../../../shared/icons/MATH/PlusMinusIcon/PlusMinusIcon'
-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 { DivisionIcon } from '../../../../shared/icons/MATH/DivisionIcon/DivisionIcon'
-import { EqualsIcon } from '../../../../shared/icons/MATH/EqualsIcon/EqualsIcon'
-import { AbsoluteValueIcon } from '../../../../shared/icons/MATH/AbsoluteValueIcon/AbsoluteValueIcon'
-import { IntervalIcon } from '../../../../shared/icons/MATH/IntervalIcon/IntervalIcon'
+import { AdditionIcon } from '../../../../shared/icons/keyboard/AdditionIcon/AdditionIcon'
+import { SubtractionIcon } from '../../../../shared/icons/keyboard/SubtractionIcon/SubtractionIcon'
+import { LessThanIcon } from '../../../../shared/icons/keyboard/LessThanIcon/LessThanIcon'
+import { GreaterThanIcon } from '../../../../shared/icons/keyboard/GreaterThanIcon/GreaterThanIcon'
+import { MultiplicationIcon } from '../../../../shared/icons/keyboard/MultiplicationIcon/MultiplicationIcon'
+import { LessThanOrEqualIcon } from '../../../../shared/icons/keyboard/LessThanOrEqualIcon/LessThanOrEqualIcon'
+import { GreaterThanOrEqualIcon } from '../../../../shared/icons/keyboard/GreaterThanOrEqualIcon/GreaterThanOrEqualIcon'
+import { NotEqualIcon } from '../../../../shared/icons/keyboard/NotEqualIcon/NotEqualIcon'
+import { ApproximatelyEqualIcon } from '../../../../shared/icons/keyboard/ApproximatelyEqualIcon/ApproximatelyEqualIcon'
+import { DecimalPointIcon } from '../../../../shared/icons/keyboard/DecimalPointIcon/DecimalPointIcon'
+import { CommaIcon } from '../../../../shared/icons/keyboard/CommaIcon/CommaIcon'
+import { ColonIcon } from '../../../../shared/icons/keyboard/ColonIcon/ColonIcon'
+import { CDotIcon } from '../../../../shared/icons/keyboard/CDotIcon/CDotIcon'
+import { PercentIcon } from '../../../../shared/icons/keyboard/PercentIcon/PercentIcon'
+import { PerMilleIcon } from '../../../../shared/icons/keyboard/PerMilleIcon/PerMilleIcon'
+import { SlashIcon } from '../../../../shared/icons/keyboard/SlashIcon/SlashIcon'
+import { SquarePowerIcon } from '../../../../shared/icons/keyboard/SquarePowerIcon/SquarePowerIcon'
+import { CubePowerIcon } from '../../../../shared/icons/keyboard/SquarePowerIcon copy/SquarePowerIcon'
+import { NthPowerIcon } from '../../../../shared/icons/keyboard/NthPowerIcon/NthPowerIcon'
+import { FractionIcon } from '../../../../shared/icons/keyboard/FractionIcon/FractionIcon'
+import { SquareRootIcon } from '../../../../shared/icons/keyboard/SquareRootIcon/SquareRootIcon'
+import { CubeRootIcon } from '../../../../shared/icons/keyboard/CubeRootIcon/CubeRootIcon'
+import { NthRootIcon } from '../../../../shared/icons/keyboard/NthRootIcon/NthRootIcon'
+import { TildeIcon } from '../../../../shared/icons/keyboard/TildeIcon/TildeIcon'
+import { CongruentIcon } from '../../../../shared/icons/keyboard/CongruentIcon/CongruentIcon'
+import { ElementOfIcon } from '../../../../shared/icons/keyboard/ElementOfIcon/ElementOfIcon'
+import { NotElementOfIcon } from '../../../../shared/icons/keyboard/NotElementOfIcon/NotElementOfIcon'
+import { SubsetIcon } from '../../../../shared/icons/keyboard/SubsetIcon/SubsetIcon'
+import { UnionIcon } from '../../../../shared/icons/keyboard/UnionIcon/UnionIcon'
+import { IntersectionIcon } from '../../../../shared/icons/keyboard/IntersectionIcon/IntersectionIcon'
+import { InfinityIcon } from '../../../../shared/icons/keyboard/InfinityIcon/InfinityIcon'
+import { EmptyIcon } from '../../../../shared/icons/keyboard/EmptyIcon/EmptyIcon'
+import { PlusMinusIcon } from '../../../../shared/icons/keyboard/PlusMinusIcon/PlusMinusIcon'
+import { SigmaSumIcon } from '../../../../shared/icons/keyboard/SigmaSumIcon/SigmaSumIcon'
+import { ParenthesesIcon } from '../../../../shared/icons/keyboard/ParenthesesIcon/ParenthesesIcon'
+import { OrderedPairIcon } from '../../../../shared/icons/keyboard/OrderedPairIcon/OrderedPairIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
+import { DivisionIcon } from '../../../../shared/icons/keyboard/DivisionIcon/DivisionIcon'
+import { EqualsIcon } from '../../../../shared/icons/keyboard/EqualsIcon/EqualsIcon'
+import { AbsoluteValueIcon } from '../../../../shared/icons/keyboard/AbsoluteValueIcon/AbsoluteValueIcon'
+import { IntervalIcon } from '../../../../shared/icons/keyboard/IntervalIcon/IntervalIcon'
+import { createMathKeysGroup } from './helpers'
 
-export enum MathBasicOperator {
-  ADDITION = 'ADDITION',
-  SUBTRACTION = 'SUBTRACTION',
-  MULTIPLICATION = 'MULTIPLICATION',
-  DIVISION = 'DIVISION',
-  LESS_THAN = 'LESS_THAN',
-  GREATER_THAN = 'GREATER_THAN',
-  LESS_THAN_OR_EQUAL = 'LESS_THAN_OR_EQUAL',
-  GREATER_THAN_OR_EQUAL = 'GREATER_THAN_OR_EQUAL',
-  EQUALS = 'EQUALS',
-  NOT_EQUAL = 'NOT_EQUAL',
-  APPROXIMATELY_EQUAL = 'APPROXIMATELY_EQUAL',
-  DECIMAL_POINT = 'DECIMAL_POINT',
-  COMMA = 'COMMA',
-  COLON = 'COLON',
-  C_DOT = 'C_DOT',
-  DOT = 'DOT',
-  PERCENT = 'PERCENT',
-  PERMILLE = 'PERMILLE',
-  SLASH = 'SLASH',
-  NTH_POWER = 'NTH_POWER',
-  SQUARE_POWER = 'SQUARE_POWER',
-  CUBE_POWER = 'CUBE_POWER',
-  FRACTION = 'FRACTION',
-  SQUARE_ROOT = 'SQUARE_ROOT',
-  CUBE_ROOT = 'CUBE_ROOT',
-  NTH_ROOT = 'NTH_ROOT',
-  SIMILARITY = 'SIMILARITY',
-  CONGRUENT = 'CONGRUENT',
-  ELEMENT_OF = 'ELEMENT_OF',
-  NOT_ELEMENT_OF = 'NOT_ELEMENT_OF',
-  SUBSET = 'SUBSET',
-  INTERSECTION = 'INTERSECTION',
-  UNION = 'UNION',
-  INFINITY = 'INFINITY',
-  EMPTY = 'EMPTY',
-  PLUS_MINUS = 'PLUS_MINUS',
-  SUBSCRIPT_VARIABLE = 'SUBSCRIPT_VARIABLE',
-  SUM = 'SUM',
-  PARENTHESES = 'PARENTHESES',
-  ORDERED_PAIR = 'ORDERED_PAIR',
-  ABSOLUTE_VALUE = 'ABSOLUTE_VALUE',
-  INTERVAL = 'INTERVAL',
-}
-
-export const MATH_BASIC_OPERATORS: MathKeysGroup<typeof MathBasicOperator> = {
-  [MathBasicOperator.ADDITION]: {
+export const MATH_BASIC_OPERATORS = createMathKeysGroup({
+  ADDITION: {
     icon: <AdditionIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '+',
     katexValue: '+',
   },
-  [MathBasicOperator.SUBTRACTION]: {
+  SUBTRACTION: {
     icon: <SubtractionIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '-',
     katexValue: '-',
   },
-  [MathBasicOperator.MULTIPLICATION]: {
+  MULTIPLICATION: {
     icon: <MultiplicationIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\times',
-    katexValue: 'x',
+    katexValue: '×',
   },
-  [MathBasicOperator.DIVISION]: {
+  DIVISION: {
     icon: <DivisionIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\div',
     katexValue: '÷',
   },
-  [MathBasicOperator.LESS_THAN]: {
+  LESS_THAN: {
     icon: <LessThanIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '<',
     katexValue: 'LESS_THAN',
+    spreadsheetValue: '<',
+    mathQuillValue: '<',
   },
-  [MathBasicOperator.GREATER_THAN]: {
+  GREATER_THAN: {
     icon: <GreaterThanIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '>',
     katexValue: 'GREATER_THAN',
+    spreadsheetValue: '>',
+    mathQuillValue: '>',
   },
-  [MathBasicOperator.LESS_THAN_OR_EQUAL]: {
+  LESS_THAN_OR_EQUAL: {
     icon: <LessThanOrEqualIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\leq',
     katexValue: '≤',
   },
-  [MathBasicOperator.GREATER_THAN_OR_EQUAL]: {
+  GREATER_THAN_OR_EQUAL: {
     icon: <GreaterThanOrEqualIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\geq',
     katexValue: '≥',
   },
-  [MathBasicOperator.EQUALS]: {
+  EQUALS: {
     icon: <EqualsIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '=',
     katexValue: '=',
   },
-  [MathBasicOperator.NOT_EQUAL]: {
+  NOT_EQUAL: {
     icon: <NotEqualIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\neq',
     katexValue: '≠',
   },
-  [MathBasicOperator.APPROXIMATELY_EQUAL]: {
+  APPROXIMATELY_EQUAL: {
     icon: <ApproximatelyEqualIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\approx',
     katexValue: '≈',
   },
-  [MathBasicOperator.DECIMAL_POINT]: {
+  DECIMAL_POINT: {
     icon: <DecimalPointIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '.',
     katexValue: '.',
   },
-  [MathBasicOperator.COMMA]: {
+  COMMA: {
     icon: <CommaIcon {...DEFAULT_KEY_ICON_PROPS} size={22} />,
     mathliveValue: ',',
     katexValue: ',',
   },
-  [MathBasicOperator.COLON]: {
+  COLON: {
     icon: <ColonIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: ':',
     katexValue: ':',
   },
-  [MathBasicOperator.C_DOT]: {
+  C_DOT: {
     icon: <CDotIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\cdot',
     katexValue: '⋅',
   },
-  [MathBasicOperator.DOT]: {
+  DOT: {
     label: '.',
     mathliveValue: '.',
     katexValue: '.',
   },
-  [MathBasicOperator.PERCENT]: {
+  PERCENT: {
     icon: <PercentIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\%',
     katexValue: '%',
   },
-  [MathBasicOperator.PERMILLE]: {
+  PERMILLE: {
     icon: <PerMilleIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '‰',
     katexValue: '‰',
   },
-  [MathBasicOperator.SLASH]: {
+  SLASH: {
     icon: <SlashIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '/',
     katexValue: '/',
   },
-  [MathBasicOperator.SQUARE_POWER]: {
+  SQUARE_POWER: {
     icon: <SquarePowerIcon {...DEFAULT_KEY_ICON_PROPS} size={20} extraColor={COLORS.NEUTRAL_6} />,
     mathliveValue: '^{2}',
     katexValue: 'POWER_SQUARE',
+    mathQuillValue: '^{2}',
     isSpecialSymbol: true,
   },
-  [MathBasicOperator.CUBE_POWER]: {
+  CUBE_POWER: {
     icon: <CubePowerIcon {...DEFAULT_KEY_ICON_PROPS} size={20} extraColor={COLORS.NEUTRAL_6} />,
     mathliveValue: '^{3}',
     katexValue: 'POWER_CUBE',
     isSpecialSymbol: true,
+    mathQuillValue: '^{3}',
   },
-  [MathBasicOperator.NTH_POWER]: {
+  NTH_POWER: {
     icon: <NthPowerIcon size={18} color={COLORS.NEUTRAL_6} />,
     mathliveValue: '^{\\placeholder}',
     katexValue: 'POWER',
+    mathQuillValue: '^',
     isSpecialSymbol: true,
   },
-  [MathBasicOperator.FRACTION]: {
+  FRACTION: {
     icon: <FractionIcon {...DEFAULT_KEY_ICON_PROPS} size={25} extraColor={COLORS.NEUTRAL_6} />,
     mathliveValue: '\\frac{\\placeholder{}}{\\placeholder{}}',
     katexValue: 'FRACTION',
+    mathQuillValue: '\\\\frac',
     isSpecialSymbol: true,
   },
-  [MathBasicOperator.SQUARE_ROOT]: {
+  SQUARE_ROOT: {
     icon: <SquareRootIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\sqrt{\\placeholder{}}',
     katexValue: '√',
   },
-  [MathBasicOperator.CUBE_ROOT]: {
+  CUBE_ROOT: {
     icon: <CubeRootIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\sqrt[3]{\\placeholder{}}',
     katexValue: '∛',
   },
-  [MathBasicOperator.NTH_ROOT]: {
+  NTH_ROOT: {
     icon: <NthRootIcon {...DEFAULT_KEY_ICON_PROPS} extraColor={COLORS.NEUTRAL_6} size={18} />,
     mathliveValue: '\\sqrt[\\placeholder{}]{\\placeholder{}}',
     katexValue: 'ⁿ√',
   },
-  [MathBasicOperator.SIMILARITY]: {
+  SIMILARITY: {
     icon: <TildeIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\sim',
     katexValue: '∼',
   },
-  [MathBasicOperator.CONGRUENT]: {
+  CONGRUENT: {
     icon: <CongruentIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\cong',
     katexValue: '≅',
   },
-  [MathBasicOperator.ELEMENT_OF]: {
+  ELEMENT_OF: {
     icon: <ElementOfIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\in',
     katexValue: '∈',
   },
-  [MathBasicOperator.NOT_ELEMENT_OF]: {
+  NOT_ELEMENT_OF: {
     icon: <NotElementOfIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\notin',
     katexValue: '∉',
   },
-  [MathBasicOperator.SUBSET]: {
+  SUBSET: {
     icon: <SubsetIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\subset',
     katexValue: '⊂',
   },
-  [MathBasicOperator.UNION]: {
+  UNION: {
     icon: <UnionIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\cup',
     katexValue: '∪',
   },
-  [MathBasicOperator.INTERSECTION]: {
+  INTERSECTION: {
     icon: <IntersectionIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\cap',
     katexValue: '∩',
   },
-  [MathBasicOperator.INFINITY]: {
+  INFINITY: {
     icon: <InfinityIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\infty',
     katexValue: '∞',
   },
-  [MathBasicOperator.EMPTY]: {
+  EMPTY: {
     icon: <EmptyIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\emptyset',
     katexValue: '∅',
   },
-  [MathBasicOperator.PLUS_MINUS]: {
+  PLUS_MINUS: {
     icon: <PlusMinusIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\pm$',
     katexValue: '±',
   },
-  [MathBasicOperator.SUBSCRIPT_VARIABLE]: {
+  SUBSCRIPT_VARIABLE: {
     label: 'aₙ',
     mathliveValue: '$a_n$',
     katexValue: 'aₙ',
   },
-  [MathBasicOperator.SUM]: {
+  SUM: {
     icon: <SigmaSumIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\sum_{\\placeholder{}}^{\\placeholder{}}$',
     katexValue: 'Σ',
   },
-  [MathBasicOperator.PARENTHESES]: {
+  PARENTHESES: {
     icon: <ParenthesesIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\left(#@\\right)$',
     katexValue: '( )',
   },
-  [MathBasicOperator.ORDERED_PAIR]: {
+  ORDERED_PAIR: {
     icon: <OrderedPairIcon {...DEFAULT_KEY_ICON_PROPS} size={20} extraColor={COLORS.NEUTRAL_6} />,
     mathliveValue: '$\\left(\\placeholder{},\\placeholder{}\\right)$',
     katexValue: '( , )',
   },
-  [MathBasicOperator.ABSOLUTE_VALUE]: {
+  ABSOLUTE_VALUE: {
     icon: <AbsoluteValueIcon {...DEFAULT_KEY_ICON_PROPS} size={18} />,
     mathliveValue: '$\\left|\\right|$',
     katexValue: '| |',
   },
-  [MathBasicOperator.INTERVAL]: {
+  INTERVAL: {
     icon: <IntervalIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '$\\left[, \\right]$',
     katexValue: '[ , ]',
   },
-}
+})