Convert with-videojs, with-yoga, with-zones examples to TypeScript (#43280)

examples/with-videojs/components/Player.tsx

@@ -2,9 +2,16 @@ import { useCallback, useEffect, useState } from 'react'
 import videojs from 'video.js'
 import 'videojs-youtube'
 
-const Player = (props) => {
-  const [videoEl, setVideoEl] = useState(null)
-  const onVideo = useCallback((el) => {
+interface PlayerProps {
+  techOrder: string[]
+  autoplay: boolean
+  controls: boolean
+  sources: { src: string; type: string }[]
+}
+
+export default function Player(props: PlayerProps) {
+  const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null)
+  const onVideo = useCallback((el: HTMLVideoElement) => {
     setVideoEl(el)
   }, [])
 
@@ -25,5 +32,3 @@ const Player = (props) => {
     </>
   )
 }
-
-export default Player

examples/with-videojs/components/PlayerCss.tsx

@@ -1,6 +1,6 @@
 import 'videojs-youtube'
 
-const PlayerCSS = () => {
+export default function PlayerCSS() {
   return (
     <>
       <h1>The implementation below is without react functions</h1>
@@ -17,5 +17,3 @@ const PlayerCSS = () => {
     </>
   )
 }
-
-export default PlayerCSS

examples/with-videojs/package.json

@@ -6,10 +6,17 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.1.8-canary.11",
+    "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "video.js": "^6.7.3",
-    "videojs-youtube": "^2.4.1"
+    "video.js": "^7.20.3",
+    "videojs-youtube": "^2.6.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/video.js": "^7.3.49",
+    "typescript": "^4.9.3"
   }
 }

examples/with-videojs/pages/_app.js

@@ -1,7 +0,0 @@
-import 'video.js/dist/video-js.css'
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
-
-export default MyApp

examples/with-videojs/pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import 'video.js/dist/video-js.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/with-videojs/pages/index.tsx

@@ -1,7 +1,7 @@
 import Player from '../components/Player'
 import PlayerCSS from '../components/PlayerCss'
 
-const Index = () => {
+export default function Index() {
   const videoJsOptions = {
     techOrder: ['youtube'],
     autoplay: false,
@@ -21,5 +21,3 @@ const Index = () => {
     </>
   )
 }
-
-export default Index

examples/with-videojs/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "videojs.d.ts"],
+  "exclude": ["node_modules"]
+}

examples/with-videojs/videojs.d.ts

@@ -0,0 +1 @@
+declare module 'videojs-youtube'

examples/with-yoga/next.config.js

@@ -1,9 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  compiler: {
-    styledComponents: true,
-  },
 }
 
 module.exports = nextConfig

examples/with-yoga/package.json

@@ -7,10 +7,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@gympass/yoga": "^7.28.0",
+    "@gympass/yoga": "^7.61.0",
     "next": "latest",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^4.4.1"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }

examples/with-yoga/pages/_app.js

@@ -1,22 +0,0 @@
-import { ThemeProvider, FontLoader } from '@gympass/yoga'
-import { createGlobalStyle } from 'styled-components'
-
-const GlobalStyle = createGlobalStyle`
-  body {
-    margin: 20px;
-    padding: 0;
-    box-sizing: border-box;
-  }
-`
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider>
-      <GlobalStyle />
-      <FontLoader />
-      <Component {...pageProps} />
-    </ThemeProvider>
-  )
-}
-
-export default MyApp

examples/with-yoga/pages/_app.tsx

@@ -0,0 +1,10 @@
+import type { AppProps } from 'next/app'
+import { ThemeProvider } from '@gympass/yoga'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}

examples/with-yoga/pages/_document.js

@@ -1,30 +0,0 @@
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
-
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
-
-    try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) =>
-            sheet.collectStyles(<App {...props} />),
-        })
-
-      const initialProps = await Document.getInitialProps(ctx)
-      return {
-        ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        ),
-      }
-    } finally {
-      sheet.seal()
-    }
-  }
-}

examples/with-yoga/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "yoga.d.ts"],
+  "exclude": ["node_modules"]
+}

examples/with-yoga/yoga.d.ts

@@ -0,0 +1 @@
+declare module '@gympass/yoga'

examples/with-zones/blog/next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-module.exports = {
+const nextConfig = {
   basePath: '/blog',
 }
+
+module.exports = nextConfig

examples/with-zones/blog/package.json

@@ -10,5 +10,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "license": "MIT"
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
+  }
 }

examples/with-zones/blog/pages/index.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import Image from 'next/image'
 
 export default function Blog() {
   return (
@@ -13,15 +12,7 @@ export default function Blog() {
           <Link href="/post/2">Post 2</Link>
         </li>
       </ul>
-      <a href="/">Home</a>
-      <div>
-        <Image
-          src="/blog/static/nextjs.png"
-          alt="Next.js logo"
-          width={200}
-          height={160}
-        />
-      </div>
+      <Link href="/">Home</Link>
     </div>
   )
 }

examples/with-zones/blog/pages/post/[id].tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 
 export default function Post() {
   const router = useRouter()
+
   return (
     <div>
       <h3>Post #{router.query.id}</h3>

examples/with-zones/blog/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/with-zones/home/components/Header.js

@@ -1,7 +0,0 @@
-const Header = () => (
-  <div>
-    <h2>The Company</h2>
-  </div>
-)
-
-export default Header

examples/with-zones/home/components/Header.tsx

@@ -0,0 +1,7 @@
+export default function Header() {
+  return (
+    <div>
+      <h2>The Company</h2>
+    </div>
+  )
+}

examples/with-zones/home/next.config.js

@@ -1,7 +1,7 @@
 const { BLOG_URL } = process.env
 
 /** @type {import('next').NextConfig} */
-module.exports = {
+const nextConfig = {
   async rewrites() {
     return [
       {
@@ -19,3 +19,5 @@ module.exports = {
     ]
   },
 }
+
+module.exports = nextConfig

examples/with-zones/home/package.json

@@ -10,5 +10,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "license": "MIT"
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
+  }
 }

examples/with-zones/home/pages/about.js

@@ -1,13 +0,0 @@
-import Link from 'next/link'
-
-const About = () => (
-  <div>
-    <p>This is the about page.</p>
-    <div>
-      <Link href="/">Go Back</Link>
-    </div>
-    <img width={200} src="/static/vercel.png" />
-  </div>
-)
-
-export default About

examples/with-zones/home/pages/about.tsx

@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <div>
+      <p>This is the about page.</p>
+      <div>
+        <Link href="/">Go Back</Link>
+      </div>
+    </div>
+  )
+}

examples/with-zones/home/pages/index.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
 
 const Header = dynamic(import('../components/Header'))
 
@@ -15,12 +14,6 @@ export default function Home() {
       <div>
         <Link href="/about">About us</Link>
       </div>
-      <Image
-        src="/static/nextjs.png"
-        alt="Next.js logo"
-        width={200}
-        height={160}
-      />
     </div>
   )
 }

examples/with-zones/home/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}