How to use Remix Link components in Storybook

[tachibanayu24]

Hello.

I am building UIs using the Link component provided by remix-run/react and would like to add UI components to Storybook.
Just adding Link.stories.tsx throws the error useHref() may only be used in the context of a <Router> component.
I would like to know how to avoid this error.

What I have tried is described below.

Just adding Link.stories.tsx will result in throwing an error useHref() may only be used in the context of a <Router> component.

For the Link component of react-router, a Router component is provided, which can be wrapped in .storybook/preview or *.stories.tsx, but I am not sure if there is such a Provider in @remix-run/react.

So I tried to use @remix-run/testing unstable_createRemixStub, which seems to have been added recently.

export const decorators: Decorator[] = [
  (Story: StoryFn) => {
    const route = [
      {
        path: '/*', element: <Story />, element: <Story />, element: <StoryFn
        element: <Story />, }
      }, }
    ]
    const RemixStub = unstable_createRemixStub(route)
    return <RemixStub initialEntries={['/']} />
  }, }
]

This way, something similar to Remix's initial error text is now displayed on the Storybook, but as for the useHref error text that is thrown, it is unchanged from the first time.

Do you have any ideas?

Thanks.

[DotwoodMedia]

Add a decorator to your storybook preview file

import type { Preview } from "@storybook/react";
import { MemoryRouter } from "react-router";
import React from "react";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>,
  ],
};

export default preview;

[tachibanayu24]

@DotwoodMedia
Thank you for your comment.

The component I am trying to add to the storybook uses the Link component from @remix-run/react, so wrapping it in a Router of react-router does not seem to resolve the error of not being able to reference useHref It is.

I was wondering if using RemixStub would solve the problem, but that was not possible with the same error as described above.

[tachibanayu24]

I think there is room to argument that UI components such as those added to storybook should not depend on a framework like remix, but should use react-router.
But be that as it may, is there any way to use remix's Link in storybook?

[florianchevallier]

I don't know if it will helps in any way but on my side I did it this way :

// .storybook/preview.tsx
import { unstable_createRemixStub } from '@remix-run/testing';
import { Preview } from '@storybook/react';
import '../app/tailwind.css';

const preview: Preview = {
  decorators: [
    Story => {
      const RemixStub = unstable_createRemixStub([
        {
          path: '/*',
          element: <Story />,
        },
      ]);

      return <div><RemixStub initialEntries={ ['/']} /></div>;
    },
  ],
};

export default preview;

And then

// Button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import Button from '../../../app/component/Button';

export default {
  title: 'Composants/Button/Primary',
  component: Button,
} as Meta;

type Story = StoryObj<typeof Button>;

export const Plain: Story = {
  args: {
    label: 'Button',
  },
};

export const Loading: Story = {
  args: {
    ...Plain.args,
    loading: true,
  },
};

👇 this one used to have the error as it's a <Link />
export const Link: Story = {
  args: {
    ...Plain.args,
    to: 'https://www.google.fr',
  },
};

hope it will help !

[tachibanayu24]

@florianchevallier
Thank you for your response!

Your code and mine look almost same, but I copied your code and tried it.
As a result, it did not work in my environment and I kept getting the same error. 😭
I thought it might be an older version of Remix, but changing to 1.16.0 did not change the result.

My link component just wraps the @remix-run/react link almost , so I don't know why the error occurs.
Hmm...

[simonepizzamiglio]

I'm on Remix 1.16.0 and Storybook 7.0.11, the following code works for me.

// Link.stories.tsx

import type { StoryObj, Meta } from '@storybook/react';
import { unstable_createRemixStub as createRemixStub } from '@remix-run/testing';
import { Link } from './Link';

const meta: Meta<typeof Link> = {
  title: 'components/Link',
  component: Link,
  decorators: [
    (Story) => {
      const RemixStub = createRemixStub([
        {
          path: '/',
          element: <Story />,
        },
      ]);

      return <RemixStub />;
    },
  ],
  tags: ['autodocs'],
  args: {
    children: "I'm a link",
    to: '/',
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {};

[tachibanayu24]

Thank you for your response!

I updated the storybook version to the latest (7.0.12) and it works as expected.
I should have tried this earlier 🙇

[maxxborer]

How to work with this now? In version 2 and higher there is no longer an element property.

[maxxborer]

Found the solution in the source code:

const preview: Preview = {
  decorators: [
    (Story) => {
      const RemixStub = createRemixStub([
        {
          path: '/*',
          action: () => ({ redirect: '/' }),
          loader: () => ({ redirect: '/' }),
          Component() { // <-- here
            return <Story />;
          }
        },
      ]);

      return (
        <Providers>
          <RemixStub />
        </Providers>
      )
    },
  ],
};

export default preview;

[RyanofWoods]

Where did you see this in the source code @maxxborer? Wondering about the Providers usage.

[coindegen]

I attempted the above solutions but was getting all kinds of Typescript errors like this:

'RemixStub' refers to a value, but is being used as a type here. Did you mean 'typeof RemixStub'?ts(2749)

Type '() => StoryAnnotations<ReactRenderer, { ... }>' is not assignable to type 'ComponentType<{}> | null | undefined'.

Not saying this is correct, but this is the only way I could satisfy the transpiler:

import type { Meta, StoryObj } from "@storybook/react";
import { CollectionCard } from "../app/theme/components/CollectionCard/CollectionCard";
import { MOCK_COLLECTION } from "./mocks/mocks";
import { unstable_createRemixStub as createRemixStub } from "@remix-run/testing";

const meta = {
  title: "Example/CollectionCard",
  component: CollectionCard,
  decorators: [
    (story) => {
      const remixStub = createRemixStub([
        {
          path: "/*",
          action: () => ({ redirect: "/" }),
          loader: () => ({ redirect: "/" }),
          Component: () => story(),
        },
      ]);

      return remixStub({ initialEntries: ["/"] });
    },
  ],
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof CollectionCard>;

[AYastrebtsov]

Just started a new project, works like a charm!

[comuneoOrg]

Ohhh you just saved me hours! Thanks!

[lorenzo-del-rosario]

I was having the same issue with "@remix-run/testing": "^2.4.1", even after using the new Component argument that came out with version 2.
Downgrading "@remix-run/testing": "^2.1.0" with "@remix-run/react": "2.1.0" solved the issue.