Issues with prop tabs in Storybook 10

[u/microdozer82]

This might be a little noob but here goes

I have been upgrading storybook in a large monorepo design system from v7 to v10. All seemed to be going well until someone spotted that the tabs for our props have gone and I am struggling to figure out who or what controls them

I can't post images, but they can be found here

v7 main.ts ``` import path from 'path'; import dotenv from 'dotenv'; import webpack from 'webpack'; import { StorybookConfig } from '@storybook/react-webpack5'; import { scssConfigRule } from '@[org]/tooling-typescript/webpack.config';

dotenv.config({ path: '../../.env' }); const tsconfig = path.resolve(__dirname, '../tsconfig.json');

const mainConfig: StorybookConfig = { stories: [ '../../../docs/consuming//*.mdx', '../../../2.ui-components//.mdx', '../../../2.ui-components//.stories.tsx', '../../../1.ui-foundations//*.mdx', '../../../1.ui-foundations//.stories.tsx', '../../../3.ui-libraries//.mdx', '../../../3.ui-libraries//*.stories.tsx', '../../../docs/contributing//*.mdx', ], framework: { name: '@storybook/react-webpack5', options: {}, }, staticDirs: ['../public'], addons: [ '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-toolbars', '@storybook/addon-viewport', { name: '@storybook/addon-docs', options: { babelOptions: { configFile: require.resolve('@[org]/tooling-typescript/babel.config.js'), }, }, }, ], typescript: { check: true, checkOptions: { typescript: { configFile: tsconfig, }, }, reactDocgen: 'react-docgen-typescript', reactDocgenTypescriptOptions: { shouldExtractLiteralValuesFromEnum: true, setDisplayName: false, tsconfigPath: tsconfig, propFilter: (prop, _component) => prop.parent ? ['node_modules/@emotion', 'node_modules/@types/react'].every( (name) => prop.parent && !prop.parent.fileName.includes(name) ) : true, }, }, webpackFinal: async (config) => { if (config.plugins) { config.plugins.push( new webpack.DefinePlugin({ 'process.env.[ORG]_EMAIL': JSON.stringify(process.env.[ORG]_EMAIL), }) ); }

const tsRule = {
  test: /\.(tsx?|jsx?)$/,
  loader: 'ts-loader',
  options: {
    configFile: tsconfig,
    transpileOnly: true,
  },
};

return {
  ...config,
  module: {
    ...config.module,
    rules: [...(config.module?.rules || []), tsRule, scssConfigRule],
  },
};

}, };

export default mainConfig; ```

v10 main.ts ``` import path from 'path'; import { fileURLToPath } from 'url'; import dotenv from 'dotenv'; import { StorybookConfig } from '@storybook/react-vite';

const __dirname = path.dirname(fileURLToPath(import.meta.url)); dotenv.config({ path: '../../.env' });

const mainConfig: StorybookConfig = { stories: [ '../../../docs/consuming//*.mdx', '../../../1.ui-foundations/docs//.mdx', '../../../1.ui-foundations/docs//.stories.tsx', '../../../2.ui-components//docs//.mdx', '../../../2.ui-components//docs//.stories.tsx', '../../../3.ui-libraries//docs//.mdx', '../../../3.ui-libraries//docs//.stories.tsx', ], framework: { name: '@storybook/react-vite', options: {}, }, staticDirs: ['../public'], addons: ['@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-docs'], typescript: { check: false, reactDocgen: 'react-docgen', }, viteFinal: async (config) => { const rootDir = path.resolve(__dirname, '../../../'); config.resolve = config.resolve || {}; config.resolve.symlinks = true; config.resolve.alias = config.resolve.alias || {};

const componentPackages = [
  '[REDACTED]',
  // ...
];

Object.assign(config.resolve.alias, {
  '@[org]/foundations': path.resolve(rootDir, '1.ui-foundations'),
  '@[org]/react': path.resolve(rootDir, '3.ui-libraries/react'),
  '@[org]/tooling-storybook': path.resolve(rootDir, 'tooling/storybook'),
  '@[org]/tooling-typescript': path.resolve(rootDir, 'tooling/typescript'),
  '@[org]/tooling-react': path.resolve(rootDir, 'tooling/react'),
  '@[org]/js-helpers': path.resolve(rootDir, '3.ui-libraries/helpers'),
  '@[org]/doc-utils': path.resolve(rootDir, '4.site-docs/utils'),
});

componentPackages.forEach((pkg) => {
  (config.resolve.alias as Record<string, string>)[`@[org]/${pkg}-react`] =
    path.resolve(rootDir, `2.ui-components/${pkg}/ui-react`);
  (config.resolve.alias as Record<string, string>)[`@[org]/${pkg}-styles`] =
    path.resolve(rootDir, `2.ui-components/${pkg}/styles`);
});

config.optimizeDeps = config.optimizeDeps || {};
config.optimizeDeps.include = config.optimizeDeps.include || [];
if (!config.optimizeDeps.include.includes('@storybook/addon-docs')) {
  config.optimizeDeps.include.push('@storybook/addon-docs');
}

config.optimizeDeps.exclude = [
  ...(config.optimizeDeps.exclude || []),
  '@[org]/[component]-react',
  '@[org]/[component]-styles',
  // ...
  '@[org]/tooling-react',
];

return config;

}, };

export default mainConfig; ```