github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/.storybook/preview.jsx (about) 1 import StoryWrapper from "./StoryWrapper"; 2 import { ThemeProvider } from "../src/hooks/useStorybookTheme"; 3 import { themes } from "@storybook/theming"; 4 import { withRouter } from "storybook-addon-react-router-v6"; 5 import "../src/styles/index.css"; 6 7 const viewports = { 8 xs: { 9 name: "Extra Small", 10 styles: { 11 width: "400px", 12 height: "500px", 13 }, 14 type: "mobile", 15 }, 16 sm: { 17 name: "Small", 18 styles: { 19 width: "640px", 20 height: "800px", 21 }, 22 type: "mobile", 23 }, 24 md: { 25 name: "Medium", 26 styles: { 27 width: "768px", 28 height: "800px", 29 }, 30 type: "tablet", 31 }, 32 lg: { 33 name: "Large", 34 styles: { 35 width: "1024px", 36 height: "800px", 37 }, 38 type: "desktop", 39 }, 40 xl: { 41 name: "Extra Large", 42 styles: { 43 width: "1280px", 44 height: "900px", 45 }, 46 type: "desktop", 47 }, 48 "2xl": { 49 name: "Extra Extra Large", 50 styles: { 51 width: "1536px", 52 height: "1000px", 53 }, 54 type: "desktop", 55 }, 56 }; 57 58 export const decorators = [ 59 withRouter, 60 (Story) => ( 61 <ThemeProvider> 62 <StoryWrapper> 63 <Story /> 64 </StoryWrapper> 65 </ThemeProvider> 66 ), 67 ]; 68 69 export const parameters = { 70 actions: { argTypesRegex: "^on[A-Z].*" }, 71 darkMode: { 72 // Override the default dark theme 73 dark: { 74 ...themes.dark, 75 appContentBg: "#181717", 76 }, 77 // Override the default light theme 78 light: { ...themes.normal }, 79 }, 80 viewport: { 81 viewports, 82 }, 83 };