Merge pull request #66 from microsoft/task/turbo

Use Turborepo
2022-05-23 14:24:30 -07:00 · 2022-05-23 14:24:30 -07:00 · 5304d82df8
--- a/.eslintrc
+++ b/.eslintrc
@ -10,13 +10,5 @@
 		"@typescript-eslint/no-unsafe-argument": 0,
 		"@typescript-eslint/no-unsafe-assignment": 0,
 		"@typescript-eslint/no-unsafe-return": 0
-	},
-	"overrides": [
-		{
-			"files": ["packages/webapp/**"],
-			"rules": {
-				"import/extensions": "off"
-			}
-		}
-	]
+	}
 }
--- a/.gitignore
+++ b/.gitignore
@ -6,6 +6,7 @@ packages/*/lib/
 packages/*/dist/
 packages/*/build/
 packages/*/docsTemp/
+packages/*/.turbo/

 # testing
 /coverage
--- a/.yarn/versions/14e34997.yml
+++ b/.yarn/versions/14e34997.yml
@ -0,0 +1,8 @@
+declined:
+  - "@thematic/color"
+  - "@thematic/core"
+  - "@thematic/d3"
+  - "@thematic/fluent"
+  - "@thematic/react"
+  - "@thematic/vega"
+  - "@thematic/webapp"
--- a/package.json
+++ b/package.json
@ -5,19 +5,14 @@
 	"scripts": {
 		"preinstall": "npx only-allow yarn",
 		"postinstall": "husky install",
-		"clean": "yarn workspaces foreach -pv run clean",
-		"bundle": "yarn workspaces foreach -pv run bundle",
-		"build": "yarn workspaces foreach -pivt run build",
-		"start": "yarn workspaces foreach -piv run start",
-		"publish": "yarn workspaces foreach --exclude '@thematic/root' -pv npm publish --tolerate-republish --access public",
-		"version": "yarn workspaces foreach --exclude '@thematic/root' -iv version -d",
-		"lint": "essex lint --fix --strict",
+		"clean": "turbo run clean",
+		"build": "turbo run build",
+		"bundle": "turbo run bundle",
+		"lint": "turbo run lint",
+		"test": "turbo run test",
+		"publish": "turbo run release",
 		"prettify": "essex prettify",
-		"test": "yarn jest",
-		"jest": "NODE_OPTIONS=--experimental-vm-modules yarn node $(yarn bin jest) --runInBand",
-		"jest_coverage": "yarn jest --coverage",
-		"git-is-clean": "essex git-is-clean",
-		"ci": "run-s lint build bundle jest_coverage git-is-clean",
+		"ci": "turbo run ci && essex git-is-clean",
 		"release": "run-s clean build publish"
 	},
 	"workspaces": {
@ -26,12 +21,12 @@
 		]
 	},
 	"devDependencies": {
-		"@essex/eslint-config": "^20.3.4",
-		"@essex/jest-config": "^21.0.10",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/jest-config": "^21.0.11",
 		"@essex/prettier-config": "^18.0.2",
-		"@essex/scripts": "^22.0.1",
-		"@types/jest": "^27.5.0",
-		"@types/node": "^17.0.31",
+		"@essex/scripts": "^22.0.3",
+		"@types/jest": "^27.5.1",
+		"@types/node": "^17.0.35",
 		"eslint": "^8.14.0",
 		"husky": "^7.0.4",
 		"jest": "^28.0.3",
@ -40,6 +35,7 @@
 		"react": "^18.1.0",
 		"react-dom": "^18.1.0",
 		"regenerator-runtime": "^0.13.9",
+		"turbo": "^1.2.11",
 		"typescript": "^4.6.4"
 	},
 	"prettier": "@essex/prettier-config",
--- a/packages/color/.eslintrc
+++ b/packages/color/.eslintrc
@ -0,0 +1,14 @@
+{
+	"extends": "@essex/eslint-config",
+	"rules": {
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+
+		// TODO: re-neable
+		"@typescript-eslint/no-unsafe-call": 0,
+		"@typescript-eslint/no-unsafe-member-access": 0,
+		"@typescript-eslint/no-unsafe-argument": 0,
+		"@typescript-eslint/no-unsafe-assignment": 0,
+		"@typescript-eslint/no-unsafe-return": 0
+	}
+}
--- a/packages/color/jest.config.js
+++ b/packages/color/jest.config.js
@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+import { configure } from '@essex/jest-config'
+const configuration = configure()
+export default configuration
--- a/packages/color/package.json
+++ b/packages/color/package.json
@ -16,7 +16,9 @@
 	},
 	"scripts": {
 		"clean": "essex clean",
-		"build": "essex build --docs"
+		"build": "essex build --docs",
+		"release": "yarn npm publish --tolerate-republish --access public",
+		"lint": "essex lint --fix"
 	},
 	"dependencies": {
 		"chroma-js": "^2.4.2",
@ -24,11 +26,13 @@
 		"hsluv": "^0.1.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^22.0.1",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/jest-config": "^21.0.11",
+		"@essex/scripts": "^22.0.3",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/chroma-js": "^2.1.3",
-		"@types/jest": "^27.5.0",
-		"@types/node": "^17.0.31"
+		"@types/jest": "^27.5.1",
+		"@types/node": "^17.0.35"
 	},
 	"peerDependencies": {
 		"@types/chroma-js": "*",
--- a/packages/core/.eslintrc
+++ b/packages/core/.eslintrc
@ -0,0 +1,14 @@
+{
+	"extends": "@essex/eslint-config",
+	"rules": {
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+
+		// TODO: re-neable
+		"@typescript-eslint/no-unsafe-call": 0,
+		"@typescript-eslint/no-unsafe-member-access": 0,
+		"@typescript-eslint/no-unsafe-argument": 0,
+		"@typescript-eslint/no-unsafe-assignment": 0,
+		"@typescript-eslint/no-unsafe-return": 0
+	}
+}
--- a/packages/core/jest.config.js
+++ b/packages/core/jest.config.js
@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+import { configure } from '@essex/jest-config'
+const configuration = configure()
+export default configuration
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -16,7 +16,10 @@
 	},
 	"scripts": {
 		"clean": "essex clean",
-		"build": "essex build --skipExportCheck --docs"
+		"build": "essex build --skipExportCheck --docs",
+		"release": "yarn npm publish --tolerate-republish --access public",
+		"test": "NODE_OPTIONS=--experimental-vm-modules yarn node $(yarn bin jest) --runInBand",
+		"lint": "essex lint --fix"
 	},
 	"dependencies": {
 		"@thematic/color": "workspace:^",
@ -25,13 +28,16 @@
 		"murmurhash-js": "^1.0.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^22.0.1",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/jest-config": "^21.0.11",
+		"@essex/scripts": "^22.0.3",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/d3-scale": "^4.0.2",
-		"@types/jest": "^27.5.0",
+		"@types/jest": "^27.5.1",
 		"@types/lodash-es": "^4.17.6",
 		"@types/murmurhash-js": "^1.0.3",
-		"@types/node": "^17.0.31",
+		"@types/node": "^17.0.35",
+		"jest": "^28.1.0",
 		"npm-run-all": "^4.1.5"
 	},
 	"peerDependencies": {
--- a/packages/d3/.eslintrc
+++ b/packages/d3/.eslintrc
@ -0,0 +1,14 @@
+{
+	"extends": "@essex/eslint-config",
+	"rules": {
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+
+		// TODO: re-neable
+		"@typescript-eslint/no-unsafe-call": 0,
+		"@typescript-eslint/no-unsafe-member-access": 0,
+		"@typescript-eslint/no-unsafe-argument": 0,
+		"@typescript-eslint/no-unsafe-assignment": 0,
+		"@typescript-eslint/no-unsafe-return": 0
+	}
+}
--- a/packages/d3/package.json
+++ b/packages/d3/package.json
@ -16,7 +16,9 @@
 	},
 	"scripts": {
 		"clean": "essex clean",
-		"build": "essex build --skipExportCheck --docs"
+		"build": "essex build --skipExportCheck --docs",
+		"release": "yarn npm publish --tolerate-republish --access public",
+		"lint": "essex lint --fix"
 	},
 	"dependencies": {
 		"@thematic/core": "workspace:^",
@ -24,11 +26,12 @@
 		"d3-selection": "^3.0.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^22.0.1",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/scripts": "^22.0.3",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/d3-axis": "^3.0.1",
 		"@types/d3-selection": "^3.0.2",
-		"@types/node": "^17.0.31"
+		"@types/node": "^17.0.35"
 	},
 	"peerDependencies": {
 		"@types/d3-axis": ">= 1",
--- a/packages/fluent/.eslintrc
+++ b/packages/fluent/.eslintrc
@ -0,0 +1,14 @@
+{
+	"extends": "@essex/eslint-config",
+	"rules": {
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+
+		// TODO: re-neable
+		"@typescript-eslint/no-unsafe-call": 0,
+		"@typescript-eslint/no-unsafe-member-access": 0,
+		"@typescript-eslint/no-unsafe-argument": 0,
+		"@typescript-eslint/no-unsafe-assignment": 0,
+		"@typescript-eslint/no-unsafe-return": 0
+	}
+}
--- a/packages/fluent/jest.config.js
+++ b/packages/fluent/jest.config.js
@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+import { configure } from '@essex/jest-config'
+const configuration = configure()
+export default configuration
--- a/packages/fluent/package.json
+++ b/packages/fluent/package.json
@ -16,7 +16,10 @@
 	},
 	"scripts": {
 		"clean": "essex clean",
-		"build": "essex build --skipExportCheck --docs"
+		"build": "essex build --skipExportCheck --docs",
+		"release": "yarn npm publish --tolerate-republish --access public",
+		"test": "NODE_OPTIONS=--experimental-vm-modules yarn node $(yarn bin jest) --runInBand",
+		"lint": "essex lint --fix"
 	},
 	"dependencies": {
 		"@thematic/color": "workspace:^",
@ -25,15 +28,18 @@
 		"d3-scale": "^4.0.2"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^22.0.1",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/jest-config": "^21.0.11",
+		"@essex/scripts": "^22.0.3",
 		"@essex/tsconfig-base": "^1.0.2",
-		"@fluentui/font-icons-mdl2": "^8.3.2",
-		"@fluentui/react": "^8.67.2",
+		"@fluentui/font-icons-mdl2": "^8.4.0",
+		"@fluentui/react": "^8.68.4",
 		"@types/chroma-js": "^2.1.3",
 		"@types/d3-scale": "^4.0.2",
-		"@types/node": "^17.0.31",
-		"@types/react": "^18.0.8",
+		"@types/node": "^17.0.35",
+		"@types/react": "^18.0.9",
 		"chroma-js": "^2.4.2",
+		"jest": "^28.1.0",
 		"react": "^18.1.0"
 	},
 	"peerDependencies": {
--- a/packages/react/.eslintrc
+++ b/packages/react/.eslintrc
@ -0,0 +1,14 @@
+{
+	"extends": "@essex/eslint-config",
+	"rules": {
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+
+		// TODO: re-neable
+		"@typescript-eslint/no-unsafe-call": 0,
+		"@typescript-eslint/no-unsafe-member-access": 0,
+		"@typescript-eslint/no-unsafe-argument": 0,
+		"@typescript-eslint/no-unsafe-assignment": 0,
+		"@typescript-eslint/no-unsafe-return": 0
+	}
+}
--- a/packages/react/package.json
+++ b/packages/react/package.json
@ -16,17 +16,20 @@
 	},
 	"scripts": {
 		"clean": "essex clean",
-		"build": "essex build --skipExportCheck --docs"
+		"build": "essex build --skipExportCheck --docs",
+		"release": "yarn npm publish --tolerate-republish --access public",
+		"lint": "essex lint --fix"
 	},
 	"dependencies": {
 		"@thematic/color": "workspace:^",
 		"@thematic/core": "workspace:^"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^22.0.1",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/scripts": "^22.0.3",
 		"@essex/tsconfig-base": "^1.0.2",
-		"@types/node": "^17.0.31",
-		"@types/react": "^18.0.8",
+		"@types/node": "^17.0.35",
+		"@types/react": "^18.0.9",
 		"react": "^18.1.0"
 	},
 	"peerDependencies": {
--- a/packages/vega/.eslintrc
+++ b/packages/vega/.eslintrc
@ -0,0 +1,14 @@
+{
+	"extends": "@essex/eslint-config",
+	"rules": {
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+
+		// TODO: re-neable
+		"@typescript-eslint/no-unsafe-call": 0,
+		"@typescript-eslint/no-unsafe-member-access": 0,
+		"@typescript-eslint/no-unsafe-argument": 0,
+		"@typescript-eslint/no-unsafe-assignment": 0,
+		"@typescript-eslint/no-unsafe-return": 0
+	}
+}
--- a/packages/vega/jest.config.js
+++ b/packages/vega/jest.config.js
@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+import { configure } from '@essex/jest-config'
+const configuration = configure()
+export default configuration
--- a/packages/vega/package.json
+++ b/packages/vega/package.json
@ -16,15 +16,21 @@
 	},
 	"scripts": {
 		"clean": "essex clean",
-		"build": "essex build --skipExportCheck --docs"
+		"build": "essex build --skipExportCheck --docs",
+		"release": "yarn npm publish --tolerate-republish --access public",
+		"test": "NODE_OPTIONS=--experimental-vm-modules yarn node $(yarn bin jest) --runInBand",
+		"lint": "essex lint --fix"
 	},
 	"dependencies": {
 		"@thematic/core": "workspace:^"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^22.0.1",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/jest-config": "^21.0.11",
+		"@essex/scripts": "^22.0.3",
 		"@essex/tsconfig-base": "^1.0.2",
-		"@types/node": "^17.0.31",
+		"@types/node": "^17.0.35",
+		"jest": "^28.1.0",
 		"vega": "4.4.0"
 	},
 	"peerDependencies": {
--- a/packages/webapp/.eslintrc
+++ b/packages/webapp/.eslintrc
@ -0,0 +1,27 @@
+{
+	"extends": "@essex/eslint-config",
+	"rules": {
+		"@typescript-eslint/no-explicit-any": 0,
+		"@typescript-eslint/no-non-null-assertion": 0,
+
+		// TODO: re-neable
+		"@typescript-eslint/no-unsafe-call": 0,
+		"@typescript-eslint/no-unsafe-member-access": 0,
+		"@typescript-eslint/no-unsafe-argument": 0,
+		"@typescript-eslint/no-unsafe-assignment": 0,
+		"@typescript-eslint/no-unsafe-return": 0,
+
+		"@essex/extensions": [
+			"error",
+			[
+				{
+					"files": ["**/*.{ts,tsx,mts,js,jsx,mjs}"],
+					"ignorePackages": true,
+					"relativeModulePrefixes": ["./"],
+					"expectedExtensions": [".js", ".css", ".json"],
+					"disallowedExtensions": []
+				}
+			]
+		]
+	}
+}
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@ -9,7 +9,8 @@
 		"clean": "essex clean",
 		"build": "tsc -b . && essex bundle",
 		"start": "essex serve",
-		"start:webapp": "yarn start"
+		"start:webapp": "yarn start",
+		"lint": "essex lint --fix"
 	},
 	"repository": {
 		"type": "git",
@ -17,8 +18,8 @@
 		"directory": "packages/webapp"
 	},
 	"dependencies": {
-		"@fluentui/font-icons-mdl2": "^8.3.2",
-		"@fluentui/react": "^8.67.2",
+		"@fluentui/font-icons-mdl2": "^8.4.0",
+		"@fluentui/react": "^8.68.4",
 		"@thematic/color": "workspace:^",
 		"@thematic/core": "workspace:^",
 		"@thematic/d3": "workspace:^",
@ -34,15 +35,16 @@
 		"vega": "4.4.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^22.0.1",
+		"@essex/eslint-config": "^20.3.5",
+		"@essex/scripts": "^22.0.3",
 		"@essex/tsconfig-base": "^1.0.2",
-		"@essex/webpack-config": "^21.0.2",
+		"@essex/webpack-config": "^21.0.3",
 		"@types/d3-axis": "^3.0.1",
 		"@types/d3-scale": "^4.0.2",
 		"@types/d3-selection": "^3.0.2",
-		"@types/node": "^17.0.31",
-		"@types/react": "^18.0.8",
-		"@types/react-dom": "^18.0.3",
+		"@types/node": "^17.0.35",
+		"@types/react": "^18.0.9",
+		"@types/react-dom": "^18.0.5",
 		"typescript": "^4.6.4"
 	},
 	"browserslist": [
--- a/packages/webapp/src/App/App.tsx
+++ b/packages/webapp/src/App/App.tsx
@ -5,7 +5,7 @@
 import type { FC } from 'react'

 import { MainPage } from '../pages/MainPage/index.js'
-import { DataContext } from './DataContext'
+import { DataContext } from './DataContext.js'
 import { StyleContext } from './StyleContext.js'

 export const App: FC = () => {
--- a/packages/webapp/src/App/StyleContext.tsx
+++ b/packages/webapp/src/App/StyleContext.tsx
@ -7,7 +7,7 @@ import { ApplicationStyles } from '@thematic/react'
 import type { FC, ReactNode } from 'react'
 import { memo } from 'react'

-import { useTheme } from '../state'
+import { useTheme } from '../state/index.js'

 export const StyleContext: FC<{
 	children?: ReactNode
--- a/packages/webapp/src/index.tsx
+++ b/packages/webapp/src/index.tsx
@ -4,7 +4,7 @@
 */
 import { createRoot } from 'react-dom/client'

-import { App } from './App'
+import { App } from './App/index.js'

 function mount(): void {
 	try {
--- a/packages/webapp/src/pages/MainPage/MainPage.tsx
+++ b/packages/webapp/src/pages/MainPage/MainPage.tsx
@ -7,9 +7,10 @@ import './MainPage.css'
 import { useThematic } from '@thematic/react'
 import type { FC } from 'react'

-import { ControlPanel } from './components/ControlPanel/ControlPanel'
-import { ThemeEditor } from './components/ThemeEditor/ThemeEditor'
-import { ThemeViewer } from './components/ThemeViewer/ThemeViewer'
+import { ControlPanel } from './components/ControlPanel/ControlPanel.js'
+import { ThemeEditor } from './components/ThemeEditor/ThemeEditor.js'
+import { ThemeViewer } from './components/ThemeViewer/ThemeViewer.js'
+
 export const MainPage: FC = () => {
 	const theme = useThematic()
 	return (
--- a/packages/webapp/src/pages/MainPage/components/ControlPanel/ControlPanel.base.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ControlPanel/ControlPanel.base.tsx
@ -12,7 +12,7 @@ import { ColorPickerButton } from '@thematic/fluent'
 import type { FC } from 'react'
 import { useCallback, useMemo } from 'react'

-import { EnumDropdown } from '../../../../components/EnumDropdown'
+import { EnumDropdown } from '../../../../components/EnumDropdown.js'

 export interface ControlPanelProps {
 	themes: ThemeListing[]
--- a/packages/webapp/src/pages/MainPage/components/ControlPanel/ControlPanel.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ControlPanel/ControlPanel.tsx
@ -12,8 +12,8 @@ import {
 	useSetTheme,
 	useThemeInfo,
 	useThemes,
-} from '../../../../state'
-import { ControlPanel as ControlPanelBase } from './ControlPanel.base'
+} from '../../../../state/index.js'
+import { ControlPanel as ControlPanelBase } from './ControlPanel.base.js'

 export const ControlPanel = () => {
 	const [drawNodes, setDrawNodes] = useDrawNodes()
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeColors/index.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeColors/index.tsx
@ -8,10 +8,10 @@ import { mark2style, useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { Fragment, useMemo } from 'react'

-import { ApplicationPalette } from './ApplicationPalette'
-import { ColorBand } from './ColorBand'
-import { ColorStrip } from './ColorStrip'
-import { Contrast } from './Contrast'
+import { ApplicationPalette } from './ApplicationPalette.js'
+import { ColorBand } from './ColorBand.js'
+import { ColorStrip } from './ColorStrip.js'
+import { Contrast } from './Contrast.js'

 // this is the same number we use under the hood when constructing the continuous scales,
 // so it makes sense to use here and potentially allow the gradation bands to be visible,
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeEditor.base.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeEditor.base.tsx
@ -7,14 +7,14 @@ import './ThemeEditor.css'
 import { Pivot, PivotItem } from '@fluentui/react'
 import type { FC } from 'react'

-import { ColorPicker } from './panes/ColorPickerPane'
-import { FluentPane } from './panes/FluentPane'
-import { GimpPane } from './panes/GimpPane'
-import { JSONPane } from './panes/JSONPane'
-import { MarkGrid } from './panes/MarksPane'
-import { OfficePane } from './panes/OfficePane'
-import { PowerBIPane } from './panes/PowerBIPane'
-import { ThemeColors } from './ThemeColors'
+import { ColorPicker } from './panes/ColorPickerPane/index.js'
+import { FluentPane } from './panes/FluentPane.js'
+import { GimpPane } from './panes/GimpPane.js'
+import { JSONPane } from './panes/JSONPane.js'
+import { MarkGrid } from './panes/MarksPane/index.js'
+import { OfficePane } from './panes/OfficePane.js'
+import { PowerBIPane } from './panes/PowerBIPane.js'
+import { ThemeColors } from './ThemeColors/index.js'

 export interface ThemeEditorProps {
 	scaleItemCount: number
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeEditor.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/ThemeEditor.tsx
@ -2,8 +2,8 @@
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */
-import { useScaleItemCount } from '../../../../state'
-import { ThemeEditor as ThemeEditorBase } from './ThemeEditor.base'
+import { useScaleItemCount } from '../../../../state/index.js'
+import { ThemeEditor as ThemeEditorBase } from './ThemeEditor.base.js'

 export const ThemeEditor = () => {
 	const [scaleItemCount] = useScaleItemCount()
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/ColorPickerPane/index.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/ColorPickerPane/index.tsx
@ -7,8 +7,8 @@ import './ColorPicker.css'
 import type { Theme } from '@thematic/core'
 import type { FC } from 'react'

-import { useSetTheme } from '../../../../../../state'
-import { ColorSelection } from './ColorSelection'
+import { useSetTheme } from '../../../../../../state/index.js'
+import { ColorSelection } from './ColorSelection.js'

 export interface ColorPickerProps {
 	themeLoaded: (theme: Theme) => void
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/FluentPane.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/FluentPane.tsx
@ -7,8 +7,8 @@ import { useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { useMemo } from 'react'

-import { DownloadLink } from '../../../../../components/DownloadLink'
-import { FluentPalette } from './FluentPalette'
+import { DownloadLink } from '../../../../../components/DownloadLink.js'
+import { FluentPalette } from './FluentPalette.js'

 /**
 * This component hosts the Fluent Theme slots in the style of Thematic.
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/GimpPane.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/GimpPane.tsx
@ -8,7 +8,7 @@ import { useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { useMemo } from 'react'

-import { DownloadLink } from '../../../../../components/DownloadLink'
+import { DownloadLink } from '../../../../../components/DownloadLink.js'
 // the deep nesting of the component requires several layers of size adjustment
 const styles = {
 	root: {
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/JSONPane.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/JSONPane.tsx
@ -6,9 +6,9 @@ import { useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { useMemo } from 'react'

-import { DownloadLink } from '../../../../../components/DownloadLink'
-import { JSONEditor } from '../../../../../components/JSONEditor'
-import { useScaleItemCount } from '../../../../../state'
+import { DownloadLink } from '../../../../../components/DownloadLink.js'
+import { JSONEditor } from '../../../../../components/JSONEditor.js'
+import { useScaleItemCount } from '../../../../../state/index.js'

 export interface JSONPaneProps {
 	scaleItemCount?: number
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/MarksPane/GridCell.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/MarksPane/GridCell.tsx
@ -7,7 +7,13 @@ import { mark2style, useThematic } from '@thematic/react'
 import type { CSSProperties, FC } from 'react'
 import { useMemo } from 'react'

-import { Arc, Circle, Line, Rect, Text } from '../../../../../../components/svg'
+import {
+	Arc,
+	Circle,
+	Line,
+	Rect,
+	Text,
+} from '../../../../../../components/svg/index.js'

 export interface GridCellProps {
 	name: ThemeElementType
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/MarksPane/index.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/MarksPane/index.tsx
@ -10,8 +10,8 @@ import { useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'

-import { EnumButtonBar } from '../../../../../../components/EnumButtonBar'
-import { GridCell } from './GridCell'
+import { EnumButtonBar } from '../../../../../../components/EnumButtonBar.js'
+import { GridCell } from './GridCell.js'

 const SIZE = 30

--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/OfficePane.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/OfficePane.tsx
@ -8,8 +8,8 @@ import { useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { useMemo } from 'react'

-import { DownloadLink } from '../../../../../components/DownloadLink'
-import { OfficePalette } from './OfficePalette'
+import { DownloadLink } from '../../../../../components/DownloadLink.js'
+import { OfficePalette } from './OfficePalette.js'

 export const OfficePane: FC = () => {
 	const theme = useThematic()
--- a/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/PowerBIPane.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeEditor/panes/PowerBIPane.tsx
@ -8,8 +8,8 @@ import { useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { useMemo } from 'react'

-import { DownloadLink } from '../../../../../components/DownloadLink'
-import { PowerBIPalette } from './PowerBIPalette'
+import { DownloadLink } from '../../../../../components/DownloadLink.js'
+import { PowerBIPalette } from './PowerBIPalette.js'

 export const PowerBIPane: FC = () => {
 	const theme = useThematic()
--- a/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx
@ -15,7 +15,7 @@ import { useThematic } from '@thematic/react'
 import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'

-import { useSetTheme } from '../../../../../state'
+import { useSetTheme } from '../../../../../state/index.js'

 export interface FluentControlsComponentProps {
 	themeLoaded: (theme: Theme) => void
--- a/packages/webapp/src/pages/MainPage/components/ThemeViewer/ThemeViewer.base.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeViewer/ThemeViewer.base.tsx
@ -8,11 +8,11 @@ import { Pivot, PivotItem } from '@fluentui/react'
 import type { FC } from 'react'
 import { useMemo } from 'react'

-import type { Graph } from '../../../../types'
-import { D3Chart } from './charts/D3'
-import { charts, VegaChart } from './charts/Vega'
-import { FluentControls } from './FluentControls'
-import { D3Graph } from './graphs/D3'
+import type { Graph } from '../../../../types.js'
+import { D3Chart } from './charts/D3/index.js'
+import { charts, VegaChart } from './charts/Vega/index.js'
+import { FluentControls } from './FluentControls/index.js'
+import { D3Graph } from './graphs/D3/index.js'

 export interface ThemeViewerProps {
 	graph: Graph
--- a/packages/webapp/src/pages/MainPage/components/ThemeViewer/ThemeViewer.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeViewer/ThemeViewer.tsx
@ -7,8 +7,8 @@ import {
 	useDrawLinks,
 	useDrawNodes,
 	useGraph,
-} from '../../../../state'
-import { ThemeViewer as ThemeViewerBase } from './ThemeViewer.base'
+} from '../../../../state/index.js'
+import { ThemeViewer as ThemeViewerBase } from './ThemeViewer.base.js'

 export const ThemeViewer = () => {
 	const [drawNodes] = useDrawNodes()
--- a/packages/webapp/src/pages/MainPage/components/ThemeViewer/graphs/D3/index.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeViewer/graphs/D3/index.tsx
@ -23,8 +23,8 @@ import {
 	useState,
 } from 'react'

-import type { Edge, Graph, Node } from '../../../../../../types'
-import { bounds } from '../../../../../../util/graph'
+import type { Edge, Graph, Node } from '../../../../../../types.js'
+import { bounds } from '../../../../../../util/graph.js'

 export interface GraphProps {
 	graph: Graph
--- a/packages/webapp/src/state/data.ts
+++ b/packages/webapp/src/state/data.ts
@ -4,8 +4,8 @@
 */
 import { atom, useRecoilState } from 'recoil'

-import { graph } from '../data'
-import type { Graph } from '../types'
+import { graph } from '../data/index.js'
+import type { Graph } from '../types.js'

 const graphState = atom<Graph>({
 	key: 'graph',
--- a/packages/webapp/src/state/index.ts
+++ b/packages/webapp/src/state/index.ts
@ -2,6 +2,6 @@
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */
-export * from './data'
-export * from './theme'
-export * from './ui'
+export * from './data.js'
+export * from './theme.js'
+export * from './ui.js'
--- a/turbo.json
+++ b/turbo.json
@ -0,0 +1,34 @@
+{
+	"$schema": "https://turborepo.org/schema.json",
+	"baseBranch": "origin/main",
+	"pipeline": {
+		"clean": {
+			"outputs": ["dist/**", "docsTemp/**"]
+		},
+		"build": {
+			"dependsOn": [],
+			"outputs": ["dist/**", "docsTemp/**"]
+		},
+		"release": {
+			"outputs": []
+		},
+		"test": {
+			"dependsOn": [],
+			"outputs": []
+		},
+		"lint": {
+			"dependsOn": [],
+			"outputs": []
+		},
+		"bundle": {
+			"dependsOn": [],
+			"outputs": ["dist/**", "build/**"]
+		},
+		"ci": {
+			"dependsOn": ["build", "lint", "test", "bundle"]
+		},
+		"dev": {
+			"cache": false
+		}
+	}
+}
--- a/yarn.lock
+++ b/yarn.lock