From 0830be3e85d344dc590422e999b607f27993f7b9 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 1 Apr 2024 16:35:15 -0400
Subject: [PATCH] Update

---
 .../redux-devtools-ui/.storybook/preview.ts   | 14 -----
 .../redux-devtools-ui/.storybook/preview.tsx  | 60 +++++++++++++++++++
 2 files changed, 60 insertions(+), 14 deletions(-)
 delete mode 100644 packages/redux-devtools-ui/.storybook/preview.ts
 create mode 100644 packages/redux-devtools-ui/.storybook/preview.tsx

diff --git a/packages/redux-devtools-ui/.storybook/preview.ts b/packages/redux-devtools-ui/.storybook/preview.ts
deleted file mode 100644
index adcda96b..00000000
--- a/packages/redux-devtools-ui/.storybook/preview.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/react';
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/packages/redux-devtools-ui/.storybook/preview.tsx b/packages/redux-devtools-ui/.storybook/preview.tsx
new file mode 100644
index 00000000..97567f9f
--- /dev/null
+++ b/packages/redux-devtools-ui/.storybook/preview.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+
+import { Container } from '../src';
+import { listSchemes, listThemes } from '../src/utils/theme';
+
+const withThemeProvider = (Story, context) => (
+  <Container
+    themeData={{
+      theme: context.globals.theme,
+      scheme: context.globals.scheme,
+      colorPreference: context.globals.color,
+    }}
+  >
+    <Story {...context} />
+  </Container>
+);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'default',
+      toolbar: {
+        items: listThemes(),
+        showName: true,
+      },
+    },
+    scheme: {
+      name: 'Color Scheme',
+      description: 'Global color scheme for components',
+      defaultValue: 'default',
+      toolbar: {
+        items: listSchemes(),
+        showName: true,
+      },
+    },
+    color: {
+      name: 'Color',
+      description: 'Global color for components',
+      defaultValue: 'light',
+      toolbar: {
+        items: ['auto', 'light', 'dark'],
+        showName: true,
+      },
+    },
+  },
+  decorators: [withThemeProvider],
+};
+
+export default preview;