refactor: add ui provider component

webapp/src/components/global/UIProvider.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Theme } from "../../domain";
+import { Locale, LocaleContext } from "./locale";
+import { ThemeDataContext } from "./theme";
+
+export interface UIProviderProps {
+  locale: Locale;
+  children: React.ReactNode;
+  themeData: {
+    initialTheme: Theme;
+    callback: (theme: Theme) => void;
+  };
+}
+
+export function UIProvider({ locale, children, themeData }: UIProviderProps) {
+  const [theme, setTheme] = React.useState<Theme>(themeData.initialTheme);
+
+  const changeTheme = (newTheme: Theme) => {
+    themeData.callback(newTheme);
+    setTheme(newTheme);
+  }
+
+  return (
+    <LocaleContext.Provider value={locale}>
+      <ThemeDataContext.Provider value={{ theme, changeTheme }}>
+        {children}
+      </ThemeDataContext.Provider>
+    </LocaleContext.Provider>
+  );
+}

webapp/src/components/global/index.ts

@@ -1,2 +1,4 @@
+export * from './UIProvider';
 export * from './formatDate';
 export * from './locale';
+export * from './theme';