Publish Stable

- @vercel/build-utils@5.0.2
 - vercel@27.1.0
 - @vercel/client@12.1.1
 - @vercel/fs-detectors@2.0.0
 - @vercel/go@2.0.6
 - @vercel/hydrogen@0.0.3
 - @vercel/next@3.1.5
 - @vercel/node@2.4.3
 - @vercel/python@3.0.6
 - @vercel/redwood@1.0.7
 - @vercel/remix@1.0.8
 - @vercel/ruby@1.3.14
 - @vercel/static-build@1.0.6

.eslintignore

@@ -19,6 +19,13 @@ packages/cli/src/util/dev/templates/*.ts
 packages/client/tests/fixtures
 packages/client/lib
 
+# hydrogen
+packages/hydrogen/edge-entry.js
+
+# next
+packages/next/test/integration/middleware
+packages/next/test/integration/middleware-eval
+
 # node-bridge
 packages/node-bridge/bridge.js
 packages/node-bridge/launcher.js

.gitattributes

@@ -8,3 +8,7 @@ packages/*/test/* linguist-vendored
 # Go build fails with Windows line endings.
 *.go text eol=lf
 go.mod text eol=lf
+
+# Mark certain files as "binary" -- hide diffs
+**/test/fixtures/**/git/**/* binary
+**/test/fixtures/**/git/**/* linguist-generated

.github/CODEOWNERS

@@ -1,29 +1,26 @@
 # Documentation
 # https://help.github.com/en/articles/about-code-owners
 
-*                                        @TooTallNate
+*                                        @TooTallNate @EndangeredMassa @styfle
-/.github/workflows                       @AndyBitz @styfle
+/.github/workflows                       @TooTallNate @EndangeredMassa @styfle @ijjk
-/packages/frameworks                     @AndyBitz
+/packages/frameworks                     @TooTallNate @EndangeredMassa @styfle @AndyBitz
-/packages/cli/src/commands/build         @TooTallNate @styfle @AndyBitz @gdborton @jaredpalmer
-/packages/cli/src/commands/dev           @TooTallNate @styfle @AndyBitz
-/packages/cli/src/util/dev               @TooTallNate @styfle @AndyBitz
 /packages/cli/src/commands/domains       @javivelasco @mglagola @anatrajkovska
 /packages/cli/src/commands/certs         @javivelasco @mglagola @anatrajkovska
 /packages/cli/src/commands/env           @styfle @lucleray
-/packages/client                         @styfle @TooTallNate
+/packages/client                         @TooTallNate @EndangeredMassa @styfle
-/packages/build-utils                    @styfle @AndyBitz @TooTallNate
+/packages/build-utils                    @TooTallNate @EndangeredMassa @styfle @AndyBitz
 /packages/middleware                     @gdborton @javivelasco
-/packages/node                           @styfle @TooTallNate @lucleray
+/packages/node                           @TooTallNate @EndangeredMassa @styfle
-/packages/node-bridge                    @styfle @TooTallNate @lucleray
+/packages/node-bridge                    @TooTallNate @EndangeredMassa @styfle @ijjk
-/packages/next                           @Timer @ijjk
+/packages/next                           @TooTallNate @ijjk
-/packages/go                             @styfle @TooTallNate
+/packages/go                             @TooTallNate @EndangeredMassa @styfle
-/packages/python                         @styfle @TooTallNate
+/packages/python                         @TooTallNate @EndangeredMassa @styfle
-/packages/ruby                           @styfle @TooTallNate
+/packages/ruby                           @TooTallNate @EndangeredMassa @styfle
-/packages/static-build                   @styfle @AndyBitz
+/packages/static-build                   @TooTallNate @EndangeredMassa @styfle @AndyBitz
-/packages/routing-utils                  @styfle @dav-is @ijjk
+/packages/routing-utils                  @TooTallNate @EndangeredMassa @styfle @ijjk
-/examples                                @mcsdevv
+/examples                                @leerob
 /examples/create-react-app               @Timer
-/examples/nextjs                         @timneutkens @Timer
+/examples/nextjs                         @timneutkens @ijjk @styfle
-/examples/hugo                           @mcsdevv @styfle
+/examples/hugo                           @styfle
-/examples/jekyll                         @mcsdevv @styfle
+/examples/jekyll                         @styfle
-/examples/zola                           @mcsdevv @styfle
+/examples/zola                           @styfle

.github/CONTRIBUTING.md

@@ -23,7 +23,7 @@ Make sure all the tests pass before making changes.
 
 ## Verifying your change
 
-Once you are done with your changes (we even suggest doing it along the way), make sure all the test still pass by running:
+Once you are done with your changes (we even suggest doing it along the way), make sure all the tests still pass by running:
 
 ```
 yarn test-unit
@@ -64,7 +64,7 @@ Integration tests create deployments to your Vercel account using the `test` pro
       x-now-trace=iad1]
 ```
 
-In such cases you can visit the URL of the failed deployment and append `/_logs` so see the build error. In the case above, that would be https://test-8ashcdlew.vercel.app/_logs
+In such cases, you can visit the URL of the failed deployment and append `/_logs` to see the build error. In the case above, that would be https://test-8ashcdlew.vercel.app/_logs
 
 The logs of this deployment will contain the actual error which may help you to understand what went wrong.
 
@@ -82,11 +82,11 @@ nodeFileTrace(['path/to/entrypoint.js'], {
   .then(e => console.error(e));
 ```
 
-When you run this script, you'll see all imported files. If anything file is missing, the bug is in [@vercel/nft](https://github.com/vercel/nft) and not the Builder.
+When you run this script, you'll see all the imported files. If anything file is missing, the bug is in [@vercel/nft](https://github.com/vercel/nft) and not the Builder.
 
 ## Deploy a Builder with existing project
 
-Sometimes you want to test changes to a Builder against an existing project, maybe with `vercel dev` or an actual deployment. You can avoid publishing every Builder change to npm by uploading the Builder as a tarball.
+Sometimes you want to test changes to a Builder against an existing project, maybe with `vercel dev` or actual deployment. You can avoid publishing every Builder change to npm by uploading the Builder as a tarball.
 
 1. Change directory to the desired Builder `cd ./packages/node`
 2. Run `yarn build` to compile typescript and other build steps

.github/workflows/cancel.yml

@@ -13,6 +13,5 @@ jobs:
     steps:
       - uses: styfle/cancel-workflow-action@0.9.1
         with:
-          workflow_id: 849295, 849296, 849297, 849298
+          workflow_id: test.yml, test-integration-cli.yml, test-unit.yml
           access_token: ${{ github.token }}
-

.github/workflows/test-integration-cli.yml

@@ -16,9 +16,15 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest]
-        node: [12]
+        node: [14]
     runs-on: ${{ matrix.os }}
     steps:
+      - name: Conditionally set remote env
+        if: github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
+            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
+            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
       - uses: actions/setup-go@v2
         with:
           go-version: '1.13.15'

.github/workflows/test-integration-dev.yml

@@ -1,43 +0,0 @@
-name: Dev
-
-on:
-  push:
-    branches:
-    - main
-    tags:
-    - '!*'
-  pull_request:
-
-jobs:
-  test:
-    name: Dev
-    timeout-minutes: 75
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest, macos-latest]
-        node: [12]
-    runs-on: ${{ matrix.os }}
-    steps:
-      - uses: actions/setup-go@v2
-        with:
-          go-version: '1.13.15'
-      - uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node }}
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 100
-      - run: git --version
-      - run: git fetch origin main --depth=100
-      - run: git fetch origin ${{ github.ref }} --depth=100
-      - run: git diff origin/main...HEAD --name-only
-      - name: Install Hugo
-        if: matrix.os == 'macos-latest'
-        run: curl -L -O https://github.com/gohugoio/hugo/releases/download/v0.56.0/hugo_0.56.0_macOS-64bit.tar.gz && tar -xzf hugo_0.56.0_macOS-64bit.tar.gz && mv ./hugo packages/cli/test/dev/fixtures/08-hugo/
-      - run: yarn install --network-timeout 1000000
-      - run: yarn run build
-      - run: yarn test-integration-dev
-        env:
-          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
-          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}

.github/workflows/test-integration-once.yml

@@ -1,35 +0,0 @@
-name: E2E
-
-on:
-  push:
-    branches:
-    - main
-    tags:
-    - '!*'
-  pull_request:
-
-jobs:
-  test:
-    name: E2E
-    timeout-minutes: 120
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/setup-go@v2
-        with:
-          go-version: '1.13.15'
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 12
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 100
-      - run: git --version
-      - run: git fetch origin main --depth=100
-      - run: git fetch origin ${{ github.ref }} --depth=100
-      - run: git diff origin/main...HEAD --name-only
-      - run: yarn install --network-timeout 1000000
-      - run: yarn run build
-      - run: yarn test-integration-once
-        env:
-          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
-          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}

.github/workflows/test-unit.yml

@@ -16,9 +16,15 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
-        node: [12]
+        node: [14]
     runs-on: ${{ matrix.os }}
     steps:
+      - name: Conditionally set remote env
+        if: github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
+            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
+            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
       - uses: actions/setup-go@v2
         with:
           go-version: '1.13.15'
@@ -35,9 +41,9 @@ jobs:
       - run: yarn install --network-timeout 1000000
       - run: yarn run build
       - run: yarn run lint
-        if: matrix.os == 'ubuntu-latest' && matrix.node == 12 # only run lint once
+        if: matrix.os == 'ubuntu-latest' && matrix.node == 14 # only run lint once
       - run: yarn run test-unit
       - run: yarn workspace vercel run coverage
-        if: matrix.os == 'ubuntu-latest' && matrix.node == 12 # only run coverage once
+        if: matrix.os == 'ubuntu-latest' && matrix.node == 14 # only run coverage once
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,90 @@
+name: Tests
+
+on:
+  push:
+    branches:
+    - main
+    tags:
+    - '!*'
+  pull_request:
+
+env:
+  NODE_VERSION: '14'
+
+jobs:
+  setup:
+    name: Find Changes
+    runs-on: ubuntu-latest
+    outputs:
+      tests: ${{ steps['set-tests'].outputs['tests'] }}
+    steps:
+      - uses: actions/checkout@v2
+      - run: git --version
+      - run: git fetch origin main
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+      - run: yarn install --network-timeout 1000000
+      - id: set-tests
+        run: |
+          TESTS_ARRAY=$(node utils/chunk-tests.js $SCRIPT_NAME)
+          echo "Files to test:"
+          echo "$TESTS_ARRAY"
+          echo "::set-output name=tests::$TESTS_ARRAY"
+
+  test:
+    timeout-minutes: 120
+    runs-on: ${{ matrix.runner }}
+    name: ${{matrix.scriptName}} (${{matrix.packageName}}, ${{matrix.chunkNumber}}, ${{ matrix.runner }})
+    if: ${{ needs.setup.outputs['tests'] != '[]' }}
+    needs:
+      - setup
+    strategy:
+      fail-fast: false
+      matrix:
+        include: ${{ fromJson(needs.setup.outputs['tests']) }}
+    steps:
+      - name: Conditionally set remote env
+        if: github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+            echo "TURBO_REMOTE_ONLY=true" >> $GITHUB_ENV
+            echo "TURBO_TEAM=vercel" >> $GITHUB_ENV
+            echo "TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}" >> $GITHUB_ENV
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+      - uses: actions/setup-go@v2
+        with:
+          go-version: '1.13.15'
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'yarn'
+
+      - name: Install Hugo
+        if: matrix.runner == 'macos-latest'
+        run: curl -L -O https://github.com/gohugoio/hugo/releases/download/v0.56.0/hugo_0.56.0_macOS-64bit.tar.gz && tar -xzf hugo_0.56.0_macOS-64bit.tar.gz && mv ./hugo packages/cli/test/dev/fixtures/08-hugo/
+
+      - run: yarn install --network-timeout 1000000
+
+      - name: Build ${{matrix.packageName}} and all its dependencies
+        run: yarn turbo run build --cache-dir=".turbo" --scope=${{matrix.packageName}} --include-dependencies --no-deps
+        env:
+          FORCE_COLOR: '1'
+      - name: Test ${{matrix.packageName}}
+        run: node_modules/.bin/turbo run test --cache-dir=".turbo" --scope=${{matrix.packageName}} --no-deps -- ${{ join(matrix.testPaths, ' ') }}
+        shell: bash
+        env:
+          VERCEL_TEAM_TOKEN: ${{ secrets.VERCEL_TEAM_TOKEN }}
+          VERCEL_REGISTRATION_URL: ${{ secrets.VERCEL_REGISTRATION_URL }}
+          FORCE_COLOR: '1'
+
+  conclusion:
+    needs:
+      - test
+    runs-on: ubuntu-latest
+    name: E2E
+    steps:
+      - name: Done
+        run: echo "Done."

.prettierignore

@@ -0,0 +1,4 @@
+# https://prettier.io/docs/en/ignore.html
+
+# ignore this file with an intentional syntax error
+packages/cli/test/dev/fixtures/edge-function-error/api/edge-error-syntax.js

.vercelignore

@@ -1,18 +1 @@
-*
+packages/*/test/**
-
-# general
-!utils/
-!utils/run.js
-!.yarnrc
-!yarn.lock
-!package.json
-!turbo.json
-
-# api
-!api/
-!api/**
-
-# packages
-!packages/
-!packages/frameworks
-!packages/frameworks/**

api/_lib/script/build.ts

@@ -1,5 +1,6 @@
 import fs from 'fs/promises';
-import { join } from 'path';
+import { join, dirname } from 'path';
+import execa from 'execa';
 import { getExampleList } from '../examples/example-list';
 import { mapOldToNew } from '../examples/map-old-to-new';
 
@@ -40,7 +41,32 @@ async function main() {
     JSON.stringify([...existingExamples, ...oldExamples])
   );
 
+  const { stdout: sha } = await execa('git', ['rev-parse', '--short', 'HEAD'], {
+    cwd: repoRoot,
+  });
+
+  const tarballsDir = join(pubDir, 'tarballs');
+  const packagesDir = join(repoRoot, 'packages');
+  const packages = await fs.readdir(packagesDir);
+  for (const pkg of packages) {
+    const fullDir = join(packagesDir, pkg);
+    const packageJsonRaw = await fs.readFile(
+      join(fullDir, 'package.json'),
+      'utf-8'
+    );
+    const packageJson = JSON.parse(packageJsonRaw);
+    const tarballName = `${packageJson.name
+      .replace('@', '')
+      .replace('/', '-')}-v${packageJson.version}-${sha.trim()}.tgz`;
+    const destTarballPath = join(tarballsDir, `${packageJson.name}.tgz`);
+    await fs.mkdir(dirname(destTarballPath), { recursive: true });
+    await fs.copyFile(join(fullDir, tarballName), destTarballPath);
+  }
+
   console.log('Completed building static frontend.');
 }
 
-main().catch(console.error);
+main().catch(err => {
+  console.log('error running build:', err);
+  process.exit(1);
+});

api/package.json

@@ -5,7 +5,8 @@
   "description": "API for the vercel/vercel repo",
   "main": "index.js",
   "scripts": {
-    "vercel-build": "node ../utils/run.js build all"
+    "//TODO": "We should add this pkg to yarn workspaces",
+    "vercel-build": "cd .. && yarn install && yarn vercel-build"
   },
   "dependencies": {
     "@sentry/node": "5.11.1",

api/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ES2020",
     "skipLibCheck": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,

examples/astro/.gitignore

@@ -0,0 +1,20 @@
+# build output
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

examples/astro/.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true

examples/astro/.vercelignore

@@ -0,0 +1 @@
+README.md

examples/astro/README.md

@@ -0,0 +1,42 @@
+# Welcome to [Astro](https://astro.build)
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/starter)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   └── favicon.ico
+├── src/
+│   ├── components/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components or layouts.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command           | Action                                       |
+| :---------------- | :------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).

examples/astro/astro.config.mjs

@@ -0,0 +1,4 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});

examples/astro/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@example/basics",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "astro": "^1.0.0-beta.20"
+  }
+}

examples/astro/src/components/Layout.astro

@@ -0,0 +1,55 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props as Props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+	<title>{title}</title>
+</head>
+<body>
+	<slot />
+</body>
+</html>
+
+<style>
+  :root {
+    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); 
+    --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+
+    --color-text: hsl(12, 5%, 4%);
+    --color-bg: hsl(10, 21%, 95%);
+  }
+
+  html {
+    font-family: system-ui, sans-serif;
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+    background-color: var(--color-bg);
+  }
+
+  body {
+    margin: 0;
+  }
+
+  :global(h1) {
+    font-size: var(--font-size-xl);
+  }
+
+  :global(h2) {
+    font-size: var(--font-size-lg);
+  }
+
+  :global(code) {
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+  }
+</style>

examples/astro/src/pages/index.astro

@@ -0,0 +1,174 @@
+---
+import Layout from '../components/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
+		<p class="instructions"><strong>Your first mission:</strong> tweak this message to try our hot module reloading. Check the <code>src/pages</code> directory!</p>
+		<ul role="list" class="link-card-grid">
+			<li class="link-card">
+				<a href="https://astro.build/integrations/">
+					<h2>Integrations <span>&rarr;</span></h2>
+					<p>Add component frameworks, Tailwind, Partytown, and more!</p>
+				</a>
+			</li>
+			<li class="link-card">
+				<a href="https://astro.build/themes/">
+					<h2>Themes <span>&rarr;</span></h2>
+					<p>Explore a galaxy of community-built starters.</p>
+				</a>
+			</li>
+			<li class="link-card">
+				<a href="https://docs.astro.build/">
+					<h2>Docs <span>&rarr;</span></h2>
+					<p>Learn our complete feature set and explore the API.</p>
+				</a>
+			</li>
+			<li class="link-card">
+				<a href="https://astro.build/chat/">
+					<h2>Chat <span>&rarr;</span></h2>
+					<p>
+						Ask, contribute, and have fun on our community Discord
+						<svg
+							class="heart"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 512 512"
+							width="16"
+							height="16"
+							fill="currentColor"
+						>
+							<title>heart</title>
+							<path d="M256 448l-30.164-27.211C118.718 322.442 48 258.61 48 179.095 48 114.221 97.918 64 162.4 64c36.399 0 70.717 16.742 93.6 43.947C278.882 80.742 313.199 64 349.6 64 414.082 64 464 114.221 464 179.095c0 79.516-70.719 143.348-177.836 241.694L256 448z" />
+						</svg>
+					</p>
+				</a>
+			</li>
+		</ul>
+	</main>
+</Layout>
+
+<style>
+	:root {
+		--color-border: hsl(17, 24%, 90%);
+		--astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
+		--link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%);
+		--night-sky-gradient: linear-gradient(0deg, #392362 -33%, #431f69 10%, #30216b 50%, #1f1638 100%);
+	}
+
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	code {
+		font-size: 0.875em;
+		border: 0.1em solid var(--color-border);
+		border-radius: 4px;
+		padding: 0.15em 0.25em;
+	}
+
+	main {
+		margin: auto;
+    padding: 1em;
+		max-width: 60ch;
+	}
+
+	.text-gradient {
+		font-weight: 900;
+		background-image: var(--astro-gradient);
+		-webkit-background-clip: text;
+  	-webkit-text-fill-color: transparent;
+		background-size: 100% 200%;
+		background-position-y: 100%;
+		border-radius: 0.4rem;
+		animation: pulse 4s ease-in-out infinite;
+	}
+
+	@keyframes pulse {
+		0%, 100% {
+			background-position-y: 0%;
+		}
+		50% {
+			background-position-y: 80%;
+		}
+	}
+
+	.instructions {
+		line-height: 1.8;
+		margin-bottom: 2rem;
+		background-image: var(--night-sky-gradient);
+		padding: 1.5rem;
+		border-radius: 0.4rem;
+		color: var(--color-bg);
+	}
+
+	.link-card-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+		gap: 1rem;
+		padding: 0;
+	}
+
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4F39FA;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 span {
+		transform: translateX(2px);
+	}
+
+	.heart {
+		display: inline-block;
+		color: #DA62C4;
+		animation: heartbeat 3s ease-in-out infinite;
+	}
+
+	@keyframes heartbeat {
+		0%,
+		50%,
+		100% {
+			transform: scale(1);
+		}
+		5% {
+			transform: scale(1.125);
+		}
+		10% {
+			transform: scale(1.05);
+		}
+		15% {
+			transform: scale(1.25);
+		}
+	}
+</style>

examples/astro/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    // Enable top-level await, and other modern ESM features.
+    "target": "ESNext",
+    "module": "ESNext",
+    // Enable node-style module resolution, for things like npm package imports.
+    "moduleResolution": "node",
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    // Add type definitions for our Vite runtime.
+    "types": ["vite/client"]
+  }
+}

examples/create-react-app/.env.production

@@ -0,0 +1,2 @@
+# `REACT_APP` prefix is required to expose to client-side
+REACT_APP_VERCEL_ANALYTICS_ID=$VERCEL_ANALYTICS_ID

examples/create-react-app/package.json

@@ -1,13 +1,13 @@
 {
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.2.0",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.3"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

examples/create-react-app/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { sendToVercelAnalytics } from './vitals';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +12,4 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
+reportWebVitals(sendToVercelAnalytics);
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

examples/create-react-app/src/vitals.js

@@ -0,0 +1,40 @@
+const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
+
+function getConnectionSpeed() {
+  return 'connection' in navigator &&
+    navigator['connection'] &&
+    'effectiveType' in navigator['connection']
+    ? navigator['connection']['effectiveType']
+    : '';
+}
+
+export function sendToVercelAnalytics(metric) {
+  const analyticsId = process.env.REACT_APP_VERCEL_ANALYTICS_ID;
+  if (!analyticsId) {
+    return;
+  }
+
+  const body = {
+    dsn: analyticsId,
+    id: metric.id,
+    page: window.location.pathname,
+    href: window.location.href,
+    event_name: metric.name,
+    value: metric.value.toString(),
+    speed: getConnectionSpeed(),
+  };
+
+  const blob = new Blob([new URLSearchParams(body).toString()], {
+    // This content type is necessary for `sendBeacon`
+    type: 'application/x-www-form-urlencoded',
+  });
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(vitalsUrl, blob);
+  } else
+    fetch(vitalsUrl, {
+      body: blob,
+      method: 'POST',
+      credentials: 'omit',
+      keepalive: true,
+    });
+}

examples/create-react-app/yarn.lock

@@ -1484,10 +1484,10 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@testing-library/dom@^8.0.0":
+"@testing-library/dom@^8.5.0":
-  version "8.11.2"
+  version "8.13.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.2.tgz#fc110c665a066c2287be765e4a35ba8dad737015"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
-  integrity sha512-idsS/cqbYudXcVWngc1PuWNmXs416oBy2g/7Q8QAUREt5Z3MUkAL2XJD7xazLJ6esDfqRDi/ZBxk+OPPXitHRw==
+  integrity sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -1498,10 +1498,10 @@
     lz-string "^1.4.4"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^5.16.1":
+"@testing-library/jest-dom@^5.16.4":
-  version "5.16.1"
+  version "5.16.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.1.tgz#3db7df5ae97596264a7da9696fe14695ba02e51f"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz#938302d7b8b483963a3ae821f1c0808f872245cd"
-  integrity sha512-ajUJdfDIuTCadB79ukO+0l8O+QwN0LiSxDaYUTI4LndbbUsGi6rWU1SCexXzBA2NSjlVB9/vbkasQIL3tmPBjw==
+  integrity sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==
   dependencies:
     "@babel/runtime" "^7.9.2"
     "@types/testing-library__jest-dom" "^5.9.1"
@@ -1513,20 +1513,19 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^12.1.2":
+"@testing-library/react@^13.3.0":
-  version "12.1.2"
+  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.2.tgz#f1bc9a45943461fa2a598bb4597df1ae044cfc76"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.3.0.tgz#bf298bfbc5589326bbcc8052b211f3bb097a97c5"
-  integrity sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==
+  integrity sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@^13.5.0":
+"@testing-library/user-event@^14.2.0":
-  version "13.5.0"
+  version "14.2.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.2.0.tgz#8293560f8f80a00383d6c755ec3e0b918acb1683"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
+  integrity sha512-+hIlG4nJS6ivZrKnOP7OGsDu9Fxmryj9vCl8x0ZINtTJcCHs2zLsYif5GzuRiBF2ck5GZG2aQr7Msg+EHlnYVQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
 
 "@tootallnate/once@1":
   version "1.1.2"
@@ -1735,6 +1734,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.3.tgz#a3c65525b91fca7da00ab1a3ac2b5a2a4afbffbf"
   integrity sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w==
 
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
@@ -1750,6 +1754,22 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
+"@types/react-dom@^18.0.0":
+  version "18.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
+  integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -1762,6 +1782,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"
   integrity sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -3175,6 +3200,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
+
 damerau-levenshtein@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -3622,10 +3652,10 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-react-app@^7.0.0:
+eslint-config-react-app@^7.0.1:
-  version "7.0.0"
+  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz#0fa96d5ec1dfb99c029b1554362ab3fa1c3757df"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4"
-  integrity sha512-xyymoxtIt1EOsSaGag+/jmcywRuieQoA2JbPCjnw9HukFj9/97aGPoZVFioaotzk1K5Qt9sHO5EutZbkrAXS0g==
+  integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==
   dependencies:
     "@babel/core" "^7.16.0"
     "@babel/eslint-parser" "^7.16.3"
@@ -6841,10 +6871,10 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-dev-utils@^12.0.0:
+react-dev-utils@^12.0.1:
-  version "12.0.0"
+  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.0.tgz#4eab12cdb95692a077616770b5988f0adf806526"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
-  integrity sha512-xBQkitdxozPxt1YZ9O1097EJiVpwHr9FoAuEVURCKV0Av8NBERovJauzP7bo1ThvuhZ4shsQ1AJiu4vQpoT1AQ==
+  integrity sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==
   dependencies:
     "@babel/code-frame" "^7.16.0"
     address "^1.1.2"
@@ -6865,25 +6895,24 @@ react-dev-utils@^12.0.0:
     open "^8.4.0"
     pkg-up "^3.1.0"
     prompts "^2.4.2"
-    react-error-overlay "^6.0.10"
+    react-error-overlay "^6.0.11"
     recursive-readdir "^2.2.2"
     shell-quote "^1.7.3"
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^17.0.2:
+react-dom@^18.1.0:
-  version "17.0.2"
+  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
+    scheduler "^0.22.0"
-    scheduler "^0.20.2"
 
-react-error-overlay@^6.0.10:
+react-error-overlay@^6.0.11:
-  version "6.0.10"
+  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
-  integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
+  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
 react-is@^16.13.1:
   version "16.13.1"
@@ -6900,10 +6929,10 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-scripts@5.0.0:
+react-scripts@5.0.1:
-  version "5.0.0"
+  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.0.tgz#6547a6d7f8b64364ef95273767466cc577cb4b60"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
-  integrity sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==
+  integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==
   dependencies:
     "@babel/core" "^7.16.0"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3"
@@ -6921,7 +6950,7 @@ react-scripts@5.0.0:
     dotenv "^10.0.0"
     dotenv-expand "^5.1.0"
     eslint "^8.3.0"
-    eslint-config-react-app "^7.0.0"
+    eslint-config-react-app "^7.0.1"
     eslint-webpack-plugin "^3.1.1"
     file-loader "^6.2.0"
     fs-extra "^10.0.0"
@@ -6938,7 +6967,7 @@ react-scripts@5.0.0:
     postcss-preset-env "^7.0.1"
     prompts "^2.4.2"
     react-app-polyfill "^3.0.0"
-    react-dev-utils "^12.0.0"
+    react-dev-utils "^12.0.1"
     react-refresh "^0.11.0"
     resolve "^1.20.0"
     resolve-url-loader "^4.0.0"
@@ -6955,13 +6984,12 @@ react-scripts@5.0.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react@^17.0.2:
+react@^18.1.0:
-  version "17.0.2"
+  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 readable-stream@^2.0.1:
   version "2.3.7"
@@ -7235,13 +7263,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
+scheduler@^0.22.0:
-  version "0.20.2"
+  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@2.7.0:
   version "2.7.0"
@@ -8156,10 +8183,10 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-web-vitals@^2.1.3:
+web-vitals@^2.1.4:
-  version "2.1.3"
+  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.3.tgz#6dca59f41dbc3fcccdb889da06191b437b18f534"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c"
-  integrity sha512-+ijpniAzcnQicXaXIN0/eHQAiV/jMt1oHGHTmz7VdAJPPkzzDhmoYPSpLgJTuFtUh+jCjxCoeTZPg7Ic+g8o7w==
+  integrity sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg==
 
 webidl-conversions@^4.0.2:
   version "4.0.2"

examples/ember/package.json

@@ -48,6 +48,6 @@
     "qunit-dom": "^0.8.4"
   },
   "engines": {
-    "node": "8.* || >= 10.*"
+    "node": "14.x"
   }
 }

examples/hydrogen/.devcontainer/devcontainer.json

@@ -0,0 +1,18 @@
+{
+  "name": "Shopify Hydrogen",
+  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-16",
+  "settings": {},
+  "extensions": [
+    "graphql.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode"
+  ],
+  "forwardPorts": [3000],
+  "postCreateCommand": "yarn install",
+  "postStartCommand": "yarn dev",
+  "remoteUser": "node",
+  "features": {
+    "git": "latest"
+  }
+}

examples/hydrogen/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: ['plugin:hydrogen/recommended', 'plugin:hydrogen/typescript'],
+  rules: {
+    'node/no-missing-import': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+  },
+};

examples/hydrogen/.gitignore

@@ -0,0 +1,79 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# Serverless directories
+.serverless/
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# Vite output
+dist
+
+.vercel

examples/hydrogen/README.md

@@ -0,0 +1,50 @@
+# Hydrogen
+
+[Hydrogen](https://shopify.dev/custom-storefronts/hydrogen) is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
+
+## Deploy Your Own
+
+Deploy your own Hydrogen project with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/hydrogen&template=hydrogen)
+
+_Live Example: https://hydrogen-template.vercel.app_
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 16.5.0 or higher
+- Yarn
+
+To create a new Hydrogen app, run:
+
+```bash
+npm init @shopify/hydrogen
+```
+
+## Running the dev server
+
+Then `cd` into the new directory and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Remember to update `hydrogen.config.js` with your shop's domain and Storefront API token!
+
+## Building for production
+
+```bash
+npm run build
+```
+
+## Previewing a production build
+
+To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run `npm run preview`:
+
+```bash
+npm run build
+npm run preview
+```

examples/hydrogen/hydrogen.config.ts

@@ -0,0 +1,18 @@
+import {defineConfig, CookieSessionStorage} from '@shopify/hydrogen/config';
+
+export default defineConfig({
+  shopify: {
+    defaultCountryCode: 'US',
+    defaultLanguageCode: 'EN',
+    storeDomain: 'hydrogen-preview.myshopify.com',
+    storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+    storefrontApiVersion: '2022-07',
+  },
+  session: CookieSessionStorage('__session', {
+    path: '/',
+    httpOnly: true,
+    secure: import.meta.env.PROD,
+    sameSite: 'Strict',
+    maxAge: 60 * 60 * 24 * 30,
+  }),
+});

examples/hydrogen/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hydrogen</title>
+    <link rel="stylesheet" href="/src/styles/index.css" />
+    <link rel="preconnect" href="https://cdn.shopify.com" />
+    <link rel="preconnect" href="https://shop.app/" />
+    <link rel="preconnect" href="https://hydrogen-preview.myshopify.com/" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/@shopify/hydrogen/entry-client"></script>
+  </body>
+</html>

examples/hydrogen/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "hydrogen",
+  "description": "Demo store template for @shopify/hydrogen",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "shopify hydrogen dev",
+    "build": "shopify hydrogen build",
+    "preview": "shopify hydrogen preview",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "lint-ts": "tsc --noEmit",
+    "test": "WATCH=true vitest",
+    "test:ci": "yarn build -t node && vitest run"
+  },
+  "devDependencies": {
+    "@shopify/cli": "3.0.27",
+    "@shopify/cli-hydrogen": "3.0.27",
+    "@shopify/prettier-config": "^1.1.2",
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.2",
+    "@types/react": "^18.0.14",
+    "eslint": "^8.18.0",
+    "eslint-plugin-hydrogen": "^0.12.2",
+    "playwright": "^1.22.2",
+    "postcss": "^8.4.14",
+    "postcss-import": "^14.1.0",
+    "postcss-preset-env": "^7.6.0",
+    "prettier": "^2.3.2",
+    "tailwindcss": "^3.0.24",
+    "typescript": "^4.7.2",
+    "vite": "^2.9.0",
+    "vitest": "^0.15.2"
+  },
+  "prettier": "@shopify/prettier-config",
+  "dependencies": {
+    "@headlessui/react": "^1.6.4",
+    "@heroicons/react": "^1.0.6",
+    "@shopify/hydrogen": "^1.0.2",
+    "clsx": "^1.1.1",
+    "graphql-tag": "^2.12.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-use": "^17.4.0",
+    "title": "^3.4.4",
+    "typographic-base": "^1.0.4"
+  },
+  "author": "nrajlich"
+}

examples/hydrogen/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    'postcss-preset-env': {
+      features: {'nesting-rules': false},
+    },
+  },
+};

examples/hydrogen/src/App.server.tsx

@@ -0,0 +1,48 @@
+import {Suspense} from 'react';
+import renderHydrogen from '@shopify/hydrogen/entry-server';
+import {
+  FileRoutes,
+  type HydrogenRouteProps,
+  PerformanceMetrics,
+  PerformanceMetricsDebug,
+  Route,
+  Router,
+  ShopifyAnalytics,
+  ShopifyProvider,
+  CartProvider,
+} from '@shopify/hydrogen';
+
+import {HeaderFallback} from '~/components';
+import type {CountryCode} from '@shopify/hydrogen/storefront-api-types';
+import {DefaultSeo, NotFound} from '~/components/index.server';
+
+function App({request}: HydrogenRouteProps) {
+  const pathname = new URL(request.normalizedUrl).pathname;
+  const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
+  const countryCode = localeMatch ? (localeMatch[1] as CountryCode) : undefined;
+
+  const isHome = pathname === `/${countryCode ? countryCode + '/' : ''}`;
+
+  return (
+    <Suspense fallback={<HeaderFallback isHome={isHome} />}>
+      <ShopifyProvider countryCode={countryCode}>
+        <CartProvider countryCode={countryCode}>
+          <Suspense>
+            <DefaultSeo />
+          </Suspense>
+          <Router>
+            <FileRoutes
+              basePath={countryCode ? `/${countryCode}/` : undefined}
+            />
+            <Route path="*" page={<NotFound />} />
+          </Router>
+        </CartProvider>
+        <PerformanceMetrics />
+        {import.meta.env.DEV && <PerformanceMetricsDebug />}
+        <ShopifyAnalytics />
+      </ShopifyProvider>
+    </Suspense>
+  );
+}
+
+export default renderHydrogen(App);

examples/hydrogen/src/assets/favicon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
+  <style>
+    .stroke {
+      stroke: #000;
+    }
+    .fill {
+      fill: #000;
+    }
+    @media (prefers-color-scheme: dark) {
+      .stroke {
+        stroke: #fff;
+      }
+      .fill {
+        fill: #fff;
+      }
+    }
+  </style>
+  <path
+    class="stroke"
+    fill-rule="evenodd"
+    d="M16.1 16.04 1 8.02 6.16 5.3l5.82 3.09 4.88-2.57-5.82-3.1L16.21 0l15.1 8.02-5.17 2.72-5.5-2.91-4.88 2.57 5.5 2.92-5.16 2.72Z"
+  />
+  <path
+    class="fill"
+    fill-rule="evenodd"
+    d="M16.1 32 1 23.98l5.16-2.72 5.82 3.08 4.88-2.57-5.82-3.08 5.17-2.73 15.1 8.02-5.17 2.72-5.5-2.92-4.88 2.58 5.5 2.92L16.1 32Z"
+  />
+</svg>

examples/hydrogen/src/components/CountrySelector.client.tsx

@@ -0,0 +1,135 @@
+import {useCallback, useState, Suspense} from 'react';
+import {useLocalization, fetchSync} from '@shopify/hydrogen';
+// @ts-expect-error @headlessui/react incompatibility with node16 resolution
+import {Listbox} from '@headlessui/react';
+
+import {IconCheck, IconCaret} from '~/components';
+import {useMemo} from 'react';
+import type {
+  Country,
+  CountryCode,
+} from '@shopify/hydrogen/storefront-api-types';
+
+/**
+ * A client component that selects the appropriate country to display for products on a website
+ */
+export function CountrySelector() {
+  const [listboxOpen, setListboxOpen] = useState(false);
+  const {
+    country: {isoCode},
+  } = useLocalization();
+  const currentCountry = useMemo<{name: string; isoCode: CountryCode}>(() => {
+    const regionNamesInEnglish = new Intl.DisplayNames(['en'], {
+      type: 'region',
+    });
+
+    return {
+      name: regionNamesInEnglish.of(isoCode)!,
+      isoCode: isoCode as CountryCode,
+    };
+  }, [isoCode]);
+
+  const setCountry = useCallback<(country: Country) => void>(
+    ({isoCode: newIsoCode}) => {
+      const currentPath = window.location.pathname;
+      let redirectPath;
+
+      if (newIsoCode !== 'US') {
+        if (currentCountry.isoCode === 'US') {
+          redirectPath = `/${newIsoCode.toLowerCase()}${currentPath}`;
+        } else {
+          redirectPath = `/${newIsoCode.toLowerCase()}${currentPath.substring(
+            currentPath.indexOf('/', 1),
+          )}`;
+        }
+      } else {
+        redirectPath = `${currentPath.substring(currentPath.indexOf('/', 1))}`;
+      }
+
+      window.location.href = redirectPath;
+    },
+    [currentCountry],
+  );
+
+  return (
+    <div className="relative">
+      <Listbox onChange={setCountry}>
+        {/* @ts-expect-error @headlessui/react incompatibility with node16 resolution */}
+        {({open}) => {
+          setTimeout(() => setListboxOpen(open));
+          return (
+            <>
+              <Listbox.Button
+                className={`flex items-center justify-between w-full py-3 px-4 border ${
+                  open ? 'rounded-b md:rounded-t md:rounded-b-none' : 'rounded'
+                } border-contrast/30 dark:border-white`}
+              >
+                <span className="">{currentCountry.name}</span>
+                <IconCaret direction={open ? 'up' : 'down'} />
+              </Listbox.Button>
+
+              <Listbox.Options
+                className={`border-t-contrast/30 border-contrast/30 bg-primary dark:bg-contrast absolute bottom-12 z-10 grid
+                h-48 w-full overflow-y-scroll rounded-t border dark:border-white px-2 py-2
+                transition-[max-height] duration-150 sm:bottom-auto md:rounded-b md:rounded-t-none
+                md:border-t-0 md:border-b ${
+                  listboxOpen ? 'max-h-48' : 'max-h-0'
+                }`}
+              >
+                {listboxOpen && (
+                  <Suspense fallback={<div className="p-2">Loading…</div>}>
+                    {/* @ts-expect-error @headlessui/react incompatibility with node16 resolution */}
+                    <Countries
+                      selectedCountry={currentCountry}
+                      getClassName={(active) => {
+                        return `text-contrast dark:text-primary bg-primary 
+                        dark:bg-contrast w-full p-2 transition rounded 
+                        flex justify-start items-center text-left cursor-pointer ${
+                          active ? 'bg-primary/10' : null
+                        }`;
+                      }}
+                    />
+                  </Suspense>
+                )}
+              </Listbox.Options>
+            </>
+          );
+        }}
+      </Listbox>
+    </div>
+  );
+}
+
+export function Countries({
+  selectedCountry,
+  getClassName,
+}: {
+  selectedCountry: Pick<Country, 'isoCode' | 'name'>;
+  getClassName: (active: boolean) => string;
+}) {
+  const countries: Country[] = fetchSync('/api/countries').json();
+
+  return (countries || []).map((country) => {
+    const isSelected = country.isoCode === selectedCountry.isoCode;
+
+    return (
+      <Listbox.Option key={country.isoCode} value={country}>
+        {/* @ts-expect-error @headlessui/react incompatibility with node16 resolution */}
+        {({active}) => (
+          <div
+            className={`text-contrast dark:text-primary ${getClassName(
+              active,
+            )}`}
+          >
+            {country.name}
+            {isSelected ? (
+              <span className="ml-2">
+                <IconCheck />
+              </span>
+            ) : null}
+          </div>
+        )}
+      </Listbox.Option>
+    );
+  });
+}

examples/hydrogen/src/components/CustomFont.client.tsx

@@ -0,0 +1,22 @@
+// When making building your custom storefront, you will most likely want to
+// use custom fonts as well. These are often implemented without critical
+// performance optimizations.
+
+// Below, you'll find the markup needed to optimally render a pair of web fonts
+// that we will use on our journal articles. This typeface, IBM Plex,
+// can be found at: https://www.ibm.com/plex/, as well as on
+// Google Fonts: https://fonts.google.com/specimen/IBM+Plex+Serif. We included
+// these locally since you’ll most likely be using commercially licensed fonts.
+
+// When implementing a custom font, specifying the Unicode range you need,
+// and using `font-display: swap` will help you improve your performance.
+
+// For fonts that appear in the critical rendering path, you can speed up
+// performance even more by including a <link> tag in your HTML.
+
+// In a production environment, you will likely want to include the below
+// markup right in your index.html and index.css files.
+
+import '../styles/custom-font.css';
+
+export function CustomFont() {}

examples/hydrogen/src/components/DefaultSeo.server.tsx

@@ -0,0 +1,37 @@
+import {CacheLong, gql, Seo, useShopQuery} from '@shopify/hydrogen';
+
+/**
+ * A server component that fetches a `shop.name` and sets default values and templates for every page on a website
+ */
+export function DefaultSeo() {
+  const {
+    data: {
+      shop: {name, description},
+    },
+  } = useShopQuery({
+    query: SHOP_QUERY,
+    cache: CacheLong(),
+    preload: '*',
+  });
+
+  return (
+    // @ts-ignore TODO: Fix types
+    <Seo
+      type="defaultSeo"
+      data={{
+        title: name,
+        description,
+        titleTemplate: `%s · ${name}`,
+      }}
+    />
+  );
+}
+
+const SHOP_QUERY = gql`
+  query shopInfo {
+    shop {
+      name
+      description
+    }
+  }
+`;

examples/hydrogen/src/components/HeaderFallback.tsx

@@ -0,0 +1,30 @@
+export function HeaderFallback({isHome}: {isHome?: boolean}) {
+  const styles = isHome
+    ? 'bg-primary/80 dark:bg-contrast/60 text-contrast dark:text-primary shadow-darkHeader'
+    : 'bg-contrast/80 text-primary';
+  return (
+    <header
+      role="banner"
+      className={`${styles} flex h-nav items-center backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-8 px-12 py-8`}
+    >
+      <div className="flex space-x-4">
+        <Box isHome={isHome} />
+        <Box isHome={isHome} />
+        <Box isHome={isHome} />
+        <Box isHome={isHome} />
+        <Box isHome={isHome} />
+      </div>
+      <Box isHome={isHome} wide={true} />
+    </header>
+  );
+}
+
+function Box({wide, isHome}: {wide?: boolean; isHome?: boolean}) {
+  return (
+    <div
+      className={`h-6 rounded-sm ${wide ? 'w-32' : 'w-16'} ${
+        isHome ? 'bg-primary/60' : 'bg-primary/20'
+      }`}
+    />
+  );
+}

examples/hydrogen/src/components/account/AccountActivateForm.client.tsx

@@ -0,0 +1,183 @@
+import {useState} from 'react';
+import {useNavigate} from '@shopify/hydrogen/client';
+
+export function AccountActivateForm({
+  id,
+  activationToken,
+}: {
+  id: string;
+  activationToken: string;
+}) {
+  const navigate = useNavigate();
+
+  const [submitError, setSubmitError] = useState<null | string>(null);
+  const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState<null | string>(null);
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [passwordConfirmError, setPasswordConfirmError] = useState<
+    null | string
+  >(null);
+
+  function passwordValidation(
+    form: HTMLFormElement & {password: HTMLInputElement},
+  ) {
+    setPasswordError(null);
+    setPasswordConfirmError(null);
+
+    let hasError = false;
+
+    if (!form.password.validity.valid) {
+      hasError = true;
+      setPasswordError(
+        form.password.validity.valueMissing
+          ? 'Please enter a password'
+          : 'Passwords must be at least 6 characters',
+      );
+    }
+
+    if (!form.passwordConfirm.validity.valid) {
+      hasError = true;
+      setPasswordConfirmError(
+        form.password.validity.valueMissing
+          ? 'Please re-enter a password'
+          : 'Passwords must be at least 6 characters',
+      );
+    }
+
+    if (password !== passwordConfirm) {
+      hasError = true;
+      setPasswordConfirmError('The two passwords entered did not match.');
+    }
+
+    return hasError;
+  }
+
+  async function onSubmit(
+    event: React.FormEvent<HTMLFormElement & {password: HTMLInputElement}>,
+  ) {
+    event.preventDefault();
+
+    if (passwordValidation(event.currentTarget)) {
+      return;
+    }
+
+    const response = await callActivateApi({
+      id,
+      activationToken,
+      password,
+    });
+
+    if (response.error) {
+      setSubmitError(response.error);
+      return;
+    }
+
+    navigate('/account');
+  }
+
+  return (
+    <div className="flex justify-center">
+      <div className="w-full max-w-md">
+        <h1 className="text-4xl">Activate Account.</h1>
+        <p className="mt-4">Create your password to activate your account.</p>
+        <form noValidate className="pt-6 pb-8 mt-4 mb-4" onSubmit={onSubmit}>
+          {submitError && (
+            <div className="flex items-center justify-center mb-6 bg-primary/30">
+              <p className="m-4 text-s text-contrast">{submitError}</p>
+            </div>
+          )}
+          <div className="mb-4">
+            <input
+              className={`mb-1 appearance-none border w-full py-2 px-3 text-primary placeholder:text-primary/30 leading-tight focus:shadow-outline ${
+                passwordError ? ' border-notice' : 'border-primary'
+              }`}
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              placeholder="Password"
+              aria-label="Password"
+              value={password}
+              minLength={8}
+              required
+              onChange={(event) => {
+                setPassword(event.target.value);
+              }}
+            />
+            <p
+              className={`text-red-500 text-xs ${
+                !passwordError ? 'invisible' : ''
+              }`}
+            >
+              {passwordError} &nbsp;
+            </p>
+          </div>
+          <div className="mb-4">
+            <input
+              className={`mb-1 appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+                passwordConfirmError ? ' border-red-500' : 'border-gray-900'
+              }`}
+              id="passwordConfirm"
+              name="passwordConfirm"
+              type="password"
+              autoComplete="current-password"
+              placeholder="Re-enter password"
+              aria-label="Re-enter password"
+              value={passwordConfirm}
+              required
+              minLength={8}
+              onChange={(event) => {
+                setPasswordConfirm(event.target.value);
+              }}
+            />
+            <p
+              className={`text-red-500 text-xs ${
+                !passwordConfirmError ? 'invisible' : ''
+              }`}
+            >
+              {passwordConfirmError} &nbsp;
+            </p>
+          </div>
+          <div className="flex items-center justify-between">
+            <button
+              className="block w-full px-4 py-2 text-contrast uppercase bg-gray-900 focus:shadow-outline"
+              type="submit"
+            >
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+async function callActivateApi({
+  id,
+  activationToken,
+  password,
+}: {
+  id: string;
+  activationToken: string;
+  password: string;
+}) {
+  try {
+    const res = await fetch(`/account/activate`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({id, activationToken, password}),
+    });
+    if (res.ok) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (error: any) {
+    return {
+      error: error.toString(),
+    };
+  }
+}

examples/hydrogen/src/components/account/AccountAddressBook.client.tsx

@@ -0,0 +1,161 @@
+import {useState, useMemo, MouseEventHandler} from 'react';
+
+import {Text, Button} from '~/components/elements';
+import {Modal} from '../index';
+import {AccountAddressEdit, AccountDeleteAddress} from '../index';
+
+export function AccountAddressBook({
+  addresses,
+  defaultAddress,
+}: {
+  addresses: any[];
+  defaultAddress: any;
+}) {
+  const [editingAddress, setEditingAddress] = useState(null);
+  const [deletingAddress, setDeletingAddress] = useState(null);
+
+  const {fullDefaultAddress, addressesWithoutDefault} = useMemo(() => {
+    const defaultAddressIndex = addresses.findIndex(
+      (address) => address.id === defaultAddress,
+    );
+    return {
+      addressesWithoutDefault: [
+        ...addresses.slice(0, defaultAddressIndex),
+        ...addresses.slice(defaultAddressIndex + 1, addresses.length),
+      ],
+      fullDefaultAddress: addresses[defaultAddressIndex],
+    };
+  }, [addresses, defaultAddress]);
+
+  function close() {
+    setEditingAddress(null);
+    setDeletingAddress(null);
+  }
+
+  function editAddress(address: any) {
+    setEditingAddress(address);
+  }
+
+  return (
+    <>
+      {deletingAddress ? (
+        <Modal close={close}>
+          <AccountDeleteAddress addressId={deletingAddress} close={close} />
+        </Modal>
+      ) : null}
+      {editingAddress ? (
+        <Modal close={close}>
+          <AccountAddressEdit
+            address={editingAddress}
+            defaultAddress={fullDefaultAddress === editingAddress}
+            close={close}
+          />
+        </Modal>
+      ) : null}
+      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
+        <h3 className="font-bold text-lead">Address Book</h3>
+        <div>
+          {!addresses?.length ? (
+            <Text className="mb-1" width="narrow" as="p" size="copy">
+              You haven&apos;t saved any addresses yet.
+            </Text>
+          ) : null}
+          <div className="w-48">
+            <Button
+              className="mt-2 text-sm w-full mb-6"
+              onClick={() => {
+                editAddress({
+                  /** empty address */
+                });
+              }}
+              variant="secondary"
+            >
+              Add an Address
+            </Button>
+          </div>
+          {addresses?.length ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+              {fullDefaultAddress ? (
+                <Address
+                  address={fullDefaultAddress}
+                  defaultAddress
+                  setDeletingAddress={setDeletingAddress.bind(
+                    null,
+                    fullDefaultAddress.originalId,
+                  )}
+                  editAddress={editAddress}
+                />
+              ) : null}
+              {addressesWithoutDefault.map((address) => (
+                <Address
+                  key={address.id}
+                  address={address}
+                  setDeletingAddress={setDeletingAddress.bind(
+                    null,
+                    address.originalId,
+                  )}
+                  editAddress={editAddress}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function Address({
+  address,
+  defaultAddress,
+  editAddress,
+  setDeletingAddress,
+}: {
+  address: any;
+  defaultAddress?: boolean;
+  editAddress: (address: any) => void;
+  setDeletingAddress: MouseEventHandler<HTMLButtonElement>;
+}) {
+  return (
+    <div className="lg:p-8 p-6 border border-gray-200 rounded flex flex-col">
+      {defaultAddress ? (
+        <div className="mb-3 flex flex-row">
+          <span className="px-3 py-1 text-xs font-medium rounded-full bg-primary/20 text-primary/50">
+            Default
+          </span>
+        </div>
+      ) : null}
+      <ul className="flex-1 flex-row">
+        {address.firstName || address.lastName ? (
+          <li>
+            {(address.firstName && address.firstName + ' ') + address.lastName}
+          </li>
+        ) : (
+          <></>
+        )}
+        {address.formatted ? (
+          address.formatted.map((line: string) => <li key={line}>{line}</li>)
+        ) : (
+          <></>
+        )}
+      </ul>
+
+      <div className="flex flex-row font-medium mt-6">
+        <button
+          onClick={() => {
+            editAddress(address);
+          }}
+          className="text-left underline text-sm"
+        >
+          Edit
+        </button>
+        <button
+          onClick={setDeletingAddress}
+          className="text-left text-primary/50 ml-6 text-sm"
+        >
+          Remove
+        </button>
+      </div>
+    </div>
+  );
+}

examples/hydrogen/src/components/account/AccountAddressEdit.client.tsx

@@ -0,0 +1,337 @@
+import {useMemo, useState} from 'react';
+import {useRenderServerComponents} from '~/lib/utils';
+
+import {Button, Text} from '~/components';
+
+export function AccountAddressEdit({
+  address,
+  defaultAddress,
+  close,
+}: {
+  address: any;
+  defaultAddress: boolean;
+  close: () => void;
+}) {
+  const isNewAddress = useMemo(() => !Object.keys(address).length, [address]);
+
+  const [saving, setSaving] = useState(false);
+  const [submitError, setSubmitError] = useState<null | string>(null);
+  const [address1, setAddress1] = useState(address?.address1 || '');
+  const [address2, setAddress2] = useState(address?.address2 || '');
+  const [firstName, setFirstName] = useState(address?.firstName || '');
+  const [lastName, setLastName] = useState(address?.lastName || '');
+  const [company, setCompany] = useState(address?.company || '');
+  const [country, setCountry] = useState(address?.country || '');
+  const [province, setProvince] = useState(address?.province || '');
+  const [city, setCity] = useState(address?.city || '');
+  const [zip, setZip] = useState(address?.zip || '');
+  const [phone, setPhone] = useState(address?.phone || '');
+  const [isDefaultAddress, setIsDefaultAddress] = useState(defaultAddress);
+
+  // Necessary for edits to show up on the main page
+  const renderServerComponents = useRenderServerComponents();
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    setSaving(true);
+
+    const response = await callUpdateAddressApi({
+      id: address?.originalId,
+      firstName,
+      lastName,
+      company,
+      address1,
+      address2,
+      country,
+      province,
+      city,
+      zip,
+      phone,
+      isDefaultAddress,
+    });
+
+    setSaving(false);
+
+    if (response.error) {
+      setSubmitError(response.error);
+      return;
+    }
+
+    renderServerComponents();
+    close();
+  }
+
+  return (
+    <>
+      <Text className="mt-4 mb-6" as="h3" size="lead">
+        {isNewAddress ? 'Add address' : 'Edit address'}
+      </Text>
+      <div className="max-w-lg">
+        <form noValidate onSubmit={onSubmit}>
+          {submitError && (
+            <div className="flex items-center justify-center mb-6 bg-red-100 rounded">
+              <p className="m-4 text-sm text-red-900">{submitError}</p>
+            </div>
+          )}
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="firstname"
+              name="firstname"
+              required
+              type="text"
+              autoComplete="given-name"
+              placeholder="First name"
+              aria-label="First name"
+              value={firstName}
+              onChange={(event) => {
+                setFirstName(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="lastname"
+              name="lastname"
+              required
+              type="text"
+              autoComplete="family-name"
+              placeholder="Last name"
+              aria-label="Last name"
+              value={lastName}
+              onChange={(event) => {
+                setLastName(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="company"
+              name="company"
+              type="text"
+              autoComplete="organization"
+              placeholder="Company"
+              aria-label="Company"
+              value={company}
+              onChange={(event) => {
+                setCompany(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="street1"
+              name="street1"
+              type="text"
+              autoComplete="address-line1"
+              placeholder="Address line 1*"
+              required
+              aria-label="Address line 1"
+              value={address1}
+              onChange={(event) => {
+                setAddress1(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="address2"
+              name="address2"
+              type="text"
+              autoComplete="address-line2"
+              placeholder="Addresss line 2"
+              aria-label="Address line 2"
+              value={address2}
+              onChange={(event) => {
+                setAddress2(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="city"
+              name="city"
+              type="text"
+              required
+              autoComplete="address-level2"
+              placeholder="City"
+              aria-label="City"
+              value={city}
+              onChange={(event) => {
+                setCity(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="state"
+              name="state"
+              type="text"
+              autoComplete="address-level1"
+              placeholder="State / Province"
+              required
+              aria-label="State"
+              value={province}
+              onChange={(event) => {
+                setProvince(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="zip"
+              name="zip"
+              type="text"
+              autoComplete="postal-code"
+              placeholder="Zip / Postal Code"
+              required
+              aria-label="Zip"
+              value={zip}
+              onChange={(event) => {
+                setZip(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="country"
+              name="country"
+              type="text"
+              autoComplete="country-name"
+              placeholder="Country"
+              required
+              aria-label="Country"
+              value={country}
+              onChange={(event) => {
+                setCountry(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+              id="phone"
+              name="phone"
+              type="tel"
+              autoComplete="tel"
+              placeholder="Phone"
+              aria-label="Phone"
+              value={phone}
+              onChange={(event) => {
+                setPhone(event.target.value);
+              }}
+            />
+          </div>
+          <div className="mt-4">
+            <input
+              type="checkbox"
+              value=""
+              name="defaultAddress"
+              id="defaultAddress"
+              checked={isDefaultAddress}
+              className="border-gray-500 rounded-sm cursor-pointer border-1"
+              onChange={() => setIsDefaultAddress(!isDefaultAddress)}
+            />
+            <label
+              className="inline-block ml-2 text-sm cursor-pointer"
+              htmlFor="defaultAddress"
+            >
+              Set as default address
+            </label>
+          </div>
+          <div className="mt-8">
+            <Button
+              className="w-full rounded focus:shadow-outline"
+              type="submit"
+              variant="primary"
+              disabled={saving}
+            >
+              Save
+            </Button>
+          </div>
+          <div>
+            <Button
+              className="w-full mt-2 rounded focus:shadow-outline"
+              variant="secondary"
+              onClick={close}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}
+
+export async function callUpdateAddressApi({
+  id,
+  firstName,
+  lastName,
+  company,
+  address1,
+  address2,
+  country,
+  province,
+  city,
+  phone,
+  zip,
+  isDefaultAddress,
+}: {
+  id: string;
+  firstName: string;
+  lastName: string;
+  company: string;
+  address1: string;
+  address2: string;
+  country: string;
+  province: string;
+  city: string;
+  phone: string;
+  zip: string;
+  isDefaultAddress: boolean;
+}) {
+  try {
+    const res = await fetch(
+      id ? `/account/address/${encodeURIComponent(id)}` : '/account/address',
+      {
+        method: id ? 'PATCH' : 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          firstName,
+          lastName,
+          company,
+          address1,
+          address2,
+          country,
+          province,
+          city,
+          phone,
+          zip,
+          isDefaultAddress,
+        }),
+      },
+    );
+    if (res.ok) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (_e) {
+    return {
+      error: 'Error saving address. Please try again.',
+    };
+  }
+}

examples/hydrogen/src/components/account/AccountCreateForm.client.tsx

@@ -0,0 +1,175 @@
+import {useState} from 'react';
+import {useNavigate, Link} from '@shopify/hydrogen/client';
+
+import {emailValidation, passwordValidation} from '~/lib/utils';
+
+import {callLoginApi} from './AccountLoginForm.client';
+
+interface FormElements {
+  email: HTMLInputElement;
+  password: HTMLInputElement;
+}
+
+export function AccountCreateForm() {
+  const navigate = useNavigate();
+
+  const [submitError, setSubmitError] = useState<null | string>(null);
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState<null | string>(null);
+  const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState<null | string>(null);
+
+  async function onSubmit(
+    event: React.FormEvent<HTMLFormElement & FormElements>,
+  ) {
+    event.preventDefault();
+
+    setEmailError(null);
+    setPasswordError(null);
+    setSubmitError(null);
+
+    const newEmailError = emailValidation(event.currentTarget.email);
+    if (newEmailError) {
+      setEmailError(newEmailError);
+    }
+
+    const newPasswordError = passwordValidation(event.currentTarget.password);
+    if (newPasswordError) {
+      setPasswordError(newPasswordError);
+    }
+
+    if (newEmailError || newPasswordError) {
+      return;
+    }
+
+    const accountCreateResponse = await callAccountCreateApi({
+      email,
+      password,
+    });
+
+    if (accountCreateResponse.error) {
+      setSubmitError(accountCreateResponse.error);
+      return;
+    }
+
+    // this can be avoided if customerCreate mutation returns customerAccessToken
+    await callLoginApi({
+      email,
+      password,
+    });
+
+    navigate('/account');
+  }
+
+  return (
+    <div className="flex justify-center my-24 px-4">
+      <div className="max-w-md w-full">
+        <h1 className="text-4xl">Create an Account.</h1>
+        <form noValidate className="pt-6 pb-8 mt-4 mb-4" onSubmit={onSubmit}>
+          {submitError && (
+            <div className="flex items-center justify-center mb-6 bg-zinc-500">
+              <p className="m-4 text-s text-contrast">{submitError}</p>
+            </div>
+          )}
+          <div className="mb-3">
+            <input
+              className={`mb-1 appearance-none rounded border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+                emailError ? ' border-red-500' : 'border-gray-900'
+              }`}
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder="Email address"
+              aria-label="Email address"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              value={email}
+              onChange={(event) => {
+                setEmail(event.target.value);
+              }}
+            />
+            {!emailError ? (
+              ''
+            ) : (
+              <p className={`text-red-500 text-xs`}>{emailError} &nbsp;</p>
+            )}
+          </div>
+          <div className="mb-3">
+            <input
+              className={`mb-1 appearance-none rounded border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+                passwordError ? ' border-red-500' : 'border-gray-900'
+              }`}
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              placeholder="Password"
+              aria-label="Password"
+              value={password}
+              minLength={8}
+              required
+              onChange={(event) => {
+                setPassword(event.target.value);
+              }}
+            />
+            {!passwordError ? (
+              ''
+            ) : (
+              <p className={`text-red-500 text-xs`}>{passwordError} &nbsp;</p>
+            )}
+          </div>
+          <div className="flex items-center justify-between">
+            <button
+              className="bg-gray-900 text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
+              type="submit"
+            >
+              Create Account
+            </button>
+          </div>
+          <div className="flex items-center mt-4">
+            <p className="align-baseline text-sm">
+              Already have an account? &nbsp;
+              <Link className="inline underline" to="/account">
+                Sign in
+              </Link>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export async function callAccountCreateApi({
+  email,
+  password,
+  firstName,
+  lastName,
+}: {
+  email: string;
+  password: string;
+  firstName?: string;
+  lastName?: string;
+}) {
+  try {
+    const res = await fetch(`/account/register`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({email, password, firstName, lastName}),
+    });
+    if (res.status === 200) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (error: any) {
+    return {
+      error: error.toString(),
+    };
+  }
+}

examples/hydrogen/src/components/account/AccountDeleteAddress.client.tsx

@@ -0,0 +1,72 @@
+import {Text, Button} from '~/components/elements';
+import {useRenderServerComponents} from '~/lib/utils';
+
+export function AccountDeleteAddress({
+  addressId,
+  close,
+}: {
+  addressId: string;
+  close: () => void;
+}) {
+  // Necessary for edits to show up on the main page
+  const renderServerComponents = useRenderServerComponents();
+
+  async function deleteAddress(id: string) {
+    const response = await callDeleteAddressApi(id);
+    if (response.error) {
+      alert(response.error);
+      return;
+    }
+    renderServerComponents();
+    close();
+  }
+
+  return (
+    <>
+      <Text className="mb-4" as="h3" size="lead">
+        Confirm removal
+      </Text>
+      <Text as="p">Are you sure you wish to remove this address?</Text>
+      <div className="mt-6">
+        <Button
+          className="text-sm"
+          onClick={() => {
+            deleteAddress(addressId);
+          }}
+          variant="primary"
+          width="full"
+        >
+          Confirm
+        </Button>
+        <Button
+          className="text-sm mt-2"
+          onClick={close}
+          variant="secondary"
+          width="full"
+        >
+          Cancel
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export async function callDeleteAddressApi(id: string) {
+  try {
+    const res = await fetch(`/account/address/${encodeURIComponent(id)}`, {
+      method: 'DELETE',
+      headers: {
+        Accept: 'application/json',
+      },
+    });
+    if (res.ok) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (_e) {
+    return {
+      error: 'Error removing address. Please try again.',
+    };
+  }
+}

examples/hydrogen/src/components/account/AccountDetails.client.tsx

@@ -0,0 +1,66 @@
+import {Seo} from '@shopify/hydrogen';
+import {useState} from 'react';
+import {Modal} from '../index';
+import {AccountDetailsEdit} from './AccountDetailsEdit.client';
+
+export function AccountDetails({
+  firstName,
+  lastName,
+  phone,
+  email,
+}: {
+  firstName?: string;
+  lastName?: string;
+  phone?: string;
+  email?: string;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const close = () => setIsEditing(false);
+
+  return (
+    <>
+      {isEditing ? (
+        <Modal close={close}>
+          <Seo type="noindex" data={{title: 'Account details'}} />
+          <AccountDetailsEdit
+            firstName={firstName}
+            lastName={lastName}
+            phone={phone}
+            email={email}
+            close={close}
+          />
+        </Modal>
+      ) : null}
+      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
+        <h3 className="font-bold text-lead">Account Details</h3>
+        <div className="lg:p-8 p-6 border border-gray-200 rounded">
+          <div className="flex">
+            <h3 className="font-bold text-base flex-1">Profile & Security</h3>
+            <button
+              className="underline text-sm font-normal"
+              onClick={() => setIsEditing(true)}
+            >
+              Edit
+            </button>
+          </div>
+          <div className="mt-4 text-sm text-primary/50">Name</div>
+          <p className="mt-1">
+            {firstName || lastName
+              ? (firstName ? firstName + ' ' : '') + lastName
+              : 'Add name'}{' '}
+          </p>
+
+          <div className="mt-4 text-sm text-primary/50">Contact</div>
+          <p className="mt-1">{phone ?? 'Add mobile'}</p>
+
+          <div className="mt-4 text-sm text-primary/50">Email address</div>
+          <p className="mt-1">{email}</p>
+
+          <div className="mt-4 text-sm text-primary/50">Password</div>
+          <p className="mt-1">**************</p>
+        </div>
+      </div>
+    </>
+  );
+}

examples/hydrogen/src/components/account/AccountDetailsEdit.client.tsx

@@ -0,0 +1,342 @@
+import {useState} from 'react';
+
+import {Text, Button} from '~/components';
+import {
+  emailValidation,
+  passwordValidation,
+  useRenderServerComponents,
+} from '~/lib/utils';
+
+interface FormElements {
+  firstName: HTMLInputElement;
+  lastName: HTMLInputElement;
+  phone: HTMLInputElement;
+  email: HTMLInputElement;
+  currentPassword: HTMLInputElement;
+  newPassword: HTMLInputElement;
+  newPassword2: HTMLInputElement;
+}
+
+export function AccountDetailsEdit({
+  firstName: _firstName = '',
+  lastName: _lastName = '',
+  phone: _phone = '',
+  email: _email = '',
+  close,
+}: {
+  firstName?: string;
+  lastName?: string;
+  phone?: string;
+  email?: string;
+  close: () => void;
+}) {
+  const [saving, setSaving] = useState(false);
+  const [firstName, setFirstName] = useState(_firstName);
+  const [lastName, setLastName] = useState(_lastName);
+  const [phone, setPhone] = useState(_phone);
+  const [email, setEmail] = useState(_email);
+  const [emailError, setEmailError] = useState<null | string>(null);
+  const [currentPasswordError, setCurrentPasswordError] = useState<
+    null | string
+  >(null);
+  const [newPasswordError, setNewPasswordError] = useState<null | string>(null);
+  const [newPassword2Error, setNewPassword2Error] = useState<null | string>(
+    null,
+  );
+  const [submitError, setSubmitError] = useState<null | string>(null);
+
+  // Necessary for edits to show up on the main page
+  const renderServerComponents = useRenderServerComponents();
+
+  async function onSubmit(
+    event: React.FormEvent<HTMLFormElement & FormElements>,
+  ) {
+    event.preventDefault();
+
+    setEmailError(null);
+    setCurrentPasswordError(null);
+    setNewPasswordError(null);
+    setNewPassword2Error(null);
+
+    const emailError = emailValidation(event.currentTarget.email);
+    if (emailError) {
+      setEmailError(emailError);
+    }
+
+    let currentPasswordError, newPasswordError, newPassword2Error;
+
+    // Only validate the password fields if the current password has a value
+    if (event.currentTarget.currentPassword.value) {
+      currentPasswordError = passwordValidation(
+        event.currentTarget.currentPassword,
+      );
+      if (currentPasswordError) {
+        setCurrentPasswordError(currentPasswordError);
+      }
+
+      newPasswordError = passwordValidation(event.currentTarget.newPassword);
+      if (newPasswordError) {
+        setNewPasswordError(newPasswordError);
+      }
+
+      newPassword2Error =
+        event.currentTarget.newPassword.value !==
+        event.currentTarget.newPassword2.value
+          ? 'The two passwords entered did not match'
+          : null;
+      if (newPassword2Error) {
+        setNewPassword2Error(newPassword2Error);
+      }
+    }
+
+    if (
+      emailError ||
+      currentPasswordError ||
+      newPasswordError ||
+      newPassword2Error
+    ) {
+      return;
+    }
+
+    setSaving(true);
+
+    const accountUpdateResponse = await callAccountUpdateApi({
+      email,
+      newPassword: event.currentTarget.newPassword.value,
+      currentPassword: event.currentTarget.currentPassword.value,
+      phone,
+      firstName,
+      lastName,
+    });
+
+    setSaving(false);
+
+    if (accountUpdateResponse.error) {
+      setSubmitError(accountUpdateResponse.error);
+      return;
+    }
+
+    renderServerComponents();
+    close();
+  }
+
+  return (
+    <>
+      <Text className="mt-4 mb-6" as="h3" size="lead">
+        Update your profile
+      </Text>
+      <form noValidate onSubmit={onSubmit}>
+        {submitError && (
+          <div className="flex items-center justify-center mb-6 bg-red-100 rounded">
+            <p className="m-4 text-sm text-red-900">{submitError}</p>
+          </div>
+        )}
+        <div className="mt-3">
+          <input
+            className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+            id="firstname"
+            name="firstname"
+            type="text"
+            autoComplete="given-name"
+            placeholder="First name"
+            aria-label="First name"
+            value={firstName}
+            onChange={(event) => {
+              setFirstName(event.target.value);
+            }}
+          />
+        </div>
+        <div className="mt-3">
+          <input
+            className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+            id="lastname"
+            name="lastname"
+            type="text"
+            autoComplete="family-name"
+            placeholder="Last name"
+            aria-label="Last name"
+            value={lastName}
+            onChange={(event) => {
+              setLastName(event.target.value);
+            }}
+          />
+        </div>
+        <div className="mt-3">
+          <input
+            className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline border-gray-500 rounded`}
+            id="phone"
+            name="phone"
+            type="tel"
+            autoComplete="tel"
+            placeholder="Mobile"
+            aria-label="Mobile"
+            value={phone}
+            onChange={(event) => {
+              setPhone(event.target.value);
+            }}
+          />
+        </div>
+        <div className="mt-3">
+          <input
+            className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline rounded ${
+              emailError ? ' border-red-500' : 'border-gray-500'
+            }`}
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            placeholder="Email address"
+            aria-label="Email address"
+            value={email}
+            onChange={(event) => {
+              setEmail(event.target.value);
+            }}
+          />
+          <p
+            className={`text-red-500 text-xs ${!emailError ? 'invisible' : ''}`}
+          >
+            {emailError} &nbsp;
+          </p>
+        </div>
+        <Text className="mb-6 mt-6" as="h3" size="lead">
+          Change your password
+        </Text>
+        <Password
+          name="currentPassword"
+          label="Current password"
+          passwordError={currentPasswordError}
+        />
+        <Password
+          name="newPassword"
+          label="New password"
+          passwordError={newPasswordError}
+        />
+        <Password
+          name="newPassword2"
+          label="Re-enter new password"
+          passwordError={newPassword2Error}
+        />
+        <Text
+          size="fine"
+          color="subtle"
+          className={`mt-1 ${
+            currentPasswordError || newPasswordError ? 'text-red-500' : ''
+          }`}
+        >
+          Passwords must be at least 6 characters.
+        </Text>
+        {newPassword2Error ? <br /> : null}
+        <Text
+          size="fine"
+          className={`mt-1 text-red-500 ${
+            newPassword2Error ? '' : 'invisible'
+          }`}
+        >
+          {newPassword2Error} &nbsp;
+        </Text>
+        <div className="mt-6">
+          <Button
+            className="text-sm mb-2"
+            variant="primary"
+            width="full"
+            type="submit"
+            disabled={saving}
+          >
+            Save
+          </Button>
+        </div>
+        <div className="mb-4">
+          <Button
+            type="button"
+            className="text-sm"
+            variant="secondary"
+            width="full"
+            onClick={close}
+          >
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+}
+
+function Password({
+  name,
+  passwordError,
+  label,
+}: {
+  name: string;
+  passwordError: string | null;
+  label: string;
+}) {
+  const [password, setPassword] = useState('');
+
+  return (
+    <div className="mt-3">
+      <input
+        className={`appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline rounded ${
+          passwordError ? ' border-red-500' : 'border-gray-500'
+        }`}
+        id={name}
+        name={name}
+        type="password"
+        autoComplete={
+          name === 'currentPassword' ? 'current-password' : undefined
+        }
+        placeholder={label}
+        aria-label={label}
+        value={password}
+        minLength={8}
+        required
+        onChange={(event) => {
+          setPassword(event.target.value);
+        }}
+      />
+    </div>
+  );
+}
+
+export async function callAccountUpdateApi({
+  email,
+  phone,
+  firstName,
+  lastName,
+  currentPassword,
+  newPassword,
+}: {
+  email: string;
+  phone: string;
+  firstName: string;
+  lastName: string;
+  currentPassword: string;
+  newPassword: string;
+}) {
+  try {
+    const res = await fetch(`/account`, {
+      method: 'PATCH',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        email,
+        phone,
+        firstName,
+        lastName,
+        currentPassword,
+        newPassword,
+      }),
+    });
+    if (res.ok) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (_e) {
+    return {
+      error: 'Error saving account. Please try again.',
+    };
+  }
+}

examples/hydrogen/src/components/account/AccountLoginForm.client.tsx

@@ -0,0 +1,285 @@
+import {useState} from 'react';
+import {useNavigate, Link} from '@shopify/hydrogen/client';
+
+interface FormElements {
+  email: HTMLInputElement;
+  password: HTMLInputElement;
+}
+
+export function AccountLoginForm({shopName}: {shopName: string}) {
+  const navigate = useNavigate();
+
+  const [hasSubmitError, setHasSubmitError] = useState(false);
+  const [showEmailField, setShowEmailField] = useState(true);
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState<null | string>(null);
+  const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState<null | string>(null);
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement & FormElements>) {
+    event.preventDefault();
+
+    setEmailError(null);
+    setHasSubmitError(false);
+    setPasswordError(null);
+
+    if (showEmailField) {
+      checkEmail(event);
+    } else {
+      checkPassword(event);
+    }
+  }
+
+  function checkEmail(event: React.FormEvent<HTMLFormElement & FormElements>) {
+    if (event.currentTarget.email.validity.valid) {
+      setShowEmailField(false);
+    } else {
+      setEmailError('Please enter a valid email');
+    }
+  }
+
+  async function checkPassword(
+    event: React.FormEvent<HTMLFormElement & FormElements>,
+  ) {
+    const validity = event.currentTarget.password.validity;
+    if (validity.valid) {
+      const response = await callLoginApi({
+        email,
+        password,
+      });
+
+      if (response.error) {
+        setHasSubmitError(true);
+        resetForm();
+      } else {
+        navigate('/account');
+      }
+    } else {
+      setPasswordError(
+        validity.valueMissing
+          ? 'Please enter a password'
+          : 'Passwords must be at least 6 characters',
+      );
+    }
+  }
+
+  function resetForm() {
+    setShowEmailField(true);
+    setEmail('');
+    setEmailError(null);
+    setPassword('');
+    setPasswordError(null);
+  }
+
+  return (
+    <div className="flex justify-center my-24 px-4">
+      <div className="max-w-md w-full">
+        <h1 className="text-4xl">Sign in.</h1>
+        <form noValidate className="pt-6 pb-8 mt-4 mb-4" onSubmit={onSubmit}>
+          {hasSubmitError && (
+            <div className="flex items-center justify-center mb-6 bg-zinc-500">
+              <p className="m-4 text-s text-contrast">
+                Sorry we did not recognize either your email or password. Please
+                try to sign in again or create a new account.
+              </p>
+            </div>
+          )}
+          {showEmailField && (
+            <EmailField
+              shopName={shopName}
+              email={email}
+              setEmail={setEmail}
+              emailError={emailError}
+            />
+          )}
+          {!showEmailField && (
+            <ValidEmail email={email} resetForm={resetForm} />
+          )}
+          {!showEmailField && (
+            <PasswordField
+              password={password}
+              setPassword={setPassword}
+              passwordError={passwordError}
+            />
+          )}
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export async function callLoginApi({
+  email,
+  password,
+}: {
+  email: string;
+  password: string;
+}) {
+  try {
+    const res = await fetch(`/account/login`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({email, password}),
+    });
+    if (res.ok) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (error: any) {
+    return {
+      error: error.toString(),
+    };
+  }
+}
+
+function EmailField({
+  email,
+  setEmail,
+  emailError,
+  shopName,
+}: {
+  email: string;
+  setEmail: (email: string) => void;
+  emailError: null | string;
+  shopName: string;
+}) {
+  return (
+    <>
+      <div className="mb-3">
+        <input
+          className={`mb-1 appearance-none rounded border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+            emailError ? ' border-red-500' : 'border-gray-900'
+          }`}
+          id="email"
+          name="email"
+          type="email"
+          autoComplete="email"
+          required
+          placeholder="Email address"
+          aria-label="Email address"
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+          value={email}
+          onChange={(event) => {
+            setEmail(event.target.value);
+          }}
+        />
+        {!emailError ? (
+          ''
+        ) : (
+          <p className={`text-red-500 text-xs`}>{emailError} &nbsp;</p>
+        )}
+      </div>
+      <div className="flex items-center justify-between">
+        <button
+          className="bg-gray-900 rounded text-contrast py-2 px-4 focus:shadow-outline block w-full"
+          type="submit"
+        >
+          Next
+        </button>
+      </div>
+      <div className="flex items-center mt-8 border-t  border-gray-300">
+        <p className="align-baseline text-sm mt-6">
+          New to {shopName}? &nbsp;
+          <Link className="inline underline" to="/account/register">
+            Create an account
+          </Link>
+        </p>
+      </div>
+    </>
+  );
+}
+
+function ValidEmail({
+  email,
+  resetForm,
+}: {
+  email: string;
+  resetForm: () => void;
+}) {
+  return (
+    <div className="mb-3 flex items-center justify-between">
+      <div>
+        <p>{email}</p>
+        <input
+          className="hidden"
+          type="text"
+          autoComplete="username"
+          value={email}
+          readOnly
+        ></input>
+      </div>
+      <div>
+        <button
+          className="inline-block align-baseline text-sm underline"
+          type="button"
+          onClick={resetForm}
+        >
+          Change email
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function PasswordField({
+  password,
+  setPassword,
+  passwordError,
+}: {
+  password: string;
+  setPassword: (password: string) => void;
+  passwordError: null | string;
+}) {
+  return (
+    <>
+      <div className="mb-3">
+        <input
+          className={`mb-1 appearance-none rounded border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+            passwordError ? ' border-red-500' : 'border-gray-900'
+          }`}
+          id="password"
+          name="password"
+          type="password"
+          autoComplete="current-password"
+          placeholder="Password"
+          aria-label="Password"
+          value={password}
+          minLength={8}
+          required
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+          onChange={(event) => {
+            setPassword(event.target.value);
+          }}
+        />
+        {!passwordError ? (
+          ''
+        ) : (
+          <p className={`text-red-500 text-xs`}> {passwordError} &nbsp;</p>
+        )}
+      </div>
+      <div className="flex items-center justify-between">
+        <button
+          className="bg-gray-900 text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
+          type="submit"
+        >
+          Sign in
+        </button>
+      </div>
+      <div className="flex items-center justify-between mt-4">
+        <div className="flex-1"></div>
+        <Link
+          className="inline-block align-baseline text-sm text-primary/50"
+          to="/account/recover"
+        >
+          Forgot password
+        </Link>
+      </div>
+    </>
+  );
+}

examples/hydrogen/src/components/account/AccountOrderHistory.client.tsx

@@ -0,0 +1,38 @@
+import type {Order} from '@shopify/hydrogen/storefront-api-types';
+import {Button, Text, OrderCard} from '~/components';
+
+export function AccountOrderHistory({orders}: {orders: Order[]}) {
+  return (
+    <div className="mt-6">
+      <div className="grid w-full gap-4 p-4 py-6 md:gap-8 md:p-8 lg:p-12">
+        <h2 className="font-bold text-lead">Order History</h2>
+        {orders?.length ? <Orders orders={orders} /> : <EmptyOrders />}
+      </div>
+    </div>
+  );
+}
+
+function EmptyOrders() {
+  return (
+    <div>
+      <Text className="mb-1" size="fine" width="narrow" as="p">
+        You haven&apos;t placed any orders yet.
+      </Text>
+      <div className="w-48">
+        <Button className="text-sm mt-2 w-full" variant="secondary" to={'/'}>
+          Start Shopping
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function Orders({orders}: {orders: Order[]}) {
+  return (
+    <ul className="grid-flow-row grid gap-2 gap-y-6 md:gap-4 lg:gap-6 grid-cols-1 false  sm:grid-cols-3">
+      {orders.map((order) => (
+        <OrderCard order={order} key={order.id} />
+      ))}
+    </ul>
+  );
+}

examples/hydrogen/src/components/account/AccountPasswordResetForm.client.tsx

@@ -0,0 +1,189 @@
+import {useState} from 'react';
+import {useNavigate} from '@shopify/hydrogen/client';
+
+interface FormElements {
+  password: HTMLInputElement;
+  passwordConfirm: HTMLInputElement;
+}
+
+export function AccountPasswordResetForm({
+  id,
+  resetToken,
+}: {
+  id: string;
+  resetToken: string;
+}) {
+  const navigate = useNavigate();
+
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [passwordConfirmError, setPasswordConfirmError] = useState<
+    string | null
+  >(null);
+
+  function passwordValidation(form: HTMLFormElement & FormElements) {
+    setPasswordError(null);
+    setPasswordConfirmError(null);
+
+    let hasError = false;
+
+    if (!form.password.validity.valid) {
+      hasError = true;
+      setPasswordError(
+        form.password.validity.valueMissing
+          ? 'Please enter a password'
+          : 'Passwords must be at least 6 characters',
+      );
+    }
+
+    if (!form.passwordConfirm.validity.valid) {
+      hasError = true;
+      setPasswordConfirmError(
+        form.password.validity.valueMissing
+          ? 'Please re-enter a password'
+          : 'Passwords must be at least 6 characters',
+      );
+    }
+
+    if (password !== passwordConfirm) {
+      hasError = true;
+      setPasswordConfirmError('The two password entered did not match.');
+    }
+
+    return hasError;
+  }
+
+  async function onSubmit(
+    event: React.FormEvent<HTMLFormElement & FormElements>,
+  ) {
+    event.preventDefault();
+
+    if (passwordValidation(event.currentTarget)) {
+      return;
+    }
+
+    const response = await callPasswordResetApi({
+      id,
+      resetToken,
+      password,
+    });
+
+    if (response.error) {
+      setSubmitError(response.error);
+      return;
+    }
+
+    navigate('/account');
+  }
+
+  return (
+    <div className="flex justify-center my-24 px-4">
+      <div className="max-w-md w-full">
+        <h1 className="text-4xl">Reset Password.</h1>
+        <p className="mt-4">Enter a new password for your account.</p>
+        <form noValidate className="pt-6 pb-8 mt-4 mb-4" onSubmit={onSubmit}>
+          {submitError && (
+            <div className="flex items-center justify-center mb-6 bg-zinc-500">
+              <p className="m-4 text-s text-contrast">{submitError}</p>
+            </div>
+          )}
+          <div className="mb-3">
+            <input
+              className={`mb-1 appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+                passwordError ? ' border-red-500' : 'border-gray-900'
+              }`}
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              placeholder="Password"
+              aria-label="Password"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              value={password}
+              minLength={8}
+              required
+              onChange={(event) => {
+                setPassword(event.target.value);
+              }}
+            />
+            <p
+              className={`text-red-500 text-xs ${
+                !passwordError ? 'invisible' : ''
+              }`}
+            >
+              {passwordError} &nbsp;
+            </p>
+          </div>
+          <div className="mb-3">
+            <input
+              className={`mb-1 appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+                passwordConfirmError ? ' border-red-500' : 'border-gray-900'
+              }`}
+              id="passwordConfirm"
+              name="passwordConfirm"
+              type="password"
+              autoComplete="current-password"
+              placeholder="Re-enter password"
+              aria-label="Re-enter password"
+              value={passwordConfirm}
+              required
+              minLength={8}
+              onChange={(event) => {
+                setPasswordConfirm(event.target.value);
+              }}
+            />
+            <p
+              className={`text-red-500 text-xs ${
+                !passwordConfirmError ? 'invisible' : ''
+              }`}
+            >
+              {passwordConfirmError} &nbsp;
+            </p>
+          </div>
+          <div className="flex items-center justify-between">
+            <button
+              className="bg-gray-900 text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
+              type="submit"
+            >
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export async function callPasswordResetApi({
+  id,
+  resetToken,
+  password,
+}: {
+  id: string;
+  resetToken: string;
+  password: string;
+}) {
+  try {
+    const res = await fetch(`/account/reset`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({id, resetToken, password}),
+    });
+
+    if (res.ok) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (error: any) {
+    return {
+      error: error.toString(),
+    };
+  }
+}

examples/hydrogen/src/components/account/AccountRecoverForm.client.tsx

@@ -0,0 +1,134 @@
+import {useState} from 'react';
+
+import {emailValidation} from '~/lib/utils';
+
+interface FormElements {
+  email: HTMLInputElement;
+}
+
+export function AccountRecoverForm() {
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState<string | null>(null);
+
+  async function onSubmit(
+    event: React.FormEvent<HTMLFormElement & FormElements>,
+  ) {
+    event.preventDefault();
+
+    setEmailError(null);
+    setSubmitError(null);
+
+    const newEmailError = emailValidation(event.currentTarget.email);
+
+    if (newEmailError) {
+      setEmailError(newEmailError);
+      return;
+    }
+
+    await callAccountRecoverApi({
+      email,
+    });
+
+    setEmail('');
+    setSubmitSuccess(true);
+  }
+
+  return (
+    <div className="flex justify-center my-24 px-4">
+      <div className="max-w-md w-full">
+        {submitSuccess ? (
+          <>
+            <h1 className="text-4xl">Request Sent.</h1>
+            <p className="mt-4">
+              If that email address is in our system, you will receive an email
+              with instructions about how to reset your password in a few
+              minutes.
+            </p>
+          </>
+        ) : (
+          <>
+            <h1 className="text-4xl">Forgot Password.</h1>
+            <p className="mt-4">
+              Enter the email address associated with your account to receive a
+              link to reset your password.
+            </p>
+          </>
+        )}
+        <form noValidate className="pt-6 pb-8 mt-4 mb-4" onSubmit={onSubmit}>
+          {submitError && (
+            <div className="flex items-center justify-center mb-6 bg-zinc-500">
+              <p className="m-4 text-s text-contrast">{submitError}</p>
+            </div>
+          )}
+          <div className="mb-3">
+            <input
+              className={`mb-1 rounded appearance-none border w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline ${
+                emailError ? ' border-red-500' : 'border-gray-900'
+              }`}
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder="Email address"
+              aria-label="Email address"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              value={email}
+              onChange={(event) => {
+                setEmail(event.target.value);
+              }}
+            />
+            {!emailError ? (
+              ''
+            ) : (
+              <p className={`text-red-500 text-xs`}>{emailError} &nbsp;</p>
+            )}
+          </div>
+          <div className="flex items-center justify-between">
+            <button
+              className="bg-gray-900 text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
+              type="submit"
+            >
+              Request Reset Link
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export async function callAccountRecoverApi({
+  email,
+  password,
+  firstName,
+  lastName,
+}: {
+  email: string;
+  password?: string;
+  firstName?: string;
+  lastName?: string;
+}) {
+  try {
+    const res = await fetch(`/account/recover`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({email, password, firstName, lastName}),
+    });
+    if (res.status === 200) {
+      return {};
+    } else {
+      return res.json();
+    }
+  } catch (error: any) {
+    return {
+      error: error.toString(),
+    };
+  }
+}

examples/hydrogen/src/components/account/index.ts

@@ -0,0 +1,11 @@
+export {AccountActivateForm} from './AccountActivateForm.client';
+export {AccountAddressBook} from './AccountAddressBook.client';
+export {AccountAddressEdit} from './AccountAddressEdit.client';
+export {AccountCreateForm} from './AccountCreateForm.client';
+export {AccountDeleteAddress} from './AccountDeleteAddress.client';
+export {AccountDetails} from './AccountDetails.client';
+export {AccountDetailsEdit} from './AccountDetailsEdit.client';
+export {AccountLoginForm} from './AccountLoginForm.client';
+export {AccountOrderHistory} from './AccountOrderHistory.client';
+export {AccountPasswordResetForm} from './AccountPasswordResetForm.client';
+export {AccountRecoverForm} from './AccountRecoverForm.client';

examples/hydrogen/src/components/cards/ArticleCard.tsx

@@ -0,0 +1,38 @@
+import {Image, Link} from '@shopify/hydrogen';
+import type {Article} from '@shopify/hydrogen/storefront-api-types';
+
+export function ArticleCard({
+  blogHandle,
+  article,
+  loading,
+}: {
+  blogHandle: string;
+  article: Article;
+  loading?: HTMLImageElement['loading'];
+}) {
+  return (
+    <li key={article.id}>
+      <Link to={`/${blogHandle}/${article.handle}`}>
+        {article.image && (
+          <div className="card-image aspect-[3/2]">
+            <Image
+              alt={article.image.altText || article.title}
+              className="object-cover w-full"
+              data={article.image}
+              height={400}
+              loading={loading}
+              sizes="(min-width: 768px) 50vw, 100vw"
+              width={600}
+              loaderOptions={{
+                scale: 2,
+                crop: 'center',
+              }}
+            />
+          </div>
+        )}
+        <h2 className="mt-4 font-medium">{article.title}</h2>
+        <span className="block mt-1">{article.publishedAt}</span>
+      </Link>
+    </li>
+  );
+}

examples/hydrogen/src/components/cards/CollectionCard.server.tsx

@@ -0,0 +1,36 @@
+import {Image, Link} from '@shopify/hydrogen';
+import type {Collection} from '@shopify/hydrogen/storefront-api-types';
+
+import {Heading} from '~/components';
+
+export function CollectionCard({
+  collection,
+  loading,
+}: {
+  collection: Collection;
+  loading?: HTMLImageElement['loading'];
+}) {
+  return (
+    <Link to={`/collections/${collection.handle}`} className="grid gap-4">
+      <div className="card-image bg-primary/5 aspect-[3/2]">
+        {collection?.image && (
+          <Image
+            alt={`Image of ${collection.title}`}
+            data={collection.image}
+            height={400}
+            sizes="(max-width: 32em) 100vw, 33vw"
+            width={600}
+            widths={[400, 500, 600, 700, 800, 900]}
+            loaderOptions={{
+              scale: 2,
+              crop: 'center',
+            }}
+          />
+        )}
+      </div>
+      <Heading as="h3" size="copy">
+        {collection.title}
+      </Heading>
+    </Link>
+  );
+}

examples/hydrogen/src/components/cards/OrderCard.client.tsx

@@ -0,0 +1,87 @@
+import {Image, Link, flattenConnection} from '@shopify/hydrogen';
+import type {
+  Order,
+  OrderLineItem,
+} from '@shopify/hydrogen/storefront-api-types';
+
+import {Heading, Text} from '~/components';
+import {statusMessage} from '~/lib/utils';
+
+export function OrderCard({order}: {order: Order}) {
+  if (!order?.id) return null;
+  const legacyOrderId = order!.id!.split('/').pop()!.split('?')[0];
+  const lineItems = flattenConnection<OrderLineItem>(order?.lineItems);
+
+  return (
+    <li className="grid text-center border rounded">
+      <Link
+        className="grid items-center gap-4 p-4 md:gap-6 md:p-6 md:grid-cols-2"
+        to={`/account/orders/${legacyOrderId}`}
+      >
+        {lineItems[0].variant?.image && (
+          <div className="card-image aspect-square bg-primary/5">
+            <Image
+              width={168}
+              height={168}
+              widths={[168]}
+              className="w-full fadeIn cover"
+              alt={lineItems[0].variant?.image?.altText ?? 'Order image'}
+              // @ts-expect-error Stock line item variant image type has `url` as optional
+              data={lineItems[0].variant?.image}
+              loaderOptions={{scale: 2, crop: 'center'}}
+            />
+          </div>
+        )}
+        <div
+          className={`flex-col justify-center text-left ${
+            !lineItems[0].variant?.image && 'md:col-span-2'
+          }`}
+        >
+          <Heading as="h3" format size="copy">
+            {lineItems.length > 1
+              ? `${lineItems[0].title} +${lineItems.length - 1} more`
+              : lineItems[0].title}
+          </Heading>
+          <dl className="grid grid-gap-1">
+            <dt className="sr-only">Order ID</dt>
+            <dd>
+              <Text size="fine" color="subtle">
+                Order No. {order.orderNumber}
+              </Text>
+            </dd>
+            <dt className="sr-only">Order Date</dt>
+            <dd>
+              <Text size="fine" color="subtle">
+                {new Date(order.processedAt).toDateString()}
+              </Text>
+            </dd>
+            <dt className="sr-only">Fulfillment Status</dt>
+            <dd className="mt-2">
+              <span
+                className={`px-3 py-1 text-xs font-medium rounded-full ${
+                  order.fulfillmentStatus === 'FULFILLED'
+                    ? 'bg-green-100 text-green-800'
+                    : 'bg-primary/5 text-primary/50'
+                }`}
+              >
+                <Text size="fine">
+                  {statusMessage(order.fulfillmentStatus)}
+                </Text>
+              </span>
+            </dd>
+          </dl>
+        </div>
+      </Link>
+      <div className="self-end border-t">
+        <Link
+          className="block w-full p-2 text-center"
+          to={`/account/orders/${legacyOrderId}`}
+        >
+          <Text color="subtle" className="ml-3">
+            View Details
+          </Text>
+        </Link>
+      </div>
+    </li>
+  );
+}

examples/hydrogen/src/components/cards/ProductCard.client.tsx

@@ -0,0 +1,126 @@
+import clsx from 'clsx';
+import {
+  flattenConnection,
+  Image,
+  Link,
+  Money,
+  useMoney,
+} from '@shopify/hydrogen';
+
+import {Text} from '~/components';
+import {isDiscounted, isNewArrival} from '~/lib/utils';
+import {getProductPlaceholder} from '~/lib/placeholders';
+import type {
+  MoneyV2,
+  Product,
+  ProductVariant,
+  ProductVariantConnection,
+} from '@shopify/hydrogen/storefront-api-types';
+
+export function ProductCard({
+  product,
+  label,
+  className,
+  loading,
+  onClick,
+}: {
+  product: Product;
+  label?: string;
+  className?: string;
+  loading?: HTMLImageElement['loading'];
+  onClick?: () => void;
+}) {
+  let cardLabel;
+
+  const cardData = product?.variants ? product : getProductPlaceholder();
+
+  const {
+    image,
+    priceV2: price,
+    compareAtPriceV2: compareAtPrice,
+  } = flattenConnection<ProductVariant>(
+    cardData?.variants as ProductVariantConnection,
+  )[0] || {};
+
+  if (label) {
+    cardLabel = label;
+  } else if (isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2)) {
+    cardLabel = 'Sale';
+  } else if (isNewArrival(product.publishedAt)) {
+    cardLabel = 'New';
+  }
+
+  const styles = clsx('grid gap-6', className);
+
+  return (
+    <Link onClick={onClick} to={`/products/${product.handle}`}>
+      <div className={styles}>
+        <div className="card-image aspect-[4/5] bg-primary/5">
+          <Text
+            as="label"
+            size="fine"
+            className="absolute top-0 right-0 m-4 text-right text-notice"
+          >
+            {cardLabel}
+          </Text>
+          {image && (
+            <Image
+              className="aspect-[4/5] w-full object-cover fadeIn"
+              widths={[320]}
+              sizes="320px"
+              loaderOptions={{
+                crop: 'center',
+                scale: 2,
+                width: 320,
+                height: 400,
+              }}
+              // @ts-ignore Stock type has `src` as optional
+              data={image}
+              alt={image.altText || `Picture of ${product.title}`}
+              loading={loading}
+            />
+          )}
+        </div>
+        <div className="grid gap-1">
+          <Text
+            className="w-full overflow-hidden whitespace-nowrap text-ellipsis "
+            as="h3"
+          >
+            {product.title}
+          </Text>
+          <div className="flex gap-4">
+            <Text className="flex gap-4">
+              <Money withoutTrailingZeros data={price!} />
+              {isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
+                <CompareAtPrice
+                  className={'opacity-50'}
+                  data={compareAtPrice as MoneyV2}
+                />
+              )}
+            </Text>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function CompareAtPrice({
+  data,
+  className,
+}: {
+  data: MoneyV2;
+  className?: string;
+}) {
+  const {currencyNarrowSymbol, withoutTrailingZerosAndCurrency} =
+    useMoney(data);
+
+  const styles = clsx('strike', className);
+
+  return (
+    <span className={styles}>
+      {currencyNarrowSymbol}
+      {withoutTrailingZerosAndCurrency}
+    </span>
+  );
+}

examples/hydrogen/src/components/cards/index.server.ts

@@ -0,0 +1 @@
+export {CollectionCard} from './CollectionCard.server';

examples/hydrogen/src/components/cards/index.ts

@@ -0,0 +1,3 @@
+export {ArticleCard} from './ArticleCard';
+export {OrderCard} from './OrderCard.client';
+export {ProductCard} from './ProductCard.client';

examples/hydrogen/src/components/cart/CartDetails.client.tsx

@@ -0,0 +1,100 @@
+import {useRef} from 'react';
+import {useScroll} from 'react-use';
+import {
+  useCart,
+  CartLineProvider,
+  CartShopPayButton,
+  Money,
+} from '@shopify/hydrogen';
+
+import {Button, Text, CartLineItem, CartEmpty} from '~/components';
+
+export function CartDetails({
+  layout,
+  onClose,
+}: {
+  layout: 'drawer' | 'page';
+  onClose?: () => void;
+}) {
+  const {lines} = useCart();
+  const scrollRef = useRef(null);
+  const {y} = useScroll(scrollRef);
+
+  if (lines.length === 0) {
+    return <CartEmpty onClose={onClose} layout={layout} />;
+  }
+
+  const container = {
+    drawer: 'grid grid-cols-1 h-screen-no-nav grid-rows-[1fr_auto]',
+    page: 'pb-12 grid md:grid-cols-2 md:items-start gap-8 md:gap-8 lg:gap-12',
+  };
+
+  const content = {
+    drawer: 'px-6 pb-6 sm-max:pt-2 overflow-auto transition md:px-12',
+    page: 'flex-grow md:translate-y-4',
+  };
+
+  const summary = {
+    drawer: 'grid gap-6 p-6 border-t md:px-12',
+    page: 'sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-primary/5 rounded w-full',
+  };
+
+  return (
+    <form className={container[layout]}>
+      <section
+        ref={scrollRef}
+        aria-labelledby="cart-contents"
+        className={`${content[layout]} ${y > 0 ? 'border-t' : ''}`}
+      >
+        <ul className="grid gap-6 md:gap-10">
+          {lines.map((line) => {
+            return (
+              <CartLineProvider key={line.id} line={line}>
+                <CartLineItem />
+              </CartLineProvider>
+            );
+          })}
+        </ul>
+      </section>
+      <section aria-labelledby="summary-heading" className={summary[layout]}>
+        <h2 id="summary-heading" className="sr-only">
+          Order summary
+        </h2>
+        <OrderSummary />
+        <CartCheckoutActions />
+      </section>
+    </form>
+  );
+}
+
+function CartCheckoutActions() {
+  const {checkoutUrl} = useCart();
+  return (
+    <>
+      <div className="grid gap-4">
+        <Button to={checkoutUrl}>Continue to Checkout</Button>
+        <CartShopPayButton />
+      </div>
+    </>
+  );
+}
+
+function OrderSummary() {
+  const {cost} = useCart();
+  return (
+    <>
+      <dl className="grid">
+        <div className="flex items-center justify-between font-medium">
+          <Text as="dt">Subtotal</Text>
+          <Text as="dd">
+            {cost?.subtotalAmount?.amount ? (
+              <Money data={cost?.subtotalAmount} />
+            ) : (
+              '-'
+            )}
+          </Text>
+        </div>
+      </dl>
+    </>
+  );
+}

examples/hydrogen/src/components/cart/CartEmpty.client.tsx

@@ -0,0 +1,85 @@
+import {useRef} from 'react';
+import {useScroll} from 'react-use';
+import {fetchSync} from '@shopify/hydrogen';
+import {Button, Text, ProductCard, Heading, Skeleton} from '~/components';
+import type {Product} from '@shopify/hydrogen/storefront-api-types';
+import {Suspense} from 'react';
+
+export function CartEmpty({
+  onClose,
+  layout = 'drawer',
+}: {
+  onClose?: () => void;
+  layout?: 'page' | 'drawer';
+}) {
+  const scrollRef = useRef(null);
+  const {y} = useScroll(scrollRef);
+
+  const container = {
+    drawer: `grid content-start gap-4 px-6 pb-8 transition overflow-y-scroll md:gap-12 md:px-12 h-screen-no-nav md:pb-12 ${
+      y > 0 ? 'border-t' : ''
+    }`,
+    page: `grid pb-12 w-full md:items-start gap-4 md:gap-8 lg:gap-12`,
+  };
+
+  const topProductsContainer = {
+    drawer: '',
+    page: 'md:grid-cols-4 sm:grid-col-4',
+  };
+
+  return (
+    <div ref={scrollRef} className={container[layout]}>
+      <section className="grid gap-6">
+        <Text format>
+          Looks like you haven&rsquo;t added anything yet, let&rsquo;s get you
+          started!
+        </Text>
+        <div>
+          <Button onClick={onClose}>Continue shopping</Button>
+        </div>
+      </section>
+      <section className="grid gap-8 pt-4">
+        <Heading format size="copy">
+          Shop Best Sellers
+        </Heading>
+        <div
+          className={`grid grid-cols-2 gap-x-6 gap-y-8 ${topProductsContainer[layout]}`}
+        >
+          <Suspense fallback={<Loading />}>
+            <TopProducts onClose={onClose} />
+          </Suspense>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function TopProducts({onClose}: {onClose?: () => void}) {
+  const products: Product[] = fetchSync('/api/bestSellers').json();
+
+  if (products.length === 0) {
+    return <Text format>No products found.</Text>;
+  }
+
+  return (
+    <>
+      {products.map((product) => (
+        <ProductCard product={product} key={product.id} onClick={onClose} />
+      ))}
+    </>
+  );
+}
+
+function Loading() {
+  return (
+    <>
+      {[...new Array(4)].map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={i} className="grid gap-2">
+          <Skeleton className="aspect-[3/4]" />
+          <Skeleton className="w-32 h-4" />
+        </div>
+      ))}
+    </>
+  );
+}

examples/hydrogen/src/components/cart/CartLineItem.client.tsx

@@ -0,0 +1,103 @@
+import {
+  useCart,
+  useCartLine,
+  CartLineQuantityAdjustButton,
+  CartLinePrice,
+  CartLineQuantity,
+  Image,
+  Link,
+} from '@shopify/hydrogen';
+import type {Image as ImageType} from '@shopify/hydrogen/storefront-api-types';
+
+import {Heading, IconRemove, Text} from '~/components';
+
+export function CartLineItem() {
+  const {linesRemove} = useCart();
+  const {id: lineId, quantity, merchandise} = useCartLine();
+
+  return (
+    <li key={lineId} className="flex gap-4">
+      <div className="flex-shrink">
+        <Image
+          width={112}
+          height={112}
+          widths={[112]}
+          data={merchandise.image as ImageType}
+          loaderOptions={{
+            scale: 2,
+            crop: 'center',
+          }}
+          className="object-cover object-center w-24 h-24 border rounded md:w-28 md:h-28"
+        />
+      </div>
+
+      <div className="flex justify-between flex-grow">
+        <div className="grid gap-2">
+          <Heading as="h3" size="copy">
+            <Link to={`/products/${merchandise.product.handle}`}>
+              {merchandise.product.title}
+            </Link>
+          </Heading>
+
+          <div className="grid pb-2">
+            {(merchandise?.selectedOptions || []).map((option) => (
+              <Text color="subtle" key={option.name}>
+                {option.name}: {option.value}
+              </Text>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <div className="flex justify-start text-copy">
+              <CartLineQuantityAdjust lineId={lineId} quantity={quantity} />
+            </div>
+            <button
+              type="button"
+              onClick={() => linesRemove([lineId])}
+              className="flex items-center justify-center w-10 h-10 border rounded"
+            >
+              <span className="sr-only">Remove</span>
+              <IconRemove aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+        <Text>
+          <CartLinePrice as="span" />
+        </Text>
+      </div>
+    </li>
+  );
+}
+
+function CartLineQuantityAdjust({
+  lineId,
+  quantity,
+}: {
+  lineId: string;
+  quantity: number;
+}) {
+  return (
+    <>
+      <label htmlFor={`quantity-${lineId}`} className="sr-only">
+        Quantity, {quantity}
+      </label>
+      <div className="flex items-center border rounded">
+        <CartLineQuantityAdjustButton
+          adjust="decrease"
+          aria-label="Decrease quantity"
+          className="w-10 h-10 transition text-primary/50 hover:text-primary disabled:cursor-wait"
+        >
+          &#8722;
+        </CartLineQuantityAdjustButton>
+        <CartLineQuantity as="div" className="px-2 text-center" />
+        <CartLineQuantityAdjustButton
+          adjust="increase"
+          aria-label="Increase quantity"
+          className="w-10 h-10 transition text-primary/50 hover:text-primary disabled:cursor-wait"
+        >
+          &#43;
+        </CartLineQuantityAdjustButton>
+      </div>
+    </>
+  );
+}

examples/hydrogen/src/components/cart/index.ts

@@ -0,0 +1,3 @@
+export {CartDetails} from './CartDetails.client';
+export {CartEmpty} from './CartEmpty.client';
+export {CartLineItem} from './CartLineItem.client';

examples/hydrogen/src/components/elements/Button.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import {Link} from '@shopify/hydrogen';
+
+import {missingClass} from '~/lib/utils';
+
+export function Button({
+  as = 'button',
+  className = '',
+  variant = 'primary',
+  width = 'auto',
+  ...props
+}: {
+  as?: React.ElementType;
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'inline';
+  width?: 'auto' | 'full';
+  [key: string]: any;
+}) {
+  const Component = props?.to ? Link : as;
+
+  const baseButtonClasses =
+    'inline-block rounded font-medium text-center py-3 px-6';
+
+  const variants = {
+    primary: `${baseButtonClasses} bg-primary text-contrast`,
+    secondary: `${baseButtonClasses} border border-primary/10 bg-contrast text-primary`,
+    inline: 'border-b border-primary/10 leading-none pb-1',
+  };
+
+  const widths = {
+    auto: 'w-auto',
+    full: 'w-full',
+  };
+
+  const styles = clsx(
+    missingClass(className, 'bg-') && variants[variant],
+    missingClass(className, 'w-') && widths[width],
+    className,
+  );
+
+  return <Component className={styles} {...props} />;
+}

examples/hydrogen/src/components/elements/Grid.tsx

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+
+export function Grid({
+  as: Component = 'div',
+  className,
+  flow = 'row',
+  gap = 'default',
+  items = 4,
+  layout = 'default',
+  ...props
+}: {
+  as?: React.ElementType;
+  className?: string;
+  flow?: 'row' | 'col';
+  gap?: 'default' | 'blog';
+  items?: number;
+  layout?: 'default' | 'products' | 'auto' | 'blog';
+  [key: string]: any;
+}) {
+  const layouts = {
+    default: `grid-cols-1 ${items === 2 && 'md:grid-cols-2'}  ${
+      items === 3 && 'sm:grid-cols-3'
+    } ${items > 3 && 'md:grid-cols-3'} ${items >= 4 && 'lg:grid-cols-4'}`,
+    products: `grid-cols-2 ${items >= 3 && 'md:grid-cols-3'} ${
+      items >= 4 && 'lg:grid-cols-4'
+    }`,
+    auto: 'auto-cols-auto',
+    blog: `grid-cols-2 pt-24`,
+  };
+
+  const gaps = {
+    default: 'grid gap-2 gap-y-6 md:gap-4 lg:gap-6',
+    blog: 'grid gap-6',
+  };
+
+  const flows = {
+    row: 'grid-flow-row',
+    col: 'grid-flow-col',
+  };
+
+  const styles = clsx(flows[flow], gaps[gap], layouts[layout], className);
+
+  return <Component {...props} className={styles} />;
+}

examples/hydrogen/src/components/elements/Heading.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+
+import {missingClass, formatText} from '~/lib/utils';
+
+export function Heading({
+  as: Component = 'h2',
+  children,
+  className = '',
+  format,
+  size = 'heading',
+  width = 'default',
+  ...props
+}: {
+  as?: React.ElementType;
+  children: React.ReactNode;
+  format?: boolean;
+  size?: 'display' | 'heading' | 'lead' | 'copy';
+  width?: 'default' | 'narrow' | 'wide';
+} & React.HTMLAttributes<HTMLHeadingElement>) {
+  const sizes = {
+    display: 'font-bold text-display',
+    heading: 'font-bold text-heading',
+    lead: 'font-bold text-lead',
+    copy: 'font-medium text-copy',
+  };
+
+  const widths = {
+    default: 'max-w-prose',
+    narrow: 'max-w-prose-narrow',
+    wide: 'max-w-prose-wide',
+  };
+
+  const styles = clsx(
+    missingClass(className, 'whitespace-') && 'whitespace-pre-wrap',
+    missingClass(className, 'max-w-') && widths[width],
+    missingClass(className, 'font-') && sizes[size],
+    className,
+  );
+
+  return (
+    <Component {...props} className={styles}>
+      {format ? formatText(children) : children}
+    </Component>
+  );
+}

examples/hydrogen/src/components/elements/Icon.tsx

@@ -0,0 +1,236 @@
+import clsx from 'clsx';
+
+type IconProps = JSX.IntrinsicElements['svg'] & {
+  direction?: 'up' | 'right' | 'down' | 'left';
+};
+
+function Icon({
+  children,
+  className,
+  fill = 'currentColor',
+  stroke,
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      {...props}
+      fill={fill}
+      stroke={stroke}
+      className={clsx('w-5 h-5', className)}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function AccountIcon(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <title>Accounts</title>
+      <circle cx="20" cy="10.5" r="4.5" strokeWidth="2" />
+      <path
+        d="M20 19C13.4375 19 9.5 20.2857 9.5 28H30.5C30.5 20.2857 26.5625 19 20 19Z"
+        strokeWidth="2"
+      />
+    </Icon>
+  );
+}
+
+export function IconMenu(props: IconProps) {
+  return (
+    <Icon {...props} stroke={props.stroke || 'currentColor'}>
+      <title>Menu</title>
+      <line x1="3" y1="6.375" x2="17" y2="6.375" strokeWidth="1.25" />
+      <line x1="3" y1="10.375" x2="17" y2="10.375" strokeWidth="1.25" />
+      <line x1="3" y1="14.375" x2="17" y2="14.375" strokeWidth="1.25" />
+    </Icon>
+  );
+}
+
+export function IconClose(props: IconProps) {
+  return (
+    <Icon {...props} stroke={props.stroke || 'currentColor'}>
+      <title>Close</title>
+      <line
+        x1="4.44194"
+        y1="4.30806"
+        x2="15.7556"
+        y2="15.6218"
+        strokeWidth="1.25"
+      />
+      <line
+        y1="-0.625"
+        x2="16"
+        y2="-0.625"
+        transform="matrix(-0.707107 0.707107 0.707107 0.707107 16 4.75)"
+        strokeWidth="1.25"
+      />
+    </Icon>
+  );
+}
+
+export function IconArrow({direction = 'right'}: IconProps) {
+  let rotate;
+
+  switch (direction) {
+    case 'right':
+      rotate = 'rotate-0';
+      break;
+    case 'left':
+      rotate = 'rotate-180';
+      break;
+    case 'up':
+      rotate = '-rotate-90';
+      break;
+    case 'down':
+      rotate = 'rotate-90';
+      break;
+    default:
+      rotate = 'rotate-0';
+  }
+
+  return (
+    <Icon className={`w-5 h-5 ${rotate}`}>
+      <title>Arrow</title>
+      <path d="M7 3L14 10L7 17" strokeWidth="1.25" />
+    </Icon>
+  );
+}
+
+export function IconCaret({
+  direction = 'down',
+  stroke = 'currentColor',
+  ...props
+}: IconProps) {
+  let rotate;
+
+  switch (direction) {
+    case 'down':
+      rotate = 'rotate-0';
+      break;
+    case 'up':
+      rotate = 'rotate-180';
+      break;
+    case 'left':
+      rotate = '-rotate-90';
+      break;
+    case 'right':
+      rotate = 'rotate-90';
+      break;
+    default:
+      rotate = 'rotate-0';
+  }
+
+  return (
+    <Icon
+      {...props}
+      className={`w-5 h-5 transition ${rotate}`}
+      fill="transparent"
+      stroke={stroke}
+    >
+      <title>Caret</title>
+      <path d="M14 8L10 12L6 8" strokeWidth="1.25" />
+    </Icon>
+  );
+}
+
+export function IconSelect(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <title>Select</title>
+      <path d="M7 8.5L10 6.5L13 8.5" strokeWidth="1.25" />
+      <path d="M13 11.5L10 13.5L7 11.5" strokeWidth="1.25" />
+    </Icon>
+  );
+}
+
+export function IconBag(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <title>Bag</title>
+      <path
+        fillRule="evenodd"
+        d="M8.125 5a1.875 1.875 0 0 1 3.75 0v.375h-3.75V5Zm-1.25.375V5a3.125 3.125 0 1 1 6.25 0v.375h3.5V15A2.625 2.625 0 0 1 14 17.625H6A2.625 2.625 0 0 1 3.375 15V5.375h3.5ZM4.625 15V6.625h10.75V15c0 .76-.616 1.375-1.375 1.375H6c-.76 0-1.375-.616-1.375-1.375Z"
+      />
+    </Icon>
+  );
+}
+
+export function IconAccount(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <title>Account</title>
+      <path
+        fillRule="evenodd"
+        d="M9.9998 12.625c-1.9141 0-3.6628.698-5.0435 1.8611C3.895 13.2935 3.25 11.7221 3.25 10c0-3.728 3.022-6.75 6.75-6.75 3.7279 0 6.75 3.022 6.75 6.75 0 1.7222-.645 3.2937-1.7065 4.4863-1.3807-1.1632-3.1295-1.8613-5.0437-1.8613ZM10 18c-2.3556 0-4.4734-1.0181-5.9374-2.6382C2.7806 13.9431 2 12.0627 2 10c0-4.4183 3.5817-8 8-8s8 3.5817 8 8-3.5817 8-8 8Zm0-12.5c-1.567 0-2.75 1.394-2.75 3s1.183 3 2.75 3 2.75-1.394 2.75-3-1.183-3-2.75-3Z"
+      />
+    </Icon>
+  );
+}
+
+export function IconHelp(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <title>Help</title>
+      <path d="M3.375 10a6.625 6.625 0 1 1 13.25 0 6.625 6.625 0 0 1-13.25 0ZM10 2.125a7.875 7.875 0 1 0 0 15.75 7.875 7.875 0 0 0 0-15.75Zm.699 10.507H9.236V14h1.463v-1.368ZM7.675 7.576A3.256 3.256 0 0 0 7.5 8.67h1.245c0-.496.105-.89.316-1.182.218-.299.553-.448 1.005-.448a1 1 0 0 1 .327.065c.124.044.24.113.35.208.108.095.2.223.272.383.08.154.12.34.12.558a1.3 1.3 0 0 1-.076.471c-.044.131-.11.252-.197.361-.08.102-.174.197-.283.285-.102.087-.212.182-.328.284a3.157 3.157 0 0 0-.382.383c-.102.124-.19.27-.262.438a2.476 2.476 0 0 0-.164.591 6.333 6.333 0 0 0-.043.81h1.179c0-.263.021-.485.065-.668a1.65 1.65 0 0 1 .207-.47c.088-.139.19-.263.306-.372.117-.11.244-.223.382-.34l.35-.306c.116-.11.218-.23.305-.361.095-.139.168-.3.219-.482.058-.19.087-.412.087-.667 0-.35-.062-.664-.186-.942a1.881 1.881 0 0 0-.513-.689 2.07 2.07 0 0 0-.753-.427A2.721 2.721 0 0 0 10.12 6c-.4 0-.764.066-1.092.197a2.36 2.36 0 0 0-.83.536c-.225.234-.4.515-.523.843Z" />
+    </Icon>
+  );
+}
+
+export function IconSearch(props: IconProps) {
+  return (
+    <Icon {...props}>
+      <title>Search</title>
+      <path
+        fillRule="evenodd"
+        d="M13.3 8.52a4.77 4.77 0 1 1-9.55 0 4.77 4.77 0 0 1 9.55 0Zm-.98 4.68a6.02 6.02 0 1 1 .88-.88l4.3 4.3-.89.88-4.3-4.3Z"
+      />
+    </Icon>
+  );
+}
+
+export function IconCheck({
+  stroke = 'currentColor',
+  ...props
+}: React.ComponentProps<typeof Icon>) {
+  return (
+    <Icon {...props} fill="transparent" stroke={stroke}>
+      <title>Check</title>
+      <circle cx="10" cy="10" r="7.25" strokeWidth="1.25" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="m7.04 10.37 2.42 2.41 3.5-5.56"
+      />
+    </Icon>
+  );
+}
+
+export function IconRemove(props: IconProps) {
+  return (
+    <Icon {...props} fill="transparent" stroke={props.stroke || 'currentColor'}>
+      <title>Remove</title>
+      <path
+        d="M4 6H16"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M8.5 9V14" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M11.5 9V14" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M5.5 6L6 17H14L14.5 6"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 6L8 5C8 4 8.75 3 10 3C11.25 3 12 4 12 5V6"
+        strokeWidth="1.25"
+      />
+    </Icon>
+  );
+}

examples/hydrogen/src/components/elements/Input.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+export function Input({
+  className = '',
+  type,
+  variant,
+  ...props
+}: {
+  className?: string;
+  type?: string;
+  variant: 'search' | 'minisearch';
+  [key: string]: any;
+}) {
+  const variants = {
+    search:
+      'bg-transparent px-0 py-2 text-heading w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-primary/10 focus:border-primary/90',
+    minisearch:
+      'bg-transparent hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit',
+  };
+
+  const styles = clsx(variants[variant], className);
+
+  return <input type={type} {...props} className={styles} />;
+}

examples/hydrogen/src/components/elements/LogoutButton.client.tsx

@@ -0,0 +1,20 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onClick?: () => void;
+}
+
+export function LogoutButton(props: ButtonProps) {
+  const logout = () => {
+    fetch('/account/logout', {method: 'POST'}).then(() => {
+      if (typeof props?.onClick === 'function') {
+        props.onClick();
+      }
+      window.location.href = '/';
+    });
+  };
+
+  return (
+    <button className="text-primary/50" {...props} onClick={logout}>
+      Logout
+    </button>
+  );
+}

examples/hydrogen/src/components/elements/Section.tsx

@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+
+import {Heading} from '~/components';
+import {missingClass} from '~/lib/utils';
+
+export function Section({
+  as: Component = 'section',
+  children,
+  className,
+  divider = 'none',
+  display = 'grid',
+  heading,
+  padding = 'all',
+  ...props
+}: {
+  as?: React.ElementType;
+  children?: React.ReactNode;
+  className?: string;
+  divider?: 'none' | 'top' | 'bottom' | 'both';
+  display?: 'grid' | 'flex';
+  heading?: string;
+  padding?: 'x' | 'y' | 'swimlane' | 'all';
+  [key: string]: any;
+}) {
+  const paddings = {
+    x: 'px-6 md:px-8 lg:px-12',
+    y: 'py-6 md:py-8 lg:py-12',
+    swimlane: 'pt-4 md:pt-8 lg:pt-12 md:pb-4 lg:pb-8',
+    all: 'p-6 md:p-8 lg:p-12',
+  };
+
+  const dividers = {
+    none: 'border-none',
+    top: 'border-t border-primary/05',
+    bottom: 'border-b border-primary/05',
+    both: 'border-y border-primary/05',
+  };
+
+  const displays = {
+    flex: 'flex',
+    grid: 'grid',
+  };
+
+  const styles = clsx(
+    'w-full gap-4 md:gap-8',
+    displays[display],
+    missingClass(className, '\\mp[xy]?-') && paddings[padding],
+    dividers[divider],
+    className,
+  );
+
+  return (
+    <Component {...props} className={styles}>
+      {heading && (
+        <Heading size="lead" className={padding === 'y' ? paddings['x'] : ''}>
+          {heading}
+        </Heading>
+      )}
+      {children}
+    </Component>
+  );
+}

examples/hydrogen/src/components/elements/Skeleton.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+/**
+ * A shared component and Suspense call that's used in `App.server.jsx` to let your app wait for code to load while declaring a loading state
+ */
+export function Skeleton({
+  as: Component = 'div',
+  width,
+  height,
+  className,
+  ...props
+}: {
+  as?: React.ElementType;
+  width?: string;
+  height?: string;
+  className?: string;
+  [key: string]: any;
+}) {
+  const styles = clsx('rounded bg-primary/10', className);
+
+  return (
+    <Component {...props} width={width} height={height} className={styles} />
+  );
+}

examples/hydrogen/src/components/elements/Text.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+
+import {missingClass, formatText} from '~/lib/utils';
+
+export function Text({
+  as: Component = 'span',
+  className,
+  color = 'default',
+  format,
+  size = 'copy',
+  width = 'default',
+  children,
+  ...props
+}: {
+  as?: React.ElementType;
+  className?: string;
+  color?: 'default' | 'primary' | 'subtle' | 'notice' | 'contrast';
+  format?: boolean;
+  size?: 'lead' | 'copy' | 'fine';
+  width?: 'default' | 'narrow' | 'wide';
+  children: React.ReactNode;
+  [key: string]: any;
+}) {
+  const colors: Record<string, string> = {
+    default: 'inherit',
+    primary: 'text-primary/90',
+    subtle: 'text-primary/50',
+    notice: 'text-notice',
+    contrast: 'text-contrast/90',
+  };
+
+  const sizes: Record<string, string> = {
+    lead: 'text-lead font-medium',
+    copy: 'text-copy',
+    fine: 'text-fine subpixel-antialiased',
+  };
+
+  const widths: Record<string, string> = {
+    default: 'max-w-prose',
+    narrow: 'max-w-prose-narrow',
+    wide: 'max-w-prose-wide',
+  };
+
+  const styles = clsx(
+    missingClass(className, 'max-w-') && widths[width],
+    missingClass(className, 'whitespace-') && 'whitespace-pre-wrap',
+    missingClass(className, 'text-') && colors[color],
+    sizes[size],
+    className,
+  );
+
+  return (
+    <Component {...props} className={styles}>
+      {format ? formatText(children) : children}
+    </Component>
+  );
+}

examples/hydrogen/src/components/elements/index.ts

@@ -0,0 +1,9 @@
+export * from './Icon';
+export {Button} from './Button';
+export {Grid} from './Grid';
+export {Heading} from './Heading';
+export {Input} from './Input';
+export {LogoutButton} from './LogoutButton.client';
+export {Section} from './Section';
+export {Skeleton} from './Skeleton';
+export {Text} from './Text';

examples/hydrogen/src/components/global/CartDrawer.client.tsx

@@ -0,0 +1,18 @@
+import {CartDetails} from '~/components/cart';
+import {Drawer} from './Drawer.client';
+
+export function CartDrawer({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  return (
+    <Drawer open={isOpen} onClose={onClose} heading="Cart" openFrom="right">
+      <div className="grid">
+        <CartDetails layout="drawer" onClose={onClose} />
+      </div>
+    </Drawer>
+  );
+}

examples/hydrogen/src/components/global/Drawer.client.tsx

@@ -0,0 +1,117 @@
+import {Fragment, useState} from 'react';
+// @ts-expect-error @headlessui/react incompatibility with node16 resolution
+import {Dialog, Transition} from '@headlessui/react';
+
+import {Heading, IconClose} from '~/components';
+
+/**
+ * Drawer component that opens on user click.
+ * @param heading - string. Shown at the top of the drawer.
+ * @param open - boolean state. if true opens the drawer.
+ * @param onClose - function should set the open state.
+ * @param openFrom - right, left
+ * @param children - react children node.
+ */
+function Drawer({
+  heading,
+  open,
+  onClose,
+  openFrom = 'right',
+  children,
+}: {
+  heading?: string;
+  open: boolean;
+  onClose: () => void;
+  openFrom: 'right' | 'left';
+  children: React.ReactNode;
+}) {
+  const offScreen = {
+    right: 'translate-x-full',
+    left: '-translate-x-full',
+  };
+
+  return (
+    <Transition appear show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 left-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0">
+          <div className="absolute inset-0 overflow-hidden">
+            <div
+              className={`fixed inset-y-0 flex max-w-full ${
+                openFrom === 'right' ? 'right-0' : ''
+              }`}
+            >
+              <Transition.Child
+                as={Fragment}
+                enter="transform transition ease-in-out duration-300"
+                enterFrom={offScreen[openFrom]}
+                enterTo="translate-x-0"
+                leave="transform transition ease-in-out duration-300"
+                leaveFrom="translate-x-0"
+                leaveTo={offScreen[openFrom]}
+              >
+                <Dialog.Panel className="w-screen h-screen max-w-lg text-left align-middle transition-all transform shadow-xl bg-contrast">
+                  <header
+                    className={`sticky top-0 flex items-center px-6 h-nav sm:px-8 md:px-12 ${
+                      heading ? 'justify-between' : 'justify-end'
+                    }`}
+                  >
+                    {heading !== null && (
+                      <Dialog.Title>
+                        <Heading as="span" size="lead" id="cart-contents">
+                          {heading}
+                        </Heading>
+                      </Dialog.Title>
+                    )}
+                    <button
+                      type="button"
+                      className="p-4 -m-4 transition text-primary hover:text-primary/50"
+                      onClick={onClose}
+                    >
+                      <IconClose aria-label="Close panel" />
+                    </button>
+                  </header>
+                  {children}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}
+
+/* Use for associating arialabelledby with the title*/
+Drawer.Title = Dialog.Title;
+
+export {Drawer};
+
+export function useDrawer(openDefault = false) {
+  const [isOpen, setIsOpen] = useState(openDefault);
+
+  function openDrawer() {
+    setIsOpen(true);
+  }
+
+  function closeDrawer() {
+    setIsOpen(false);
+  }
+
+  return {
+    isOpen,
+    openDrawer,
+    closeDrawer,
+  };
+}

examples/hydrogen/src/components/global/Footer.server.tsx

@@ -0,0 +1,46 @@
+import {useUrl} from '@shopify/hydrogen';
+
+import {Section, Heading, FooterMenu, CountrySelector} from '~/components';
+import type {EnhancedMenu} from '~/lib/utils';
+
+/**
+ * A server component that specifies the content of the footer on the website
+ */
+export function Footer({menu}: {menu?: EnhancedMenu}) {
+  const {pathname} = useUrl();
+
+  const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
+  const countryCode = localeMatch ? localeMatch[1] : null;
+
+  const isHome = pathname === `/${countryCode ? countryCode + '/' : ''}`;
+  const itemsCount = menu
+    ? menu?.items?.length + 1 > 4
+      ? 4
+      : menu?.items?.length + 1
+    : [];
+
+  return (
+    <Section
+      divider={isHome ? 'none' : 'top'}
+      as="footer"
+      role="contentinfo"
+      className={`grid min-h-[25rem] items-start grid-flow-row w-full gap-6 py-8 px-6 md:px-8 lg:px-12 
+        border-b md:gap-8 lg:gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-${itemsCount}
+        bg-primary dark:bg-contrast dark:text-primary text-contrast overflow-hidden`}
+    >
+      <FooterMenu menu={menu} />
+      <section className="grid gap-4 w-full md:max-w-[335px] md:ml-auto">
+        <Heading size="lead" className="cursor-default" as="h3">
+          Country
+        </Heading>
+        <CountrySelector />
+      </section>
+      <div
+        className={`self-end pt-8 opacity-50 md:col-span-2 lg:col-span-${itemsCount}`}
+      >
+        &copy; {new Date().getFullYear()} / Shopify, Inc. Hydrogen is an MIT
+        Licensed Open Source project. This website is carbon&nbsp;neutral.
+      </div>
+    </Section>
+  );
+}

examples/hydrogen/src/components/global/FooterMenu.client.tsx

@@ -0,0 +1,63 @@
+// @ts-expect-error @headlessui/react incompatibility with node16 resolution
+import {Disclosure} from '@headlessui/react';
+import {Link} from '@shopify/hydrogen';
+
+import {Heading, IconCaret} from '~/components';
+import type {EnhancedMenu, EnhancedMenuItem} from '~/lib/utils';
+
+/**
+ * A server component that specifies the content of the footer on the website
+ */
+export function FooterMenu({menu}: {menu?: EnhancedMenu}) {
+  const styles = {
+    section: 'grid gap-4',
+    nav: 'grid gap-2 pb-6',
+  };
+
+  return (
+    <>
+      {(menu?.items || []).map((item: EnhancedMenuItem) => (
+        <section key={item.id} className={styles.section}>
+          <Disclosure>
+            {/* @ts-expect-error @headlessui/react incompatibility with node16 resolution */}
+            {({open}) => (
+              <>
+                <Disclosure.Button className="text-left md:cursor-default">
+                  <Heading className="flex justify-between" size="lead" as="h3">
+                    {item.title}
+                    {item?.items?.length > 0 && (
+                      <span className="md:hidden">
+                        <IconCaret direction={open ? 'up' : 'down'} />
+                      </span>
+                    )}
+                  </Heading>
+                </Disclosure.Button>
+                {item?.items?.length > 0 && (
+                  <div
+                    className={`${
+                      open ? `max-h-48 h-fit` : `max-h-0 md:max-h-fit`
+                    } overflow-hidden transition-all duration-300`}
+                  >
+                    <Disclosure.Panel static>
+                      <nav className={styles.nav}>
+                        {item.items.map((subItem) => (
+                          <Link
+                            key={subItem.id}
+                            to={subItem.to}
+                            target={subItem.target}
+                          >
+                            {subItem.title}
+                          </Link>
+                        ))}
+                      </nav>
+                    </Disclosure.Panel>
+                  </div>
+                )}
+              </>
+            )}
+          </Disclosure>
+        </section>
+      ))}{' '}
+    </>
+  );
+}

examples/hydrogen/src/components/global/Header.client.tsx

@@ -0,0 +1,230 @@
+import {Link, useUrl, useCart} from '@shopify/hydrogen';
+import {useWindowScroll} from 'react-use';
+
+import {
+  Heading,
+  IconAccount,
+  IconBag,
+  IconMenu,
+  IconSearch,
+  Input,
+} from '~/components';
+
+import {CartDrawer} from './CartDrawer.client';
+import {MenuDrawer} from './MenuDrawer.client';
+import {useDrawer} from './Drawer.client';
+
+import type {EnhancedMenu} from '~/lib/utils';
+
+/**
+ * A client component that specifies the content of the header on the website
+ */
+export function Header({title, menu}: {title: string; menu?: EnhancedMenu}) {
+  const {pathname} = useUrl();
+
+  const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
+  const countryCode = localeMatch ? localeMatch[1] : undefined;
+
+  const isHome = pathname === `/${countryCode ? countryCode + '/' : ''}`;
+
+  const {
+    isOpen: isCartOpen,
+    openDrawer: openCart,
+    closeDrawer: closeCart,
+  } = useDrawer();
+
+  const {
+    isOpen: isMenuOpen,
+    openDrawer: openMenu,
+    closeDrawer: closeMenu,
+  } = useDrawer();
+
+  return (
+    <>
+      <CartDrawer isOpen={isCartOpen} onClose={closeCart} />
+      <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu!} />
+      <DesktopHeader
+        countryCode={countryCode}
+        isHome={isHome}
+        title={title}
+        menu={menu}
+        openCart={openCart}
+      />
+      <MobileHeader
+        countryCode={countryCode}
+        isHome={isHome}
+        title={title}
+        openCart={openCart}
+        openMenu={openMenu}
+      />
+    </>
+  );
+}
+
+function MobileHeader({
+  countryCode,
+  title,
+  isHome,
+  openCart,
+  openMenu,
+}: {
+  countryCode?: string | null;
+  title: string;
+  isHome: boolean;
+  openCart: () => void;
+  openMenu: () => void;
+}) {
+  const {y} = useWindowScroll();
+
+  const styles = {
+    button: 'relative flex items-center justify-center w-8 h-8',
+    container: `${
+      isHome
+        ? 'bg-primary/80 dark:bg-contrast/60 text-contrast dark:text-primary shadow-darkHeader'
+        : 'bg-contrast/80 text-primary'
+    } ${
+      y > 50 && !isHome ? 'shadow-lightHeader ' : ''
+    }flex lg:hidden items-center h-nav sticky backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-4 px-4 md:px-8`,
+  };
+
+  return (
+    <header role="banner" className={styles.container}>
+      <div className="flex items-center justify-start w-full gap-4">
+        <button onClick={openMenu} className={styles.button}>
+          <IconMenu />
+        </button>
+        <form
+          action={`/${countryCode ? countryCode + '/' : ''}search`}
+          className="items-center gap-2 sm:flex"
+        >
+          <button type="submit" className={styles.button}>
+            <IconSearch />
+          </button>
+          <Input
+            className={
+              isHome
+                ? 'focus:border-contrast/20 dark:focus:border-primary/20'
+                : 'focus:border-primary/20'
+            }
+            type="search"
+            variant="minisearch"
+            placeholder="Search"
+            name="q"
+          />
+        </form>
+      </div>
+
+      <Link
+        className="flex items-center self-stretch leading-[3rem] md:leading-[4rem] justify-center flex-grow w-full h-full"
+        to="/"
+      >
+        <Heading className="font-bold text-center" as={isHome ? 'h1' : 'h2'}>
+          {title}
+        </Heading>
+      </Link>
+
+      <div className="flex items-center justify-end w-full gap-4">
+        <Link to={'/account'} className={styles.button}>
+          <IconAccount />
+        </Link>
+        <button onClick={openCart} className={styles.button}>
+          <IconBag />
+          <CartBadge dark={isHome} />
+        </button>
+      </div>
+    </header>
+  );
+}
+
+function DesktopHeader({
+  countryCode,
+  isHome,
+  menu,
+  openCart,
+  title,
+}: {
+  countryCode?: string | null;
+  isHome: boolean;
+  openCart: () => void;
+  menu?: EnhancedMenu;
+  title: string;
+}) {
+  const {y} = useWindowScroll();
+
+  const styles = {
+    button:
+      'relative flex items-center justify-center w-8 h-8 focus:ring-primary/5',
+    container: `${
+      isHome
+        ? 'bg-primary/80 dark:bg-contrast/60 text-contrast dark:text-primary shadow-darkHeader'
+        : 'bg-contrast/80 text-primary'
+    } ${
+      y > 50 && !isHome ? 'shadow-lightHeader ' : ''
+    }hidden h-nav lg:flex items-center sticky transition duration-300 backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-8 px-12 py-8`,
+  };
+
+  return (
+    <header role="banner" className={styles.container}>
+      <div className="flex gap-12">
+        <Link className={`font-bold`} to="/">
+          {title}
+        </Link>
+        <nav className="flex gap-8">
+          {/* Top level menu items */}
+          {(menu?.items || []).map((item) => (
+            <Link key={item.id} to={item.to} target={item.target}>
+              {item.title}
+            </Link>
+          ))}
+        </nav>
+      </div>
+      <div className="flex items-center gap-1">
+        <form
+          action={`/${countryCode ? countryCode + '/' : ''}search`}
+          className="flex items-center gap-2"
+        >
+          <Input
+            className={
+              isHome
+                ? 'focus:border-contrast/20 dark:focus:border-primary/20'
+                : 'focus:border-primary/20'
+            }
+            type="search"
+            variant="minisearch"
+            placeholder="Search"
+            name="q"
+          />
+          <button type="submit" className={styles.button}>
+            <IconSearch />
+          </button>
+        </form>
+        <Link to={'/account'} className={styles.button}>
+          <IconAccount />
+        </Link>
+        <button onClick={openCart} className={styles.button}>
+          <IconBag />
+          <CartBadge dark={isHome} />
+        </button>
+      </div>
+    </header>
+  );
+}
+
+function CartBadge({dark}: {dark: boolean}) {
+  const {totalQuantity} = useCart();
+
+  if (totalQuantity < 1) {
+    return null;
+  }
+  return (
+    <div
+      className={`${
+        dark
+          ? 'text-primary bg-contrast dark:text-contrast dark:bg-primary'
+          : 'text-contrast bg-primary'
+      } absolute bottom-1 right-1 text-[0.625rem] font-medium subpixel-antialiased h-3 min-w-[0.75rem] flex items-center justify-center leading-none text-center rounded-full w-auto px-[0.125rem] pb-px`}
+    >
+      <span>{totalQuantity}</span>
+    </div>
+  );
+}

examples/hydrogen/src/components/global/Layout.server.tsx

@@ -0,0 +1,129 @@
+import {Suspense} from 'react';
+import {useLocalization, useShopQuery, CacheLong, gql} from '@shopify/hydrogen';
+import type {Menu, Shop} from '@shopify/hydrogen/storefront-api-types';
+
+import {Header} from '~/components';
+import {Footer} from '~/components/index.server';
+import {parseMenu} from '~/lib/utils';
+
+const HEADER_MENU_HANDLE = 'main-menu';
+const FOOTER_MENU_HANDLE = 'footer';
+
+const SHOP_NAME_FALLBACK = 'Hydrogen';
+
+/**
+ * A server component that defines a structure and organization of a page that can be used in different parts of the Hydrogen app
+ */
+export function Layout({children}: {children: React.ReactNode}) {
+  return (
+    <>
+      <div className="flex flex-col min-h-screen">
+        <div className="">
+          <a href="#mainContent" className="sr-only">
+            Skip to content
+          </a>
+        </div>
+        <Suspense fallback={<Header title={SHOP_NAME_FALLBACK} />}>
+          <HeaderWithMenu />
+        </Suspense>
+        <main role="main" id="mainContent" className="flex-grow">
+          {children}
+        </main>
+      </div>
+      <Suspense fallback={<Footer />}>
+        <FooterWithMenu />
+      </Suspense>
+    </>
+  );
+}
+
+function HeaderWithMenu() {
+  const {shopName, headerMenu} = useLayoutQuery();
+  return <Header title={shopName} menu={headerMenu} />;
+}
+
+function FooterWithMenu() {
+  const {footerMenu} = useLayoutQuery();
+  return <Footer menu={footerMenu} />;
+}
+
+function useLayoutQuery() {
+  const {
+    language: {isoCode: languageCode},
+  } = useLocalization();
+
+  const {data} = useShopQuery<{
+    shop: Shop;
+    headerMenu: Menu;
+    footerMenu: Menu;
+  }>({
+    query: SHOP_QUERY,
+    variables: {
+      language: languageCode,
+      headerMenuHandle: HEADER_MENU_HANDLE,
+      footerMenuHandle: FOOTER_MENU_HANDLE,
+    },
+    cache: CacheLong(),
+    preload: '*',
+  });
+
+  const shopName = data ? data.shop.name : SHOP_NAME_FALLBACK;
+
+  /*
+    Modify specific links/routes (optional)
+    @see: https://shopify.dev/api/storefront/unstable/enums/MenuItemType
+    e.g here we map:
+      - /blogs/news -> /news
+      - /blog/news/blog-post -> /news/blog-post
+      - /collections/all -> /products
+  */
+  const customPrefixes = {BLOG: '', CATALOG: 'products'};
+
+  const headerMenu = data?.headerMenu
+    ? parseMenu(data.headerMenu, customPrefixes)
+    : undefined;
+
+  const footerMenu = data?.footerMenu
+    ? parseMenu(data.footerMenu, customPrefixes)
+    : undefined;
+
+  return {footerMenu, headerMenu, shopName};
+}
+
+const SHOP_QUERY = gql`
+  fragment MenuItem on MenuItem {
+    id
+    resourceId
+    tags
+    title
+    type
+    url
+  }
+  query layoutMenus(
+    $language: LanguageCode
+    $headerMenuHandle: String!
+    $footerMenuHandle: String!
+  ) @inContext(language: $language) {
+    shop {
+      name
+    }
+    headerMenu: menu(handle: $headerMenuHandle) {
+      id
+      items {
+        ...MenuItem
+        items {
+          ...MenuItem
+        }
+      }
+    }
+    footerMenu: menu(handle: $footerMenuHandle) {
+      id
+      items {
+        ...MenuItem
+        items {
+          ...MenuItem
+        }
+      }
+    }
+  }
+`;

examples/hydrogen/src/components/global/MenuDrawer.client.tsx

@@ -0,0 +1,43 @@
+import {EnhancedMenu} from '~/lib/utils';
+import {Text} from '~/components';
+import {Drawer} from './Drawer.client';
+import {Link} from '@shopify/hydrogen';
+
+export function MenuDrawer({
+  isOpen,
+  onClose,
+  menu,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  menu: EnhancedMenu;
+}) {
+  return (
+    <Drawer open={isOpen} onClose={onClose} openFrom="left" heading="Menu">
+      <div className="grid">
+        <MenuMobileNav menu={menu} onClose={onClose} />
+      </div>
+    </Drawer>
+  );
+}
+
+function MenuMobileNav({
+  menu,
+  onClose,
+}: {
+  menu: EnhancedMenu;
+  onClose: () => void;
+}) {
+  return (
+    <nav className="grid gap-4 p-6 sm:gap-6 sm:px-12 sm:py-8">
+      {/* Top level menu items */}
+      {(menu?.items || []).map((item) => (
+        <Link key={item.id} to={item.to} target={item.target} onClick={onClose}>
+          <Text as="span" size="copy">
+            {item.title}
+          </Text>
+        </Link>
+      ))}
+    </nav>
+  );
+}

examples/hydrogen/src/components/global/Modal.client.tsx

@@ -0,0 +1,43 @@
+import {IconClose} from '~/components';
+
+export function Modal({
+  children,
+  close,
+}: {
+  children: React.ReactNode;
+  close: () => void;
+}) {
+  return (
+    <div
+      className="relative z-50"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+      id="modal-bg"
+    >
+      <div className="fixed inset-0 transition-opacity bg-opacity-75 bg-primary/40"></div>
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
+          <div
+            className="relative flex-1 px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform rounded shadow-xl bg-contrast sm:my-12 sm:flex-none sm:w-full sm:max-w-sm sm:p-6"
+            role="button"
+            onClick={(e) => e.stopPropagation()}
+            onKeyPress={(e) => e.stopPropagation()}
+            tabIndex={0}
+          >
+            <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+              <button
+                type="button"
+                className="p-4 -m-4 transition text-primary hover:text-primary/50"
+                onClick={close}
+              >
+                <IconClose aria-label="Close panel" />
+              </button>
+            </div>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/hydrogen/src/components/global/NotFound.server.tsx

@@ -0,0 +1,105 @@
+import {
+  gql,
+  HydrogenResponse,
+  useLocalization,
+  useShopQuery,
+} from '@shopify/hydrogen';
+
+import {Suspense} from 'react';
+import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
+import {Button, FeaturedCollections, PageHeader, Text} from '~/components';
+import {ProductSwimlane, Layout} from '~/components/index.server';
+import type {
+  CollectionConnection,
+  ProductConnection,
+} from '@shopify/hydrogen/storefront-api-types';
+
+export function NotFound({
+  response,
+  type = 'page',
+}: {
+  response?: HydrogenResponse;
+  type?: string;
+}) {
+  if (response) {
+    response.status = 404;
+    response.statusText = 'Not found';
+  }
+
+  const heading = `We’ve lost this ${type}`;
+  const description = `We couldn’t find the ${type} you’re looking for. Try checking the URL or heading back to the home page.`;
+
+  return (
+    <Layout>
+      <PageHeader heading={heading}>
+        <Text width="narrow" as="p">
+          {description}
+        </Text>
+        <Button width="auto" variant="secondary" to={'/'}>
+          Take me to the home page
+        </Button>
+      </PageHeader>
+      <Suspense>
+        <FeaturedSection />
+      </Suspense>
+    </Layout>
+  );
+}
+
+function FeaturedSection() {
+  const {
+    language: {isoCode: languageCode},
+    country: {isoCode: countryCode},
+  } = useLocalization();
+
+  const {data} = useShopQuery<{
+    featuredCollections: CollectionConnection;
+    featuredProducts: ProductConnection;
+  }>({
+    query: NOT_FOUND_QUERY,
+    variables: {
+      language: languageCode,
+      country: countryCode,
+    },
+    preload: true,
+  });
+
+  const {featuredCollections, featuredProducts} = data;
+
+  return (
+    <>
+      {featuredCollections.nodes.length < 2 && (
+        <FeaturedCollections
+          title="Popular Collections"
+          data={featuredCollections.nodes}
+        />
+      )}
+      <ProductSwimlane data={featuredProducts.nodes} />
+    </>
+  );
+}
+
+const NOT_FOUND_QUERY = gql`
+  ${PRODUCT_CARD_FRAGMENT}
+  query homepage($country: CountryCode, $language: LanguageCode)
+  @inContext(country: $country, language: $language) {
+    featuredCollections: collections(first: 3, sortKey: UPDATED_AT) {
+      nodes {
+        id
+        title
+        handle
+        image {
+          altText
+          width
+          height
+          url
+        }
+      }
+    }
+    featuredProducts: products(first: 12) {
+      nodes {
+        ...ProductCard
+      }
+    }
+  }
+`;

examples/hydrogen/src/components/global/PageHeader.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+
+import {Heading} from '~/components';
+
+export function PageHeader({
+  children,
+  className,
+  heading,
+  variant = 'default',
+  ...props
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  heading?: string;
+  variant?: 'default' | 'blogPost' | 'allCollections';
+  [key: string]: any;
+}) {
+  const variants: Record<string, string> = {
+    default: 'grid w-full gap-8 p-6 py-8 md:p-8 lg:p-12 justify-items-start',
+    blogPost:
+      'grid md:text-center w-full gap-4 p-6 py-8 md:p-8 lg:p-12 md:justify-items-center',
+    allCollections:
+      'flex justify-between items-baseline gap-8 p-6 md:p-8 lg:p-12',
+  };
+
+  const styles = clsx(variants[variant], className);
+
+  return (
+    <header {...props} className={styles}>
+      {heading && (
+        <Heading as="h1" width="narrow" size="heading" className="inline-block">
+          {heading}
+        </Heading>
+      )}
+      {children}
+    </header>
+  );
+}

examples/hydrogen/src/components/global/index.server.ts

@@ -0,0 +1,3 @@
+export {Footer} from './Footer.server';
+export {Layout} from './Layout.server';
+export {NotFound} from './NotFound.server';

examples/hydrogen/src/components/global/index.ts

@@ -0,0 +1,5 @@
+export {Drawer, useDrawer} from './Drawer.client';
+export {FooterMenu} from './FooterMenu.client';
+export {Header} from './Header.client';
+export {Modal} from './Modal.client';
+export {PageHeader} from './PageHeader';

examples/hydrogen/src/components/index.server.ts

@@ -0,0 +1,5 @@
+export * from './cards/index.server';
+export * from './global/index.server';
+export * from './sections/index.server';
+export * from './search/index.server';
+export {DefaultSeo} from './DefaultSeo.server';

examples/hydrogen/src/components/index.ts

@@ -0,0 +1,10 @@
+export * from './account/index';
+export * from './cards/index';
+export * from './cart/index';
+export * from './elements/index';
+export * from './global/index';
+export * from './product/index';
+export * from './sections/index';
+export {CountrySelector} from './CountrySelector.client';
+export {CustomFont} from './CustomFont.client';
+export {HeaderFallback} from './HeaderFallback';

examples/hydrogen/src/components/product/ProductDetail.client.tsx

@@ -0,0 +1,54 @@
+// @ts-expect-error @headlessui/react incompatibility with node16 resolution
+import {Disclosure} from '@headlessui/react';
+import {Link} from '@shopify/hydrogen';
+
+import {Text, IconClose} from '~/components';
+
+export function ProductDetail({
+  title,
+  content,
+  learnMore,
+}: {
+  title: string;
+  content: string;
+  learnMore?: string;
+}) {
+  return (
+    <Disclosure key={title} as="div" className="grid w-full gap-2">
+      {/* @ts-expect-error @headlessui/react incompatibility with node16 resolution */}
+      {({open}) => (
+        <>
+          <Disclosure.Button className="text-left">
+            <div className="flex justify-between">
+              <Text size="lead" as="h4">
+                {title}
+              </Text>
+              <IconClose
+                className={`${
+                  open ? '' : 'rotate-[45deg]'
+                } transition-transform transform-gpu duration-200`}
+              />
+            </div>
+          </Disclosure.Button>
+
+          <Disclosure.Panel className={'pb-4 pt-2 grid gap-2'}>
+            <div
+              className="prose dark:prose-invert"
+              dangerouslySetInnerHTML={{__html: content}}
+            />
+            {learnMore && (
+              <div className="">
+                <Link
+                  className="pb-px border-b border-primary/30 text-primary/50"
+                  to={learnMore}
+                >
+                  Learn more
+                </Link>
+              </div>
+            )}
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
+}

examples/hydrogen/src/components/product/ProductForm.client.tsx

@@ -0,0 +1,144 @@
+import {useEffect, useCallback, useState} from 'react';
+
+import {
+  useProductOptions,
+  isBrowser,
+  useUrl,
+  AddToCartButton,
+  Money,
+  OptionWithValues,
+  ShopPayButton,
+} from '@shopify/hydrogen';
+
+import {Heading, Text, Button, ProductOptions} from '~/components';
+
+export function ProductForm() {
+  const {pathname, search} = useUrl();
+  const [params, setParams] = useState(new URLSearchParams(search));
+
+  const {options, setSelectedOption, selectedOptions, selectedVariant} =
+    useProductOptions();
+
+  const isOutOfStock = !selectedVariant?.availableForSale || false;
+  const isOnSale =
+    selectedVariant?.priceV2?.amount <
+      selectedVariant?.compareAtPriceV2?.amount || false;
+
+  useEffect(() => {
+    if (params || !search) return;
+    setParams(new URLSearchParams(search));
+  }, [params, search]);
+
+  useEffect(() => {
+    (options as OptionWithValues[]).map(({name, values}) => {
+      if (!params) return;
+      const currentValue = params.get(name.toLowerCase()) || null;
+      if (currentValue) {
+        const matchedValue = values.filter(
+          (value) => encodeURIComponent(value.toLowerCase()) === currentValue,
+        );
+        setSelectedOption(name, matchedValue[0]);
+      } else {
+        params.set(
+          encodeURIComponent(name.toLowerCase()),
+          encodeURIComponent(selectedOptions![name]!.toLowerCase()),
+        ),
+          window.history.replaceState(
+            null,
+            '',
+            `${pathname}?${params.toString()}`,
+          );
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleChange = useCallback(
+    (name: string, value: string) => {
+      setSelectedOption(name, value);
+      if (!params) return;
+      params.set(
+        encodeURIComponent(name.toLowerCase()),
+        encodeURIComponent(value.toLowerCase()),
+      );
+      if (isBrowser()) {
+        window.history.replaceState(
+          null,
+          '',
+          `${pathname}?${params.toString()}`,
+        );
+      }
+    },
+    [setSelectedOption, params, pathname],
+  );
+
+  return (
+    <form className="grid gap-10">
+      {
+        <div className="grid gap-4">
+          {(options as OptionWithValues[]).map(({name, values}) => {
+            if (values.length === 1) {
+              return null;
+            }
+            return (
+              <div
+                key={name}
+                className="flex flex-col flex-wrap mb-4 gap-y-2 last:mb-0"
+              >
+                <Heading as="legend" size="lead" className="min-w-[4rem]">
+                  {name}
+                </Heading>
+                <div className="flex flex-wrap items-baseline gap-4">
+                  <ProductOptions
+                    name={name}
+                    handleChange={handleChange}
+                    values={values}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      }
+      <div className="grid items-stretch gap-4">
+        <AddToCartButton
+          variantId={selectedVariant?.id}
+          quantity={1}
+          accessibleAddingToCartLabel="Adding item to your cart"
+          disabled={isOutOfStock}
+        >
+          <Button
+            width="full"
+            variant={isOutOfStock ? 'secondary' : 'primary'}
+            as="span"
+          >
+            {isOutOfStock ? (
+              <Text>Sold out</Text>
+            ) : (
+              <Text
+                as="span"
+                className="flex items-center justify-center gap-2"
+              >
+                <span>Add to bag</span> <span>·</span>{' '}
+                <Money
+                  withoutTrailingZeros
+                  data={selectedVariant.priceV2!}
+                  as="span"
+                />
+                {isOnSale && (
+                  <Money
+                    withoutTrailingZeros
+                    data={selectedVariant.compareAtPriceV2!}
+                    as="span"
+                    className="opacity-50 strike"
+                  />
+                )}
+              </Text>
+            )}
+          </Button>
+        </AddToCartButton>
+        {!isOutOfStock && <ShopPayButton variantIds={[selectedVariant.id!]} />}
+      </div>
+    </form>
+  );
+}

examples/hydrogen/src/components/product/ProductGallery.client.tsx

@@ -0,0 +1,106 @@
+import {MediaFile} from '@shopify/hydrogen/client';
+import type {MediaEdge} from '@shopify/hydrogen/storefront-api-types';
+import {ATTR_LOADING_EAGER} from '~/lib/const';
+
+/**
+ * A client component that defines a media gallery for hosting images, 3D models, and videos of products
+ */
+export function ProductGallery({
+  media,
+  className,
+}: {
+  media: MediaEdge['node'][];
+  className?: string;
+}) {
+  if (!media.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`swimlane md:grid-flow-row hiddenScroll md:p-0 md:overflow-x-auto md:grid-cols-2 ${className}`}
+    >
+      {media.map((med, i) => {
+        let mediaProps: Record<string, any> = {};
+        const isFirst = i === 0;
+        const isFourth = i === 3;
+        const isFullWidth = i % 3 === 0;
+
+        const data = {
+          ...med,
+          image: {
+            // @ts-ignore
+            ...med.image,
+            altText: med.alt || 'Product image',
+          },
+        };
+
+        switch (med.mediaContentType) {
+          case 'IMAGE':
+            mediaProps = {
+              width: 800,
+              widths: [400, 800, 1200, 1600, 2000, 2400],
+            };
+            break;
+          case 'VIDEO':
+            mediaProps = {
+              width: '100%',
+              autoPlay: true,
+              controls: false,
+              muted: true,
+              loop: true,
+              preload: 'auto',
+            };
+            break;
+          case 'EXTERNAL_VIDEO':
+            mediaProps = {width: '100%'};
+            break;
+          case 'MODEL_3D':
+            mediaProps = {
+              width: '100%',
+              interactionPromptThreshold: '0',
+              ar: true,
+              loading: ATTR_LOADING_EAGER,
+              disableZoom: true,
+            };
+            break;
+        }
+
+        if (i === 0 && med.mediaContentType === 'IMAGE') {
+          mediaProps.loading = ATTR_LOADING_EAGER;
+        }
+
+        const style = [
+          isFullWidth ? 'md:col-span-2' : 'md:col-span-1',
+          isFirst || isFourth ? '' : 'md:aspect-[4/5]',
+          'aspect-square snap-center card-image bg-white dark:bg-contrast/10 w-mobileGallery md:w-full',
+        ].join(' ');
+
+        return (
+          <div
+            className={style}
+            // @ts-ignore
+            key={med.id || med.image.id}
+          >
+            <MediaFile
+              tabIndex="0"
+              className={`w-full h-full aspect-square fadeIn object-cover`}
+              data={data}
+              sizes={
+                isFullWidth
+                  ? '(min-width: 64em) 60vw, (min-width: 48em) 50vw, 90vw'
+                  : '(min-width: 64em) 30vw, (min-width: 48em) 25vw, 90vw'
+              }
+              // @ts-ignore
+              options={{
+                crop: 'center',
+                scale: 2,
+              }}
+              {...mediaProps}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

examples/hydrogen/src/components/product/ProductGrid.client.tsx

@@ -0,0 +1,113 @@
+import {useState, useRef, useEffect, useCallback} from 'react';
+import {Link, flattenConnection} from '@shopify/hydrogen';
+
+import {Button, Grid, ProductCard} from '~/components';
+import {getImageLoadingPriority} from '~/lib/const';
+import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types';
+
+export function ProductGrid({
+  url,
+  collection,
+}: {
+  url: string;
+  collection: Collection;
+}) {
+  const nextButtonRef = useRef(null);
+  const initialProducts = collection?.products?.nodes || [];
+  const {hasNextPage, endCursor} = collection?.products?.pageInfo ?? {};
+  const [products, setProducts] = useState<Product[]>(initialProducts);
+  const [cursor, setCursor] = useState(endCursor ?? '');
+  const [nextPage, setNextPage] = useState(hasNextPage);
+  const [pending, setPending] = useState(false);
+  const haveProducts = initialProducts.length > 0;
+
+  const fetchProducts = useCallback(async () => {
+    setPending(true);
+    const postUrl = new URL(window.location.origin + url);
+    postUrl.searchParams.set('cursor', cursor);
+
+    const response = await fetch(postUrl, {
+      method: 'POST',
+    });
+    const {data} = await response.json();
+
+    // ProductGrid can paginate collection, products and search routes
+    // @ts-ignore TODO: Fix types
+    const newProducts: Product[] = flattenConnection<Product>(
+      data?.collection?.products || data?.products || [],
+    );
+    const {endCursor, hasNextPage} = data?.collection?.products?.pageInfo ||
+      data?.products?.pageInfo || {endCursor: '', hasNextPage: false};
+
+    setProducts([...products, ...newProducts]);
+    setCursor(endCursor);
+    setNextPage(hasNextPage);
+    setPending(false);
+  }, [cursor, url, products]);
+
+  const handleIntersect = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          fetchProducts();
+        }
+      });
+    },
+    [fetchProducts],
+  );
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(handleIntersect, {
+      rootMargin: '100%',
+    });
+
+    const nextButton = nextButtonRef.current;
+
+    if (nextButton) observer.observe(nextButton);
+
+    return () => {
+      if (nextButton) observer.unobserve(nextButton);
+    };
+  }, [nextButtonRef, cursor, handleIntersect]);
+
+  if (!haveProducts) {
+    return (
+      <>
+        <p>No products found on this collection</p>
+        <Link to="/products">
+          <p className="underline">Browse catalog</p>
+        </Link>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Grid layout="products">
+        {products.map((product, i) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            loading={getImageLoadingPriority(i)}
+          />
+        ))}
+      </Grid>
+
+      {nextPage && (
+        <div
+          className="flex items-center justify-center mt-6"
+          ref={nextButtonRef}
+        >
+          <Button
+            variant="secondary"
+            disabled={pending}
+            onClick={fetchProducts}
+            width="full"
+          >
+            {pending ? 'Loading...' : 'Load more products'}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}

examples/hydrogen/src/components/product/ProductOptions.client.tsx

@@ -0,0 +1,141 @@
+import {useCallback, useState} from 'react';
+// @ts-expect-error @headlessui/react incompatibility with node16 resolution
+import {Listbox} from '@headlessui/react';
+import {useProductOptions} from '@shopify/hydrogen';
+
+import {Text, IconCheck, IconCaret} from '~/components';
+
+export function ProductOptions({
+  values,
+  ...props
+}: {
+  values: any[];
+  [key: string]: any;
+} & React.ComponentProps<typeof OptionsGrid>) {
+  const asDropdown = values.length > 7;
+
+  return asDropdown ? (
+    <OptionsDropdown values={values} {...props} />
+  ) : (
+    <OptionsGrid values={values} {...props} />
+  );
+}
+
+function OptionsGrid({
+  values,
+  name,
+  handleChange,
+}: {
+  values: string[];
+  name: string;
+  handleChange: (name: string, value: string) => void;
+}) {
+  const {selectedOptions} = useProductOptions();
+
+  return (
+    <>
+      {values.map((value) => {
+        const checked = selectedOptions![name] === value;
+        const id = `option-${name}-${value}`;
+
+        return (
+          <Text as="label" key={id} htmlFor={id}>
+            <input
+              className="sr-only"
+              type="radio"
+              id={id}
+              name={`option[${name}]`}
+              value={value}
+              checked={checked}
+              onChange={() => handleChange(name, value)}
+            />
+            <div
+              className={`leading-none py-1 border-b-[1.5px] cursor-pointer transition-all duration-200 ${
+                checked ? 'border-primary/50' : 'border-primary/0'
+              }`}
+            >
+              {value}
+            </div>
+          </Text>
+        );
+      })}
+    </>
+  );
+}
+
+// TODO: De-dupe UI with CountrySelector
+function OptionsDropdown({
+  values,
+  name,
+  handleChange,
+}: {
+  values: string[];
+  name: string;
+  handleChange: (name: string, value: string) => void;
+}) {
+  const [listboxOpen, setListboxOpen] = useState(false);
+  const {selectedOptions} = useProductOptions();
+
+  const updateSelectedOption = useCallback(
+    (value: string) => {
+      handleChange(name, value);
+    },
+    [name, handleChange],
+  );
+
+  return (
+    <div className="relative w-full">
+      <Listbox onChange={updateSelectedOption} value="">
+        {/* @ts-expect-error @headlessui/react incompatibility with node16 resolution */}
+        {({open}) => {
+          setTimeout(() => setListboxOpen(open));
+          return (
+            <>
+              <Listbox.Button
+                className={`flex items-center justify-between w-full py-3 px-4 border border-primary ${
+                  open ? 'rounded-b md:rounded-t md:rounded-b-none' : 'rounded'
+                }`}
+              >
+                <span>{selectedOptions![name]}</span>
+                <IconCaret direction={open ? 'up' : 'down'} />
+              </Listbox.Button>
+
+              <Listbox.Options
+                className={`border-primary bg-contrast absolute bottom-12 z-30 grid
+                h-48 w-full overflow-y-scroll rounded-t border px-2 py-2 transition-[max-height]
+                duration-150 sm:bottom-auto md:rounded-b md:rounded-t-none md:border-t-0 md:border-b ${
+                  listboxOpen ? 'max-h-48' : 'max-h-0'
+                }`}
+              >
+                {values.map((value) => {
+                  const isSelected = selectedOptions![name] === value;
+                  const id = `option-${name}-${value}`;
+
+                  return (
+                    <Listbox.Option key={id} value={value}>
+                      {/* @ts-expect-error @headlessui/react incompatibility with node16 resolution */}
+                      {({active}) => (
+                        <div
+                          className={`text-primary w-full p-2 transition rounded flex justify-start items-center text-left cursor-pointer ${
+                            active ? 'bg-primary/10' : null
+                          }`}
+                        >
+                          {value}
+                          {isSelected ? (
+                            <span className="ml-2">
+                              <IconCheck />
+                            </span>
+                          ) : null}
+                        </div>
+                      )}
+                    </Listbox.Option>
+                  );
+                })}
+              </Listbox.Options>
+            </>
+          );
+        }}
+      </Listbox>
+    </div>
+  );
+}

examples/hydrogen/src/components/product/index.ts

@@ -0,0 +1,5 @@
+export {ProductForm} from './ProductForm.client';
+export {ProductGallery} from './ProductGallery.client';
+export {ProductGrid} from './ProductGrid.client';
+export {ProductDetail} from './ProductDetail.client';
+export {ProductOptions} from './ProductOptions.client';