import type { Preview } from '@storybook/angular';
import { componentWrapperDecorator } from '@storybook/angular';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
setCompodocJson(docJson);

const preview: Preview = {
  // Apply the Rijkshuisstijl theme classes around every story so the design
  // tokens cascade (global component CSS comes from the app's build target).
  decorators: [
    componentWrapperDecorator(
      (story) => `<div class="rhc-theme lintblauw utrecht-document" style="padding:1.5rem">${story}</div>`
    ),
  ],
  parameters: {
    layout: 'padded',
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;