storybook-addon-mantine

在不重新啟動 Storybook 的情況下，切換多個 Mantine 主題，並以每個套用的主題視覺化您的元件/頁面。

2千

每週下載次數

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/)。
將第二個參數 mantineProviderProps 新增至 mantineTheme(themesList, mantineProviderProps)

1.0

初始版本

由

josiahayres 製作

適用於

React

標籤

如何安裝擴充套件建立擴充套件