generated from x7ddf74479jn5/turbo-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
preview.tsx
68 lines (64 loc) · 1.61 KB
/
preview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import "../styles.css";
import {
Title,
Subtitle,
Description,
Primary,
ArgsTable,
Stories,
} from "@storybook/blocks";
import type { Preview } from "@storybook/react";
import React from "react";
import { ThemeProvider } from "./theme";
const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
options: {
isFullscreen: false,
isToolshown: true,
storySort: {
order: ["Getting Started", "Concepts"],
},
},
docs: {
// ArgsTable は deprecated で、subcomponentsで複数コンポーネントの props を見せる機能は非推奨になった
// ここでは、一旦v6.5->v7アップデート時に後方互換を保つために独自のpageを設定している
// 参考: https://github.com/storybookjs/storybook/issues/20782#issuecomment-1482771013
page: () => (
<>
<Title />
<Subtitle />
<Description />
<Primary />
<ArgsTable />
<Stories includePrimary={false} />
</>
),
},
},
globalTypes: {
theme: {
name: "Theme",
description: "ストーリー描画時のテーマを設定します",
defaultValue: "default",
toolbar: {
icon: "paintbrush",
items: ["Default", "Bubblegum", "Gunmetal"],
},
},
},
decorators: [
(Story, context) => (
<ThemeProvider theme={context.globals.theme}>
<Story />
</ThemeProvider>
),
],
};
export default preview;