feat: add screenBreakpoint store and make isMobile a derived

package.json

@@ -73,7 +73,8 @@
         },
         "./enums": "./dist/enums/index.js",
         "./preset": "./dist/tailwind/tailwind.preset.js",
-        "./constants": "./dist/constants/index.js"
+        "./constants": "./dist/constants/index.js",
+        "./stores": "./dist/stores/index.js"
     },
     "types": "./dist/components/index.d.ts",
     "lint-staged": {

src/lib/components/atoms/animation/animation.svelte

@@ -2,7 +2,7 @@
     import Lottie, { type AnimationDirection, type AnimationItem } from 'lottie-web'
     import { onMount } from 'svelte'
     import { RendererType } from './animation.enums'
-    import { isMobile } from '$lib/stores'
+    import { isSmallScreen } from '$lib/stores'
 
     export let src: string =
         'https://lottie.host/05761115-2753-4236-8e02-049e9b61969f/X6gyzVzo8S.json'
@@ -63,7 +63,7 @@
             renderer,
             container: player,
             loop,
-            autoplay: $isMobile || (!playOnHover && autoplay),
+            autoplay: $isSmallScreen || (!playOnHover && autoplay),
             path: src,
         })
     })
@@ -74,7 +74,7 @@
     class:pointer-events-none={pointerEventsNone}
     style:--background-color={backgroundColor}
     {src}
-    autoplay={isMobile || (!playOnHover && autoplay)}
+    autoplay={isSmallScreen || (!playOnHover && autoplay)}
     {loop}
     role="img"
 />

src/lib/components/molecules/highlight-card/highlight-card.svelte

@@ -2,7 +2,7 @@
     import { IconEnum, Icon } from '$components'
     import { OVERLINE_TEXT } from '$components/atoms/title/title.classes'
     import { Position, Align } from '$lib/enums'
-    import { isMobile } from '$lib/stores'
+    import { isSmallScreen } from '$lib/stores'
     import { MediaManager, type Media } from '../media-manager'
     import { HighlightCardVariant } from './highlight-card.enums'
     import {
@@ -96,12 +96,12 @@
     $: isHoverVariant = variant === HighlightCardVariant.Hover
 
     function handleMouseEnter(): void {
-        if (!$isMobile) {
+        if (!$isSmallScreen) {
             isHovered = true
         }
     }
     function handleMouseLeave(): void {
-        if (!$isMobile) {
+        if (!$isSmallScreen) {
             isHovered = false
         }
     }
@@ -113,7 +113,7 @@
     on:mouseenter={handleMouseEnter}
     on:mouseleave={handleMouseLeave}
     class="highlight-card flex flex-col {backgroundColor} {itemsAlignClass} {BORDER_RADIUS}"
-    class:variant--hover={isHoverVariant}
+    class:variant--hover={isHoverVariant && !$isSmallScreen}
     {...link ? { ...externalLinkProps, href: link, role: 'link', tabindex: 0 } : {}}
 >
     {#if backgroundMedia}
@@ -124,7 +124,7 @@
                 media={backgroundMedia}
                 pointerEventsNone
                 {isHovered}
-                playOnHover={isHoverVariant && !$isMobile}
+                playOnHover={isHoverVariant}
             />
         </div>
     {/if}

src/lib/components/molecules/media-manager/media-manager.svelte

@@ -3,7 +3,7 @@
     import { MediaType } from '..'
     import { IMAGE_DEFAULT_PROPS, VIDEO_DEFAULT_PROPS } from './media-manager.constants'
     import { Animation } from '$atoms'
-    import { isMobile } from '$lib/stores'
+    import { isSmallScreen } from '$lib/stores'
 
     export let media: Media
     export let pointerEventsNone: boolean = false
@@ -34,7 +34,7 @@
         }
     }
 
-    $: if ($isMobile && videoElement && videoMedia?.autoplay) {
+    $: if ($isSmallScreen && videoElement && videoMedia?.autoplay) {
         void videoElement.play()
     }
 </script>
@@ -53,7 +53,7 @@
     } = videoMedia}
     <video
         bind:this={videoElement}
-        autoplay={$isMobile || (!playOnHover && autoplay)}
+        autoplay={$isSmallScreen || (!playOnHover && autoplay)}
         {loop}
         muted
         {poster}

src/lib/constants/tailwind.constants.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { ScreenSize } from '../enums/screen-size.enum'
 import colors from 'tailwindcss/colors.js'
 
 export const CUSTOM_COLORS: Record<string, Record<number, string>> = {
@@ -62,11 +63,11 @@ export const FONT_FAMILY_CLASS: IFontFamily = {
     secondary: 'font-inter',
 }
 
-export const BREAKPOINTS: Record<string, number> = {
-    sm: 768,
-    md: 1024,
-    lg: 1400,
-    xl: 1920,
+export const BREAKPOINTS: Record<ScreenSize, number> = {
+    [ScreenSize.Sm]: 768,
+    [ScreenSize.Md]: 1024,
+    [ScreenSize.Lg]: 1400,
+    [ScreenSize.Xl]: 1920,
 }
 
 const {

src/lib/enums/index.ts

@@ -2,3 +2,4 @@ export * from './mode.enum'
 export * from './direction.enum'
 export * from './position.enum'
 export * from './align.enum'
+export * from './screen-size.enum'

src/lib/enums/screen-size.enum.ts

@@ -0,0 +1,6 @@
+export enum ScreenSize {
+    Sm = 'sm',
+    Md = 'md',
+    Lg = 'lg',
+    Xl = 'xl',
+}

src/lib/stores/index.ts

@@ -1 +1 @@
-export * from './isMobile.store'
+export * from './screen-breakpoint.store'

src/lib/stores/screen-breakpoint.store.ts

@@ -0,0 +1,43 @@
+import { BREAKPOINTS } from '$lib/constants'
+import { ScreenSize } from '$lib/enums'
+import { derived, writable, type Readable, type Writable } from 'svelte/store'
+
+// Create a writable store with an initial value based on the current screen width
+export const screenBreakpoint: Writable<ScreenSize> = writable(getCurrentScreenBreakpoint())
+export const isMobile: Readable<boolean> = derived(
+    screenBreakpoint,
+    ($screenBreakPoint) => $screenBreakPoint === ScreenSize.Sm
+)
+export const isSmallScreen: Readable<boolean> = derived(
+    screenBreakpoint,
+    ($screenBreakPoint) =>
+        $screenBreakPoint === ScreenSize.Md || $screenBreakPoint === ScreenSize.Sm
+)
+
+// Update the store value when the screen is resized
+if (typeof window !== 'undefined') {
+    window.addEventListener('resize', () => {
+        screenBreakpoint.set(getCurrentScreenBreakpoint())
+    })
+}
+
+function getCurrentScreenBreakpoint(): ScreenSize {
+    let breakpoint: ScreenSize = ScreenSize.Xl
+
+    // Check if window is defined (runs only in browser environment)
+    if (typeof window !== 'undefined') {
+        const width = window.innerWidth
+
+        const sortedBreakpoints = Object.keys(BREAKPOINTS).sort(
+            (a, b) => BREAKPOINTS[a as ScreenSize] - BREAKPOINTS[b as ScreenSize]
+        )
+
+        for (const key of sortedBreakpoints) {
+            if (width < BREAKPOINTS[key as ScreenSize]) {
+                breakpoint = key as ScreenSize
+                break
+            }
+        }
+    }
+    return breakpoint
+}