📣 Storybook in Redwood is moving to Vite!

[Philzen]

Two more cents:

1. One nice DX QOL improvement when migrating preview.js to typescript is to import type { Preview } from '@storybook/react' (only just discovered that in the Storybook migration docs) to get some nice typing for the default export.

2. on another note, VS Code does not seem happy anymore with abbreviated import paths (which were OK in web/config/storybook.preview.js and which we are all used to in the Redwood stack):
   

   
   
   It’s just red squiggles though – storybook-vite starts up, compiles and picks up all preview settings fine. So this “bug” is merely cosmetic. Until this is fixed, one can get rid of the red squiggles by writing out the relative, completely qualified import path (so that’d be '../src/components/ConfirmDialog/ConfirmDialog and ../src/components/ColorModeSwitch/ColorModeSwitch in my example) in the meantime.

[simoncrypta]

Really excited to see SB moving to Vite in RW !

We got 2 problems that are maybe unique to our case, but I didn’t find a way to solved them.

1.: We cannot load stories because of this error :

Attempted to resolveName for an unsupported path. resolveName does not accept ObjectMethod". (x2)
2:41:26 PM [vite] Internal server error: Attempted to resolveName for an unsupported path. resolveName does not accept ObjectMethod".
  Plugin: storybook:react-docgen-plugin
  File: /Users/simongagnon/Dev/leftlane_app/utils/dist/chunk-TED5DSF4.mjs
      at resolveName (/Users/simongagnon/Dev/leftlane_app/node_modules/react-docgen/dist/utils/getMemberExpressionValuePath.js:46:11)
[...]

The file is from our shared package that contains TS functions. I look like it trying to read it as a React file unsuccessfully.

2.: We have a custom webpack config for storybook that allows us to run mock function like mockGraphQLQuery in prod storybook. We do need mock in prod because we use SB test runner and on CI it’s way faster to build SB first and then run test than doing it as local dev. It’s also required for Chromatic to run. I didn’t put that much effort to find an alternative to webpackFinal for SB config file, but I’m curious to know if it’s possible to add mock in prod?

Thank you for this effort of making Vite SB possible in RW, I will try to put more time finding solutions to these issues.

[jamesj]

Has anyone got Mantine V7 working with Storybook on RW v8?

My storybook.preview.tsx looks like:

import * as React from 'react'

import { MantineProvider, useMantineColorScheme } from '@mantine/core'
import type { GlobalTypes } from '@storybook/csf'
import { addons } from '@storybook/preview-api'
import type { StoryFn, StoryContext } from '@storybook/react'
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'
import theme from './mantine.config'
import '@mantine/core/styles.css'
import '@mantine/dates/styles.css'

const channel = addons.getChannel()

export const globalTypes: GlobalTypes = {}

function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
  const { setColorScheme } = useMantineColorScheme()
  const handleColorScheme = (value: boolean) =>
    setColorScheme(value ? 'dark' : 'light')

  React.useEffect(() => {
    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme)
    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme)
  }, [channel])

  return children
}

const withMantine = (StoryFn: StoryFn, context: StoryContext) => {
  return (
    <MantineProvider theme={theme}>
      <ColorSchemeWrapper>
        <StoryFn {...context} />
      </ColorSchemeWrapper>
    </MantineProvider>
  )
}

export const decorators = [withMantine]

I followed what Mantine suggests and I am clearly using the Provider, but whenever I look at any of my components I get an error:

Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app

I have MantineProvider in my App.tsx and it works in my app perfectly, but even though I specified it here in the preview.tsx it errors?

I also tried this:
This didn’t work either:

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';

import { useEffect } from 'react';
import { addons } from '@storybook/preview-api';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
import {
  MantineProvider,
  useMantineColorScheme,
} from '@mantine/core';
// theme.ts file from previous step
import theme from './mantine.config';

const channel = addons.getChannel();

function ColorSchemeWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  const { setColorScheme } = useMantineColorScheme();
  const handleColorScheme = (value: boolean) =>
    setColorScheme(value ? 'dark' : 'light');

  useEffect(() => {
    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
  }, [channel]);

  return <>{children}</>;
}

export const decorators = [
  (renderStory: any) => (
    <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>
  ),
  (renderStory: any) => (
    <MantineProvider theme={theme}>{renderStory()}</MantineProvider>
  ),
];

[arimendelow]

I don’t know if you’ve opened any RedwoodJS PRs yet or if you’re interested in doing so, but if you want to, you can open PRs to apply these suggestions directly:

• I haven’t yet updated the docs to go to version-specific doc links (only updated the post here so far)
• You could totally mention that DX QOL improvement for preview.ts(x)!!

Let me know if you’re interested in making those updates to the docs and need any help

On the error, would you mind opening an issue on the repo? It’s much easier to track there than here.

[arimendelow]

Thanks @simoncrypta!

On that first error, can you please create a repo with minimal reproduction and open an issue on Github? It’s tough to debug just from an error message — being able to repro would go a long way.

On the second, can you also open an issue with this and share the webpack config that you were using? Rather than using a webpack config, in the past I’ve done something like this to move the MSW to the correct place for chromatic: Chromatic + RedwoodJS Github Action · GitHub

Thank you!

[arimendelow]

@jamesj this is interesting — would you mind opening an issue on Github and creating a small reproduction repo?

Global decorators like this have worked for me but I’ve also never used Mantine so having a repo that’s already got it somewhat set up would be very helpful

[jamesj]

Of course, here’s the issue you can check out. Just start storybook and try to preview the test component and you’ll see that mantine provider error. I included the preview file I submitted above.

yarn rw dev renders the site with the Mantine components
yarn rw storybook throws the Mantine provider error, even with the aforementioned preview file wrapping decorators

Thanks!

[arimendelow]

Thanks @jamesj! replied and solved here: [Bug?]: Storybook won't work with Mantine · Issue #11177 · redwoodjs/redwood · GitHub

tl;dr: see this section of the first post in this thread: 📣 Storybook in Redwood is moving to Vite! — you need to move your config from the old place to the official Storybook place (from web/config/storybook.preview.tsx to web/.storybook/preview.tsx) and follow the format in their docs.

[evansibok]

Does this mean the:

config
----- storybook.config.js
----- storybook.preview.js
folder and files can be deleted in favor of:

.storybook
— main.ts
— preview-body.html
— preview.tsx

ones?

[arimendelow]

Exactly

The old Storybook config files in the config folder no longer have any use.