-
Notifications
You must be signed in to change notification settings - Fork 122
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix(TU-15133): Rename `ref` prop to `embedRef` for proper typing BREAKING CHANGE: Components are unable to access `ref` prop directly. Using `forwardRef` breaks the typings. Since we do not accept any `ForwardedRef` but rather only `MutableRefObject`, we will rename the prop to type it correctly. * chore(TU-15133): Update NextJS demos to run on latest version Add examples for the App Router available from NextJS version >= 13. * feat(TU-15133): Update CI to run on Node version 22 BREAKING CHANGE: The library no longer supports node version 16 (end of life 2023-09-11). React version is bumped and requires node >= 18. --------- Co-authored-by: Miguel Cardoso <[email protected]>
- Loading branch information
Showing
45 changed files
with
767 additions
and
834 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| 'use client' | ||
|
|
||
| import { useSearchParams } from 'next/navigation' | ||
|
|
||
| import { Menu } from '../shared/menu' | ||
| import { defaultFormId } from '../shared/constants' | ||
|
|
||
| export const AppMenu = () => { | ||
| const query = useSearchParams() | ||
| return <Menu id={query?.get('id') ?? defaultFormId} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| 'use client' | ||
|
|
||
| import { Popover, PopupButton } from '@typeform/embed-react' | ||
| import { useSearchParams } from 'next/navigation' | ||
|
|
||
| import { defaultFormId } from '../../../shared/constants' | ||
|
|
||
| const handleOnReady = () => { | ||
| // eslint-disable-next-line no-console | ||
| console.log('form in popover ready') | ||
| } | ||
|
|
||
| export default function Page() { | ||
| const searchParams = useSearchParams() | ||
| const id = searchParams?.get('id') ?? defaultFormId | ||
|
|
||
| const buttonStyle = { | ||
| padding: '10px 20px', | ||
| borderRadius: 10, | ||
| border: 'none', | ||
| background: 'navy', | ||
| color: 'white', | ||
| fontSize: 16, | ||
| cursor: 'pointer', | ||
| } | ||
|
|
||
| return ( | ||
| <main> | ||
| <p>All embed types <3 Next.js version >= 13</p> | ||
|
|
||
| <p> | ||
| <PopupButton | ||
| id={id} | ||
| style={buttonStyle} | ||
| size={66} | ||
| medium="demo-test" | ||
| hidden={{ foo: 'foo value', bar: 'bar value' }} | ||
| > | ||
| <span role="img" aria-label="check"> | ||
| ️✅ | ||
| </span> | ||
| <span style={{ marginLeft: 10 }}>open popup</span> | ||
| </PopupButton> | ||
| </p> | ||
|
|
||
| <Popover | ||
| id={id} | ||
| onReady={handleOnReady} | ||
| medium="demo-test" | ||
| hidden={{ foo: 'foo value', bar: 'bar value' }} | ||
| buttonProps={{ ariaLabel: 'Typeform Button', dataTestid: 'demo-button' }} | ||
| tooltip="welcome" | ||
| /> | ||
| </main> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| 'use client' | ||
|
|
||
| import { Widget } from '@typeform/embed-react' | ||
| import { useSearchParams } from 'next/navigation' | ||
|
|
||
| import { defaultFormId } from '../../../shared/constants' | ||
|
|
||
| export default function Page() { | ||
| const searchParams = useSearchParams() | ||
| const widgetContainerStyle = { | ||
| width: 500, | ||
| height: 400, | ||
| margin: '20px auto', | ||
| } | ||
|
|
||
| return ( | ||
| <main> | ||
| <p>Embed widget <3 Next.js version <= 13</p> | ||
|
|
||
| <Widget | ||
| id={searchParams?.get('id') ?? defaultFormId} | ||
| style={widgetContainerStyle} | ||
| medium="demo-test" | ||
| hidden={{ foo: 'foo value', bar: 'bar value' }} | ||
| transitiveSearchParams={['foo', 'bar']} | ||
| iframeProps={{ title: 'Foo Bar' }} | ||
| /> | ||
| </main> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { AppMenu } from './app-menu' | ||
| import '../shared/globals.css' | ||
|
|
||
| export default function AppLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| <h1> | ||
| This is an example <a href="https://nextjs.org">Next.js</a> app with{' '} | ||
| <a href="https://nextjs.org/docs/app">App Router</a>. | ||
| </h1> | ||
| <AppMenu /> | ||
| {children} | ||
| </body> | ||
| </html> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| /// <reference types="next" /> | ||
| /// <reference types="next/image-types/global" /> | ||
|
|
||
| // NOTE: This file should not be edited | ||
| // see https://nextjs.org/docs/basic-features/typescript for more information. |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { useRouter } from 'next/router' | ||
| import { AppProps } from 'next/app' | ||
|
|
||
| import '../shared/globals.css' | ||
| import { Menu } from '../shared/menu' | ||
| import { defaultFormId } from '../shared/constants' | ||
|
|
||
| export default function MyApp({ Component, pageProps }: AppProps) { | ||
| const router = useRouter() | ||
| const formId = router.query?.id ?? defaultFormId | ||
| return ( | ||
| <> | ||
| <h1> | ||
| This is an example <a href="https://nextjs.org">Next.js</a> app with{' '} | ||
| <a href="https://nextjs.org/docs/pages">Pages Router</a>. | ||
| </h1> | ||
| <Menu id={`${formId}`} /> | ||
| <Component id={formId} {...pageProps} /> | ||
| </> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { useRef } from 'react' | ||
| import { PopupButton, GenericEmbed } from '@typeform/embed-react' | ||
|
|
||
| export default function PopupPage({ id }: { id: string }) { | ||
| const buttonStyle = { | ||
| padding: '10px 20px', | ||
| borderRadius: 10, | ||
| border: 'none', | ||
| background: 'navy', | ||
| color: 'white', | ||
| fontSize: 16, | ||
| cursor: 'pointer', | ||
| } | ||
| const ref = useRef<GenericEmbed>() | ||
|
|
||
| return ( | ||
| <main> | ||
| <p>Embed popup with forwarded ref <3 Next.js</p> | ||
|
|
||
| <p> | ||
| <PopupButton id={id} embedRef={ref} style={buttonStyle} size={66} medium="demo-test"> | ||
| <span role="img" aria-label="check"> | ||
| ️✅ | ||
| </span> | ||
| <span style={{ marginLeft: 10 }}>open popup</span> | ||
| </PopupButton> | ||
| </p> | ||
|
|
||
| <p> | ||
| <button onClick={() => ref.current?.open()}>click here to open the popup via ref</button> | ||
| </p> | ||
| </main> | ||
| ) | ||
| } |
Oops, something went wrong.