chore: upgrade to storybook 9 (#6141)

apps/storybook/.storybook/main.ts

@@ -14,10 +14,9 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
     getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-docs"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,21 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
+import { TolgeeProvider } from "@tolgee/react";
+import React from "react";
 import "../../web/modules/ui/globals.css";
+import { TolgeeBase } from "../../web/tolgee/shared";
+
+// Create a Storybook-specific Tolgee decorator
+const withTolgee = (Story: any) => {
+  const tolgee = TolgeeBase().init({
+    tagNewKeys: [], // No branch tagging in Storybook
+  });
+
+  return React.createElement(
+    TolgeeProvider,
+    { tolgee, fallback: "Loading", ssr: { language: "en", staticData: {} } },
+    React.createElement(Story)
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +26,7 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [withTolgee],
 };
 
 export default preview;

apps/storybook/package.json

@@ -14,23 +14,19 @@
     "eslint-plugin-react-refresh": "0.4.20"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.6",
-    "@storybook/addon-a11y": "8.6.12",
-    "@storybook/addon-essentials": "8.6.12",
-    "@storybook/addon-interactions": "8.6.12",
-    "@storybook/addon-links": "8.6.12",
-    "@storybook/addon-onboarding": "8.6.12",
-    "@storybook/blocks": "8.6.12",
-    "@storybook/react": "8.6.12",
-    "@storybook/react-vite": "8.6.12",
-    "@storybook/test": "8.6.12",
+    "@chromatic-com/storybook": "^4.0.1",
+    "@storybook/addon-a11y": "9.0.15",
+    "@storybook/addon-links": "9.0.15",
+    "@storybook/addon-onboarding": "9.0.15",
+    "@storybook/react-vite": "9.0.15",
     "@typescript-eslint/eslint-plugin": "8.32.0",
     "@typescript-eslint/parser": "8.32.0",
     "@vitejs/plugin-react": "4.4.1",
     "esbuild": "0.25.4",
-    "eslint-plugin-storybook": "0.12.0",
+    "eslint-plugin-storybook": "9.0.15",
     "prop-types": "15.8.1",
-    "storybook": "8.6.12",
-    "vite": "6.3.5"
+    "storybook": "9.0.15",
+    "vite": "6.3.5",
+    "@storybook/addon-docs": "9.0.15"
   }
 }

apps/storybook/src/stories/Configure.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 import Accessibility from "./assets/accessibility.png";
 import AddonLibrary from "./assets/addon-library.png";

apps/web/locales/de-DE.json

@@ -1803,7 +1803,6 @@
         "this_year": "Dieses Jahr",
         "time_to_complete": "Zeit zur Fertigstellung",
         "to_connect_your_website_with_formbricks": "deine Website mit Formbricks zu verbinden",
-        "to_create_personal_links_segment_required": "Um persönliche Links für Ihre Umfrage zu erstellen, müssen Sie zuerst ein Segment einrichten.",
         "ttc_tooltip": "Durchschnittliche Zeit bis zum Abschluss der Umfrage.",
         "unknown_question_type": "Unbekannter Fragetyp",
         "unpublish_from_web": "Aus dem Web entfernen",
@@ -2821,4 +2820,4 @@
     "understand_purchase_intention_question_3_headline": "Was, wenn überhaupt, hält Dich heute davon ab, einen Kauf zu tätigen?",
     "understand_purchase_intention_question_3_placeholder": "Tippe deine Antwort hier..."
   }
-}
+}

apps/web/locales/en-US.json

@@ -1803,7 +1803,6 @@
         "this_year": "This year",
         "time_to_complete": "Time to Complete",
         "to_connect_your_website_with_formbricks": "to connect your website with Formbricks",
-        "to_create_personal_links_segment_required": "To create personal links for your survey, you need to set up a segment first.",
         "ttc_tooltip": "Average time to complete the survey.",
         "unknown_question_type": "Unknown Question Type",
         "unpublish_from_web": "Unpublish from web",
@@ -2821,4 +2820,4 @@
     "understand_purchase_intention_question_3_headline": "What, if anything, is holding you back from making a purchase today?",
     "understand_purchase_intention_question_3_placeholder": "Type your answer here..."
   }
-}
+}

apps/web/locales/fr-FR.json

@@ -1803,7 +1803,6 @@
         "this_year": "Cette année",
         "time_to_complete": "Temps à compléter",
         "to_connect_your_website_with_formbricks": "connecter votre site web à Formbricks",
-        "to_create_personal_links_segment_required": "Pour créer des liens personnels pour votre enquête, vous devez d'abord définir un segment.",
         "ttc_tooltip": "Temps moyen pour compléter l'enquête.",
         "unknown_question_type": "Type de question inconnu",
         "unpublish_from_web": "Désactiver la publication sur le web",
@@ -2821,4 +2820,4 @@
     "understand_purchase_intention_question_3_headline": "Qu'est-ce qui vous empêche de faire un achat aujourd'hui, s'il y a quelque chose ?",
     "understand_purchase_intention_question_3_placeholder": "Entrez votre réponse ici..."
   }
-}
+}

apps/web/locales/pt-BR.json

@@ -1803,7 +1803,6 @@
         "this_year": "Este ano",
         "time_to_complete": "Tempo para Concluir",
         "to_connect_your_website_with_formbricks": "conectar seu site com o Formbricks",
-        "to_create_personal_links_segment_required": "Para criar links pessoais para sua pesquisa, você precisa configurar um segmento primeiro.",
         "ttc_tooltip": "Tempo médio para completar a pesquisa.",
         "unknown_question_type": "Tipo de pergunta desconhecido",
         "unpublish_from_web": "Despublicar da web",
@@ -2821,4 +2820,4 @@
     "understand_purchase_intention_question_3_headline": "O que, se é que tem algo, está te impedindo de fazer a compra hoje?",
     "understand_purchase_intention_question_3_placeholder": "Digite sua resposta aqui..."
   }
-}
+}

apps/web/locales/pt-PT.json

@@ -1803,7 +1803,6 @@
         "this_year": "Este ano",
         "time_to_complete": "Tempo para Concluir",
         "to_connect_your_website_with_formbricks": "para ligar o seu website ao Formbricks",
-        "to_create_personal_links_segment_required": "Para criar links pessoais para o seu inquérito, é necessário configurar primeiro um segmento.",
         "ttc_tooltip": "Tempo médio para concluir o inquérito.",
         "unknown_question_type": "Tipo de Pergunta Desconhecido",
         "unpublish_from_web": "Despublicar da web",
@@ -2821,4 +2820,4 @@
     "understand_purchase_intention_question_3_headline": "O que, se alguma coisa, o está a impedir de fazer uma compra hoje?",
     "understand_purchase_intention_question_3_placeholder": "Escreva a sua resposta aqui..."
   }
-}
+}

apps/web/locales/zh-Hant-TW.json

@@ -1803,7 +1803,6 @@
         "this_year": "今年",
         "time_to_complete": "完成時間",
         "to_connect_your_website_with_formbricks": "以將您的網站與 Formbricks 連線",
-        "to_create_personal_links_segment_required": "要為 問卷 創建 個人連結，您 必須先 設置 一個 分段。",
         "ttc_tooltip": "完成問卷的平均時間。",
         "unknown_question_type": "未知的問題類型",
         "unpublish_from_web": "從網站取消發布",
@@ -2821,4 +2820,4 @@
     "understand_purchase_intention_question_3_headline": "有什麼阻礙您今天進行購買嗎？",
     "understand_purchase_intention_question_3_placeholder": "在此輸入您的答案..."
   }
-}
+}

apps/web/modules/survey/editor/components/end-screen-form.test.tsx

@@ -248,7 +248,7 @@ describe("EndScreenForm", () => {
     // Mock focus method
     const mockFocus = vi.fn();
     if (buttonLinkInput) {
-      buttonLinkInput.focus = mockFocus;
+      vi.spyOn(HTMLElement.prototype, "focus").mockImplementation(mockFocus);
       buttonLinkInput.focus();
 
       expect(mockFocus).toHaveBeenCalled();

apps/web/modules/ui/components/alert-dialog/stories.tsx

@@ -1,5 +1,4 @@
-import { TolgeeNextProvider } from "@/tolgee/client";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { AlertDialog } from "./index";
 
 const meta: Meta<typeof AlertDialog> = {
@@ -42,13 +41,6 @@ const meta: Meta<typeof AlertDialog> = {
       description: "Function called when decline button is clicked",
     },
   },
-  decorators: [
-    (Story) => (
-      <TolgeeNextProvider language="en" staticData={{}}>
-        <Story />
-      </TolgeeNextProvider>
-    ),
-  ],
 };
 
 export default meta;

apps/web/modules/ui/components/alert/stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { LightbulbIcon } from "lucide-react";
+import type * as React from "react";
 import { Alert, AlertButton, AlertDescription, AlertTitle } from "./index";
 
 // We'll define the story options separately from the component props

apps/web/modules/ui/components/badge/stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Badge } from "./index";
 
 const meta = {

apps/web/modules/ui/components/button/stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 import { Button } from "./index";
 
 const meta = {

apps/web/modules/ui/components/card/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { BellRing } from "lucide-react";
 import { Card } from "./index";
 

apps/web/modules/ui/components/color-picker/stories.tsx

@@ -1,6 +1,6 @@
-import { useArgs } from "@storybook/preview-api";
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useArgs } from "storybook/preview-api";
+import { fn } from "storybook/test";
 import { ColorPicker } from "./index";
 
 const meta: Meta<typeof ColorPicker> = {

apps/web/modules/ui/components/dialog/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AlertCircle } from "lucide-react";
 import { Button } from "../button";
 import {

apps/web/modules/ui/components/input-combo-box/stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { FileIcon, FolderIcon, ImageIcon } from "lucide-react";
 import { logger } from "@formbricks/logger";
 import { InputCombobox } from "./index";

apps/web/modules/ui/components/input/stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { Input } from "./index";
 
 const meta = {

apps/web/modules/ui/components/integration-card/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { BellRing } from "lucide-react";
 import { Card } from "./index";
 

apps/web/modules/ui/components/label/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Label } from "./index";
 
 const meta = {

apps/web/modules/ui/components/loading-spinner/stories.ts

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

apps/web/modules/ui/components/page-header/stories.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/modules/ui/components/button";
 import { PageHeader } from "@/modules/ui/components/page-header";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 const meta = {
   title: "ui/PageHeader",

packages/surveys/src/components/questions/open-text-question.test.tsx

@@ -153,12 +153,15 @@ describe("OpenTextQuestion", () => {
 
   test("auto focuses input when enabled and is current question", () => {
     const focusMock = vi.fn();
-    // Mock the ref implementation for this test
-    window.HTMLElement.prototype.focus = focusMock;
+    // Mock the focus method using vi.spyOn
+    const focusSpy = vi.spyOn(HTMLElement.prototype, "focus").mockImplementation(focusMock);
 
     render(<OpenTextQuestion {...defaultProps} autoFocusEnabled={true} currentQuestionId="q1" />);
 
     expect(focusMock).toHaveBeenCalled();
+
+    // Clean up the spy
+    focusSpy.mockRestore();
   });
 
   test("handles input change for textarea with resize functionality", async () => {
@@ -299,7 +302,8 @@ describe("OpenTextQuestion", () => {
 
   test("doesn't autofocus when not current question", () => {
     const focusMock = vi.fn();
-    window.HTMLElement.prototype.focus = focusMock;
+    // Mock the focus method using vi.spyOn
+    const focusSpy = vi.spyOn(HTMLElement.prototype, "focus").mockImplementation(focusMock);
 
     render(
       <OpenTextQuestion
@@ -310,6 +314,9 @@ describe("OpenTextQuestion", () => {
     );
 
     expect(focusMock).not.toHaveBeenCalled();
+
+    // Clean up the spy
+    focusSpy.mockRestore();
   });
 
   test("handles input change for textarea", async () => {

turbo.json

@@ -240,6 +240,9 @@
       "cache": false,
       "persistent": true
     },
+    "storybook#storybook": {
+      "dependsOn": ["@formbricks/logger#build"]
+    },
     "test": {
       "outputs": []
     },