From 2081cd958553404a73533d9357e2dac6c410c4a5 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Thu, 23 Oct 2025 13:02:26 -0700
Subject: [PATCH] improvements: address feedback

---
 .../decorators/DocumentDecorator.tsx          | 12 +++++++++++
 .../.storybook/decorators/RouterDecorator.tsx | 20 +++++++++----------
 frontend/.storybook/decorators/index.ts       |  1 +
 frontend/.storybook/preview.tsx               | 13 ++----------
 .../v3/generic/Badge/Badge.stories.tsx        |  4 ++--
 .../src/components/v3/generic/Badge/Badge.tsx |  2 +-
 frontend/tsconfig.app.json                    |  2 +-
 7 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 frontend/.storybook/decorators/DocumentDecorator.tsx

diff --git a/frontend/.storybook/decorators/DocumentDecorator.tsx b/frontend/.storybook/decorators/DocumentDecorator.tsx
new file mode 100644
index 000000000..13f4dc8c7
--- /dev/null
+++ b/frontend/.storybook/decorators/DocumentDecorator.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import type { Decorator } from "@storybook/react-vite";
+
+export const DocumentDecorator: Decorator = (Story) => {
+  useEffect(() => {
+    const root = document.getElementsByTagName("html")[0];
+
+    root.setAttribute("class", "overflow-visible");
+  }, []);
+
+  return <Story />;
+};
diff --git a/frontend/.storybook/decorators/RouterDecorator.tsx b/frontend/.storybook/decorators/RouterDecorator.tsx
index 06f8d7575..a559c5cd1 100644
--- a/frontend/.storybook/decorators/RouterDecorator.tsx
+++ b/frontend/.storybook/decorators/RouterDecorator.tsx
@@ -1,17 +1,17 @@
+import { useMemo } from "react";
 import type { Decorator } from "@storybook/react-vite";
 import { createRootRoute, createRouter, RouterProvider } from "@tanstack/react-router";
 
 export const RouterDecorator: Decorator = (Story) => {
-  const rootRoute = createRootRoute({
-    component: Story
-  });
+  const router = useMemo(() => {
+    const routeTree = createRootRoute({
+      component: Story
+    });
 
-  const routeTree = rootRoute;
+    return createRouter({
+      routeTree
+    });
+  }, [Story]);
 
-  const router = createRouter({
-    routeTree
-  });
-
-  // @ts-expect-error just to make Links happy :)
-  return <RouterProvider router={router} />;
+  return <RouterProvider router={router as any} />;
 };
diff --git a/frontend/.storybook/decorators/index.ts b/frontend/.storybook/decorators/index.ts
index b613f5c6a..7bbb10f15 100644
--- a/frontend/.storybook/decorators/index.ts
+++ b/frontend/.storybook/decorators/index.ts
@@ -1 +1,2 @@
+export * from "./DocumentDecorator";
 export * from "./RouterDecorator";
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index 67157339d..d2aaca582 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -1,20 +1,11 @@
 import type { Preview } from "@storybook/react-vite";
 
-import { RouterDecorator } from "./decorators";
+import { DocumentDecorator, RouterDecorator } from "./decorators";
 
 import "../src/index.css";
 
 const preview: Preview = {
-  decorators: [
-    (Story) => {
-      const root = document.getElementsByTagName("html")[0];
-
-      root.setAttribute("class", "overflow-visible");
-
-      return <Story />;
-    },
-    RouterDecorator
-  ],
+  decorators: [DocumentDecorator, RouterDecorator],
   parameters: {
     controls: {
       matchers: {
diff --git a/frontend/src/components/v3/generic/Badge/Badge.stories.tsx b/frontend/src/components/v3/generic/Badge/Badge.stories.tsx
index 86905b1ea..da0743a66 100644
--- a/frontend/src/components/v3/generic/Badge/Badge.stories.tsx
+++ b/frontend/src/components/v3/generic/Badge/Badge.stories.tsx
@@ -222,7 +222,7 @@ export const AsExternalLink: Story = {
     variant: "info",
     asChild: true,
     children: (
-      <a href="https://infisical.com/">
+      <a target="_blank" rel="noopener noreferrer" href="https://infisical.com/">
         Link <ExternalLinkIcon />
       </a>
     )
@@ -263,7 +263,7 @@ export const AsButton: Story = {
     variant: "org",
     asChild: true,
     children: (
-      <button type="button" onClick={() => alert("button clicked")}>
+      <button type="button" onClick={() => console.log("click")}>
         <GlobeIcon />
         Organization
         <ChevronsUpDownIcon />
diff --git a/frontend/src/components/v3/generic/Badge/Badge.tsx b/frontend/src/components/v3/generic/Badge/Badge.tsx
index a38cc856a..cc66806bc 100644
--- a/frontend/src/components/v3/generic/Badge/Badge.tsx
+++ b/frontend/src/components/v3/generic/Badge/Badge.tsx
@@ -39,7 +39,7 @@ type TBadgeProps = VariantProps<typeof badgeVariants> &
     asChild?: boolean;
   };
 
-const Badge = forwardRef<HTMLButtonElement | HTMLSpanElement | HTMLAnchorElement, TBadgeProps>(
+const Badge = forwardRef<HTMLSpanElement, TBadgeProps>(
   ({ className, variant, asChild = false, isTruncatable = false, ...props }, ref): JSX.Element => {
     const Comp = asChild ? Slot : "span";
     return (
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 690a1155d..17f657902 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -32,6 +32,6 @@
     "./src/**/*.ts",
     "./src/**/*.tsx",
     "./.storybook/**/*.ts",
-    "./.storybook/**/*.tsx",
+    "./.storybook/**/*.tsx"
   ],
 }