chore: updates yarn and lerna

.github/workflows/node.yaml

@@ -16,24 +16,26 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
+      - name: Enable Corepack
+        run: corepack enable
       - name: apt-get update
         run: sudo apt-get update
       - name: Install libasound2-dev
         run: sudo apt-get install -y libasound2-dev
       - name: Install libudev-dev
         run: sudo apt-get install -y libudev-dev
-      - name: restore node_modules
+      - name: Restore node_modules
         uses: actions/cache@v3
         with:
           path: |
             node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Prepare Environment
         run: |
-          yarn --ignore-engines --frozen-lockfile --network-timeout 1000000
+          yarn --frozen-lockfile --network-timeout 1000000
       - name: Typecheck
         run: yarn build
       - name: Lint
@@ -50,18 +52,20 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
-      - name: restore node_modules
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Restore node_modules
         uses: actions/cache@v3
         with:
           path: |
             node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Prepare Environment
         run: |
-          yarn --ignore-engines --frozen-lockfile --network-timeout 1000000
+          yarn --frozen-lockfile --network-timeout 1000000
       - name: Build
         run: |
           yarn build
@@ -72,18 +76,20 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
-      - name: restore node_modules
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Restore node_modules
         uses: actions/cache@v3
         with:
           path: |
             node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Prepare Environment
         run: |
-          yarn --ignore-engines --frozen-lockfile --network-timeout 1000000
+          yarn --frozen-lockfile --network-timeout 1000000
       - name: Build
         run: |
           yarn build

.gitignore

@@ -17,3 +17,12 @@ yarn-error.log*
 lerna-debug.log*
 .vscode/*
 !.vscode/launch.json
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

apps/app/package.json

@@ -15,9 +15,9 @@
 		"react:dev": "webpack serve --mode=development",
 		"electron:dev": "nodemon",
 		"dev": "concurrently --kill-others \"yarn react:dev\" \"yarn electron:dev\"",
-		"test": "jest",
-		"precommit": "lint-staged",
-		"lint:raw": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx --ignore-pattern dist"
+		"test": "run -T jest",
+		"precommit": "run -T lint-staged",
+		"lint:raw": "run -T eslint --ext .ts --ext .js --ext .tsx --ext .jsx --ignore-pattern dist"
 	},
 	"repository": {
 		"type": "git",

apps/app/src/react/App.tsx

@@ -50,6 +50,7 @@ import { HiOutlineX, HiDotsVertical } from 'react-icons/hi'
 import { protectString } from '@shared/models'
 import { PERIPHERAL_KEYBOARD } from '../models/project/Peripheral'
 import { ElectronApi } from './api/ElectronApi'
+import { MappingsContext } from '$contexts/Mappings'
 
 /**
  * Used to remove unnecessary cruft from error messages.
@@ -692,45 +693,50 @@ export const App = observer(function App() {
 										<HomePage project={project} />
 									</ErrorBoundary>
 								) : (
-									<div
-										className="rundown-area"
-										style={{
-											gridTemplateColumns:
-												store.guiStore.mainAreaWidth !== undefined
-													? `${store.guiStore.mainAreaWidth * 100}vw 0.4rem 1fr`
-													: undefined,
-										}}
-									>
+									<MappingsContext.Provider value={project.mappings}>
 										<div
-											className="main-area"
+											className="rundown-area"
 											style={{
-												minWidth:
-													store.guiStore.mainAreaWidth !== undefined ? 'auto' : undefined,
+												gridTemplateColumns:
+													store.guiStore.mainAreaWidth !== undefined
+														? `${store.guiStore.mainAreaWidth * 100}vw 0.4rem 1fr`
+														: undefined,
 											}}
 										>
-											<ErrorBoundary>
-												<RundownView mappings={project.mappings} />
-											</ErrorBoundary>
-										</div>
-										<div className="movable-separator">
-											<div className="movable-separator-content" onMouseDown={handleClickResizer}>
-												<div className="movable-separator-icon">
-													<HiDotsVertical />
+											<div
+												className="main-area"
+												style={{
+													minWidth:
+														store.guiStore.mainAreaWidth !== undefined ? 'auto' : undefined,
+												}}
+											>
+												<ErrorBoundary>
+													<RundownView />
+												</ErrorBoundary>
+											</div>
+											<div className="movable-separator">
+												<div
+													className="movable-separator-content"
+													onMouseDown={handleClickResizer}
+												>
+													<div className="movable-separator-icon">
+														<HiDotsVertical />
+													</div>
 												</div>
 											</div>
+											<div
+												className="side-bar"
+												style={{
+													minWidth:
+														store.guiStore.mainAreaWidth !== undefined ? 'auto' : undefined,
+												}}
+											>
+												<ErrorBoundary>
+													<Sidebar />
+												</ErrorBoundary>
+											</div>
 										</div>
-										<div
-											className="side-bar"
-											style={{
-												minWidth:
-													store.guiStore.mainAreaWidth !== undefined ? 'auto' : undefined,
-											}}
-										>
-											<ErrorBoundary>
-												<Sidebar mappings={project.mappings} />
-											</ErrorBoundary>
-										</div>
-									</div>
+									</MappingsContext.Provider>
 								)}
 								<ErrorBoundary>
 									<ConfirmationDialog

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

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { store } from '../../../mobx/store'
 import { ProjectPage } from './projectPage/ProjectPage'
 import { ProjectPageMenubar } from './projectPageMenubar/ProjectPageMenubar'
-import { HomePageId } from 'src/react/mobx/GuiStore'
+import { HomePageId } from '@/react/mobx/GuiStore'
 import { BridgesPage } from './bridgesPage/BridgesPage'
 import { LayersPage } from './layersPage/LayersPage'
 import { ApplicationActionsPage } from './ApplicationActionsPage/ApplicationActionsPage'

apps/app/src/react/components/pages/homePage/deviceShorcut/DeviceShortcut.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BridgeDevice } from 'src/models/project/Bridge'
+import { BridgeDevice } from '@/models/project/Bridge'
 import { DeviceType } from 'timeline-state-resolver-types'
 import { DeviceIcon } from '../deviceIcon/DeviceIcon'
 import { StatusCircle } from '../scList/StatusCircle'

apps/app/src/react/components/rundown/RundownView.tsx

@@ -1,25 +1,27 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import sorensen from '@sofie-automation/sorensen'
 import { GroupView } from './GroupView/GroupView'
-import { IPCServerContext } from '../../contexts/IPCServer'
+import { IPCServerContext } from '$contexts/IPCServer'
 import { useDrop } from 'react-dnd'
-import { DragItemTypes, isPartDragItem, isResourceDragItem } from '../../api/DragItemTypes'
-import { Mappings } from 'timeline-state-resolver-types'
+import { DragItemTypes, isPartDragItem, isResourceDragItem } from '$api/DragItemTypes'
 import { PartPropertiesDialog } from './PartPropertiesDialog'
 import { GroupPropertiesDialog } from './GroupPropertiesDialog'
-import { ErrorHandlerContext } from '../../contexts/ErrorHandler'
+import { ErrorHandlerContext } from '$contexts/ErrorHandler'
+import { MappingsContext } from '$contexts/Mappings'
 import { DropZone } from '../util/DropZone'
 import { observer } from 'mobx-react-lite'
-import { store } from '../../mobx/store'
-import { useMemoComputedObject } from '../../mobx/lib'
-import { Btn } from '../inputs/Btn/Btn'
-import { getClassNameFromResource } from '../../../lib/resources'
-import { MoveTarget } from '../../../lib/util'
+import { store } from '$stores/store'
+import { useMemoComputedObject } from '$stores/lib'
+import { Btn } from '$components/inputs/Btn/Btn'
+import { getClassNameFromResource } from '@/lib/resources'
+import { MoveTarget } from '@/lib/util'
 import { ErrorBoundary } from '../util/ErrorBoundary'
 import { assertNever } from '@shared/lib'
-import { CurrentSelectionAny } from '../../../lib/GUI'
+import { CurrentSelectionAny } from '@/lib/GUI'
+
+export const RundownView: React.FC = observer(function RundownView() {
+	const mappings = useContext(MappingsContext)
 
-export const RundownView: React.FC<{ mappings: Mappings }> = observer(function RundownView({ mappings }) {
 	// Drag n' Drop:
 	const wrapperRef = useRef<HTMLDivElement>(null)
 	const [{ handlerId }, drop] = useDrop(

apps/app/src/react/components/sidebar/Sidebar.tsx

@@ -1,16 +1,18 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { SidebarResourceLibrary } from './SidebarResourceLibrary'
 import { SideBarEditTimelineObject } from './SideBarEditTimelineObject'
-import { Project } from '../../../models/project/Project'
 import { store } from '../../mobx/store'
 import { observer } from 'mobx-react-lite'
 import { useMemoComputedObject, useMemoComputedValue } from '../../mobx/lib'
 import { assertNever } from '@shared/lib'
 import { SideBarEditGroup } from './editGroup/SideBarEditGroup'
 import { SideBarEditPart } from './editPart/SideBarEditPart'
 import { ErrorBoundary } from '../util/ErrorBoundary'
+import { MappingsContext } from '$contexts/Mappings'
+
+export const Sidebar: React.FC = observer(function Sidebar() {
+	const mappings = useContext(MappingsContext)
 
-export const Sidebar: React.FC<{ mappings: Project['mappings'] }> = observer(function Sidebar(props) {
 	const currentRundownId = useMemoComputedValue(() => {
 		return store.rundownsStore.currentRundownId
 	}, [])
@@ -159,7 +161,7 @@ export const Sidebar: React.FC<{ mappings: Project['mappings'] }> = observer(fun
 				<SideBarEditTimelineObject
 					rundownId={currentRundownId}
 					timelineObjs={editing.items}
-					mappings={props.mappings}
+					mappings={mappings}
 				/>
 			</ErrorBoundary>
 		)

apps/app/src/react/contexts/Mappings.ts

@@ -0,0 +1,4 @@
+import React from 'react'
+import { Mappings } from 'timeline-state-resolver-types'
+
+export const MappingsContext = React.createContext<Mappings>({} as Mappings)

apps/app/src/react/styles/snackbar.scss

@@ -1,6 +1,5 @@
 div.SnackbarContainer-root {
 	.SnackbarItem-message {
-		padding-top: 1em;
 		p {
 			margin: 0.25em;
 		}

apps/app/tsconfig.json

@@ -4,7 +4,14 @@
 		"rootDir": "src",
 		"outDir": "dist",
 		"jsx": "react",
-		"baseUrl": "./"
+		"baseUrl": "./",
+		"paths": {
+			"@/*": ["./src/*"],
+			"$components/*": ["./src/react/components/*"],
+			"$stores/*": ["./src/react/mobx/*"],
+			"$contexts/*": ["./src/react/contexts/*"],
+			"$api/*": ["./src/react/api/*"]
+		}
 	},
 	"exclude": ["src/**/__tests__/**/*", "dist/**/*"]
 }

apps/app/webpack.react.js

@@ -14,6 +14,10 @@ module.exports = {
 	resolve: {
 		alias: {
 			['@']: path.resolve(__dirname, 'src'),
+			['$components']: path.resolve(__dirname, 'src/react/components'),
+			['$stores']: path.resolve(__dirname, 'src/react/mobx'),
+			['$contexts']: path.resolve(__dirname, 'src/react/contexts'),
+			['$api']: path.resolve(__dirname, 'src/react/api'),
 		},
 		extensions: ['.tsx', '.ts', '.js'],
 		fallback: { url: require.resolve('url/') },

apps/tsr-bridge/package.json

@@ -14,8 +14,8 @@
 		"react:dev": "webpack serve --mode=development",
 		"electron:dev": "nodemon",
 		"dev": "concurrently --kill-others \"yarn react:dev\" \"yarn electron:dev\"",
-		"precommit": "lint-staged",
-		"lint:raw": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx --ignore-pattern dist"
+		"precommit": "run -T lint-staged",
+		"lint:raw": "run -T eslint --ext .ts --ext .js --ext .tsx --ext .jsx --ignore-pattern dist"
 	},
 	"repository": {
 		"type": "git",

lerna.json

@@ -5,6 +5,5 @@
 		"tests/**"
 	],
 	"version": "0.12.0-alpha.5",
-	"npmClient": "yarn",
-	"useWorkspaces": true
+	"npmClient": "yarn"
 }

package.json

@@ -25,18 +25,20 @@
 		"lint:changed": "lerna exec --since head --include-dependents -- eslint . --ext .js,.jsx,.ts,.tsx",
 		"build": "lerna run build",
 		"build:binary": "lerna run build:binary",
-		"build:shared": "lerna run build --stream --scope=@shared/*",
-		"build:shared:changed": "lerna run build --stream --scope=@shared/* --since head --exclude-dependents --stream",
+		"build:shared": "lerna run build --stream --scope='@shared/*'",
+		"build:shared:changed": "lerna run build --stream --scope='@shared/*' --since head --exclude-dependents --stream",
 		"start": "yarn && yarn build:shared && yarn dev:electron",
 		"start:all": "yarn build:shared && lerna run dev --stream",
 		"start:bridge": "yarn build:shared && yarn dev:bridge",
-		"dev:electron": "lerna run dev --stream --scope=superconductor",
-		"dev:bridge": "lerna run dev --stream --scope=tsr-bridge",
+		"dev:electron": "lerna run dev --stream --scope='superconductor'",
+		"dev:bridge": "lerna run dev --stream --scope='tsr-bridge'",
 		"test": "lerna run test",
 		"license-validate": "node scripts/license-check.js",
 		"release:bump": "lerna version --force-publish --no-push",
 		"release:prerelease": "lerna version prerelease --force-publish --no-push",
-		"release:preminor": "lerna version preminor --force-publish --no-push"
+		"release:preminor": "lerna version preminor --force-publish --no-push",
+		"lint-staged": "cd $INIT_CWD && \"$PROJECT_CWD/node_modules/.bin/lint-staged\"",
+		"eslint": "cd $INIT_CWD && \"$PROJECT_CWD/node_modules/.bin/eslint\""
 	},
 	"resolutions": {
 		"prebuild-install": "^7.0.0",
@@ -52,11 +54,12 @@
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"jest": "^29.5.0",
-		"lerna": "^6.0.3",
+		"lerna": "8.1.2",
 		"nexe": "^4.0.0-rc.1",
 		"rimraf": "^3.0.2",
 		"ts-jest": "^29.0.5",
 		"typescript": "^4.9.5"
 	},
-	"prettier": "@sofie-automation/code-standard-preset/.prettierrc.json"
+	"prettier": "@sofie-automation/code-standard-preset/.prettierrc.json",
+	"packageManager": "yarn@3.6.0"
 }

shared/packages/api/package.json

@@ -25,8 +25,8 @@
 	"scripts": {
 		"build": "rimraf dist && yarn build:main",
 		"build:main": "tsc -p tsconfig.json",
-		"precommit": "lint-staged",
-		"lint:raw": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx --ignore-pattern dist"
+		"precommit": "run -T lint-staged",
+		"lint:raw": "run -T eslint --ext .ts --ext .js --ext .tsx --ext .jsx --ignore-pattern dist"
 	},
 	"bugs": {
 		"url": "https://github.com/SuperFlyTV/SuperConductor/issues"