search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.03k stars 9.24k forks source link

docgen broken in 5.3.3 #9479

Closed aareman closed 4 years ago

aareman commented 4 years ago

Describe the bug I just went through the migration guide from 5.2xxxxrcsomething to 5.3.3

I think its related to #9415

Now the prop tables are not being populated (or loaded, not __docgenInfo on conponents)

Screenshots If applicable, add screenshots to help explain your problem. image

Code snippets manager.js

import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';

const theme = create({
    base: 'light',
    brandTitle: 'Gentellela React Library',
});

addons.setConfig({
    panelPosition: 'bottom',
    theme,
});

preview-head.html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/"> 
<link rel="manifest" href="/dashboard/manifest.json">

<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
<!-- Gentellela -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/gentelella/1.4.0/css/custom.min.css" rel="stylesheet"> -->
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<!--nprogress -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

<link href="../htdocs/dashboard/src/css/gentellela.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
    window.REACT_STATICS = {};
</script>

preview.js

import { addDecorator, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { withA11y } from '@storybook/addon-a11y';
import { marginDecorator } from 'src/js/decorators';
import './storybook.css';

addParameters({
    backgrounds: [
        { name: 'default', value: 'transparent', default: true },
        { name: 'light', value: '#f7f7f7' },
        { name: 'dark', value: '#2a3f54' },
    ],
    docs: {
        container: DocsContainer,
        page: DocsPage
    },
    options: {
        showRoots: true,
    },
});

addDecorator(marginDecorator);
addDecorator(withA11y);

.babelrc (in .storybook directory)

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        ["react-docgen", {}, 'other_docgen'],      <<<<--- I'v tried without this as well
        "@babel/plugin-proposal-class-properties",
        "babel-plugin-styled-components",
        "add-react-displayname"
    ],
    "env":{
        "test": {
            "plugins":["require-context-hook"]
        }
    }
}

main.js

const path = require('path');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
const custom = require('../webpack.config')('dev');

module.exports = {
    webpackFinal: async (config) => {
        config = {
            ...config,
            resolve: custom.resolve,
            module: {
                ...config.module,
                rules: 
                custom.module.rules

            }};
        config.module.rules.push({
            test: /\.(stories|story)\.mdx$/,
            use: [
                {
                    loader: 'babel-loader',
                    // may or may not need this line depending on your app's setup
                    options: {
                        plugins: ['@babel/plugin-transform-react-jsx'],
                    },
                },
                {
                    loader: '@mdx-js/loader',
                    options: {
                        compilers: [createCompiler({})],
                    },
                },
            ],
        });
        config.module.rules.push({
            test: /\.(stories|story)\.[tj]sx?$/,
            loader: require.resolve('@storybook/source-loader'),
            exclude: [/node_modules/],
            enforce: 'pre',
        });
        return config;
    },
    stories:[
        '../htdocs/dashboard/src/js/stories/Introduction.stories.mdx',
        '../htdocs/dashboard/src/js/stories/*.stories.mdx',
        '../htdocs/dashboard/src/js/components/**/*.stories.(js|mdx)'],
    addons: [
        '@storybook/addon-backgrounds',
        '@storybook/addon-a11y',
        '@storybook/addon-viewport',
    ],
    presets: ['@storybook/addon-docs/preset']
}

System:

image

Additional context `package.json

...
    "dependencies": {
        "@apollo/react-hooks": "^3.1.3",
        "@babel/plugin-proposal-class-properties": "^7.7.4",
        "@babel/preset-env": "^7.7.6",
        "@babel/preset-react": "^7.7.4",
        "@ckeditor/ckeditor5-build-classic": "^15.0.0",
        "@ckeditor/ckeditor5-react": "^1.1.3",
        "apollo-cache-inmemory": "^1.6.5",
        "apollo-client": "^2.6.8",
        "apollo-link-http": "^1.5.16",
        "axios": "^0.19.0",
        "babel-plugin-add-react-displayname": "0.0.5",
        "babel-plugin-array-includes": "^2.0.3",
        "babel-plugin-require-context-hook": "^1.0.0",
        "babel-plugin-styled-components": "^1.10.6",
        "bootstrap": "^4.4.1",
        "css-loader": "^3.3.1",
        "enzyme": "^3.10.0",
        "enzyme-adapter-react-16": "^1.15.1",
        "export-to-csv": "^0.2.1",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "faker": "^4.1.0",
        "glob": "^7.1.6",
        "graphql": "^14.5.8",
        "graphql-tag": "^2.10.1",
        "jest": "^24.9.0",
        "prop-types": "^15.7.2",
        "react-apollo": "^3.1.3",
        "react-beautiful-dnd": "^11.0.5",
        "react-bootstrap": "^1.0.0-beta.16",
        "react-dnd": "^10.0.2",
        "react-highlight-words": "^0.16.0",
        "react-router-dom": "^5.1.2",
        "react-router-prop-types": "^1.0.4",
        "react-sortable-tree": "^2.7.1",
        "react-transition-group": "^1.2.1",
        "style-loader": "^0.23.1",
        "styled-components": "^4.4.1",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10",
        "webpack-entry-plus": "^1.0.18",
        "webpack-visualizer-plugin": "^0.1.11"
    },
    "devDependencies": {
        "@babel/core": "^7.8.3",
        "@storybook/addon-a11y": "^5.3.3",
        "@storybook/addon-backgrounds": "^5.3.3",
        "@storybook/addon-docs": "^5.3.3",
        "@storybook/addon-storyshots": "^5.3.3",
        "@storybook/addon-storyshots-puppeteer": "^5.3.3",
        "@storybook/addon-viewport": "^5.3.3",
        "@storybook/react": "^5.3.3",
        "@typescript-eslint/eslint-plugin": "^1.13.0",
        "@typescript-eslint/parser": "^1.13.0",
        "autoprefixer": "^9.7.3",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.0.6",
        "babel-plugin-react-docgen": "^4.0.0-beta.1",
        "eslint-config-prettier": "^6.7.0",
        "eslint-config-react-app": "^5.1.0",
        "eslint-plugin-babel": "^5.3.0",
        "eslint-plugin-es5": "^1.4.1",
        "eslint-plugin-flowtype": "^3.13.0",
        "eslint-plugin-import": "^2.19.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.17.0",
        "eslint-plugin-react-hooks": "^1.7.0",
        "jest-css-modules-transform": "^3.1.0",
        "jest-transform-css": "^2.0.0",
        "prettier-eslint": "^9.0.1",
        "prettier-stylelint": "^0.4.2",
        "puppeteer": "^2.0.0",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-test-renderer": "^16.12.0"
    },
...
shilman commented 4 years ago

Closing this as a dupe to #9415