@magmamath/students-features 1.8.4 → 1.8.6-rc.1

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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,126 @@
+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 { TEST_IDS } from '@magmamath/students-qa'
+
+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}
+            testID={TEST_IDS.LANGUAGE_SEARCH_INPUT}
+          />
+        </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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,67 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  COLORS,
+  KeyboardIcon,
+  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.
+const CANVAS_OPTIONS: SelectOptionProps[] = [
+  {
+    key: String(ProfileCanvasType.DRAWING),
+    title: <PencilIcon size={ICON_SIZE} color={COLORS.NEUTRAL_9} />,
+  },
+  {
+    key: String(ProfileCanvasType.SPREADSHEET),
+    title: <KeyboardIcon 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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,64 @@
+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,
+    padding: SPACING['200'],
+  },
+  sliderWrap: {
+    gap: SPACING['200'],
+    margin: SPACING['100'],
+  },
+  markers: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  marker: {
+    color: COLORS.NEUTRAL_7,
+    fontWeight: '700',
+    width: 16,
+  },
+})

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

@@ -0,0 +1,117 @@
+import React, { useRef, useState } from 'react'
+import { LayoutChangeEvent, PanResponder, StyleSheet, View } from 'react-native'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+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}
+      testID={TEST_IDS.TEXT_SIZE_SLIDER}
+      {...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: {
+    cursor: 'pointer',
+    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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useUnit } from 'effector-react'
+import { COLORS, SpeakerIcon, Toggle } from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+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}
+        testID={TEST_IDS.PROFILE_TTS_SWITCH}
+      />
+    </SettingRow>
+  )
+}

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useUnit } from 'effector-react'
+import { StyleSheet } from 'react-native'
+import {
+  COLORS,
+  FilterDropdown,
+  FilterDropdownSize,
+  FilterDropdownVariant,
+  GlobeIcon,
+} from '@magmamath/react-native-ui'
+import { TEST_IDS } from '@magmamath/students-qa'
+
+import { useText } from '../../../../i18n/i18n'
+import { useProfile } from '../../context/ProfileContext'
+import { SettingRow } from './SettingRow'
+
+const ICON_SIZE = 20
+
+export const TranslationLanguageRow = () => {
+  const t = useText()
+  const { model, onOpenTranslationModal } = useProfile()
+  const settings = useUnit(model.$settings)
+
+  return (
+    <SettingRow
+      icon={<GlobeIcon size={ICON_SIZE} color={COLORS.NEUTRAL_7} />}
+      label={t('profile.translationLanguage')}
+      style={styles.settingRow}
+    >
+      <FilterDropdown
+        variant={FilterDropdownVariant.SECONDARY}
+        size={FilterDropdownSize.MEDIUM}
+        value={settings.translationLanguage ?? undefined}
+        placeholder={t('profile.selectLanguage')}
+        disabled={settings.isTranslationLocked}
+        onPress={onOpenTranslationModal}
+        accessibilityLabel={t('profile.translationLanguage')}
+        testID={TEST_IDS.PROFILE_LANGUAGE_SELECTOR}
+        style={{
+          text: styles.filterLabel,
+          container: styles.filterContainer,
+        }}
+      />
+    </SettingRow>
+  )
+}
+
+const styles = StyleSheet.create({
+  settingRow: {
+    paddingVertical: 0,
+  },
+  filterLabel: {
+    color: COLORS.NEUTRAL_7,
+    fontSize: 16,
+    fontWeight: '400',
+  },
+  filterContainer: {
+    maxWidth: 231,
+  },
+})

package/src/features/profile/context/ProfileContext.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, type ReactNode } from 'react'
+
+import type { ProfileModel } from '../model/ProfileModel'
+
+export type ProfileContextValue = {
+  model: ProfileModel
+  onLogout: () => void
+  onOpenTranslationModal: () => void
+  onOpenJoinClass: () => void
+  showSolveMode?: boolean
+  versionInfo?: ReactNode
+}
+
+const ProfileContext = createContext<ProfileContextValue | null>(null)
+
+export function useProfile(): ProfileContextValue {
+  const value = useContext(ProfileContext)
+  if (!value) {
+    throw new Error('useProfile must be used within ProfileProvider')
+  }
+  return value
+}
+
+export const ProfileProvider = ProfileContext.Provider

package/src/features/profile/index.ts

@@ -0,0 +1,11 @@
+export { Profile } from './Profile'
+export { ProfileModel } from './model/ProfileModel'
+export type { ProfileApiProps } from './model/ProfileApi'
+export type { ProfileContextValue } from './context/ProfileContext'
+export { TranslationLanguageModal } from './components/modals/TranslationLanguageModal'
+export { JoinClassModal } from './components/modals/JoinClassModal'
+export { LogoutConfirmModal } from './components/modals/LogoutConfirmModal'
+export type { ProfileModalParams, LogoutModalParams } from './model/profileModal.types'
+export { JoinClassError } from './shared/JoinClassError'
+export * from './shared/profile.types'
+export * from './shared/profile.constants'

package/src/features/profile/model/ProfileApi.ts

@@ -0,0 +1,23 @@
+import { createEffect } from 'effector'
+
+import type {
+  JoinClassPayload,
+  JoinClassResult,
+  ProfileSettingsUpdate,
+} from '../shared/profile.types'
+
+export type ProfileApiProps = {
+  // `=> void` (not a Promise union) lets consumers wire an effector event or effect directly.
+  updateSettings: (payload: ProfileSettingsUpdate) => void
+  joinClass: (payload: JoinClassPayload) => Promise<JoinClassResult>
+}
+
+export class ProfileApi {
+  public readonly updateSettingsFx
+  public readonly joinClassFx
+
+  constructor(props: ProfileApiProps) {
+    this.updateSettingsFx = createEffect(props.updateSettings)
+    this.joinClassFx = createEffect(props.joinClass)
+  }
+}