Storybook Preview Custom Elements Config

import { setCustomElementsManifest } from '@storybook/web-components-vite';

import customElements from '../custom-elements.json';

setCustomElementsManifest(customElements);

export default {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

import type { Preview } from '@storybook/web-components-vite';

import { setCustomElementsManifest } from '@storybook/web-components-vite';

import customElements from '../custom-elements.json';

setCustomElementsManifest(customElements);

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

import { definePreview, setCustomElementsManifest } from '@storybook/web-components-vite';

import customElements from '../custom-elements.json';

setCustomElementsManifest(customElements);

export default definePreview({
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
});

import { definePreview, setCustomElementsManifest } from '@storybook/web-components-vite';

import customElements from '../custom-elements.json';

setCustomElementsManifest(customElements);

export default definePreview({
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
});