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

maxproske · web-flow · commit 093354c6d3a6 · 2022-11-23T13:46:54.000+01:00
diff --git a/examples/with-videojs/components/Player.tsx b/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
diff --git a/examples/with-videojs/components/PlayerCss.tsx b/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
diff --git a/examples/with-videojs/package.json b/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"
   }
 }
diff --git a/examples/with-videojs/pages/_app.js b/examples/with-videojs/pages/_app.js
diff --git a/examples/with-videojs/pages/_app.tsx b/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} />
+}
diff --git a/examples/with-videojs/pages/index.tsx b/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
diff --git a/examples/with-videojs/tsconfig.json b/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"]
+}
diff --git a/examples/with-videojs/videojs.d.ts b/examples/with-videojs/videojs.d.ts
@@ -0,0 +1 @@
+declare module 'videojs-youtube'
diff --git a/examples/with-yoga/next.config.js b/examples/with-yoga/next.config.js
@@ -1,9 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  compiler: {
-    styledComponents: true,
-  },
 }
 
 module.exports = nextConfig
diff --git a/examples/with-yoga/package.json b/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"
   }
 }
diff --git a/examples/with-yoga/pages/_app.js b/examples/with-yoga/pages/_app.js
diff --git a/examples/with-yoga/pages/_app.tsx b/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>
+  )
+}
diff --git a/examples/with-yoga/pages/_document.js b/examples/with-yoga/pages/_document.js
diff --git a/examples/with-yoga/pages/index.tsx b/examples/with-yoga/pages/index.tsx
diff --git a/examples/with-yoga/tsconfig.json b/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"]
+}
diff --git a/examples/with-yoga/yoga.d.ts b/examples/with-yoga/yoga.d.ts
@@ -0,0 +1 @@
+declare module '@gympass/yoga'
diff --git a/examples/with-zones/blog/next.config.js b/examples/with-zones/blog/next.config.js
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-module.exports = {
+const nextConfig = {
   basePath: '/blog',
 }
+
+module.exports = nextConfig
diff --git a/examples/with-zones/blog/package.json b/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"
+  }
 }
diff --git a/examples/with-zones/blog/pages/index.tsx b/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>
   )
 }
diff --git a/examples/with-zones/blog/pages/post/[id].tsx b/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>
diff --git a/examples/with-zones/blog/public/static/nextjs.png b/examples/with-zones/blog/public/static/nextjs.png
diff --git a/examples/with-zones/blog/tsconfig.json b/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"]
+}
diff --git a/examples/with-zones/home/components/Header.js b/examples/with-zones/home/components/Header.js
diff --git a/examples/with-zones/home/components/Header.tsx b/examples/with-zones/home/components/Header.tsx
@@ -0,0 +1,7 @@
+export default function Header() {
+  return (
+    <div>
+      <h2>The Company</h2>
+    </div>
+  )
+}
diff --git a/examples/with-zones/home/next.config.js b/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
diff --git a/examples/with-zones/home/package.json b/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"
+  }
 }
diff --git a/examples/with-zones/home/pages/about.js b/examples/with-zones/home/pages/about.js
diff --git a/examples/with-zones/home/pages/about.tsx b/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>
+  )
+}
diff --git a/examples/with-zones/home/pages/index.tsx b/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>
   )
 }
diff --git a/examples/with-zones/home/public/static/nextjs.png b/examples/with-zones/home/public/static/nextjs.png
diff --git a/examples/with-zones/home/public/static/vercel.png b/examples/with-zones/home/public/static/vercel.png
diff --git a/examples/with-zones/home/tsconfig.json b/examples/with-zones/home/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import 'videojs-youtube'`
`2`	`2`
`3`		`-const PlayerCSS = () => {`
	`3`	`+export default function PlayerCSS() {`
`4`	`4`	`return (`
`5`	`5`	`<>`
`6`	`6`	`<h1>The implementation below is without react functions</h1>`
`@@ -17,5 +17,3 @@ const PlayerCSS = () => {`
`17`	`17`	`</>`
`18`	`18`	`)`
`19`	`19`	`}`
`20`		`-`
`21`		`-export default PlayerCSS`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import Player from '../components/Player'`
`2`	`2`	`import PlayerCSS from '../components/PlayerCss'`
`3`	`3`
`4`		`-const Index = () => {`
	`4`	`+export default function Index() {`
`5`	`5`	`const videoJsOptions = {`
`6`	`6`	`techOrder: ['youtube'],`
`7`	`7`	`autoplay: false,`
`@@ -21,5 +21,3 @@ const Index = () => {`
`21`	`21`	`</>`
`22`	`22`	`)`
`23`	`23`	`}`
`24`		`-`
`25`		`-export default Index`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,6 @@`
`1`	`1`	`/** @type {import('next').NextConfig} */`
`2`	`2`	`const nextConfig = {`
`3`	`3`	`reactStrictMode: true,`
`4`		`- compiler: {`
`5`		`- styledComponents: true,`
`6`		`- },`
`7`	`4`	`}`
`8`	`5`
`9`	`6`	`module.exports = nextConfig`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`/** @type {import('next').NextConfig} */`
`2`		`-module.exports = {`
	`2`	`+const nextConfig = {`
`3`	`3`	`basePath: '/blog',`
`4`	`4`	`}`
	`5`	`+`
	`6`	`+module.exports = nextConfig`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`const { BLOG_URL } = process.env`
`2`	`2`
`3`	`3`	`/** @type {import('next').NextConfig} */`
`4`		`-module.exports = {`
	`4`	`+const nextConfig = {`
`5`	`5`	`async rewrites() {`
`6`	`6`	`return [`
`7`	`7`	`{`
`@@ -19,3 +19,5 @@ module.exports = {`
`19`	`19`	`]`
`20`	`20`	`},`
`21`	`21`	`}`
	`22`	`+`
	`23`	`+module.exports = nextConfig`