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

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

@@ -0,0 +1,464 @@
+import React from 'react'
+import { DEFAULT_KEY_ICON_PROPS, KEYBOARD_STYLE_PRESETS } from '../keyboard.constants'
+import { MathOperatorsGroup } from '../../types/types'
+import { KroneIcon } from '../../../../shared/icons/keyboard/KroneIcon'
+import { DollarIcon } from '../../../../shared/icons/keyboard/DollarIcon'
+import { EuroIcon } from '../../../../shared/icons/keyboard/EuroIcon'
+import { PoundIcon } from '../../../../shared/icons/keyboard/PoundIcon'
+import { YenIcon } from '../../../../shared/icons/keyboard/YenIcon'
+import { PesoIcon } from '../../../../shared/icons/keyboard/PesoIcon'
+import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon'
+
+export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
+  KRONE: {
+    icon: <KroneIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: 'Kr',
+    katexValue: 'Kr',
+  },
+  DOLLAR: {
+    icon: <DollarIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\$',
+    katexValue: '\$',
+    mathQuillValue: '\\$',
+  },
+  EURO: {
+    icon: <EuroIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '€',
+    katexValue: '€',
+  },
+  POUND: {
+    icon: <PoundIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '£',
+    katexValue: '£',
+  },
+  YEN: {
+    icon: <YenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '¥',
+    katexValue: '¥',
+  },
+  PESO: {
+    icon: <PesoIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: 'p',
+    katexValue: 'p',
+  },
+  CENT: {
+    icon: <CentIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '¢',
+    katexValue: '¢',
+  },
+} as const
+
+export const MATH_LENGTH_UNITS: MathOperatorsGroup = {
+  KILOMETER: {
+    label: 'km',
+    mathliveValue: 'km',
+    katexValue: 'km',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  METER: {
+    label: 'm',
+    mathliveValue: '\\mathrm{m}',
+    katexValue: 'm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  DECIMETER: {
+    label: 'dm',
+    mathliveValue: '\\mathrm{dm}',
+    katexValue: 'dm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  CENTIMETER: {
+    label: 'cm',
+    mathliveValue: '\\mathrm{cm}',
+    katexValue: 'cm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  MILLIMETER: {
+    label: 'mm',
+    mathliveValue: '\\mathrm{mm}',
+    katexValue: 'mm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  HECTARE: {
+    label: 'ha',
+    mathliveValue: '\\mathrm{ha}',
+    katexValue: 'ha',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  INCH: {
+    label: 'in',
+    mathliveValue: '\\mathrm{in}',
+    katexValue: 'in',
+    mathQuillValue: '\\in',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  FOOT: {
+    label: 'ft',
+    mathliveValue: '\\mathrm{ft}',
+    katexValue: 'ft',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  YARD: {
+    label: 'yd',
+    mathliveValue: '\\mathrm{yd}',
+    katexValue: 'yd',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  YARDS: {
+    label: 'yds',
+    mathliveValue: '\\mathrm{yds}',
+    katexValue: 'yds',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MILE: {
+    label: 'mi',
+    mathliveValue: '\\mathrm{mi}',
+    katexValue: 'mi',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MILE_SE: {
+    label: 'mil',
+    mathliveValue: '\\mathrm{mil}',
+    katexValue: 'mil',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+} as const
+
+export const MATH_AREA_UNITS: MathOperatorsGroup = {
+  SQUARE_KILOMETER: {
+    label: 'km²',
+    mathliveValue: '\\mathrm{km}^2',
+    katexValue: 'km^2',
+    mathQuillValue: 'km^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_METER: {
+    label: 'm²',
+    mathliveValue: '\\mathrm{m}^2',
+    katexValue: 'm^2',
+    mathQuillValue: 'm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  SQUARE_DECIMETER: {
+    label: 'dm²',
+    mathliveValue: '\\mathrm{dm}^2',
+    katexValue: 'dm^2',
+    mathQuillValue: 'dm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_CENTIMETER: {
+    label: 'cm²',
+    mathliveValue: '\\mathrm{cm}^2',
+    katexValue: 'cm^2',
+    mathQuillValue: 'cm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_MILLIMETER: {
+    label: 'mm²',
+    mathliveValue: '\\mathrm{mm}^2',
+    katexValue: 'mm^2',
+    mathQuillValue: 'mm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_INCH: {
+    label: 'in²',
+    mathliveValue: '\\mathrm{in}^2',
+    katexValue: 'in^2',
+    mathQuillValue: 'in^{2}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  SQUARE_FOOT: {
+    label: 'ft²',
+    mathliveValue: '\\mathrm{ft}^2',
+    katexValue: 'ft^2',
+    mathQuillValue: 'ft^{2}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  SQUARE_MILE: {
+    label: 'mi²',
+    mathliveValue: '\\mathrm{mi}^2',
+    katexValue: 'mi^2',
+    mathQuillValue: 'mi^{2}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  SQUARE_YARD: {
+    label: 'yd²',
+    mathliveValue: '\\mathrm{yd}^2',
+    katexValue: 'yd^2',
+    mathQuillValue: 'yd^{2}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  HECTARE: {
+    label: 'ha',
+    mathliveValue: '\\mathrm{ha}',
+    katexValue: 'ha',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+} as const
+
+export const MATH_VOLUME_UNITS = {
+  CUBIC_KILOMETER: {
+    label: 'km³',
+    mathliveValue: '\\mathrm{km}^3',
+    katexValue: 'km^3',
+    mathQuillValue: 'km^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_METER: {
+    label: 'm³',
+    mathliveValue: '\\mathrm{m}^3',
+    katexValue: 'm^3',
+    mathQuillValue: 'm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_DECIMETER: {
+    label: 'dm³',
+    mathliveValue: '\\mathrm{dm}^3',
+    katexValue: 'dm^3',
+    mathQuillValue: 'dm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_CENTIMETER: {
+    label: 'cm³',
+    mathliveValue: '\\mathrm{cm}^3',
+    katexValue: 'cm^3',
+    mathQuillValue: 'cm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_MILLIMETER: {
+    label: 'mm³',
+    mathliveValue: '\\mathrm{mm}^3',
+    katexValue: 'mm^3',
+    mathQuillValue: 'mm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_INCH: {
+    label: 'in³',
+    mathliveValue: '\\mathrm{in}^3',
+    katexValue: 'in^3',
+    mathQuillValue: 'in^{3}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  CUBIC_FOOT: {
+    label: 'ft³',
+    mathliveValue: '\\mathrm{ft}^3',
+    katexValue: 'ft^3',
+    mathQuillValue: 'ft^{3}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  CUBIC_MILE: {
+    label: 'mi³',
+    mathliveValue: '\\mathrm{mi}^3',
+    katexValue: 'mi^3',
+    mathQuillValue: 'mi^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_YARD: {
+    label: 'yd³',
+    mathliveValue: '\\mathrm{yd}^3',
+    katexValue: 'yd^3',
+    mathQuillValue: 'yd^{3}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  MILLILITER: {
+    label: 'ml',
+    mathliveValue: '\\mathrm{mL}',
+    katexValue: 'ml',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  LITER: {
+    label: 'L',
+    mathliveValue: '\\mathrm{L}',
+    katexValue: 'L',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MILLILITER_SE: {
+    label: 'ml',
+    mathliveValue: '\\mathrm{ml}',
+    katexValue: 'ml',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  LITER_SE: {
+    label: 'l',
+    mathliveValue: '\\mathrm{l}',
+    katexValue: 'l',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  DL: {
+    label: 'dl',
+    mathliveValue: '\\mathrm{dl}',
+    katexValue: 'dl',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  CUP: {
+    label: 'cup',
+    mathliveValue: '\\mathrm{cup}',
+    katexValue: 'cup',
+    mathQuillValue: '\\cup',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  GAL: {
+    label: 'gal',
+    mathliveValue: '\\mathrm{gal}',
+    katexValue: 'gal',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  PINT: {
+    label: 'pt',
+    mathliveValue: '\\mathrm{pt}',
+    katexValue: 'pt',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  QUART: {
+    label: 'qt',
+    mathliveValue: '\\mathrm{qt}',
+    katexValue: 'qt',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  FLOZ: {
+    label: 'floz',
+    mathliveValue: '\\mathrm{floz}',
+    katexValue: 'floz',
+    style: KEYBOARD_STYLE_PRESETS.XL,
+  },
+  CL: {
+    label: 'cl',
+    mathliveValue: '\\mathrm{cl}',
+    katexValue: 'cl',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+} as const
+
+export const MATH_WEIGHT_UNITS: MathOperatorsGroup = {
+  KG: {
+    label: 'kg',
+    mathliveValue: '\\mathrm{kg}',
+    katexValue: 'kg',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  G: {
+    label: 'g',
+    mathliveValue: '\\mathrm{g}',
+    katexValue: 'g',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MG: {
+    label: 'mg',
+    mathliveValue: '\\mathrm{mg}',
+    katexValue: 'mg',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  TON_SE: {
+    label: 'ton',
+    mathliveValue: '\\mathrm{ton}',
+    katexValue: 'ton',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  TON: {
+    label: 'T',
+    mathliveValue: '\\mathrm{T}',
+    katexValue: 'T',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  LB: {
+    label: 'lb',
+    mathliveValue: '\\mathrm{lb}',
+    katexValue: 'lb',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  OZ: {
+    label: 'oz',
+    mathliveValue: '\\mathrm{oz}',
+    katexValue: 'oz',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  GAL: {
+    label: 'gal',
+    mathliveValue: '\\mathrm{gal}',
+    katexValue: 'gal',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  HG: {
+    label: 'hg',
+    mathliveValue: '\\mathrm{hg}',
+    katexValue: 'hg',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  T: {
+    label: 't',
+    mathliveValue: '\\mathrm{t}',
+    katexValue: 't',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+} as const
+
+export const MATH_TIME_UNITS: MathOperatorsGroup = {
+  S: {
+    label: 's',
+    mathliveValue: '\\mathrm{s}',
+    katexValue: 's',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  M: {
+    label: 'min',
+    mathliveValue: '$\\mathrm{min}',
+    katexValue: 'min',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  H: {
+    label: 'h',
+    mathliveValue: '\\mathrm{h}',
+    katexValue: 'h',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  DAY: {
+    label: 'day',
+    mathliveValue: '\\mathrm{day}',
+    katexValue: 'day',
+  },
+  WEEK: {
+    label: 'week',
+    mathliveValue: '$\\mathrm{week}',
+    katexValue: 'week',
+  },
+  MONTH: {
+    label: 'month',
+    mathliveValue: '$\\mathrm{month}',
+    katexValue: 'month',
+  },
+  YEAR: {
+    label: 'year',
+    mathliveValue: '$\\mathrm{year}',
+    katexValue: 'year',
+  },
+  DAYS: {
+    label: 'days',
+    mathliveValue: '$\\mathrm{days}',
+    katexValue: 'days',
+  },
+  WEEKS: {
+    label: 'weeks',
+    mathliveValue: '$\\mathrm{weeks}',
+    katexValue: 'weeks',
+  },
+  MONTHS: {
+    label: 'months',
+    mathliveValue: '$\\mathrm{months}',
+    katexValue: 'months',
+  },
+  YEARS: {
+    label: 'years',
+    mathliveValue: '$\\mathrm{years}',
+    katexValue: 'years',
+  },
+  AM: {
+    label: 'am',
+    mathliveValue: '\\mathrm{am}',
+    katexValue: 'am',
+  },
+  PM: {
+    label: 'pm',
+    mathliveValue: '\\mathrm{pm}',
+    katexValue: 'pm',
+  },
+} as const

package/src/features/keyboard/helpers.ts

@@ -1,12 +1,13 @@
-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'
 import { getMobileBreakpointByCharType } from './constants/keyboardLayouts'
+import { KeyboardType, KeyboardUnitsGroupType, ResolvedKeyboard } from './types/types'
 
-export function getKeyboardGroup(locale: Locale, type: KeyboardType): KeyboardGroup {
-  return KEYBOARD_GROUPS_BY_LOCALE[locale]?.[type] ?? MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP
+export const getMainKeyboardGroup = (keys: ResolvedKeyboard, type: KeyboardType) => {
+  return keys.operators[type]
+}
+
+export const getUnitsKeyboardGroup = (keys: ResolvedKeyboard, type: KeyboardUnitsGroupType) => {
+  return keys.units[type]
 }
 
 export const getIsIpadOrIphoneDevice = () => {

package/src/features/keyboard/index.ts

@@ -1,2 +1,5 @@
-export * from './types'
 export { Keyboard } from './components/Keyboard'
+export * from './types/types'
+export * from './constants/keys'
+export * from './constants/groups'
+export { resolveKeyboard } from './constants/keyboard.helpers'

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

@@ -1,8 +1,19 @@
-import { ReactNode } from 'react'
-import { ButtonStyle, SelectOptionColor } from '@magmamath/react-native-ui'
+import type { ReactNode } from 'react'
+import { SelectOptionColor } from '@magmamath/react-native-ui'
 import { GestureResponderEvent } from 'react-native'
 
-export const enum KeyboardType {
+export type KeyboardKey = {
+  icon?: ReactNode
+  mathliveValue: string
+  katexValue: string
+  isSpecialSymbol?: boolean
+  mathQuillValue?: string
+  spreadsheetValue?: string
+  label?: string
+  style?: Record<string, any>
+}
+
+export enum KeyboardType {
   AlgebraAdvanced = 'AlgebraAdvanced',
   Basic = 'Basic',
   BasicPlus = 'BasicPlus',
@@ -16,15 +27,32 @@ export const enum KeyboardType {
   Underlined = 'Underlined',
 }
 
-export type KeyboardKey = {
-  katexValue: string
-  label?: string
-  isSpecialSymbol?: boolean
-  mathliveValue?: string
-  spreadsheetValue?: string
-  mathQuillValue?: string
-  icon?: ReactNode
-  style?: ButtonStyle
+export enum KeyboardUnitsGroupType {
+  LENGTH = 'length',
+  AREA = 'area',
+  VOLUME = 'volume',
+  WEIGHT = 'weight',
+  TIME = 'time',
+}
+
+export type MathOperatorsGroup = Record<string, KeyboardKey>
+
+export type KeyboardGroup = {
+  keys: KeyboardKey[]
+  numOfRows?: number
+}
+
+export type KeyboardGroups = Record<string, KeyboardGroup>
+
+export type KeyboardRowsGroup = {
+  keys: KeyboardKey[][]
+}
+
+export type KeyboardRowsGroups = Record<string, KeyboardRowsGroup>
+
+export type ResolvedKeyboard = {
+  operators: Record<KeyboardType, KeyboardGroup>
+  units: Record<KeyboardUnitsGroupType, KeyboardRowsGroup>
 }
 
 export type KeyboardKeyValue = {
@@ -36,21 +64,11 @@ export type KeyboardKeyValue = {
   mathQuillValue?: string
 }
 
-export type KeyboardGroup = {
-  id: string
-  className?: string
-  keys: KeyboardKey[]
-  numOfRows?: number
-}
-
 export type KeyboardLayoutProps = {
+  keys: ResolvedKeyboard
   onKeyPress: (key: KeyboardKeyValue) => void
   onLayoutChange?: (isSecondaryLayout: boolean) => void
   color?: SelectOptionColor
   isDisabled?: boolean
   disabledKeys?: KeyboardKey[]
 }
-
-export type MathKeysGroup<T extends Record<string, string>> = {
-  [K in keyof T as T[K]]: KeyboardKey
-}

package/src/features/voice/playing/components/VoiceTranscriptionsDropdown.tsx

@@ -100,11 +100,12 @@ export const VoiceTranscriptionsDropdown = ({
             scrollViewRef.current?.scrollTo({ y, animated: true })
           }
         }
-      } else {
-        const index = attempts.findIndex((item) => item.attemptNumber === attemptNumber)
-        if (index !== -1) {
-          scrollRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 })
-        }
+        return
+      }
+
+      const index = attempts.findIndex((item) => item.attemptNumber === attemptNumber)
+      if (index !== -1) {
+        scrollRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 })
       }
     },
     [attempts],

package/src/index.ts

@@ -1,4 +1,4 @@
-export { useFeaturesLocalization, setFeaturesLocalization, Locale } from './shared/translation'
+export { useFeaturesLocalization, setFeaturesLocalization } from './shared/translation'
 export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'
 export * from './features/feedback'

package/src/shared/icons/IntegralABIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+const ASPECT_RATIO = 25 / 23
+
+export const IntegralABIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size / ASPECT_RATIO} viewBox="0 0 25 23" fill="none">
+      <Path
+        d="M17.8511 18.9484C17.8511 19.2204 18.0271 19.3324 18.2111 19.3324C18.2991 19.3324 18.3871 19.3084 18.4671 19.2604L18.7391 20.2204C18.4671 20.4204 18.1471 20.5164 17.8431 20.5164C17.3551 20.5164 16.9071 20.2684 16.7631 19.7804C16.5151 20.2364 16.0031 20.5164 15.3391 20.5164C14.1791 20.5164 13.4111 19.6044 13.4111 18.3644C13.4111 17.1404 14.1391 16.2124 15.3471 16.2124C15.9551 16.2124 16.3871 16.4524 16.5631 16.8044V16.3084H17.8511V18.9484ZM14.7391 18.3644C14.7391 18.9484 15.0911 19.3484 15.6191 19.3484C16.1631 19.3484 16.5231 18.9484 16.5231 18.3644C16.5231 17.7804 16.1631 17.3804 15.6191 17.3804C15.0911 17.3804 14.7391 17.7804 14.7391 18.3644Z"
+        fill={color}
+      />
+      <Path
+        d="M20.6816 3.21241C21.8896 3.21241 22.6176 4.14841 22.6176 5.36441C22.6176 6.58041 21.8816 7.51641 20.6896 7.51641C20.1296 7.51641 19.6416 7.30041 19.4336 6.97241V7.46841H18.1856V1.86841H19.5136V3.72441C19.6816 3.42841 20.1216 3.21241 20.6816 3.21241ZM19.5056 5.36441C19.5056 5.94841 19.8656 6.34841 20.4096 6.34841C20.9376 6.34841 21.2896 5.94841 21.2896 5.36441C21.2896 4.78041 20.9376 4.38041 20.4096 4.38041C19.8656 4.38041 19.5056 4.78041 19.5056 5.36441Z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5676 3.77312C14.455 3.54723 15.2655 4.02731 15.6466 4.78955C15.8319 5.16003 15.6817 5.61053 15.3112 5.79578C14.9407 5.98102 14.4902 5.83085 14.305 5.46036C14.1861 5.22259 14.0323 5.20267 13.9376 5.22677C13.8103 5.25918 13.445 5.46266 13.197 6.33098C12.712 8.02849 12.3606 10.1799 12.0559 12.1602C12.0252 12.3594 11.995 12.5571 11.9651 12.7523C11.8481 13.5176 11.737 14.2449 11.6273 14.8821C11.4916 15.6712 11.35 16.3742 11.1873 16.8621C10.8623 17.8373 10.1532 18.4524 9.31885 18.5567C8.50281 18.6587 7.69698 18.2443 7.30499 17.4604C7.11975 17.0899 7.26992 16.6394 7.6404 16.4541C8.01089 16.2689 8.46139 16.4191 8.64664 16.7895C8.75465 17.0056 8.94882 17.0912 9.13278 17.0682C9.29841 17.0475 9.58935 16.9126 9.7643 16.3878C9.88671 16.0205 10.0126 15.4209 10.149 14.6278C10.2561 14.0058 10.3644 13.2968 10.4812 12.5333C10.5113 12.3363 10.542 12.1357 10.5733 11.932C10.876 9.96487 11.2397 7.72139 11.7547 5.9189C12.078 4.78723 12.7128 3.99071 13.5676 3.77312Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/AbsoluteValueIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path, Rect } from 'react-native-svg'
+
+export const AbsoluteValueIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 21" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.22164 3.29272C2.66346 3.29272 3.02164 3.63597 3.02164 4.05939L3.02164 16.3261C3.02164 16.7495 2.66346 17.0927 2.22164 17.0927C1.77981 17.0927 1.42164 16.7495 1.42164 16.3261L1.42164 4.05939C1.42164 3.63597 1.77981 3.29272 2.22164 3.29272Z"
+        fill={color}
+      />
+      <Rect x="5.80164" y="5.57251" width="9.24" height="9.24" rx="1.548" stroke={color} />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.6216 3.29272C19.0635 3.29272 19.4216 3.63597 19.4216 4.05939L19.4216 16.3261C19.4216 16.7495 19.0635 17.0927 18.6216 17.0927C18.1798 17.0927 17.8216 16.7495 17.8216 16.3261L17.8216 4.05939C17.8216 3.63597 18.1798 3.29272 18.6216 3.29272Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/AdditionIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const AdditionIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M7.2 14.4C7.2 14.8419 7.55818 15.2 8 15.2C8.44183 15.2 8.8 14.8419 8.8 14.4V8.80005H14.4C14.8418 8.80005 15.2 8.44188 15.2 8.00005C15.2 7.55822 14.8418 7.20005 14.4 7.20005H8.8V1.60005C8.8 1.15822 8.44183 0.800049 8 0.800049C7.55818 0.800049 7.2 1.15822 7.2 1.60005V7.20005H1.6C1.15818 7.20005 0.800003 7.55822 0.800003 8.00005C0.800003 8.44188 1.15818 8.80005 1.6 8.80005H7.2V14.4Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/AlphaIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const AlphaIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.25286 10.4025C5.57106 11.011 5.94998 11.25 6.35294 11.25C6.5739 11.25 6.82916 11.137 7.1427 10.7238C7.46105 10.3042 7.75394 9.68098 8.04205 8.90547C8.09833 8.75397 8.15346 8.59949 8.20779 8.44252C8.18637 8.35859 8.16517 8.27496 8.14411 8.19191C8.11514 8.07766 8.08645 7.9645 8.05786 7.85314C7.81932 6.9238 7.58378 6.09667 7.26216 5.50316C6.94446 4.91687 6.65394 4.75 6.35294 4.75C5.94998 4.75 5.57106 4.98896 5.25286 5.59752C4.93218 6.21083 4.75 7.08277 4.75 8C4.75 8.91723 4.93218 9.78917 5.25286 10.4025ZM9.04225 5.86421C8.90941 5.48225 8.75827 5.11569 8.58098 4.78851C8.15358 3.9998 7.4637 3.25 6.35294 3.25C5.18727 3.25 4.38972 4.01104 3.92361 4.90248C3.45998 5.78917 3.25 6.91723 3.25 8C3.25 9.08277 3.45998 10.2108 3.92361 11.0975C4.38972 11.989 5.18727 12.75 6.35294 12.75C7.23002 12.75 7.87673 12.238 8.33769 11.6304C8.55373 11.3457 8.74689 11.0178 8.92227 10.6657C9.2372 11.3308 9.77851 12.0833 10.7451 12.0833C11.4552 12.0833 11.9591 11.6235 12.2184 11.3283C12.3617 11.1652 12.4715 11.0056 12.5451 10.8882C12.5824 10.8287 12.6117 10.7781 12.6325 10.7406C12.643 10.7218 12.6514 10.7062 12.6577 10.6943L12.6656 10.6791L12.6683 10.6737L12.6694 10.6716L12.6699 10.6706C12.67 10.6704 12.6703 10.6698 12 10.3333L12.6699 10.6706C12.8557 10.3004 12.7067 9.84886 12.3365 9.66304C11.9664 9.47728 11.5158 9.62658 11.3299 9.99649L11.3304 9.99547C11.3311 9.99412 11.3317 9.99298 11.3315 9.99329L11.3309 9.99441L11.3304 9.99547L11.3214 10.012C11.3118 10.0292 11.296 10.0567 11.2745 10.091C11.2305 10.1611 11.1677 10.2515 11.0914 10.3384C10.9115 10.5432 10.788 10.5833 10.7451 10.5833C10.7038 10.5833 10.5072 10.5662 10.219 9.89251C10.0532 9.50502 9.91345 9.03144 9.77223 8.4981C9.89241 8.13493 10.0087 7.76662 10.1227 7.40576C10.1783 7.22976 10.2333 7.05553 10.2879 6.88453C10.558 6.03945 10.8195 5.26986 11.11 4.65268C11.2864 4.27789 11.1255 3.83109 10.7507 3.65472C10.3759 3.47835 9.92913 3.6392 9.75276 4.01399C9.49089 4.57046 9.25895 5.21101 9.04225 5.86421Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}