feat: Add react and mobx integration

2 files changed, 50 insertions, 0 deletions

diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx
new file mode 100644
index 0000000..51c39f7
--- /dev/null
+++ b/packages/renderer/src/components/StoreProvider.tsx
@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from 'react';
+
+import type { RootStore } from '../stores/RootStore';
+
+const StoreContext = createContext<RootStore | null>(null);
+
+export function useStore(): RootStore {
+  const store = useContext(StoreContext);
+  if (store === null) {
+    throw new Error('useStore can only be called inside of StoreProvider');
+  }
+  return store;
+}
+
+export function StoreProvider({ children, store }: {
+  children: JSX.Element | JSX.Element[],
+  store: RootStore,
+}): JSX.Element {
+  return (
+    <StoreContext.Provider value={store}>
+      {children}
+    </StoreContext.Provider>
+  );
+}
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..8be4f6a
--- /dev/null
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -0,0 +1,26 @@
+import { observer } from 'mobx-react-lite';
+import {
+  unstable_createMuiStrictModeTheme as createTheme,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
+import React from 'react';
+
+import { useStore } from './StoreProvider';
+
+export const ThemeProvider = observer(({ children }: {
+  children: JSX.Element | JSX.Element[],
+}): JSX.Element => {
+  const { shared: { shouldUseDarkColors } } = useStore();
+
+  const theme = createTheme({
+    palette: {
+      mode: shouldUseDarkColors ? 'dark' : 'light',
+    },
+  });
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      {children}
+    </MuiThemeProvider>
+  );
+});