@magmamath/students-features 0.5.6 → 0.5.7-rc-0

package/src/features/problemSelector/components/ProblemSelectorButton.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import { UnreadMessagesBadge } from '@magmamath/students-features'
+import {
+  Button,
+  ButtonSize,
+  ButtonStates,
+  ButtonVariant,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+import { BADGE_COORDINATES, BUTTON_SIZE, COLOR_SCHEME_MAP, ICON_SIZE } from '../constants'
+import { LockIcon } from '../../../shared/icons/LockIcon'
+
+import { ProblemSelectorButtonProps } from '../types'
+
+export const ProblemSelectorButton = ({
+  text,
+  state,
+  onClick,
+  badgeValue,
+  locked,
+}: ProblemSelectorButtonProps) => {
+  const customColorScheme = COLOR_SCHEME_MAP[state]
+
+  return (
+    <View style={styles.wrapper}>
+      <Button
+        variant={ButtonVariant.PRIMARY}
+        size={ButtonSize.MEDIUM}
+        customColorScheme={customColorScheme}
+        onPress={onClick}
+        style={{
+          button: styles.button,
+        }}
+        disabled={locked}
+        icon={
+          locked ? (
+            <LockIcon {...ICON_SIZE} color={customColorScheme[ButtonStates.DISABLED]?.color} />
+          ) : (
+            <Typography
+              variant="h2"
+              style={{ color: customColorScheme[ButtonStates.DEFAULT]?.color }}
+            >
+              {text ?? ''}
+            </Typography>
+          )
+        }
+      />
+
+      {typeof badgeValue === 'number' && (
+        <UnreadMessagesBadge
+          badgeContent={badgeValue !== 0 ? badgeValue : undefined}
+          withBorder
+          style={[
+            styles.badge,
+            {
+              top: badgeValue ? 0 : BADGE_COORDINATES.top,
+              right: badgeValue ? 0 : BADGE_COORDINATES.right,
+            },
+          ]}
+        />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrapper: { position: 'relative' },
+  badge: { position: 'absolute' },
+  button: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderWidth: 2.75,
+  },
+})

package/src/features/problemSelector/constants.ts

@@ -0,0 +1,216 @@
+import { ButtonColorPreset, ButtonStates, COLORS } from '@magmamath/react-native-ui'
+import { ProblemSelectorButtonState } from './types'
+
+export const BUTTON_SIZE = 49.5
+export const BADGE_COORDINATES = { top: 4, right: 4 }
+export const ICON_SIZE = { width: 22, height: 24 }
+export const PROBLEM_SELECTOR_CONTENT_WIDTH = 265
+
+export const PROBLEM_SELECTOR_BUTTON_STATE = {
+  SELECTED: 'selected',
+  SOLVED: 'solved',
+  SOLVED_FIRST_ATTEMPT: 'solved-first-attempt',
+  NOT_SOLVED: 'not-solved',
+  MISTAKE: 'mistake',
+  EXAM: 'exam',
+} as const
+
+export const COLOR_SCHEME_MAP: Record<ProblemSelectorButtonState, ButtonColorPreset> = {
+  [PROBLEM_SELECTOR_BUTTON_STATE.SELECTED]: {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: COLORS.BLUE_1,
+      borderColor: COLORS.PRIMARY_BLUE,
+      color: COLORS.PRIMARY_BLUE,
+      raiseColor: COLORS.PRIMARY_BLUE,
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: COLORS.BLUE_1,
+      borderColor: COLORS.BLUE_4,
+      color: COLORS.BLUE_4,
+      raiseColor: COLORS.BLUE_4,
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: COLORS.BLUE_1,
+      borderColor: COLORS.BLUE_4,
+      color: COLORS.BLUE_4,
+      raiseColor: COLORS.BLUE_4,
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: COLORS.BLUE_1,
+      borderColor: COLORS.BLUE_4,
+      color: COLORS.BLUE_4,
+      raiseColor: COLORS.BLUE_4,
+    },
+    [ButtonStates.DISABLED]: {
+      backgroundColor: COLORS.BLUE_1,
+      borderColor: COLORS.BLUE_3,
+      color: COLORS.BLUE_3,
+      raiseColor: COLORS.BLUE_3,
+    },
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.MISTAKE]: {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: COLORS.PRIMARY_RED,
+      borderColor: COLORS.PRIMARY_RED,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PRIMARY_RED,
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: COLORS.RED_4,
+      borderColor: COLORS.RED_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.RED_4,
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: COLORS.RED_4,
+      borderColor: COLORS.RED_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.RED_4,
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: COLORS.RED_4,
+      borderColor: COLORS.RED_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.RED_4,
+    },
+    [ButtonStates.DISABLED]: {
+      backgroundColor: COLORS.RED_3,
+      borderColor: COLORS.RED_3,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.RED_3,
+    },
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.SOLVED]: {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: COLORS.PRIMARY_YELLOW,
+      borderColor: COLORS.PRIMARY_YELLOW,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PRIMARY_YELLOW,
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: COLORS.YELLOW_4,
+      borderColor: COLORS.YELLOW_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.YELLOW_4,
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: COLORS.YELLOW_4,
+      borderColor: COLORS.YELLOW_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.YELLOW_4,
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: COLORS.YELLOW_4,
+      borderColor: COLORS.YELLOW_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.YELLOW_4,
+    },
+    [ButtonStates.DISABLED]: {
+      backgroundColor: COLORS.YELLOW_3,
+      borderColor: COLORS.YELLOW_3,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.YELLOW_3,
+    },
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.SOLVED_FIRST_ATTEMPT]: {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: COLORS.PRIMARY_GREEN,
+      borderColor: COLORS.PRIMARY_GREEN,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PRIMARY_GREEN,
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: COLORS.GREEN_4,
+      borderColor: COLORS.GREEN_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.GREEN_4,
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: COLORS.GREEN_4,
+      borderColor: COLORS.GREEN_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.GREEN_4,
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: COLORS.GREEN_4,
+      borderColor: COLORS.GREEN_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.GREEN_4,
+    },
+    [ButtonStates.DISABLED]: {
+      backgroundColor: COLORS.GREEN_3,
+      borderColor: COLORS.GREEN_3,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.GREEN_3,
+    },
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.NOT_SOLVED]: {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: COLORS.NEUTRAL_4,
+      borderColor: COLORS.NEUTRAL_4,
+      color: COLORS.NEUTRAL_10,
+      raiseColor: COLORS.NEUTRAL_4,
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: COLORS.NEUTRAL_3,
+      borderColor: COLORS.NEUTRAL_3,
+      color: COLORS.NEUTRAL_10,
+      raiseColor: COLORS.NEUTRAL_3,
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: COLORS.NEUTRAL_3,
+      borderColor: COLORS.NEUTRAL_3,
+      color: COLORS.NEUTRAL_10,
+      raiseColor: COLORS.NEUTRAL_3,
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: COLORS.NEUTRAL_3,
+      borderColor: COLORS.NEUTRAL_3,
+      color: COLORS.NEUTRAL_10,
+      raiseColor: COLORS.NEUTRAL_3,
+    },
+    [ButtonStates.DISABLED]: {
+      backgroundColor: COLORS.NEUTRAL_3,
+      borderColor: COLORS.NEUTRAL_3,
+      color: COLORS.NEUTRAL_6,
+      raiseColor: COLORS.NEUTRAL_3,
+    },
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.EXAM]: {
+    [ButtonStates.DEFAULT]: {
+      backgroundColor: COLORS.PRIMARY_PURPLE,
+      borderColor: COLORS.PRIMARY_PURPLE,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PRIMARY_PURPLE,
+    },
+    [ButtonStates.HOVER]: {
+      backgroundColor: COLORS.PURPLE_4,
+      borderColor: COLORS.PURPLE_4,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PURPLE_4,
+    },
+    [ButtonStates.ACTIVE]: {
+      backgroundColor: COLORS.PRIMARY_PURPLE,
+      borderColor: COLORS.PRIMARY_PURPLE,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PRIMARY_PURPLE,
+    },
+    [ButtonStates.PRESSED]: {
+      backgroundColor: COLORS.PRIMARY_PURPLE,
+      borderColor: COLORS.PRIMARY_PURPLE,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PRIMARY_PURPLE,
+    },
+    [ButtonStates.DISABLED]: {
+      backgroundColor: COLORS.PURPLE_3,
+      borderColor: COLORS.PURPLE_3,
+      color: COLORS.NEUTRAL_1,
+      raiseColor: COLORS.PURPLE_3,
+    },
+  },
+}

package/src/features/problemSelector/index.ts

@@ -0,0 +1,3 @@
+export { ProblemSelector } from './components/ProblemSelector'
+export { PROBLEM_SELECTOR_BUTTON_STATE } from './constants'
+export type { ProblemSelectorButtonProps, ProblemSelectorButtonState } from './types'

package/src/features/problemSelector/types.ts

@@ -0,0 +1,13 @@
+import { PROBLEM_SELECTOR_BUTTON_STATE } from './constants'
+
+export type ProblemSelectorButtonState =
+  (typeof PROBLEM_SELECTOR_BUTTON_STATE)[keyof typeof PROBLEM_SELECTOR_BUTTON_STATE]
+
+export type ProblemSelectorButtonProps = {
+  key: string
+  text: string
+  state: ProblemSelectorButtonState
+  locked: boolean
+  onClick: () => void
+  badgeValue?: number
+}

package/src/index.ts

@@ -4,3 +4,4 @@ export * from './features/chatbot'
 export * from './features/feedback'
 export * from './features/celebrations'
 export * from './features/endOfAssignment'
+export * from './features/problemSelector'

package/src/shared/icons/LockIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS } from '@magmamath/react-native-ui'
+
+import { IconProps } from './icon.types'
+
+export const LockIcon = ({ width = 22, height = 24, color = COLORS.NEUTRAL_6 }: IconProps) => (
+  <Svg width={width} height={height} viewBox="0 0 22 24" fill="none">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.183 8.91H3.44A2.578 2.578 0 00.862 11.49v11.068a2.578 2.578 0 002.578 2.578h17.12a2.578 2.578 0 002.578-2.578V11.49a2.578 2.578 0 00-2.578-2.578h-.743c-.119-1.421-.391-3.307-1.374-4.897C17.304 2.172 15.303.864 12 .864c-3.304 0-5.304 1.308-6.443 3.15-.983 1.59-1.255 3.476-1.374 4.897zm2.008 0h11.618c-.12-1.303-.369-2.714-1.067-3.844C16.002 3.87 14.68 2.864 12 2.864c-2.68 0-4.003 1.006-4.742 2.202-.699 1.13-.947 2.54-1.067 3.845zm-2.75 2H20.56c.319 0 .578.26.578.579v11.068c0 .32-.26.578-.578.578H3.44a.578.578 0 01-.578-.578V11.49c0-.32.26-.578.578-.578z"
+      fill={color}
+    />
+  </Svg>
+)

package/src/shared/icons/Pi.tsx

@@ -3,8 +3,11 @@ import Svg, { Path } from 'react-native-svg'
 import { COLORS, IconProps } from '@magmamath/react-native-ui'
 
 function Pi({ size = 57, color = COLORS.NEUTRAL_8 }: IconProps) {
+  const actualSize = typeof size === 'number' ? size : 0
+  const height = actualSize * 0.8421
+
   return (
-    <Svg width={57} height={size * 0.8421} viewBox="0 0 57 48" fill="none">
+    <Svg width={57} height={height} viewBox="0 0 57 48" fill="none">
       <Path
         d="M2.311 10.528a5.23 5.23 0 00.244 7.63c2.166 1.926 5.52 1.836 7.572-.23l4.685-4.719a5.09 5.09 0 01.04-.04c.557-.55 1.37-.044 1.302.735a96.284 96.284 0 01-.666 5.732c-.546 3.688-1.358 7.523-2.543 10.924-1.209 3.468-2.669 6.084-4.272 7.7a5.23 5.23 0 00.246 7.63c2.167 1.925 5.52 1.835 7.572-.233 3.195-3.219 5.307-7.505 6.759-11.67 1.475-4.232 2.41-8.76 3.012-12.831.483-3.272.763-6.327.926-8.813a1.006 1.006 0 011.002-.942h2.357a1 1 0 011 1v23.505c0 6.436 5.464 11.367 11.84 11.367 7.233 0 13.389-5.587 13.389-12.831v-.872c0-3.093-2.6-5.315-5.443-5.315-2.843 0-5.443 2.222-5.443 5.315v.872c0 1.058-.958 2.202-2.502 2.202-.69 0-.955-.489-.955-.738V12.401a1 1 0 011-1h7.9c2.844 0 5.443-2.221 5.443-5.315 0-3.093-2.6-5.315-5.443-5.315H19.267c-4.614 0-9.059 1.803-12.27 5.038L2.31 10.528z"
         fill={color}

package/src/shared/icons/Valentine.tsx

@@ -3,8 +3,11 @@ import Svg, { Path } from 'react-native-svg'
 import { COLORS, IconProps } from '@magmamath/react-native-ui'
 
 function Valentine({ size = 57, color = COLORS.NEUTRAL_8 }: IconProps) {
+  const actualSize = typeof size === 'number' ? size : 0
+  const height = actualSize * 0.8421
+
   return (
-    <Svg width={size} height={size * 0.8421} viewBox="0 0 57 48" fill="none">
+    <Svg width={size} height={height} viewBox="0 0 57 48" fill="none">
       <Path
         d="M52.473 24.947L29.763 47.5a1.4 1.4 0 01-1.973 0L5.08 24.947A14.57 14.57 0 013.567 6.032C8.604-.884 18.487-1.994 24.931 3.633l2.924 2.554a1.4 1.4 0 001.842 0l2.924-2.554c6.444-5.627 16.327-4.517 21.363 2.399a14.57 14.57 0 01-1.511 18.915z"
         fill={color}

package/src/shared/icons/Winter.tsx

@@ -4,8 +4,12 @@ import Svg, { Path } from 'react-native-svg'
 import { COLORS, IconProps } from '@magmamath/react-native-ui'
 
 function Winter({ size = 50, color = COLORS.NEUTRAL_8 }: IconProps) {
+  const actualSize = typeof size === 'number' ? size : 0
+
+  const height = actualSize * 1.14
+
   return (
-    <Svg width={size} height={size * 1.14} viewBox="0 0 50 57" fill="none">
+    <Svg width={size} height={height} viewBox="0 0 50 57" fill="none">
       <Path
         fillRule="evenodd"
         clipRule="evenodd"