213 lines
4.1 KiB
JavaScript
213 lines
4.1 KiB
JavaScript
// .storybook/preview.js
|
|
import { themes } from "@storybook/theming"
|
|
|
|
import "../src/styles/tailwind.css"
|
|
|
|
import * as nextImage from "next/image"
|
|
|
|
// or global addParameters
|
|
export const parameters = {
|
|
docs: {
|
|
theme: themes.normal
|
|
},
|
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
viewport: {
|
|
viewports: {
|
|
mobile1: {
|
|
name: "Small mobile",
|
|
styles: {
|
|
height: "568px",
|
|
width: "320px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
mobile2: {
|
|
name: "Large mobile",
|
|
styles: {
|
|
height: "896px",
|
|
width: "414px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
tablet: {
|
|
name: "Tablet",
|
|
styles: {
|
|
height: "1112px",
|
|
width: "834px"
|
|
},
|
|
type: "tablet"
|
|
},
|
|
iphone5: {
|
|
name: "iPhone 5",
|
|
styles: {
|
|
height: "568px",
|
|
width: "320px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
iphone6: {
|
|
name: "iPhone 6",
|
|
styles: {
|
|
height: "667px",
|
|
width: "375px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
iphone6p: {
|
|
name: "iPhone 6 Plus",
|
|
styles: {
|
|
height: "736px",
|
|
width: "414px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
iphone8p: {
|
|
name: "iPhone 8 Plus",
|
|
styles: {
|
|
height: "736px",
|
|
width: "414px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
iphonex: {
|
|
name: "iPhone X",
|
|
styles: {
|
|
height: "812px",
|
|
width: "375px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
iphonexr: {
|
|
name: "iPhone XR",
|
|
styles: {
|
|
height: "896px",
|
|
width: "414px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
iphonexsmax: {
|
|
name: "iPhone XS Max",
|
|
styles: {
|
|
height: "896px",
|
|
width: "414px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
ipad: {
|
|
name: "iPad",
|
|
styles: {
|
|
height: "1024px",
|
|
width: "768px"
|
|
},
|
|
type: "tablet"
|
|
},
|
|
ipad10p: {
|
|
name: "iPad Pro 10.5-in",
|
|
styles: {
|
|
height: "1112px",
|
|
width: "834px"
|
|
},
|
|
type: "tablet"
|
|
},
|
|
ipad12p: {
|
|
name: "iPad Pro 12.9-in",
|
|
styles: {
|
|
height: "1366px",
|
|
width: "1024px"
|
|
},
|
|
type: "tablet"
|
|
},
|
|
galaxys5: {
|
|
name: "Galaxy S5",
|
|
styles: {
|
|
height: "640px",
|
|
width: "360px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
galaxys9: {
|
|
name: "Galaxy S9",
|
|
styles: {
|
|
height: "740px",
|
|
width: "360px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
nexus5x: {
|
|
name: "Nexus 5X",
|
|
styles: {
|
|
height: "660px",
|
|
width: "412px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
nexus6p: {
|
|
name: "Nexus 6P",
|
|
styles: {
|
|
height: "732px",
|
|
width: "412px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
pixel: {
|
|
name: "Pixel",
|
|
styles: {
|
|
height: "960px",
|
|
width: "540px"
|
|
},
|
|
type: "mobile"
|
|
},
|
|
pixelxl: {
|
|
name: "Pixel XL",
|
|
styles: {
|
|
height: "1280px",
|
|
width: "720px"
|
|
},
|
|
type: "mobile"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Replace next/image for Storybook
|
|
Object.defineProperty(nextImage, "default", {
|
|
configurable: true,
|
|
value: (props) => {
|
|
const { width, height, layout } = props
|
|
|
|
if (layout === "fill") {
|
|
return (
|
|
<img
|
|
style={{
|
|
objectFit: "cover",
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%"
|
|
}}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const ratio = (height / width) * 100
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
paddingBottom: `${ratio}%`,
|
|
position: "relative"
|
|
}}
|
|
>
|
|
<img
|
|
style={{
|
|
objectFit: "cover",
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%"
|
|
}}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
})
|