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

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

@@ -0,0 +1,36 @@
+import { COLORS, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+
+export const DEFAULT_KEY_ICON_PROPS = {
+  size: 16,
+  color: COLORS.NEUTRAL_9,
+} as const
+
+export const MOBILE_LAYOUT_WIDTH = 1200
+
+export const KEYBOARD_DEFAULT_TEXT_STYLE = {
+  fontSize: 14,
+  fontWeight: 700,
+} as const
+
+export const KEYBOARD_STYLE_PRESETS = {
+  SMALL: {
+    button: { width: IS_WEB ? 40 : 44 },
+    container: IS_MOBILE ? { flexBasis: 48 } : undefined,
+    text: KEYBOARD_DEFAULT_TEXT_STYLE,
+  },
+  MEDIUM: {
+    button: { width: IS_WEB ? 45 : 51 },
+    container: IS_MOBILE ? { flexBasis: 55 } : undefined,
+    text: KEYBOARD_DEFAULT_TEXT_STYLE,
+  },
+  LARGE: {
+    button: { width: IS_WEB ? 48 : 55 },
+    container: IS_MOBILE ? { flexBasis: 59 } : undefined,
+    text: KEYBOARD_DEFAULT_TEXT_STYLE,
+  },
+  XL: {
+    button: { width: IS_WEB ? 52 : 54 },
+    container: IS_MOBILE ? { flexBasis: 60 } : undefined,
+    text: KEYBOARD_DEFAULT_TEXT_STYLE,
+  },
+}

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

@@ -0,0 +1,117 @@
+import {
+  KeyboardConfig,
+  KeyboardCurrencyVariant,
+  KeyboardPreset,
+  KeyboardTimeVariant,
+} from '@magmamath/frontend-config'
+import {
+  KeyboardGroup,
+  KeyboardRowsGroup,
+  KeyboardType,
+  KeyboardUnitsGroupType,
+  ResolvedKeyboard,
+} from '../types/types'
+import {
+  KEYBOARD_ALGEBRA,
+  KEYBOARD_AREA,
+  KEYBOARD_BASIC,
+  KEYBOARD_BASIC_PLUS,
+  KEYBOARD_BASIC_PLUS_PLUS,
+  KEYBOARD_CURRENCY,
+  KEYBOARD_LENGTH,
+  KEYBOARD_NUMPAD,
+  KEYBOARD_TIME,
+  KEYBOARD_TIME_UNITS,
+  KEYBOARD_UNDERLINED,
+  KEYBOARD_VOLUME,
+  KEYBOARD_WEIGHT,
+} from './groups'
+
+type KeyboardPresetConfig = {
+  operators: Record<
+    Exclude<KeyboardType, KeyboardType.BasicTime | KeyboardType.BasicCurrency>,
+    KeyboardGroup
+  >
+  units: Record<KeyboardUnitsGroupType, KeyboardRowsGroup>
+}
+
+const PRESET_DOT_MIXED: KeyboardPresetConfig = {
+  operators: {
+    [KeyboardType.Basic]: KEYBOARD_BASIC.DOT,
+    [KeyboardType.BasicPlus]: KEYBOARD_BASIC_PLUS.DOT,
+    [KeyboardType.BasicPlusMobile]: KEYBOARD_BASIC_PLUS.MOBILE_DOT,
+    [KeyboardType.BasicPlusPlus]: KEYBOARD_BASIC_PLUS_PLUS.DOT,
+    [KeyboardType.BasicPlusPlusMobile]: KEYBOARD_BASIC_PLUS_PLUS.MOBILE_DOT,
+    [KeyboardType.BasicUnits]: { keys: KEYBOARD_LENGTH.MIXED.keys[0] },
+    [KeyboardType.AlgebraAdvanced]: KEYBOARD_ALGEBRA,
+    [KeyboardType.Numpad]: KEYBOARD_NUMPAD.DOT,
+    [KeyboardType.Underlined]: KEYBOARD_UNDERLINED,
+  },
+  units: {
+    [KeyboardUnitsGroupType.LENGTH]: KEYBOARD_LENGTH.MIXED,
+    [KeyboardUnitsGroupType.AREA]: KEYBOARD_AREA.MIXED,
+    [KeyboardUnitsGroupType.VOLUME]: KEYBOARD_VOLUME.MIXED,
+    [KeyboardUnitsGroupType.WEIGHT]: KEYBOARD_WEIGHT.MIXED,
+    [KeyboardUnitsGroupType.TIME]: KEYBOARD_TIME_UNITS.DEFAULT,
+  },
+}
+
+const PRESET_COMMA_METRIC: KeyboardPresetConfig = {
+  operators: {
+    [KeyboardType.Basic]: KEYBOARD_BASIC.COMMA,
+    [KeyboardType.BasicPlus]: KEYBOARD_BASIC_PLUS.COMMA,
+    [KeyboardType.BasicPlusMobile]: KEYBOARD_BASIC_PLUS.MOBILE_COMMA,
+    [KeyboardType.BasicPlusPlus]: KEYBOARD_BASIC_PLUS_PLUS.COMMA,
+    [KeyboardType.BasicPlusPlusMobile]: KEYBOARD_BASIC_PLUS_PLUS.MOBILE_COMMA,
+    [KeyboardType.BasicUnits]: { keys: KEYBOARD_LENGTH.METRIC.keys[0] },
+    [KeyboardType.AlgebraAdvanced]: KEYBOARD_ALGEBRA,
+    [KeyboardType.Numpad]: KEYBOARD_NUMPAD.COMMA,
+    [KeyboardType.Underlined]: KEYBOARD_UNDERLINED,
+  },
+  units: {
+    [KeyboardUnitsGroupType.LENGTH]: KEYBOARD_LENGTH.METRIC,
+    [KeyboardUnitsGroupType.AREA]: KEYBOARD_AREA.METRIC,
+    [KeyboardUnitsGroupType.VOLUME]: KEYBOARD_VOLUME.METRIC,
+    [KeyboardUnitsGroupType.WEIGHT]: KEYBOARD_WEIGHT.METRIC,
+    [KeyboardUnitsGroupType.TIME]: KEYBOARD_TIME_UNITS.DEFAULT,
+  },
+}
+
+const PRESET_DOT_MIXED_ALT: KeyboardPresetConfig = {
+  operators: PRESET_DOT_MIXED.operators,
+  units: {
+    ...PRESET_DOT_MIXED.units,
+    [KeyboardUnitsGroupType.VOLUME]: KEYBOARD_VOLUME.MIXED_ALT,
+  },
+}
+
+const PRESET_MAP: Record<KeyboardPreset, KeyboardPresetConfig> = {
+  [KeyboardPreset.DOT_MIXED]: PRESET_DOT_MIXED,
+  [KeyboardPreset.DOT_MIXED_ALT]: PRESET_DOT_MIXED_ALT,
+  [KeyboardPreset.COMMA_METRIC]: PRESET_COMMA_METRIC,
+}
+
+const CURRENCY_MAP: Record<KeyboardCurrencyVariant, KeyboardGroup> = {
+  [KeyboardCurrencyVariant.DOLLAR_CENT]: KEYBOARD_CURRENCY.DOLLAR_CENT,
+  [KeyboardCurrencyVariant.POUND_PENCE]: KEYBOARD_CURRENCY.POUND_PENCE,
+  [KeyboardCurrencyVariant.KRONE_EURO_POUND]: KEYBOARD_CURRENCY.KRONE_EURO_POUND,
+  [KeyboardCurrencyVariant.EURO_DOLLAR_POUND]: KEYBOARD_CURRENCY.EURO_DOLLAR_POUND,
+}
+
+const TIME_MAP: Record<KeyboardTimeVariant, KeyboardGroup> = {
+  [KeyboardTimeVariant.H12]: KEYBOARD_TIME.H12,
+  [KeyboardTimeVariant.H24]: KEYBOARD_TIME.H24,
+}
+
+export const resolveKeyboard = (config: KeyboardConfig): ResolvedKeyboard => {
+  const preset = PRESET_MAP[config.preset]
+
+  return {
+    operators: {
+      ...preset.operators,
+      [KeyboardType.BasicCurrency]: CURRENCY_MAP[config.currencyVariant],
+      [KeyboardType.BasicTime]: TIME_MAP[config.timeVariant],
+    },
+    units: preset.units,
+  }
+}

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

@@ -1,4 +1,3 @@
-import { KeyboardType } from '../types/types'
 import { AlgebraLayout } from '../components/AlgebraLayout/AlgebraLayout'
 import { BasicLayout } from '../components/BasicLayout/BasicLayout'
 import { BasicPlusLayout } from '../components/BasicPlusLayout/BasicPlusLayout'
@@ -7,7 +6,8 @@ import { CurrencyBasicLayout } from '../components/BasicLayout/CurrencyBasicLayo
 import { UnitsLayout } from '../components/UnitsLayout/UnitsLayout'
 import { BasicPlusPlusLayout } from '../components/BasicPlusPlusLayout/BasicPlusPlusLayout'
 import { MyScriptMathCharacterTypes } from '../../../types/characterTypes'
-import { MOBILE_LAYOUT_WIDTH } from './constants'
+import { MOBILE_LAYOUT_WIDTH } from './keyboard.constants'
+import { KeyboardType } from '../types/types'
 
 export const KEYBOARD_LAYOUTS = {
   [KeyboardType.AlgebraAdvanced]: {

package/src/features/keyboard/constants/keys/basic.constants.tsx

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

package/src/features/keyboard/constants/keys/calculus.constants.tsx

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

package/src/features/keyboard/constants/keys/geometry.constants.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { MathOperatorsGroup } from '../../types/types'
+import { DegreeIcon } from '../../../../shared/icons/keyboard/DegreeIcon'
+import { AngleIcon } from '../../../../shared/icons/keyboard/AngleIcon'
+import { ParallelIcon } from '../../../../shared/icons/keyboard/ParallelIcon'
+import { PerpendicularIcon } from '../../../../shared/icons/keyboard/PerpendicularIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../keyboard.constants'
+
+export const MATH_GEOMETRY_SYMBOLS: MathOperatorsGroup = {
+  DEGREE: {
+    icon: <DegreeIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\degree',
+    katexValue: '°',
+  },
+  ANGLE: {
+    icon: <AngleIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\angle',
+    katexValue: '∠',
+  },
+  PARALLEL: {
+    icon: <ParallelIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\parallel',
+    katexValue: '∥',
+  },
+  PERPENDICULAR: {
+    icon: <PerpendicularIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\perp',
+    katexValue: '⊥',
+  },
+  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',
+      },
+    },
+  },
+} as const

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

@@ -0,0 +1,8 @@
+export * from './basic.constants'
+export * from './calculus.constants'
+export * from './geometry.constants'
+export * from './special.constants'
+export * from './symbols.constants'
+export * from './text.constants'
+export * from './trigonometric.constants'
+export * from './units.constants'

package/src/features/keyboard/constants/keys/special.constants.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { MathOperatorsGroup } from '../../types/types'
+import { BackspaceIcon } from '../../../../shared/icons/keyboard/BackspaceIcon'
+import { UnderlinedTenIcon } from '../../../../shared/icons/keyboard/UnderlinedTenIcon'
+import { UnderlinedOneIcon } from '../../../../shared/icons/keyboard/UnderlinedOneIcon'
+import { UnderlinedUIcon } from '../../../../shared/icons/keyboard/UnderlinedUIcon'
+import { DEFAULT_KEY_ICON_PROPS } from '../keyboard.constants'
+
+export const MATH_SPECIAL_OPERATORS: MathOperatorsGroup = {
+  LIM: {
+    label: 'lim',
+    mathliveValue: '$\\lim_{\\placeholder{}}^{\\placeholder{}}$',
+    katexValue: 'lim',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
+  },
+  LN: {
+    label: 'ln',
+    mathliveValue: '$\\ln(\\placeholder{})$',
+    katexValue: 'ln',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
+  },
+  LOG: {
+    label: 'log',
+    mathliveValue: '$\\log_{\\placeholder{}}$',
+    katexValue: 'log',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
+  },
+  LOG10: {
+    label: 'log10',
+    mathliveValue: '$\\log_{10}(\\placeholder{})$',
+    katexValue: 'log₁₀',
+    style: {
+      text: {
+        fontSize: 11,
+      },
+    },
+  },
+  BACKSPACE: {
+    icon: <BackspaceIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
+    mathliveValue: 'backspace',
+    katexValue: 'backspace',
+  },
+  UNDERLINED_TEN: {
+    icon: <UnderlinedTenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{10}',
+    katexValue: '10̲',
+    spreadsheetValue: 'TEN',
+  },
+  UNDERLINED_ONE: {
+    icon: <UnderlinedOneIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{1}',
+    katexValue: '1̲',
+    spreadsheetValue: 'ONE_FOOT_NOTE',
+  },
+  UNDERLINED_U: {
+    icon: <UnderlinedUIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{u}',
+    katexValue: 'U̲',
+    spreadsheetValue: 'FRACTION',
+  },
+} as const