import { useEffect, type ReactNode } from 'react';
import type { Preview, Decorator } from 'storybook-react-rsbuild';
import { Tooltip } from 'radix-ui';
/* The shipped library surface, exactly as a consumer would load it.
Fonts are loaded via preview-head.html (Google Fonts link + Anta @font-face)
to avoid bundler inlining the @import url() mid-stylesheet. */
import '../src/styles/index.css';
/* Storybook-only canvas styling (background, docs blocks). */
import './preview.css';
import theme from './theme';
/* Toolbar theme switch → drives `data-theme` on , same lever as the
library's ThemeProvider. The frame stays content-sized; the dark canvas
comes from preview.css, so stories never balloon to full-viewport. */
function ThemeFrame({ theme, children }: { theme: string; children: ReactNode }) {
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);
return {children};
}
const withModernSk: Decorator = (Story, context) => (
);
const preview: Preview = {
tags: ['autodocs'],
decorators: [withModernSk],
parameters: {
layout: 'centered',
backgrounds: { disable: true },
docs: { theme },
controls: {
matchers: { color: /(background|color)$/i, date: /Date$/i },
},
options: {
storySort: { order: ['Getting Started', 'Inputs', 'Selection', 'Feedback', 'Overlays', 'Data Display', 'Layout'] },
},
},
globalTypes: {
theme: {
description: 'ModernSK theme',
defaultValue: 'dark',
toolbar: {
title: 'Theme',
icon: 'contrast',
items: [
{ value: 'dark', title: 'Dark', icon: 'moon' },
{ value: 'light', title: 'Light', icon: 'sun' },
],
dynamicTitle: true,
},
},
},
};
export default preview;