@magmamath/students-features 0.6.7-rc.2 → 0.6.7-rc.4

package/dist/typescript/module/index.d.ts

@@ -6,4 +6,5 @@ export * from './features/celebrations';
 export * from './features/endOfAssignment';
 export * from './features/formulaSheet';
 export * from './features/problemSelector';
+export * from './features/gifCelebrations';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA"}

package/dist/typescript/module/lib/effector/createControllerEffect.d.ts

@@ -11,6 +11,6 @@ type RequestOptionalConfig = {
     signal?: AbortSignal;
 };
 export declare function controlledRequest<R = void, P = void>(request: (props: P, config?: RequestOptionalConfig) => Promise<R>): ({ data, controller, abortAfter, }: ControlledRequestProps<P>) => Promise<R>;
-export declare const createControllerEffect: <T, P>(fn: (props: P, config?: RequestOptionalConfig) => Promise<T>) => ControlledEffect<P, T>;
+export declare const createControllerEffect: <T, P = void>(fn: (props: P, config?: RequestOptionalConfig) => Promise<T>) => ControlledEffect<P, T>;
 export {};
 //# sourceMappingURL=createControllerEffect.d.ts.map

package/dist/typescript/module/lib/effector/createControllerEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createControllerEffect.d.ts","sourceRoot":"","sources":["../../../../../src/lib/effector/createControllerEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAMpD,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAChD,UAAU,EAAE,eAAe,CAAA;CAC9B,CAAA;AAED,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC7B,IAAI,EAAE,CAAC,CAAA;IACP,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,CAAA;AAErD,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAChD,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,uCAM9D,sBAAsB,CAAC,CAAC,CAAC,gBAwB/B;AAED,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAE,CAAC,MACnC,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,2BAa/D,CAAA"}
+{"version":3,"file":"createControllerEffect.d.ts","sourceRoot":"","sources":["../../../../../src/lib/effector/createControllerEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAMpD,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAClD,UAAU,EAAE,eAAe,CAAA;CAC5B,CAAA;AAED,KAAK,sBAAsB,CAAC,CAAC,IAAI;IAC/B,IAAI,EAAE,CAAC,CAAA;IACP,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAE,CAAA;AAErD,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAClD,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,uCAM9D,sBAAsB,CAAC,CAAC,CAAC,gBAwB7B;AAED,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAE,CAAC,aACrC,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC,CAAC,CAAC,2BAa7D,CAAA"}

package/dist/typescript/module/lib/helpers/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/lib/helpers/helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,YAAW,CAAC;AAE7B,eAAO,MAAM,gBAAgB,cACsC,CAAA;AASnE,eAAO,MAAM,mBAAmB,SAAU,IAAI,WAuB7C,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/lib/helpers/helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,YAAW,CAAA;AAE5B,eAAO,MAAM,gBAAgB,cACsC,CAAA;AASnE,eAAO,MAAM,mBAAmB,SAAU,IAAI,WAuB7C,CAAA"}

package/dist/typescript/module/shared/translation/constants.d.ts

@@ -20,6 +20,11 @@ export declare const LOCALIZATION_CONFIGS: {
             howCanIHelp: string;
             showError: string;
         };
+        gifCelebrations: {
+            greatStart: string;
+            onTheWay: string;
+            almostThere: string;
+        };
     };
     "en-GB": {
         "teacherFeedback.noComments": string;
@@ -42,6 +47,11 @@ export declare const LOCALIZATION_CONFIGS: {
             howCanIHelp: string;
             showError: string;
         };
+        gifCelebrations: {
+            greatStart: string;
+            onTheWay: string;
+            almostThere: string;
+        };
     };
     "sv-SE": {
         "teacherFeedback.noComments": string;
@@ -64,6 +74,11 @@ export declare const LOCALIZATION_CONFIGS: {
             howCanIHelp: string;
             showError: string;
         };
+        gifCelebrations: {
+            greatStart: string;
+            onTheWay: string;
+            almostThere: string;
+        };
     };
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIhC,CAAA"}

package/dist/typescript/module/shared/translation/model.d.ts

@@ -21,6 +21,11 @@ export declare const setLocalization: import("effector").EventCallable<{
         howCanIHelp: string;
         showError: string;
     };
+    gifCelebrations: {
+        greatStart: string;
+        onTheWay: string;
+        almostThere: string;
+    };
 } | ((config: typeof LOCALIZATION_CONFIGS) => Translations)>;
 export declare const $localization: import("effector").StoreWritable<{
     "teacherFeedback.noComments": string;
@@ -43,5 +48,10 @@ export declare const $localization: import("effector").StoreWritable<{
         howCanIHelp: string;
         showError: string;
     };
+    gifCelebrations: {
+        greatStart: string;
+        onTheWay: string;
+        almostThere: string;
+    };
 }>;
 //# sourceMappingURL=model.d.ts.map

package/dist/typescript/module/shared/translation/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}

package/dist/typescript/module/types/common.types.d.ts

@@ -0,0 +1,5 @@
+export type Size = {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=common.types.d.ts.map

package/dist/typescript/module/types/common.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.types.d.ts","sourceRoot":"","sources":["../../../../src/types/common.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.6.7-rc.2",
+  "version": "0.6.7-rc.4",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -17,11 +17,9 @@
     "prepare": "bob build",
     "release": "release-it"
   },
-  "dependencies": {
-    "effector": "^23.2.3",
-    "effector-react": "^23.2.1"
-  },
   "peerDependencies": {
+    "effector": "^23.2.3",
+    "effector-react": "^23.2.1",
     "@magmamath/react-native-ui": "*",
     "react": "*",
     "react-native": "*",

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

@@ -1,7 +1,7 @@
 import React, { ReactNode, useEffect, useState } from 'react'
 import {
   Animated,
-  GestureResponderEvent, Keyboard,
+  GestureResponderEvent,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -62,7 +62,6 @@ export const Modal = ({
   useEffect(() => {
     if (isVisible) {
       modalModel.animation.show()
-      Keyboard.dismiss()
     }
   }, [isVisible])
 

package/src/features/gifCelebrations/GifCelebrations.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import { Gif } from './components/Gif'
+import { Progress } from './components/Progress'
+import { ContentContainer } from './components/ContentContainer'
+import { Backdrop } from './components/Backdrop'
+import { Easing, runOnJS, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
+import { useUnit } from 'effector-react'
+import { ANIMATION_DURATION } from './constants'
+import { GifCelebrationsModel } from './model/GifCelebrations.model'
+import { ProgressValue, TextComponentType } from './types/model.types'
+
+type GifCelebrationsProps = {
+  model: GifCelebrationsModel
+  TextComponent: TextComponentType
+}
+
+export const GifCelebrations = ({ model, TextComponent }: GifCelebrationsProps) => {
+  const [problemsAmount, resolvedProblemsAmount, activeGif] = useUnit([
+    model.$problemsAmount,
+    model.$resolvedProblemsAmount,
+    model.$activeGif,
+  ])
+
+  const completedPercent =
+    resolvedProblemsAmount &&
+    problemsAmount &&
+    Math.round((resolvedProblemsAmount / problemsAmount) * 100)
+
+  const progress = useSharedValue<ProgressValue>(0)
+
+  const stopAnimation = () => {
+    model.stop()
+    progress.value = 0
+  }
+
+  const playAnimation = () => {
+    progress.value = withSequence(
+      withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.52, 0.16, 0.26, 0.77),
+      }),
+      withTiming(
+        2,
+        {
+          duration: ANIMATION_DURATION,
+          easing: Easing.bezier(0.71, 0.09, 0.49, 0.89),
+        },
+        () => runOnJS(stopAnimation)(),
+      ),
+    )
+  }
+
+  useEffect(() => {
+    if (activeGif) {
+      playAnimation()
+    }
+  }, [activeGif])
+
+  if (!activeGif) {
+    return null
+  }
+
+  return (
+    <Backdrop progress={progress}>
+      <ContentContainer progress={progress}>
+        <Gif
+          gifObject={activeGif}
+          getCachePathMethod={model.cache.getCachePathMethod}
+          TextComponent={TextComponent}
+        />
+        <Progress progress={progress} completedPercent={completedPercent} />
+      </ContentContainer>
+    </Backdrop>
+  )
+}

package/src/features/gifCelebrations/components/Backdrop.tsx

@@ -0,0 +1,41 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import Animated, { useAnimatedStyle, interpolateColor, SharedValue } from 'react-native-reanimated'
+import { BACKDROP_COLOR } from '../constants'
+import { ProgressValue } from '../types/model.types'
+
+type BackdropProps = {
+  children: React.ReactNode
+  progress: SharedValue<ProgressValue>
+}
+
+export const Backdrop = ({ children, progress }: BackdropProps) => {
+  const { width, height } = useWindowDimensions()
+
+  const backdropAnimatedStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(
+        progress.value,
+        [0, 1, 2],
+        [BACKDROP_COLOR.INITIAL, BACKDROP_COLOR.FINAL, BACKDROP_COLOR.INITIAL],
+      ),
+    }),
+    [progress],
+  )
+
+  return (
+    <Animated.View style={[styles.backdrop, { width, height }, backdropAnimatedStyle]}>
+      {children}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    zIndex: 10100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(51, 51, 51, 0.33);',
+  },
+})

package/src/features/gifCelebrations/components/ContentContainer.tsx

@@ -0,0 +1,44 @@
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import React from 'react'
+import { SPACING } from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
+import { CONTENT_CONTAINER } from '../constants'
+import { ProgressValue } from '../types/model.types'
+
+type ContentContainerProps = {
+  children: React.ReactNode
+  progress: SharedValue<ProgressValue>
+}
+
+export const ContentContainer = ({ children, progress }: ContentContainerProps) => {
+  const { width } = useWindowDimensions()
+
+  const RIGHT_POSITION =
+    width / 2 + CONTENT_CONTAINER.CONTAINER_WIDTH / 2 + CONTENT_CONTAINER.ROTATION_PADDING
+  const LEFT_POSITION = -RIGHT_POSITION - CONTENT_CONTAINER.ROTATION_PADDING
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          translateX: interpolate(progress.value, [0, 1, 2], [LEFT_POSITION, 0, RIGHT_POSITION]),
+        },
+        {
+          rotate: `${interpolate(progress.value, [0, 1, 2], [-CONTENT_CONTAINER.ANGLE, 0, CONTENT_CONTAINER.ANGLE])}deg`,
+        },
+      ],
+    }),
+    [progress, RIGHT_POSITION, LEFT_POSITION],
+  )
+
+  return <Animated.View style={[styles.container, animatedStyles]}>{children}</Animated.View>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: CONTENT_CONTAINER.CONTAINER_WIDTH,
+    alignItems: 'center',
+    gap: SPACING[800],
+    position: 'absolute',
+  },
+})

package/src/features/gifCelebrations/components/Gif.tsx

@@ -0,0 +1,88 @@
+import { StyleSheet, View, Image } from 'react-native'
+import React, { useLayoutEffect, useState } from 'react'
+import { BORDER_RADIUS, COLORS, IS_WEB, SPACING } from '@magmamath/react-native-ui'
+import { CustomGetCachePathMethod, GifObject, TextComponentType } from '../types/model.types'
+import { MAX_GIF_SIZE, MIN_GIF_SIZE } from '../constants'
+import { useText } from '../../../shared/translation'
+import { constrainDimension, getGifLabel, getImagePath } from '../helpers'
+import gifFallback from '../assets/gifFallback.gif'
+import { Size } from '../../../types/common.types'
+
+type GifProps = {
+  gifObject: GifObject
+  getCachePathMethod?: CustomGetCachePathMethod
+  TextComponent: TextComponentType
+}
+
+export const Gif = ({ gifObject, getCachePathMethod, TextComponent }: GifProps) => {
+  const [size, setSize] = useState<Size | null>(null)
+  const [pathOrUri, setPathOrUri] = useState('')
+
+  const t = useText()
+
+  const gifGroupNumber = Number(gifObject.group.replace('group', ''))
+  const gifLabel = getGifLabel(gifGroupNumber)
+
+  useLayoutEffect(() => {
+    const loadImageSize = async () => {
+      let localPath
+
+      try {
+        localPath = await getImagePath(gifObject.url, getCachePathMethod)
+      } catch (error) {
+        localPath = IS_WEB ? gifFallback : Image.resolveAssetSource(gifFallback).uri
+        console.error('Error fetching image from cache:', error)
+      }
+
+      Image.getSize(localPath, (width, height) => {
+        setSize({
+          width: constrainDimension(width, MIN_GIF_SIZE, MAX_GIF_SIZE.WIDTH),
+          height: constrainDimension(height, MIN_GIF_SIZE, MAX_GIF_SIZE.HEIGHT),
+        })
+        setPathOrUri(localPath)
+      })
+    }
+
+    loadImageSize()
+  }, [gifObject.url])
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        {size && pathOrUri && (
+          <Image
+            alt="Funny celebration animated image"
+            source={{
+              uri: pathOrUri,
+            }}
+            width={size.width}
+            height={size.height}
+            style={[styles.image, { width: size.width, height: size.height }]} //this sizes duplication is needed for compatibility with web and rn
+          />
+        )}
+        <View style={styles.textContainer}>{TextComponent(t(gifLabel))}</View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+  },
+  container: {
+    padding: SPACING[1600],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+  },
+  image: {
+    borderRadius: BORDER_RADIUS[100],
+  },
+  textContainer: {
+    position: 'absolute',
+    bottom: 74,
+    alignSelf: 'center',
+  },
+})

package/src/features/gifCelebrations/components/Progress.tsx

@@ -0,0 +1,106 @@
+import { StyleSheet, View, Image } from 'react-native'
+import React from 'react'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  HeadingVariants,
+  IS_WEB,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import Animated, { useAnimatedStyle, SharedValue, interpolate } from 'react-native-reanimated'
+import confettiImage from '../assets/confetti.webp'
+import { ProgressValue } from '../types/model.types'
+import { getProgressLineWidth } from '../helpers'
+
+type ProgressProps = {
+  progress: SharedValue<ProgressValue>
+  completedPercent: number
+}
+
+export const Progress = ({ progress, completedPercent }: ProgressProps) => {
+  const progressLineWidth = getProgressLineWidth(completedPercent)
+
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      width: `${interpolate(
+        progress.value,
+        [0, 1, 2],
+        [0, progressLineWidth, progressLineWidth],
+      )}%`,
+    }),
+    [progress, progressLineWidth],
+  )
+
+  return (
+    <View style={styles.backgroundContainer}>
+      <View style={styles.container}>
+        <View style={styles.progressContainer}>
+          <Animated.View style={[styles.progress, animatedStyles]}>
+            <Typography variant={HeadingVariants.H1} style={styles.percent}>
+              {`${completedPercent}%`}
+            </Typography>
+          </Animated.View>
+        </View>
+        <Image
+          source={
+            IS_WEB
+              ? {
+                  uri: confettiImage,
+                }
+              : require('../assets/confetti.webp')
+          }
+          style={styles.confetti}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: 'rgba(255, 255, 255, 0.6)',
+    borderRadius: 23,
+    padding: SPACING[200],
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+    height: 116,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingLeft: SPACING[400],
+    paddingRight: SPACING[200],
+    gap: SPACING[100],
+  },
+  progressContainer: {
+    height: 50,
+    flexGrow: 1,
+    backgroundColor: COLORS.NEUTRAL_5,
+    borderRadius: 90,
+    overflow: 'hidden',
+  },
+  progress: {
+    position: 'absolute',
+    height: '100%',
+    backgroundColor: COLORS.PRIMARY_BLUE,
+    borderRadius: BORDER_RADIUS[200],
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+    paddingRight: 10.6,
+    overflow: 'hidden',
+  },
+  confetti: {
+    width: 75,
+    height: 70,
+    marginHorizontal: SPACING[200],
+  },
+  percent: {
+    position: 'absolute',
+    paddingRight: 10,
+    color: COLORS.NEUTRAL_1,
+    fontWeight: '700',
+  },
+})

package/src/features/gifCelebrations/constants.ts

@@ -0,0 +1,32 @@
+export const BACKDROP_COLOR = {
+  INITIAL: 'rgba(51, 51, 51, 0)',
+  FINAL: 'rgba(51, 51, 51, 0.66)',
+}
+
+export const CONTENT_CONTAINER = {
+  ANGLE: 5,
+  CONTAINER_WIDTH: 769,
+  ROTATION_PADDING: 44, // to be sure that the content is not cut off on the edges because of rotate transform
+}
+
+export const ANIMATION_DURATION = 1750
+export const MIN_PROBLEMS_TO_SHOW_GIF = 7
+
+export const MAX_GIF_SIZE = {
+  WIDTH: 480,
+  HEIGHT: 300,
+}
+export const MIN_GIF_SIZE = 300
+
+export const GROUPS_PERCENTAGES = {
+  group1: [15, 20, 25, 30], // Early celebrations
+  group2: [33, 40, 45, 50], // Mid celebrations
+  group3: [60, 66, 75, 80], // Party
+}
+
+export const MIN_WIDTH_FOR_ONE_DIGIT = 12
+export const MIN_WIDTH_FOR_TWO_DIGITS = 15
+
+export const GET_GIFS_TIMEOUT = 5000
+
+export const GIFS_FETCHED_KEY = 'gifsFetchedTimestamp'