@magmamath/students-features 0.9.0-rc8 → 0.9.0

package/src/features/feedback/components/TeacherFeedback.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import { useStoreMap, useUnit } from 'effector-react'
 import { StyleSheet, View } from 'react-native'
-import { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
+import { TeacherFeedbackButton } from './TeacherFeedbackButton'
 import { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
-import { FeedbackButtonColors, FeedbackButtonSize, FeedbackMode } from '../constants'
+import { FeedbackButtonSize, FeedbackMode } from '../constants'
 import { TeacherFeedbackModel } from '../model/model'
+import { ButtonColor } from '@magmamath/react-native-ui'
 
 type TeacherFeedbackProps = {
   model: TeacherFeedbackModel
   mode: FeedbackMode
   assignmentId: string
   problemId: string
-  color?: FeedbackButtonColors
+  buttonColor?: ButtonColor
   size?: FeedbackButtonSize
   heightOffset?: number
 }
@@ -21,7 +22,7 @@ export const TeacherFeedback = ({
   mode,
   assignmentId,
   problemId,
-  color = FeedbackButtonColors.BLUE,
+  buttonColor = ButtonColor.BLUE,
   size = FeedbackButtonSize.SMALL,
   heightOffset = 0,
 }: TeacherFeedbackProps) => {
@@ -50,7 +51,7 @@ export const TeacherFeedback = ({
         isOpen={isOpen}
         isLoading={isLoading}
         size={size}
-        color={color}
+        buttonColor={buttonColor}
       />
     </View>
   )

package/src/features/feedback/components/TeacherFeedbackButton.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Button, ButtonColor, COLORS } from '@magmamath/react-native-ui'
+import { UnreadMessagesBadge } from './UnreadMessagesBadge'
+import { MessageBubbleIcon } from '../../../shared/icons/MessageBubbleIcon'
+import { XCloseIcon } from '../../../shared/icons/XCloseIcon'
+import { FeedbackButtonSize, TEACHER_FEEDBACK_BUTTON_ID } from '../constants'
+
+const ICON_SIZES = {
+  [FeedbackButtonSize.LARGE]: 37,
+  [FeedbackButtonSize.SMALL]: 26,
+}
+
+type TeacherFeedbackButtonProps = {
+  isOpen: boolean
+  isLoading: boolean
+  onPress?: () => void
+  unreadCommentsCount?: number
+  size?: FeedbackButtonSize
+  buttonColor?: ButtonColor
+}
+
+export const TeacherFeedbackButton = ({
+  isOpen,
+  onPress,
+  unreadCommentsCount,
+  isLoading,
+  size = FeedbackButtonSize.LARGE,
+  buttonColor = ButtonColor.BLUE,
+}: TeacherFeedbackButtonProps) => {
+  const isLarge = size === FeedbackButtonSize.LARGE
+  const isUnread = !unreadCommentsCount
+  const iconColor = !isUnread ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9
+
+  if (isOpen) {
+    return (
+      <Button
+        id={TEACHER_FEEDBACK_BUTTON_ID}
+        onPress={onPress}
+        size="large"
+        variant="primary"
+        disabled={isLoading}
+        isLoading={isLoading}
+        colorScheme={isUnread ? ButtonColor.WHITE : buttonColor}
+        style={{
+          container: isLarge ? styles.containerLarge : styles.container,
+          button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }, styles[size]],
+        }}
+        icon={<XCloseIcon size={ICON_SIZES[size]} />}
+      />
+    )
+  }
+
+  return (
+    <Button
+      id={TEACHER_FEEDBACK_BUTTON_ID}
+      onPress={onPress}
+      size="large"
+      variant="primary"
+      disabled={isLoading}
+      isLoading={isLoading}
+      colorScheme={isUnread ? ButtonColor.WHITE : buttonColor}
+      style={{
+        container: isLarge ? styles.containerLarge : styles.container,
+        button: [styles.button, styles[size]],
+      }}
+      icon={
+        <View style={styles.iconContainer}>
+          <MessageBubbleIcon color={iconColor} size={ICON_SIZES[size]} />
+          {!!unreadCommentsCount && (
+            <View style={isLarge ? styles.badgeContainerLarge : styles.badgeContainer}>
+              <UnreadMessagesBadge
+                badgeContent={unreadCommentsCount}
+                textStyle={isLarge && styles.textLarge}
+                style={isLarge && styles.badgeLarge}
+              />
+            </View>
+          )}
+        </View>
+      }
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 54,
+    height: 54,
+  },
+  containerLarge: {
+    width: 80,
+    height: 80,
+  },
+  [FeedbackButtonSize.SMALL]: {
+    width: 50,
+    height: 50,
+  },
+  [FeedbackButtonSize.LARGE]: {
+    width: 75,
+    height: 75,
+  },
+  button: {
+    borderWidth: 2,
+  },
+  buttonLarge: {
+    width: 75,
+    height: 75,
+    borderWidth: 2,
+  },
+  iconContainer: {
+    position: 'relative',
+  },
+  badgeContainerLarge: {
+    position: 'absolute',
+    top: -24,
+    right: -24,
+  },
+  badgeContainer: {
+    position: 'absolute',
+    top: -17,
+    right: -17,
+  },
+  textLarge: {
+    fontSize: 18,
+    lineHeight: 0,
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeLarge: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+  },
+})

package/src/features/feedback/components/index.ts

@@ -1,5 +1,5 @@
 export { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
-export { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
+export { TeacherFeedbackButton } from './TeacherFeedbackButton'
 export { TeacherFeedback } from './TeacherFeedback'
 export { UnreadMessagesBadge } from './UnreadMessagesBadge'
 export { ListCardCommentsCount } from './ListCardCommentsCount'

package/src/features/feedback/constants.ts

@@ -7,11 +7,6 @@ export const BUENOS_AIRES_FONT =
 export const EMPTY_COMMENT_ID = 'empty-comment'
 export const TEACHER_FEEDBACK_BUTTON_ID = 'teacherFeedbackButton'
 
-export enum FeedbackButtonColors {
-  BLUE = 'BLUE',
-  PURPLE = 'PURPLE',
-}
-
 export enum FeedbackButtonSize {
   SMALL = 'SMALL',
   LARGE = 'LARGE',

package/src/features/gifCelebrations/helpers.ts

@@ -1,4 +1,4 @@
-import { TranslationKeys } from '../../shared/translation/types'
+import { TranslationKeys } from 'src/shared/translation/types'
 import {
   CustomGetCachePathMethod,
   GifsGroups,

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

@@ -1,89 +1,55 @@
 import React, { useMemo, useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { COLORS, SelectGroup, SelectOptionSize, IS_MOBILE } from '@magmamath/react-native-ui'
-import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
-import { IntegralABIcon } from '../../../../shared/icons/MATH/IntegralABIcon/IntegralABIcon'
 import { Locale, useText } from '../../../../shared/translation'
-import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-
-enum SelectedLayout {
-  BASIC = 'basic',
-  ALGEBRA = 'algebra',
-}
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { SelectedLayout } from './types'
+import { getKeyboardGroup } from '../../helpers'
+import { getSelectOptions } from './helpers'
 
 export const AlgebraLayout = (props: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
   const t = useText()
+  const { width } = useWindowDimensions()
+  const selectOptions = getSelectOptions(selectedLayout, setSelectedLayout)
+  const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
+  const locale = t('locale') as Locale
 
-  const algebraKeyboardGroup =
-    KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.AlgebraAdvanced]
-  const basicKeyboardGroup =
-    KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlus]
+  const keyboardGroups = useMemo(() => {
+    const algebra = getKeyboardGroup(locale, KeyboardType.AlgebraAdvanced)
+    const basic = getKeyboardGroup(
+      locale,
+      isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
+    )
 
-  const KEYBOARD_GROUPS = useMemo(
-    () =>
-      new Map([
-        [SelectedLayout.BASIC, basicKeyboardGroup],
-        [SelectedLayout.ALGEBRA, algebraKeyboardGroup],
-      ]),
-    [],
-  )
+    return new Map([
+      [SelectedLayout.BASIC, basic],
+      [SelectedLayout.ALGEBRA, algebra],
+    ])
+  }, [locale, isDesktop])
 
-  const selectOptions = useMemo(() => {
-    return [
-      {
-        title: (
-          <AlgebraIcon
-            color={selectedLayout === SelectedLayout.BASIC ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={16}
-          />
-        ),
-        key: '1',
-      },
-      {
-        title: (
-          <IntegralABIcon
-            color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={20}
-          />
-        ),
-        key: '2',
-      },
-    ]
-  }, [selectedLayout])
+  const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 
   return (
     <View style={styles.container}>
-      <SelectGroup
-        numOfRows={2}
-        options={selectOptions}
-        size={SelectOptionSize.SMALL}
-        style={{
-          container: styles.optionContainer,
-        }}
-        color={props.color}
-        selectedOptions={[
-          selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
-        ]}
-        onOptionChange={(option) => {
-          setSelectedLayout(option.key === '1' ? SelectedLayout.BASIC : SelectedLayout.ALGEBRA)
-        }}
-      />
-      <KeysList
-        keys={KEYBOARD_GROUPS.get(selectedLayout)?.keys || []}
-        numOfRows={3}
-        {...props}
-        style={{
-          container: styles.keysContainer,
-          option: {
-            button: styles.keyButton,
-            text: [styles.keyText, selectedLayout === SelectedLayout.ALGEBRA && { fontSize: 11 }],
-            ...(IS_MOBILE && { container: { flexBasis: 53, maxWidth: 53 } }),
-          },
-        }}
-      />
+      {isDesktop && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
+          style={{
+            container: styles.optionContainer,
+            option: { container: styles.option },
+          }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
+          ]}
+        />
+      )}
+      <KeysList keys={currentKeys} numOfRows={3} {...props} />
     </View>
   )
 }
@@ -94,26 +60,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 16,
     paddingRight: 16,
-    width: 575,
-  },
-  keyButton: {
-    minWidth: 43,
-    maxWidth: 58,
-  },
-  keyText: {
-    fontWeight: 700,
-    fontSize: 14,
-  },
-  keysContainer: {
-    gap: 9,
   },
   optionContainer: {
     flexGrow: 0,
     flexShrink: 0,
     flexBasis: IS_MOBILE ? 60 : 'auto',
     width: 'auto',
-    paddingRight: 16,
+    paddingRight: 18,
     borderRightWidth: 1,
     borderRightColor: COLORS.NEUTRAL_3,
+    maxWidth: 65,
+    gap: 9,
+  },
+  option: {
+    flexBasis: 45,
+    width: 44,
   },
 })

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

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react'
+import { COLORS } from '@magmamath/react-native-ui'
+import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
+import { IntegralABIcon } from '../../../../shared/icons/keyboard/IntegralABIcon/IntegralABIcon'
+import { SelectedLayout } from './types'
+
+type LayoutOption = {
+  key: SelectedLayout
+  title: ReactNode
+  onPressIn: () => void
+}
+
+export function getSelectOptions(
+  selectedLayout: SelectedLayout,
+  setSelectedLayout: (layout: SelectedLayout) => void,
+): LayoutOption[] {
+  return [
+    {
+      key: SelectedLayout.BASIC,
+      title: (
+        <AlgebraIcon
+          color={selectedLayout === SelectedLayout.BASIC ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+          size={22}
+        />
+      ),
+      onPressIn: () => setSelectedLayout(SelectedLayout.BASIC),
+    },
+    {
+      key: SelectedLayout.ALGEBRA,
+      title: (
+        <IntegralABIcon
+          color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+          size={25}
+        />
+      ),
+      onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
+    },
+  ]
+}

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

@@ -0,0 +1,35 @@
+import { MATH_INTEGRALS_AND_DERIVATIVES } from '../../types/MathKeysGroups/calculusOperators'
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_SPECIAL_OPERATORS } from '../../types/MathKeysGroups/specialOperators'
+import {
+  MATH_BASIC_TRIGONOMETRIC_FUNCTIONS,
+  MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS,
+} from '../../types/MathKeysGroups/trigonometric'
+import { KeyboardGroup } from '../../types/types'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+
+export const MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.ALGEBRA,
+  keys: [
+    MATH_INTEGRALS_AND_DERIVATIVES.INTEGRAL,
+    MATH_BASIC_OPERATORS.SUM,
+    MATH_BASIC_OPERATORS.APPROXIMATELY_EQUAL,
+    MATH_SPECIAL_OPERATORS.LIM,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.SIN,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCSIN,
+    MATH_BASIC_OPERATORS.INTERVAL,
+    MATH_INTEGRALS_AND_DERIVATIVES.DEFINITEINTEGRAL,
+    MATH_BASIC_OPERATORS.INFINITY,
+    MATH_BASIC_OPERATORS.SIMILARITY,
+    MATH_SPECIAL_OPERATORS.LN,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.COS,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCCOS,
+    MATH_BASIC_OPERATORS.ABSOLUTE_VALUE,
+    MATH_INTEGRALS_AND_DERIVATIVES.DOUBLEINTEGRAL,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.NOT_EQUAL,
+    MATH_SPECIAL_OPERATORS.LOG,
+    MATH_BASIC_TRIGONOMETRIC_FUNCTIONS.TAN,
+    MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS.ARCTAN,
+  ],
+}

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

@@ -0,0 +1,4 @@
+export enum SelectedLayout {
+  BASIC = 'basic',
+  ALGEBRA = 'algebra',
+}

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

@@ -1,28 +1,26 @@
 import React, { PropsWithChildren } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
-import { KeyboardLayoutProps } from '../../types/types'
-import { MATH_ENTRY_BASIC_KEYBOARD_GROUP } from './keyboardGroup'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { Locale, useText } from '../../../../shared/translation'
+import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keyboardGroupsByLocale'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
-  const keys = props.children
-    ? MATH_ENTRY_BASIC_KEYBOARD_GROUP.keys
-    : MATH_ENTRY_BASIC_KEYBOARD_GROUP.keys.slice(0, -1)
+  const t = useText()
+  const keysByLocale = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.Basic]
+  const keys = props.children ? keysByLocale.keys : keysByLocale.keys.slice(0, -1)
+  const { width } = useWindowDimensions()
+  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
+
+  if (isMobile && !props.children) {
+    return null
+  }
+
   return (
     <View style={styles.container}>
-      <KeysList
-        keys={keys}
-        numOfRows={2}
-        {...props}
-        style={{
-          container: styles.keysContainer,
-          option: {
-            button: styles.keyOption,
-            ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
-          },
-        }}
-      />
+      <KeysList keys={keys} numOfRows={2} {...props} />
       {props.children || null}
     </View>
   )
@@ -38,10 +36,4 @@ const styles = StyleSheet.create({
     height: '100%',
     paddingRight: 16,
   },
-  keysContainer: {
-    gap: 9,
-  },
-  keyOption: {
-    width: 42,
-  },
 })

package/src/features/keyboard/components/BasicLayout/CurrencyBasicLayout.tsx

@@ -1,39 +1,17 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
-import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { getKeyboardGroup } from '../../helpers'
 
 export const CurrencyBasicLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
-  const keysGroup = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicCurrency]
+  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicCurrency)
 
   return (
     <BasicLayout {...props}>
-      <KeysList
-        keys={keysGroup.keys}
-        numOfRows={keysGroup.keys.length}
-        style={{
-          container: styles.keysContainer,
-          option: {
-            text: styles.optionText,
-            ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
-          },
-        }}
-        {...props}
-      />
+      <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
     </BasicLayout>
   )
 }
-
-const styles = StyleSheet.create({
-  optionText: {
-    width: 25,
-  },
-  keysContainer: {
-    gap: 9,
-  },
-})

package/src/features/keyboard/components/BasicLayout/TimeBasicLayout.tsx

@@ -4,12 +4,12 @@ import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { useText, Locale } from '../../../../shared/translation'
-import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
+import { getKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
-  const keysGroup = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicTime]
+  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicTime)
 
   return (
     <BasicLayout {...props}>
@@ -18,10 +18,10 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
         numOfRows={keysGroup.numOfRows || keysGroup.keys.length}
         style={{
           option: {
-            text: styles.keysText,
-            ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
+            text: styles.text,
+            button: styles.button,
+            container: styles.container,
           },
-          container: styles.keysContainer,
         }}
         {...props}
       />
@@ -30,13 +30,13 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
 }
 
 const styles = StyleSheet.create({
-  optionContainer: {
-    flex: 1,
+  button: {
+    width: IS_MOBILE ? 50 : 45,
   },
-  keysContainer: {
-    gap: 9,
+  container: {
+    flexBasis: IS_MOBILE ? 55 : 'auto',
   },
-  keysText: {
+  text: {
     fontSize: 14,
     fontWeight: 700,
   },

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

@@ -0,0 +1,60 @@
+import { KeyboardGroup } from '../../types/types'
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_CURRENCY_UNITS, MATH_TIME_UNITS } from '../../types/MathKeysGroups/units'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+
+export const MATH_ENTRY_BASIC_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.DIVISION,
+    MATH_BASIC_OPERATORS.COMMA,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_SW,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.DIVISION,
+    MATH_BASIC_OPERATORS.DOT,
+  ],
+}
+
+export const MATH_TIME_SW_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.TIME_SW,
+  numOfRows: 3,
+  keys: [MATH_TIME_UNITS.S, MATH_TIME_UNITS.M, MATH_TIME_UNITS.H],
+}
+
+export const MATH_TIME_US_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.TIME_US,
+  numOfRows: 3,
+  keys: [
+    MATH_BASIC_OPERATORS.COLON,
+    MATH_TIME_UNITS.S,
+    MATH_TIME_UNITS.AM,
+    MATH_TIME_UNITS.M,
+    MATH_TIME_UNITS.PM,
+    MATH_TIME_UNITS.H,
+  ],
+}
+
+export const MATH_CURRENCY_SW_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.CURRENCY_SW,
+  keys: [MATH_CURRENCY_UNITS.KRONE, MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.POUND],
+}
+export const MATH_CURRENCY_UK_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.CURRENCY_UK,
+  keys: [MATH_CURRENCY_UNITS.POUND, MATH_CURRENCY_UNITS.PESO],
+}
+export const MATH_CURRENCY_US_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.CURRENCY_US,
+  keys: [MATH_CURRENCY_UNITS.DOLLAR, MATH_CURRENCY_UNITS.CENT],
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { KeysList } from '../KeysList/KeysList'
+import { StyleSheet, View } from 'react-native'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { Locale, useText } from '../../../../shared/translation'
+import { getKeyboardGroup } from '../../helpers'
+
+export const BasicPlusLayout = (props: KeyboardLayoutProps) => {
+  const t = useText()
+  const locale = t('locale') as Locale
+  const keysGroup = getKeyboardGroup(locale, KeyboardType.BasicPlus)
+
+  return (
+    <View style={styles.container}>
+      <KeysList keys={keysGroup.keys} numOfRows={3} {...props} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 16,
+    paddingRight: 16,
+  },
+})