Merge branch 'main' into add-ecwid-provider

2025-05-12 04:37:51 +00:00 · 2024-04-19 19:35:28 +04:00 · 2024-04-19 19:35:28 +04:00 · ac9683832d
commit ac9683832d
parent 37f770e0ee 887d437795
25 changed files with 1168 additions and 861 deletions
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -21,7 +21,7 @@ jobs:
        uses: pnpm/action-setup@v2
        with:
          run_install: false
-          version: 7
+          version: 8
      - name: Cache node_modules
        id: node-modules-cache
        uses: actions/cache@v3
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -2,8 +2,8 @@
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true,
-    "source.sortMembers": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
  }
 }
--- a/app/[page]/layout.tsx
+++ b/app/[page]/layout.tsx
@ -1,15 +1,12 @@
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';

 export default function Layout({ children }: { children: React.ReactNode }) {
  return (
-    <Suspense>
+    <>
      <div className="w-full">
-        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
-          <Suspense>{children}</Suspense>
-        </div>
+        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
      </div>
      <Footer />
-    </Suspense>
+    </>
  );
 }
--- a/app/[page]/page.tsx
+++ b/app/[page]/page.tsx
@ -4,10 +4,6 @@ import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';

-export const runtime = 'edge';
-
-export const revalidate = 43200; // 12 hours in seconds
-
 export async function generateMetadata({
  params
 }: {
--- a/app/api/revalidate/route.ts
+++ b/app/api/revalidate/route.ts
@ -1,8 +1,6 @@
 import { revalidate } from 'lib/shopify';
 import { NextRequest, NextResponse } from 'next/server';

-export const runtime = 'edge';
-
 export async function POST(req: NextRequest): Promise<NextResponse> {
  return revalidate(req);
 }
--- a/app/error.tsx
+++ b/app/error.tsx
@ -2,7 +2,7 @@

 export default function Error({ reset }: { reset: () => void }) {
  return (
-    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
      <h2 className="text-xl font-bold">Oh no!</h2>
      <p className="my-2">
        There was an issue with our storefront. This could be a temporary issue, please try your
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,7 +1,7 @@
 import Navbar from 'components/layout/navbar';
-import { GeistSans } from 'geist/font';
+import { GeistSans } from 'geist/font/sans';
 import { ensureStartsWith } from 'lib/utils';
-import { ReactNode, Suspense } from 'react';
+import { ReactNode } from 'react';
 import './globals.css';

 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@ -36,9 +36,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
    <html lang="en" className={GeistSans.variable}>
      <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
        <Navbar />
-        <Suspense>
-          <main>{children}</main>
-        </Suspense>
+        <main>{children}</main>
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,9 +1,6 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';

 export const metadata = {
  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
@ -16,12 +13,8 @@ export default async function HomePage() {
  return (
    <>
      <ThreeItemGrid />
-      <Suspense>
-        <Carousel />
-        <Suspense>
-          <Footer />
-        </Suspense>
-      </Suspense>
+      <Carousel />
+      <Footer />
    </>
  );
 }
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';

 import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
@ -10,8 +9,7 @@ import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
-
-export const runtime = 'edge';
+import { Suspense } from 'react';

 export async function generateMetadata({
  params
@ -82,27 +80,29 @@ export default async function ProductPage({ params }: { params: { handle: string
        }}
      />
      <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
          <div className="h-full w-full basis-full lg:basis-4/6">
-            <Gallery
-              images={product.images.map((image: Image) => ({
-                src: image.url,
-                altText: image.altText
-              }))}
-            />
+            <Suspense
+              fallback={
+                <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" />
+              }
+            >
+              <Gallery
+                images={product.images.map((image: Image) => ({
+                  src: image.url,
+                  altText: image.altText
+                }))}
+              />
+            </Suspense>
          </div>

          <div className="basis-full lg:basis-2/6">
            <ProductDescription product={product} />
          </div>
        </div>
-        <Suspense>
-          <RelatedProducts id={product.id} />
-        </Suspense>
+        <RelatedProducts id={product.id} />
      </div>
-      <Suspense>
-        <Footer />
-      </Suspense>
+      <Footer />
    </>
  );
 }
--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@ -6,8 +6,6 @@ import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';

-export const runtime = 'edge';
-
 export async function generateMetadata({
  params
 }: {
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@ -2,12 +2,11 @@ import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
-import { Suspense } from 'react';

 export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
-    <Suspense>
-      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
+    <>
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
        <div className="order-first w-full flex-none md:max-w-[125px]">
          <Collections />
        </div>
@ -17,6 +16,6 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
        </div>
      </div>
      <Footer />
-    </Suspense>
+    </>
  );
 }
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@ -3,8 +3,6 @@ import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 import { getProducts } from 'lib/shopify';

-export const runtime = 'edge';
-
 export const metadata = {
  title: 'Search',
  description: 'Search for products in the store.'
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@ -11,6 +11,8 @@ const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
  : 'http://localhost:3000';

+export const dynamic = 'force-dynamic';
+
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  validateEnvironmentVariables();

--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
            leaveFrom="translate-x-0"
            leaveTo="translate-x-full"
          >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
              <div className="flex items-center justify-between">
                <p className="text-lg font-semibold">My Cart</p>

--- a/components/layout/footer-menu.tsx
+++ b/components/layout/footer-menu.tsx
@ -19,7 +19,7 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
      <Link
        href={item.path}
        className={clsx(
-          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
+          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm dark:hover:text-neutral-300',
          {
            'text-black dark:text-neutral-300': active
          }
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@ -16,9 +16,9 @@ export default async function Footer() {

  return (
    <footer className="text-sm text-neutral-500 dark:text-neutral-400">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
        <div>
-          <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
+          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
            <LogoSquare size="sm" />
            <span className="uppercase">{SITE_NAME}</span>
          </Link>
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@ -6,7 +6,7 @@ import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
 const { SITE_NAME } = process.env;

 export default async function Navbar() {
@ -15,7 +15,9 @@ export default async function Navbar() {
  return (
    <nav className="relative flex items-center justify-between p-4 lg:px-6">
      <div className="block flex-none md:hidden">
-        <MobileMenu menu={menu} />
+        <Suspense fallback={null}>
+          <MobileMenu menu={menu} />
+        </Suspense>
      </div>
      <div className="flex w-full items-center">
        <div className="flex w-full md:w-1/3">
@ -41,7 +43,9 @@ export default async function Navbar() {
          ) : null}
        </div>
        <div className="hidden justify-center md:flex md:w-1/3">
-          <Search />
+          <Suspense fallback={<SearchSkeleton />}>
+            <Search />
+          </Suspense>
        </div>
        <div className="flex justify-end md:w-1/3">
          <Suspense fallback={<OpenCart />}>
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@ -3,11 +3,11 @@
 import { Dialog, Transition } from '@headlessui/react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, Suspense, useEffect, useState } from 'react';

 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopify/types';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';

 export default function MobileMenu({ menu }: { menu: Menu[] }) {
  const pathname = usePathname();
@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
      <button
        onClick={openMobileMenu}
        aria-label="Open mobile menu"
-        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
+        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden dark:border-neutral-700 dark:text-white"
      >
        <Bars3Icon className="h-4" />
      </button>
@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                </button>

                <div className="mb-4 w-full">
-                  <Search />
+                  <Suspense fallback={<SearchSkeleton />}>
+                    <Search />
+                  </Suspense>
                </div>
                {menu.length ? (
                  <ul className="flex w-full flex-col">
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@ -41,3 +41,17 @@ export default function Search() {
    </form>
  );
 }
+
+export function SearchSkeleton() {
+  return (
+    <form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        placeholder="Search for products..."
+        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+      />
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+        <MagnifyingGlassIcon className="h-4" />
+      </div>
+    </form>
+  );
+}
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@ -1,4 +1,5 @@
 import { SortFilterItem } from 'lib/constants';
+import { Suspense } from 'react';
 import FilterItemDropdown from './dropdown';
 import { FilterItem } from './item';

@ -20,15 +21,19 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
    <>
      <nav>
        {title ? (
-          <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
+          <h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
            {title}
          </h3>
        ) : null}
        <ul className="hidden md:block">
-          <FilterItemList list={list} />
+          <Suspense fallback={null}>
+            <FilterItemList list={list} />
+          </Suspense>
        </ul>
        <ul className="md:hidden">
-          <FilterItemDropdown list={list} />
+          <Suspense fallback={null}>
+            <FilterItemDropdown list={list} />
+          </Suspense>
        </ul>
      </nav>
    </>
--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@ -1,7 +1,7 @@
 'use client';

 import clsx from 'clsx';
-import { SortFilterItem } from 'lib/constants';
+import type { SortFilterItem } from 'lib/constants';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
+import { Suspense } from 'react';
 import { VariantSelector } from './variant-selector';

 export function ProductDescription({ product }: { product: Product }) {
@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
          />
        </div>
      </div>
-      <VariantSelector options={product.options} variants={product.variants} />
+      <Suspense fallback={null}>
+        <VariantSelector options={product.options} variants={product.variants} />
+      </Suspense>

      {product.descriptionHtml ? (
        <Prose
@ -25,7 +28,9 @@ export function ProductDescription({ product }: { product: Product }) {
        />
      ) : null}

-      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      <Suspense fallback={null}>
+        <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      </Suspense>
    </>
  );
 }
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@ -357,6 +357,7 @@ export async function getMenu(handle: string): Promise<Menu[]> {
 export async function getPage(handle: string): Promise<Page> {
  const res = await shopifyFetch<ShopifyPageOperation>({
    query: getPageQuery,
+    cache: 'no-store',
    variables: { handle }
  });

@ -365,7 +366,8 @@ export async function getPage(handle: string): Promise<Page> {

 export async function getPages(): Promise<Page[]> {
  const res = await shopifyFetch<ShopifyPagesOperation>({
-    query: getPagesQuery
+    query: getPagesQuery,
+    cache: 'no-store'
  });

  return removeEdgesAndNodes(res.body.data.pages);
--- a/package.json
+++ b/package.json
@ -3,10 +3,10 @@
  "packageManager": "pnpm@8.2.0",
  "engines": {
    "node": ">=18",
-    "pnpm": ">=7"
+    "pnpm": ">=8"
  },
  "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
@ -22,31 +22,31 @@
    "*": "prettier --write --ignore-unknown"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.0.18",
-    "clsx": "^2.0.0",
-    "geist": "^1.0.0",
-    "next": "14.0.0",
+    "@headlessui/react": "^1.7.19",
+    "@heroicons/react": "^2.1.3",
+    "clsx": "^2.1.0",
+    "geist": "^1.3.0",
+    "next": "14.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.8.9",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
+    "@tailwindcss/typography": "^0.5.12",
+    "@types/node": "20.12.7",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
    "@vercel/git-hooks": "^1.0.0",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
-    "eslint-config-next": "^14.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-unicorn": "^48.0.1",
-    "lint-staged": "^15.0.2",
-    "postcss": "^8.4.31",
-    "prettier": "3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
-    "tailwindcss": "^3.3.5",
-    "typescript": "5.2.2"
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-unicorn": "^52.0.0",
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.38",
+    "prettier": "3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.4.5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml