Configure Slim logger at startup and fix icon type issues

src/components/Button.tsx

@@ -3,10 +3,7 @@ import React from 'react'
 import type { IconType } from 'react-icons'
 
 interface ButtonProps {
-  icon:
-    | IconType
-    | React.ComponentType<Record<string, never>>
-    | React.ForwardRefExoticComponent<object>
+  icon: IconType | React.ComponentType<Record<string, unknown>>
   tooltip?: string
   label?: string
   onClick?: (options: React.SyntheticEvent) => void

src/index.tsx

@@ -7,6 +7,7 @@ import './index.css'
 import packageInfo from '../package.json'
 import type AppConfig from './AppConfig'
 import CustomErrorBoundary from './components/CustomErrorBoundary'
+import { logger } from './utils/logger'
 
 declare global {
   interface Window {
@@ -19,6 +20,20 @@ if (config === undefined) {
   throw Error('No application configuration was provided.')
 }
 
+if (config.logger != null) {
+  logger.configure({
+    ...(config.logger.level != null
+      ? { level: logger.parseLogLevel(config.logger.level) }
+      : {}),
+    ...(config.logger.enableInProduction != null
+      ? { enableInProduction: config.logger.enableInProduction }
+      : {}),
+    ...(config.logger.enableInDevelopment != null
+      ? { enableInDevelopment: config.logger.enableInDevelopment }
+      : {}),
+  })
+}
+
 type AppProps = {
   config: AppConfig
   version: string

src/utils/logger.ts

@@ -1,5 +1,6 @@
 /**
- * Logger utility that wraps console logging and can be configured for different environments
+ * Logger utility that wraps console logging and can be configured for different environments.
+ * Configured from `window.config.logger` at application startup.
  */
 
 export enum LogLevel {

types/react-antd-icons.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @ant-design/icons@4 types Pick pointer-capture handlers that are absent from
+ * @types/react's ts5.0 DOMAttributes. Without these, icon props are inferred as
+ * required and break JSX usage across the app.
+ */
+import 'react'
+
+declare module 'react' {
+  interface DOMAttributes<T> {
+    onPointerEnterCapture?: React.PointerEventHandler<T> | undefined
+    onPointerLeaveCapture?: React.PointerEventHandler<T> | undefined
+  }
+}