🚀 release v3.0.0

client/wrappers/DateWrapper.tsx

@@ -0,0 +1,13 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { useEffect } from 'react';
+
+const DateWrapper: React.FC = ({ children }) => {
+  useEffect(() => {
+    dayjs.extend(relativeTime);
+  }, []);
+
+  return <>{children}</>;
+};
+
+export default DateWrapper;

client/wrappers/FontWrapper.tsx

@@ -0,0 +1,29 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useCallback, useEffect } from 'react';
+
+import { useAppSelector } from '@/store/hooks';
+
+const FontWrapper: React.FC = ({ children }) => {
+  const typography = useAppSelector((state) => get(state.resume, 'metadata.typography'));
+
+  const loadFonts = useCallback(async () => {
+    const WebFont = (await import('webfontloader')).default;
+    const families = Object.values<string[]>(typography.family).reduce(
+      (acc, family) => [...acc, `${family}:400,600,700`],
+      []
+    );
+
+    WebFont.load({ google: { families } });
+  }, [typography]);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && !isEmpty(typography)) {
+      loadFonts();
+    }
+  }, [typography, loadFonts]);
+
+  return <>{children}</>;
+};
+
+export default FontWrapper;

client/wrappers/HotkeysWrapper.tsx

@@ -0,0 +1,17 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { toggleSidebar } from '@/store/build/buildSlice';
+import { useAppDispatch } from '@/store/hooks';
+
+const HotkeysWrapper: React.FC = ({ children }) => {
+  const dispatch = useAppDispatch();
+
+  useHotkeys('ctrl+/, cmd+/', () => {
+    dispatch(toggleSidebar({ sidebar: 'left' }));
+    dispatch(toggleSidebar({ sidebar: 'right' }));
+  });
+
+  return <>{children}</>;
+};
+
+export default HotkeysWrapper;

client/wrappers/LocaleWrapper.tsx

@@ -0,0 +1,5 @@
+const LocaleWrapper: React.FC = ({ children }) => {
+  return <>{children}</>;
+};
+
+export default LocaleWrapper;

client/wrappers/ThemeWrapper.tsx

@@ -0,0 +1,34 @@
+import { ThemeProvider, useMediaQuery } from '@mui/material';
+import { useEffect, useMemo } from 'react';
+
+import { darkTheme, lightTheme } from '@/config/theme';
+import { setTheme, Theme } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+
+const ThemeWrapper: React.FC = ({ children }) => {
+  const dispatch = useAppDispatch();
+
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme: Theme | undefined = useAppSelector((state) => state.build.theme);
+  const isDarkMode = useMemo(() => theme === 'dark', [theme]);
+
+  const muiTheme = useMemo(() => (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);
+
+  useEffect(() => {
+    if (theme === undefined) {
+      dispatch(setTheme({ theme: prefersDarkMode ? 'dark' : 'light' }));
+    }
+  }, [theme, dispatch, prefersDarkMode]);
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDarkMode]);
+
+  return <ThemeProvider theme={muiTheme}>{children}</ThemeProvider>;
+};
+
+export default ThemeWrapper;

client/wrappers/index.tsx

@@ -0,0 +1,23 @@
+import DateWrapper from './DateWrapper';
+import FontWrapper from './FontWrapper';
+import HotkeysWrapper from './HotkeysWrapper';
+import LocaleWrapper from './LocaleWrapper';
+import ThemeWrapper from './ThemeWrapper';
+
+const WrapperRegistry: React.FC = ({ children }) => {
+  return (
+    <ThemeWrapper>
+      <FontWrapper>
+        <HotkeysWrapper>
+          <DateWrapper>
+            <LocaleWrapper>
+              <>{children}</>
+            </LocaleWrapper>
+          </DateWrapper>
+        </HotkeysWrapper>
+      </FontWrapper>
+    </ThemeWrapper>
+  );
+};
+
+export default WrapperRegistry;