ref: Convert Theme to TS (#11926)

react/features/app/components/App.web.js

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { DialogContainer } from '../../base/dialog';
 import GlobalStyles from '../../base/ui/components/GlobalStyles';
-import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider';
+import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider.web';
 import { ChromeExtensionBanner } from '../../chrome-extension-banner';
 
 import { AbstractApp } from './AbstractApp';

react/features/base/ui/components/BaseTheme.web.ts

@@ -1,7 +1,5 @@
-// @flow
-
 import { font, colors, colorMap, spacing, shape, typography, breakpoints } from '../Tokens';
-import { createWebTheme } from '../functions';
+import { createWebTheme } from '../functions.web';
 
 export default createWebTheme({
     font,

react/features/base/ui/components/JitsiThemeProvider.web.tsx

@@ -1,11 +1,8 @@
-// @flow
-
 import { ThemeProvider } from '@material-ui/core/styles';
 import * as React from 'react';
+import { connect } from 'react-redux';
 
-import { connect } from '../../../base/redux';
+import BaseTheme from './BaseTheme.web';
-
-import BaseTheme from './BaseTheme';
 
 type Props = {
 
@@ -14,10 +11,10 @@ type Props = {
      */
     _theme: Object,
 
-   /**
+    /**
     * The children of the component.
     */
-    children: React.ChildrenArray<any>
+    children: React.ReactNode
 }
 
 /**
@@ -36,7 +33,7 @@ function JitsiThemeProvider(props: Props) {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function _mapStateToProps(state) {
+function _mapStateToProps(state: any) {
     const { muiBrandedTheme } = state['features/dynamic-branding'];
 
     return {

react/features/base/ui/functions.web.ts

@@ -1,16 +1,25 @@
-// @flow
-
 import { createMuiTheme } from '@material-ui/core/styles';
 
+import { Theme } from './types';
 import { createColorTokens } from './utils';
 
+interface ThemeProps {
+    breakpoints: Object;
+    colorMap: Object;
+    colors: Object;
+    font: Object;
+    shape: Object;
+    spacing: Array<number>;
+    typography: Object;
+}
+
 /**
  * Creates a MUI theme based on local UI tokens.
  *
  * @param {Object} arg - The ui tokens.
  * @returns {Object}
  */
-export function createWebTheme({ font, colors, colorMap, shape, spacing, typography, breakpoints }: Object) {
+export function createWebTheme({ font, colors, colorMap, shape, spacing, typography, breakpoints }: ThemeProps): Theme {
     return createMuiTheme({
         props: {
             // disable ripple effect on buttons globally
@@ -29,7 +38,7 @@ export function createWebTheme({ font, colors, colorMap, shape, spacing, typogra
             ...typography
         },
         breakpoints
-    });
+    }) as unknown as Theme;
 }
 
 /**
@@ -39,7 +48,7 @@ export function createWebTheme({ font, colors, colorMap, shape, spacing, typogra
  * @returns {Object}
  */
 export function formatCommonClasses(stylesObj: Object) {
-    const formatted = {};
+    const formatted: any = {};
 
     for (const [ key, value ] of Object.entries(stylesObj)) {
         formatted[`.${key}`] = value;

react/features/base/ui/utils.ts

@@ -1,5 +1,3 @@
-// @flow
-
 /**
  * Creates the color tokens based on the color theme and the association map.
  * If a key is not found in the association map it defaults to the current value.
@@ -10,6 +8,6 @@
  */
 export function createColorTokens(colorMap: Object, colors: Object): Object {
     return Object.entries(colorMap)
-        .reduce((result, [ token, value ]) =>
+        .reduce((result, [ token, value ]: [any, keyof Object]) =>
             Object.assign(result, { [token]: colors[value] || value }), {});
 }

react/features/prejoin/components/PrejoinApp.js

@@ -10,7 +10,7 @@ import { setConfig } from '../../base/config';
 import { DialogContainer } from '../../base/dialog';
 import { createPrejoinTracks } from '../../base/tracks';
 import GlobalStyles from '../../base/ui/components/GlobalStyles';
-import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider';
+import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider.web';
 import { initPrejoin, makePrecallTest } from '../actions';
 
 import PrejoinThirdParty from './PrejoinThirdParty';