Type declaration exports

[zeropaper]

First of: Congratulation on your amazing work!

The styles are neat, the documentation nicely written, the generated DOM is slick, in general I really enjoy the project and I can totally imagine dropping my Material-UI usage for Mantine (and contribute)!

There's just one thing that I have a little pain to get my head around...
Full-disclosure: I'm not yet as experienced with TS as I wish I would be and I might be missing an important "concept".

I love to work with Storybook and usually I create my components (based on Material-UI) the following way:

import * as React from 'react';
import {
  Button as MuiButton,
  ButtonProps as MuiButtonProps,
} from '@material-ui/core';

export type ButtonProps = MuiButtonProps & { sound?: string; };

const Button = (props: ButtonProps) => {
   const { sound, ...rest } = props;
   // do some magic here
   return <Button {...rest} />
};

export default Button;

So that I can import the component and (most importantly in that case) its props type declaration to use in my (Storybook) stories the following way:

import * as React from 'react';
import { Story, Meta } from '@storybook/react';

import Button, { ButtonProps } from './Button';

export default {
  title: "Project/Components/Button",
  component: Button,
} as Meta;

const Template: Story<ButtonProps> = (args) => (<Button {...args} />);
export const Base = Template.bind({});

Here's (finally) my question:

The convenient thing about Material-UI is that they export the type of each component (suffixed with Props) and I wonder if there's a way to get these types / interfaces the same way with Mantine?
I couldn't find any easy way... or, let say, not as straight-forward.

If not... would you accept a PR that provides that kind of feature (I may try but no strings attached... ;) )?

[rtivital]

Hi, thanks for feedback!
Sure, I was thinking about exporting props but did not have time, if you'll create a PR that will be great.

Meanwhile, the easy solution to your problem is to use React.ComponentProps type:

import { Button } from '@mantine/core';

type ButtonProps = React.ComponentProps<typeof Button>;

[zeropaper]

Thank you SO much!

The type ButtonProps = React.ComponentProps<typeof Button>; is something I suspected to be possible but couldn't properly phrase... :)

As said... I'd love to contribute (and I will try)... It may take a little bit of time... but I will try to make a PR for that!