fix(UserFeedback): fix storybook

app/services/env/web.ts

@@ -1,11 +1,13 @@
-const getNodeOrWebEnv = () =>
+const envFromBrowser = () =>
   typeof window === "object" && "ENV" in window
     ? (window?.ENV as Record<string, string | undefined>)
-    : process.env;
+    : undefined;
 
-export function config() {
-  const env = getNodeOrWebEnv();
+const envFromNode = () =>
+  typeof process === "object" && "env" in process ? process?.env : undefined;
 
+export function config() {
+  const env = envFromBrowser() ?? envFromNode() ?? {};
   return {
     POSTHOG_API_HOST:
       env.POSTHOG_API_HOST?.trim() ?? "https://eu.i.posthog.com",

stories/UserFeedback.stories.tsx

@@ -1,23 +1,52 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import UserFeedback, { BannerState } from "../app/components/UserFeedback";
-import { remixContext } from "../.storybook/remixContext";
+import { createRemixStub } from "@remix-run/testing";
+import { redirect, redirectDocument } from "@remix-run/node";
 
 const meta = {
   title: "Content/UserFeedback",
   component: UserFeedback,
-  parameters: {
-    layout: "fullscreen",
-  },
   tags: ["autodocs"],
 } satisfies Meta<typeof UserFeedback>;
 
 export default meta;
 
+let bannerStateMemo = BannerState.ShowRating;
+const nextBannerState = (bannerState: BannerState) =>
+  bannerState === BannerState.ShowRating
+    ? BannerState.ShowFeedback
+    : BannerState.FeedbackGiven;
+
 export const Example: StoryObj<typeof meta> = {
   args: {
-    rating: {
-      heading: "Hat Ihnen der Vorab-Check geholfen?",
-    },
+    rating: { heading: "Hat Ihnen der Vorab-Check geholfen?" },
   },
-  decorators: [(Story) => remixContext(Story)],
+  decorators: [
+    (Story) => {
+      const RemixStub = createRemixStub([
+        {
+          id: "root",
+          loader: () => {
+            const bannerState = bannerStateMemo;
+            bannerStateMemo = nextBannerState(bannerStateMemo);
+            return { bannerState };
+          },
+          children: [
+            { path: "/", Component: Story },
+            {
+              path: "/action/send-rating",
+              action: () => ({ success: true }),
+            },
+            {
+              Component: Story, // This is a workaround for FeedbackFormBox redirecting to /action/send-feedback
+              path: "/action/send-feedback",
+              action: () => ({ success: true }),
+            },
+          ],
+        },
+      ]);
+
+      return <RemixStub />;
+    },
+  ],
 };