fix: patch some libraries that don't play well

.gitignore

@@ -4,7 +4,8 @@ dist
 # env vars
 /.env
 
-/.yarn
+/.yarn/*
+!.yarn/patches
 
 # misc
 .DS_Store

.yarn/patches/@types-react-toggle-npm-4.0.5-c40bf309fb.patch

@@ -0,0 +1,12 @@
+diff --git a/index.d.ts b/index.d.ts
+index 60e09f4b847b1da73a644443353303e698620a53..5c0acbbb269b622842a29b3972b42656d49ff22a 100644
+--- a/index.d.ts
++++ b/index.d.ts
+@@ -11,4 +11,6 @@ export interface ToggleProps extends InputHTMLAttributes<HTMLInputElement> {
+     icons?: boolean | ToggleIcons | undefined;
+ }
+
+-export default class Toggle extends Component<ToggleProps> {}
++export class Toggle extends Component<ToggleProps> {}
++
++export default Toggle

.yarn/patches/formik-npm-2.2.9-0e8cb516ca.patch

@@ -0,0 +1,9 @@
+diff --git a/dist/Form.d.ts b/dist/Form.d.ts
+index e15462a7e686a75512f27ff66bccc93bbfca285e..bf1e8af83fac7a45635af0d551d6f9ba98741d59 100644
+--- a/dist/Form.d.ts
++++ b/dist/Form.d.ts
+@@ -1,3 +1,3 @@
+ import * as React from 'react';
+ export declare type FormikFormProps = Pick<React.FormHTMLAttributes<HTMLFormElement>, Exclude<keyof React.FormHTMLAttributes<HTMLFormElement>, 'onReset' | 'onSubmit'>>;
+-export declare const Form: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLFormElement>>;
++export declare const Form: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLFormElement>>;

.yarn/patches/react-toggle-npm-4.1.3-6397672405.patch

@@ -0,0 +1,14 @@
+diff --git a/dist/component/index.js b/dist/component/index.js
+index af91ef8082c1922b805354b06d3e8b474ba91140..eb1e6de4edd770b01ea776adca65bc62b4549ab9 100644
+--- a/dist/component/index.js
++++ b/dist/component/index.js
+@@ -237,6 +237,9 @@ var Toggle = function (_PureComponent) {
+
+ exports.default = Toggle;
+
++// Vite hates default exports, so add a named one for us to use
++exports.Toggle = Toggle
++
+
+ Toggle.displayName = 'Toggle';
+

apps/app/package.json

@@ -43,7 +43,7 @@
 		"@types/react": "^18.3.11",
 		"@types/react-dom": "^18.3.0",
 		"@types/react-tabs": "^5.0.5",
-		"@types/react-toggle": "^4.0.5",
+		"@types/react-toggle": "patch:@types/react-toggle@npm%3A4.0.5#~/.yarn/patches/@types-react-toggle-npm-4.0.5-c40bf309fb.patch",
 		"@types/semver": "^7.5.8",
 		"@vitejs/plugin-react": "^4.3.2",
 		"@welldone-software/why-did-you-render": "^7.0.1",
@@ -85,7 +85,7 @@
 		"deep-extend": "^0.6.0",
 		"deepmerge-ts": "^5.1.0",
 		"electron-updater": "^6.3.9",
-		"formik": "^2.2.9",
+		"formik": "patch:formik@npm%3A2.2.9#~/.yarn/patches/formik-npm-2.2.9-0e8cb516ca.patch",
 		"formik-mui": "^5.0.0-alpha.0",
 		"got": "^14.4.3",
 		"graphics-data-definition": "1.1.1",
@@ -103,7 +103,7 @@
 		"react-dnd-html5-backend": "^16.0.1",
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.3.0",
-		"react-toggle": "^4.1.3",
+		"react-toggle": "patch:react-toggle@npm%3A4.1.3#~/.yarn/patches/react-toggle-npm-4.1.3-6397672405.patch",
 		"react-visibility-sensor": "^5.1.1",
 		"semver": "^7.6.3",
 		"short-uuid": "^5.2.0",

apps/app/src/react/components/inputs/ToggleInput.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import React from 'react'
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 
 export const ToggleInput: React.FC<{
 	currentValue: boolean | undefined

apps/app/src/react/components/pages/homePage/AnalogInputsPage/AnalogInputsPage.tsx

@@ -17,7 +17,7 @@ import { TextInput } from '../../../inputs/TextInput.js'
 import { AnalogInput } from '../../../../../models/project/AnalogInput.js'
 import { TriggerBtn } from '../../../inputs/TriggerBtn/TriggerBtn.js'
 import { Popover } from '@mui/material'
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 import { FloatInput } from '../../../inputs/FloatInput.js'
 import { ActiveAnalog } from '../../../../../models/rundown/Analog.js'
 import { clone } from 'lodash-es'

apps/app/src/react/components/pages/homePage/applicationPage/ApplicationPage.tsx

@@ -4,7 +4,7 @@ import { IPCServerContext } from '../../../../contexts/IPCServer.js'
 import { ErrorHandlerContext } from '../../../../contexts/ErrorHandler.js'
 import { ProjectPageLayout } from '../projectPageLayout/ProjectPageLayout.js'
 import { store } from '../../../../mobx/store.js'
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 
 import './style.scss'
 import { computed } from 'mobx'

apps/app/src/react/components/pages/homePage/bridgeItem/BridgeItemContent.tsx

@@ -12,7 +12,7 @@ import { PeripheralsList } from '../peripheralsList/PeripheralsList.js'
 import './style.scss'
 import { NewDeviceDialog } from '../bridgesPage/NewDeviceDialog.js'
 
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 import 'react-toggle/style.css'
 import { TSRDeviceId, unprotectString } from '@shared/models'
 import { BridgeId } from '@shared/api'

apps/app/src/react/components/pages/homePage/bridgesPage/BridgesPage.tsx

@@ -13,7 +13,7 @@ import { BridgeItemContent } from '../bridgeItem/BridgeItemContent.js'
 import { ProjectPageLayout } from '../projectPageLayout/ProjectPageLayout.js'
 import { NewBridgeDialog } from './NewBridgeDialog.js'
 
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 import 'react-toggle/style.css'
 import { unprotectString } from '@shared/models'
 import { BridgeId } from '@shared/api'

apps/app/src/react/components/pages/homePage/deviceItem/DeviceItemContent.tsx

@@ -8,7 +8,7 @@ import { IPCServerContext } from '../../../../contexts/IPCServer.js'
 import { ProjectContext } from '../../../../contexts/Project.js'
 import { SelectEnum } from '../../../inputs/SelectEnum.js'
 import { BooleanInput } from '../../../inputs/BooleanInput.js'
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 import { TSRDeviceId, unprotectString } from '@shared/models'
 
 const MIN_PORT = 1

apps/app/src/react/components/pages/homePage/peripheralItem/PeripheralItemHeader.tsx

@@ -6,7 +6,7 @@ import { ScListItemLabel } from '../scList/ScListItemLabel.js'
 import { StatusCircle } from '../scList/StatusCircle.js'
 import { KnownPeripheral, PeripheralSettingsAny } from '@shared/api'
 import { PeripheralStatus } from '../../../../../models/project/Peripheral.js'
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 import 'react-toggle/style.css'
 import { DeviceIcon } from '../deviceIcon/DeviceIcon.js'
 

apps/tsr-bridge/package.json

@@ -27,7 +27,7 @@
 	},
 	"license": "AGPL-3.0-or-later",
 	"devDependencies": {
-		"@types/react-toggle": "^4.0.5",
+		"@types/react-toggle": "patch:@types/react-toggle@npm%3A4.0.5#~/.yarn/patches/@types-react-toggle-npm-4.0.5-c40bf309fb.patch",
 		"@types/triple-beam": "^1.3.5",
 		"@vitejs/plugin-react": "^4.3.2",
 		"concurrently": "^7.6.0",
@@ -52,7 +52,7 @@
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.3.0",
 		"react-scroll-to-bottom": "^4.2.0",
-		"react-toggle": "^4.1.3",
+		"react-toggle": "patch:react-toggle@npm%3A4.1.3#~/.yarn/patches/react-toggle-npm-4.1.3-6397672405.patch",
 		"short-uuid": "^5.2.0",
 		"winston": "^3.15.0",
 		"winston-transport": "^4.8.0"

apps/tsr-bridge/src/react/components/Settings.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react'
-import Toggle from 'react-toggle'
+import { Toggle } from 'react-toggle'
 import { TextField } from '@mui/material'
 import { AppSettings, AppSystem } from '../../models/AppData.js'
 import { IPCServerContext } from '../contexts/IPCServer.js'
@@ -54,7 +54,6 @@ export const Settings: React.FC<{
 					<div className="label">Autostart on system startup</div>
 					<div className="value">
 						<div className="sc-switch">
-							{/* @ts-expect-error lib doesn't export in an esm friendly way */}
 							<Toggle
 								defaultChecked={settings.autostart}
 								onChange={() =>
@@ -70,7 +69,6 @@ export const Settings: React.FC<{
 					<div className="label">Mode select: Client / Server</div>
 					<div className="value">
 						<div className="sc-switch">
-							{/* @ts-expect-error lib doesn't export in an esm friendly way */}
 							<Toggle
 								defaultChecked={settings.acceptConnections}
 								onChange={() =>