feat: add viewport configuration in storybook

This commit is contained in:
p-sw 2024-05-26 18:19:09 +09:00
parent 58e188f273
commit 76882978ec
2 changed files with 56 additions and 3 deletions

View File

@ -27,4 +27,4 @@ const config: StorybookConfig = {
options: {}, options: {},
}, },
}; };
export default config; export default config

View File

@ -88,12 +88,65 @@ const autoDocsTemplate = () => (
const preview: Preview = { const preview: Preview = {
parameters: { parameters: {
/*controls: { controls: {
matchers: { matchers: {
color: /(background|color)$/i, color: /(background|color)$/i,
date: /Date$/i, date: /Date$/i,
}, },
},*/ },
viewport: {
viewports: {
min: {
name: "min",
styles: {
width: "320px",
height: "100%",
},
type: "mobile",
},
sm: {
name: "sm",
styles: {
width: "640px",
height: "100%",
},
type: "mobile",
},
md: {
name: "md",
styles: {
width: "768px",
height: "100%",
},
type: "tablet",
},
lg: {
name: "lg",
styles: {
width: "1024px",
height: "100%",
},
type: "tablet",
},
xl: {
name: "xl",
styles: {
width: "1280px",
height: "100%",
},
type: "desktop",
},
"2xl": {
name: "2xl",
styles: {
width: "1536px",
height: "100%",
},
type: "desktop",
},
},
defaultViewport: "2xl",
},
docs: { docs: {
page: autoDocsTemplate, page: autoDocsTemplate,
}, },