From 03331c44276ec56e9f235e4d5ee75030455a753f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 19 Sep 2023 15:47:08 +0200
Subject: build(deps): bump all dependencies

* MDX type has changed so some components props had to be updated
* Since Storybook now supports TS, I renamed the main/preview files
---
 .storybook/preview.tsx | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 .storybook/preview.tsx

(limited to '.storybook/preview.tsx')

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 0000000..2b7a466
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,66 @@
+import type { Decorator, Preview } from '@storybook/react';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { FC, ReactNode, useEffect } from 'react';
+import { IntlProvider } from 'react-intl';
+import { useDarkMode } from 'storybook-dark-mode';
+import { DocsContainer } from './overrides/docs-container';
+import dark from './themes/dark';
+import light from './themes/light';
+import '../src/styles/globals.scss';
+
+type ThemeWrapperProps = {
+  children: ReactNode;
+};
+
+// Create a component that listens for theme change.
+export const ThemeWrapper: FC<ThemeWrapperProps> = ({ children }) => {
+  const { setTheme } = useTheme();
+  const theme = useDarkMode() ? 'dark' : 'light';
+
+  useEffect(() => {
+    setTheme(theme);
+  }, [theme, setTheme]);
+
+  return <>{children}</>;
+};
+
+const withAllProviders: Decorator = (Story) => {
+  return (
+    <IntlProvider locale="en">
+      <ThemeProvider
+        defaultTheme="system"
+        enableColorScheme={true}
+        enableSystem={true}
+      >
+        <ThemeWrapper>
+          <Story />
+        </ThemeWrapper>
+      </ThemeProvider>
+    </IntlProvider>
+  );
+};
+
+const preview: Preview = {
+  decorators: [withAllProviders],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    darkMode: {
+      // Override the default dark theme
+      dark: { ...dark },
+      // Override the default light theme
+      light: { ...light },
+      stylePreview: true,
+    },
+    docs: {
+      container: DocsContainer,
+    },
+  },
+};
+
+export default preview;
-- 
cgit v1.2.3