Source:  Twitter logo

I'm trying to show the table with props on a MDX docs page, but whatever I try, the table only shows: "No inputs found for this component. Read the docs >"

I tried several different ways, but it doesn't seem to change anything.

I played around with different versions of react-docgen-typescript, react-docgen-typescript-vite, storybook-react-docgen-typescript-vite and react-docgen-typescript-plugin but it doesn't seem to make a difference.

This is my setup:

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 },
  },
});

and 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',
        '*',
      ],
    },
  },
};

Many thanks!

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).