Missing MaterialUI Table Props in Storybook

user_5069505 0
Viewed 1445

I'm using MaterialUI which I slightly modify (styling/logic) in order to create a custom library. I'm also using Storybook (with Typescript) to create documentation.

The problem I'm facing is that the storybook table props are not always automatically generated. It only shows the props I added, but none of the ones built by material UI. For example:

import * as React from "react";
import MuiPaper from "@material-ui/core/Paper";
import clsx from "clsx";

export interface PaperProps extends MuiPaperProps {
    /**
     * If `true`, a darker background will be applied.
     * @default false
     */
    filled?: boolean;
    /**
     * If `true`, the border around the Paper will be removed.
     * @default false
     */
    disableOutline?: boolean;
}

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        borderRadius: "8px",
        border: `1px solid ${theme.palette.grey[200]}`,
        "&$filled": {
            backgroundColor: theme.palette.grey[100],
        },
        "&$disableOutline": {
            border: "none",
        },
    },
    /* Pseudo-class applied to the root element if `disableOutline={true}`. */
    disableOutline: {},
    /* Pseudo-class applied to the root element if `filled={true}`. */
    filled: {},
}));

export const Paper: React.FC<PaperProps> = (props) => {
    const { disableOutline = false, filled = false, ...restProps } = props;
    const classes = useStyles();
    return (
        <MuiPaper
            classes={classes}
            className={clsx(classes.root, {
                [classes.disableOutline]: disableOutline,
                [classes.filled]: filled,
            })}
            {...restProps}
        />
    );
};

Screenshots missing material-ui table props in storybook canvas

missing material-ui table props in storybook docs

On the other hand, it works perfectly with MuiButton which is very strange. I can't figure out why it doesn't work with Paper.

material UI interface table props display correctly in storyboard docs

storybook material-ui typescript reactjs
1 Answers

Well, I got to debug this thoroughly and found out that typescript's default configuration excludes all types from node_modules for docgen with this filter

propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),

However, for some reason, probably the way MuiButtonProps type is written, the prop.parent is undefined for MuiButton props and let them pass.

Since you want to include all MaterialUI's props you can modify the default filter in .storybook/main.js this way:

module.exports = {
  ...
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        return prop.parent
          ? /@material-ui/.test(prop.parent.fileName) ||
              !/node_modules/.test(prop.parent.fileName)
          : true;
      },
    },
  },
};
user_18680080
Related