Support for "polymorphic components" in framework and UI components

[davidhousedev]

In our first usage of the <BuyNowButton /> we ran into some limitations around styling. We have an internal component library that we use to maintain consistency in styles, but found that we were not able to use the <BuyNowButton /> as-is because it doesn't enable a pattern known as polymorphic components.

We were able to workaround this limitation by creating our own implementation of a <BuyNowButton /> which invokes useInstantCheckout() and renders our own component library.

In an ideal world, we'd be able to do something like this:

// Non-functional example, just a proposal
import { BuyNowButton } from '@shopify/hydrogen'
import { Button } from '@us/our-fancy-component-library'

export default function() {
  return (
    <BuyNowButton 
      component={Button} // or `as={Button}`
      // prop from Button, with type safety
      mx={4}
      // This is where things get more tricky, ideally the callback would fire
      // and all behavior of BuyNowButton would be invoked
      onClick={() => console.log('I was clicked!')
      // prop from BuyNowButton, with type safety
      attributes={/* ... */}
    >
      Buy the things!
    </BuyNowButton >
}

Prior art:

• Chakra UI: https://chakra-ui.com/docs/components/box/usage#as-prop
• Formik (not type-safe): https://formik.org/docs/api/field#as

[blittle]

WIP PR: https://github.com/Shopify/hydrogen/pull/1827/files