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

package/src/features/endOfAssignment/components/NoAnswer/NoAnswer.tsx

@@ -5,6 +5,7 @@ import { useUnit } from 'effector-react'
 import {
   Button,
   ButtonColor,
+  ButtonSize,
   ButtonVariant,
   COLORS,
   SPACING,
@@ -13,7 +14,6 @@ import {
 
 import { EOAModalContentProps } from '../../types'
 import { NoAnswerContent } from './NoAnswerContent'
-import { PracticeButton } from '../../ui/PracticeButton'
 import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
 import { KeyboardKeys } from '../../../../lib/constants'
 
@@ -22,17 +22,49 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
 
   const { stats, isExam, user } = popUpData ?? {}
 
-  const buttonColorScheme = isExam ? ButtonColor.YELLOW : ButtonColor.BLUE
-  const practiceButtonVisible = user?.practiceButtonVisible && (!isExam || !!user?.practiceMode)
+  function getButtons() {
+    const buttons = [
+      {
+        text: textContent.leftButtonText ?? '',
+        colorScheme: isExam ? ButtonColor.PURPLE : ButtonColor.BLUE,
+        onPress: () => model.hidePopUpAndLeave(),
+      },
+    ]
 
-  const handlePrimaryButtonPress = () => {
-    isExam ? onPracticePress?.() : model.goToFirstProblemPressed()
-    model.hidePopUp()
+    if (!isExam) {
+      buttons.push({
+        text: textContent.rightButtonText ?? '',
+        colorScheme: ButtonColor.BLUE,
+        onPress: () => {
+          model.goToFirstProblemPressed()
+          model.hidePopUp()
+        },
+      })
+      return buttons
+    }
+
+    const isPracticeAvailable = !!user?.practiceMode && user?.practiceButtonVisible
+
+    if (isPracticeAvailable) {
+      buttons.push({
+        text: textContent.rightButtonText ?? '',
+        colorScheme: ButtonColor.YELLOW,
+        onPress: () => {
+          onPracticePress?.()
+          model.hidePopUp()
+        },
+      })
+    }
+
+    return buttons
   }
 
+  const buttons = getButtons()
+
   useKeyBoard((event) => {
     if (event.key === KeyboardKeys.ENTER) {
-      practiceButtonVisible ? handlePrimaryButtonPress() : model.hidePopUpAndLeave()
+      const primaryButton = buttons.at(-1)
+      primaryButton?.onPress()
     }
   })
 
@@ -44,7 +76,7 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
             {textContent.title}
           </Typography>
         )}
-        {!!textContent.subtitle && practiceButtonVisible && (
+        {!!textContent.subtitle && buttons.length === 2 && (
           <Typography variant="h4" style={styles.subtitle}>
             {textContent.subtitle}
           </Typography>
@@ -55,23 +87,18 @@ export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalConten
         problemsAmount={stats?.problemsAmount ?? 0}
       />
       <View style={styles.buttonsContainer}>
-        <Button
-          variant={practiceButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
-          size="large"
-          colorScheme={popUpData?.isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
-          style={{ text: { textTransform: 'uppercase' } }}
-          onPress={model.hidePopUpAndLeave}
-        >
-          {textContent.leftButtonText ?? ''}
-        </Button>
-
-        {practiceButtonVisible && (
-          <PracticeButton
-            onPress={handlePrimaryButtonPress}
-            text={textContent.rightButtonText}
-            colorScheme={buttonColorScheme}
-          />
-        )}
+        {buttons.map((button, index) => (
+          <Button
+            key={index}
+            variant={index === buttons.length - 1 ? ButtonVariant.PRIMARY : ButtonVariant.TERTIARY}
+            size={ButtonSize.LARGE}
+            colorScheme={button.colorScheme}
+            style={{ text: { textTransform: 'uppercase' } }}
+            onPress={button.onPress}
+          >
+            {button.text}
+          </Button>
+        ))}
       </View>
     </View>
   )

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
+
+import { ProblemSelectorButton } from './ProblemSelectorButton'
+
+import { PROBLEM_SELECTOR_CONTENT_WIDTH } from '../constants'
+import { ProblemSelectorButtonProps } from '../types'
+
+type ProblemSelectorProps = {
+  buttons: ProblemSelectorButtonProps[]
+}
+
+export const ProblemSelector = ({ buttons }: ProblemSelectorProps) => {
+  if (!buttons.length) return null
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        {buttons.map((btn) => (
+          <ProblemSelectorButton {...btn} key={btn.key} />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: 'center' },
+  contentContainer: {
+    width: PROBLEM_SELECTOR_CONTENT_WIDTH,
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    paddingVertical: SPACING[400],
+    gap: 15,
+  },
+})

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

@@ -0,0 +1,81 @@
+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
+              height={ICON_SIZE.height}
+              width={ICON_SIZE.width}
+              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,93 @@
+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
+
+const colorPreset = (bg: string, border: string, color: string, raise: string = border) => ({
+  backgroundColor: bg,
+  borderColor: border,
+  color,
+  raiseColor: raise,
+})
+
+export const COLOR_SCHEME_MAP: Record<ProblemSelectorButtonState, ButtonColorPreset> = {
+  [PROBLEM_SELECTOR_BUTTON_STATE.SELECTED]: {
+    [ButtonStates.DEFAULT]: colorPreset(COLORS.BLUE_1, COLORS.PRIMARY_BLUE, COLORS.PRIMARY_BLUE),
+    [ButtonStates.HOVER]: colorPreset(COLORS.BLUE_1, COLORS.BLUE_4, COLORS.BLUE_4),
+    [ButtonStates.ACTIVE]: colorPreset(COLORS.BLUE_1, COLORS.BLUE_4, COLORS.BLUE_4),
+    [ButtonStates.PRESSED]: colorPreset(COLORS.BLUE_1, COLORS.BLUE_4, COLORS.BLUE_4),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.BLUE_1, COLORS.BLUE_3, COLORS.BLUE_3),
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.MISTAKE]: {
+    [ButtonStates.DEFAULT]: colorPreset(COLORS.PRIMARY_RED, COLORS.PRIMARY_RED, COLORS.NEUTRAL_1),
+    [ButtonStates.HOVER]: colorPreset(COLORS.RED_4, COLORS.RED_4, COLORS.NEUTRAL_1),
+    [ButtonStates.ACTIVE]: colorPreset(COLORS.RED_4, COLORS.RED_4, COLORS.NEUTRAL_1),
+    [ButtonStates.PRESSED]: colorPreset(COLORS.RED_4, COLORS.RED_4, COLORS.NEUTRAL_1),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.RED_3, COLORS.RED_3, COLORS.NEUTRAL_1),
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.SOLVED]: {
+    [ButtonStates.DEFAULT]: colorPreset(
+      COLORS.PRIMARY_YELLOW,
+      COLORS.PRIMARY_YELLOW,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.HOVER]: colorPreset(COLORS.YELLOW_4, COLORS.YELLOW_4, COLORS.NEUTRAL_1),
+    [ButtonStates.ACTIVE]: colorPreset(COLORS.YELLOW_4, COLORS.YELLOW_4, COLORS.NEUTRAL_1),
+    [ButtonStates.PRESSED]: colorPreset(COLORS.YELLOW_4, COLORS.YELLOW_4, COLORS.NEUTRAL_1),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.YELLOW_3, COLORS.YELLOW_3, COLORS.NEUTRAL_1),
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.SOLVED_FIRST_ATTEMPT]: {
+    [ButtonStates.DEFAULT]: colorPreset(
+      COLORS.PRIMARY_GREEN,
+      COLORS.PRIMARY_GREEN,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.HOVER]: colorPreset(COLORS.GREEN_4, COLORS.GREEN_4, COLORS.NEUTRAL_1),
+    [ButtonStates.ACTIVE]: colorPreset(COLORS.GREEN_4, COLORS.GREEN_4, COLORS.NEUTRAL_1),
+    [ButtonStates.PRESSED]: colorPreset(COLORS.GREEN_4, COLORS.GREEN_4, COLORS.NEUTRAL_1),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.GREEN_3, COLORS.GREEN_3, COLORS.NEUTRAL_1),
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.NOT_SOLVED]: {
+    [ButtonStates.DEFAULT]: colorPreset(COLORS.NEUTRAL_4, COLORS.NEUTRAL_4, COLORS.NEUTRAL_10),
+    [ButtonStates.HOVER]: colorPreset(COLORS.NEUTRAL_3, COLORS.NEUTRAL_3, COLORS.NEUTRAL_10),
+    [ButtonStates.ACTIVE]: colorPreset(COLORS.NEUTRAL_3, COLORS.NEUTRAL_3, COLORS.NEUTRAL_10),
+    [ButtonStates.PRESSED]: colorPreset(COLORS.NEUTRAL_3, COLORS.NEUTRAL_3, COLORS.NEUTRAL_10),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.NEUTRAL_3, COLORS.NEUTRAL_3, COLORS.NEUTRAL_6),
+  },
+
+  [PROBLEM_SELECTOR_BUTTON_STATE.EXAM]: {
+    [ButtonStates.DEFAULT]: colorPreset(
+      COLORS.PRIMARY_PURPLE,
+      COLORS.PRIMARY_PURPLE,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.HOVER]: colorPreset(COLORS.PURPLE_4, COLORS.PURPLE_4, COLORS.NEUTRAL_1),
+    [ButtonStates.ACTIVE]: colorPreset(
+      COLORS.PRIMARY_PURPLE,
+      COLORS.PRIMARY_PURPLE,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.PRESSED]: colorPreset(
+      COLORS.PRIMARY_PURPLE,
+      COLORS.PRIMARY_PURPLE,
+      COLORS.NEUTRAL_1,
+    ),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.PURPLE_3, COLORS.PURPLE_3, COLORS.NEUTRAL_1),
+  },
+}

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

@@ -5,3 +5,4 @@ export * from './features/feedback'
 export * from './features/celebrations'
 export * from './features/endOfAssignment'
 export * from './features/formulaSheet'
+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 24 28" 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>
+)