Mantine extended props don't show up in storybook vite

Question

I want to see my props plus all the mantine props in the storybook but seems like only props defined by me are shown in the storybook

My type files

import {
  InputVariant,
  TextInputProps as MantineTextInputProps,
} from '@mantine/core';

export type MantineTextInputPropsType = MantineTextInputProps &
  React.RefAttributes<HTMLInputElement>;

export interface TextInputProps extends MantineTextInputPropsType {
  title: string;
  description?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  disabled?: boolean;
  variant?: InputVariant;
  isRequired?: boolean;
  maxLength?: number;
  value?: string;
}

My storyBook file

import { Meta, Story } from '@storybook/react';
import { ChangeEvent, useState } from 'react';
import { TextInput as StoryBookTextInput } from './';
import { TextInputProps } from './TextInput';

export default {
  title: 'core/atoms/textInputs/TextInput',
  component: StoryBookTextInput,
} as Meta;

const Template: Story<TextInputProps> = ({ ...args }) => {
  const [value, setValue] = useState('');
  const onChange = (e: ChangeEvent<HTMLInputElement>) =>
    setValue(e.currentTarget.value);
  return <StoryBookTextInput value={value} onChange={onChange} {...args} />;
};

export const TextInput = Template.bind({});

TextInput.args = {
  title: 'Title',
  description: 'This is the description',
  disabled: false,
  gainsightId: 'text-input',
  placeholder: 'Placeholder text',
};

The StoryBook output just displays

  title: string;
  description?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  disabled?: boolean;
  variant?: InputVariant;
  isRequired?: boolean;
  maxLength?: number;
  value?: string;

and not the other mantine props

i tried configuring both vite plugin and storybook main with 'react-docgen-typescript'

Tried Plugins: @joshwooding/vite-plugin-react-docgen-typescript, react-docgen-typescript-vite-plugin

tried both react doc-gen configs

// .storybook/main.js

module.exports = {
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

and

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [],
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
    }
  }
};

Even tried

const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
const reactDocgenTypescript = require('@joshwooding/vite-plugin-react-docgen-typescript');

module.exports = {
  core: { builder: '@storybook/builder-vite' },
  stories: ['../../**/*.stories.mdx', '../../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  plugins: [reactDocgenTypescript()],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      plugins: [
        viteTsConfigPaths({
          root: '../../../',
        }),
      ],
    });
  },
};

Mantine extended props don't show up in storybook vite

0 Answers0