How to use Remix Link components in Storybook #6273

tachibanayu24 · 2023-05-02T05:51:04Z

tachibanayu24
May 2, 2023

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.

Answered by simonepizzamiglio

May 16, 2023

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 …

View full answer

DotwoodMedia · 2023-05-05T20:58:19Z

DotwoodMedia
May 5, 2023

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;

1 reply

tachibanayu24 May 8, 2023
Author

@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 · 2023-05-08T04:14:03Z

tachibanayu24
May 8, 2023
Author

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?

0 replies

florianchevallier · 2023-05-11T14:11:24Z

florianchevallier
May 11, 2023

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 !

12 replies

tachibanayu24 May 16, 2023
Author

@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 May 16, 2023

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 = {};

Answer selected by tachibanayu24

tachibanayu24 May 17, 2023
Author

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 Sep 20, 2023

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

maxxborer Sep 20, 2023

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 Nov 3, 2023

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

coindegen · 2023-09-26T09:09:23Z

coindegen
Sep 26, 2023

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

3 replies

AYastrebtsov Apr 10, 2024

Just started a new project, works like a charm!

comuneoOrg May 3, 2024

Ohhh you just saved me hours! Thanks!

UnworldlyEel Sep 27, 2024

thank you DEGEN, you saved me a bunch of frustration!

lorenzo-del-rosario · 2024-01-17T01:24:58Z

lorenzo-del-rosario
Jan 17, 2024

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.

0 replies

thegrid22593 · 2024-10-17T23:11:58Z

thegrid22593
Oct 17, 2024

If you are using storybook 8, you need to migrate to using this package from storybook.

Also, be sure to be on the same version of any package prefixed with @remix-run/

Here is an example:

import { withRouter } from 'storybook-addon-remix-react-router';

const meta: Meta<typeof TextLink> = {
  component: TextLink,
  title: 'TextLink',
  tags: ['test'],
  decorators: [withRouter]
};

Also, if you are adding withRouter to the decorator preview.ts it will not work with any index.spec.tsx tests. You will have to apply the withRouter decorator to the component meta itself.

2 replies

nickfujita Oct 18, 2024

Thanks for this suggestion. I just tried it out, but for some reason it's not working with Remix, only react-router.
More details: JesusTheHun/storybook-addon-remix-react-router#74

Curious if there was any specific gotchas to look out for? What did you mean by Also, be sure to be on the same version of any package prefixed with @remix-run/?

thegrid22593 Oct 18, 2024

@nickfujita - what I meant is when using remix there are a few packages installed. In our case some include

@remix-run/react
@remix-run/serve
@remix-run/node
@remix-run/testing

All of these and any others you may have should all be on the same version, in our case its 2.13.1 which is latest at the time of this comment, but should work with minor versions off V2.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use Remix Link components in Storybook #6273

{{title}}

Replies: 6 comments 18 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to use Remix Link components in Storybook #6273

Replies: 6 comments · 18 replies

tachibanayu24 May 8, 2023 Author

tachibanayu24 May 8, 2023 Author

tachibanayu24 May 16, 2023 Author

tachibanayu24 May 17, 2023 Author

Replies: 6 comments 18 replies

tachibanayu24 May 8, 2023
Author

tachibanayu24
May 8, 2023
Author

tachibanayu24 May 16, 2023
Author

tachibanayu24 May 17, 2023
Author