#Mantine components Props Storybook [docgen]

1 messages · Page 1 of 1 (latest)

modest igloo
#

Hey guys I'm not being able to expose Mantine components extended Types on Storybook

main.ts

...
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@chromatic-com/storybook',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-dark-mode',
    'storybook-addon-mantine',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    docsMode: true,
  },
}
export default config

Extended Button Component

import { Button, ButtonProps, ElementProps } from '@mantine/core'

export interface FkyButtonProps extends ButtonProps, ElementProps<'button', keyof ButtonProps> {}

export const FkyButton: React.FC<FkyButtonProps> = ({ children, ...props }) => {
  return <Button {...props}>{children}</Button>
}

FkyButton.stories.tsx

...
const meta: Meta<FkyButtonProps> = {
  title: 'Components/FkyButton',
  component: (props) => <FkyButton {...props}>Testing</FkyButton>,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  args: {
    onClick: fn(),
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Filled: Story = {
  args: {
    variant: 'filled',
  },
}

preview.tsx

...
function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
  const { setColorScheme } = useMantineColorScheme()
  const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light')

  useEffect(() => {
    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme)
    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme)
  }, [channel])

  return <>{children}</>
}

export const decorators = [
  (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
  (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
]
image.png 📎 FkyButton.stories.tsx 📎 FkyButton.stories.tsx 📎 preview.tsx
true oasis
#

This is what I use in Storybook's main.ts

...restOfConfig,
typescript: {
check: false,
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
propFilter: (prop) => {
if (prop.parent) {
// this allows us to include props in docs that we extend from Mantine
return /@mantine|ui/src/.test(prop.parent.fileName);
} else {
return true;
}
},
shouldExtractLiteralValuesFromEnum: true,
shouldRemoveUndefinedFromOptional: true,
},
},

modest igloo