@notificationapi/react 0.0.36 → 1.0.0

package/dist/components/Preferences/channelUtils.js

@@ -1,8 +1,7 @@
 import "react/jsx-runtime";
-import "../../assets/presets.js";
 import "../Notifications/interface.js";
-import { a as r, g as m } from "../../assets/channelUtils.js";
+import { a as t, g as r } from "../../assets/channelUtils.js";
 export {
-  r as getChannelIcon,
-  m as getChannelLabel
+  t as getChannelIcon,
+  r as getChannelLabel
 };

package/dist/components/Preferences/index.js

@@ -1,4 +1,4 @@
-import { NotificationPreferencesPopup as r } from "./NotificationPreferencesPopup.js";
+import { N as r } from "../../assets/NotificationPreferencesPopup.js";
 import { NotificationPreferencesInline as f } from "./NotificationPreferencesInline.js";
 export {
   f as NotificationPreferencesInline,

package/dist/components/Provider/context.d.ts

@@ -0,0 +1,27 @@
+import { NotificationAPIClientSDK } from '@notificationapi/core';
+import { BaseDeliveryOptions, Channels, DeliveryOptionsForEmail, DeliveryOptionsForInappWeb, GetPreferencesResponse, InAppNotification, UserAccountMetadata } from '@notificationapi/core/dist/interfaces';
+
+export type Context = {
+    notifications?: InAppNotification[];
+    preferences?: GetPreferencesResponse;
+    userAccountMetaData?: {
+        userAccountMetadata: UserAccountMetadata;
+    };
+    webPushOptInMessage?: 'AUTOMATIC' | boolean;
+    loadNotifications: (initial?: boolean) => void;
+    markAsOpened: () => void;
+    markAsArchived: (ids: string[] | 'ALL') => void;
+    markAsUnarchived: (ids: string[] | 'ALL') => void;
+    markAsClicked: (ids: string[]) => void;
+    updateDelivery: (notificationId: string, channel: Channels, delivery: DeliveryOptionsForEmail | DeliveryOptionsForInappWeb | BaseDeliveryOptions, subNotificationId?: string) => void;
+    updateDeliveries: (params: {
+        notificationId: string;
+        channel: Channels;
+        delivery: DeliveryOptionsForEmail | DeliveryOptionsForInappWeb | BaseDeliveryOptions;
+        subNotificationId?: string;
+    }[]) => void;
+    getClient: () => typeof NotificationAPIClientSDK;
+    setWebPushOptInMessage: React.Dispatch<React.SetStateAction<'AUTOMATIC' | boolean>>;
+    setWebPushOptIn: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const NotificationAPIContext: import('react').Context<Context | undefined>;

package/dist/components/Provider/context.js

@@ -0,0 +1,7 @@
+import { createContext as t } from "react";
+const e = t(
+  void 0
+);
+export {
+  e as NotificationAPIContext
+};

package/dist/components/Provider/index.d.ts

@@ -1,31 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { NotificationAPIClientSDK } from '@notificationapi/core';
-import { GetPreferencesResponse, InAppNotification, User, UserAccountMetadata, BaseDeliveryOptions, Channels, DeliveryOptionsForEmail, DeliveryOptionsForInappWeb } from '@notificationapi/core/dist/interfaces';
+import { User } from '@notificationapi/core/dist/interfaces';
+import { Context } from './context';
 
-export type Context = {
-    notifications?: InAppNotification[];
-    preferences?: GetPreferencesResponse;
-    userAccountMetaData?: {
-        userAccountMetadata: UserAccountMetadata;
-    };
-    webPushOptInMessage?: 'AUTOMATIC' | boolean;
-    loadNotifications: (initial?: boolean) => void;
-    markAsOpened: () => void;
-    markAsArchived: (ids: string[] | 'ALL') => void;
-    markAsUnarchived: (ids: string[] | 'ALL') => void;
-    markAsClicked: (ids: string[]) => void;
-    updateDelivery: (notificationId: string, channel: Channels, delivery: DeliveryOptionsForEmail | DeliveryOptionsForInappWeb | BaseDeliveryOptions, subNotificationId?: string) => void;
-    updateDeliveries: (params: {
-        notificationId: string;
-        channel: Channels;
-        delivery: DeliveryOptionsForEmail | DeliveryOptionsForInappWeb | BaseDeliveryOptions;
-        subNotificationId?: string;
-    }[]) => void;
-    getClient: () => typeof NotificationAPIClientSDK;
-    setWebPushOptInMessage: React.Dispatch<React.SetStateAction<'AUTOMATIC' | boolean>>;
-    setWebPushOptIn: React.Dispatch<React.SetStateAction<boolean>>;
-};
-export declare const NotificationAPIContext: import('react').Context<Context | undefined>;
 type Props = ({
     userId: string;
 } | {

package/dist/components/Provider/index.js

@@ -1,8 +1,9 @@
-import { jsx as z } from "react/jsx-runtime";
-import { createContext as Q, useState as I, useCallback as m, useMemo as X, useRef as T, useEffect as S, useContext as Y } from "react";
-const Z = async (e, r, o, a, f, b, h) => {
-  const l = ee(a, f, b), g = await fetch(
-    `https://${r}/${a}/users/${encodeURIComponent(
+import { jsx as Q } from "react/jsx-runtime";
+import { useState as I, useCallback as m, useMemo as X, useRef as T, useEffect as P, useContext as Y } from "react";
+import { NotificationAPIContext as H } from "./context.js";
+const Z = async (e, c, o, a, f, N, h) => {
+  const l = ee(a, f, N), g = await fetch(
+    `https://${c}/${a}/users/${encodeURIComponent(
       f
     )}/${o}`,
     {
@@ -18,7 +19,7 @@ const Z = async (e, r, o, a, f, b, h) => {
   } catch {
     return;
   }
-}, ee = (e, r, o) => btoa(o ? e + ":" + r + ":" + o : e + ":" + r), H = {
+}, ee = (e, c, o) => btoa(o ? e + ":" + c + ":" + o : e + ":" + c), q = {
   host: "api.notificationapi.com",
   websocketHost: "ws.notificationapi.com",
   userId: "",
@@ -32,18 +33,18 @@ const Z = async (e, r, o, a, f, b, h) => {
   keepWebSocketAliveForSeconds: 86400
   // 24 hours
 }, i = {
-  config: H,
+  config: q,
   init: function(e) {
-    return this.config = { ...H, ...e }, {
+    return this.config = { ...q, ...e }, {
       ...this
     };
   },
   rest: {
-    generic: function(e, r, o) {
+    generic: function(e, c, o) {
       return Z(
         e,
         i.config.host,
-        r,
+        c,
         i.config.clientId,
         i.config.userId,
         i.config.hashedUserId,
@@ -53,10 +54,10 @@ const Z = async (e, r, o, a, f, b, h) => {
     // The functions below are nice wrappers over the generic
     // rest  api function above. They must follow REST API naming:
     // Method + Resource, representing the end-point.
-    getNotifications: function(e, r) {
+    getNotifications: function(e, c) {
       return i.rest.generic(
         "GET",
-        `notifications/INAPP_WEB?count=${r}&before=${e}`
+        `notifications/INAPP_WEB?count=${c}&before=${e}`
       );
     },
     patchNotifications: function(e) {
@@ -87,8 +88,8 @@ const Z = async (e, r, o, a, f, b, h) => {
     object: void 0,
     connect: function() {
       let e = `wss://${i.config.websocketHost}?userId=${encodeURIComponent(i.config.userId)}&envId=${i.config.clientId}`;
-      return i.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(i.config.hashedUserId)}`), i.websocket.object = new WebSocket(e), i.websocket.object.onmessage = (r) => {
-        const o = JSON.parse(r.data);
+      return i.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(i.config.hashedUserId)}`), i.websocket.object = new WebSocket(e), i.websocket.object.onmessage = (c) => {
+        const o = JSON.parse(c.data);
         if (!(!o || !o.route) && o.route === "inapp_web/new_notifications") {
           const a = o;
           i.config.onNewInAppNotifications && i.config.onNewInAppNotifications(
@@ -98,8 +99,8 @@ const Z = async (e, r, o, a, f, b, h) => {
       }, i.websocket.object;
     },
     disconnect: function(e) {
-      var r;
-      i.websocket.object && ((r = i.websocket.object) == null || r.close(), e && e(i.websocket.object));
+      var c;
+      i.websocket.object && ((c = i.websocket.object) == null || c.close(), e && e(i.websocket.object));
     }
   },
   openWebSocket: function() {
@@ -118,31 +119,31 @@ const Z = async (e, r, o, a, f, b, h) => {
   // They may or may not do additional tasks.
   // e.g. identify simply maps to postUsers
   getInAppNotifications: async (e) => {
-    const r = e.maxCountNeeded || i.config.getInAppDefaultCount, o = e.oldestNeeded || i.config.getInAppDefaultOldest;
-    let a = [], f = e.before, b = !0, h = !0;
+    const c = e.maxCountNeeded || i.config.getInAppDefaultCount, o = e.oldestNeeded || i.config.getInAppDefaultOldest;
+    let a = [], f = e.before, N = !0, h = !0;
     for (; h; ) {
       const l = (await i.rest.getNotifications(
         f,
-        r
+        c
       )).notifications.filter(
         (g) => !a.find((w) => w.id === g.id)
       );
       f = l.reduce(
         (g, w) => g < w.date ? g : w.date,
         e.before
-      ), a = [...a, ...l], b = l.length > 0, h = !0, (!b || a.length >= r || f < o) && (h = !1);
+      ), a = [...a, ...l], N = l.length > 0, h = !0, (!N || a.length >= c || f < o) && (h = !1);
     }
     return {
       items: a,
-      hasMore: b,
+      hasMore: N,
       oldestReceived: f
     };
   },
   updateInAppNotifications: async (e) => {
-    const r = {
+    const c = {
       trackingIds: e.ids
     };
-    return e.archived === !0 ? r.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (r.archived = null), e.clicked === !0 ? r.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (r.clicked = null), e.opened === !0 ? r.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (r.opened = null), i.rest.patchNotifications(r);
+    return e.archived === !0 ? c.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (c.archived = null), e.clicked === !0 ? c.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (c.clicked = null), e.opened === !0 ? c.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (c.opened = null), i.rest.patchNotifications(c);
   },
   getPreferences: async () => i.rest.getPreferences(),
   updateDeliveryOption: async (e) => i.rest.postPreferences([e]),
@@ -154,9 +155,7 @@ const Z = async (e, r, o, a, f, b, h) => {
     return i.rest.postUser(e);
   },
   getUserAccountMetadata: async () => i.rest.getUserAccountMetadata()
-}, F = Q(
-  void 0
-), te = (e) => {
+}, F = typeof window < "u", te = (e) => {
   const o = {
     ...{
       apiURL: "https://api.notificationapi.com",
@@ -170,7 +169,7 @@ const Z = async (e, r, o, a, f, b, h) => {
     },
     ...e,
     user: "userId" in e ? { id: e.userId } : e.user
-  }, [a, f] = I(), [b, h] = I(), [l, g] = I(), [w, P] = I(!1), [k, C] = I((/* @__PURE__ */ new Date()).toISOString()), [A, U] = I(!0), [v, N] = I(o.webPushOptInMessage), [x, J] = I(!1), W = m(() => {
+  }, [a, f] = I(), [N, h] = I(), [l, g] = I(), [w, S] = I(!1), [k, C] = I((/* @__PURE__ */ new Date()).toISOString()), [A, U] = I(!0), [v, b] = I(o.webPushOptInMessage), [W, J] = I(!1), x = m(() => {
     o.playSoundOnNewNotification && new Audio(o.newNotificationSoundPath).play().catch((s) => {
       console.log("Failed to play new notification sound:", s);
     });
@@ -179,17 +178,17 @@ const Z = async (e, r, o, a, f, b, h) => {
     f((n) => (t = Array.isArray(t) ? t : [], t = t.filter((d) => {
       const p = d.expDate && new Date(d.expDate * 1e3).toISOString() < s, D = new Date(d.date).getTime() > new Date(s).getTime() + 1e3;
       return !p && !D;
-    }), Array.isArray(n) ? [
+    }), n = Array.isArray(n) ? n : [], [
       ...t.filter((d) => !n.find((D) => D.id === d.id)),
       ...n
-    ] : t));
+    ]));
   }, []), u = X(() => {
     const t = e.client ? e.client : i.init({
       clientId: o.clientId,
       userId: o.user.id,
       hashedUserId: o.hashedUserId,
       onNewInAppNotifications: (s) => {
-        W(), y(s);
+        x(), y(s);
       }
     });
     return t.identify({
@@ -203,44 +202,44 @@ const Z = async (e, r, o, a, f, b, h) => {
     o.user.number,
     o.hashedUserId,
     y,
-    W,
+    x,
     e.client
-  ]), L = m(
+  ]), E = m(
     async (t, s) => {
       const n = await u.rest.getNotifications(t, s);
       C(n.oldestReceived), U(n.couldLoadMore), y(n.notifications);
     },
     [y, u.rest]
-  ), E = T(A), R = T(w), $ = T(k);
-  S(() => {
-    E.current = A, R.current = w, $.current = k;
+  ), L = T(A), R = T(w), $ = T(k);
+  P(() => {
+    L.current = A, R.current = w, $.current = k;
   }, [A, w, k]);
   const O = m(
     async (t) => {
-      if (!(!t && (!E.current || R.current))) {
-        P(!0);
+      if (!(!t && (!L.current || R.current))) {
+        S(!0);
         try {
-          await L(
+          await E(
             t ? (/* @__PURE__ */ new Date()).toISOString() : $.current,
             t ? o.initialLoadMaxCount : 1e3
           );
         } finally {
-          P(!1);
+          S(!1);
         }
       }
     },
-    [o.initialLoadMaxCount, L]
-  ), q = async (t) => {
+    [o.initialLoadMaxCount, E]
+  ), B = async (t) => {
     if (!a) return;
-    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((c) => t.includes(c.id) && !c.clicked).map((c) => c.id);
-    u.updateInAppNotifications({ ids: n, clicked: !0 }), f((c) => {
-      if (!c) return [];
-      const d = [...c];
+    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((r) => t.includes(r.id) && !r.clicked).map((r) => r.id);
+    u.updateInAppNotifications({ ids: n, clicked: !0 }), f((r) => {
+      if (!r) return [];
+      const d = [...r];
       return d.filter((p) => n.includes(p.id)).forEach((p) => {
         p.clicked = s;
       }), d;
     });
-  }, B = async () => {
+  }, G = async () => {
     if (!a) return;
     const t = (/* @__PURE__ */ new Date()).toISOString(), s = a.filter((n) => !n.opened || !n.seen).map((n) => n.id);
     s.length !== 0 && (u.updateInAppNotifications({
@@ -248,12 +247,12 @@ const Z = async (e, r, o, a, f, b, h) => {
       opened: !0
     }), f((n) => {
       if (!n) return [];
-      const c = [...n];
-      return c.filter((d) => s.includes(d.id)).forEach((d) => {
+      const r = [...n];
+      return r.filter((d) => s.includes(d.id)).forEach((d) => {
         d.opened = t, d.seen = !0;
-      }), c;
+      }), r;
     }));
-  }, G = async (t) => {
+  }, K = async (t) => {
     if (!a) return;
     const s = a.filter((n) => n.archived && (t === "ALL" || t.includes(n.id))).map((n) => n.id);
     s.length !== 0 && (u.updateInAppNotifications({
@@ -261,27 +260,27 @@ const Z = async (e, r, o, a, f, b, h) => {
       archived: !1
     }), f((n) => {
       if (!n) return [];
-      const c = [...n];
-      return c.filter((d) => s.includes(d.id)).forEach((d) => {
+      const r = [...n];
+      return r.filter((d) => s.includes(d.id)).forEach((d) => {
         d.archived = void 0;
-      }), c;
+      }), r;
     }));
-  }, K = async (t) => {
+  }, V = async (t) => {
     if (!a) return;
-    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((c) => !c.archived && (t === "ALL" || t.includes(c.id))).map((c) => c.id);
-    n.length !== 0 && (u.updateInAppNotifications({ ids: n, archived: !0 }), f((c) => {
-      if (!c) return [];
-      const d = [...c];
+    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((r) => !r.archived && (t === "ALL" || t.includes(r.id))).map((r) => r.id);
+    n.length !== 0 && (u.updateInAppNotifications({ ids: n, archived: !0 }), f((r) => {
+      if (!r) return [];
+      const d = [...r];
       return d.filter((p) => n.includes(p.id)).forEach((p) => {
         p.archived = s;
       }), d;
     }));
-  }, V = (t, s, n, c) => j([
+  }, _ = (t, s, n, r) => j([
     {
       notificationId: t,
       channel: s,
       delivery: n,
-      subNotificationId: c
+      subNotificationId: r
     }
   ]), j = (t) => {
     u.rest.postPreferences(t).then(() => {
@@ -291,12 +290,12 @@ const Z = async (e, r, o, a, f, b, h) => {
     });
   }, M = m(() => {
     "serviceWorker" in navigator && navigator.serviceWorker.register(o.customServiceWorkerPath).then(async (t) => {
-      N(!1), Notification.requestPermission().then(async (s) => {
+      b(!1), ie().then(async (s) => {
         s === "granted" ? await t.pushManager.subscribe({
           userVisibleOnly: !0,
           applicationServerKey: l == null ? void 0 : l.userAccountMetadata.environmentVapidPublicKey
         }).then(async (n) => {
-          const c = {
+          const r = {
             webPushTokens: [
               {
                 sub: {
@@ -306,7 +305,7 @@ const Z = async (e, r, o, a, f, b, h) => {
               }
             ]
           };
-          await u.identify(c), console.log("index"), localStorage.setItem("hideWebPushOptInMessage", "true");
+          await u.identify(r), console.log("index"), localStorage.setItem("hideWebPushOptInMessage", "true");
         }) : s === "denied" && console.log("Permission for notifications was denied");
       });
     }).catch((t) => {
@@ -327,44 +326,53 @@ const Z = async (e, r, o, a, f, b, h) => {
     o.customServiceWorkerPath,
     l == null ? void 0 : l.userAccountMetadata.environmentVapidPublicKey
   ]);
-  S(() => {
-    f([]), P(!1), h(void 0), C((/* @__PURE__ */ new Date()).toISOString()), U(!0), O(!0), u.openWebSocket(), u.getPreferences().then((t) => {
+  P(() => {
+    f([]), S(!1), h(void 0), C((/* @__PURE__ */ new Date()).toISOString()), U(!0), O(!0), u.openWebSocket(), u.getPreferences().then((t) => {
       h(t);
     });
-  }, [u, O, M]), S(() => {
-    Notification.permission !== "default" && N(!1), v === "AUTOMATIC" && (N(
+  }, [u, O, M]), P(() => {
+    F && "Notification" in window && typeof Notification.requestPermission == "function" && Notification.permission !== "default" && b(!1), v === "AUTOMATIC" && (b(
       localStorage.getItem("hideWebPushOptInMessage") !== "true"
     ), u.getUserAccountMetadata().then((t) => {
-      g(t), N(t.userAccountMetadata.hasWebPushEnabled);
+      g(t), b(t.userAccountMetadata.hasWebPushEnabled);
     }));
-  }, [u, v]), S(() => {
-    x && M();
-  }, [x, M]);
-  const _ = {
+  }, [u, v]), P(() => {
+    W && M();
+  }, [W, M]);
+  const z = {
     notifications: a,
-    preferences: b,
+    preferences: N,
     userAccountMetaData: l,
     webPushOptInMessage: v,
     loadNotifications: O,
-    markAsOpened: B,
-    markAsArchived: K,
-    markAsUnarchived: G,
-    markAsClicked: q,
-    updateDelivery: V,
+    markAsOpened: G,
+    markAsArchived: V,
+    markAsUnarchived: K,
+    markAsClicked: B,
+    updateDelivery: _,
     updateDeliveries: j,
     getClient: () => u,
-    setWebPushOptInMessage: N,
+    setWebPushOptInMessage: b,
     setWebPushOptIn: J
   };
-  return /* @__PURE__ */ z(F.Provider, { value: _, children: e.children });
+  return /* @__PURE__ */ Q(H.Provider, { value: z, children: e.children });
 }, ne = () => {
-  const e = Y(F);
+  const e = Y(H);
   if (!e)
     throw new Error("useMyContext must be used within a MyProvider");
   return e;
 };
 te.useNotificationAPIContext = ne;
+const ie = async () => {
+  if (F && "Notification" in window && typeof Notification.requestPermission == "function")
+    try {
+      return await Notification.requestPermission();
+    } catch (e) {
+      return console.error("Error requesting notification permission:", e), "default";
+    }
+  else
+    return console.warn("Web Push Notifications are not supported in this browser."), "default";
+};
 export {
-  F as NotificationAPIContext,
   te as NotificationAPIProvider
 };

package/dist/components/WebPush/WebPushOptInMessage.js

@@ -1,8 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import "../Provider/index.js";
-import { W as a } from "../../assets/WebPushOptInMessage.js";
-import "../../assets/button.js";
+import "../Provider/context.js";
+import { W as i } from "../../assets/WebPushOptInMessage.js";
 export {
-  a as default
+  i as default
 };

package/dist/main.d.ts

@@ -1,3 +1,4 @@
+
 export { NotificationFeed, NotificationPopup, NotificationLauncher, NotificationCounter } from './components/Notifications';
 export { NotificationPreferencesInline, NotificationPreferencesPopup } from './components/Preferences';
 export { NotificationAPIProvider } from './components/Provider';

package/dist/main.js

@@ -2,15 +2,15 @@ import { NotificationFeed as r } from "./components/Notifications/NotificationFe
 import { NotificationPopup as e } from "./components/Notifications/NotificationPopup.js";
 import { NotificationLauncher as n } from "./components/Notifications/NotificationLauncher.js";
 import { NotificationCounter as c } from "./components/Notifications/NotificationCounter.js";
-import { NotificationPreferencesPopup as m } from "./components/Preferences/NotificationPreferencesPopup.js";
-import { NotificationPreferencesInline as N } from "./components/Preferences/NotificationPreferencesInline.js";
+import { N } from "./assets/NotificationPreferencesPopup.js";
+import { NotificationPreferencesInline as x } from "./components/Preferences/NotificationPreferencesInline.js";
 import { NotificationAPIProvider as u } from "./components/Provider/index.js";
-export {
+import './assets/main.css';export {
   u as NotificationAPIProvider,
   c as NotificationCounter,
   r as NotificationFeed,
   n as NotificationLauncher,
   e as NotificationPopup,
-  N as NotificationPreferencesInline,
-  m as NotificationPreferencesPopup
+  x as NotificationPreferencesInline,
+  N as NotificationPreferencesPopup
 };

package/package.json

@@ -1,8 +1,19 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "0.0.36",
+  "version": "1.0.0",
   "type": "module",
+  "browserslist": [
+    "last 2 versions",
+    "last 2 ChromeAndroid versions",
+    "last 2 FirefoxAndroid versions",
+    "last 2 Safari versions",
+    "last 2 iOS versions",
+    "not IE >= 1",
+    "not bb >=1",
+    "not IE_Mob >=1",
+    "not op_mini all"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc --p ./tsconfig.build.json && vite build",
@@ -13,20 +24,22 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.3.6",
+    "@faker-js/faker": "^9.2.0",
     "@types/node": "^20.12.7",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
+    "eslint-plugin-compat": "^6.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "faker-js": "^1.0.0",
     "glob": "^10.4.1",
     "prettier": "^3.3.3",
     "typescript": "^5.2.2",
@@ -43,12 +56,15 @@
     "**/*.css"
   ],
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/roboto": "^5.1.1",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
     "@notificationapi/core": "^0.0.12",
-    "antd": "^5.17.4",
     "javascript-time-ago": "^2.5.10",
     "liquidjs": "^10.14.0",
     "rc-virtual-list": "^3.11.5",
-    "react-time-ago": "^7.3.3",
-    "styled-components": "^6.1.9"
+    "react-time-ago": "^7.3.3"
   }
 }