Some example stories

src/stories/v3/ComponentWithLink.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { reactRouterParameters } from '../../features/decorator/utils/routesHelpers/reactRouterParameters';
+import { withRouter } from '../../features/decorator/withRouter';
+
+const ComponentWithLinkFn = () => (
+  <main>
+    This <Link to={'../some-page'}>link</Link> takes you away from the component
+  </main>
+);
+
+const meta: Meta<typeof ComponentWithLinkFn> = {
+  title: 'v3/ComponentWithLink',
+  component: ComponentWithLinkFn,
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: { path: '/component' },
+      routing: [
+        {
+          // The component links to some peer outside it's subtree
+          path: 'component',
+          useStoryElement: true,
+        },
+        {
+          path: 'some-page',
+          element: (
+            <div>
+              <p>This is not the component being storied</p>
+              <ul>
+                <li>
+                  <Link to={'../component'}>go back</Link>
+                </li>
+              </ul>
+            </div>
+          ),
+        },
+      ],
+    }),
+  },
+  decorators: [withRouter],
+};
+export default meta;
+
+type Story = StoryObj<typeof ComponentWithLinkFn>;
+
+export const ComponentWithLink: Story = {};

src/stories/v3/FrameWithOutlet.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Link, Outlet, useLocation } from 'react-router-dom';
+import { reactRouterParameters } from '../../features/decorator/utils/routesHelpers/reactRouterParameters';
+import { withRouter } from '../../features/decorator/withRouter';
+
+const FrameWithOutlet = () => {
+  const { pathname } = useLocation();
+
+  return (
+    <main>
+      <p>This is some context out of the page.</p>
+      <p>The current path is: {pathname}</p>
+      <Outlet />
+    </main>
+  );
+};
+
+const FrameContent = ({ label, backUrl }: { label: string; backUrl: string }) => (
+  <div>
+    <p>{label}</p>
+    <ul>
+      <li>
+        <Link to={backUrl}>go back</Link>
+      </li>
+    </ul>
+  </div>
+);
+
+const meta: Meta<typeof FrameWithOutlet> = {
+  component: FrameWithOutlet,
+  parameters: {
+    reactRouter: reactRouterParameters({
+      routing: {
+        // Render the story as the root element, with a couple of example children
+        path: '/',
+        useStoryElement: true,
+        children: [
+          {
+            index: true,
+            element: (
+              <div>
+                <p>This is the index content</p>
+                <ul>
+                  <li>
+                    <Link to={'first'}>First Child</Link>
+                  </li>
+                  <li>
+                    <Link to={'second'}>Second Child</Link>
+                  </li>
+                </ul>
+              </div>
+            ),
+          },
+          {
+            path: 'first',
+            element: <FrameContent label={'This is some child content'} backUrl={'..'} />,
+          },
+          {
+            path: 'second',
+            element: <FrameContent label={'This is a different page of child content'} backUrl={'..'} />,
+          },
+        ],
+      },
+    }),
+  },
+  decorators: [withRouter],
+};
+export default meta;
+
+type Story = StoryObj<typeof FrameWithOutlet>;
+
+export const Default: Story = {};
+
+export const StartsOnChild: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        path: '/first',
+      },
+    }),
+  },
+};

src/stories/v3/NavMenu.css

@@ -0,0 +1,16 @@
+nav {
+  display: flex;
+  flex-flow: column;
+}
+
+a {
+  color: blue;
+}
+
+a.active {
+  color: red;
+}
+
+.sub-menu {
+  margin-left: 8px;
+}

src/stories/v3/NavMenu.stories.tsx

@@ -0,0 +1,74 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { reactRouterParameters } from '../../features/decorator/utils/routesHelpers/reactRouterParameters';
+import { withRouter } from '../../features/decorator/withRouter';
+import './NavMenu.css';
+
+const NavMenu = () => (
+  <nav>
+    <NavLink to={'/'}>Home</NavLink>
+    <NavLink to={'/parent'}>Parent without exact matching</NavLink>
+    <NavLink to={'/parent/child1'} className={'sub-menu'}>
+      Child 1
+    </NavLink>
+    <NavLink to={'/parent/child2'} className={'sub-menu'}>
+      Child 2
+    </NavLink>
+    <NavLink to={'/exact-parent'} end>
+      Parent with exact matching
+    </NavLink>
+    <NavLink to={'/exact-parent/child'} className={'sub-menu'}>
+      Child
+    </NavLink>
+  </nav>
+);
+
+const meta: Meta<typeof NavMenu> = {
+  component: NavMenu,
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { pathname } = useLocation();
+
+    return (
+      <>
+        <NavMenu />
+        <p>Current path is: {pathname}</p>
+      </>
+    );
+  },
+  parameters: {
+    reactRouter: reactRouterParameters({
+      routing: {
+        useStoryElement: true,
+        path: '*', // Regardless of the current path, render the story
+      },
+    }),
+  },
+  decorators: [withRouter],
+};
+export default meta;
+
+type Story = StoryObj<typeof NavMenu>;
+
+export const Default: Story = {};
+
+export const Child: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        path: '/parent/child2',
+      },
+    }),
+  },
+};
+
+export const ExactChild: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: {
+        path: '/exact-parent/child',
+      },
+    }),
+  },
+};