@magmamath/students-features 0.9.0-rc26 → 0.9.0-rc4

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

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

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

@@ -1,33 +1,42 @@
 import React from 'react'
+import { MathKeysGroup } from '../../types'
 import { COLORS } from '@magmamath/react-native-ui'
-import { IntegralIcon } from '../../../../shared/icons/keyboard/IntegralIcon/IntegralIcon'
-import { DoubleIntegralIcon } from '../../../../shared/icons/keyboard/DoubleIntegralIcon/DoubleIntegralIcon'
-import { DefiniteIntegralIcon } from '../../../../shared/icons/keyboard/DefiniteIntegralIcon/DefiniteIntegralIcon'
-import { DerivativeIcon } from '../../../../shared/icons/keyboard/DerivativeIcon/DerivativeIcon'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
-import { createMathKeysGroup } from './helpers'
+import { IntegralIcon } from '../../../../shared/icons/MATH/IntegralIcon/IntegralIcon'
+import { DoubleIntegralIcon } from '../../../../shared/icons/MATH/DoubleIntegralIcon/DoubleIntegralIcon'
+import { DefiniteIntegralIcon } from '../../../../shared/icons/MATH/DefiniteIntegralIcon/DefiniteIntegralIcon'
+import { DerivativeIcon } from '../../../../shared/icons/MATH/DerivativeIcon/DerivativeIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
 
-export const MATH_INTEGRALS_AND_DERIVATIVES = createMathKeysGroup({
-  INTEGRAL: {
+export enum MathIntegralsAndDerivativesOperator {
+  INTEGRAL = 'INTEGRAL',
+  DOUBLE_INTEGRAL = 'DOUBLEINTEGRAL',
+  DEFINITE_INTEGRAL = 'DEFINITEINTEGRAL',
+  DERIVATIVE = 'DERIVATIVE',
+}
+
+export const MATH_INTEGRALS_AND_DERIVATIVES: MathKeysGroup<
+  typeof MathIntegralsAndDerivativesOperator
+> = {
+  [MathIntegralsAndDerivativesOperator.INTEGRAL]: {
     icon: <IntegralIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\int',
     katexValue: '∫',
   },
-  DOUBLEINTEGRAL: {
+  [MathIntegralsAndDerivativesOperator.DOUBLE_INTEGRAL]: {
     icon: <DoubleIntegralIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
     mathliveValue: '$\\iint_{\\placeholder{}}^{\\placeholder{}}$',
     katexValue: '∬',
   },
-  DEFINITEINTEGRAL: {
+  [MathIntegralsAndDerivativesOperator.DEFINITE_INTEGRAL]: {
     icon: (
       <DefiniteIntegralIcon {...DEFAULT_KEY_ICON_PROPS} size={20} extraColor={COLORS.NEUTRAL_6} />
     ),
-    mathliveValue: '\\int_{\\placeholder{lower}}^{\\placeholder{upper}}',
-    katexValue: '\\int_{a}^{b}',
+    mathliveValue: '$\\int_{#@}^{\\placeholder{}}$',
+    katexValue: '∫',
   },
-  DERIVATIVE: {
+  [MathIntegralsAndDerivativesOperator.DERIVATIVE]: {
     icon: <DerivativeIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
     mathliveValue: '$\\frac{dx}{dy}$',
     katexValue: 'd/dx',
   },
-})
+}

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

@@ -1,48 +1,43 @@
 import React from 'react'
-import { DegreeIcon } from '../../../../shared/icons/keyboard/DegreeIcon/DegreeIcon'
-import { AngleIcon } from '../../../../shared/icons/keyboard/AngleIcon/AngleIcon'
-import { ParallelIcon } from '../../../../shared/icons/keyboard/ParallelIcon/ParallelIcon'
-import { PerpendicularIcon } from '../../../../shared/icons/keyboard/PerpendicularIcon/PerpendicularIcon'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
-import { createMathKeysGroup } from './helpers'
+import { DegreeIcon } from '../../../../shared/icons/MATH/DegreeIcon/DegreeIcon'
+import { AngleIcon } from '../../../../shared/icons/MATH/AngleIcon/AngleIcon'
+import { ParallelIcon } from '../../../../shared/icons/MATH/ParallelIcon/ParallelIcon'
+import { PerpendicularIcon } from '../../../../shared/icons/MATH/PerpendicularIcon/PerpendicularIcon'
+import { MathKeysGroup } from '../../types'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
 
-export const MATH_GEOMETRY_SYMBOLS = createMathKeysGroup({
-  DEGREE: {
+export enum MathGeometrySymbols {
+  DEGREE = 'DEGREE',
+  ANGLE = 'ANGLE',
+  PARALLEL = 'PARALLEL',
+  PERPENDICULAR = 'PERPENDICULAR',
+  RADIAN = 'RADIAN',
+}
+
+export const MATH_GEOMETRY_SYMBOLS: MathKeysGroup<typeof MathGeometrySymbols> = {
+  [MathGeometrySymbols.DEGREE]: {
     icon: <DegreeIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\degree',
     katexValue: '°',
   },
-  ANGLE: {
+  [MathGeometrySymbols.ANGLE]: {
     icon: <AngleIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\angle',
     katexValue: '∠',
   },
-  PARALLEL: {
+  [MathGeometrySymbols.PARALLEL]: {
     icon: <ParallelIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\parallel',
     katexValue: '∥',
   },
-  PERPENDICULAR: {
+  [MathGeometrySymbols.PERPENDICULAR]: {
     icon: <PerpendicularIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\perp',
     katexValue: '⊥',
   },
-  RADIAN: {
+  [MathGeometrySymbols.RADIAN]: {
     label: 'rad',
     mathliveValue: 'rad',
     katexValue: 'rad',
-    style: {
-      text: {
-        fontSize: 14,
-        fontWeight: 700,
-      },
-      button: {
-        width: IS_MOBILE ? 50 : 40,
-      },
-      container: {
-        flexBasis: IS_MOBILE ? 55 : 'auto',
-      },
-    },
   },
-})
+}

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

@@ -1,52 +1,40 @@
 import React from 'react'
-import { DEFAULT_KEY_ICON_PROPS } from '../../constants/constants'
-import { BackspaceIcon } from '../../../../shared/icons/keyboard/BackspaceIcon/BackspaceIcon'
-import { createMathKeysGroup } from './helpers'
+import { MathKeysGroup } from '../../types'
+import { DEFAULT_KEY_ICON_PROPS } from '../../constants'
+import { BackspaceIcon } from '../../../../shared/icons/MATH/BackspaceIcon/BackspaceIcon'
 
-export const MATH_SPECIAL_OPERATORS = createMathKeysGroup({
-  LIM: {
+export enum MathSpecialOperator {
+  LIM = 'LIM',
+  LN = 'LN',
+  LOG = 'LOG',
+  LOG10 = 'LOG10',
+  BACKSPACE = 'BACKSPACE',
+}
+
+export const MATH_SPECIAL_OPERATORS: MathKeysGroup<typeof MathSpecialOperator> = {
+  [MathSpecialOperator.LIM]: {
     label: 'lim',
     mathliveValue: '$\\lim_{\\placeholder{}}^{\\placeholder{}}$',
     katexValue: 'lim',
-    style: {
-      text: {
-        fontSize: 11,
-      },
-    },
   },
-  LN: {
+  [MathSpecialOperator.LN]: {
     label: 'ln',
     mathliveValue: '$\\ln(\\placeholder{})$',
     katexValue: 'ln',
-    style: {
-      text: {
-        fontSize: 11,
-      },
-    },
   },
-  LOG: {
+  [MathSpecialOperator.LOG]: {
     label: 'log',
     mathliveValue: '$\\log_{\\placeholder{}}$',
     katexValue: 'log',
-    style: {
-      text: {
-        fontSize: 11,
-      },
-    },
   },
-  LOG10: {
+  [MathSpecialOperator.LOG10]: {
     label: 'log10',
     mathliveValue: '$\\log_{10}(\\placeholder{})$',
     katexValue: 'log₁₀',
-    style: {
-      text: {
-        fontSize: 11,
-      },
-    },
   },
-  BACKSPACE: {
-    icon: <BackspaceIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+  [MathSpecialOperator.BACKSPACE]: {
+    icon: <BackspaceIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: 'backspace',
     katexValue: 'backspace',
   },
-})
+}