fix(storybook): theme attributes were wrongly accessed

apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx

@@ -10,7 +10,7 @@ export default {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'SemanticSubstrates', 
+  title: 'SemanticSubstrates',
   component: SemanticSubstrates,
   decorators: [
     (story) => <div style={{ padding: '3rem' }}>{story()}</div>,
@@ -23,25 +23,25 @@ export default {
   ],
 } as ComponentMeta<typeof SemanticSubstrates>;
 
-declare module '@mui/material/styles' {
-  interface Theme {
-    graphpolaris: {
-      danger: string;
-      dataPointColors: string[];
-    };
-  }
-  // allow configuration using `createTheme`
-  interface ThemeOptions {
-    graphpolaris: {
-      danger: string;
-      dataPointColors: string[];
-    };
-  }
-}
+// declare module '@mui/material/styles' {
+//   interface Theme {
+//     palette: {
+//       primary: string;
+//       dataPointColors: string[];
+//     };
+//   }
+//   // allow configuration using `createTheme`
+//   interface ThemeOptions {
+//     palette: {
+//       danger: string;
+//       dataPointColors: string[];
+//     };
+//   }
+// }
 
 const mockTheme = createTheme({
-  graphpolaris: {
-    danger: 'orange',
+  palette: {
+    // danger: 'orange',
     dataPointColors: ['blue', 'green'],
   },
 });

apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx

@@ -24,8 +24,7 @@ const SemanticSubstrates = () => {
       <Box
         sx={{
           // Using our custom palette dataPointColors property, cast theme to any because Theme doesn't know of this custom property
-          backgroundColor: (theme: Theme) =>
-            theme.graphpolaris.dataPointColors[0],
+          backgroundColor: (theme: Theme) => theme.palette.dataPointColors[0],
         }}
       >
         <h1>semantic substrates h1</h1>
@@ -44,30 +43,30 @@ const SemanticSubstrates = () => {
           dispatch(
             changeDataPointColors([
               v.currentTarget.value,
-              ...theme.graphpolaris.dataPointColors.slice(1),
+              ...theme.palette.dataPointColors.slice(1),
             ])
           )
         }
         type="color"
         id="head"
         name="head"
-        value={theme.graphpolaris.dataPointColors[0]}
+        value={theme.palette.dataPointColors[0]}
       />
       Change dataPointColors reflects to local
       <input
         onChange={(v) =>
           dispatch(
             changeDataPointColors([
-              theme.graphpolaris.dataPointColors[0],
+              theme.palette.dataPointColors[0],
               v.currentTarget.value,
-              ...theme.graphpolaris.dataPointColors.slice(2),
+              ...theme.palette.dataPointColors.slice(2),
             ])
           )
         }
         type="color"
         id="head"
         name="head"
-        value={theme.graphpolaris.dataPointColors[1]}
+        value={theme.palette.dataPointColors[1]}
       />
       Change dataPointColors reflects to global
     </>