Skip to content

Commit

Permalink
update docs and version for merge
Browse files Browse the repository at this point in the history
  • Loading branch information
josiahayres committed Sep 24, 2023
1 parent 3559a63 commit dd03cc6
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 3 deletions.
34 changes: 32 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export const brandTheme = createTheme({
Do this in your `.storybook/preview.tsx` file:

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

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

Expand Down Expand Up @@ -101,7 +103,31 @@ See [Documentation Page](https://mantine.dev/theming/mantine-provider/#mantinepr
Workaround is to configure mantine `useMantineColorScheme` hook in your storybook instance, see [Mantine documentation for all steps](https://mantine.dev/guides/storybook/).

The key difference being to use
Install Storybook addons:

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

Add addons to .storybook/main.ts:

```jsx
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;
```

Create your theme(s) as explained previously.

```jsx
// Import styles of packages that you've installed.
Expand All @@ -112,7 +138,7 @@ 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();
Expand Down Expand Up @@ -151,6 +177,10 @@ export const decorators = [
];
```

That should be it!

`npm run storybook`

## Versions

### 3.0
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "storybook-addon-mantine",
"version": "3.0.0-beta.0",
"version": "3.0.0",
"description": "Switch between multiple mantine themes without restarting Storybook, and visualise your components / pages with each theme applied.",
"main": "dist/index.js",
"module": "dist/index.mjs",
Expand Down

0 comments on commit dd03cc6

Please sign in to comment.