reactjs - استوریبوک (با Vite/تایپاسکریپت/MDX) جدول آرگومانها را نشان نمیدهد

من سعی دارم جدول با props را در یک صفحه مستندات MDX نشان دهم، اما هر کاری که میکنم، جدول فقط این را نشان میدهد: «هیچ ورودی برای این کامپوننت یافت نشد. مستندات را بخوانید >»

من چندین روش مختلف را امتحان کردم، اما به نظر نمیرسد چیزی تغییر کند.

من با نسخههای مختلف react-docgen-typescript، react-docgen-typescript-vite، storybook-react-docgen-typescript-vite و react-docgen-typescript-plugin بازی کردم، اما به نظر نمیرسد که تفاوتی ایجاد کند.

این تنظیمات من است:

main.js

const { resolve } = require('path');

module.exports = {
  stories: ['../src/**/!(Template).stories.@(tsx|mdx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  core: {
    builder: 'storybook-builder-vite',
  },
  async viteFinal(config, { configType }) {
    // customize the Vite config here

    return {
      ...config,
      base: './',
      resolve: {
        alias: {
          index: resolve(__dirname, '../', 'src', 'index'),
          Utils: resolve(__dirname, '../', 'src', 'Utils'),
          Context: resolve(__dirname, '../', 'src', 'Context'),
          Components: resolve(__dirname, '../', 'src', 'Components'),
          Tokens: resolve(__dirname, '../', 'src', 'Tokens'),
          Hooks: resolve(__dirname, '../', 'src', 'Hooks'),
        },
      },
      define: configType === 'DEVELOPMENT' && {
        'process.env': {},
        global: {},
      },
      plugins: config.plugins.filter((plugin) =>
        configType === 'DEVELOPMENT'
          ? plugin.name !== 'react-refresh'
          : plugin.name !== 'mock-core-js'
      ),
    };
  },
};

manager.js:

import { addons } from '@storybook/addons';
import theme from './theme';

addons.setConfig({
  theme: theme,
  isFullscreen: false,
  showNav: true,
  showPanel: false,
  panelPosition: 'bottom',
  enableShortcuts: false,
  isToolshown: false,
  selectedPanel: 'Overview', // Id to select an addon panel
  initialActive: 'sidebar', // Select the default active tab on Mobile

  // Sidebar options, see below
  sidebar: {
    showRoots: true,
    collapsedRoots: ['utils', 'experimental'],
  },

  // Modify the tools in the toolbar using the addon id
  toolbar: {
    title: { hidden: true },
    zoom: { hidden: true },
    eject: { hidden: true },
    copy: { hidden: true },
    fullscreen: { hidden: true },
  },
});

و preview.jsx

import 'react-toastify/dist/ReactToastify.min.css';
import 'rc-collapse/assets/index.css';
import '../styles/cogs.less';

export const parameters = {
  viewMode: 'docs',
  backgrounds: {
    default: 'white',
    values: [
      { name: 'white', value: '#fff' },
      { name: 'black', value: '#000' },
    ],
  },
  controls: { expanded: false },
  options: {
    storySort: {
      order: [
        'Overview',
        'About Cogs.js',
        'Getting started',
        'How to contribute',
        'Design',

        'Tokens',
        'Components',
        'Patterns',
        'Layout',
        'Utils',
        '*',
      ],
    },
  },
};

بسیار ممنون!

پاسخ شماره ۱

نسخههای جدید سازندهی vite اکنون باید این موضوع را به درستی مدیریت کنند. سعی کنید با npx sb@next automigrate بهروزرسانی کنید. اگر از تایپاسکریپت استفاده میکنید، پیشفرض استفاده از react-docgen-typescript خواهد بود، اما اگر بخواهید میتوانید به جای آن از react-docgen استفاده کنید، با مشخص کردن آن در گزینه typescript، همانطور که در مستندات storybook نشان داده شده است.