chore: fix modals div

elibosley · elibosley · commit ae3561036047 · 2025-03-24T16:31:27.000-04:00
diff --git a/unraid-ui/.storybook/preview.ts b/unraid-ui/.storybook/preview.ts
@@ -14,6 +14,18 @@ const preview: Preview = {
       },
     },
   },
+  // Add decorator to include modals container in every story
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+        <div>
+          <div id="modals"></div>
+          <story />
+        </div>
+      `,
+    }),
+  ],
 };
 
 export default preview;
diff --git a/unraid-ui/stories/components/common/Tooltip.stories.ts b/unraid-ui/stories/components/common/Tooltip.stories.ts
@@ -1,9 +1,14 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { Tooltip as TooltipComponent, TooltipTrigger, TooltipContent, TooltipProvider } from "../../../src/components/common/tooltip";
-import { Button } from "../../../src/components/common/button";
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Button } from '../../../src/components/common/button';
+import {
+  Tooltip as TooltipComponent,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../../src/components/common/tooltip';
 
 const meta = {
-  title: "Components/Common",
+  title: 'Components/Common',
   component: TooltipComponent,
 } satisfies Meta<typeof TooltipComponent>;
 
@@ -21,8 +26,6 @@ export const Tooltip: Story = {
       return { args };
     },
     template: `
-      <div>
-        <div id="modals"></div>
         <div class="p-20 flex items-center justify-start">
           <TooltipProvider>
             <TooltipComponent :default-open="args.defaultOpen">
@@ -35,7 +38,6 @@ export const Tooltip: Story = {
             </TooltipComponent>
           </TooltipProvider>
         </div>
-      </div>
     `,
   }),
 };
diff --git a/unraid-ui/stories/components/form/Select.stories.ts b/unraid-ui/stories/components/form/Select.stories.ts
@@ -9,24 +9,6 @@ import {
   SelectValue,
 } from '../../../src/components/form/select';
 
-// Define the custom element for modals
-class ModalsContainer extends HTMLElement {
-  constructor() {
-    super();
-    const shadow = this.attachShadow({ mode: 'open' });
-    const parent = document.createElement('div');
-    const container = document.createElement('div');
-    container.id = 'modals';
-
-    parent.appendChild(container);
-
-    shadow.appendChild(parent);
-  }
-}
-
-// Register the custom element
-customElements.define('unraid-modals', ModalsContainer);
-
 const meta = {
   title: 'Components/Form/Select',
   component: SelectComponent,
@@ -51,8 +33,6 @@ export const Select: Story = {
       return { args };
     },
     template: `
-      <div>
-        <unraid-modals></unraid-modals>
         <SelectComponent>
           <SelectTrigger class="w-[180px]">
             <SelectValue placeholder="Select a fruit" />
@@ -67,7 +47,6 @@ export const Select: Story = {
             </SelectGroup>
           </SelectContent>
         </SelectComponent>
-      </div>
     `,
   }),
 };
