Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing react types for 4 of the components #643

Closed
Multiply opened this issue Mar 6, 2024 · 4 comments · Fixed by #646
Closed

Missing react types for 4 of the components #643

Multiply opened this issue Mar 6, 2024 · 4 comments · Fixed by #646

Comments

@Multiply
Copy link

Multiply commented Mar 6, 2024

When importing all five components, and creating a simple wrapper around them for easily rendering in one place, we're mostly seeing it accept any type, which is not neat.

Sample code:

import { Popover, PopupButton, Sidetab, SliderButton, Widget } from '@typeform/embed-react'
import React, { ComponentProps } from 'react'

type EmbedReactProps =
  | { type: 'popover' } & ComponentProps<typeof Popover>
  | { type: 'popup_button' } & ComponentProps<typeof PopupButton>
  | { type: 'sidetab' } & ComponentProps<typeof Sidetab>
  | { type: 'slider_button' } & ComponentProps<typeof SliderButton>
  | { type: 'widget' } & ComponentProps<typeof Widget>

const EmbedReact = ({ type, ...rest }: EmbedReactProps) => {
  switch (type) {
    case 'popover': return <Popover {...rest} />
    case 'popup_button': return <PopupButton {...rest} />
    case 'sidetab': return <Sidetab {...rest} />
    case 'slider_button': return <SliderButton {...rest} />
    case 'widget': return <Widget {...rest} />
    default: return null
  }
}

Please refer to my recording here for an example:

Screen.Recording.2024-03-06.at.05.32.10.mov

Edit:
I noticed the components are importing types from different folders, where @typeform/embed imports work, and @typeform/embed/types/base doesn't.
image

@github-actions github-actions bot added the new Flag for new issues before someone replies label Mar 6, 2024
@leandro-serafim leandro-serafim added in-progress and removed new Flag for new issues before someone replies labels Apr 9, 2024
leandro-serafim added a commit that referenced this issue Apr 16, 2024
Features:
* Export new types for react components (PopoverProps, PopupButtonProps, SidetabProp, SliderButtonProps, WidgetProps) - closes #643 

Bug fixes:
* Make children prop optional in the PopupButton and SliderButton
typeform-ops-gha pushed a commit that referenced this issue Apr 16, 2024
# [@typeform/embed-v4.10.0](https://github.com/Typeform/embed/compare/@typeform/embed-v4.9.0...@typeform/embed-v4.10.0) (2024-04-16)

### Features

* **TU-9582:** Export correct prop types for react components ([#646](#646)) ([02030ab](02030ab)), closes [#643](#643)
@typeform-ops-gha
Copy link

🎉 This issue has been resolved in version @typeform/embed-v4.10.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

typeform-ops-gha pushed a commit that referenced this issue Apr 16, 2024
# [@typeform/embed-react-v3.17.0](https://github.com/Typeform/embed/compare/@typeform/embed-react-v3.16.0...@typeform/embed-react-v3.17.0) (2024-04-16)

### Features

* Bump @typeform/embed in @typeform/embed-react package [skip ci] ([29b1dc5](29b1dc5))
* **TU-9582:** Export correct prop types for react components ([#646](#646)) ([02030ab](02030ab)), closes [#643](#643)
@typeform-ops-gha
Copy link

🎉 This issue has been resolved in version @typeform/embed-react-v3.17.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@leandro-serafim
Copy link
Contributor

Hi, @Multiply.
We provided new types for the react components props in our last release (@typeform/embed-react-v3.17).

import { PopoverProps, PopupButtonProps, SidetabProp, SliderButtonProps, WidgetProps } from '@typeform/embed-react'

Thanks.

@Multiply
Copy link
Author

Multiply commented Apr 16, 2024

I'll try out the latest version.

Edit: Thanks, the implementation I posted now work correctly, as it can extract the component props directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants