@magmamath/students-features 0.6.0-rc.0 → 0.6.0

package/dist/typescript/commonjs/index.d.ts

@@ -5,4 +5,5 @@ export * from './features/feedback';
 export * from './features/celebrations';
 export * from './features/endOfAssignment';
 export * from './features/formulaSheet';
+export * from './features/problemSelector';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}

package/dist/typescript/commonjs/shared/icons/LockIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './icon.types';
+export declare const LockIcon: ({ width, height, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=LockIcon.d.ts.map

package/dist/typescript/commonjs/shared/icons/LockIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LockIcon.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/LockIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,6BAA2D,SAAS,sBASxF,CAAA"}

package/dist/typescript/module/features/endOfAssignment/components/Modal/assets/SunrisingIcon.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { IconProps } from '../../../../../shared/icons/icon.types';
-export declare const SunrisingIcon: (props: IconProps) => React.JSX.Element;
+export declare const SunrisingIcon: ({ size }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=SunrisingIcon.d.ts.map

package/dist/typescript/module/features/endOfAssignment/components/Modal/assets/SunrisingIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SunrisingIcon.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/endOfAssignment/components/Modal/assets/SunrisingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAElE,eAAO,MAAM,aAAa,UAAW,SAAS,sBA+L7C,CAAA"}
+{"version":3,"file":"SunrisingIcon.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/endOfAssignment/components/Modal/assets/SunrisingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAElE,eAAO,MAAM,aAAa,aAAoB,SAAS,sBAqNtD,CAAA"}

package/dist/typescript/module/features/endOfAssignment/components/Modal/assets/TrophyIcon.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { IconProps } from '../../../../../shared/icons/icon.types';
-export declare const TrophyIcon: (props: IconProps) => React.JSX.Element;
+export declare const TrophyIcon: ({ size }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=TrophyIcon.d.ts.map

package/dist/typescript/module/features/endOfAssignment/components/Modal/assets/TrophyIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrophyIcon.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/endOfAssignment/components/Modal/assets/TrophyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAElE,eAAO,MAAM,UAAU,UAAW,SAAS,sBAyD1C,CAAA"}
+{"version":3,"file":"TrophyIcon.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/endOfAssignment/components/Modal/assets/TrophyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAElE,eAAO,MAAM,UAAU,aAAoB,SAAS,sBAuDnD,CAAA"}

package/dist/typescript/module/features/problemSelector/components/ProblemSelector.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProblemSelectorButtonProps } from '../types';
+type ProblemSelectorProps = {
+    buttons: ProblemSelectorButtonProps[];
+};
+export declare const ProblemSelector: ({ buttons }: ProblemSelectorProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=ProblemSelector.d.ts.map

package/dist/typescript/module/features/problemSelector/components/ProblemSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProblemSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/features/problemSelector/components/ProblemSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA;AAErD,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,0BAA0B,EAAE,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,eAAe,gBAAiB,oBAAoB,6BAYhE,CAAA"}

package/dist/typescript/module/features/problemSelector/components/ProblemSelectorButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProblemSelectorButtonProps } from '../types';
+export declare const ProblemSelectorButton: ({ text, state, onClick, badgeValue, locked, }: ProblemSelectorButtonProps) => React.JSX.Element;
+//# sourceMappingURL=ProblemSelectorButton.d.ts.map

package/dist/typescript/module/features/problemSelector/components/ProblemSelectorButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProblemSelectorButton.d.ts","sourceRoot":"","sources":["../../../../../../src/features/problemSelector/components/ProblemSelectorButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA;AAErD,eAAO,MAAM,qBAAqB,kDAM/B,0BAA0B,sBA+C5B,CAAA"}

package/dist/typescript/module/features/problemSelector/constants.d.ts

@@ -0,0 +1,23 @@
+import { ButtonColorPreset } from '@magmamath/react-native-ui';
+import { ProblemSelectorButtonState } from './types';
+export declare const BUTTON_SIZE = 49.5;
+export declare const BADGE_COORDINATES: {
+    top: number;
+    right: number;
+};
+export declare const ICON_SIZE: {
+    width: number;
+    height: number;
+};
+export declare const PROBLEM_SELECTOR_CONTENT_WIDTH = 265;
+export declare const PROBLEM_SELECTOR_BUTTON_STATE: {
+    readonly SELECTED: "selected";
+    readonly SELECTED_EXAM: "selected-exam";
+    readonly SOLVED: "solved";
+    readonly SOLVED_FIRST_ATTEMPT: "solved-first-attempt";
+    readonly NOT_SOLVED: "not-solved";
+    readonly MISTAKE: "mistake";
+    readonly EXAM: "exam";
+};
+export declare const COLOR_SCHEME_MAP: Record<ProblemSelectorButtonState, ButtonColorPreset>;
+//# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/features/problemSelector/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/features/problemSelector/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAwB,MAAM,4BAA4B,CAAA;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEpD,eAAO,MAAM,WAAW,OAAO,CAAA;AAC/B,eAAO,MAAM,iBAAiB;;;CAAuB,CAAA;AACrD,eAAO,MAAM,SAAS;;;CAA4B,CAAA;AAClD,eAAO,MAAM,8BAA8B,MAAM,CAAA;AAEjD,eAAO,MAAM,6BAA6B;;;;;;;;CAQhC,CAAA;AASV,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAgFlF,CAAA"}

package/dist/typescript/module/features/problemSelector/index.d.ts

@@ -0,0 +1,4 @@
+export { ProblemSelector } from './components/ProblemSelector';
+export { PROBLEM_SELECTOR_BUTTON_STATE } from './constants';
+export type { ProblemSelectorButtonProps, ProblemSelectorButtonState } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/features/problemSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/problemSelector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC9D,OAAO,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAA;AAC3D,YAAY,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA"}

package/dist/typescript/module/features/problemSelector/types.d.ts

@@ -0,0 +1,11 @@
+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;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/module/features/problemSelector/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/features/problemSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAA;AAE3D,MAAM,MAAM,0BAA0B,GACpC,CAAC,OAAO,6BAA6B,CAAC,CAAC,MAAM,OAAO,6BAA6B,CAAC,CAAA;AAEpF,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,0BAA0B,CAAA;IACjC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA"}

package/dist/typescript/module/index.d.ts

@@ -5,4 +5,5 @@ export * from './features/feedback';
 export * from './features/celebrations';
 export * from './features/endOfAssignment';
 export * from './features/formulaSheet';
+export * from './features/problemSelector';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}

package/dist/typescript/module/shared/icons/LockIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './icon.types';
+export declare const LockIcon: ({ width, height, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=LockIcon.d.ts.map

package/dist/typescript/module/shared/icons/LockIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LockIcon.d.ts","sourceRoot":"","sources":["../../../../../src/shared/icons/LockIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,6BAA2D,SAAS,sBASxF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.6.0-rc.0",
+  "version": "0.6.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -29,7 +29,7 @@
     "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.4.12",
+    "@magmamath/react-native-ui": "0.4.17",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",

package/src/features/endOfAssignment/components/Modal/assets/SunrisingIcon.tsx

@@ -2,11 +2,9 @@ import * as React from 'react'
 import Svg, { G, Path, Defs, LinearGradient, Stop } from 'react-native-svg'
 import { IconProps } from '../../../../../shared/icons/icon.types'
 
-export const SunrisingIcon = (props: IconProps) => {
-  const height = (props.size ?? 0) * 0.606
-
+export const SunrisingIcon = ({ size = 909 }: IconProps) => {
   return (
-    <Svg width={props.size} height={height} viewBox="0 0 909 551" fill="none" {...props}>
+    <Svg width={size} height={size * 0.606} viewBox="0 0 909 551" fill="none">
       <G opacity={0.1}>
         <Path
           d="M164.04-598.854a893.984 893.984 0 01222.319 28.085L164.04 295.106v-893.96z"
@@ -68,6 +66,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint1_linear_3505_1308"
@@ -79,6 +79,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint2_linear_3505_1308"
@@ -90,6 +92,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint3_linear_3505_1308"
@@ -101,6 +105,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint4_linear_3505_1308"
@@ -112,6 +118,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint5_linear_3505_1308"
@@ -123,6 +131,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint6_linear_3505_1308"
@@ -134,6 +144,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint7_linear_3505_1308"
@@ -145,6 +157,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint8_linear_3505_1308"
@@ -156,6 +170,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint9_linear_3505_1308"
@@ -167,6 +183,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint10_linear_3505_1308"
@@ -178,6 +196,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
         <LinearGradient
           id="paint11_linear_3505_1308"
@@ -189,6 +209,8 @@ export const SunrisingIcon = (props: IconProps) => {
         >
           <Stop stopColor="#FF245F" />
           <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
         </LinearGradient>
       </Defs>
     </Svg>

package/src/features/endOfAssignment/components/Modal/assets/TrophyIcon.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import { IconProps } from '../../../../../shared/icons/icon.types'
 
-export const TrophyIcon = (props: IconProps) => {
-  const height = (props.size ?? 0) * 0.982
+import { IconProps } from '../../../../../shared/icons/icon.types'
 
+export const TrophyIcon = ({ size = 466 }: IconProps) => {
   return (
-    <Svg width={props.size} height={height} viewBox="0 0 466 458" fill="none" {...props}>
+    <Svg width={size} height={size * 0.982} viewBox="0 0 466 458" fill="none">
       <Path
         d="M258.454 244.45l-5.731 32.767 16.384 2.86c8.047 1.407 15.796 2.106 23.222 2.106 15.697.011 29.985-3.137 42.766-9.389 6.728-3.292 13.025-7.438 18.9-12.449 44.672-38.12 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575a57.996 57.996 0 00-17.935 2.206c-14.355 4.09-26.36 13.38-33.875 25.994l-32.379-14.332L250.03 88.75l39.162 17.326c6.274 2.771 13.247 2.916 19.632.388 6.374-2.516 11.373-7.382 14.055-13.7a24.56 24.56 0 0115.974-14.112c2.993-.853 6.052-1.13 9.056-.853a24.578 24.578 0 0111.961 4.422c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.841-18.822 112.224-32.024 127.144-2.195 2.494-4.213 4.412-5.909 5.864-14.632 12.47-33.465 16.483-57.586 12.271l-16.372-2.871zM37.623 282.187c7.429 0 15.173-.703 23.223-2.111l16.379-2.864-5.73-32.757-16.378 2.865c-24.126 4.221-42.953.202-57.575-12.274-11.858-10.119-39.295-43.336-37.936-133.006.119-7.871 4.036-15.28 10.476-19.82a24.601 24.601 0 0121.015-3.57A24.606 24.606 0 017.075 92.764c2.683 6.318 7.675 11.186 14.058 13.709 6.384 2.522 13.355 2.38 19.63-.396l39.152-17.329-13.46-30.41-32.37 14.328C26.57 60.055 14.57 50.762.213 46.67c-16.936-4.828-34.901-1.777-49.293 8.369-15.102 10.647-24.286 28.03-24.565 46.498-.652 42.947 4.926 120.686 49.6 158.806 17.036 14.535 37.71 21.844 61.668 21.844z"
         fill="#FFD690"

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,106 @@
+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: 23, height: 25 }
+export const PROBLEM_SELECTOR_CONTENT_WIDTH = 265
+
+export const PROBLEM_SELECTOR_BUTTON_STATE = {
+  SELECTED: 'selected',
+  SELECTED_EXAM: 'selected-exam',
+  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.SELECTED_EXAM]: {
+    [ButtonStates.DEFAULT]: colorPreset(
+      COLORS.PURPLE_1,
+      COLORS.PRIMARY_PURPLE,
+      COLORS.PRIMARY_PURPLE,
+    ),
+    [ButtonStates.HOVER]: colorPreset(COLORS.PURPLE_1, COLORS.PURPLE_4, COLORS.PURPLE_4),
+    [ButtonStates.ACTIVE]: colorPreset(COLORS.PURPLE_1, COLORS.PURPLE_4, COLORS.PURPLE_4),
+    [ButtonStates.PRESSED]: colorPreset(COLORS.PURPLE_1, COLORS.PURPLE_4, COLORS.PURPLE_4),
+    [ButtonStates.DISABLED]: colorPreset(COLORS.PURPLE_1, COLORS.PURPLE_3, COLORS.PURPLE_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, Rect } from 'react-native-svg'
+import { COLORS } from '@magmamath/react-native-ui'
+
+import { IconProps } from './icon.types'
+
+export const LockIcon = ({ width = 23, height = 25, color = COLORS.NEUTRAL_6 }: IconProps) => (
+  <Svg width={width} height={height} viewBox="0.5 1 23 25" 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>
+)