Как отобразить таблицу типов реквизита в Storybook 6.0.0 - PullRequest
Новая
       79

Как отобразить таблицу типов реквизита в Storybook 6.0.0

1 голос
/ 14 июля 2020

Я создаю ui-библиотеку для проекта (используя Emotion), я добавил сборник рассказов с надстройкой документации, и мне кажется, что сборник рассказов не видит реквизита для стилизованного компонента. Как это исправить? 

"@storybook/addon-docs": "^6.0.0-rc.3",
"@storybook/addon-knobs": "^6.0.0-rc.3",
"@storybook/react": "^6.0.0-rc.3",

// main. js


module.exports = {
  stories: ["../src/**/*.stories.@(tsx|mdx)"],
  // Add any Storybook addons you want here: https://storybook.js.org/addons/
  addons: ["@storybook/addon-docs", "@storybook/addon-knobs/register"],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve("babel-loader"),
      options: {
        presets: [["react-app", { flow: false, typescript: true }]],
      },
    });

    config.resolve.extensions.push(".ts", ".tsx");

    return config;
  },
};

// Example.ts: 

import { ExampleProps } from "./Example.types";

export const Example = styled.div<ExampleProps>`
  color: ${(props) => props.color || "red"};
`;

export default Example;

// Пример. Stories.mdx 

import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { withKnobs, color } from "@storybook/addon-knobs";
import Example from "./Example";

<Meta title="Example" component={Example} decorators={[withKnobs]} />

# Preview

<Preview>
  <Story name="Example">
    <Example color={color('color', '#000', 'GROUP-ID1')}>Example</Example>
  </Story>
</Preview>

# Props

<Props of={Example} />

К сожалению таблица реквизита отображает: 

No inputs found for this component.

1 Ответ

0 голосов
/ 09 августа 2020

У меня была такая же проблема после перехода на 6.0.0-r c .29.

Я установил storybook-addon-react-docgen (v 1.2.42) отдельно в пакете. json и теперь реквизиты таблица вернулась.

Также не забудьте добавить его в массив аддонов в main. js.

Например, мой main. js is 

module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/preset-create-react-app',
    '@storybook/addon-knobs/register',
    'storybook-addon-react-docgen'
]
...