[@mui/material]: Incorrect Docgen config structure in MUI Recipe

[Mick]

Details

Recipe Page: @mui/material
Recipe Template: @mui/material
Browser: N/A

What is wrong

In article outlining setting up MUI in Storybook, the incorrect structure for TypeScript Docgen is used. Minor difference, but enough to make me sweat for a couple minutes.

Basically, this:

// .storybook/main.ts

module.exports = {
  ...,
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      // speeds up storybook build time
      allowSyntheticDefaultImports: false,
      // speeds up storybook build time
      esModuleInterop: false,
      // makes union prop types like variant and size appear as select controls
      shouldExtractLiteralValuesFromEnum: true,
      // makes string and boolean types that can be undefined appear as inputs and switches
      shouldRemoveUndefinedFromOptional: true,
      // Filter out third-party props from node_modules except @mui packages
      propFilter: (prop) =>
        prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,
    },
  },
};

Should be:

// .storybook/main.ts

module.exports = {
  ...,
  typescript: {
    check: false,
    // checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        // speeds up storybook build time
        allowSyntheticDefaultImports: false,
        // speeds up storybook build time
        esModuleInterop: false,
      },
      // makes union prop types like variant and size appear as select controls
      shouldExtractLiteralValuesFromEnum: true,
      // makes string and boolean types that can be undefined appear as inputs and switches
      shouldRemoveUndefinedFromOptional: true,
      // Filter out third-party props from node_modules except @mui packages
      propFilter: (prop) =>
        prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,
    },
  },
};