feat: use React.FC

electron/renderer/components/chrome/chrome.tsx

@@ -2,14 +2,22 @@
 
 import { EuiProvider, EuiThemeColorMode } from '@elastic/eui';
 import createCache from '@emotion/cache';
-import { FunctionComponent } from 'react';
+import { ReactNode } from 'react';
 import { useTheme } from '../theme/theme';
 
+interface ChromeProviderProps {
+ children?: ReactNode;
+}
+
 /**
  * Renders the UI that surrounds the page content.
  * Must be nested within the `ThemeProvider`.
  */
-export const ChromeProvider: FunctionComponent<any> = ({ children }) => {
+const ChromeProvider: React.FC<ChromeProviderProps> = (
+ props: ChromeProviderProps
+) => {
+ const { children } = props;
+
  const { colorMode } = useTheme();
 
  /**
@@ -45,3 +53,5 @@ function getNodeBySelector(selector: string): Node | undefined {
  return document.querySelector(selector) ?? undefined;
  }
 }
+
+export { ChromeProvider };

electron/renderer/components/logger/logger.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, createContext, useContext, useEffect } from 'react';
+import { ReactNode, createContext, useContext, useEffect } from 'react';
 import { Logger } from '../../../common/logger/logger.types';
 import {
  createLogger,
@@ -20,9 +20,16 @@ const LoggerContext = createContext<LoggerContextValue>({
  logger,
  createLogger,
 });
-LoggerContext.displayName = 'LoggerContext'; // for dev tools
 
-export const LoggerProvider: FunctionComponent<any> = ({ children }) => {
+interface LoggerProviderProps {
+ children: ReactNode;
+}
+
+const LoggerProvider: React.FC<LoggerProviderProps> = (
+ props: LoggerProviderProps
+) => {
+ const { children } = props;
+
  useEffect(() => {
  // Once client-side, start monitoring unhandled exceptions on the window.
  startMonitoringUnhandledExceptions();
@@ -38,7 +45,7 @@ export const LoggerProvider: FunctionComponent<any> = ({ children }) => {
  );
 };
 
-export const useLogger = (scope?: string): LoggerContextValue => {
+const useLogger = (scope?: string): LoggerContextValue => {
  const context = useContext(LoggerContext);
  if (scope) {
  return {
@@ -48,3 +55,5 @@ export const useLogger = (scope?: string): LoggerContextValue => {
  }
  return context;
 };
+
+export { LoggerProvider, useLogger };

electron/renderer/components/theme/theme.tsx

@@ -1,7 +1,7 @@
 // https:/elastic/next-eui-starter/blob/master/src/components/theme.tsx
 
 import {
- FunctionComponent,
+ ReactNode,
  createContext,
  useContext,
  useEffect,
@@ -23,9 +23,16 @@ interface ThemeContextValue {
 }
 
 const ThemeContext = createContext<ThemeContextValue>({});
-ThemeContext.displayName = 'ThemeContext'; // for dev tools
 
-export const ThemeProvider: FunctionComponent<any> = ({ children }) => {
+interface ThemeProviderProps {
+ children?: ReactNode;
+}
+
+const ThemeProvider: React.FC<ThemeProviderProps> = (
+ props: ThemeProviderProps
+) => {
+ const { children } = props;
+
  const [colorMode, setColorMode] = useState(getDefaultThemeName());
 
  // On initial mount in the browser, use any theme from local storage.
@@ -45,6 +52,8 @@ export const ThemeProvider: FunctionComponent<any> = ({ children }) => {
  );
 };
 
-export const useTheme = (): ThemeContextValue => {
+const useTheme = (): ThemeContextValue => {
  return useContext(ThemeContext);
 };
+
+export { ThemeProvider, useTheme };