From bb872fd94450e1b9c1c9ed70418208429c25dd4b Mon Sep 17 00:00:00 2001
From: Henrik Wenz <HaNdTriX@users.noreply.github.com>
Date: Mon, 5 Sep 2022 18:28:23 +0200
Subject: [PATCH] [Docs] Migrate image-component example to typescript (#40204)

<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

@styfle as suggested here the TS PR.

> I suggest creating the first PR that is just JS => TS.
>
> The create a second PR that makes style changes.
>

## Changelog

- Update react
- Migrated to typescript

## Related

https://github.com/vercel/next.js/pull/40153

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
---
 .../{view-source.js => view-source.tsx}       | 12 ++++++++----
 examples/image-component/package.json         |  9 +++++++--
 examples/image-component/pages/_app.js        |  5 -----
 examples/image-component/pages/_app.tsx       |  6 ++++++
 .../pages/{background.js => background.tsx}   | 12 ++++++------
 .../pages/{color.js => color.tsx}             |  6 +++---
 .../pages/{index.js => index.tsx}             |  7 +++++--
 .../pages/{layout-fill.js => layout-fill.tsx} |  2 +-
 .../{layout-fixed.js => layout-fixed.tsx}     |  2 +-
 ...yout-intrinsic.js => layout-intrinsic.tsx} |  2 +-
 ...ut-responsive.js => layout-responsive.tsx} |  2 +-
 .../pages/{placeholder.js => placeholder.tsx} |  2 +-
 .../pages/{shimmer.js => shimmer.tsx}         |  6 +++---
 examples/image-component/tsconfig.json        | 19 +++++++++++++++++++
 14 files changed, 62 insertions(+), 30 deletions(-)
 rename examples/image-component/components/{view-source.js => view-source.tsx} (77%)
 delete mode 100644 examples/image-component/pages/_app.js
 create mode 100644 examples/image-component/pages/_app.tsx
 rename examples/image-component/pages/{background.js => background.tsx} (59%)
 rename examples/image-component/pages/{color.js => color.tsx} (85%)
 rename examples/image-component/pages/{index.js => index.tsx} (95%)
 rename examples/image-component/pages/{layout-fill.js => layout-fill.tsx} (94%)
 rename examples/image-component/pages/{layout-fixed.js => layout-fixed.tsx} (87%)
 rename examples/image-component/pages/{layout-intrinsic.js => layout-intrinsic.tsx} (86%)
 rename examples/image-component/pages/{layout-responsive.js => layout-responsive.tsx} (86%)
 rename examples/image-component/pages/{placeholder.js => placeholder.tsx} (88%)
 rename examples/image-component/pages/{shimmer.js => shimmer.tsx} (89%)
 create mode 100644 examples/image-component/tsconfig.json

diff --git a/examples/image-component/components/view-source.js b/examples/image-component/components/view-source.tsx
similarity index 77%
rename from examples/image-component/components/view-source.js
rename to examples/image-component/components/view-source.tsx
index be1d66f32389..7b316f9d0cc5 100644
--- a/examples/image-component/components/view-source.js
+++ b/examples/image-component/components/view-source.tsx
@@ -1,13 +1,17 @@
-import { svg, arm } from './view-source.module.css'
+import styles from './view-source.module.css'
 
-const ViewSource = ({ pathname }) => (
+type ViewSourceProps = {
+  pathname: string
+}
+
+const ViewSource = ({ pathname }: ViewSourceProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="80"
     height="80"
     viewBox="0 0 250 250"
     fill="#151513"
-    className={svg}
+    className={styles.svg}
   >
     <a
       title="View Source"
@@ -15,7 +19,7 @@ const ViewSource = ({ pathname }) => (
     >
       <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
       <path
-        className={arm}
+        className={styles.arm}
         d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
       />
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
diff --git a/examples/image-component/package.json b/examples/image-component/package.json
index f9170ae254fa..e800958c5882 100644
--- a/examples/image-component/package.json
+++ b/examples/image-component/package.json
@@ -7,7 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.14",
+    "@types/react": "16.9.17",
+    "typescript": "4.8.2"
   }
 }
diff --git a/examples/image-component/pages/_app.js b/examples/image-component/pages/_app.js
deleted file mode 100644
index 14b610ee850f..000000000000
--- a/examples/image-component/pages/_app.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import '../app.css'
-
-export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
diff --git a/examples/image-component/pages/_app.tsx b/examples/image-component/pages/_app.tsx
new file mode 100644
index 000000000000..bde43d8134e7
--- /dev/null
+++ b/examples/image-component/pages/_app.tsx
@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '../app.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/image-component/pages/background.js b/examples/image-component/pages/background.tsx
similarity index 59%
rename from examples/image-component/pages/background.js
rename to examples/image-component/pages/background.tsx
index b3e05ab83890..d3c0d8dc1226 100644
--- a/examples/image-component/pages/background.js
+++ b/examples/image-component/pages/background.tsx
@@ -1,11 +1,11 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
-import { bgWrap, bgText } from '../styles.module.css'
+import styles from '../styles.module.css'
 
-const Background = () => (
+const BackgroundPage = () => (
   <div>
-    <ViewSource pathname="pages/background.js" />
-    <div className={bgWrap}>
+    <ViewSource pathname="pages/background.tsx" />
+    <div className={styles.bgWrap}>
       <Image
         alt="Mountains"
         src="/mountains.jpg"
@@ -14,7 +14,7 @@ const Background = () => (
         quality={100}
       />
     </div>
-    <p className={bgText}>
+    <p className={styles.bgText}>
       Image Component
       <br />
       as a Background
@@ -22,4 +22,4 @@ const Background = () => (
   </div>
 )
 
-export default Background
+export default BackgroundPage
diff --git a/examples/image-component/pages/color.js b/examples/image-component/pages/color.tsx
similarity index 85%
rename from examples/image-component/pages/color.js
rename to examples/image-component/pages/color.tsx
index dca5d6d3b972..b04797028014 100644
--- a/examples/image-component/pages/color.js
+++ b/examples/image-component/pages/color.tsx
@@ -5,20 +5,20 @@ import ViewSource from '../components/view-source'
 const keyStr =
   'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
 
-const triplet = (e1, e2, e3) =>
+const triplet = (e1: number, e2: number, e3: number) =>
   keyStr.charAt(e1 >> 2) +
   keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
   keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
   keyStr.charAt(e3 & 63)
 
-const rgbDataURL = (r, g, b) =>
+const rgbDataURL = (r: number, g: number, b: number) =>
   `data:image/gif;base64,R0lGODlhAQABAPAA${
     triplet(0, r, g) + triplet(b, 255, 255)
   }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
 
 const Color = () => (
   <div>
-    <ViewSource pathname="pages/color.js" />
+    <ViewSource pathname="pages/color.tsx" />
     <h1>Image Component With Color Data URL</h1>
     <Image
       alt="Dog"
diff --git a/examples/image-component/pages/index.js b/examples/image-component/pages/index.tsx
similarity index 95%
rename from examples/image-component/pages/index.js
rename to examples/image-component/pages/index.tsx
index a676dc866602..55e23411e7d2 100644
--- a/examples/image-component/pages/index.js
+++ b/examples/image-component/pages/index.tsx
@@ -3,12 +3,15 @@ import Image from 'next/image'
 import Link from 'next/link'
 import ViewSource from '../components/view-source'
 import vercel from '../public/vercel.png'
+import type { PropsWithChildren } from 'react'
 
-const Code = (p) => <code className={styles.inlineCode} {...p} />
+const Code = (props: PropsWithChildren) => (
+  <code className={styles.inlineCode} {...props} />
+)
 
 const Index = () => (
   <div className={styles.container}>
-    <ViewSource pathname="pages/index.js" />
+    <ViewSource pathname="pages/index.tsx" />
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>
diff --git a/examples/image-component/pages/layout-fill.js b/examples/image-component/pages/layout-fill.tsx
similarity index 94%
rename from examples/image-component/pages/layout-fill.js
rename to examples/image-component/pages/layout-fill.tsx
index 526723d427f8..dca195e8096c 100644
--- a/examples/image-component/pages/layout-fill.js
+++ b/examples/image-component/pages/layout-fill.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fill = () => (
   <div>
-    <ViewSource pathname="pages/layout-fill.js" />
+    <ViewSource pathname="pages/layout-fill.tsx" />
     <h1>Image Component With Layout Fill</h1>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />
diff --git a/examples/image-component/pages/layout-fixed.js b/examples/image-component/pages/layout-fixed.tsx
similarity index 87%
rename from examples/image-component/pages/layout-fixed.js
rename to examples/image-component/pages/layout-fixed.tsx
index cd5e26d8b4e3..bff545973566 100644
--- a/examples/image-component/pages/layout-fixed.js
+++ b/examples/image-component/pages/layout-fixed.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fixed = () => (
   <div>
-    <ViewSource pathname="pages/layout-fixed.js" />
+    <ViewSource pathname="pages/layout-fixed.tsx" />
     <h1>Image Component With Layout Fixed</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/layout-intrinsic.js b/examples/image-component/pages/layout-intrinsic.tsx
similarity index 86%
rename from examples/image-component/pages/layout-intrinsic.js
rename to examples/image-component/pages/layout-intrinsic.tsx
index 1ebfeb98a773..fa0ecbbfa4c7 100644
--- a/examples/image-component/pages/layout-intrinsic.js
+++ b/examples/image-component/pages/layout-intrinsic.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Intrinsic = () => (
   <div>
-    <ViewSource pathname="pages/layout-intrinsic.js" />
+    <ViewSource pathname="pages/layout-intrinsic.tsx" />
     <h1>Image Component With Layout Intrinsic</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/layout-responsive.js b/examples/image-component/pages/layout-responsive.tsx
similarity index 86%
rename from examples/image-component/pages/layout-responsive.js
rename to examples/image-component/pages/layout-responsive.tsx
index 4cfc6462afc7..7d5e3decb71b 100644
--- a/examples/image-component/pages/layout-responsive.js
+++ b/examples/image-component/pages/layout-responsive.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Responsive = () => (
   <div>
-    <ViewSource pathname="pages/layout-responsive.js" />
+    <ViewSource pathname="pages/layout-responsive.tsx" />
     <h1>Image Component With Layout Responsive</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/placeholder.js b/examples/image-component/pages/placeholder.tsx
similarity index 88%
rename from examples/image-component/pages/placeholder.js
rename to examples/image-component/pages/placeholder.tsx
index f044b3138dd7..9d5d9c0fa326 100644
--- a/examples/image-component/pages/placeholder.js
+++ b/examples/image-component/pages/placeholder.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const PlaceholderBlur = () => (
   <div>
-    <ViewSource pathname="pages/placeholder.js" />
+    <ViewSource pathname="pages/placeholder.tsx" />
     <h1>Image Component With Placeholder Blur</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/shimmer.js b/examples/image-component/pages/shimmer.tsx
similarity index 89%
rename from examples/image-component/pages/shimmer.js
rename to examples/image-component/pages/shimmer.tsx
index f38e018e4ddc..b53990982c7b 100644
--- a/examples/image-component/pages/shimmer.js
+++ b/examples/image-component/pages/shimmer.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
 
-const shimmer = (w, h) => `
+const shimmer = (w: number, h: number) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g">
@@ -15,14 +15,14 @@ const shimmer = (w, h) => `
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`
 
-const toBase64 = (str) =>
+const toBase64 = (str: string) =>
   typeof window === 'undefined'
     ? Buffer.from(str).toString('base64')
     : window.btoa(str)
 
 const Shimmer = () => (
   <div>
-    <ViewSource pathname="pages/shimmer.js" />
+    <ViewSource pathname="pages/shimmer.tsx" />
     <h1>Image Component With Shimmer Data URL</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/tsconfig.json b/examples/image-component/tsconfig.json
new file mode 100644
index 000000000000..3859fdbcde1f
--- /dev/null
+++ b/examples/image-component/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}