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

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

@@ -1,18 +1,28 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
-import { KeyboardLayoutProps } from '../../types'
-import { MATH_ENTRY_BASIC_US_EXTENDED } from './keyboardGroups'
+import { KeyboardLayoutProps, KeyboardType } from '../../types'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
+import { Locale } from '@magmamath/students-features'
 
 export const BasicExtendedLayout = (props: KeyboardLayoutProps) => {
+  const t = useText()
+  const keysGroup = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtended]
+
   return (
     <View style={styles.container}>
       <KeysList
-        keys={MATH_ENTRY_BASIC_US_EXTENDED.keys}
+        keys={keysGroup.keys}
         numOfRows={3}
         style={{
           container: styles.keysContainer,
-          option: { button: styles.option, text: styles.text },
+          option: {
+            button: styles.option,
+            text: styles.text,
+            ...(IS_MOBILE && { container: IS_MOBILE && { flexBasis: 50 } }),
+          },
         }}
         {...props}
       />
@@ -36,5 +46,4 @@ const styles = StyleSheet.create({
   text: {
     fontStyle: 'italic',
   },
-  optionContainer: {},
 })

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

@@ -1,18 +1,28 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
-import { MATH_ENTRY_BASIC_EXTENDED_PLUS } from './keyboardGroups'
-import { KeyboardLayoutProps } from '../../types'
+import { KeyboardLayoutProps, KeyboardType } from '../../types'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { useText } from '../../../../shared/translation'
+import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
+import { Locale } from '@magmamath/students-features'
 
 export const BasicExtendedPlusLayout = (props: KeyboardLayoutProps) => {
+  const t = useText()
+  const keysGroup = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlus]
+
   return (
     <View style={styles.container}>
       <KeysList
-        keys={MATH_ENTRY_BASIC_EXTENDED_PLUS.keys}
+        keys={keysGroup.keys}
         numOfRows={3}
         style={{
           container: styles.keysContainer,
-          option: { button: styles.option, text: styles.text },
+          option: {
+            button: styles.option,
+            text: styles.text,
+            ...(IS_MOBILE && { container: { flexBasis: 50, maxWidth: 50 } }),
+          },
         }}
         {...props}
       />

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

@@ -3,6 +3,7 @@ import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
 import { KeyboardLayoutProps } from '../../types'
 import { MATH_ENTRY_BASIC_KEYBOARD_GROUP } from './keyboardGroup'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
   const keys = props.children
@@ -14,7 +15,13 @@ export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
         keys={keys}
         numOfRows={2}
         {...props}
-        style={{ container: styles.keysContainer, option: { button: styles.keyOption } }}
+        style={{
+          container: styles.keysContainer,
+          option: {
+            button: styles.keyOption,
+            ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
+          },
+        }}
       />
       {props.children || null}
     </View>

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

@@ -5,6 +5,7 @@ import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types'
 import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const CurrencyBasicLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
@@ -15,7 +16,13 @@ export const CurrencyBasicLayout = (props: KeyboardLayoutProps) => {
       <KeysList
         keys={keysGroup.keys}
         numOfRows={keysGroup.keys.length}
-        style={{ container: styles.keysContainer, option: { text: styles.optionText } }}
+        style={{
+          container: styles.keysContainer,
+          option: {
+            text: styles.optionText,
+            ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
+          },
+        }}
         {...props}
       />
     </BasicLayout>

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

@@ -5,6 +5,7 @@ import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types'
 import { useText, Locale } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
@@ -16,7 +17,10 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
         keys={keysGroup.keys}
         numOfRows={keysGroup.numOfRows || keysGroup.keys.length}
         style={{
-          option: { container: styles.optionContainer, text: styles.keysText },
+          option: {
+            text: styles.keysText,
+            ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
+          },
           container: styles.keysContainer,
         }}
         {...props}

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

@@ -35,7 +35,7 @@ export const MATH_TIME_US_KEYBOARD_GROUP: KeyboardGroup = {
 
 export const MATH_CURRENCY_SW_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-currency-sw',
-  keys: [MATH_CURRENCY_UNITS.KRONE, MATH_CURRENCY_UNITS.KRONE, MATH_TIME_UNITS.H],
+  keys: [MATH_CURRENCY_UNITS.KRONE, MATH_CURRENCY_UNITS.EURO, MATH_CURRENCY_UNITS.POUND],
 }
 export const MATH_CURRENCY_UK_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-currency-uk',

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

@@ -10,15 +10,13 @@ import {
 import { COLORS, SelectOptionColor } from '@magmamath/react-native-ui'
 import { Numpad } from './Numpad/Numpad'
 import { getLayoutByCharType } from '../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../types'
+import { KeyboardKeyValue } from '../types'
 
 type KeyboardProps = {
-  onKeyPress: ({ katexValue, mathliveValue }: KeyboardKeyValue) => void
+  onKeyPress: ({ katexValue, mathliveValue, isSpecialSymbol }: KeyboardKeyValue) => void
   characterType?: number
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
-  onBackspacePress?: () => void
-  onSpecialKeyPress?: (value: KeyboardKey) => void
   visible?: boolean
   isSpecialButtonsDisabled?: boolean
   isDisabled?: boolean
@@ -73,5 +71,6 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     width: 'auto',
     overflow: 'hidden',
+    minHeight: 155,
   },
 })

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

@@ -7,7 +7,6 @@ import {
   SelectOptionSize,
 } from '@magmamath/react-native-ui'
 import { KeyboardKey, KeyboardLayoutProps } from '../../types'
-import { MathSpecialOperator } from '../../types/MathKeysGroups/specialOperators'
 import { DISABLED_KEYS } from '../../constants/keysValues'
 
 type KeysListProps = {
@@ -25,8 +24,6 @@ export const KeysList = ({
   numOfRows,
   style,
   onKeyPress,
-  onSpecialKeyPress,
-  onBackspacePress,
   isSpecialButtonsDisabled,
   isDisabled,
 }: KeysListProps) => {
@@ -56,18 +53,11 @@ export const KeysList = ({
       onOptionChange={(option) => {
         const key = keys.find((k) => k.katexValue === option.key)
         if (!key) return
-        if (key.katexValue === MathSpecialOperator.BACKSPACE.toLowerCase()) {
-          onBackspacePress?.()
-          return
-        }
-        if (key.isSpecialSymbol) {
-          onSpecialKeyPress?.({
-            katexValue: key.katexValue,
-            mathliveValue: key.mathliveValue,
-          })
-          return
-        }
-        onKeyPress?.({ katexValue: key.katexValue, mathliveValue: key.mathliveValue })
+        onKeyPress?.({
+          katexValue: key.katexValue,
+          mathliveValue: key.mathliveValue,
+          isSpecialSymbol: key.isSpecialSymbol,
+        })
       }}
     />
   )

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

@@ -5,6 +5,7 @@ import { COLORS, SPACING } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const Numpad = (props: KeyboardLayoutProps) => {
   const t = useText()
@@ -17,7 +18,11 @@ export const Numpad = (props: KeyboardLayoutProps) => {
         numOfRows={3}
         style={{
           container: styles.keysContainer,
-          option: { text: styles.keyText, button: styles.keyButton },
+          option: {
+            text: styles.keyText,
+            button: styles.keyButton,
+            ...(IS_MOBILE && { container: { flexBasis: 45 } }),
+          },
         }}
         {...props}
       />

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, TabGroup, TabOptionProps, TabVariant } from '@magmamath/react-native-ui'
+import { COLORS, TabGroup, TabOptionProps, TabVariant, IS_MOBILE } from '@magmamath/react-native-ui'
 import {
   KEYBOARD_UNITS_GROUPS_BY_LOCALE,
   KeyboardUnitsGroupType,
@@ -38,7 +38,11 @@ export const UnitTabs = ({ activeTab, tabs, onTabChange, ...props }: UnitTabsPro
               numOfRows={1}
               style={{
                 container: styles.keysContainer,
-                option: { button: styles.option, text: styles.text },
+                option: {
+                  button: styles.option,
+                  text: styles.text,
+                  ...(IS_MOBILE && { container: { flexBasis: 58, maxWidth: 58 } }),
+                },
               }}
               {...props}
             />

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

@@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native'
 import {
   COLORS,
   FONT_FAMILY,
+  IS_MOBILE,
   RulerIcon,
   SelectGroup,
   SelectOptionSize,
@@ -112,6 +113,8 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
     ]
   }, [activeTab, selectedLayout])
 
+  console.log('IS_MOBILE', IS_MOBILE)
+
   return (
     <View style={styles.container}>
       <SelectGroup
@@ -120,6 +123,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
         size={SelectOptionSize.SMALL}
         style={{
           container: styles.optionContainer,
+          option: { ...(IS_MOBILE && { container: { flexBasis: 45 } }) },
         }}
         color={props.color}
         selectedOptions={[
@@ -143,7 +147,13 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           keys={basicExtendedKeys.keys}
           numOfRows={3}
           {...props}
-          style={{ container: styles.basicExtendedContainer, option: { button: styles.key } }}
+          style={{
+            container: styles.basicExtendedContainer,
+            option: {
+              button: styles.key,
+              ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
+            },
+          }}
         />
       )}
     </View>

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

@@ -1,6 +1,7 @@
 import { KeyboardGroup, KeyboardKey, KeyboardType } from '../types'
 import {
   MATH_CURRENCY_SW_KEYBOARD_GROUP,
+  MATH_CURRENCY_UK_KEYBOARD_GROUP,
   MATH_CURRENCY_US_KEYBOARD_GROUP,
   MATH_ENTRY_BASIC_KEYBOARD_GROUP,
   MATH_TIME_SW_KEYBOARD_GROUP,
@@ -60,7 +61,7 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
     },
-    [KeyboardType.BasicCurrency]: MATH_CURRENCY_SW_KEYBOARD_GROUP,
+    [KeyboardType.BasicCurrency]: MATH_CURRENCY_UK_KEYBOARD_GROUP,
     [KeyboardType.BasicTime]: MATH_TIME_SW_KEYBOARD_GROUP,
     [KeyboardType.AlgebraAdvanced]: MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP,
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,

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

@@ -19,7 +19,7 @@ export const MATH_INTEGRALS_AND_DERIVATIVES: MathKeysGroup<
 > = {
   [MathIntegralsAndDerivativesOperator.INTEGRAL]: {
     icon: <IntegralIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '\\int',
+    mathliveValue: 'test',
     katexValue: '∫',
   },
   [MathIntegralsAndDerivativesOperator.DOUBLE_INTEGRAL]: {
@@ -31,8 +31,8 @@ export const MATH_INTEGRALS_AND_DERIVATIVES: MathKeysGroup<
     icon: (
       <DefiniteIntegralIcon {...DEFAULT_KEY_ICON_PROPS} size={20} extraColor={COLORS.NEUTRAL_6} />
     ),
-    mathliveValue: '$\\int_{#@}^{\\placeholder{}}$',
-    katexValue: '∫',
+    mathliveValue: '\\int_{\\placeholder{lower}}^{\\placeholder{upper}}',
+    katexValue: '\\int_{a}^{b}',
   },
   [MathIntegralsAndDerivativesOperator.DERIVATIVE]: {
     icon: <DerivativeIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,

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

@@ -33,7 +33,7 @@ export const MATH_SPECIAL_OPERATORS: MathKeysGroup<typeof MathSpecialOperator> =
     katexValue: 'log₁₀',
   },
   [MathSpecialOperator.BACKSPACE]: {
-    icon: <BackspaceIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    icon: <BackspaceIcon {...DEFAULT_KEY_ICON_PROPS} size={20} />,
     mathliveValue: 'backspace',
     katexValue: 'backspace',
   },

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

@@ -24,17 +24,17 @@ export const MATH_BASIC_TRIGONOMETRIC_FUNCTIONS: MathKeysGroup<
   [MathBasicTrigonometricFunction.SIN]: {
     label: 'sin',
     mathliveValue: '$\\sin(\\placeholder{})$',
-    katexValue: 'sin',
+    katexValue: 'sin()',
   },
   [MathBasicTrigonometricFunction.COS]: {
     label: 'cos',
     mathliveValue: '$\\cos(\\placeholder{})$',
-    katexValue: 'cos',
+    katexValue: 'cos()',
   },
   [MathBasicTrigonometricFunction.TAN]: {
     label: 'tan',
     mathliveValue: '$\\tan(\\placeholder{})$',
-    katexValue: 'tan',
+    katexValue: 'tan()',
   },
   [MathBasicTrigonometricFunction.COT]: {
     label: 'cot',
@@ -59,22 +59,22 @@ export const MATH_INVERSE_TRIGONOMETRIC_FUNCTIONS: MathKeysGroup<
   [MathInverseTrigonometricFunction.ARCSIN]: {
     label: 'arcsin',
     mathliveValue: '$\\arcsin(\\placeholder{})$',
-    katexValue: 'arcsin',
+    katexValue: 'arcsin()',
   },
   [MathInverseTrigonometricFunction.ARCCOS]: {
     label: 'arccos',
     mathliveValue: '$\\arccos(\\placeholder{})$',
-    katexValue: 'arccos',
+    katexValue: 'arccos()',
   },
   [MathInverseTrigonometricFunction.ARCTAN]: {
     label: 'arctan',
     mathliveValue: '$\\arctan(\\placeholder{})$',
-    katexValue: 'arctan',
+    katexValue: 'arctan()',
   },
   [MathInverseTrigonometricFunction.ARCCOT]: {
     label: 'arccot',
     mathliveValue: '$\\operatorname{arccot}(\\placeholder{})$',
-    katexValue: 'arccot',
+    katexValue: 'arccot()',
   },
   [MathInverseTrigonometricFunction.ARCSEC]: {
     label: 'arcsec',

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

@@ -108,7 +108,7 @@ export const MATH_CURRENCY_UNITS: MathKeysGroup<typeof MathCurrencyUnit> = {
   [MathCurrencyUnit.DOLLAR]: {
     icon: <DollarIcon {...DEFAULT_KEY_ICON_PROPS} />,
     mathliveValue: '\\$',
-    katexValue: '\\$',
+    katexValue: '\$',
   },
   [MathCurrencyUnit.EURO]: {
     icon: <EuroIcon {...DEFAULT_KEY_ICON_PROPS} />,
@@ -132,8 +132,8 @@ export const MATH_CURRENCY_UNITS: MathKeysGroup<typeof MathCurrencyUnit> = {
   },
   [MathCurrencyUnit.CENT]: {
     icon: <CentIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: 'c',
-    katexValue: 'c',
+    mathliveValue: '¢',
+    katexValue: '¢',
   },
 }
 
@@ -300,9 +300,9 @@ export const MATH_VOLUME_UNITS: MathKeysGroup<typeof MathVolumeUnit> = {
     katexValue: 'yd^3',
   },
   [MathVolumeUnit.MILLILITER]: {
-    label: 'mL',
+    label: 'ml',
     mathliveValue: '\\mathrm{mL}',
-    katexValue: 'mL',
+    katexValue: 'ml',
   },
   [MathVolumeUnit.LITER]: {
     label: 'L',

package/src/features/keyboard/types.ts

@@ -23,6 +23,7 @@ export type KeyboardKey = {
 export type KeyboardKeyValue = {
   katexValue: string
   mathliveValue?: string
+  isSpecialSymbol?: boolean
 }
 
 export type KeyboardGroup = {
@@ -34,8 +35,6 @@ export type KeyboardGroup = {
 
 export type KeyboardLayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
-  onSpecialKeyPress?: (key: KeyboardKeyValue) => void
-  onBackspacePress?: () => void
   color?: SelectOptionColor
   isSpecialButtonsDisabled?: boolean
   isDisabled?: boolean