@magmamath/students-features 0.3.3 → 0.4.0

package/src/features/endOfAssignment/components/NoAnswer/NoAnswer.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useUnit } from 'effector-react'
+import {
+  Button,
+  ButtonColor,
+  ButtonVariant,
+  COLORS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+
+import { EOAModalContentProps } from '../../types'
+import { NoAnswerContent } from './NoAnswerContent'
+import { PracticeButton } from '../../ui/PracticeButton'
+
+export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalContentProps) => {
+  const popUpData = useUnit(model.$popUpData)
+
+  const { stats, isExam, user } = popUpData ?? {}
+  const solved = stats?.solvedAmount ?? 0
+  const total = stats?.problemsAmount ?? 0
+  const buttonColorScheme = isExam ? ButtonColor.YELLOW : ButtonColor.BLUE
+
+  const practiceButtonVisible =
+    !popUpData?.newerAssignmentAvailable && (!isExam || (isExam && !!user?.practiceMode))
+
+  const handlePrimaryButtonPress = () => {
+    isExam ? onPracticePress?.() : model.goToFirstProblemPressed()
+    model.hidePopUp()
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.container}>
+        {!!textContent.title && (
+          <Typography variant="h2" style={{ color: COLORS.NEUTRAL_9 }}>
+            {textContent.title}
+          </Typography>
+        )}
+        {!!textContent.subtitle && (
+          <Typography variant="h4" style={{ color: COLORS.NEUTRAL_7 }}>
+            {textContent.subtitle}
+          </Typography>
+        )}
+      </View>
+      <NoAnswerContent solvedAmount={solved} problemsAmount={total} />
+      <View style={styles.buttonsContainer}>
+        <Button
+          variant={practiceButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
+          size="large"
+          colorScheme={popUpData?.isExam ? 'purple' : 'blue'}
+          style={{ text: { textTransform: 'uppercase' } }}
+          onPress={model.hidePopUpAndLeave}
+        >
+          {textContent.leftButtonText ?? ''}
+        </Button>
+
+        {practiceButtonVisible && (
+          <PracticeButton
+            onPress={handlePrimaryButtonPress}
+            text={textContent.rightButtonText}
+            colorScheme={buttonColorScheme}
+          />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: SPACING[400],
+    alignItems: 'center',
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[200],
+    paddingVertical: SPACING[300],
+  },
+  buttonText: {
+    textTransform: 'uppercase',
+  },
+})

package/src/features/endOfAssignment/components/NoAnswer/NoAnswerContent.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect } from 'react'
+import { View, StyleSheet, Text } from 'react-native'
+
+import {
+  BORDER_RADIUS,
+  COLORS,
+  FONT_FAMILY,
+  IS_MOBILE,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import Animated, { Easing, useSharedValue, withDelay, withTiming } from 'react-native-reanimated'
+
+import { EOABadge } from '../../ui/EOABadge'
+import { AnimatedCardVariant } from '../../types'
+
+type NoAnswerContentProps = {
+  solvedAmount: number
+  problemsAmount: number
+}
+
+export const NoAnswerContent = ({ solvedAmount, problemsAmount }: NoAnswerContentProps) => {
+  const opacitySv = useSharedValue(0)
+
+  useEffect(() => {
+    opacitySv.value = withDelay(
+      100,
+      withTiming(1, {
+        duration: 300,
+        easing: Easing.inOut(Easing.ease),
+      }),
+    )
+  }, [])
+
+  return (
+    <Animated.View style={[styles.container, { opacity: opacitySv }]}>
+      <View style={styles.content}>
+        <EOABadge
+          color={COLORS.NEUTRAL_5}
+          variant={AnimatedCardVariant.CORRECT_ANSWER}
+          size={70}
+          iconSize={45}
+        />
+
+        <View style={styles.textContainer}>
+          <Typography variant="h4" style={styles.largeText}>
+            {solvedAmount}
+          </Typography>
+          <Typography style={styles.text}>
+            <Text style={{ paddingRight: 1 }}>{'/'}</Text>
+            {problemsAmount}
+          </Typography>
+        </View>
+      </View>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    paddingHorizontal: SPACING[100],
+    marginTop: SPACING[300],
+    paddingTop: SPACING[100],
+    paddingBottom: 38,
+    marginBottom: SPACING[800],
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: BORDER_RADIUS[400],
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+    borderRadius: BORDER_RADIUS[200],
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    gap: SPACING[500],
+  },
+  iconWrapper: {
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: 100,
+    width: 70,
+    height: 70,
+    padding: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  largeText: {
+    fontSize: 48,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+    lineHeight: 48,
+    marginBottom: IS_MOBILE ? -7 : 0,
+    color: COLORS.NEUTRAL_5,
+  },
+  text: {
+    fontSize: 16,
+    fontFamily: FONT_FAMILY.buenosAires,
+    fontWeight: '700',
+    color: '#E0E0E0',
+  },
+})

package/src/features/endOfAssignment/constants.ts

@@ -0,0 +1,53 @@
+import { COLORS } from '@magmamath/react-native-ui'
+
+import { AnimatedCardVariant, EOAModalVariant } from './types'
+
+export const SPARKS_ANIMATION_DELAY = 2000
+export const GOOD_DRAWING_CARD_APPEARENCE_DELAY = 1800
+
+export const MODALS_WITH_BACKGROUND = [
+  EOAModalVariant.HAS_CORRECT_ANSWERS,
+  EOAModalVariant.HAS_GOOD_DRAWING,
+  EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS,
+]
+
+export const VARIANT_COLORS: Record<AnimatedCardVariant, { initial: string; final: string; primary: string }> = {
+  [AnimatedCardVariant.CORRECT_ANSWER]: {
+    initial: COLORS.GREEN_2,
+    final: COLORS.GREEN_4,
+    primary: COLORS.PRIMARY_GREEN,
+  },
+  [AnimatedCardVariant.GOOD_DRAWING]: {
+    initial: COLORS.ORANGE_2,
+    final: COLORS.ORANGE_4,
+    primary: COLORS.PRIMARY_ORANGE,
+  },
+}
+
+export const ANIMATION_DELAYS = {
+  step3: 500,
+  celebrations: 140
+}
+
+export const CARD_DIMENSIONS = {
+  initialWidth: 85,
+  finalWidth: 375,
+  initialHeight: 85,
+  finalHeight: 175,
+}
+
+export const OPACITY = {
+  initial: 0,
+  final: 1,
+}
+
+export const BADGE_PARAMS = {
+  initialTranslateX: -9,
+  intermediateTranslateX: 230,
+  finalTranslateX: 40,
+  initialRotation: -180,
+  initialScale: 0.5,
+}
+
+export const SPRING_CONFIG = { stiffness: 241, damping: 18, mass: 0.75 }
+export const SPRING_CONFIG_STEP_3 = { stiffness: 168.8, damping: 15, mass: 0.75 }

package/src/features/endOfAssignment/helpers.ts

@@ -0,0 +1,28 @@
+import { MODALS_WITH_BACKGROUND } from './constants'
+import { EOAModalVariant } from './types'
+
+export const getModalContainerSize = (modalVariant: EOAModalVariant) => {
+  switch (modalVariant) {
+    case EOAModalVariant.EXAM_SUBMIT:
+    case EOAModalVariant.EXAM_SAFE_MODE_SUBMIT:
+      return { container: { width: 600, height: 384 } }
+    case EOAModalVariant.EXAM_PAUSED:
+    case EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED:
+      return { container: { width: 560, height: 338 } }
+    case EOAModalVariant.EXAM_SAFE_MODE_LEAVE:
+      return { container: { width: 550, height: 280 } }
+    case EOAModalVariant.HAS_GOOD_DRAWING:
+      return { container: { width: 957, height: 550 } }
+    case EOAModalVariant.HAS_CORRECT_ANSWERS:
+    case EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS:
+      return { container: { width: 957, height: 550 } }
+    default:
+      return { container: { width: 600, height: 429 } }
+  }
+}
+
+export const shouldDisplayModalBackground = (modalVariant: EOAModalVariant | null) => {
+  if (!modalVariant) return false
+
+  return MODALS_WITH_BACKGROUND.includes(modalVariant)
+}

package/src/features/endOfAssignment/hooks/useSparkAnimation.tsx

@@ -0,0 +1,78 @@
+import { useEffect } from 'react'
+import {
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  interpolate,
+} from 'react-native-reanimated'
+import { SpringConfig } from 'react-native-reanimated/lib/typescript/animation/springUtils'
+
+type UseSparkAnimationProps = {
+  id: string
+  initialDelay: number
+  rotationAngle: number
+  holdDelay: number
+  springConfig: SpringConfig
+  x: number
+  y: number
+  size: number
+}
+
+export const useSparkAnimation = ({
+  id,
+  initialDelay,
+  rotationAngle,
+  holdDelay,
+  springConfig,
+  x,
+  y,
+  size,
+}: UseSparkAnimationProps) => {
+  const progress = useSharedValue(0)
+  const rotation = useSharedValue(0)
+
+  useAnimatedReaction(
+    () => progress.value,
+    (current, previous) => {
+      if (typeof previous === 'number' && current < previous * 0.95) {
+        rotation.value = id === '2' ? -rotationAngle : rotationAngle
+      } else {
+        rotation.value = current * (id === '2' ? -rotationAngle : rotationAngle)
+      }
+    },
+    [rotation, progress],
+  )
+
+  useEffect(() => {
+    progress.value = withDelay(
+      initialDelay,
+      withRepeat(
+        withSequence(
+          withSpring(1, springConfig),
+          withDelay(holdDelay, withSpring(0, springConfig)),
+        ),
+        -1,
+      ),
+    )
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(progress.value, [0, 1], [0, 1])
+    return {
+      position: 'absolute',
+      top: y,
+      left: x,
+      width: size,
+      height: size,
+      opacity,
+      transform: [{ rotate: `${rotation.value}deg` }],
+      zIndex: 10,
+    }
+  }, [progress, rotation])
+
+  return { animatedStyle }
+}

package/src/features/endOfAssignment/index.ts

@@ -0,0 +1,3 @@
+export { EOAModal } from './components/EOAModal'
+export * from './types'
+export * from './model/model'

package/src/features/endOfAssignment/model/model.ts

@@ -0,0 +1,57 @@
+import { createStore, createEvent, sample } from 'effector'
+import { EOAModalVariant, EOAModalData, EOAEventType } from '../types'
+
+export class EOAModel {
+  public readonly showPopUp = createEvent<EOAModalData>()
+  public readonly hidePopUp = createEvent()
+
+  public readonly practicePressed = createEvent()
+  public readonly leavePressed = createEvent()
+  public readonly goToFirstProblemPressed = createEvent()
+  public readonly updateRecommendations = createEvent<boolean>()
+  public readonly popUpTriggered = createEvent<EOAEventType>()
+
+  public readonly $popUpData = createStore<EOAModalData | null>(null)
+    .on(this.showPopUp, (_, payload) => payload)
+    .on(this.updateRecommendations, (state, hasRecommendations) => (state ? { ...state, hasRecommendations } : state))
+    .reset(this.hidePopUp)
+
+    public readonly $modalVariant = createStore<EOAModalVariant | null>(null)
+    .on(this.showPopUp, (_, popUpData) => {
+      if (!popUpData) return null;
+
+      const { isExam, stats, examFinished, eventType, cheatDetection } = popUpData;
+      const solvedAmount = stats?.solvedAmount ?? 0;
+      const goodDrawingAmount = stats?.goodDrawingAmount ?? 0;
+
+      if (!isExam) {
+        if (solvedAmount === 0) return EOAModalVariant.NO_CORRECT_ANSWERS;
+        if (solvedAmount > 0 && goodDrawingAmount > 0) return EOAModalVariant.HAS_GOOD_DRAWING;
+        return EOAModalVariant.HAS_CORRECT_ANSWERS;
+      }
+
+      if (eventType === EOAEventType.EXAM_PAUSED) return EOAModalVariant.EXAM_PAUSED;
+      if (eventType === EOAEventType.CHEAT_DETECTED) return EOAModalVariant.EXAM_SAFE_MODE_CHEAT_DETECTED;
+      if (eventType === EOAEventType.SUBMIT && !examFinished) {
+        return cheatDetection
+          ? EOAModalVariant.EXAM_SAFE_MODE_SUBMIT
+          : EOAModalVariant.EXAM_SUBMIT;
+      }
+
+      if (examFinished || eventType === EOAEventType.EXAM_FINISHED) {
+        return solvedAmount > 0
+          ? EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS
+          : EOAModalVariant.EXAM_FINISHED_NO_CORRECT_ANSWERS;
+      }
+
+      return EOAModalVariant.EXAM_SAFE_MODE_LEAVE;
+    })
+    .reset(this.hidePopUp);
+
+
+  public readonly hidePopUpAndLeave = () => {
+    this.leavePressed()
+    this.hidePopUp()
+  }
+
+}

package/src/features/endOfAssignment/types.ts

@@ -0,0 +1,65 @@
+import { EOAModel } from "./model/model"
+
+export enum EOAEventType {
+  SUBMIT = 'SUBMIT',
+  EXAM_LEAVE = 'EXAM_LEAVE',
+  EXAM_PAUSED = 'EXAM_PAUSED',
+  EXAM_FINISHED = 'EXAM_FINISHED',
+  CHEAT_DETECTED = 'CHEAT_DETECTED',
+}
+
+export enum EOAModalVariant {
+  NO_CORRECT_ANSWERS = 'NO_CORRECT_ANSWERS',
+  HAS_CORRECT_ANSWERS = 'HAS_CORRECT_ANSWERS',
+  HAS_GOOD_DRAWING = 'HAS_GOOD_DRAWING',
+
+  EXAM_PAUSED = 'EXAM_PAUSED',
+  EXAM_SUBMIT = 'EXAM_SUBMIT',
+
+  EXAM_SAFE_MODE_SUBMIT = 'EXAM_SAFE_MODE_SUBMIT',
+  EXAM_SAFE_MODE_LEAVE = 'EXAM_SAFE_MODE_LEAVE',
+  EXAM_SAFE_MODE_CHEAT_DETECTED = 'EXAM_SAFE_MODE_CHEAT_DETECTED',
+
+  EXAM_FINISHED_HAS_CORRECT_ANSWERS = 'EXAM_FINISHED_HAS_CORRECT_ANSWERS',
+  EXAM_FINISHED_NO_CORRECT_ANSWERS = 'EXAM_FINISHED_NO_CORRECT_ANSWERS',
+}
+
+export enum AnimatedCardVariant {
+  GOOD_DRAWING = 'goodDrawing',
+  CORRECT_ANSWER = 'correctAnswers',
+}
+
+export type EOAModalContentProps = {
+  textContent: EOAModalText
+  model: EOAModel
+  onPracticePress?: () => void
+}
+
+export type EOAModalData = {
+  isExam: boolean
+  newerAssignmentAvailable?: boolean
+  examFinished?: boolean
+  cheatDetection?: boolean
+  eventType?: EOAEventType
+  stats: {
+    solvedAmount: number
+    goodDrawingAmount: number
+    problemsAmount: number
+  }
+  hasRecommendations?: boolean
+  user: { firstName: string; practiceMode: boolean }
+}
+
+export type EOAModalText = {
+  title?: string
+  subtitle?: string
+  description?: string
+  leftButtonText?: string
+  rightButtonText?: string
+  stats?: {
+    correctAnswers?: string
+    correctAnswersPlural?: string
+    goodCalculations?: string
+    goodCalculationsPlural?: string
+  }
+}

package/src/features/endOfAssignment/ui/EOABadge.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import { CorrectIcon, COLORS } from '@magmamath/react-native-ui'
+import { ThumbUpIcon } from './ThumbUpIcon'
+import { AnimatedCardVariant } from '../types'
+
+type EOABadgeProps = {
+  variant: AnimatedCardVariant
+  size?: number
+  iconSize?: number
+  color?: string
+}
+
+export const EOABadge = ({
+  variant,
+  size = 70,
+  iconSize = 45,
+  color = COLORS.PRIMARY_GREEN,
+}: EOABadgeProps) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+          backgroundColor: color,
+        },
+      ]}
+    >
+      {variant === AnimatedCardVariant.CORRECT_ANSWER ? (
+        <CorrectIcon size={iconSize} color={COLORS.NEUTRAL_1} />
+      ) : (
+        <ThumbUpIcon size={iconSize} color={COLORS.NEUTRAL_1} />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 50,
+  },
+})

package/src/features/endOfAssignment/ui/PracticeButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { Button, ButtonColor } from '@magmamath/react-native-ui'
+
+type PracticeButtonProps = {
+  onPress: () => void
+  text?: string
+  colorScheme?: ButtonColor
+}
+
+export const PracticeButton = ({
+  onPress,
+  text = '',
+  colorScheme = ButtonColor.YELLOW,
+}: PracticeButtonProps) => {
+  return (
+    <Button
+      variant="primary"
+      colorScheme={colorScheme}
+      size="large"
+      style={{ text: { textTransform: 'uppercase' } }}
+      onPress={onPress}
+    >
+      {text}
+    </Button>
+  )
+}

package/src/features/endOfAssignment/ui/PracticeButtonGroup.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import { StyleSheet } from 'react-native'
+
+import Animated, {
+  useSharedValue,
+  withDelay,
+  FadeInRight,
+  Easing,
+  FadeInUp,
+  withTiming,
+} from 'react-native-reanimated'
+import { ButtonVariant, SPACING, Button } from '@magmamath/react-native-ui'
+
+import { PracticeButton } from './PracticeButton'
+
+type PracticeButtonGroupProps = {
+  textContent: { leftButtonText?: string; rightButtonText?: string }
+  isPracticeButtonVisible: boolean
+  onLeftButtonPress: () => void
+  onRightButtonPress: () => void
+  isExam?: boolean
+}
+
+export const PracticeButtonGroup = ({
+  textContent,
+  isPracticeButtonVisible,
+  onLeftButtonPress,
+  onRightButtonPress,
+  isExam,
+}: PracticeButtonGroupProps) => {
+  const buttonsContainerOpacity = useSharedValue(0)
+
+  console.log('rerender')
+
+  useEffect(() => {
+    buttonsContainerOpacity.value = withDelay(1000, withTiming(1, { duration: 500 }))
+  }, [])
+
+  return (
+    <Animated.View style={[styles.buttonsContainer, { opacity: buttonsContainerOpacity }]}>
+      <Animated.View
+        entering={
+          isPracticeButtonVisible
+            ? FadeInRight.delay(1000).duration(500).easing(Easing.ease)
+            : FadeInUp.duration(500)
+        }
+      >
+        <Button
+          variant={isPracticeButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
+          size="large"
+          colorScheme={isExam ? 'purple' : 'blue'}
+          style={{ text: { textTransform: 'uppercase' } }}
+          onPress={onLeftButtonPress}
+        >
+          {textContent.leftButtonText ?? ''}
+        </Button>
+      </Animated.View>
+      <Animated.View>
+        {isPracticeButtonVisible && (
+          <PracticeButton onPress={onRightButtonPress} text={textContent.rightButtonText ?? ''} />
+        )}
+      </Animated.View>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  buttonsContainer: {
+    height: 62,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: SPACING[300],
+  },
+})

package/src/features/endOfAssignment/ui/SparkIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { IconProps } from '@magmamath/react-native-ui'
+import Svg, { Path } from 'react-native-svg'
+
+export const SparkIcon = ({ size = 12, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 22 22" fill="none">
+      <Path
+        d="M20.563 12.363c-3.688 1.348-6.782 4.42-8.24 8.244-.505 1.19-2.111 1.19-2.587 0-1.517-3.793-4.61-6.864-8.299-8.18-1.25-.502-1.25-2.352 0-2.79 3.688-1.348 6.782-4.42 8.24-8.244.505-1.19 2.111-1.19 2.587 0 1.517 3.793 4.61 6.864 8.299 8.18 1.25.502 1.25 2.352 0 2.79z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/features/endOfAssignment/ui/ThumbUpIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { COLORS, IconProps } from '@magmamath/react-native-ui'
+import Svg, { Path } from 'react-native-svg'
+
+export const ThumbUpIcon = ({ size = 57, color = COLORS.NEUTRAL_1 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 57 57" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.22 49.594c-2.143 0-4.284-.72-6.027-1.862l-.071-.048-.296-.197-.158.319a4.28 4.28 0 01-3.837 2.382H9.466a4.279 4.279 0 01-4.278-4.28V23.306a4.279 4.279 0 014.278-4.279h3.365c1.479 0 2.782.75 3.551 1.89l.19.282.265-.212c5.975-4.77 8.052-10.642 8.495-13.38.277-1.717 1.289-2.983 2.692-3.609 1.329-.593 2.835-.542 4.145-.08 2.702.951 4.96 3.765 4.472 7.79-.403 3.328-1.348 6.402-2.075 8.692l-.129.407h10.805c3.133 0 5.975 2.24 6.322 5.54.239 2.271.405 5.292.016 7.948-.35 2.397-.956 6.096-2.536 9.219-1.62 3.203-4.436 6.08-9.153 6.08h-16.67zm7.662-42.021c-.566-.2-1.025-.15-1.279-.036a.636.636 0 00-.262.201c-.091.12-.15.279-.184.486-.621 3.847-3.536 11.617-11.909 17.265l-.138.093v16.407l.025.058c.363.867 1.115 1.744 2.184 2.445 1.184.777 2.596 1.227 3.902 1.227h16.67c1.36 0 2.483-.376 3.422-1.07.932-.69 1.665-1.681 2.273-2.884 1.263-2.497 1.807-5.619 2.16-8.031.318-2.173.192-4.812-.035-6.981-.12-1.141-1.125-2.071-2.47-2.071h-11.91c-1.994 0-3.56-1.904-2.936-3.938.123-.4.255-.817.393-1.252l.003-.009c.737-2.327 1.627-5.14 2.003-8.242.13-1.066-.08-1.894-.465-2.506a2.835 2.835 0 00-1.447-1.162zM9.466 22.903a.404.404 0 00-.403.403v22.602c0 .224.18.404.403.404h3.365a.403.403 0 00.404-.403V23.306a.404.404 0 00-.404-.404H9.466z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/index.ts

@@ -3,3 +3,5 @@ export type { LocalizationConfig } from './shared/translation'
 export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'
 export * from './features/feedback'
+export * from './features/celebrations'
+export * from './features/endOfAssignment'