@magmamath/students-features 0.10.0 → 0.11.0-rc.0

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/constants.ts

@@ -5,4 +5,4 @@ export const DEFAULT_KEY_ICON_PROPS = {
   color: COLORS.NEUTRAL_9,
 } as const
 
-export const MOBILE_LAYOUT_WIDTH = 1280
+export const MOBILE_LAYOUT_WIDTH = 1200

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

@@ -31,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,
@@ -70,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 }
 }

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

@@ -7,6 +7,7 @@ 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'
 
 export const KEYBOARD_LAYOUTS = {
   [KeyboardType.AlgebraAdvanced]: {
@@ -18,10 +19,12 @@ export const KEYBOARD_LAYOUTS = {
       MyScriptMathCharacterTypes.ALGEBRA_GREEK,
       MyScriptMathCharacterTypes.GENERAL_MATH,
     ],
+    mobileBreakpoint: 1300,
   },
   [KeyboardType.Basic]: {
     Component: BasicLayout,
     characterTypes: [MyScriptMathCharacterTypes.NUMBERS_WHOLE],
+    mobileBreakpoint: 990,
   },
   [KeyboardType.BasicPlus]: {
     Component: BasicPlusLayout,
@@ -32,6 +35,7 @@ export const KEYBOARD_LAYOUTS = {
       MyScriptMathCharacterTypes.NUMBERS_AND_MULTIPLICATION,
       MyScriptMathCharacterTypes.OPERATORS,
       MyScriptMathCharacterTypes.PERCENT,
+      MyScriptMathCharacterTypes.NUMBERS_RATIONAL,
     ],
   },
   [KeyboardType.BasicTime]: {
@@ -54,8 +58,8 @@ export const KEYBOARD_LAYOUTS = {
     characterTypes: [
       MyScriptMathCharacterTypes.GEOM_ANGLES,
       MyScriptMathCharacterTypes.GEOM_COORDINATE,
-      MyScriptMathCharacterTypes.NUMBERS_RATIONAL,
     ],
+    mobileBreakpoint: 1220,
   },
 }
 
@@ -72,6 +76,19 @@ export function getLayoutByCharType(charType?: number) {
   return AlgebraLayout
 }
 
+export function getMobileBreakpointByCharType(charType?: number) {
+  if (!charType) {
+    return KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint
+  }
+
+  for (const layout of Object.values(KEYBOARD_LAYOUTS)) {
+    if (layout.characterTypes.includes(charType)) {
+      return 'mobileBreakpoint' in layout ? layout.mobileBreakpoint : MOBILE_LAYOUT_WIDTH
+    }
+  }
+  return KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint
+}
+
 export function isBasicPlusPlusLayout(charType?: number) {
   if (!charType) {
     return true

package/src/features/keyboard/helpers.ts

@@ -3,6 +3,7 @@ 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'
 
 export function getKeyboardGroup(locale: Locale, type: KeyboardType): KeyboardGroup {
   return KEYBOARD_GROUPS_BY_LOCALE[locale]?.[type] ?? MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP
@@ -16,3 +17,8 @@ export const getIsIpadOrIphoneDevice = () => {
   const isIpadOS = navigator?.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform)
   return isIOS || isIpadOS
 }
+
+export const isMobileWidth = (width: number, characterType?: number) => {
+  const layoutWidth = getMobileBreakpointByCharType(characterType)
+  return width <= layoutWidth
+}

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

@@ -42,6 +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 { RoundBracketLeftIcon } from '../../../../shared/icons/keyboard/RoundBracketLeftIcon/RoundBracketLeftIcon'
+import { RoundBracketRightIcon } from '../../../../shared/icons/keyboard/RoundBracketRightIcon/RoundBracketRightIcon'
 
 export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   ADDITION: {
@@ -110,7 +112,7 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   },
   COMMA: {
     icon: <CommaIcon {...DEFAULT_KEY_ICON_PROPS} size={22} />,
-    mathliveValue: ',',
+    mathliveValue: '{,}',
     katexValue: ',',
   },
   COLON: {
@@ -119,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: '⋅',
   },
@@ -251,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)$',
@@ -263,7 +275,7 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   },
   INTERVAL: {
     icon: <IntervalIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$\\left[, \\right]$',
+    mathliveValue: '$\\left[\\placeholder{},\\placeholder{}\\right]$',
     katexValue: '[ , ]',
   },
 })

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/openEnded/components/OpenEndedAttemptsLimit.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { View, StyleSheet, Text } from 'react-native'
+import { SPACING, BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui'
+
+type OEAttemptsLimitProps = {
+  text: string
+}
+
+export const OpenEndedAttemptsLimit = ({ text }: OEAttemptsLimitProps) => (
+  <View style={styles.container}>
+    <Text style={styles.text}>{text}</Text>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: SPACING[50],
+    paddingHorizontal: SPACING[200],
+    borderRadius: BORDER_RADIUS[300],
+    backgroundColor: COLORS.PRIMARY_RED,
+  },
+  text: {
+    fontSize: 14,
+    color: COLORS.NEUTRAL_1,
+  },
+})

package/src/features/openEnded/components/OpenEndedScoreLabel.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  Typography,
+  HeadingVariants,
+  SPACING,
+  BORDER_RADIUS,
+  COLORS,
+} from '@magmamath/react-native-ui'
+import { getScoreLabelColor } from '../oe.helpers'
+import { OpenEndedScoreLabelVariant } from '../oe.types'
+import { isWeb } from '../../../shared/common.constants'
+
+type OpenEndedScoreLabelProps = {
+  label: string
+  score: number | null
+  maxScore: number
+  disabled: boolean
+  variant: OpenEndedScoreLabelVariant
+}
+
+const SCORE_WIDTH = {
+  DEFAULT: isWeb ? 20 : 26,
+  LARGE: isWeb ? 26 : 30,
+} as const
+
+export const OpenEndedScoreLabel = ({
+  label,
+  score,
+  maxScore,
+  disabled,
+  variant,
+}: OpenEndedScoreLabelProps) => {
+  const colors = getScoreLabelColor({ variant, disabled })
+  const scoreContainerWidth =
+    score !== null && score >= 10 ? SCORE_WIDTH.LARGE : SCORE_WIDTH.DEFAULT
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.score, { width: scoreContainerWidth }]}>
+        <Typography
+          variant={HeadingVariants.H3}
+          style={[styles.scoreText, { color: colors.score }]}
+        >
+          {score}
+        </Typography>
+      </View>
+      <Typography
+        variant={HeadingVariants.H3}
+        style={[styles.maxScoreText, { color: colors.maxScore }]}
+      >
+        / {maxScore} {label}
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  score: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
+    borderWidth: 1,
+    borderRadius: BORDER_RADIUS[200],
+    borderColor: COLORS.NEUTRAL_5,
+    paddingVertical: isWeb ? SPACING[50] : 0,
+    paddingHorizontal: SPACING[100],
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  scoreText: {
+    textAlign: 'center',
+  },
+  maxScoreText: {
+    marginLeft: SPACING[200],
+  },
+})

package/src/features/openEnded/index.ts

@@ -0,0 +1,4 @@
+export * from './oe.helpers'
+export * from './oe.types'
+export { OpenEndedScoreLabel } from './components/OpenEndedScoreLabel'
+export { OpenEndedAttemptsLimit } from './components/OpenEndedAttemptsLimit'

package/src/features/openEnded/oe.helpers.ts

@@ -0,0 +1,31 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import { ColorValue } from '../../types/common.types'
+import { OpenEndedScoreLabelVariant } from './oe.types'
+
+type GetScoreLabelColorProps = {
+  variant: OpenEndedScoreLabelVariant
+  disabled: boolean
+}
+
+type ScoreLabelColors = {
+  score: ColorValue
+  maxScore: ColorValue
+}
+
+const scoreVariantToColor = (variant: OpenEndedScoreLabelVariant): ColorValue => {
+  const colors: Record<OpenEndedScoreLabelVariant, ColorValue> = {
+    [OpenEndedScoreLabelVariant.CORRECT]: COLORS.PRIMARY_YELLOW,
+    [OpenEndedScoreLabelVariant.FIRST_ATTEMPT]: COLORS.PRIMARY_GREEN,
+    [OpenEndedScoreLabelVariant.WRONG]: COLORS.PRIMARY_RED,
+    [OpenEndedScoreLabelVariant.DEFAULT]: COLORS.PRIMARY_BLUE,
+  }
+  return colors[variant] ?? COLORS.PRIMARY_BLUE
+}
+
+export const getScoreLabelColor = ({
+  variant,
+  disabled,
+}: GetScoreLabelColorProps): ScoreLabelColors => ({
+  score: disabled ? COLORS.NEUTRAL_6 : COLORS.NEUTRAL_9,
+  maxScore: disabled ? COLORS.NEUTRAL_6 : scoreVariantToColor(variant),
+})

package/src/features/openEnded/oe.types.ts

@@ -0,0 +1,6 @@
+export enum OpenEndedScoreLabelVariant {
+  CORRECT = 'CORRECT',
+  FIRST_ATTEMPT = 'FIRST_ATTEMPT',
+  WRONG = 'WRONG',
+  DEFAULT = 'DEFAULT',
+}

package/src/index.ts

@@ -9,4 +9,5 @@ export * from './features/problemSelector'
 export * from './features/gifCelebrations'
 export * from './features/exampleSolution'
 export * from './features/keyboard'
+export * from './features/openEnded'
 export * from './shared/icons'

package/src/lib/components/ConditionalWrapper.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentType, PropsWithChildren, ReactNode } from 'react'
+
+type ConditionalWrapperProps = {
+  children: ReactNode
+  withWrapper?: boolean
+  Wrapper?: ComponentType<PropsWithChildren>
+}
+
+export const ConditionalWrapper = ({ withWrapper, Wrapper, children }: ConditionalWrapperProps) => {
+  if (withWrapper && Wrapper) {
+    return <Wrapper>{children}</Wrapper>
+  }
+
+  return children
+}

package/src/lib/effector/createControllerEffect.ts

@@ -14,7 +14,7 @@ type ControlledRequestProps<P> = {
   abortAfter?: number
 }
 
-type RequestOptionalConfig = { signal?: AbortSignal }
+export type RequestOptionalConfig = { signal?: AbortSignal }
 
 export function controlledRequest<R = void, P = void>(
   request: (props: P, config?: RequestOptionalConfig) => Promise<R>,

package/src/shared/common.constants.ts

@@ -0,0 +1,3 @@
+import { Platform } from 'react-native'
+
+export const isWeb = Platform.OS === 'web'

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/localization/ca.json

@@ -37,6 +37,7 @@
     "length": "Length",
     "area": "Area",
     "volume": "Volume",
-    "weight": "Weight"
+    "weight": "Weight",
+    "time": "Time"
   }
 }

package/src/shared/translation/localization/de.json

@@ -37,6 +37,7 @@
     "length": "Länge",
     "area": "Fläche",
     "volume": "Volumen",
-    "weight": "Gewicht"
+    "weight": "Gewicht",
+    "time": "Zeit"
   }
 }

package/src/shared/translation/localization/en.json

@@ -37,6 +37,7 @@
     "length": "Length",
     "area": "Area",
     "volume": "Volume",
-    "weight": "Weight"
+    "weight": "Weight",
+    "time": "Time"
   }
 }

package/src/shared/translation/localization/gb.json

@@ -37,6 +37,7 @@
     "length": "Length",
     "area": "Area",
     "volume": "Volume",
-    "weight": "Weight"
+    "weight": "Weight",
+    "time": "Time"
   }
 }

package/src/shared/translation/localization/sct.json

@@ -37,6 +37,7 @@
     "length": "Length",
     "area": "Area",
     "volume": "Volume",
-    "weight": "Weight"
+    "weight": "Weight",
+    "time": "Time"
   }
 }

package/src/shared/translation/localization/sw.json

@@ -37,6 +37,7 @@
     "length": "Längd",
     "area": "Area",
     "volume": "Volym",
-    "weight": "Vikt"
+    "weight": "Vikt",
+    "time": "Tid"
   }
 }

package/src/types/common.types.ts

@@ -1,4 +1,8 @@
+import { COLORS } from '@magmamath/react-native-ui'
+
 export type Size = {
   width: number
   height: number
 }
+
+export type ColorValue = (typeof COLORS)[keyof typeof COLORS]