new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

storybook/setup

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Storybook integration requires Storybook 10+

The Mantine Storybook integration guide covers only Storybook 10 and newer versions. Older versions of Storybook are not supported.

Install @storybook/addon-themes for Mantine

To set up Mantine in Storybook, install the @storybook/addon-themes addon as a dev dependency using npm.

Add @storybook/addon-themes to addons in .storybook/main.ts

In the .storybook/main.ts configuration file, add '@storybook/addon-themes' to the addons array to enable theme switching in Storybook.

Create a shared theme file for Mantine and Storybook

Create a src/theme.ts file that uses createTheme() from @mantine/core to define theme overrides. This shared theme object can be used in both your application's MantineProvider and in Storybook.

Storybook preview configuration for Mantine

Create or edit .storybook/preview.tsx with the following configuration: import @mantine/core/styles.css, import ColorSchemeScript and MantineProvider from @mantine/core, set parameters with layout: 'fullscreen', options: { showPanel: false, storySort: (a, b) => a.title.localeCompare(b.title, undefined, { numeric: true }) }, and backgrounds: { disable: true }. Define globalTypes.theme with name: 'Theme', description: 'Mantine color scheme', defaultValue: 'light', and toolbar with icon: 'mirror' and items array containing { value: 'light', title: 'Light' } and { value: 'dark', title: 'Dark' }.

Storybook decorator for Mantine theme switching

Add a decorator to the decorators array in .storybook/preview.tsx that receives renderStory and context parameters. The decorator extracts the theme value from context.globals.theme (defaulting to 'light') and wraps the rendered story with MantineProvider passing both the theme object and forceColorScheme prop set to the selected scheme ('light' or 'dark'). Also include ColorSchemeScript as a child of MantineProvider.

Initialize Storybook in a Mantine project

Run npx storybook@latest init to add Storybook to your application.

Start Storybook in a Mantine project

After configuration is complete, run npm run storybook to start the Storybook development server.

Give your agent this brain