@magmamath/students-features 0.9.9 → 0.9.14-rc.11

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

@@ -1,12 +1,15 @@
-import React, { useMemo } from 'react'
-import { StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
-import { COLORS, IS_MOBILE, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import React, { useEffect, useMemo, useRef } from 'react'
+import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
+import { COLORS, IS_MOBILE, IS_WEB, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
+import { KeyboardKey, KeyboardKeyValue } from '../types'
 import { Numpad } from './Numpad/Numpad'
+import { MainLayout } from './MainLayout/MainLayout'
+import {
+  getLayoutConfigStyles,
+  KEYBOARD_SLIDE_DISTANCE,
+  slideInAnimationSettings,
+} from './MainLayout/constants'
 import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
-import { getLayoutConfigStyles } from './constants'
-import { MainLayout } from './MainLayout'
-import Animated, { SlideInDown } from 'react-native-reanimated'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -14,11 +17,19 @@ type KeyboardProps = {
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
   isDisabled?: boolean
+  isMainLayoutDisabled?: boolean
   showUnderlinedKeys?: boolean
   disabledKeys?: KeyboardKey[]
 }
 
-export const Keyboard = ({ style, characterType, ...props }: KeyboardProps) => {
+export const Keyboard = ({
+  style,
+  characterType,
+  isMainLayoutDisabled,
+  ...props
+}: KeyboardProps) => {
+  const slideAnim = useRef(new Animated.Value(KEYBOARD_SLIDE_DISTANCE)).current
+
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
   const mobileStyles = useMemo(
@@ -26,12 +37,34 @@ export const Keyboard = ({ style, characterType, ...props }: KeyboardProps) => {
     [characterType, isMobile],
   )
 
+  useEffect(() => {
+    const anim = Animated.spring(slideAnim, {
+      ...slideInAnimationSettings,
+      mass: 1,
+      velocity: 0,
+      useNativeDriver: !IS_WEB,
+    })
+
+    anim.start()
+
+    return () => anim.stop()
+  }, [])
+
   return (
     <Animated.View
-      style={[styles.container, style]}
-      entering={SlideInDown.damping(40).stiffness(320)}
+      style={[
+        styles.container,
+        style,
+        {
+          transform: [{ translateY: slideAnim }],
+        },
+      ]}
     >
-      <MainLayout {...props} characterType={characterType} />
+      <MainLayout
+        {...props}
+        isDisabled={isMainLayoutDisabled || props.isDisabled}
+        characterType={characterType}
+      />
       <Numpad {...props} style={mobileStyles} />
     </Animated.View>
   )

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { StyleSheet } from 'react-native'
 import {
   ButtonStyle,
   SelectGroup,

package/src/features/keyboard/components/{MainLayout.tsx → MainLayout/MainLayout.tsx}

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
-import { getLayoutByCharType } from '../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../types/types'
-import { UnderlinedLayout } from './UnderlinedLayout/UnderlinedLayout'
-import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
+import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
+import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
+import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
 
 type LayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -60,11 +60,11 @@ export const MainLayout = ({
   }, [showUnderlinedKeys, animateFade])
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, IS_MOBILE && { flex: 1 }]}>
       <Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
       {isUnderlinedLayoutVisible && (
         <Animated.View style={{ opacity: fadeAnim }}>
-          <UnderlinedLayout {...props} />
+          <UnderlinedLayout {...props} showSlashKey={!isBasicPlusPlusLayout(characterType)} />
         </Animated.View>
       )}
     </View>
@@ -74,6 +74,5 @@ export const MainLayout = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    flex: 1,
   },
 })

package/src/features/keyboard/components/{constants.ts → MainLayout/constants.ts}

@@ -1,5 +1,5 @@
 import { COLORS, SPACING } from '@magmamath/react-native-ui'
-import { KEYBOARD_LAYOUTS } from '../constants/keyboardLayouts'
+import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
 export const KEYBOARD_SLIDE_DISTANCE = 600
 
@@ -20,3 +20,8 @@ export const getLayoutConfigStyles = (characterType?: number, isMobile?: boolean
 
   return LAYOUT_STYLES_CONFIG.DEFAULT
 }
+export const slideInAnimationSettings = {
+  toValue: 0,
+  stiffness: 320,
+  damping: 40,
+}

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

@@ -4,9 +4,14 @@ import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
 
-export const UnderlinedLayout = (props: KeyboardLayoutProps) => {
+type UnderlinedLayoutProps = {
+  showSlashKey?: boolean
+} & KeyboardLayoutProps
+
+export const UnderlinedLayout = (props: UnderlinedLayoutProps) => {
   const t = useText()
   const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Underlined)
+  const keys = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
 
-  return <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
+  return <KeysList keys={keys} numOfRows={props.showSlashKey ? 2 : keys.length} {...props} />
 }

package/src/features/keyboard/components/UnderlinedLayout/keyboardGroups.ts

@@ -1,12 +1,14 @@
 import { KeyboardGroup } from '../../types/types'
 import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
 import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_SPECIAL_OPERATORS } from '../../types/MathKeysGroups/specialOperators'
 
 export const MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP: KeyboardGroup = {
   id: MathEntryKeyboardGroupId.UNDERLINED,
   keys: [
-    MATH_BASIC_OPERATORS.UNDERLINED_TEN,
-    MATH_BASIC_OPERATORS.UNDERLINED_ONE,
-    MATH_BASIC_OPERATORS.UNDERLINED_U,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_TEN,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_U,
+    MATH_SPECIAL_OPERATORS.UNDERLINED_ONE,
+    MATH_BASIC_OPERATORS.SLASH,
   ],
 }

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

@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
     flexDirection: IS_MOBILE ? 'column' : 'row',
     gap: 16,
     paddingRight: 16,
+    flex: 1,
   },
   option: {
     flexBasis: 45,

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

@@ -50,3 +50,6 @@ export const getSelectOptions = ({
     ]
   }
 }
+
+export const isKeyboardUnitsGroupType = (k: string): k is KeyboardUnitsGroupType =>
+  (Object.values(KeyboardUnitsGroupType) as string[]).includes(k)

package/src/features/keyboard/components/UnitsLayout/hooks/useUnitTabs.ts

@@ -1,32 +1,46 @@
 import { useText } from '../../../../../shared/translation'
 import { useMemo, useState } from 'react'
-import { TabOptionProps } from '@magmamath/react-native-ui'
-
-import { KeyboardUnitsGroupType } from '../types'
+import { KeyboardUnitsGroupType, UnitTab } from '../types'
+import { useWindowDimensions } from 'react-native'
+import { IS_MOBILE, TabOptionProps } from '@magmamath/react-native-ui'
+import { isKeyboardUnitsGroupType } from '../helpers'
 
 export const useUnitTabs = () => {
   const t = useText()
-  const tabs = useMemo(
+  const { width } = useWindowDimensions()
+
+  const allTabs = useMemo<UnitTab[]>(
     () => [
-      {
-        title: t('keyboard.length'),
-        key: KeyboardUnitsGroupType.LENGTH,
-      },
-      {
-        title: t('keyboard.area'),
-        key: KeyboardUnitsGroupType.AREA,
-      },
-      {
-        title: t('keyboard.volume'),
-        key: KeyboardUnitsGroupType.VOLUME,
-      },
-      {
-        title: t('keyboard.weight'),
-        key: KeyboardUnitsGroupType.WEIGHT,
-      },
+      { title: t('keyboard.length'), key: KeyboardUnitsGroupType.LENGTH },
+      { title: t('keyboard.area'), key: KeyboardUnitsGroupType.AREA, minBreakpoint: 1005 },
+      { title: t('keyboard.volume'), key: KeyboardUnitsGroupType.VOLUME, minBreakpoint: 1060 },
+      { title: t('keyboard.weight'), key: KeyboardUnitsGroupType.WEIGHT, minBreakpoint: 1060 },
+      { title: t('keyboard.time'), key: KeyboardUnitsGroupType.TIME, minBreakpoint: 1125 },
     ],
     [t],
   )
-  const [activeTab, setActiveTab] = useState<TabOptionProps>(tabs[0])
-  return { tabs, activeTab, setActiveTab }
+
+  const tabs = useMemo(
+    () =>
+      allTabs.filter(
+        (tab) => IS_MOBILE || tab.minBreakpoint === undefined || width >= tab.minBreakpoint,
+      ),
+    [allTabs, width],
+  )
+
+  const [activeKey, setActiveKey] = useState<KeyboardUnitsGroupType | undefined>(() => tabs[0]?.key)
+
+  const activeTab = useMemo(() => {
+    return tabs.find((t) => t?.key && t.key === activeKey) ?? tabs[0]
+  }, [tabs, activeKey])
+
+  return {
+    tabs,
+    activeTab,
+    setActiveTab: (tab: TabOptionProps) => {
+      if (isKeyboardUnitsGroupType(tab.key)) {
+        setActiveKey(tab.key)
+      }
+    },
+  }
 }

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

@@ -1,6 +1,7 @@
 import {
   MATH_AREA_UNITS,
   MATH_LENGTH_UNITS,
+  MATH_TIME_UNITS,
   MATH_VOLUME_UNITS,
   MATH_WEIGHT_UNITS,
 } from '../../types/MathKeysGroups/units'
@@ -10,6 +11,7 @@ import { VolumeIcon } from '../../../../shared/icons/VolumeIcon'
 import { WeightIcon } from '../../../../shared/icons/WeightIcon'
 import { KeyboardUnitsGroupType, UnitKeyboardGroups } from './types'
 import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+import { TimeIcon } from '../../../../shared/icons/TimeIcon'
 
 export const MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS: UnitKeyboardGroups = {
   id: MathEntryKeyboardGroupId.LENGTH_UNITS_SW,
@@ -171,6 +173,11 @@ export const MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS: UnitKeyboardGroups = {
   ],
 }
 
+export const MATH_ENTRY_TIME_UNITS_SW_KEYBOARD_GROUPS: UnitKeyboardGroups = {
+  id: MathEntryKeyboardGroupId.TIME_SW,
+  keys: [[MATH_TIME_UNITS.S, MATH_TIME_UNITS.M, MATH_TIME_UNITS.H]],
+}
+
 export const MATH_ENTRY_WEIGHT_UNITS_US_KEYBOARD_GROUPS: UnitKeyboardGroups = {
   id: MathEntryKeyboardGroupId.WEIGHT_UNITS_US,
   keys: [
@@ -199,4 +206,8 @@ export const UNITS_KEYBOARD_GROUPS = new Map([
     KeyboardUnitsGroupType.WEIGHT,
     { keys: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS.keys, icon: WeightIcon },
   ],
+  [
+    KeyboardUnitsGroupType.TIME,
+    { keys: MATH_ENTRY_TIME_UNITS_SW_KEYBOARD_GROUPS.keys, icon: TimeIcon },
+  ],
 ])

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

@@ -1,4 +1,5 @@
 import { KeyboardGroup, KeyboardKey } from '@magmamath/students-features'
+import { TabOptionProps } from '@magmamath/react-native-ui'
 
 export enum SelectedLayout {
   ALGEBRA = 'algebra',
@@ -10,8 +11,14 @@ export enum KeyboardUnitsGroupType {
   AREA = 'area',
   VOLUME = 'volume',
   WEIGHT = 'weight',
+  TIME = 'time',
 }
 
 export type UnitKeyboardGroups = {
   keys: KeyboardKey[][]
 } & Omit<KeyboardGroup, 'keys'>
+
+export type UnitTab = Omit<TabOptionProps, 'key'> & {
+  key: KeyboardUnitsGroupType
+  minBreakpoint?: number
+}

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

@@ -1,5 +1,6 @@
 import { KeyboardGroup, KeyboardType } from '../types/types'
 import {
+  MATH_CURRENCY_DE_KEYBOARD_GROUP,
   MATH_CURRENCY_SW_KEYBOARD_GROUP,
   MATH_CURRENCY_UK_KEYBOARD_GROUP,
   MATH_CURRENCY_US_KEYBOARD_GROUP,
@@ -30,6 +31,7 @@ import {
   MATH_ENTRY_AREA_UNITS_US_KEYBOARD_GROUPS,
   MATH_ENTRY_LENGTH_UNITS_SW_KEYBOARD_GROUPS,
   MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
+  MATH_ENTRY_TIME_UNITS_SW_KEYBOARD_GROUPS,
   MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
   MATH_ENTRY_VOLUME_UNITS_UK_KEYBOARD_GROUPS,
   MATH_ENTRY_VOLUME_UNITS_US_KEYBOARD_GROUPS,
@@ -69,6 +71,7 @@ function createKeyboardUnitsLocale(
     [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,
+    [KeyboardUnitsGroupType.TIME]: MATH_ENTRY_TIME_UNITS_SW_KEYBOARD_GROUPS,
   }
   return { ...base, ...overrides }
 }
@@ -98,6 +101,20 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
     [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP,
   }),
+  [Locale.DE]: 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_DE_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,
@@ -119,4 +136,10 @@ export const KEYBOARD_UNITS_GROUPS_BY_LOCALE: Record<
     [KeyboardUnitsGroupType.VOLUME]: MATH_ENTRY_VOLUME_UNITS_SW_KEYBOARD_GROUPS,
     [KeyboardUnitsGroupType.WEIGHT]: MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
   }),
+  [Locale.DE]: 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

@@ -71,3 +71,14 @@ export function getLayoutByCharType(charType?: number) {
   }
   return AlgebraLayout
 }
+
+export function isBasicPlusPlusLayout(charType?: number) {
+  if (!charType) {
+    return true
+  }
+
+  return (
+    KEYBOARD_LAYOUTS[KeyboardType.BasicPlusPlus].characterTypes.includes(charType) ||
+    KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].characterTypes.includes(charType)
+  )
+}

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

@@ -42,9 +42,8 @@ import { EqualsIcon } from '../../../../shared/icons/keyboard/EqualsIcon/EqualsI
 import { AbsoluteValueIcon } from '../../../../shared/icons/keyboard/AbsoluteValueIcon/AbsoluteValueIcon'
 import { IntervalIcon } from '../../../../shared/icons/keyboard/IntervalIcon/IntervalIcon'
 import { createMathKeysGroup } from './helpers'
-import { UnderlinedTenIcon } from '../../../../shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon'
-import { UnderlinedOneIcon } from '../../../../shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon'
-import { UnderlinedUIcon } from '../../../../shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon'
+import { RoundBracketLeftIcon } from '../../../../shared/icons/keyboard/RoundBracketLeftIcon/RoundBracketLeftIcon'
+import { RoundBracketRightIcon } from '../../../../shared/icons/keyboard/RoundBracketRightIcon/RoundBracketRightIcon'
 
 export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   ADDITION: {
@@ -98,7 +97,7 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   },
   NOT_EQUAL: {
     icon: <NotEqualIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '\\neq',
+    mathliveValue: '≠',
     katexValue: '≠',
   },
   APPROXIMATELY_EQUAL: {
@@ -122,7 +121,7 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
     katexValue: ':',
   },
   C_DOT: {
-    icon: <CDotIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    icon: <CDotIcon {...DEFAULT_KEY_ICON_PROPS} size={6} />,
     mathliveValue: '\\cdot',
     katexValue: '⋅',
   },
@@ -254,6 +253,16 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
     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)$',
@@ -266,25 +275,7 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   },
   INTERVAL: {
     icon: <IntervalIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$\\left[, \\right]$',
+    mathliveValue: '$\\left[\\placeholder{},\\placeholder{}\\right]$',
     katexValue: '[ , ]',
   },
-  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',
-  },
 })

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

@@ -2,6 +2,9 @@ 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 { UnderlinedTenIcon } from '../../../../shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon'
+import { UnderlinedOneIcon } from '../../../../shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon'
+import { UnderlinedUIcon } from '../../../../shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon'
 
 export const MATH_SPECIAL_OPERATORS = createMathKeysGroup({
   LIM: {
@@ -49,4 +52,22 @@ export const MATH_SPECIAL_OPERATORS = createMathKeysGroup({
     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',
+  },
 })

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

@@ -427,16 +427,19 @@ export const MATH_TIME_UNITS = createMathKeysGroup({
     label: 's',
     mathliveValue: '\\mathrm{s}',
     katexValue: 's',
+    style: STYLE_PRESETS.LARGE,
   },
   M: {
     label: 'min',
     mathliveValue: '$\\mathrm{min}',
     katexValue: 'min',
+    style: STYLE_PRESETS.LARGE,
   },
   H: {
     label: 'h',
     mathliveValue: '\\mathrm{h}',
     katexValue: 'h',
+    style: STYLE_PRESETS.LARGE,
   },
   DAY: {
     label: 'day',

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

@@ -27,5 +27,6 @@ export enum MathEntryKeyboardGroupId {
   CURRENCY_SW = 'math-entry-currency-sw',
   CURRENCY_UK = 'math-entry-currency-uk',
   CURRENCY_US = 'math-entry-currency-us',
+  CURRENCY_DE = 'math-entry-currency-de',
   UNDERLINED = 'math-entry-underlined',
 }

package/src/lib/helpers/helpers.ts

@@ -27,12 +27,27 @@ export const getRelativeTimeText = (date: Date) => {
   const years = getYears(days)
 
   if (seconds < 60) return getText('time.justNow')
-  if (minutes < 60)
-    return `${minutes} ${minutes === 1 ? getText('time.minuteAgo') : getText('time.minutesAgo')}`
-  if (hours < 24)
-    return `${hours} ${hours === 1 ? getText('time.hourAgo') : getText('time.hoursAgo')}`
-  if (days < 30) return `${days} ${days === 1 ? getText('time.dayAgo') : getText('time.daysAgo')}`
-  if (months < 12)
-    return `${months} ${months === 1 ? getText('time.monthAgo') : getText('time.monthsAgo')}`
-  return `${years} ${years === 1 ? getText('time.yearAgo') : getText('time.yearsAgo')}`
+
+  if (minutes < 60) {
+    if (minutes === 1) return `1 ${getText('time.minuteAgo')}`
+    return getText('time.minutesAgo', { count: minutes.toString() })
+  }
+
+  if (hours < 24) {
+    if (hours === 1) return `1 ${getText('time.hourAgo')}`
+    return getText('time.hoursAgo', { count: hours.toString() })
+  }
+
+  if (days < 30) {
+    if (days === 1) return `1 ${getText('time.dayAgo')}`
+    return getText('time.daysAgo', { count: days.toString() })
+  }
+
+  if (months < 12) {
+    if (months === 1) return `1 ${getText('time.monthAgo')}`
+    return getText('time.monthsAgo', { count: months.toString() })
+  }
+
+  if (years === 1) return `1 ${getText('time.yearAgo')}`
+  return getText('time.yearsAgo', { count: years.toString() })
 }

package/src/lib/types/requests.ts

@@ -0,0 +1 @@
+export type WithAbortSignal<T> = T & { signal?: AbortSignal }

package/src/shared/icons/TimeIcon.tsx

@@ -0,0 +1,23 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+import React from 'react'
+
+export const TimeIcon = ({ size = 20, color = COLORS.NEUTRAL_9 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.84 1.5C4.33851 1.5 1.5 4.33851 1.5 7.84C1.5 11.3415 4.33851 14.18 7.84 14.18C11.3415 14.18 14.18 11.3415 14.18 7.84C14.18 4.33851 11.3415 1.5 7.84 1.5ZM0 7.84C0 3.51009 3.51009 0 7.84 0C12.1699 0 15.68 3.51009 15.68 7.84C15.68 12.1699 12.1699 15.68 7.84 15.68C3.51009 15.68 0 12.1699 0 7.84Z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.83999 3.0826C8.2542 3.0826 8.58999 3.41839 8.58999 3.8326V7.8033L10.4859 9.42838C10.8004 9.69794 10.8368 10.1714 10.5673 10.4859C10.2977 10.8004 9.82421 10.8368 9.50972 10.5673L7.57539 8.90926C7.2673 8.64519 7.08999 8.25967 7.08999 7.85389V3.8326C7.08999 3.41839 7.42578 3.0826 7.83999 3.0826Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -4,8 +4,8 @@ import Svg, { Circle } from 'react-native-svg'
 
 export const CDotIcon = ({ size = 20, color }: IconProps) => {
   return (
-    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-      <Circle cx="8.00001" cy="8.00001" r="2.00001" fill={color} />
+    <Svg width={size} height={size} viewBox="0 0 6 6" fill="none">
+      <Circle cx="3.00001" cy="3.00001" r="3.00001" fill={color} />
     </Svg>
   )
 }

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+const ASPECT_RATIO = 5 / 14
+
+export const RoundBracketLeftIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 5 14" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.90533 0.21967C4.19823 0.512563 4.19823 0.987437 3.90533 1.28033C0.67361 4.51206 0.736927 10.001 3.8631 12.6806C4.17759 12.9501 4.21401 13.4236 3.94445 13.7381C3.67488 14.0526 3.20141 14.089 2.88691 13.8194C-0.986916 10.499 -0.923598 3.98794 2.84467 0.21967C3.13757 -0.0732233 3.61244 -0.0732233 3.90533 0.21967Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+const ASPECT_RATIO = 5 / 14
+
+export const RoundBracketRightIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size * ASPECT_RATIO} height={size} viewBox="0 0 5 14" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.219696 0.21967C-0.0731974 0.512563 -0.0731974 0.987437 0.219696 1.28033C3.45142 4.51206 3.3881 10.001 0.261932 12.6806C-0.0525622 12.9501 -0.0889835 13.4236 0.180583 13.7381C0.45015 14.0526 0.923625 14.089 1.23812 13.8194C5.11195 10.499 5.04863 3.98794 1.28036 0.21967C0.987463 -0.0732233 0.512589 -0.0732233 0.219696 0.21967Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/translation/constants.ts

@@ -4,6 +4,7 @@ import GB from './localization/gb.json'
 import SW from './localization/sw.json'
 import CA from './localization/ca.json'
 import SCT from './localization/sct.json'
+import DE from './localization/de.json'
 
 export const LOCALIZATION_CONFIGS = {
   [Locale.EN]: EN,
@@ -11,4 +12,5 @@ export const LOCALIZATION_CONFIGS = {
   [Locale.SW]: SW,
   [Locale.CA]: CA,
   [Locale.SCT]: SCT,
+  [Locale.DE]: DE,
 }