From ae90f174f8cc0809527abb5a2b80eee5174a3352 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 3 Jul 2025 14:43:14 +0800
Subject: [PATCH] storybook: add viewports

---
 next-ui/.storybook/preview.ts  |  6 +++++-
 next-ui/.storybook/viewport.ts | 37 ++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 next-ui/.storybook/viewport.ts

diff --git a/next-ui/.storybook/preview.ts b/next-ui/.storybook/preview.ts
index 52b37deb..f588eeea 100644
--- a/next-ui/.storybook/preview.ts
+++ b/next-ui/.storybook/preview.ts
@@ -12,6 +12,8 @@ import { vueIntl } from '@/plugins/vue-intl'
 import 'virtual:uno.css'
 import { availableLocales } from '@/utils/i18n/locale-helper'
 import { localeDecorator } from './locale.decorator'
+import { INITIAL_VIEWPORTS } from 'storybook/viewport'
+import { viewports } from './viewport'
 
 initialize(
   {
@@ -36,7 +38,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-
+    viewport: {
+      options: [...viewports],
+    },
     a11y: {
       // 'todo' - show a11y violations in the test UI only
       // 'error' - fail CI on a11y violations
diff --git a/next-ui/.storybook/viewport.ts b/next-ui/.storybook/viewport.ts
new file mode 100644
index 00000000..98a1758b
--- /dev/null
+++ b/next-ui/.storybook/viewport.ts
@@ -0,0 +1,37 @@
+export const viewports = [
+  {
+    name: 'xs',
+    styles: {
+      width: '400px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'sm',
+    styles: {
+      width: '950px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'md',
+    styles: {
+      width: '1200px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'lg',
+    styles: {
+      width: '1900px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'xl',
+    styles: {
+      width: '2550px',
+      height: '963px',
+    },
+  },
+]