import type { StorybookConfig } from '@storybook/angular';
import remarkGfm from 'remark-gfm';

// WP-67: one config dir per app — a single merged tsconfig can't resolve both apps' @auth/*
// alias at once (each points at a different physical directory), so this Storybook instance
// only ever compiles under the ssp project's own browserTarget/tsconfig (see angular.json's
// ssp:storybook target) and only globs ssp's own stories + the shared libraries'.
const config: StorybookConfig = {
  stories: [
    '../apps/ssp/src/**/*.mdx',
    '../libs/shared/**/*.mdx',
    '../libs/beheer/**/*.mdx',
    '../apps/ssp/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../libs/shared/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../libs/beheer/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-a11y',
    // remark-gfm so GFM pipe tables in *.mdx docs actually render (addon-docs
    // doesn't parse them without it).
    {
      name: '@storybook/addon-docs',
      options: { mdxPluginOptions: { mdxCompileOptions: { remarkPlugins: [remarkGfm] } } },
    },
    '@storybook/addon-onboarding',
  ],
  framework: '@storybook/angular',
  // Serve the vendored CIBG package so preview-head.html can <link> its CSS (and its
  // relative font/icon/image url()s resolve) — mirrors index.html for the real app.
  staticDirs: ['../public'],
  // Webpack's own auto-DefinePlugin (from `optimization.nodeEnv`) and Storybook's preset both
  // define `process.env.NODE_ENV` on the same compile, which webpack warns about as
  // "Conflicting values" even though they resolve to the same string. Disable the redundant one.
  webpackFinal: async (config) => {
    config.optimization = { ...config.optimization, nodeEnv: false };
    return config;
  },
};
export default config;