@magmamath/students-features 1.8.4-rc.9 → 1.8.4

package/src/features/profile/components/modals/JoinClassModal.tsx

@@ -1,145 +0,0 @@
-import React, { useEffect } from 'react'
-import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
-import { useUnit } from 'effector-react'
-import { CodeField, Cursor, useClearByFocusCell } from 'react-native-confirmation-code-field'
-import {
-  BaseModal,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-  COLORS,
-  FONT_FAMILY,
-  ReanimatedButton,
-  SPACING,
-} from '@magmamath/react-native-ui'
-
-import { useText } from '../../../../i18n/i18n'
-import { CLASS_CODE_LENGTH } from '../../shared/profile.constants'
-import type { ProfileModalProps } from '../../model/profileModal.types'
-
-const CODE_PLACEHOLDER = '0'
-const MAX_MODAL_WIDTH = 1044
-const SCREEN_MARGIN = 48
-const CELL_GAP = SPACING['400']
-const MODAL_H_PADDING = SPACING['800']
-const CELL_ASPECT = 0.95
-const CELL_RADIUS_RATIO = 0.24 // 36 / 150 in the design
-const CELL_FONT_RATIO = 0.42 // 64 / 150 in the design
-const MAX_CELL_RADIUS = 36
-
-export const JoinClassModal = ({ modal: { closeModal, params } }: ProfileModalProps) => {
-  const t = useText()
-  const { model } = params
-  const { width } = useWindowDimensions()
-  const { code, isComplete, isPending } = useUnit({
-    code: model.joinClass.$code,
-    isComplete: model.joinClass.$isComplete,
-    isPending: model.api.joinClassFx.pending,
-  })
-
-  const modalWidth = Math.min(MAX_MODAL_WIDTH, width - SCREEN_MARGIN)
-  const cellSize =
-    (modalWidth - MODAL_H_PADDING * 2 - CELL_GAP * (CLASS_CODE_LENGTH - 1)) / CLASS_CODE_LENGTH
-  const cellRadius = Math.min(MAX_CELL_RADIUS, cellSize * CELL_RADIUS_RATIO)
-  const cellFontSize = cellSize * CELL_FONT_RATIO
-
-  const setCode = (value: string) => model.joinClass.setCode(value.toUpperCase())
-  const [cellProps, getCellOnLayoutHandler] = useClearByFocusCell({ value: code, setValue: setCode })
-
-  useEffect(() => {
-    const subscription = model.api.joinClassFx.finally.watch(() => {
-      model.joinClass.reset()
-      closeModal()
-    })
-    return () => subscription.unsubscribe()
-  }, [model, closeModal])
-
-  const closeAndReset = () => {
-    model.joinClass.reset()
-    closeModal()
-  }
-
-  return (
-    <BaseModal
-      onClose={closeAndReset}
-      style={{ container: [styles.modal, { width: modalWidth }] }}
-      header={t('profile.joinClassTitle')}
-      content={
-        <CodeField
-          {...cellProps}
-          nativeID="join-class-code"
-          value={code}
-          onChangeText={setCode}
-          cellCount={CLASS_CODE_LENGTH}
-          rootStyle={styles.codeRoot}
-          autoFocus
-          autoComplete="off"
-          textContentType="oneTimeCode"
-          keyboardType="default"
-          renderCell={({ index, symbol, isFocused }) => {
-            const isPlaceholder = !symbol && !isFocused
-            return (
-              <View
-                key={index}
-                style={[styles.cell, { borderRadius: cellRadius, width: cellSize }]}
-                onLayout={getCellOnLayoutHandler(index)}
-              >
-                <Text
-                  style={[styles.cellText, { fontSize: cellFontSize }, isPlaceholder && styles.cellPlaceholder]}
-                >
-                  {symbol || (isFocused ? <Cursor /> : CODE_PLACEHOLDER)}
-                </Text>
-              </View>
-            )
-          }}
-        />
-      }
-      footer={
-        <ReanimatedButton
-          variant={ButtonVariant.PRIMARY}
-          colorScheme={ButtonColor.ORANGE}
-          size={ButtonSize.LARGE}
-          onPress={() => model.joinClass.submit()}
-          disabled={!isComplete || isPending}
-          isLoading={isPending}
-          style={buttonStyle}
-        >
-          {t('profile.joinClassButton')}
-        </ReanimatedButton>
-      }
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  modal: {
-    gap: SPACING['800'],
-    paddingHorizontal: MODAL_H_PADDING,
-  },
-  codeRoot: {
-    flexDirection: 'row',
-    gap: CELL_GAP,
-    justifyContent: 'center',
-  },
-  cell: {
-    alignItems: 'center',
-    aspectRatio: CELL_ASPECT,
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderColor: COLORS.NEUTRAL_5,
-    borderWidth: 3,
-    justifyContent: 'center',
-  },
-  cellText: {
-    color: COLORS.NEUTRAL_9,
-    fontFamily: FONT_FAMILY.buenosAiresSemiBold,
-    textAlign: 'center',
-  },
-  cellPlaceholder: {
-    color: COLORS.NEUTRAL_5,
-  },
-  text: {
-    textTransform: 'uppercase',
-  },
-})
-
-const buttonStyle = { text: styles.text }

package/src/features/profile/components/modals/LogoutConfirmModal.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import {
-  BaseModal,
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonVariant,
-} from '@magmamath/react-native-ui'
-
-import { useText } from '../../../../i18n/i18n'
-import type { LogoutModalParams, ProfileModalProps } from '../../model/profileModal.types'
-
-export const LogoutConfirmModal = ({
-  modal: { closeModal, params },
-}: ProfileModalProps<LogoutModalParams>) => {
-  const t = useText()
-
-  const confirm = () => {
-    closeModal()
-    params.onConfirm()
-  }
-
-  return (
-    <BaseModal
-      onClose={closeModal}
-      style={modalStyle}
-      header={t('profile.logOut')}
-      content={t('profile.logOutConfirmMessage')}
-      footer={
-        <>
-          <Button
-            variant={ButtonVariant.TERTIARY}
-            size={ButtonSize.LARGE}
-            onPress={closeModal}
-            style={buttonTextStyle}
-          >
-            {t('profile.cancel')}
-          </Button>
-          <Button
-            colorScheme={ButtonColor.ORANGE}
-            size={ButtonSize.LARGE}
-            onPress={confirm}
-            style={buttonTextStyle}
-          >
-            {t('profile.yes')}
-          </Button>
-        </>
-      }
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  modal: {
-    width: 530,
-  },
-  uppercase: {
-    textTransform: 'uppercase',
-  },
-})
-
-const modalStyle = { container: styles.modal }
-const buttonTextStyle = { text: styles.uppercase }

package/src/features/profile/components/modals/TranslationLanguageModal.tsx

@@ -1,124 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useUnit } from 'effector-react'
-import type { Language } from '@magmamath/frontend-config'
-import {
-  BaseModal,
-  Checkbox,
-  CheckboxColor,
-  CheckboxGroup,
-  COLORS,
-  HeadingVariants,
-  Search,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-import { useText } from '../../../../i18n/i18n'
-import type { ProfileModalProps } from '../../model/profileModal.types'
-
-const LIST_HEIGHT = 360
-
-export const TranslationLanguageModal = ({ modal: { closeModal, params } }: ProfileModalProps) => {
-  const t = useText()
-  const { model } = params
-  const { search, languages, settings } = useUnit({
-    search: model.language.$search,
-    languages: model.language.$languages,
-    settings: model.$settings,
-  })
-
-  const closeAndReset = () => {
-    model.language.reset()
-    closeModal()
-  }
-
-  const selectLanguage = (language: Language | null) => {
-    model.language.selectLanguage(language)
-    closeAndReset()
-  }
-
-  const items = languages.map((language) => ({
-    id: language,
-    label: language,
-    radio: true,
-    color: CheckboxColor.ORANGE,
-  }))
-  const selectedItems = items.filter((item) => item.id === settings.translationLanguage)
-
-  return (
-    <BaseModal
-      onClose={closeAndReset}
-      style={modalStyle}
-      header={
-        <View style={styles.header}>
-          <Typography variant={HeadingVariants.H2} align="center" style={styles.title}>
-            {t('profile.translationModalTitle')}
-          </Typography>
-          <Search
-            nativeID="translation-language-search"
-            value={search}
-            onChangeText={model.language.setSearch}
-            placeholder={t('profile.search')}
-            containerStyle={styles.search}
-          />
-        </View>
-      }
-      content={
-        <View style={styles.content}>
-          <Checkbox
-            radio
-            label={t('profile.noLanguage')}
-            checked={!settings.translationLanguage}
-            color={CheckboxColor.ORANGE}
-            style={noLanguageStyle}
-            onPress={() => selectLanguage(null)}
-          />
-          <View style={styles.divider} />
-          <CheckboxGroup
-            items={items}
-            selectedItems={selectedItems}
-            initialNumToRender={items.length}
-            style={listStyle}
-            onPress={(item) =>
-              selectLanguage(languages.find((language) => language === item.id) ?? null)
-            }
-          />
-        </View>
-      }
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  modal: {
-    width: 530,
-  },
-  header: {
-    gap: SPACING['500'],
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-  },
-  search: {
-    width: '100%',
-  },
-  content: {
-    gap: SPACING['300'],
-  },
-  noLanguage: {
-    paddingLeft: SPACING['200'],
-  },
-  divider: {
-    backgroundColor: COLORS.NEUTRAL_3,
-    height: 1,
-  },
-  list: {
-    height: LIST_HEIGHT,
-    width: '100%',
-  },
-})
-
-const modalStyle = { container: styles.modal }
-const noLanguageStyle = { container: styles.noLanguage }
-const listStyle = { container: styles.list }

package/src/features/profile/components/settings/LanguageSettingsCard.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { useText } from '../../../../i18n/i18n'
-import { ProfileCard } from '../cards/ProfileCard'
-import { TextToSpeechRow } from './TextToSpeechRow'
-import { TranslationLanguageRow } from './TranslationLanguageRow'
-
-export const LanguageSettingsCard = () => {
-  const t = useText()
-
-  return (
-    <ProfileCard title={t('profile.languageSettings')}>
-      <TextToSpeechRow />
-      <TranslationLanguageRow />
-    </ProfileCard>
-  )
-}

package/src/features/profile/components/settings/PreferencesCard.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useUnit } from 'effector-react'
-import {
-  CalculatorIcon,
-  COLORS,
-  PencilIcon,
-  SelectGroup,
-  SelectOptionColor,
-  SelectOptionProps,
-} from '@magmamath/react-native-ui'
-
-import { useText } from '../../../../i18n/i18n'
-import { useProfile } from '../../context/ProfileContext'
-import { ProfileCanvasType } from '../../shared/profile.constants'
-import { ProfileCard } from '../cards/ProfileCard'
-import { SettingRow } from './SettingRow'
-
-const ICON_SIZE = 22
-const CONTROL_MAX_WIDTH = 248
-
-// Pass the glyph via `title` (children), not `icon`: an icon-only Button locks to a fixed
-// square and collapses the SelectOption's flex stretch.
-// TODO: replace CalculatorIcon with a dedicated KeyboardIcon once rn-ui ships one.
-const CANVAS_OPTIONS: SelectOptionProps[] = [
-  {
-    key: String(ProfileCanvasType.DRAWING),
-    title: <PencilIcon size={ICON_SIZE} color={COLORS.NEUTRAL_9} />,
-  },
-  {
-    key: String(ProfileCanvasType.SPREADSHEET),
-    title: <CalculatorIcon size={ICON_SIZE} color={COLORS.NEUTRAL_9} />,
-  },
-]
-
-export const PreferencesCard = () => {
-  const t = useText()
-  const { model } = useProfile()
-  const settings = useUnit(model.$settings)
-
-  return (
-    <ProfileCard title={t('profile.preferences')}>
-      <SettingRow label={t('profile.solveMode')}>
-        <View style={styles.control}>
-          <SelectGroup
-            color={SelectOptionColor.GREY}
-            options={CANVAS_OPTIONS}
-            selectedOptions={CANVAS_OPTIONS.filter(({ key }) => key === String(settings.canvasType))}
-            onOptionChange={({ key }) =>
-              model.setCanvasType(
-                key === String(ProfileCanvasType.SPREADSHEET)
-                  ? ProfileCanvasType.SPREADSHEET
-                  : ProfileCanvasType.DRAWING,
-              )
-            }
-          />
-        </View>
-      </SettingRow>
-    </ProfileCard>
-  )
-}
-
-const styles = StyleSheet.create({
-  control: {
-    flex: 1,
-    maxWidth: CONTROL_MAX_WIDTH,
-  },
-})

package/src/features/profile/components/settings/SettingRow.tsx

@@ -1,42 +0,0 @@
-import React, { ReactNode } from 'react'
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
-import { COLORS, HeadingVariants, SPACING, Typography } from '@magmamath/react-native-ui'
-
-type SettingRowProps = {
-  label: string
-  children: ReactNode
-  style?: StyleProp<ViewStyle>
-  icon?: ReactNode
-}
-
-export const SettingRow = ({ icon, label, children, style }: SettingRowProps) => (
-  <View style={[styles.row, style]}>
-    <View style={styles.labelGroup}>
-      {icon}
-      <Typography variant={HeadingVariants.H8} style={styles.label}>
-        {label}
-      </Typography>
-    </View>
-    {children}
-  </View>
-)
-
-const styles = StyleSheet.create({
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: SPACING['400'],
-    justifyContent: 'space-between',
-    padding: SPACING['200'],
-  },
-  labelGroup: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    flexShrink: 1,
-    gap: SPACING['200'],
-  },
-  label: {
-    color: COLORS.NEUTRAL_9,
-    flexShrink: 1,
-  },
-})

package/src/features/profile/components/settings/TextSettingsCard.tsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { useUnit } from 'effector-react'
-import { StyleSheet, View } from 'react-native'
-import {
-  COLORS,
-  HeadingVariants,
-  ParagraphVariants,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-import { useText } from '../../../../i18n/i18n'
-import { useProfile } from '../../context/ProfileContext'
-import { TextSizeSlider } from './TextSizeSlider'
-import { ProfileCard } from '../cards/ProfileCard'
-
-export const TextSettingsCard = () => {
-  const t = useText()
-  const { model } = useProfile()
-  const settings = useUnit(model.$settings)
-
-  return (
-    <ProfileCard title={t('profile.textSettings')}>
-      <Typography variant={HeadingVariants.H8} style={styles.label}>
-        {t('profile.textSize')}
-      </Typography>
-      <View style={styles.sliderWrap}>
-        <TextSizeSlider value={settings.textSize} onSlidingComplete={model.setTextSize} />
-        <View style={styles.markers}>
-          <Typography variant={ParagraphVariants.XS} style={styles.marker} selectable={false}>
-            A
-          </Typography>
-          <Typography variant={ParagraphVariants.MEDIUM} style={styles.marker} selectable={false}>
-            A
-          </Typography>
-          <Typography variant={ParagraphVariants.XL} style={styles.marker} selectable={false}>
-            A
-          </Typography>
-        </View>
-      </View>
-    </ProfileCard>
-  )
-}
-
-const styles = StyleSheet.create({
-  label: {
-    color: COLORS.NEUTRAL_9,
-  },
-  sliderWrap: {
-    gap: SPACING['200'],
-  },
-  markers: {
-    alignItems: 'flex-end',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  marker: {
-    color: COLORS.NEUTRAL_7,
-    fontWeight: '700',
-  },
-})

package/src/features/profile/components/settings/TextSizeSlider.tsx

@@ -1,110 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { LayoutChangeEvent, PanResponder, StyleSheet, View } from 'react-native'
-import { COLORS } from '@magmamath/react-native-ui'
-
-import { TEXT_SIZE } from '../../shared/profile.constants'
-import { snapTextSize } from '../../shared/profile.helpers'
-
-type TextSizeSliderProps = {
-  value: number
-  onSlidingComplete: (value: number) => void
-}
-
-const THUMB_SIZE = 20
-const DOT_SIZE = 6
-const TRACK_HEIGHT = 10
-const TRACK_RADIUS = 5
-const STEPS = (TEXT_SIZE.MAX - TEXT_SIZE.MIN) / TEXT_SIZE.STEP + 1
-const RANGE = TEXT_SIZE.MAX - TEXT_SIZE.MIN
-const TRACK_PADDING = THUMB_SIZE / 2 - DOT_SIZE / 2
-
-export const TextSizeSlider = ({ value, onSlidingComplete }: TextSizeSliderProps) => {
-  const [trackWidth, setTrackWidth] = useState(0)
-  const [dragValue, setDragValue] = useState<number | null>(null)
-  const widthRef = useRef(0)
-  const onCompleteRef = useRef(onSlidingComplete)
-  onCompleteRef.current = onSlidingComplete
-
-  const currentValue = dragValue ?? value
-  const fraction = RANGE === 0 ? 0 : (currentValue - TEXT_SIZE.MIN) / RANGE
-  const travel = Math.max(0, trackWidth - THUMB_SIZE)
-
-  const measureTrack = (event: LayoutChangeEvent) => {
-    const width = event.nativeEvent.layout.width
-    widthRef.current = width
-    setTrackWidth(width)
-  }
-
-  const valueFromX = (x: number) => {
-    const width = widthRef.current
-    if (width <= 0) return TEXT_SIZE.MIN
-    const ratio = Math.min(1, Math.max(0, x / width))
-    return snapTextSize(TEXT_SIZE.MIN + ratio * RANGE)
-  }
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderGrant: (event) => setDragValue(valueFromX(event.nativeEvent.locationX)),
-      onPanResponderMove: (event) => setDragValue(valueFromX(event.nativeEvent.locationX)),
-      onPanResponderRelease: (event) => {
-        const next = valueFromX(event.nativeEvent.locationX)
-        setDragValue(null)
-        onCompleteRef.current(next)
-      },
-      onPanResponderTerminate: () => setDragValue(null),
-    })
-  ).current
-
-  return (
-    <View style={styles.container} onLayout={measureTrack} {...panResponder.panHandlers}>
-      <View style={styles.track}>
-        {Array.from({ length: STEPS }, (_, index) => {
-          const isEdge = index === 0 || index === STEPS - 1
-          return <View key={index} style={[styles.dot, isEdge && styles.dotHidden]} />
-        })}
-      </View>
-      <View style={[styles.thumb, { left: fraction * travel }]} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: THUMB_SIZE,
-    justifyContent: 'center',
-    width: '100%',
-  },
-  track: {
-    alignItems: 'center',
-    backgroundColor: COLORS.NEUTRAL_3,
-    borderColor: COLORS.NEUTRAL_4,
-    borderRadius: TRACK_RADIUS,
-    borderWidth: 0.5,
-    boxShadow:
-      'inset -3px -3px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.12)',
-    flexDirection: 'row',
-    height: TRACK_HEIGHT,
-    justifyContent: 'space-between',
-    paddingHorizontal: TRACK_PADDING,
-    width: '100%',
-  },
-  dot: {
-    backgroundColor: COLORS.NEUTRAL_5,
-    borderRadius: DOT_SIZE / 2,
-    height: DOT_SIZE,
-    width: DOT_SIZE,
-  },
-  dotHidden: {
-    opacity: 0,
-  },
-  thumb: {
-    backgroundColor: COLORS.NEUTRAL_1,
-    borderRadius: THUMB_SIZE / 2,
-    boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)',
-    height: THUMB_SIZE,
-    position: 'absolute',
-    width: THUMB_SIZE,
-  },
-})

package/src/features/profile/components/settings/TextToSpeechRow.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { useUnit } from 'effector-react'
-import { COLORS, SpeakerIcon, Toggle } from '@magmamath/react-native-ui'
-
-import { useText } from '../../../../i18n/i18n'
-import { useProfile } from '../../context/ProfileContext'
-import { SettingRow } from './SettingRow'
-
-const ICON_SIZE = 20
-
-export const TextToSpeechRow = () => {
-  const t = useText()
-  const { model } = useProfile()
-  const settings = useUnit(model.$settings)
-
-  return (
-    <SettingRow
-      icon={<SpeakerIcon size={ICON_SIZE} color={COLORS.NEUTRAL_7} />}
-      label={t('profile.textToSpeech')}
-    >
-      <Toggle value={settings.textToSpeech} onValueChange={model.setTextToSpeech} />
-    </SettingRow>
-  )
-}