Update config

.vscode/launch.json

@@ -18,7 +18,7 @@
       "request": "launch",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "args": ["--runInBand"],
-      "cwd": "${workspaceFolder}/app",
+      "cwd": "${workspaceFolder}",
       "env": {
         "NODE_OPTIONS": "--require ts-node/register"
       },

desktop/main/StudioWindow.ts

@@ -16,7 +16,7 @@ import {
 import path from "path";
 
 import Logger from "@foxglove/log";
-import colors from "@foxglove/studio-base/styles/colors.module.scss";
+import colors from "@foxglove/studio-base/src/styles/colors.module.scss";
 
 import pkgInfo from "../../package.json";
 import getDevModeIcon from "./getDevModeIcon";

desktop/main/telemetry.ts

@@ -6,7 +6,7 @@ import { app } from "electron";
 import fs from "fs";
 import path from "path";
 
-import { AppSetting } from "@foxglove/studio-base/AppSetting";
+import { AppSetting } from "@foxglove/studio-base/src/AppSetting";
 
 function getTelemetrySettings(): [crashReportingEnabled: boolean, telemetryEnabled: boolean] {
   const datastoreDir = path.join(app.getPath("userData"), "studio-datastores", "settings");

desktop/package.json

@@ -2,7 +2,7 @@
   "name": "desktop",
   "private": true,
   "dependencies": {
-    "@foxglove/studio-base": "workspace:app",
+    "@foxglove/studio-base": "workspace:packages/studio-base",
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
   }
 }

desktop/preload/index.ts

@@ -10,7 +10,7 @@ import { join as pathJoin } from "path";
 
 import { PreloaderSockets } from "@foxglove/electron-socket/preloader";
 import Logger from "@foxglove/log";
-import { NetworkInterface, OsContext } from "@foxglove/studio-base/OsContext";
+import { NetworkInterface, OsContext } from "@foxglove/studio-base/src/OsContext";
 
 import pkgInfo from "../../package.json";
 import { Desktop, ForwardedMenuEvent, NativeMenuBridge, Storage } from "../common/types";

docs/fluentui-quickstart.md

@@ -38,7 +38,7 @@ Intellisense/autocomplete and the "header" documentation in .d.ts files is prett
 
 ## Theme
 
-Our theme is configured in [theme/index.ts](../app/theme/index.ts) and provided to components via [ThemeProvider](../app/theme/ThemeProvider.tsx). It has a `palette` of colors as well as some "slots" for [semantic colors](https://docs.microsoft.com/en-us/javascript/api/theme/isemanticcolors?view=office-ui-fabric-react-latest) (such as `buttonBackground`) to customize certain components. You can also configure fonts, spacing, effects, and more in the theme object.
+Our theme is configured in [theme/index.ts](../packages/studio-base/theme/index.ts) and provided to components via [ThemeProvider](../packages/studio-base/theme/ThemeProvider.tsx). It has a `palette` of colors as well as some "slots" for [semantic colors](https://docs.microsoft.com/en-us/javascript/api/theme/isemanticcolors?view=office-ui-fabric-react-latest) (such as `buttonBackground`) to customize certain components. You can also configure fonts, spacing, effects, and more in the theme object.
 
 There's a Theme Designer tool at https://aka.ms/themedesigner. It has limited customization capabilities, but helps you get a feel for what theme colors will look like.
 
@@ -89,11 +89,11 @@ The list of icons can be found at: https://developer.microsoft.com/en-us/fluentu
 
 ### Using a new icon
 
-Since we only import the SVG icons we need, icons must be registered before they are used. This is done in the [ThemeProvider](../app/theme/ThemeProvider.tsx), and there is a corresponding type definition tracking the `RegisteredIconNames` at [fluentui.d.ts](../typings/fluentui.d.ts). The TypeScript compiler will prompt you to update both of these places before you can use a new icon.
+Since we only import the SVG icons we need, icons must be registered before they are used. This is done in the [ThemeProvider](../packages/studio-base/theme/ThemeProvider.tsx), and there is a corresponding type definition tracking the `RegisteredIconNames` at [fluentui.d.ts](../typings/fluentui.d.ts). The TypeScript compiler will prompt you to update both of these places before you can use a new icon.
 
 ### Custom SVG icons
 
-You can make a custom SVG icon conform to the Fluent UI theme by using `createSvgIcon()`. See [RosIcon.tsx](../app/components/RosIcon.tsx) for an example.
+You can make a custom SVG icon conform to the Fluent UI theme by using `createSvgIcon()`. See [RosIcon.tsx](../packages/studio-base/components/RosIcon.tsx) for an example.
 
 ```tsx
 import { createSvgIcon } from "@fluentui/react-icons-mdl2";

jest.config.json

@@ -1,7 +1,6 @@
 {
   "//": "Our top level jest config to reference all the projects under our monorepo. We exclude the desktop test since it involves performing a webpack build and doesn't support 'watch' or 'debug' in the same way",
   "projects": [
-    "<rootDir>/app/jest.config.json",
     "<rootDir>/ci/jest.config.json",
     "<rootDir>/packages/*/jest.config.json",
     "<rootDir>/packages/@foxglove/*/jest.config.json"

package.json

@@ -16,7 +16,7 @@
   },
   "homepage": "https://foxglove.dev/",
   "scripts": {
-    "clean": "tsc --build --clean packages/*/tsconfig.json && rimraf .webpack dist app/storybook-screenshots app/storybook-static",
+    "clean": "tsc --build --clean packages/*/tsconfig.json && rimraf .webpack dist packages/studio-base/storybook-screenshots packages/studio-base/storybook-static",
     "clean:package": "yarn && yarn clean && yarn build:prod && yarn package",
     "start": "electron desktop/.webpack",
     "build:packages": "tsc --build --verbose packages/**/tsconfig.json",
@@ -40,7 +40,6 @@
   },
   "workspaces": {
     "packages": [
-      "app",
       "desktop",
       "packages/**",
       "web"

packages/@foxglove/studio-firebase/package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@foxglove/hooks": "workspace:packages/@foxglove/hooks",
     "@foxglove/log": "workspace:packages/log",
-    "@foxglove/studio-base": "workspace:app",
+    "@foxglove/studio-base": "workspace:packages/studio-base",
     "firebase": "9.0.0-beta.1"
   }
 }

packages/@foxglove/studio-firebase/tsconfig.json

@@ -7,5 +7,5 @@
     "lib": ["dom", "dom.iterable", "es2020"],
     "jsx": "react-jsx"
   },
-  "references": [{ "path": "../hooks" }]
+  "references": [{ "path": "../hooks" }, { "path": "../../studio-base" }]
 }

packages/studio-base/jest.config.json

@@ -1,21 +1,26 @@
 {
   "//": "Note: we use babel-jest rather than ts-jest for performance reasons.",
   "transform": {
-    "\\.tsx?$": "<rootDir>/test/transformers/typescriptTransformerWithRawImports.js",
-    "\\.ne$": "<rootDir>/test/transformers/neTransformer.js",
-    "\\.(bin|template|wasm)$": "<rootDir>/test/transformers/rawTransformer.js"
+    "\\.tsx?$": "<rootDir>/src/test/transformers/typescriptTransformerWithRawImports.js",
+    "\\.ne$": "<rootDir>/src/test/transformers/neTransformer.js",
+    "\\.(bin|template|wasm)$": "<rootDir>/src/test/transformers/rawTransformer.js"
   },
   "globals": {
     "ReactNull": null
   },
-  "setupFiles": ["<rootDir>/test/setup.ts", "<rootDir>/test/setupEnzyme.ts", "jest-canvas-mock"],
-  "setupFilesAfterEnv": ["<rootDir>/test/setupTestFramework.ts"],
+  "setupFiles": [
+    "<rootDir>/src/test/setup.ts",
+    "<rootDir>/src/test/setupEnzyme.ts",
+    "jest-canvas-mock"
+  ],
+  "setupFilesAfterEnv": ["<rootDir>/src/test/setupTestFramework.ts"],
   "restoreMocks": true,
   "moduleNameMapper": {
-    "\\.svg$": "<rootDir>/test/mocks/MockSvg.tsx",
-    "react-monaco-editor": "<rootDir>/test/stubs/MonacoEditor.tsx",
-    "\\.(glb|md|png)$": "<rootDir>/test/mocks/fileMock.ts",
-    "\\.(css|scss)$": "<rootDir>/test/mocks/styleMock.ts"
+    "\\.svg$": "<rootDir>/src/test/mocks/MockSvg.tsx",
+    "react-monaco-editor": "<rootDir>/src/test/stubs/MonacoEditor.tsx",
+    "\\.(glb|md|png)$": "<rootDir>/src/test/mocks/fileMock.ts",
+    "\\.(css|scss)$": "<rootDir>/src/test/mocks/styleMock.ts",
+    "@foxglove/studio-base/(.*)": "<rootDir>/src/$1"
   },
   "testRunner": "jest-circus/runner",
   "//": "Native find is slow because it does not exclude files: https://github.com/facebook/jest/pull/11264#issuecomment-825377579",

packages/studio-base/package.json

@@ -1,6 +1,23 @@
 {
   "name": "@foxglove/studio-base",
+  "version": "0.0.1",
+  "description": "Core components of Foxglove Studio",
+  "license": "MPL-2.0",
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/foxglove/studio.git"
+  },
+  "author": {
+    "name": "Foxglove Technologies",
+    "email": "support@foxglove.dev"
+  },
+  "homepage": "https://foxglove.dev/",
+  "main": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name storybook:build --exit-once-uploaded",
     "storybook:build": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' build-storybook"
@@ -83,7 +100,7 @@
     "@storybook/addon-actions": "6.2.9",
     "@storybook/addon-essentials": "6.2.9",
     "@storybook/builder-webpack5": "6.2.9",
-    "@storybook/react": "patch:@storybook/react@6.2.9#../patches/storybook-react.patch",
+    "@storybook/react": "patch:@storybook/react@6.2.9#../../patches/storybook-react.patch",
     "@testing-library/dom": "7.31.0",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.0",

packages/studio-base/tsconfig.json

@@ -1,14 +1,13 @@
 {
   "extends": "@foxglove/tsconfig/tsconfig.base.json",
-  "include": ["./**/*", "./**/*.json", "./.storybook/**/*", "../package.json"],
+  "include": ["./src/**/*", "./src/**/*.json", "./src/.storybook/**/*", "../package.json"],
   "compilerOptions": {
-    "noEmit": true,
-    "rootDir": "../",
+    "rootDir": "./src",
+    "outDir": "./dist",
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "es2020"],
     "paths": {
-      // This is only needed for vscode import suggestions
-      "@foxglove/studio-base/*": ["./*"]
+      "@foxglove/studio-base/*": ["./src/*"]
     }
   }
 }

packages/studio-base/webpack.ts

@@ -43,6 +43,7 @@ export function makeConfig(
     resolve: {
       extensions: [".js", ".ts", ".jsx", ".tsx"],
       alias: {
+        "@foxglove/studio-base": path.resolve(__dirname, "src"),
         "react-dnd": require.resolve("react-dnd"),
         "styled-components": require.resolve("styled-components"),
       },
@@ -218,6 +219,9 @@ export function makeConfig(
             compilerOptions: {
               noUnusedLocals: !allowUnusedVariables,
               noUnusedParameters: !allowUnusedVariables,
+              paths: {
+                "@foxglove/studio-base/*": [path.join(__dirname, "src/*")],
+              },
             },
           },
         },

tsconfig.eslint.json

@@ -17,10 +17,12 @@
 // https://github.com/typescript-eslint/typescript-eslint/issues/1192#issuecomment-846491212
 {
   "extends": "@foxglove/tsconfig/tsconfig.base.json",
-  "include": ["**/*", "app/.storybook/**/*"],
-  "exclude": ["node_modules"],
+  "include": ["**/*", "packages/studio-base/src/.storybook/**/*"],
   "compilerOptions": {
+    "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "es2020"],
-    "jsx": "react-jsx"
+    "paths": {
+      "@foxglove/studio-base/*": ["./packages/studio-base/src/*"]
+    }
   }
 }

web/package.json

@@ -7,7 +7,7 @@
     "build:prod": "webpack --mode production --progress"
   },
   "dependencies": {
-    "@foxglove/studio-base": "workspace:app",
+    "@foxglove/studio-base": "workspace:packages/studio-base",
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
   },
   "devDependencies": {

web/webpack.config.ts

@@ -6,7 +6,6 @@ import ReactRefreshPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import SentryWebpackPlugin from "@sentry/webpack-plugin";
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
 import CopyPlugin from "copy-webpack-plugin";
-import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import path from "path";
 import { Configuration, EnvironmentPlugin, WebpackPluginInstance } from "webpack";
@@ -116,11 +115,6 @@ const mainConfig = (env: unknown, argv: WebpackArgv): Configuration => {
           appId: "1:667544771216:web:f8e6d9705a3c28e73a5615",
         }),
       }),
-      new ForkTsCheckerWebpackPlugin({
-        typescript: {
-          configFile: "src/tsconfig.json",
-        },
-      }),
       new CopyPlugin({
         patterns: [{ from: "public" }],
       }),

yarn.lock

@@ -2666,9 +2666,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@foxglove/studio-base@workspace:app":
+"@foxglove/studio-base@workspace:packages/studio-base":
   version: 0.0.0-use.local
-  resolution: "@foxglove/studio-base@workspace:app"
+  resolution: "@foxglove/studio-base@workspace:packages/studio-base"
   dependencies:
     "@fluentui/react": 8.16.0
     "@fluentui/react-icons-mdl2": 1.1.1
@@ -2681,7 +2681,7 @@ __metadata:
     "@storybook/addon-actions": 6.2.9
     "@storybook/addon-essentials": 6.2.9
     "@storybook/builder-webpack5": 6.2.9
-    "@storybook/react": "patch:@storybook/react@6.2.9#../patches/storybook-react.patch"
+    "@storybook/react": "patch:@storybook/react@6.2.9#../../patches/storybook-react.patch"
     "@testing-library/dom": 7.31.0
     "@testing-library/react": 11.2.7
     "@testing-library/react-hooks": 7.0.0
@@ -2813,7 +2813,7 @@ __metadata:
   dependencies:
     "@foxglove/hooks": "workspace:packages/@foxglove/hooks"
     "@foxglove/log": "workspace:packages/log"
-    "@foxglove/studio-base": "workspace:app"
+    "@foxglove/studio-base": "workspace:packages/studio-base"
     firebase: 9.0.0-beta.1
     typescript: 4.3.2
   languageName: unknown
@@ -4750,9 +4750,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@patch:@storybook/react@6.2.9#../patches/storybook-react.patch::locator=%40foxglove%2Fstudio-base%40workspace%3Aapp":
+"@storybook/react@patch:@storybook/react@6.2.9#../../patches/storybook-react.patch::locator=%40foxglove%2Fstudio-base%40workspace%3Apackages%2Fstudio-base":
   version: 6.2.9
-  resolution: "@storybook/react@patch:@storybook/react@npm%3A6.2.9#../patches/storybook-react.patch::version=6.2.9&hash=969b8b&locator=%40foxglove%2Fstudio-base%40workspace%3Aapp"
+  resolution: "@storybook/react@patch:@storybook/react@npm%3A6.2.9#../../patches/storybook-react.patch::version=6.2.9&hash=969b8b&locator=%40foxglove%2Fstudio-base%40workspace%3Apackages%2Fstudio-base"
   dependencies:
     "@babel/preset-flow": ^7.12.1
     "@babel/preset-react": ^7.12.10
@@ -10848,7 +10848,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "desktop@workspace:desktop"
   dependencies:
-    "@foxglove/studio-base": "workspace:app"
+    "@foxglove/studio-base": "workspace:packages/studio-base"
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
   languageName: unknown
   linkType: soft
@@ -26397,7 +26397,7 @@ typescript@4.3.2:
   version: 0.0.0-use.local
   resolution: "web@workspace:web"
   dependencies:
-    "@foxglove/studio-base": "workspace:app"
+    "@foxglove/studio-base": "workspace:packages/studio-base"
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
     "@types/copy-webpack-plugin": 8.0.0
     copy-webpack-plugin: 9.0.0