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
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.
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;
},
},
},
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With