From 76882978ec04327a9895e0f765834476fcedac1b Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 26 May 2024 18:19:09 +0900
Subject: [PATCH] feat: add viewport configuration in storybook
---
packages/react/.storybook/main.ts | 2 +-
packages/react/.storybook/preview.tsx | 57 ++++++++++++++++++++++++++-
2 files changed, 56 insertions(+), 3 deletions(-)
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index 9c6bf87..a943880 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -27,4 +27,4 @@ const config: StorybookConfig = {
options: {},
},
};
-export default config;
+export default config
diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
index 6351b75..407feb2 100644
--- a/packages/react/.storybook/preview.tsx
+++ b/packages/react/.storybook/preview.tsx
@@ -88,12 +88,65 @@ const autoDocsTemplate = () => (
const preview: Preview = {
parameters: {
- /*controls: {
+ controls: {
matchers: {
color: /(background|color)$/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: {
page: autoDocsTemplate,
},