Update SFCC example to use TypeScript + @next/font (#42865)

This is now ready for review. Co-authored-by: Hassan El Mghari <hassan4709@gmail.com>
vercel · Nov 14, 2022 · ad61e84 · ad61e84
1 parent 9faba36
commit ad61e84
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 59 deletions.
diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
@@ -169,12 +169,13 @@ In the example below, we use the font `Inter` from `@next/font/google` (You can
 import { Inter } from '@next/font/google'
 
 const inter = Inter({
+  subsets: ['latin'],
   variable: '--font-inter',
 })
 
 export default function MyApp({ Component, pageProps }) {
   return (
-    <main className={inter.variable}>
+    <main className={`${inter.variable} font-sans`}>
       <Component {...pageProps} />
     </main>
   )

diff --git a/examples/with-sfcc/components/Footer.tsx b/examples/with-sfcc/components/Footer.tsx
@@ -0,0 +1,14 @@
+export default function Footer() {
+  return (
+    <footer className="center mt-5 flex justify-center space-x-4 bg-[#E7E8EF] p-4 text-xs">
+      <p>Powered by Next.js, Salesforce Commerce Cloud, and Vercel </p>
+      <span>|</span>
+      <a
+        href="https://github.com/vercel/next.js/tree/canary/examples/with-sfcc"
+        className="font-medium text-orange-600"
+      >
+        Source code
+      </a>
+    </footer>
+  )
+}
diff --git a/examples/with-sfcc/components/Header.js → examples/with-sfcc/components/Header.tsx b/examples/with-sfcc/components/Header.js → examples/with-sfcc/components/Header.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import img from '../public/hero.jpg'
 
 export default function Header({ scrollHandler }) {
   return (
@@ -11,7 +12,8 @@ export default function Header({ scrollHandler }) {
               priority
               fill
               className="h-full w-full object-cover"
-              src="/hero.jpg"
+              src={img}
+              placeholder="blur"
               alt="Coffee grinder"
             />
             <div className="absolute inset-0 bg-orange-100 mix-blend-multiply" />

diff --git a/examples/with-sfcc/components/ProductCard.js → ...ples/with-sfcc/components/ProductCard.tsx b/examples/with-sfcc/components/ProductCard.js → ...ples/with-sfcc/components/ProductCard.tsx
@@ -13,7 +13,7 @@ export default function ProductCard({ product }) {
     <Link href={`/products/${product.id}`} className="group">
       <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
         <Image
-          alt=""
+          alt="product image"
           src={product.imageGroups[0].images[0].link}
           fill
           className={cn(

diff --git a/examples/with-sfcc/components/layout.js b/examples/with-sfcc/components/layout.js
diff --git a/examples/with-sfcc/next.config.js b/examples/with-sfcc/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ['zzte-003.sandbox.us02.dx.commercecloud.salesforce.com'],
+    domains: ['zzte-003.dx.commercecloud.salesforce.com'],
   },
 }
diff --git a/examples/with-sfcc/package.json b/examples/with-sfcc/package.json
@@ -6,18 +6,19 @@
     "start": "next start"
   },
   "dependencies": {
+    "@next/font": "latest",
     "commerce-sdk": "^2.8.0",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@types/node": "17.0.4",
-    "@types/react": "17.0.38",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.25",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.7",
-    "typescript": "4.5.4"
+    "typescript": "4.8.4"
   }
 }
diff --git a/examples/with-sfcc/pages/_app.js b/examples/with-sfcc/pages/_app.js
diff --git a/examples/with-sfcc/pages/_app.tsx b/examples/with-sfcc/pages/_app.tsx
@@ -0,0 +1,23 @@
+import '../styles/globals.css'
+import Footer from '../components/Footer'
+import Head from 'next/head'
+import { Montserrat } from '@next/font/google'
+
+const montserrat = Montserrat({
+  subsets: ['latin'],
+  variable: '--font-montserrat',
+})
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>The Coffee House</title>
+      </Head>
+      <main className={`${montserrat.variable} font-sans`}>
+        <Component {...pageProps} />
+        <Footer />
+      </main>
+    </>
+  )
+}
diff --git a/examples/with-sfcc/pages/_document.js → examples/with-sfcc/pages/_document.tsx b/examples/with-sfcc/pages/_document.js → examples/with-sfcc/pages/_document.tsx
@@ -8,12 +8,7 @@ export default function Document() {
           name="description"
           content="The premiere coffee delivery service."
         />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-          rel="stylesheet"
-        />
       </Head>
-
       <body>
         <Main />
         <NextScript />

diff --git a/examples/with-sfcc/pages/index.js → examples/with-sfcc/pages/index.tsx b/examples/with-sfcc/pages/index.js → examples/with-sfcc/pages/index.tsx
@@ -4,10 +4,11 @@ import ProductCard from '../components/ProductCard'
 import getProducts from '../sfcc.js'
 
 export default function Gallery({ data }) {
-  let coffeeRef = useRef()
+  let coffeeRef = useRef<HTMLParagraphElement>()
 
   const scrollHandler = (e) => {
     e.preventDefault()
+    // @ts-ignore
     coffeeRef.scrollIntoView({
       behavior: 'smooth',
       block: 'start',
@@ -22,7 +23,7 @@ export default function Gallery({ data }) {
           <div className="text-center">
             <p
               className="mt-1 text-4xl font-bold uppercase text-gray-900 sm:text-5xl sm:tracking-tight lg:text-5xl"
-              ref={(element) => (coffeeRef = element)}
+              ref={coffeeRef}
             >
               Crafted by us, for you
             </p>

diff --git a/examples/with-sfcc/pages/products/[slug].js → examples/with-sfcc/pages/products/[slug].tsx b/examples/with-sfcc/pages/products/[slug].js → examples/with-sfcc/pages/products/[slug].tsx
@@ -33,9 +33,8 @@ export default function Product({ product }) {
 
 export async function getStaticProps({ params }) {
   const searchResults = await getProducts(params.slug)
-  console.log('search Results are: ', searchResults)
-
   const coffeeProduct = searchResults[0]
+
   return {
     props: {
       product: coffeeProduct,
@@ -44,11 +43,9 @@ export async function getStaticProps({ params }) {
 }
 
 export async function getStaticPaths() {
-  const searchResults = await getProducts('coffee')
-
-  let coffeeProducts = searchResults
-
+  const coffeeProducts = await getProducts('coffee')
   let fullPaths = []
+
   for (let product of coffeeProducts) {
     fullPaths.push({ params: { slug: product.id } })
   }

diff --git a/examples/with-sfcc/styles/globals.css b/examples/with-sfcc/styles/globals.css
@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-* {
-  font-family: Montserrat, sans-serif;
-}
diff --git a/examples/with-sfcc/tailwind.config.js b/examples/with-sfcc/tailwind.config.js
@@ -1,7 +1,16 @@
+/** @type {import('tailwindcss').Config} \*/
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
   ],
+  theme: {
+    fontFamily: {
+      sans: ['var(--font-montserrat)'],
+    },
+  },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   plugins: [require('@tailwindcss/aspect-ratio')],
 }
diff --git a/examples/with-sfcc/tsconfig.json b/examples/with-sfcc/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}