chore(repo): make pnpm dev:sandbox work from any directory (#8259)

Author: jacekradko

.changeset/dev-sandbox-anywhere.md

@@ -0,0 +1,2 @@
+---
+---

package.json

@@ -13,7 +13,7 @@
     "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/chrome-extension",
     "dev:fe-libs": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/clerk-js --filter=@clerk/ui",
     "dev:js": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:current --filter=@clerk/clerk-js",
-    "dev:sandbox": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:sandbox",
+    "dev:sandbox": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:sandbox:serve",
     "format": "turbo format && node scripts/format-non-workspace.mjs",
     "format:check": "turbo format:check && node scripts/format-non-workspace.mjs --check",
     "preinstall": "npx only-allow pnpm",

packages/clerk-js/package.json

@@ -67,7 +67,8 @@
     "clean": "rimraf ./dist",
     "dev": "rspack serve --config rspack.config.js",
     "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",
-    "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
+    "dev:sandbox": "pnpm -w dev:sandbox",
+    "dev:sandbox:serve": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint": "eslint src",

packages/clerk-js/playwright.config.ts

@@ -47,7 +47,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: `PORT=${PORT} pnpm dev:sandbox`,
+    command: `PORT=${PORT} pnpm dev:sandbox:serve`,
     url: `http://localhost:${PORT}`,
     reuseExistingServer: !process.env.CI,
   },

packages/clerk-js/sandbox/README.md

@@ -4,7 +4,7 @@ This folder contains a sandbox environment for iterating on the Clerk UI compone
 
 ## Running the sandbox
 
-You can start the sandbox by running `pnpm dev:sandbox` **in the root of the `javascript` repo**. This will start the server on <a href="http://localhost:4000"><code>http://localhost:4000</code></a>. It will also run the development server for `@clerk/ui`.
+You can start the sandbox by running `pnpm dev:sandbox` from anywhere in the `javascript` repo. This will start the server on <a href="http://localhost:4000"><code>http://localhost:4000</code></a>. It will also run the development server for `@clerk/ui`.
 
 ## Setting component props
 

packages/clerk-js/turbo.json

@@ -25,7 +25,7 @@
       "inputs": ["sandbox/**"],
       "outputs": ["dist/**"]
     },
-    "dev:sandbox": {
+    "dev:sandbox:serve": {
       "cache": false,
       "dependsOn": ["build"],
       "persistent": true

packages/ui/package.json

@@ -80,7 +80,8 @@
     "clean": "rimraf ./dist",
     "dev": "rspack serve --config rspack.config.js",
     "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4011}",
-    "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4011",
+    "dev:sandbox": "pnpm -w dev:sandbox",
+    "dev:sandbox:serve": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:4011",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint:attw": "attw --pack . --exclude-entrypoints themes/shadcn.css --profile esm-only",

packages/ui/turbo.json

@@ -1,7 +1,7 @@
 {
   "extends": ["//"],
   "tasks": {
-    "dev:sandbox": {
+    "dev:sandbox:serve": {
       "cache": false,
       "dependsOn": ["build"],
       "persistent": true