[typescript] Better type annotations for unstyled `components` and `componentsProps` props

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Improve developer experience by providing type information in componentsProps when a component/element is passed in the respective components field.

Once a developer populates the components.X field, they will see intellisense hints in componentsProps.x with all the props available to pass to the X component.

Examples 🌈

Preliminary work has been done in: https://github.com/michaldudak/material-ui/commit/a9f37babc2b3dccde59e325ffc316a7bfcb49aab

The problem with this solution is that it causes PropTypes to be generated incorrectly. For components fields, the expected prop type would be PropTypes.elementType, but a union of all intrinsic element names and PropTypes.func is generated. This is problematic when a class based component, or a one created with React.forwardRef is passed in.

Motivation 🔦

Having detailed hints in intellisense and the ability to check types before runtime will lead to increased developer happiness and productivity. As an application developer myself, I value well-crafted type definitions that help during development.

[mnajdova]

Yeah, let’s go with it. Developers can anyway augment the props interface if they want to make it stricter.

[michaldudak]

@mnajdova You were using {as, styleProps} in the first unstyled components. Do you have an opinion about using Record<string, any> instead, as proposed here?