Move app to packages/studio-base/src

.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"
       },

ci/storybook.ts

@@ -75,7 +75,14 @@ export default async function main(): Promise<void> {
   if (args.command.includes(Command.start)) {
     await exec(
       "yarn",
-      ["workspace", "@foxglove/studio-base", "run", "start-storybook"],
+      [
+        "workspace",
+        "@foxglove/studio-base",
+        "run",
+        "start-storybook",
+        "--config-dir",
+        "src/.storybook",
+      ],
       storybookEnv,
     );
     return;
@@ -84,7 +91,14 @@ export default async function main(): Promise<void> {
   if (args.command.includes(Command.build)) {
     await exec(
       "yarn",
-      ["workspace", "@foxglove/studio-base", "run", "build-storybook"],
+      [
+        "workspace",
+        "@foxglove/studio-base",
+        "run",
+        "build-storybook",
+        "--config-dir",
+        "src/.storybook",
+      ],
       storybookEnv,
     );
   }

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",
@@ -35,12 +35,11 @@
     "package:linux": "yarn package --linux",
     "package": "cross-env NODE_OPTIONS='-r ts-node/register' electron-builder build --publish never",
     "release:bump-nightly-version": "node -r ts-node/register ./ci/bump-nightly-version.ts",
-    "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=6144' TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' yarn workspace @foxglove/studio-base run start-storybook",
+    "storybook": "cross-env NODE_OPTIONS='--max-old-space-size=6144' TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' yarn workspace @foxglove/studio-base run start-storybook --config-dir src/.storybook",
     "storybook:ci": "ts-node ./ci/storybook.ts"
   },
   "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

@@ -0,0 +1,28 @@
+{
+  "//": "Note: we use babel-jest rather than ts-jest for performance reasons.",
+  "transform": {
+    "\\.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>/src/test/setup.ts",
+    "<rootDir>/src/test/setupEnzyme.ts",
+    "jest-canvas-mock"
+  ],
+  "setupFilesAfterEnv": ["<rootDir>/src/test/setupTestFramework.ts"],
+  "restoreMocks": true,
+  "moduleNameMapper": {
+    "\\.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",
+  "haste": { "forceNodeFilesystemAPI": true }
+}

app/package.json → packages/studio-base/package.json

@@ -1,9 +1,26 @@
 {
   "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"
+    "storybook:build": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' build-storybook --config-dir src/.storybook"
   },
   "dependencies": {
     "@fluentui/react": "8.16.0",
@@ -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",