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/grid/index.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+
+function Grid(props: React.ComponentProps<'ul'>) {
+  return (
+    <ul {...props} className={clsx('grid grid-flow-row  gap-4 py-5', props.className)}>
+      {props.children}
+    </ul>
+  );
+}
+
+function GridItem(props: React.ComponentProps<'li'>) {
+  return (
+    <li
+      {...props}
+      className={clsx(
+        'relative aspect-square h-full w-full overflow-hidden transition-opacity',
+        props.className
+      )}
+    >
+      {props.children}
+    </li>
+  );
+}
+
+Grid.Item = GridItem;
+export default Grid;

components/grid/three-items.tsx

@@ -0,0 +1,53 @@
+import { GridTileImage } from 'components/grid/tile';
+import { getCollectionProducts } from 'lib/shopify';
+import type { Product } from 'lib/shopify/types';
+import Link from 'next/link';
+
+function ThreeItemGridItem({
+  item,
+  size,
+  background
+}: {
+  item: Product;
+  size: 'full' | 'half';
+  background: 'white' | 'pink' | 'purple' | 'black';
+}) {
+  return (
+    <div
+      className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
+    >
+      <Link className="block h-full" href={`/product/${item.handle}`}>
+        <GridTileImage
+          src={item.featuredImage.url}
+          width={size === 'full' ? 1080 : 540}
+          height={size === 'full' ? 1080 : 540}
+          priority={true}
+          background={background}
+          alt={item.title}
+          labels={{
+            title: item.title as string,
+            amount: item.priceRange.maxVariantPrice.amount,
+            currencyCode: item.priceRange.maxVariantPrice.currencyCode
+          }}
+        />
+      </Link>
+    </div>
+  );
+}
+
+export async function ThreeItemGrid() {
+  // Collections that start with `hidden-*` are hidden from the search page.
+  const homepageItems = await getCollectionProducts('hidden-homepage-featured-items', 3);
+
+  if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
+
+  const [firstProduct, secondProduct, thirdProduct] = homepageItems;
+
+  return (
+    <section className="lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
+      <ThreeItemGridItem size="full" item={firstProduct} background="purple" />
+      <ThreeItemGridItem size="half" item={secondProduct} background="black" />
+      <ThreeItemGridItem size="half" item={thirdProduct} background="pink" />
+    </section>
+  );
+}

components/grid/tile.tsx

@@ -0,0 +1,70 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+
+import Price from 'components/price';
+
+export function GridTileImage({
+  isInteractive = true,
+  background,
+  active,
+  labels,
+  ...props
+}: {
+  isInteractive?: boolean;
+  background?: 'white' | 'pink' | 'purple' | 'black' | 'purple-dark' | 'blue' | 'cyan' | 'gray';
+  active?: boolean;
+  labels?: {
+    title: string;
+    amount: string;
+    currencyCode: string;
+    isSmall?: boolean;
+  };
+} & React.ComponentProps<typeof Image>) {
+  return (
+    <div
+      className={clsx('relative flex h-full w-full items-center justify-center overflow-hidden', {
+        'bg-white dark:bg-white': background === 'white',
+        'bg-[#ff0080] dark:bg-[#ff0080]': background === 'pink',
+        'bg-[#7928ca] dark:bg-[#7928ca]': background === 'purple',
+        'bg-gray-900 dark:bg-gray-900': background === 'black',
+        'bg-violetDark dark:bg-violetDark': background === 'purple-dark',
+        'bg-blue-500 dark:bg-blue-500': background === 'blue',
+        'bg-cyan-500 dark:bg-cyan-500': background === 'cyan',
+        'bg-gray-100 dark:bg-gray-100': background === 'gray',
+        'bg-gray-100 dark:bg-gray-900': !background,
+        relative: labels
+      })}
+    >
+      {active !== undefined && active ? (
+        <span className="absolute h-full w-full bg-white opacity-25"></span>
+      ) : null}
+      {props.src ? (
+        <Image
+          className={clsx('relative h-full w-full object-contain', {
+            'transition duration-300 ease-in-out hover:scale-105': isInteractive
+          })}
+          {...props}
+          alt={props.title || ''}
+        />
+      ) : null}
+      {labels ? (
+        <div className="absolute top-0 left-0 w-3/4 text-black dark:text-white">
+          <h3
+            data-testid="product-name"
+            className={clsx(
+              'inline bg-white box-decoration-clone py-3 pl-5 font-semibold leading-loose shadow-[1.25rem_0_0] shadow-white dark:bg-black dark:shadow-black',
+              !labels.isSmall ? 'text-3xl' : 'text-lg'
+            )}
+          >
+            {labels.title}
+          </h3>
+          <Price
+            className="w-fit bg-white px-5 py-3 text-sm font-semibold dark:bg-black dark:text-white"
+            amount={labels.amount}
+            currencyCode={labels.currencyCode}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}