Storybook + Mantine: incorrect prop types with react-docgen-typescript | Mantine | Page 1

Hi everyone,

I’m trying to document my extended Mantine components using Storybook. I want the documentation to be fully interactive, so I’m using reactDocgen: "react-docgen-typescript" in the Storybook config.

The issue I’m running into is that docgen incorrectly interprets certain props like color, padding, bg, etc. Instead of recognizing them as strings or selectable union types (which would work nicely with controls), it types them as objects.

I also created a fork of Mantine to see how Storybook is handled there. It looks like Mantine manually predefines props, but that approach removes the ability to tweak them dynamically via controls.

Do you have any suggestions for a good workflow when working with Mantine props and Storybook, so I don’t have to manually define all argTypes?

Thanks in advance!

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../lib/**/*.stories.@(ts|tsx)"],
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {

        if (prop.parent && /@mantine/.test(prop.parent.fileName)) {
          return true;
        }

        return prop.parent ? !/node_modules/.test(prop.parent.fileName) : true;
      },
      compilerOptions: {

        noEmit: false,
        incremental: true,
      },
    },
  },
  addons: ["@storybook/addon-docs", "@storybook/addon-themes"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
};

export default config;

#Storybook + Mantine: incorrect prop types with react-docgen-typescript