Init

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from '@storybook/react-vite'
+import { PreviewDecorator } from './previewDecorator';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    PreviewDecorator,
+  ],
+};
+
+export default preview;

.storybook/previewDecorator.tsx

@@ -0,0 +1,13 @@
+import { MantineProvider } from '@mantine/core';
+import '@mantine/core/styles.css';
+
+export function PreviewDecorator(Story: any, { parameters }: any) {
+  console.log('Rendering decorator', parameters);
+  return (
+    <MantineProvider>
+      <div style={{ height: 'calc(100vh - 64px)', width: 'calc(100vw - 64px)' }}>
+        <Story key={'mainStory'} />
+      </div>
+    </MantineProvider>
+  );
+}