[WIP] [BREAKING] Exporting existing components props to allow extension

[petertodorov]

Hi there, I am wondering if there is a way to create a new custom component (e.g. MyCustomTabs) based on react-bulma-components Tabs component by also adding a new type to the already existing ones type?: 'toggle' | 'boxed' | 'toggle-rounded' | 'MYCUSTOMTYPE'?

I see that the interface coming with Tabs from 'react-bulma-components'

interface TabsProps {
  align?: 'center' | 'right';
  size?: Size;
  type?: 'toggle' | 'boxed' | 'toggle-rounded';
  fullwidth?: boolean;
}

is not exported so I cannot import it and extend it with additional types where I need it.The dummy example I provide will end up with TS throwing an error that <Tabs> Type 'MYCUSTOTYPE' is not assignable to type '"toggle" | "boxed" | "toggle-rounded" | undefined'.

  export interface MyCustomTabsProps {
  className?: string
  renderAs?: string
  align?: 'center' | 'right'
  size?: 'small' | 'medium' | 'large' | string
  type?: 'toggle' | 'boxed' | 'toggle-rounded' | 'MYCUSTOMTYPE'
  fullwidth?: boolean
}

  export const MyCustomTabs: React.FC<MyCustomTabsProps> = ({
  className, 
  renderAs,
  ...props
  }): JSX.Element => {
    return (
      <Tabs  className={className} {...props}>
        <Tabs.Tab renderAs={renderAs || 'span'}>
           Tab content
         </Tabs.Tab>
      </Tabs>
     )
  }

If you can provide any advice if what I am trying to do is feasible at all or any way to solve the issue, I will be thankful. I was also wondering if there is any particular reason for not exporting the interfaces of the of the elements/components from bulma-react-components, since this might be of use in cases like that?

Last but not least, thank you for the amazing work you're all doing with react-bulma-components All the best,

[kennethnym]

I can see why this is useful. There isn't any particular reason for hiding the interfaces. When I wrote the types I didn't think of this use case where users may want to wrap our components with their custom components, but it is so common I should've thought of it.

[petertodorov]

Hey @kennethnym thanks for writing. Indeed, it would've been quite handy to have them exported. Anyways, if you have any suggestion how I may solve the issue, would be greatly appreciated if you share it here.

[kennethnym]

Unfortunately, there isn't an elegant way to extend the props other than manucally copying all the props to your custom interface. I can make a PR that makes all the props public, so that you can import and extend them.

[petertodorov]

Hey @kennethnym, thanks for the propsoal for the PR that makes the props public, i guess this will be of use

[kennethnym]

@petertodorov @RJSonnenberg sorry for months of radio silence. I've created two new branches, develop and ts-def, please follow them for updates on this issue.