fix: build

packages/surveys/.eslintrc.cjs

@@ -1,4 +1,7 @@
 module.exports = {
-  extends: ["@formbricks/eslint-config/legacy-react.js"],
+  extends: [
+    "@formbricks/eslint-config/legacy-react.js",
+    "plugin:storybook/recommended"
+  ],
   parser: "@typescript-eslint/parser",
 };

packages/surveys/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log
+storybook-static

packages/surveys/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/preact-vite";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/preact-vite"),
+    options: {},
+  },
+};
+export default config;

packages/surveys/.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from "@storybook/preact-vite";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
+  },
+};
+
+export default preview;

packages/surveys/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/preact-vite";
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

packages/surveys/package.json

@@ -35,7 +35,9 @@
     "clean": "rimraf .turbo node_modules dist",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "i18n:generate": "npx lingo.dev@latest i18n"
+    "i18n:generate": "npx lingo.dev@latest i18n",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@calcom/embed-snippet": "1.3.3",
@@ -43,26 +45,37 @@
     "i18next": "25.5.2",
     "i18next-icu": "2.4.0",
     "isomorphic-dompurify": "2.24.0",
-    "preact": "10.26.6",
+    "preact": "10.27.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
     "react-i18next": "15.7.3"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
     "@formbricks/config-typescript": "workspace:*",
     "@formbricks/eslint-config": "workspace:*",
     "@formbricks/i18n-utils": "workspace:*",
     "@formbricks/types": "workspace:*",
     "@preact/preset-vite": "2.10.1",
+    "@storybook/addon-a11y": "^10.0.8",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-vitest": "^10.0.8",
+    "@storybook/preact-vite": "^10.0.8",
     "@testing-library/preact": "3.2.4",
     "@types/react": "19.1.4",
     "autoprefixer": "10.4.21",
     "concurrently": "9.1.2",
+    "eslint-plugin-storybook": "^10.0.8",
     "postcss": "8.5.3",
+    "storybook": "^10.0.8",
     "tailwindcss": "3.4.17",
     "terser": "5.39.1",
     "vite": "6.4.1",
     "vite-plugin-dts": "4.5.3",
-    "vite-tsconfig-paths": "5.1.4"
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "^4.0.13",
+    "playwright": "^1.56.1",
+    "@vitest/browser-playwright": "^4.0.13",
+    "@vitest/coverage-v8": "^4.0.13"
   }
 }

packages/surveys/src/components/general/file-input.tsx

@@ -1,6 +1,6 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
+import type { JSX } from "preact";
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
-import { type JSXInternal } from "preact/src/jsx";
 import { useTranslation } from "react-i18next";
 import { type TJsFileUploadParams } from "@formbricks/types/js";
 import { TAllowedFileExtension, type TUploadFileConfig, mimeTypes } from "@formbricks/types/storage";
@@ -285,14 +285,14 @@ export function FileInput({
     }
   };
 
-  const handleDragOver = (e: JSXInternal.TargetedDragEvent<HTMLLabelElement>) => {
+  const handleDragOver = (e: JSX.TargetedDragEvent<HTMLLabelElement>) => {
     e.preventDefault();
     e.stopPropagation();
     // @ts-expect-error -- TS does not recognize dataTransfer
     e.dataTransfer.dropEffect = "copy";
   };
 
-  const handleDrop = async (e: JSXInternal.TargetedDragEvent<HTMLLabelElement>) => {
+  const handleDrop = async (e: JSX.TargetedDragEvent<HTMLLabelElement>) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -300,7 +300,7 @@ export function FileInput({
     await handleFileSelection(e.dataTransfer.files);
   };
 
-  const handleDeleteFile = (index: number, event: JSXInternal.TargetedMouseEvent<SVGSVGElement>) => {
+  const handleDeleteFile = (index: number, event: JSX.TargetedMouseEvent<SVGSVGElement>) => {
     event.stopPropagation();
     setSelectedFiles((prevFiles) => {
       const newFiles = [...prevFiles];

packages/surveys/src/components/v5/progress/index.tsx

@@ -0,0 +1,49 @@
+import type { JSX } from "preact";
+
+interface ProgressProps {
+  value?: number;
+  max?: number;
+  containerStyling?: JSX.CSSProperties;
+  indicatorStyling?: JSX.CSSProperties;
+  "aria-label"?: string;
+}
+
+/**
+ * Progress component displays an indicator showing the completion progress of a task.
+ * Typically displayed as a progress bar.
+ *
+ * @param value - Current progress value (0-100 by default)
+ * @param max - Maximum value (default: 100)
+ * @param containerStyling - Custom styling object for the container
+ * @param indicatorStyling - Custom styling object for the indicator
+ * @param aria-label - Accessible label for the progress bar
+ */
+export function Progress({
+  value = 0,
+  max = 100,
+  containerStyling = {},
+  indicatorStyling = {},
+  "aria-label": ariaLabel = "Progress",
+}: ProgressProps) {
+  // Calculate percentage, ensuring it stays within 0-100 range
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  return (
+    <div
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-label={ariaLabel}
+      className="fb-relative fb-h-2 fb-w-full fb-overflow-hidden fb-rounded-full fb-bg-accent-bg"
+      style={containerStyling}>
+      <div
+        className="fb-h-full fb-w-full fb-flex-1 fb-bg-brand fb-transition-all fb-duration-500 fb-ease-in-out"
+        style={{
+          transform: `translateX(-${100 - percentage}%)`,
+          ...indicatorStyling,
+        }}
+      />
+    </div>
+  );
+}

packages/surveys/src/components/v5/progress/progress.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/preact-vite";
+import type { ComponentProps } from "preact";
+import "../../../styles/global.css";
+import { Progress } from "./index";
+
+type ProgressProps = ComponentProps<typeof Progress>;
+
+const meta: Meta<ProgressProps> = {
+  title: "v5/Progress",
+  component: Progress,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story: any) => (
+      <div id="fbjs" style={{ width: "400px", padding: "20px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    value: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+      description: "Current progress value",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "0" },
+      },
+    },
+    max: {
+      control: { type: "number" },
+      description: "Maximum value",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "100" },
+      },
+    },
+    containerStyling: {
+      control: "object",
+      description: "Custom styling object for the container",
+      table: {
+        type: { summary: "CSSProperties" },
+        defaultValue: { summary: "{}" },
+      },
+    },
+    indicatorStyling: {
+      control: "object",
+      description: "Custom styling object for the indicator",
+      table: {
+        type: { summary: "CSSProperties" },
+        defaultValue: { summary: "{}" },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ProgressProps>;
+
+/**
+ * Default progress bar with 50% completion
+ */
+export const Default: Story = {
+  args: {
+    value: 50,
+  },
+};
+
+/**
+ * Progress bar with no progress (0%)
+ */
+export const Empty: Story = {
+  args: {
+    value: 0,
+  },
+};
+
+/**
+ * Progress bar with full progress (100%)
+ */
+export const Complete: Story = {
+  args: {
+    value: 100,
+  },
+};
+
+/**
+ * Progress bar with gradient indicator
+ */
+export const CustomStyling: Story = {
+  args: {
+    value: 70,
+    indicatorStyling: {
+      background: "linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)",
+      height: "2rem",
+    },
+  },
+};

packages/surveys/src/components/wrappers/stacked-card.tsx

@@ -96,7 +96,9 @@ export const StackedCard = ({
 
   return (
     <div
-      ref={(el) => (cardRefs.current[dynamicQuestionIndex] = el)}
+      ref={(el) => {
+        cardRefs.current[dynamicQuestionIndex] = el;
+      }}
       id={`questionCard-${dynamicQuestionIndex}`}
       data-testid={`questionCard-${dynamicQuestionIndex}`}
       key={dynamicQuestionIndex}

packages/surveys/src/lib/ttc.test.ts

@@ -27,15 +27,15 @@ describe("getUpdatedTtc", () => {
 });
 
 describe("useTtc", () => {
-  let mockSetTtc: ReturnType<typeof vi.fn>;
+  let mockSetTtc: (ttc: Record<string, number>) => void;
-  let mockSetStartTime: ReturnType<typeof vi.fn>;
+  let mockSetStartTime: (time: number) => void;
   let currentTime = 0;
   let initialProps: {
     questionId: TSurveyQuestionId;
     ttc: TResponseTtc;
-    setTtc: ReturnType<typeof vi.fn>;
+    setTtc: (ttc: Record<string, number>) => void;
     startTime: number;
-    setStartTime: ReturnType<typeof vi.fn>;
+    setStartTime: (time: number) => void;
     isCurrentQuestion: boolean;
   };
 

packages/surveys/tsconfig.json

@@ -6,6 +6,7 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
+    "moduleResolution": "bundler",
     "paths": {
       "@/*": ["./src/*"]
     },

packages/surveys/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />

vitest.workspace.ts

@@ -1 +1,36 @@
-export default ["packages/*/vite.config.{ts,mts}", "apps/**/vite.config.{ts,mts}"];
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineWorkspace } from "vitest/config";
+
+const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default [
+  "packages/*/vite.config.{ts,mts}",
+  "apps/**/vite.config.{ts,mts}",
+  {
+    extends: "packages/surveys/vite.config.mts",
+    plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, ".storybook"),
+      }),
+    ],
+    test: {
+      name: "storybook",
+      browser: {
+        enabled: true,
+        headless: true,
+        provider: "playwright",
+        instances: [
+          {
+            browser: "chromium",
+          },
+        ],
+      },
+      setupFiles: ["packages/surveys/.storybook/vitest.setup.ts"],
+    },
+  },
+];