feat: refactor AnimatedTimer component to use constants for dimensions and update size prop type

Author: AbhishekA1509

src/Shared/Components/AnimatedTimer/AnimatedTimer.component.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { motion, useMotionValue, useTransform, animate } from 'framer-motion'
 import { AnimatedTimerProps } from './types'
-import { END_ANGLE, START_ANGLE } from './constants'
+import { CX, CY, END_ANGLE, RADIUS, START_ANGLE } from './constants'
 
 const polarToCartesian = (cx: number, cy: number, r: number, angleInDegrees: number) => {
     const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0
@@ -26,10 +26,6 @@ const describeArcPath = (cx: number, cy: number, r: number, endAngle: number) =>
 }
 
 const AnimatedTimer = ({ duration, onComplete, size = 24 }: AnimatedTimerProps) => {
-    const CX = size / 2
-    const CY = size / 2
-    const RADIUS = size / 4
-
     const angle = useMotionValue<number>(START_ANGLE)
     const d = useTransform(angle, (currentAngle) => describeArcPath(CX, CY, RADIUS, currentAngle))
     useEffect(() => {
@@ -48,6 +44,7 @@ const AnimatedTimer = ({ duration, onComplete, size = 24 }: AnimatedTimerProps)
             viewBox={`0 0 ${CX * 2} ${CY * 2}`}
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
+            className={`icon-dim-${size}`}
         >
             <path
                 fillRule="evenodd"

src/Shared/Components/AnimatedTimer/constants.ts

@@ -1,2 +1,5 @@
+export const CX = 12
+export const CY = 12
+export const RADIUS = 6
 export const START_ANGLE = 0
 export const END_ANGLE = 360

src/Shared/Components/AnimatedTimer/types.ts

@@ -1,3 +1,4 @@
+import { IconBaseSizeType } from '@Shared/index'
 import { animate } from 'framer-motion'
 
 export interface AnimatedTimerProps extends Pick<Parameters<typeof animate>[2], 'onComplete'> {
@@ -9,5 +10,5 @@ export interface AnimatedTimerProps extends Pick<Parameters<typeof animate>[2],
     /**
      * @default 24
      */
-    size?: number
+    size?: IconBaseSizeType
 }

src/Shared/Components/Icon/types.ts

@@ -17,6 +17,7 @@
 import { FC, SVGProps } from 'react'
 
 import { TooltipProps } from '@Common/Tooltip/types'
+import { IconBaseColorType, IconBaseSizeType } from '@Shared/index'
 
 type IconMap = Record<string, FC<SVGProps<SVGSVGElement>>>
 
@@ -29,17 +30,13 @@ export interface IconBaseProps {
      * The size of the icon in pixels.
      * @default 16
      */
-    size?: 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 28 | 30 | 32 | 34 | 36 | 40 | 42 | 44 | 48 | 72 | 80
+    size?: IconBaseSizeType
     /** Props to configure the tooltip when hovering over the icon. */
     tooltipProps?: TooltipProps
     /**
      * The color of the icon (color tokens). \
      * If `null`, the default color present in icon is used.
      * @example `'B500'`, `'N200'`, `'G50'`, `'R700'`
      */
-    color:
-        | `${'B' | 'N' | 'G' | 'Y' | 'R' | 'V' | 'O'}${`${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | '50' | '0'}`
-        | 'white'
-        | 'black'
-        | null
+    color: IconBaseColorType
 }

src/Shared/types.ts

@@ -1105,3 +1105,32 @@ export type CountryISO2Type = ParsedCountry['iso2']
 export enum ResponseHeaders {
     LICENSE_STATUS = 'X-License-Status',
 }
+
+export type IconBaseSizeType =
+    | 6
+    | 8
+    | 10
+    | 12
+    | 14
+    | 16
+    | 18
+    | 20
+    | 22
+    | 24
+    | 28
+    | 30
+    | 32
+    | 34
+    | 36
+    | 40
+    | 42
+    | 44
+    | 48
+    | 72
+    | 80
+
+export type IconBaseColorType =
+    | `${'B' | 'N' | 'G' | 'Y' | 'R' | 'V' | 'O'}${`${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | '50' | '0'}`
+    | 'white'
+    | 'black'
+    | null