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);

if (typeof document !== 'undefined') document.body.classList.add('brand--cibg');

const preview: Preview = {
  decorators: [componentWrapperDecorator((story) => `<div style="padding:1.5rem">${story}</div>`)],
  parameters: {
    layout: 'padded',
    a11y: {
      config: { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'] } },
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    // Sidebar tells the DDD seam: reusable design system, then domain contexts. The
    // "Foundations" MDX pages live in libs/shared/docs and apply to either app's Storybook.
    options: {
      storySort: {
        order: [
          'Foundations',
          [
            'Overview',
            'Learning Path',
            'Domain-Driven Design',
            'Atomic Design',
            'FP in the UI',
            'State Machines (TEA)',
            'RemoteData & Async',
            "Parse, don't validate",
            'Design Tokens',
            'CIBG Gap Register',
            'Accessibility',
            'Testing strategy',
            'BDD',
            'Internationalization',
          ],
          'Design System',
          ['Atoms', 'Molecules', 'Organisms', 'Templates', 'Devtools'],
          'Domein',
        ],
      },
    },
  },
};

export default preview;