Improve typing & fix breaking type changes

- Replace v5 CSSBaseline with v4 CSSBaseline for compatibility

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/theme/src/unified/UnifiedTheme.tsx

@@ -20,21 +20,22 @@ import {
   createTheme,
 } from '@material-ui/core/styles';
 import type { PaletteOptions as PaletteOptionsV4 } from '@material-ui/core/styles/createPalette';
-import { PaletteOptions as PaletteOptionsV5 } from '@mui/material/styles';
 import {
-  adaptV4Theme,
+  DeprecatedThemeOptions,
   Theme as Mui5Theme,
-  createTheme as createV5Theme,
+  PaletteOptions as PaletteOptionsV5,
   ThemeOptions as ThemeOptionsV5,
+  adaptV4Theme,
+  createTheme as createV5Theme,
 } from '@mui/material/styles';
-import { transformV5ComponentThemesToV4 } from './overrides';
+import { createBaseThemeOptions } from '../base/createBaseThemeOptions';
 import { PageTheme } from '../base/types';
 import { defaultComponentThemes } from '../v5';
-import { createBaseThemeOptions } from '../base/createBaseThemeOptions';
-import { UnifiedTheme } from './types';
+import { transformV5ComponentThemesToV4 } from './overrides';
+import { SupportedThemes, SupportedVersions, UnifiedTheme } from './types';
 
 export class UnifiedThemeHolder implements UnifiedTheme {
-  #themes = new Map<string, unknown>();
+  #themes = new Map<SupportedVersions, SupportedThemes>();
 
   constructor(v4?: Mui4Theme, v5?: Mui5Theme) {
     this.#themes = new Map();
@@ -46,7 +47,7 @@ export class UnifiedThemeHolder implements UnifiedTheme {
     }
   }
 
-  getTheme(version: string): unknown | undefined {
+  getTheme(version: SupportedVersions): SupportedThemes | undefined {
     return this.#themes.get(version);
   }
 }
@@ -75,12 +76,6 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme {
   const components = { ...defaultComponentThemes, ...options.components };
   const v5Theme = createV5Theme({ ...themeOptions, components });
 
-  // TODO: Not super relevant in the beginning
-  /*   const mui4Styles = maybeLoadMui4Styles();
-  if (!mui4Styles) {
-    return new UnifiedThemeHolder(undefined, v5Theme);
-  } */
-
   const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components);
   const v4Theme = { ...createTheme(themeOptions), ...v4Overrides };
   return new UnifiedThemeHolder(v4Theme, v5Theme);
@@ -95,7 +90,7 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme {
 export function createUnifiedThemeFromV4(
   options: ThemeOptionsV4,
 ): UnifiedTheme {
-  const v5Theme = adaptV4Theme(options as any);
+  const v5Theme = adaptV4Theme(options as DeprecatedThemeOptions);
   const v4Theme = createTheme(options);
   return new UnifiedThemeHolder(v4Theme, v5Theme);
 }

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -16,16 +16,18 @@
 
 import React, { ReactNode } from 'react';
 import './MuiClassNameSetup';
+import { CssBaseline } from '@material-ui/core';
 import {
   ThemeProvider,
   StylesProvider,
   createGenerateClassName,
+  Theme as Mui4Theme,
 } from '@material-ui/core/styles';
 import {
   StyledEngineProvider,
   ThemeProvider as Mui5Provider,
+  Theme as Mui5Theme,
 } from '@mui/material/styles';
-import CSSBaseline from '@mui/material/CssBaseline';
 import { UnifiedTheme } from './types';
 
 /**
@@ -57,12 +59,12 @@ export function UnifiedThemeProvider(
 ): JSX.Element {
   const { children, theme, noCssBaseline = false } = props;
 
-  const v4Theme = theme.getTheme('v4');
-  const v5Theme = theme.getTheme('v5');
+  const v4Theme = theme.getTheme('v4') as Mui4Theme;
+  const v5Theme = theme.getTheme('v5') as Mui5Theme;
 
   let cssBaseline: JSX.Element | undefined = undefined;
   if (!noCssBaseline) {
-    cssBaseline = <CSSBaseline />;
+    cssBaseline = <CssBaseline />;
   }
 
   let result = (

packages/theme/src/unified/types.ts

@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+import { Theme as Mui4Theme } from '@material-ui/core/styles';
+import { Theme as Mui5Theme } from '@mui/material/styles';
+
+export type SupportedVersions = 'v4' | 'v5';
+export type SupportedThemes = Mui4Theme | Mui5Theme;
+
 /**
  * A container of one theme for multiple different MUI versions.
  *
@@ -22,5 +28,5 @@
  * @public
  */
 export interface UnifiedTheme {
-  getTheme(version: string): unknown | undefined;
+  getTheme(version: SupportedVersions): SupportedThemes | undefined;
 }

packages/theme/src/v4/types.ts

@@ -93,8 +93,12 @@ export type SimpleThemeOptions = {
 
 declare module '@material-ui/core/styles/createPalette' {
   interface Palette extends BackstagePaletteAdditions {}
+
+  interface PaletteOptions extends Partial<BackstagePaletteAdditions> {}
 }
 
 declare module '@material-ui/core/styles/createTheme' {
   interface Theme extends BackstageThemeAdditions {}
+
+  interface ThemeOptions extends Partial<BackstageThemeAdditions> {}
 }

packages/theme/src/v5/defaultComponentThemes.ts

@@ -240,4 +240,9 @@ export const defaultComponentThemes: ThemeOptions['components'] = {
       },
     },
   },
+  MuiLink: {
+    defaultProps: {
+      underline: 'hover',
+    },
+  },
 };

packages/theme/src/v5/types.ts

@@ -22,10 +22,14 @@ import {
 
 declare module '@mui/material/styles' {
   interface Palette extends BackstagePaletteAdditions {}
+
+  interface PaletteOptions extends Partial<BackstagePaletteAdditions> {}
 }
 
 declare module '@mui/material/styles' {
   interface Theme extends BackstageThemeAdditions {}
+
+  interface ThemeOptions extends Partial<BackstageThemeAdditions> {}
 }
 
 declare module '@mui/private-theming/defaultTheme' {