storybook-addon-mantine

无需重启 Storybook 即可在多个 Mantine 主题之间切换，并可视化应用了每个主题的组件/页面。

每周下载量

storybook-addon-mantine

无需重启 Storybook 即可在多个 Mantine 主题之间切换，并可视化应用了每个主题的组件/页面。

如何使用

安装附加组件

npm i -D storybook-addon-mantine

注册附加组件

在项目的 .storybook/main.ts 文件中执行此操作

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // ... other config properties
  addons: [
    // ... other addons
    "storybook-addon-mantine",
  ],
};

export default config;

主题

// src/themes.ts
import { createTheme } from "@mantine/core";

export const greenTheme = createTheme({
  primaryColor: "green",
  // ... other theme override properties
});

export const brandTheme = createTheme({
  fontFamily: "serif",
  // ... other theme override properties
});

将你的主题传递给附加组件

在你的 .storybook/preview.tsx 文件中执行此操作

import "@mantine/core/styles.css";

import { withMantineThemes } from "storybook-addon-mantine";
import { greenTheme, brandTheme } from "../themes";

export const decorators = [
  withMantineThemes({
    themes: [
      {
        id: "brand-theme",
        name: "Brand Theme",
        ...brandTheme,
      },
      {
        id: "light-green",
        name: "Light Green Theme",
        ...greenTheme,
      },
    ],
  }),
];

选项

`withMantineThemes({themes, mantineProviderProps})`

在 .storybook/preview.js 中的装饰器数组内调用此函数。

`themes`

要在 Storybook 中显示的主题列表。每个主题都应该是一个有效的 Mantine 主题覆盖对象。

此外，每个主题对象必须具有

id: string - 必需，在主题之间必须唯一
name?: string - 可选，在列表中显示的用于从主题中进行选择的名称。

`mantineProviderProps`

这是要传递给 MantineProvider 组件的可选属性对象。
查看文档页面获取详细信息。

大多数用例不需要为该对象设置任何内容。

颜色方案（深色/浅色模式）支持

不能在 Storybook v7 的附加组件中使用 mantine hook。需要将 Storybook 管理器 UI 升级到 React 18（以便附加组件可以使用 React 的 useId hook）。这似乎已计划在 Storybook 8 版本中发布。

解决方法是在你的 Storybook 实例中配置 mantine useMantineColorScheme hook，查看 Mantine 文档以获取所有步骤。

安装 Storybook 附加组件

npm install -D storybook-dark-mode @storybook/addon-styling storybook-addon-mantine

将附加组件添加到 .storybook/main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // ... other config properties
  addons: [
    // ... other addons
    "@storybook/addon-styling",
    "storybook-dark-mode",
    "storybook-addon-mantine",
  ],
};

export default config;

如前所述创建你的主题。

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import "@mantine/core/styles.css";

import React, { useEffect } from "react";
import { addons } from "@storybook/preview-api";
import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
import { MantineProvider, useMantineColorScheme } from "@mantine/core";
import { withMantineThemes } from "storybook-addon-mantine";
import { greenTheme, brandTheme } from "../themes";

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>
  ),
  withMantineThemes({
    themes: [
      {
        id: "brand-theme",
        name: "Brand Theme",
        ...brandTheme,
      },
      {
        id: "light-green",
        name: "Light Green Theme",
        ...greenTheme,
      },
    ],
  }),
];

应该就这些了！

npm run storybook

版本

此表将帮助你选择正确的 storybook-addon-mantine 版本

Storybook 版本	Mantine 版本	storybook-addon-mantine 版本
8	7	4.x
7	7	3.0.1
7	6	2.0.21
6	6	1.3
6	5	1.2
6	4	1.0

4.0

仅支持 Storybook 8 和 Mantine 7。

3.0

支持 Storybook 7。支持 Mantine v7 版本。

这些是值得注意的

仅 React 18+
主题对象中没有颜色方案
[创建主题函数](https://mantine.dev/changelog/7-0-0/#createtheme-function
主题对象更改

2.0

支持 Storybook 7 - 无法与旧版本的 Storybook 配合使用。
使用 AddonKit 和 Typescript 重新构建了整个包。
在组件示例之间切换时始终保持选定的主题，而不是每次都默认返回第一个主题。

1.3

支持 Mantine v6 (https://mantine.dev/changelog/6-0-0/).
仅将 @mantine/core 作为对等依赖项

1.2

更新对等依赖项

1.1

支持 Mantine v5 (https://mantine.dev/changelog/5-0-0/).
在 mantineTheme(themesList, mantineProviderProps) 中添加了第二个参数 mantineProviderProps

1.0

初始版本

作者

josiahayres

与之配合使用

React

标签

如何安装附加组件创建附加组件