Next.js Commerce refresh. (#966)

We're making some updates to Next.js Commerce. Everything prior to this commit marks what we're calling [`v1`](https://github.com/vercel/commerce/releases/tag/v1) as a point in time to be able to reference and still use going into the future. The current architecture of Commerce is a multi-vendor, interoperable solution, including:

- [Shopify](https://shopify.vercel.store/)
- [Swell](https://swell.vercel.store/)
- [BigCommerce](https://bigcommerce.vercel.store/)
- [Vendure](https://vendure.vercel.store/)
- [Saleor](https://saleor.vercel.store/)
- [Ordercloud](https://ordercloud.vercel.store/)
- [Spree](https://spree.vercel.store/)
- [Kibo Commerce](https://kibocommerce.vercel.store/)
- [Commerce.js](https://commercejs.vercel.store/)
- [SalesForce Cloud Commerce](https://salesforce-cloud-commerce.vercel.store/)

All features can be toggled on or off, and it's easy to change between commerce providers. To support this, we needed to create a ["commerce metaframework"](d1d9e8c434/packages/commerce/new-provider.md) where providers could confirm to an API spec to add support for Next.js Commerce. While this worked and was successful for `v1`, we have different design goals and ambitions for `v2`.

**What You Need To Know**

- `v1` will not be updated moving forward. If you need to reference `v1`, you will still be able to clone and deploy the version tagged at this release.
- `v2` will be shifting to be a single provider vs. provider agnostic. Other providers are welcome to fork this repository and swap out the underlying `lib/` implementation that connects to the selected commerce provider (Shopify). This architecture was chosen to reduce the surface area of the codebase, remove the intermediate metaframework layer for provider-interoperability, and enable usage with the latest Next.js and React features.
- We will be sharing more about `v2` in the future as we continue to iterate before the marked release.

components/layout/navbar/index.tsx

@@ -0,0 +1,53 @@
+import Link from 'next/link';
+import { Suspense } from 'react';
+
+import Cart from 'components/cart';
+import CartIcon from 'components/icons/cart';
+import LogoIcon from 'components/icons/logo';
+import { getMenu } from 'lib/shopify';
+import { Menu } from 'lib/shopify/types';
+import MobileMenu from './mobile-menu';
+import Search from './search';
+
+export default async function Navbar() {
+  const menu = await getMenu('next-js-frontend-header-menu');
+
+  return (
+    <nav className="relative flex items-center justify-between bg-white p-4 dark:bg-black lg:px-6">
+      <div className="block w-1/3 md:hidden">
+        <MobileMenu menu={menu} />
+      </div>
+      <div className="flex justify-self-center md:w-1/3 md:justify-self-start">
+        <div className="md:mr-4">
+          <Link href="/" aria-label="Go back home">
+            <LogoIcon className="h-8 transition-transform hover:scale-110" />
+          </Link>
+        </div>
+        {menu.length ? (
+          <ul className="hidden md:flex">
+            {menu.map((item: Menu) => (
+              <li key={item.title}>
+                <Link
+                  href={item.path}
+                  className="rounded-lg px-2 py-1 text-gray-800 hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400"
+                >
+                  {item.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+      <div className="hidden w-1/3 md:block">
+        <Search />
+      </div>
+
+      <div className="flex w-1/3 justify-end">
+        <Suspense fallback={<CartIcon className="h-6" />}>
+          {/* @ts-expect-error Server Component */}
+          <Cart />
+        </Suspense>
+      </div>
+    </nav>
+  );
+}

components/layout/navbar/mobile-menu.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { Dialog } from '@headlessui/react';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import CloseIcon from 'components/icons/close';
+import MenuIcon from 'components/icons/menu';
+import { Menu } from 'lib/shopify/types';
+import Search from './search';
+
+export default function MobileMenu({ menu }: { menu: Menu[] }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > 768) {
+        setMobileMenuIsOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [mobileMenuIsOpen]);
+
+  useEffect(() => {
+    setMobileMenuIsOpen(false);
+  }, [pathname, searchParams]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setMobileMenuIsOpen(!mobileMenuIsOpen);
+        }}
+        aria-label="Open mobile menu"
+        className="md:hidden"
+        data-testid="open-mobile-menu"
+      >
+        <MenuIcon className="h-6" />
+      </button>
+      <Dialog
+        open={mobileMenuIsOpen}
+        onClose={() => {
+          setMobileMenuIsOpen(false);
+        }}
+        className="relative z-50"
+      >
+        <div className="fixed inset-0 flex justify-end" data-testid="mobile-menu">
+          <Dialog.Panel
+            as={motion.div}
+            variants={{
+              open: { opacity: 1 }
+            }}
+            className="flex w-full flex-col bg-white pb-6 dark:bg-black"
+          >
+            <div className="p-4">
+              <button
+                className="mb-4"
+                onClick={() => {
+                  setMobileMenuIsOpen(false);
+                }}
+                aria-label="Close mobile menu"
+                data-testid="close-mobile-menu"
+              >
+                <CloseIcon className="h-6" />
+              </button>
+
+              <div className="mb-4 w-full">
+                <Search />
+              </div>
+              {menu.length ? (
+                <ul className="flex flex-col">
+                  {menu.map((item: Menu) => (
+                    <li key={item.title}>
+                      <Link
+                        href={item.path}
+                        className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
+                        onClick={() => {
+                          setMobileMenuIsOpen(false);
+                        }}
+                      >
+                        {item.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+          </Dialog.Panel>
+        </div>
+      </Dialog>
+    </>
+  );
+}

components/layout/navbar/search.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import SearchIcon from 'components/icons/search';
+
+export default function Search() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const val = e.target as HTMLFormElement;
+    const search = val.search as HTMLInputElement;
+
+    if (search.value) {
+      router.push(`/search?q=${search.value}`);
+    } else {
+      router.push(`/search`);
+    }
+  }
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="relative m-0 flex w-full items-center border border-gray-200 bg-transparent p-0 dark:border-gray-500"
+    >
+      <input
+        type="text"
+        name="search"
+        placeholder="Search for products..."
+        autoComplete="off"
+        defaultValue={searchParams?.get('q') || ''}
+        className="w-full py-2 px-4 text-black dark:bg-black dark:text-gray-100"
+      />
+      <div className="absolute top-0 right-0 mr-3 flex h-full items-center">
+        <SearchIcon className="h-5" />
+      </div>
+    </form>
+  );
+}