typescript tweaks

vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx

@@ -1,6 +1,7 @@
-import type { ThemeMode, VuuUser } from "@finos/vuu-utils";
+import type { VuuUser } from "@finos/vuu-utils";
 import { createContext } from "react";
 import { SettingsSchema } from "../application-settings/SettingsForm";
+import { VuuRowDataItemType } from "packages/vuu-protocol-types";
 
 // export interface CoreSettings {
 //   themeMode: ThemeMode;
@@ -12,9 +13,12 @@ const Guest: VuuUser = {
 };
 
 export interface ApplicationContextProps {
-  onApplicationSettingChanged: (propertyName: string, value: unknown) => void;
-  applicationSettings: Record<string, string | number | boolean>;
-  applicationSettingsSchema: SettingsSchema;
+  onApplicationSettingChanged: (
+    propertyName: string,
+    value: VuuRowDataItemType
+  ) => void;
+  applicationSettings?: Record<string, string | number | boolean>;
+  applicationSettingsSchema?: SettingsSchema;
   user: VuuUser;
 }
 

vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx

@@ -10,25 +10,36 @@ import {
   ApplicationContextProps,
 } from "./ApplicationContext";
 import { SaltProvider } from "@salt-ds/core";
+import { VuuRowDataItemType } from "packages/vuu-protocol-types";
 
 export interface ApplicationProviderProps
   extends Partial<ApplicationContextProps> {
   children: ReactNode;
 }
 
+const getThemeMode = (
+  applicationSettings?: Record<string, string | number | boolean>
+) => {
+  const themeMode = applicationSettings?.themeMode;
+  if (themeMode === "light" || themeMode === "dark") {
+    return themeMode;
+  }
+  return "light";
+};
+
 export const ApplicationProvider = ({
   children,
   applicationSettings: settingsProp,
   applicationSettingsSchema,
   user,
 }: ApplicationProviderProps): ReactElement => {
   const context = useContext(ApplicationContext);
-  const [applicationSettings, setSettings] = useState(
-    settingsProp ?? context.applicationSettings
-  );
+  const [applicationSettings, setSettings] = useState<
+    Record<string, string | number | boolean>
+  >(settingsProp ?? {});
 
   const onApplicationSettingChanged = useCallback(
-    (propertyName: string, value: unknown) => {
+    (propertyName: string, value: VuuRowDataItemType) => {
       setSettings((s) => ({ ...s, [propertyName]: value }));
     },
     []
@@ -47,7 +58,7 @@ export const ApplicationProvider = ({
       <SaltProvider
         theme="vuu-theme"
         density="high"
-        mode={applicationSettings.themeMode}
+        mode={getThemeMode(applicationSettings)}
       >
         {children}
       </SaltProvider>

vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx

@@ -1,14 +1,13 @@
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { HTMLAttributes } from "react";
-import { SettingsForm, SettingsSchema } from "./SettingsForm";
+import { SettingsForm } from "./SettingsForm";
 
 import applicationSettingsPanelCss from "./ApplicationSettingsPanel.css";
 import { useApplicationSettings } from "../application-provider";
 
 // Props for Panel
-export interface ApplicatonSettingsPanelProps
-  extends HTMLAttributes<HTMLDivElement> {}
+export type ApplicatonSettingsPanelProps = HTMLAttributes<HTMLDivElement>;
 
 const classBase = "vuuApplicationSettingsPanel";
 
@@ -19,7 +18,7 @@ export const ApplicationSettingsPanel = ({
 
   const {
     onApplicationSettingChanged,
-    applicationSettings,
+    applicationSettings = {},
     applicationSettingsSchema,
   } = useApplicationSettings();
 
@@ -29,13 +28,20 @@ export const ApplicationSettingsPanel = ({
     window: targetWindow,
   });
 
-  return (
-    <div {...htmlAttributes} className={classBase}>
-      <SettingsForm
-        applicationSettingsSchema={applicationSettingsSchema}
-        applicationSettings={applicationSettings}
-        onApplicationSettingChanged={onApplicationSettingChanged}
-      />
-    </div>
-  );