From beba895c5c2204059c26a831a233138ed24ca267 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 18 Jul 2025 15:41:24 +0100
Subject: [PATCH] Fix stories

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Header/Header.stories.tsx  | 18 +++---
 .../HeaderPage/HeaderPage.stories.tsx         | 62 ++++---------------
 2 files changed, 21 insertions(+), 59 deletions(-)

diff --git a/packages/ui/src/components/Header/Header.stories.tsx b/packages/ui/src/components/Header/Header.stories.tsx
index da33b1a0f5..607d033ea4 100644
--- a/packages/ui/src/components/Header/Header.stories.tsx
+++ b/packages/ui/src/components/Header/Header.stories.tsx
@@ -40,7 +40,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const withRouter = (Story: StoryFn) => (
+export const withRouter = (Story: StoryFn) => (
   <MemoryRouter>
     <Story />
   </MemoryRouter>
@@ -113,7 +113,7 @@ const menuItems: HeaderMenuItem[] = [
 ];
 
 // Extract layout decorator as a reusable constant
-const layoutDecorator = [
+export const layoutDecorator = [
   (Story: StoryFn) => (
     <>
       <div
@@ -281,10 +281,10 @@ export const WithMockedURLCampaigns: Story = {
     <MemoryRouter initialEntries={['/campaigns']}>
       <Header {...args} />
       <Container>
-        <Text>
+        <Text as="p">
           Current URL is mocked to be: <strong>/campaigns</strong>
         </Text>
-        <Text>
+        <Text as="p">
           Notice how the "Campaigns" tab is selected (highlighted) because it
           matches the current path.
         </Text>
@@ -301,10 +301,10 @@ export const WithMockedURLIntegrations: Story = {
     <MemoryRouter initialEntries={['/integrations']}>
       <Header {...args} />
       <Container>
-        <Text>
+        <Text as="p">
           Current URL is mocked to be: <strong>/integrations</strong>
         </Text>
-        <Text>
+        <Text as="p">
           Notice how the "Integrations" tab is selected (highlighted) because it
           matches the current path.
         </Text>
@@ -321,14 +321,14 @@ export const WithMockedURLNoMatch: Story = {
     <MemoryRouter initialEntries={['/some-other-page']}>
       <Header {...args} />
       <Container>
-        <Text>
+        <Text as="p">
           Current URL is mocked to be: <strong>/some-other-page</strong>
         </Text>
-        <Text>
+        <Text as="p">
           No tab is selected because the current path doesn't match any tab's
           href.
         </Text>
-        <Text>
+        <Text as="p">
           Tabs without href (like "Overview", "Checks", "Tracks") fall back to
           React Aria's internal state.
         </Text>
diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx b/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
index 6a4e7bef6f..3d755c2855 100644
--- a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
+++ b/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import type { Meta, StoryObj, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { HeaderPage } from './HeaderPage';
 import type { HeaderTab, HeaderMenuItem } from '../Header/types';
-import { MemoryRouter } from 'react-router-dom';
 import { Button } from '../Button';
+import { layoutDecorator, withRouter } from '../Header/Header.stories';
 
 const meta = {
   title: 'Components/HeaderPage',
@@ -26,13 +26,6 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  decorators: [
-    (Story: StoryFn) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
 } satisfies Meta<typeof HeaderPage>;
 
 export default meta;
@@ -72,47 +65,6 @@ const menuItems: HeaderMenuItem[] = [
   },
 ];
 
-// Extract layout decorator as a reusable constant
-const layoutDecorator = [
-  (Story: StoryFn) => (
-    <>
-      <div
-        style={{
-          width: '250px',
-          position: 'fixed',
-          left: 8,
-          top: 8,
-          bottom: 8,
-          backgroundColor: 'var(--bui-bg-surface-1',
-          borderRadius: 'var(--bui-radius-2)',
-          border: '1px solid var(--bui-border)',
-          zIndex: 1,
-        }}
-      />
-      <div
-        style={{
-          paddingInline: '266px',
-        }}
-      >
-        <Story />
-      </div>
-      <div
-        style={{
-          width: '250px',
-          position: 'fixed',
-          right: 8,
-          top: 8,
-          bottom: 8,
-          backgroundColor: 'var(--bui-bg-surface-1',
-          borderRadius: 'var(--bui-radius-2)',
-          border: '1px solid var(--bui-border)',
-          zIndex: 1,
-        }}
-      />
-    </>
-  ),
-];
-
 export const Default: Story = {
   args: {
     title: 'Header Page',
@@ -124,6 +76,7 @@ export const WithTabs: Story = {
     ...Default.args,
     tabs,
   },
+  decorators: [withRouter],
 };
 
 export const WithMenuItems: Story = {
@@ -144,6 +97,7 @@ export const WithCustomActions: Story = {
 };
 
 export const WithEverything: Story = {
+  decorators: [withRouter],
   render: () => (
     <HeaderPage
       {...Default.args}
@@ -159,4 +113,12 @@ export const WithLayout: Story = {
     ...WithEverything.args,
   },
   decorators: layoutDecorator,
+  render: () => (
+    <HeaderPage
+      {...Default.args}
+      menuItems={menuItems}
+      tabs={tabs}
+      customActions={<Button>Custom action</Button>}
+    />
+  ),
 };