From 664e46b05396b407f8df7c039d42f7077d7653e6 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Tue, 16 Jan 2024 10:54:59 +0000
Subject: [PATCH] chore: setup custom viewports in storybook to match our
 breakpoints

---
 .storybook/main.ts      |  6 ++++++
 .storybook/preview.ts   |  6 ++++++
 .storybook/viewports.ts | 48 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 .storybook/viewports.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 77bfd406586..6e20e7e5af3 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -26,6 +26,12 @@ const config: StorybookConfig = {
               },
             ],
           },
+
+          {
+            test: /\.(ts|tsx)$/,
+            loader: 'esbuild-loader',
+            options: { tsconfig: './tsconfig.json', target: 'es2020' },
+          },
         ],
       },
     },
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index f63d25c48e6..00342974047 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/react';
 
 import '../src/app/index.css';
+import { customViewports } from './viewports';
 
 const preview: Preview = {
   parameters: {
@@ -11,6 +12,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        ...customViewports,
+      },
+    },
   },
 };
 
diff --git a/.storybook/viewports.ts b/.storybook/viewports.ts
new file mode 100644
index 00000000000..6fde3c7c3a9
--- /dev/null
+++ b/.storybook/viewports.ts
@@ -0,0 +1,48 @@
+import { breakpoints } from '@leather-wallet/tokens';
+
+import { POPUP_HEIGHT, POPUP_WIDTH } from '../src/shared/constants';
+
+export const customViewports = {
+  extension: {
+    name: 'Extension Popout',
+    styles: {
+      width: `${POPUP_WIDTH}px`,
+      height: `${POPUP_HEIGHT}px`,
+    },
+  },
+  sm: {
+    name: 'sm',
+    styles: {
+      width: breakpoints.sm,
+      height: '100%',
+    },
+  },
+  md: {
+    name: 'md',
+    styles: {
+      width: breakpoints.md,
+      height: '100%',
+    },
+  },
+  lg: {
+    name: 'lg',
+    styles: {
+      width: breakpoints.lg,
+      height: '100%',
+    },
+  },
+  xl: {
+    name: 'xl',
+    styles: {
+      width: breakpoints.xl,
+      height: '100%',
+    },
+  },
+  '2xl': {
+    name: '2xl',
+    styles: {
+      width: breakpoints['2xl'],
+      height: '100%',
+    },
+  },
+};