📣 Storybook in Redwood is moving to Vite!

Announcements Releases and Upgrade Guides
23

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>
  ),
];