Merge branch 'feat/add-dark-mode-support' into develop

libs/shared/data-access/store/src/lib/colorPaletteConfigSlice.ts

+import { palette } from '@mui/system';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
 
-/** Extra properties that are not present in the default PaletteOptions of mui. */
+/** Extra properties that are not present in the default PaletteOptions of mui. For autocompletion */
 export interface ExtraColorsForMui5 {
   /** Colors that can be used for data visualisation, e.g. nodes, edges */
   dataPointColors: string[];
 }
 
-/** Our custom color palette config. */
-export interface ColorPaletteConfig extends ExtraColorsForMui5 {
-  primary: {
-    main: string;
+/** Our custom color palette config. With the palette options from MUI that we are going to use. */
+export interface ColorPaletteConfig {
+  lightPalette: {
+    // Custom colors
+    custom: ExtraColorsForMui5;
+    // MUI colors
+    primary: {
+      light?: string;
+      main: string;
+      dark?: string;
+    };
+    secondary: {
+      light?: string;
+      main: string;
+      dark?: string;
+    };
   };
-  secondary: {
-    main: string;
+  darkPalette: {
+    custom: ExtraColorsForMui5;
+    primary: {
+      light?: string;
+      main: string;
+      dark?: string;
+    };
+    secondary: {
+      light?: string;
+      main: string;
+      dark?: string;
+    };
   };
+  darkMode: boolean;
 }
 
 // This looks very much like the mui Palette interface,
 // But we don't reference that type directly here to stay decoupled
 export const initialState: ColorPaletteConfig = {
-  dataPointColors: ['#ff0000', '#00ff00', '#0000ff'],
-  primary: {
-    main: '#9999ff',
+  lightPalette: {
+    custom: { dataPointColors: ['#ff0000', '#00ff00', '#0000ff'] },
+    // If light and dark are not set, these will be calculated using main.
+    // light/dark have nothing with darkmode, these are just a light and dark variation
+    primary: {
+      // light: '#42a5f5',
+      main: '#1976d2',
+      // dark: '#1565c0',
+    },
+    secondary: {
+      // light: '#ba68c8',
+      main: '#9c27b0',
+      // dark: '#7b1fa2',
+    },
   },
-  secondary: {
-    main: '#ff0000',
+  darkPalette: {
+    custom: { dataPointColors: ['#ff0000', '#00ff00', '#0000ff'] },
+    primary: {
+      main: '#e3f3fd',
+    },
+    secondary: {
+      main: '#f3e5f5',
+    },
   },
+  darkMode: false,
 };
 
 export const colorPaletteConfigSlice = createSlice({
@@ -34,16 +76,33 @@ export const colorPaletteConfigSlice = createSlice({
   // `createSlice` will infer the state type from the `initialState` argument
   initialState,
   reducers: {
-    changePrimary: (state, action: PayloadAction<{ main: string }>) => {
-      state.primary = action.payload;
+    changePrimary: (
+      state,
+      action: PayloadAction<{
+        main?: string;
+        light?: string;
+        dark?: string;
+        darkMode?: 'light' | 'dark';
+      }>
+    ) => {
+      const { main, light, dark, darkMode } = action.payload;
+      let palette = state.lightPalette;
+      if (darkMode == 'dark') palette = state.darkPalette;
+
+      if (main) palette.primary.main = main;
+      if (light) palette.primary.light = light;
+      if (dark) palette.primary.dark = dark;
     },
     changeDataPointColors: (state, action: PayloadAction<string[]>) => {
-      state.dataPointColors = action.payload;
+      state.lightPalette.custom.dataPointColors = action.payload;
+    },
+    toggleDarkMode: (state) => {
+      state.darkMode = !state.darkMode;
     },
   },
 });
 
-export const { changePrimary, changeDataPointColors } =
+export const { changePrimary, changeDataPointColors, toggleDarkMode } =
   colorPaletteConfigSlice.actions;
 
 // Select the schema and convert it to a graphology object

libs/shared/data-access/store/src/lib/store.ts

 import { configureStore } from '@reduxjs/toolkit';
-import colorPaletteConfigSliceReducer from './colorPaletteConfigSlice';
-import graphQueryResultSliceReducer from './graphQueryResultSlice';
-import schemaSliceReducer from './schemaSlice';
+import colorPaletteConfigSlice from './colorPaletteConfigSlice';
+import graphQueryResultSlice from './graphQueryResultSlice';
+import schemaSlice from './schemaSlice';
 
 export const store = configureStore({
   reducer: {
-    graphQueryResult: graphQueryResultSliceReducer,
-    schema: schemaSliceReducer,
-    colorPaletteConfig: colorPaletteConfigSliceReducer,
+    graphQueryResult: graphQueryResultSlice,
+    schema: schemaSlice,
+    colorPaletteConfig: colorPaletteConfigSlice,
   },
 });
 

libs/shared/data-access/store/tsconfig.lib.json

@@ -5,6 +5,6 @@
     "declaration": true,
     "types": []
   },
-  "include": ["**/*.ts"],
+  "include": ["**/*.ts", "../theme/src/lib/colorPaletteConfigSlice.ts"],
   "exclude": ["**/*.spec.ts"]
 }

libs/shared/data-access/theme/src/index.ts

-export * from './lib/ourThemeProvider';
+export * from './lib/graphPolarisThemeProvider';

libs/shared/data-access/theme/src/lib/ourThemeProvider.tsx → libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.tsx

@@ -19,7 +19,11 @@ declare module '@mui/material/styles' {
   }
 }
 
-export function OurThemeProvider({ children }: { children: ReactNode }) {
+export function GraphPolarisThemeProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
   const colorPaletteConfig = useAppSelector(selectColorPaletteConfig);
 
   // Create a new theme when our custom color palette in redux changed
@@ -32,4 +36,4 @@ export function OurThemeProvider({ children }: { children: ReactNode }) {
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 }
-export default OurThemeProvider;
+export default GraphPolarisThemeProvider;

libs/shared/data-access/theme/src/lib/mapColorsConfigToMuiTheme.ts

@@ -7,9 +7,19 @@ export default function MapColorsConfigToMuiTheme(
 ): ThemeOptions {
   return {
     palette: {
-      primary: { main: colorsConfig.primary.main },
-      secondary: { main: colorsConfig.secondary.main },
-      dataPointColors: colorsConfig.dataPointColors,
+      mode: colorsConfig.darkMode ? 'dark' : 'light',
+
+      ...(colorsConfig.darkMode
+        ? {
+            primary: colorsConfig.darkPalette.primary,
+            secondary: colorsConfig.darkPalette.secondary,
+            dataPointColors: colorsConfig.darkPalette.custom.dataPointColors,
+          }
+        : {
+            primary: colorsConfig.lightPalette.primary,
+            secondary: colorsConfig.lightPalette.secondary,
+            dataPointColors: colorsConfig.lightPalette.custom.dataPointColors,
+          }),
     },
   };
 }

libs/shared/data-access/theme/tsconfig.lib.json

@@ -18,5 +18,11 @@
     "**/*.spec.jsx",
     "**/*.test.jsx"
   ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": [
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.ts",
+    "**/*.tsx",
+    "../store/src/lib/colorPaletteConfigSlice.ts"
+  ]
 }

tsconfig.base.json

@@ -16,6 +16,9 @@
     "baseUrl": ".",
     "paths": {
       "@graphpolaris/schema-usecases": ["libs/schema/usecases/src/index.ts"],
+      "@graphpolaris/shared/data-access/api": [
+        "libs/shared/data-access/api/src/index.ts"
+      ],
       "@graphpolaris/shared/data-access/authorization": [
         "libs/shared/data-access/authorization/src/index.ts"
       ],

workspace.json

@@ -2,6 +2,7 @@
   "version": 2,
   "projects": {
     "schema-usecases": "libs/schema/usecases",
+    "shared-data-access-api": "libs/shared/data-access/api",
     "shared-data-access-authorization": "libs/shared/data-access/authorization",
     "shared-data-access-store": "libs/shared/data-access/store",
     "shared-data-access-theme": "libs/shared/data-access/theme",
@@ -9,4 +10,4 @@
     "web-graphpolaris": "apps/web-graphpolaris",
     "web-graphpolaris-e2e": "apps/web-graphpolaris-e2e"
   }
-}
+}
\ No newline at end of file