@magmamath/students-features 0.6.0 → 0.6.1-2.rc-2

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

@@ -7,11 +7,12 @@ import {
   ButtonSize,
   ButtonStates,
   ButtonVariant,
+  FONT_FAMILY,
+  LockIcon,
   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 { BADGE_COORDINATES, BUTTON_BORDER_WIDTH, BUTTON_SIZE, COLOR_SCHEME_MAP } from '../constants'
 
 import { ProblemSelectorButtonProps } from '../types'
 
@@ -37,15 +38,16 @@ export const ProblemSelectorButton = ({
         disabled={locked}
         icon={
           locked ? (
-            <LockIcon
-              height={ICON_SIZE.height}
-              width={ICON_SIZE.width}
-              color={customColorScheme[ButtonStates.DISABLED]?.color}
-            />
+            <LockIcon color={customColorScheme[ButtonStates.DISABLED]?.color} size="large" />
           ) : (
             <Typography
-              variant="h2"
-              style={{ color: customColorScheme[ButtonStates.DEFAULT]?.color }}
+              variant="h3"
+              style={[
+                styles.buttonText,
+                {
+                  color: customColorScheme[ButtonStates.DEFAULT]?.color,
+                },
+              ]}
             >
               {text ?? ''}
             </Typography>
@@ -76,6 +78,11 @@ const styles = StyleSheet.create({
   button: {
     width: BUTTON_SIZE,
     height: BUTTON_SIZE,
-    borderWidth: 2.75,
+    borderWidth: BUTTON_BORDER_WIDTH,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontWeight: 400,
+    fontFamily: FONT_FAMILY.buenosAires,
   },
 })

package/src/features/problemSelector/constants.ts

@@ -1,9 +1,10 @@
 import { ButtonColorPreset, ButtonStates, COLORS } from '@magmamath/react-native-ui'
+
 import { ProblemSelectorButtonState } from './types'
 
-export const BUTTON_SIZE = 49.5
+export const BUTTON_SIZE = 49
+export const BUTTON_BORDER_WIDTH = 3
 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 = {

package/src/index.ts

@@ -6,3 +6,6 @@ export * from './features/celebrations'
 export * from './features/endOfAssignment'
 export * from './features/formulaSheet'
 export * from './features/problemSelector'
+export * from './features/gifCelebrations'
+export * from './features/exampleSolution'
+export * from './shared/icons'

package/src/lib/effector/ControlledSample.ts

@@ -0,0 +1,40 @@
+import { createEvent, createStore, Store, sample, Effect, combine, Event } from 'effector'
+
+type ControlledSampleParams<S = any, R = void> = {
+  clock: (Event<any> | Effect<any, any, any>)[]
+  source: Store<S>
+  target: Effect<R, any, any>
+  isActiveDefault?: boolean
+  filter?: (payload: S, isActive: boolean) => boolean
+  fn?: (payload: S, isActive: boolean) => R
+}
+
+export class ControlledSample<S = any, R = void> {
+  public readonly enable = createEvent()
+  public readonly disable = createEvent()
+
+  public readonly $isActive: Store<boolean>
+
+  constructor({
+    clock,
+    source,
+    target,
+    filter = (_payload, isActive) => !!isActive,
+    fn = (payload, _isActive) => payload as unknown as R,
+    isActiveDefault = false,
+  }: ControlledSampleParams<S, R>) {
+    this.$isActive = createStore(isActiveDefault)
+      .on(this.enable, () => true)
+      .on(this.disable, () => false)
+
+    const combined = combine({ payload: source, isActive: this.$isActive })
+
+    sample({
+      clock,
+      source: combined,
+      filter: ({ payload, isActive }) => filter(payload, isActive),
+      fn: ({ payload, isActive }) => fn(payload, isActive),
+      target,
+    })
+  }
+}

package/src/lib/effector/createControllerEffect.ts

@@ -1,66 +1,66 @@
 import { createEffect, type Effect } from 'effector'
 
 type LikeCanceledError = {
-    code?: string
+  code?: string
 }
 
 export type ControlledEffect<P, T> = Effect<P, T> & {
-    controller: AbortController
+  controller: AbortController
 }
 
 type ControlledRequestProps<P> = {
-    data: P
-    controller?: AbortController
-    abortAfter?: number
+  data: P
+  controller?: AbortController
+  abortAfter?: number
 }
 
 type RequestOptionalConfig = { signal?: AbortSignal }
 
 export function controlledRequest<R = void, P = void>(
-    request: (props: P, config?: RequestOptionalConfig) => Promise<R>,
+  request: (props: P, config?: RequestOptionalConfig) => Promise<R>,
 ) {
-    return async ({
-        data,
-        controller = new AbortController(),
-        abortAfter = 20000,
-    }: ControlledRequestProps<P>) => {
-        let timeout: ReturnType<typeof setTimeout> | null = null
+  return async ({
+    data,
+    controller = new AbortController(),
+    abortAfter = 20000,
+  }: ControlledRequestProps<P>) => {
+    let timeout: ReturnType<typeof setTimeout> | null = null
 
-        if (abortAfter) {
-            timeout = setTimeout(() => {
-                controller.abort('timeout')
-            }, abortAfter)
-        }
-
-        try {
-            const response = await request(data, { signal: controller?.signal })
-            if (timeout !== null) clearTimeout(timeout)
-            return response
-        } catch (error: unknown) {
-            if ((error as LikeCanceledError).code === 'ERR_CANCELED') {
-                if (controller.signal.reason === 'timeout') {
-                    throw new Error('Request timed out')
-                }
-                throw new Error('Request aborted manually')
-            }
+    if (abortAfter) {
+      timeout = setTimeout(() => {
+        controller.abort('timeout')
+      }, abortAfter)
+    }
 
-            throw error
+    try {
+      const response = await request(data, { signal: controller?.signal })
+      if (timeout !== null) clearTimeout(timeout)
+      return response
+    } catch (error: unknown) {
+      if ((error as LikeCanceledError).code === 'ERR_CANCELED') {
+        if (controller.signal.reason === 'timeout') {
+          throw new Error('Request timed out')
         }
+        throw new Error('Request aborted manually')
+      }
+
+      throw error
     }
+  }
 }
 
-export const createControllerEffect = <T, P>(
-    fn: (props: P, config?: RequestOptionalConfig) => Promise<T>,
+export const createControllerEffect = <T, P = void>(
+  fn: (props: P, config?: RequestOptionalConfig) => Promise<T>,
 ) => {
-    const request = controlledRequest<T, P>(fn)
-    const effect = createEffect((data: P) =>
-        request({ data, controller: effect.controller }),
-    ) as ControlledEffect<P, T>
-    effect.controller = new AbortController()
+  const request = controlledRequest<T, P>(fn)
+  const effect = createEffect((data: P) =>
+    request({ data, controller: effect.controller }),
+  ) as ControlledEffect<P, T>
+  effect.controller = new AbortController()
 
-    effect.fail.watch(() => {
-        effect.controller = new AbortController()
-    })
+  effect.fail.watch(() => {
+    effect.controller = new AbortController()
+  })
 
-    return effect
+  return effect
 }

package/src/lib/helpers/helpers.ts

@@ -1,6 +1,6 @@
 import { getText } from '../../shared/translation/helpers'
 
-export const noop = () => {};
+export const noop = () => {}
 
 export const generateRandomId = () =>
   Date.now().toString(36) + Math.random().toString(36).substring(2)

package/src/react-app-env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.png'
+declare module '*.svg'
+declare module '*.jpeg'
+declare module '*.jpg'
+declare module '*.webp'
+declare module '*.gif'