import type { StorybookConfig } from '<%= uiFramework %>';
<% if (usesVite && !viteConfigFilePath) { %>
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';
<% } %><% if (uiFramework === '@storybook/vue3-vite' && !viteConfigFilePath) { %>import vue from '@vitejs/plugin-vue'<% } %><% if (uiFramework === '@storybook/react-vite' && !viteConfigFilePath) { %>import react from '@vitejs/plugin-react'<% } %>

const config: StorybookConfig = {
  stories: [
    <% if((uiFramework === '@storybook/angular' && projectType === 'library') || uiFramework === '@storybook/nextjs') { %>
    '../**/*.@(mdx|stories.@(js|jsx|ts|tsx))' <% } else { %>
    '../<%= projectDirectory %>/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'
  <% } %>],
  addons: [<% if(uiFramework === '@storybook/react-webpack5') { %>, '@nx/react/plugins/storybook' <% } %>],
  framework: {
    name: '<%= uiFramework %>',
    options: {
      <% if (usesVite && viteConfigFilePath && hasPlugin) { %>
      builder: {
        viteConfigPath: '<%= viteConfigFileName %>',
      },
      <% } %><% if (usesVite && viteConfigFilePath && !hasPlugin) { %>
      builder: {
        viteConfigPath: '<%= viteConfigFilePath %>',
      },
      <% } %>
    },
  },
  <% if (usesReactNative && uiFramework === '@storybook/react-webpack5') { %>webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        'react-native$': 'react-native-web',
      };
      config.resolve.extensions = [
        '.web.tsx',
        '.web.ts',
        '.web.jsx',
        '.web.js',
        ...(config.resolve.extensions ?? []),
      ];
    }
    return config;
  },<% } %><% if (usesVite && !viteConfigFilePath) { %>
  viteFinal: async (config) =>
    mergeConfig(config, {
      <% if (usesReactNative) { %>define: {
        global: 'window',
      },
      resolve: {
        extensions: [
          '.mjs',
          '.web.tsx',
          '.tsx',
          '.web.ts',
          '.ts',
          '.web.jsx',
          '.jsx',
          '.web.js',
          '.js',
          '.css',
          '.json',
          ...(config.resolve?.extensions ?? []),
        ],
        alias: {
          'react-native': 'react-native-web',
        },
      },<% } %>
      plugins: [<% if(uiFramework === '@storybook/vue3-vite') { %>vue(), <% } %><% if(uiFramework === '@storybook/react-vite') { %>react(), <% } %>nxViteTsPaths()],
    }),
  <% } %>
};

export default config;

<% if(!usesVite) { %>
// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/recipes/storybook/custom-builder-configs
<% } %>

<% if(usesVite) { %>
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs
<% } %>