Typescript: Support `use` component prop types on the base component

[jxom]

At the moment, if we try to compose two components via the use prop. The component specified via use will not spread its TS types on the root component. Thus, the following will produce a typescript error on the href prop:

<Button use={Link} href="https://example.com">Go to Example</Button>

[hcharley]

Yeah, I just put together my own work-around:

            <TopNav.Item
              use={RRNavLink as typeof RRNavLink & { useProps: any }}
              {...{ to: '/' }}
              fontWeight="semibold"
              paddingX="major-1"
            >

Instead of:

            <TopNav.Item
              use={RRNavLink}
              to="/"
              fontWeight="semibold"
              paddingX="major-1"
            >

[KubaJastrz]

Some resources which could be useful:

• https://twitter.com/diegohaz/status/1297886375941873664
• https://github.com/kripod/react-polymorphic-box
• https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#polymorphic-components-eg-with-as-props

[agustif]

I ended up wrapping Top.Nav with next/link <Link>

That works for me, should I maybe change to use={Link}?

[p12y]

@jxom Happy to take a crack at this if you'd like?

[jxom]

@jxom Happy to take a crack at this if you'd like?

Go for it