feat/breakpoints for mobile and tablet view

Author: Camille Moussu

packages/twake-mui/src/hooks/useBreakpoint/breakpoints.ts

@@ -0,0 +1,6 @@
+export const BREAKPOINTS = {
+  mobile: 769,
+  tablet: 1023
+} as const
+
+export type Breakpoint = keyof typeof BREAKPOINTS | 'desktop'

packages/twake-mui/src/hooks/useBreakpoint/index.ts

@@ -0,0 +1,47 @@
+import { useSyncExternalStore } from 'react'
+
+import { BREAKPOINTS, type Breakpoint } from './breakpoints'
+
+let queries: {
+  mobile: MediaQueryList
+  tablet: MediaQueryList
+} | null = null
+
+function getQueries(): { mobile: MediaQueryList; tablet: MediaQueryList } | null {
+  if (typeof window === 'undefined') return null
+  if (!queries) {
+    queries = {
+      mobile: window.matchMedia(`(max-width: ${BREAKPOINTS.mobile}px)`),
+      tablet: window.matchMedia(`(max-width: ${BREAKPOINTS.tablet}px)`)
+    }
+  }
+  return queries
+}
+
+function getSnapshot(): Breakpoint {
+  const queries = getQueries()
+  if (!queries) return 'desktop'
+
+  if (queries.mobile.matches) return 'mobile'
+  if (queries.tablet.matches) return 'tablet'
+  return 'desktop'
+}
+
+function subscribe(callback: () => void) {
+  const queries = getQueries()
+  if (!queries) return (): void => {}
+
+  const handler = (): void => callback()
+
+  queries.mobile.addEventListener('change', handler)
+  queries.tablet.addEventListener('change', handler)
+
+  return (): void => {
+    queries.mobile.removeEventListener('change', handler)
+    queries.tablet.removeEventListener('change', handler)
+  }
+}
+
+export function useBreakpoint(): Breakpoint {
+  return useSyncExternalStore(subscribe, getSnapshot, () => 'desktop')
+}

packages/twake-mui/src/index.ts

@@ -16,3 +16,6 @@ export { radius } from './lib/radius'
 export { Avatar, default as AvatarDefault } from './components/Avatar'
 export type { AvatarProps } from './components/Avatar'
 export { nameToColor, supportedColors } from './components/Avatar/helpers'
+export { useBreakpoint } from './hooks/useBreakpoint'
+export type { Breakpoint } from './hooks/useBreakpoint/breakpoints'
+export { BREAKPOINTS } from './hooks/useBreakpoint/breakpoints'

packages/twake-mui/src/lib/makeDarkOverrides.ts

@@ -3,7 +3,7 @@ import { Theme, Components, alpha } from '@mui/material/styles'
 import { accordionOverrides } from './overrides/accordionOverrides'
 import { autocompleteOverrides } from './overrides/autocompleteOverrides'
 import { avatarOverrides } from './overrides/avatarOverrides'
-import { backdropOverrides } from './overrides/backdropOverrides'
+import { drawerOverrides } from './overrides/drawerOverrides'
 import { buttonOverrides } from './overrides/buttonOverrides'
 import { checkboxOverrides } from './overrides/checkboxOverrides'
 import { datePickerOverrides } from './overrides/datePickerOverrides'
@@ -47,7 +47,7 @@ export const makeDarkOverrides = (theme: Theme): Components => {
     MuiToggleButton: toggleButtonOverrides(theme),
     MuiIconButton: iconButtonOverrides(),
     MuiCheckbox: checkboxOverrides(),
-    MuiBackdrop: backdropOverrides(),
+    MuiDrawer: drawerOverrides(),
     MuiTypography: {
       styleOverrides: {
         root: {

packages/twake-mui/src/lib/makeLightOverrides.ts

@@ -3,7 +3,7 @@ import { Theme, Components, alpha } from '@mui/material/styles'
 import { accordionOverrides } from './overrides/accordionOverrides'
 import { autocompleteOverrides } from './overrides/autocompleteOverrides'
 import { avatarOverrides } from './overrides/avatarOverrides'
-import { backdropOverrides } from './overrides/backdropOverrides'
+import { drawerOverrides } from './overrides/drawerOverrides'
 import { buttonOverrides } from './overrides/buttonOverrides'
 import { checkboxOverrides } from './overrides/checkboxOverrides'
 import { datePickerOverrides } from './overrides/datePickerOverrides'
@@ -47,7 +47,7 @@ export const makeLightOverrides = (theme: Theme): Components => {
     MuiToggleButton: toggleButtonOverrides(theme),
     MuiIconButton: iconButtonOverrides(),
     MuiCheckbox: checkboxOverrides(),
-    MuiBackdrop: backdropOverrides(),
+    MuiDrawer: drawerOverrides(),
     MuiTypography: {
       styleOverrides: {
         root: {

packages/twake-mui/src/lib/overrides/backdropOverrides.ts

@@ -11,7 +11,14 @@ export const dialogOverrides = (): Components['MuiDialog'] => {
           '0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)',
         maxWidth: '570px'
       }
-    }
+    },
+    defaultProps: {
+        BackdropProps: {
+          sx: {
+            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+          }
+        }
+      }
   }
 }
 

packages/twake-mui/src/lib/overrides/dialogOverrides.ts

@@ -0,0 +1,18 @@
+import { Components } from '@mui/material'
+
+export const drawerOverrides = (): Components['MuiDrawer'] => {
+  return {
+    styleOverrides: {
+        root: {},
+      },
+      defaultProps: {
+        ModalProps: {
+          BackdropProps: {
+            sx: {
+              backgroundColor: 'rgba(0, 0, 0, 0.1)',
+            },
+          },
+        },
+      },
+  }
+}