feat(react): extend native props

[vaakian]

I've noticed that all the custom web-components are extending HTMLElement, so we should treat them as well as HTMLElement when passing props(native events, attributes and more...), NOT just limited incomponentBaseInterface.

So this PR did two things:

• Make componentBaseInterface extend HTMLElement props.
• An useful typescript utility type ReactifyProps that transforms web-component props to the corresponding react props. (so we don't need to write/change/add in two places)

And, with an example usage in the Dialog component.

[sanqi-med]

thank you for suggestion，the web-components custom event in react is alse as a prop, how to deal with this situation

[sanqi-med]

We will refer to your suggestion, thank you

[vaakian]

thank you for suggestion，the web-components custom event in react is alse as a prop, how to deal with this situation

It's already handled by 'on${Capitalize<K>}' in ReactifyProps type, which transforms event names like click / confirm to onClick / onConfirm. And those custom events defined in web-components will have higher priority if it's overlapping native events.

[sanqi-med]

thank you for suggestion，the web-components custom event in react is alse as a prop, how to deal with this situation

It's already handled by 'on${Capitalize<K>}' in ReactifyProps type, which transforms event names like click / confirm to onClick / onConfirm. And those custom events defined in web-components will have higher priority if it's overlapping native events.

such as in picker, custom event close is not a key of picker。 but you suggestion is also usefull， we well refactor type code with extends React.DetailedHTMLProps< React.HTMLAttributes<HTMLElement>, HTMLElement >

[vaakian]

Okay, I'am getting your idea now. I thought that events / state(prop) types are already defined in the quark web-component module like <Dialog>, but it's not.

As a suggestion, in my opinion a idea type structure would be:

1. Define state and event type in web-component.
2. Frameworks specific type derives from them. ( React、Vue、Angular...)

I've made a simplified show case online.

[sanqi-med]

As a suggestion, in my opinion a idea type structure would be:

1. Define state and event type in web-component.
2. Frameworks specific type derives from them. ( React、Vue、Angular...)

we will reference your suggestion, thank you