refactor(v4.0.0-alpha): beginning of a new era

apps/client/src/providers/dialog.tsx

@@ -0,0 +1,55 @@
+import { AwardsDialog } from "../pages/builder/sidebars/left/dialogs/awards";
+import { CertificationsDialog } from "../pages/builder/sidebars/left/dialogs/certifications";
+import { CustomSectionDialog } from "../pages/builder/sidebars/left/dialogs/custom-section";
+import { EducationDialog } from "../pages/builder/sidebars/left/dialogs/education";
+import { ExperienceDialog } from "../pages/builder/sidebars/left/dialogs/experience";
+import { InterestsDialog } from "../pages/builder/sidebars/left/dialogs/interests";
+import { LanguagesDialog } from "../pages/builder/sidebars/left/dialogs/languages";
+import { ProfilesDialog } from "../pages/builder/sidebars/left/dialogs/profiles";
+import { ProjectsDialog } from "../pages/builder/sidebars/left/dialogs/projects";
+import { PublicationsDialog } from "../pages/builder/sidebars/left/dialogs/publications";
+import { ReferencesDialog } from "../pages/builder/sidebars/left/dialogs/references";
+import { SkillsDialog } from "../pages/builder/sidebars/left/dialogs/skills";
+import { VolunteerDialog } from "../pages/builder/sidebars/left/dialogs/volunteer";
+import { ImportDialog } from "../pages/dashboard/resumes/_dialogs/import";
+import { ResumeDialog } from "../pages/dashboard/resumes/_dialogs/resume";
+import { TwoFactorDialog } from "../pages/dashboard/settings/_dialogs/two-factor";
+import { useResumeStore } from "../stores/resume";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const DialogProvider = ({ children }: Props) => {
+  const isResumeLoaded = useResumeStore((state) => Object.keys(state.resume).length > 0);
+
+  return (
+    <>
+      {children}
+
+      <div id="dialog-root">
+        <ResumeDialog />
+        <ImportDialog />
+        <TwoFactorDialog />
+
+        {isResumeLoaded && (
+          <>
+            <ProfilesDialog />
+            <ExperienceDialog />
+            <EducationDialog />
+            <AwardsDialog />
+            <CertificationsDialog />
+            <InterestsDialog />
+            <LanguagesDialog />
+            <ProjectsDialog />
+            <PublicationsDialog />
+            <VolunteerDialog />
+            <SkillsDialog />
+            <ReferencesDialog />
+            <CustomSectionDialog />
+          </>
+        )}
+      </div>
+    </>
+  );
+};

apps/client/src/providers/index.tsx

@@ -0,0 +1,27 @@
+import "@/client/libs/dayjs";
+
+import { TooltipProvider } from "@reactive-resume/ui";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { HelmetProvider } from "react-helmet-async";
+import { Outlet } from "react-router-dom";
+
+import { queryClient } from "../libs/query-client";
+import { DialogProvider } from "./dialog";
+import { ThemeProvider } from "./theme";
+import { Toaster } from "./toaster";
+
+export const Providers = () => (
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider>
+      <TooltipProvider>
+        <DialogProvider>
+          <HelmetProvider>
+            <Outlet />
+
+            <Toaster />
+          </HelmetProvider>
+        </DialogProvider>
+      </TooltipProvider>
+    </ThemeProvider>
+  </QueryClientProvider>
+);

apps/client/src/providers/theme.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from "@reactive-resume/hooks";
+import { useEffect } from "react";
+
+type Props = { children: React.ReactNode };
+
+export const ThemeProvider = ({ children }: Props) => {
+  const { isDarkMode } = useTheme();
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [isDarkMode]);
+
+  return children;
+};

apps/client/src/providers/toaster.tsx

@@ -0,0 +1,37 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@reactive-resume/ui";
+
+import { useToast } from "../hooks/use-toast";
+
+export const Toaster = () => {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(({ id, icon, title, description, action, ...props }) => {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              <div className="flex items-center gap-x-2">
+                {icon}
+                {title && <ToastTitle>{title}</ToastTitle>}
+              </div>
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+
+      <ToastViewport />
+    </ToastProvider>
+  );
+};