impl browser-utils to ui package

packages/ui/src/index.ts

@@ -1,4 +1,8 @@
+export * from './interfaces/breakpoints';
+
 export * from './components/Attachment/Attachment';
 export * from './components/PagePath/PageListMeta';
 export * from './components/PagePath/PagePathLabel';
 export * from './components/User/UserPicture';
+
+export * from './utils/browser-utils';

packages/ui/src/interfaces/breakpoints.ts

@@ -0,0 +1,9 @@
+export const Breakpoint = {
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+  XL: 'xl',
+  XXL: 'xxl',
+} as const;
+export type Breakpoint = typeof Breakpoint[keyof typeof Breakpoint];

packages/ui/src/utils/browser-utils.ts

@@ -0,0 +1,18 @@
+import { Breakpoint } from '~/interfaces/breakpoints';
+
+
+export const addBreakpointListener = (
+    breakpoint: Breakpoint,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any,
+): MediaQueryList => {
+  // get the value of '--breakpoint-*'
+  const breakpointPixel = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue(`--breakpoint-${breakpoint}`), 10);
+
+  const mediaQueryList = window.matchMedia(`(min-width: ${breakpointPixel}px)`);
+
+  // add event listener
+  mediaQueryList.addEventListener('change', listener);
+
+  return mediaQueryList;
+};