All files / .storybook preview.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { Preview } from "@storybook/react-vite"
import "../src/index.css" // Import Tailwind CSS and other global styles
import { StorybookWebview } from "../src/config/StorybookDecorator"
 
const preview: Preview = {
	parameters: {
		viewport: {
			viewports: {
				"Editor Sidebar": {
					name: "Editor Sidebar",
					styles: { width: "700px", height: "800px" },
					type: "desktop",
				},
			},
			defaultViewport: "Editor Sidebar",
		},
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i,
			},
		},
		docs: {
			theme: {
				base: "dark",
				colorPrimary: "#3794ff",
				colorSecondary: "#0e639c",
				appBg: "#1e1e1e",
				appContentBg: "#252526",
				textColor: "#d4d4d4",
			},
		},
		layout: "padded",
	},
	decorators: [StorybookWebview],
	globalTypes: {
		theme: {
			description: "Color Themes",
			defaultValue: "vs_dark",
			toolbar: {
				dynamicTitle: true,
				icon: "sun",
				title: "Themes",
				items: [
					{ value: "vs_dark", title: "VS Code Dark" },
					{ value: "vs_light", title: "VS Code Light" },
				],
			},
		},
	},
}
 
export default preview