@magmamath/students-features 1.3.7 → 1.3.8-rc.2

package/src/features/voice/recording/components/VoiceRecordButton.tsx

@@ -1,25 +1,36 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import {
+  BORDER_RADIUS,
   Button,
   ButtonColor,
   ButtonSize,
   ButtonStyle,
   ButtonVariant,
+  CheckIcon,
+  COLORS,
   IS_WEB,
+  MicrophoneIcon,
 } from '@magmamath/react-native-ui'
-import { Pressable } from 'react-native'
-import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
+import { Pressable, StyleSheet, View } from 'react-native'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
-import { VoiceRecorderState } from '../../constants'
+import { VOICE_RECORD_SHADOWS, VoiceRecorderState } from '../../constants'
 import { useText } from '../../../../shared/translation'
+import { RecordButtonVariant } from '../../types'
 
 type VoiceRecordButtonProps = {
-  style?: ButtonStyle
   model: VoiceRecordModel
+  buttonVariant: RecordButtonVariant
 }
 
-export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
+const defaultButtonStyles: ButtonStyle = {
+  button: {
+    width: 50,
+    height: 50,
+  },
+}
+
+export const VoiceRecordButton = ({ model, buttonVariant }: VoiceRecordButtonProps) => {
   const t = useText()
 
   const availableInputs = useUnit(model.recorderModel.$availableInputs)
@@ -27,38 +38,110 @@ export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
   const isButtonDisabled = useUnit(model.$isButtonDisabled)
   const isInitializing = useUnit(model.initializeRecording.pending)
 
-  const combinedStyles = useMemo((): ButtonStyle => {
-    return {
-      button: [{ width: 50, height: 50 }, style?.button],
-      container: [style?.container],
-      text: [style?.text],
-    }
-  }, [style])
+  const isRecording = voiceRecordState === VoiceRecorderState.RECORDING
+  const isIdle = voiceRecordState === VoiceRecorderState.IDLE
+  const hasInputs = availableInputs.length > 0
 
   return (
     <Pressable
       onPressIn={(e) => {
-        if (availableInputs.length) return
+        if (hasInputs) return
         e.preventDefault()
         model.notification.warning(t('voice.noMicrophoneFound'))
       }}
-      pointerEvents={!availableInputs.length || isInitializing ? 'box-only' : 'auto'}
+      pointerEvents={!hasInputs || isInitializing ? 'box-only' : 'auto'}
+      style={[isButtonDisabled ? styles.disabledCursor : undefined]}
     >
-      <Button
-        disabled={isButtonDisabled || !availableInputs.length}
-        onPressIn={() => model.recorderButtonHandler()}
-        style={combinedStyles}
-        size={ButtonSize.LARGE}
-        variant={ButtonVariant.SECONDARY}
-        colorScheme={ButtonColor.WHITE}
-        icon={
-          voiceRecordState === VoiceRecorderState.RECORDING ? (
-            <CheckIcon size={25} />
-          ) : (
-            <MicrophoneIcon style={IS_WEB ? { width: 19 } : { minWidth: 23, minHeight: 23 }} />
-          )
-        }
-      />
+      {buttonVariant === RecordButtonVariant.ADVANCED ? (
+        <AdvancedButton
+          isRecording={isRecording}
+          isIdle={isIdle}
+          disabled={isButtonDisabled}
+          onPressIn={() => model.recorderButtonHandler()}
+        />
+      ) : (
+        <Button
+          disabled={isButtonDisabled}
+          onPressIn={() => model.recorderButtonHandler()}
+          style={defaultButtonStyles}
+          size={ButtonSize.LARGE}
+          variant={ButtonVariant.SECONDARY}
+          colorScheme={ButtonColor.WHITE}
+          icon={
+            isRecording ? (
+              <CheckIcon size={25} />
+            ) : (
+              <MicrophoneIcon
+                style={IS_WEB ? styles.microphoneIconWeb : styles.microphoneIconNative}
+              />
+            )
+          }
+        />
+      )}
     </Pressable>
   )
 }
+
+type AdvancedButtonProps = {
+  isRecording: boolean
+  isIdle: boolean
+  disabled: boolean
+  onPressIn: () => void
+}
+
+const AdvancedButton = ({ isRecording, isIdle, disabled, onPressIn }: AdvancedButtonProps) => (
+  <Pressable
+    style={[styles.advancedButtonContainer, disabled && styles.disabledCursor]}
+    onPressIn={onPressIn}
+    disabled={disabled}
+  >
+    <View style={[styles.advancedIconContainer, !isIdle && styles.advancedIconContainerActive]}>
+      {isRecording ? (
+        <CheckIcon size={18} color={COLORS.NEUTRAL_1} />
+      ) : (
+        <MicrophoneIcon
+          style={styles.advancedMicrophoneIcon}
+          color={disabled ? COLORS.NEUTRAL_5 : isIdle ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_1}
+        />
+      )}
+    </View>
+  </Pressable>
+)
+
+const styles = StyleSheet.create({
+  advancedButtonContainer: {
+    width: 52,
+    height: 52,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BORDER_RADIUS[300],
+    boxShadow: VOICE_RECORD_SHADOWS[RecordButtonVariant.ADVANCED],
+  },
+  advancedIconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: BORDER_RADIUS[300],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabledCursor: {
+    // @ts-expect-error web-only property
+    cursor: 'not-allowed',
+  },
+  microphoneIconWeb: {
+    width: 19,
+  },
+  microphoneIconNative: {
+    minWidth: 23,
+    minHeight: 23,
+  },
+  advancedIconContainerActive: {
+    borderRadius: 32,
+    backgroundColor: COLORS.PRIMARY_BLUE,
+  },
+  advancedMicrophoneIcon: {
+    width: 14,
+    height: 19,
+  },
+})

package/src/features/voice/recording/components/VoiceRecordDeleteButton.tsx

@@ -17,8 +17,8 @@ export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDele
 
 const styles = StyleSheet.create({
   container: {
-    width: 36,
-    height: 36,
+    width: 32,
+    height: 32,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/features/voice/recording/hooks/useVoiceRecorderAnimation.ts

@@ -1,19 +1,23 @@
 import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { VOICE_RECORDER_CONTAINER_SIZES } from '../../constants'
+import { RecordButtonVariant } from '../../types'
 
-export const useVoiceRecorderAnimation = (isExpanded: boolean) => {
+export const useVoiceRecorderAnimation = (
+  isExpanded: boolean,
+  buttonVariant: RecordButtonVariant,
+) => {
   const containerAnimatedStyle = useAnimatedStyle(() => {
     return {
       height: withTiming(
         isExpanded
-          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED
-          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED,
+          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED[buttonVariant]
+          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED[buttonVariant],
         {
           duration: 280,
         },
       ),
     }
-  }, [isExpanded])
+  }, [isExpanded, buttonVariant])
 
   return { containerAnimatedStyle }
 }

package/src/features/voice/types.ts

@@ -82,3 +82,8 @@ export type VoiceTranscriptionItem = {
   controller?: AbortController
   hasDrawing?: boolean
 }
+
+export enum RecordButtonVariant {
+  DEFAULT = 'default',
+  ADVANCED = 'advanced',
+}

package/.claude/settings.local.json

@@ -1,25 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npx tsc:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/students-features -name rn-draw-area -o -name *draw*area*)",
-      "Bash(grep:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools -type f -name \"*.ts*\" ! -path \"*/node_modules/*\" ! -path \"*/.next/*\" ! -path \"*/dist/*\" -exec grep -l \"convertLatexToBrackets\\\\|convertBracketsToLatex\" {})",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools -type f \\\\\\(-name *.test.ts* -o -name *.spec.ts* \\\\\\))",
-      "Bash(ls jest.config* vitest.config* tsconfig*)",
-      "Bash(npm ls:*)",
-      "Read(//Users/alesiaskarakhod/node_modules/.bin/**)",
-      "Bash(yarn add:*)",
-      "Bash(npx jest:*)",
-      "Bash(node:*)",
-      "Bash(npx ts-node:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools/packages -name jest.config.* -o -name *.test.ts -o -name *.test.js -o -name *.spec.ts)",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools/packages -maxdepth 3 -type f \\\\\\(-name *.test.ts -o -name *.spec.ts -o -name *.test.tsx -o -name *.spec.tsx \\\\\\))",
-      "Bash(find /Users/alesiaskarakhod/Work/magmamath-tools -type f \\\\\\(-name *.test.ts -o -name *.test.tsx -o -name *.spec.ts -o -name *.spec.tsx \\\\\\))",
-      "Bash(yarn test:*)",
-      "Bash(npx vitest:*)",
-      "Bash(npx tsup:*)",
-      "Bash(find /Users/alesiaskarakhod/Work/react-native/node_modules/@magmamath/frontend-config -name *.d.ts -o -name *.js)"
-    ]
-  }
-}

package/.editorconfig

@@ -1,15 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-
-indent_style = space
-indent_size = 2
-
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules/
-./lib/

package/.eslintrc

@@ -1,22 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2020": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react-refresh"],
-  "rules": {
-    "react-refresh/only-export-components": "warn"
-  }
-}

package/.gitattributes

@@ -1,3 +0,0 @@
-*.pbxproj -text
-# specific for windows script files
-*.bat text eol=crlf

package/.github/actions/setup/action.yml

@@ -1,37 +0,0 @@
-name: Setup
-description: Setup Node.js and install dependencies
-
-inputs:
-  npmrc-auth-token:
-    required: true
-
-runs:
-  using: composite
-  steps:
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version-file: .nvmrc
-
-    - name: Create .npmrc
-      shell: bash
-      run: |
-        echo "registry=https://registry.npmjs.org" > .npmrc
-        echo "//registry.npmjs.org/:_authToken=${{ inputs.npmrc-auth-token }}" >> .npmrc
-
-    - name: Cache dependencies
-      id: yarn-cache
-      uses: actions/cache@v3
-      with:
-        path: |
-          **/node_modules
-          .yarn/install-state.gz
-        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          ${{ runner.os }}-yarn-
-
-    - name: Install dependencies
-      if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: yarn install --immutable
-      shell: bash

package/.github/workflows/ci.yml

@@ -1,73 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-  merge_group:
-    types:
-      - checks_requested
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Lint files
-        run: yarn lint
-
-      - name: Typecheck files
-        run: yarn typecheck
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Run unit tests
-        run: yarn test --maxWorkers=2 --coverage
-
-  build-library:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Build package
-        run: yarn prepare
-
-  build-web:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          npmrc-auth-token: ${{ secrets.MAGMA_NPMRC_TOKEN }}
-
-      - name: Build example for Web
-        run: |
-          yarn example expo export --platform web

package/.gitignore

@@ -1,84 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# XDE
-.expo/
-
-# VSCode
-.vscode/
-jsconfig.json
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IJ
-#
-.classpath
-.cxx
-.gradle
-.idea
-.project
-.settings
-local.properties
-android.iml
-
-# Cocoapods
-#
-example/ios/Pods
-
-# Ruby
-example/vendor/
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-android/keystores/debug.keystore
-
-# Yarn
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
-# Expo
-.expo/
-
-# Turborepo
-.turbo/
-
-# generated by bob
-dist/
-!src/lib/
-
-# React Native Codegen
-ios/generated
-android/generated
-.npmrc

package/.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

package/.idea/codeStyles/Project.xml

@@ -1,62 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <option name="LINE_SEPARATOR" value="&#10;" />
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="100" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/copilot.data.migration.agent.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AgentMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.ask.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="AskMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Ask2AgentMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/copilot.data.migration.edit.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EditMigrationStateService">
-    <option name="migrationStatus" value="COMPLETED" />
-  </component>
-</project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,8 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="EditorConfigUnusedDeclaration" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="UnusedDefine" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/jsLinters/eslint.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EslintConfiguration">
-    <option name="fix-on-save" value="true" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/students-features.iml" filepath="$PROJECT_DIR$/.idea/students-features.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/prettier.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
-    <option name="myRunOnSave" value="true" />
-  </component>
-</project>

package/.idea/students-features.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>