improvements: address feedback

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 />;
+};

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({
+  const router = useMemo(() => {
+    const routeTree = createRootRoute({
       component: Story
     });
 
-  const routeTree = rootRoute;
+    return createRouter({
-
-  const router = createRouter({
       routeTree
     });
+  }, [Story]);
 
-  // @ts-expect-error just to make Links happy :)
+  return <RouterProvider router={router as any} />;
-  return <RouterProvider router={router} />;
 };

frontend/.storybook/decorators/index.ts

@@ -1 +1,2 @@
+export * from "./DocumentDecorator";
 export * from "./RouterDecorator";

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: [
+  decorators: [DocumentDecorator, RouterDecorator],
-    (Story) => {
-      const root = document.getElementsByTagName("html")[0];
-
-      root.setAttribute("class", "overflow-visible");
-
-      return <Story />;
-    },
-    RouterDecorator
-  ],
   parameters: {
     controls: {
       matchers: {

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 />

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 (

frontend/tsconfig.app.json

@@ -32,6 +32,6 @@
     "./src/**/*.ts",
     "./src/**/*.tsx",
     "./.storybook/**/*.ts",
-    "./.storybook/**/*.tsx",
+    "./.storybook/**/*.tsx"
   ],
 }