Type-check Storybook files (#7223)

# Description of Changes
Storybook files aren't currently being type-checked, but they should be.
A bunch of them had a dodgy import in them (which didn't affect anything
because it was just an `import type` but still worth fixing).

.taskfiles/frontend.yml

@@ -388,6 +388,13 @@ tasks:
       - task: typecheck:_run
         vars: { PROJECT: editor/src/portal/tsconfig.json }
 
+  typecheck:storybook:
+    desc: "Typecheck Storybook config and stories"
+    deps: [prepare]
+    cmds:
+      - task: typecheck:_run
+        vars: { PROJECT: .storybook/tsconfig.json }
+
   typecheck:all:
     desc: "Typecheck all build variants"
     cmds:
@@ -399,6 +406,7 @@ tasks:
       - task: typecheck:scripts
       - task: typecheck:prototypes
       - task: typecheck:portal
+      - task: typecheck:storybook
 
   # ============================================================
   # Quality Gate

frontend/.storybook/declarations.d.ts

@@ -1,4 +1,7 @@
-declare module "*.css" {}
+// Shorthand (no body) so it doesn't shadow the editor's `*.module.css`
+// declaration when both are in one program - an empty body would type every
+// CSS-module class as a missing property.
+declare module "*.css";
 
 // Vite `?raw` suffix imports a file's contents as a string (used in preview.tsx
 // to load the English translation TOML synchronously).

frontend/.storybook/tsconfig.json

@@ -1,25 +1,15 @@
 {
-  "compilerOptions": {
-    "target": "es2022",
-    "jsx": "react-jsx",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@app/*": [
-        "../editor/src/desktop/*",
-        "../editor/src/proprietary/*",
-        "../editor/src/core/*"
-      ],
-      "@core/*": ["../editor/src/core/*"],
-      "@proprietary/*": ["../editor/src/proprietary/*"],
-      "@portal/*": ["../editor/src/portal/*"],
-      "@public/*": ["../editor/public/*"]
-    },
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true
-  },
-  "include": ["./**/*"]
+  // Extends the same tsconfig main.ts feeds to vite-tsconfig-paths, so the
+  // alias map can't drift from the one Storybook actually bundles with, and
+  // stories are checked under that resolution (@app/* = proprietary -> core).
+  // The per-layer typecheck projects also cover story files, but each resolves
+  // @app/* its own way - not the way the single Storybook build renders them.
+  "extends": "../editor/tsconfig.proprietary.vite.json",
+  "exclude": [],
+  "include": [
+    "./**/*",
+    "../editor/src/global.d.ts",
+    "../editor/src/**/*.stories.ts",
+    "../editor/src/**/*.stories.tsx"
+  ]
 }

frontend/editor/src/core/tokens/Tokens.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 const meta: Meta = {
   title: "Foundations/Design Tokens",

frontend/editor/src/core/ui/ActionIcon.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ActionIcon } from "@app/ui/ActionIcon";
 
 const Plus = () => (

frontend/editor/src/core/ui/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "@app/ui/Button";
 
 /* tiny inline icons for the demos */

frontend/editor/src/core/ui/MethodBadge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MethodBadge, type HttpMethod } from "@app/ui/MethodBadge";
 
 const meta: Meta<typeof MethodBadge> = {

frontend/editor/src/core/ui/SegmentedControl.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
 import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
 import { SegmentedControl } from "@app/ui/SegmentedControl";

frontend/editor/src/core/ui/StatusBadge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { StatusBadge } from "@app/ui/StatusBadge";
 
 const meta: Meta<typeof StatusBadge> = {

frontend/editor/src/portal/data/Endpoints.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { VERTICALS, ALL_ENDPOINTS } from "@portal/data/endpoints";
 import { MethodBadge } from "@app/ui/MethodBadge";
 import { StatusBadge } from "@app/ui/StatusBadge";

frontend/editor/src/portal/data/Ops.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
   PIPELINE_OPS,
   LIBRARY_OPS,

frontend/editor/src/proprietary/auth/ui/AuthScreens.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AuthShell } from "@app/auth/ui/AuthShell";
 import SpringLoginForm from "@app/auth/ui/SpringLoginForm";
 import AuthSignupPrompt from "@app/auth/ui/AuthSignupPrompt";

frontend/editor/src/proprietary/auth/ui/EmailPasswordForm.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import EmailPasswordForm from "@app/auth/ui/EmailPasswordForm";
 import "@app/auth/ui/auth.css";
 

frontend/editor/src/proprietary/auth/ui/ErrorMessage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import ErrorMessage from "@app/auth/ui/ErrorMessage";
 import "@app/auth/ui/auth.css";
 

frontend/editor/src/proprietary/auth/ui/SupabaseLoginForm.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import SupabaseLoginForm from "@app/auth/ui/SupabaseLoginForm";
 import type { SupabaseLoginState } from "@app/auth/ui/useSupabaseLogin";
 import "@app/auth/ui/auth.css";

frontend/editor/src/proprietary/components/shared/stripeCheckout/components/PricingBadge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PricingBadge } from "@app/components/shared/stripeCheckout/components/PricingBadge";
 
 /**

frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ErrorStage } from "@app/components/shared/stripeCheckout/stages/ErrorStage";
 
 /**

frontend/editor/src/proprietary/routes/login/OAuthButtons.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import OAuthButtons from "@app/auth/ui/OAuthButtons";
 import "@app/auth/ui/auth.css";