Shopify · lordofthecactus · Jun 8, 2022 · May 27, 2022 · May 27, 2022 · May 27, 2022
diff --git a/templates/demo-store-neue/README.md b/templates/demo-store-neue/README.md
@@ -0,0 +1,36 @@
+# Hydrogen Demo Store
+
+Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
+
+[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
+
+[Run this template on StackBlitz](https://stackblitz.com/github/Shopify/hydrogen/tree/stackblitz/templates/demo-store)
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 16.5.0 or higher
+- Yarn
+
+```bash
+yarn
+yarn dev
+```
+
+Remember to update `hydrogen.config.js` with your shop's domain and Storefront API token!
+
+## Building for production
+
+```bash
+yarn 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 `yarn preview`:
+
+```bash
+yarn build
+yarn preview
+```
diff --git a/templates/demo-store-neue/hydrogen.config.js b/templates/demo-store-neue/hydrogen.config.js
@@ -0,0 +1,25 @@
+import {defineConfig} from '@shopify/hydrogen/config';
+import {
+  CookieSessionStorage,
+  PerformanceMetricsServerAnalyticsConnector,
+  ShopifyServerAnalyticsConnector,
+} from '@shopify/hydrogen';
+
+export default defineConfig({
+  shopify: {
+    storeDomain: 'hydrogen-preview.myshopify.com',
+    storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+    storefrontApiVersion: 'unstable',
+  },
+  session: CookieSessionStorage('__session', {
+    path: '/',
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'strict',
+    maxAge: 60 * 60 * 24 * 30,
+  }),
+  serverAnalyticsConnectors: [
+    PerformanceMetricsServerAnalyticsConnector,
+    ShopifyServerAnalyticsConnector,
+  ],
+});
diff --git a/templates/demo-store-neue/index.html b/templates/demo-store-neue/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- TODO: Use Admin API to get brand logo (SVG) and -->
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- TODO: This should be automatically replaced when generated -->
+    <title>Hydrogen Demo Store</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>
diff --git a/templates/demo-store-neue/jsconfig.json b/templates/demo-store-neue/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
+}
diff --git a/templates/demo-store-neue/package.json b/templates/demo-store-neue/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "demo-store-neue",
+  "description": "Hello world 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"
+  },
+  "devDependencies": {
+    "@shopify/cli": "^3.0.11",
+    "@shopify/cli-hydrogen": "^3.0.11",
+    "@shopify/prettier-config": "^1.1.2",
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.2",
+    "eslint": "^8.16.0",
+    "eslint-plugin-hydrogen": "^0.12.2",
+    "postcss": "^8.4.14",
+    "postcss-import": "^14.1.0",
+    "postcss-preset-env": "^7.6.0",
+    "prettier": "^2.3.2",
+    "tailwindcss": "^3.0.24",
+    "vite": "^2.9.0"
+  },
+  "prettier": "@shopify/prettier-config",
+  "dependencies": {
+    "@headlessui/react": "^1.6.3",
+    "@heroicons/react": "^1.0.6",
+    "@shopify/hydrogen": "^0.23.0",
+    "clsx": "^1.1.1",
+    "eslint-plugin-react": "^7.29.3",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "graphql-tag": "^2.12.6",
+    "install": "^0.13.0",
+    "npm": "^8.12.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-use": "^17.4.0",
+    "title": "^3.4.4",
+    "ts-node": "^10.8.0",
+    "turbo": "^1.2.8",
+    "typescript": "^4.7.2",
+    "typographic-base": "^1.0.4",
+    "vite": "^2.9.0"
+  }
+}
diff --git a/templates/demo-store-neue/postcss.config.js b/templates/demo-store-neue/postcss.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    'postcss-preset-env': {
+      features: {'nesting-rules': false},
+    },
+  },
+};
diff --git a/templates/demo-store-neue/src/App.server.jsx b/templates/demo-store-neue/src/App.server.jsx
@@ -0,0 +1,33 @@
+import renderHydrogen from '@shopify/hydrogen/entry-server';
+import {
+  Route,
+  Router,
+  FileRoutes,
+  ShopifyProvider,
+  CartProvider,
+  ShopifyAnalytics,
+  PerformanceMetrics,
+  PerformanceMetricsDebug,
+} from '@shopify/hydrogen';
+import {Suspense} from 'react';
+import {NotFound} from './components/pages';
+
+function App({routes}) {
+  return (
+    <Suspense fallback={null}>
+      <ShopifyProvider>
+        <CartProvider>
+          <Router>
+            <FileRoutes routes={routes} />
+            <Route path="*" page={<NotFound />} />
+          </Router>
+        </CartProvider>
+        <PerformanceMetrics />
+        {import.meta.env.DEV && <PerformanceMetricsDebug />}
+        <ShopifyAnalytics />
+      </ShopifyProvider>
+    </Suspense>
+  );
+}
+
+export default renderHydrogen(App);
diff --git a/templates/demo-store-neue/src/assets/favicon.svg b/templates/demo-store-neue/src/assets/favicon.svg
diff --git a/templates/demo-store-neue/src/components/AccountIcon.jsx b/templates/demo-store-neue/src/components/AccountIcon.jsx
@@ -0,0 +1,21 @@
+/**
+ * A shared component that specifies the icon to represent an account
+ */
+export default function AccountIcon() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="20" cy="10.5" r="4.5" stroke="#374151" strokeWidth="2" />
+      <path
+        d="M20 19C13.4375 19 9.5 20.2857 9.5 28H30.5C30.5 20.2857 26.5625 19 20 19Z"
+        stroke="#374151"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
diff --git a/templates/demo-store-neue/src/components/LogoutButton.client.jsx b/templates/demo-store-neue/src/components/LogoutButton.client.jsx
@@ -0,0 +1,14 @@
+import {useCallback} from 'react';
+
+export default function LogoutButton(props) {
+  const logout = useCallback(() => {
+    fetch('/account/logout', {method: 'POST'}).then(
+      () => (window.location.href = '/'),
+    );
+  }, []);
+  return (
+    <button {...props} onClick={logout}>
+      Sign out
+    </button>
+  );
+}
diff --git a/templates/demo-store-neue/src/components/blocks/CountrySelector.client.jsx b/templates/demo-store-neue/src/components/blocks/CountrySelector.client.jsx
@@ -0,0 +1,105 @@
+import {useCallback, useState, Suspense} from 'react';
+import {useCountry, fetchSync} from '@shopify/hydrogen';
+import {Listbox} from '@headlessui/react';
+import {IconChevronDown} from '~/components/elements';
+
+/**
+ * A client component that selects the appropriate country to display for products on a website
+ */
+export default function CountrySelector() {
+  const [listboxOpen, setListboxOpen] = useState(false);
+  const [selectedCountry] = useCountry();
+
+  const setCountry = useCallback(({isoCode, name}) => {
+    fetch(`/api/countries`, {
+      body: JSON.stringify({isoCode, name}),
+      method: 'POST',
+    }).then(() => {
+      window.location.reload();
+    });
+  }, []);
+
+  return (
+    <div className="relative">
+      <Listbox onChange={setCountry}>
+        {({open}) => {
+          setTimeout(() => setListboxOpen(open));
+          return (
+            <>
+              <Listbox.Button className="flex items-center justify-between w-full border border-gray-500 p-2 rounded-sm">
+                <span className="">{selectedCountry.name}</span>
+                <IconChevronDown
+                  className={`w-5 h-5 transition-transform duration-300 ${
+                    open ? 'rotate-180' : null
+                  }`}
+                />
+              </Listbox.Button>
+
+              <Listbox.Options className="absolute z-10 mt-2 black border border-gray-500 p-2 w-full">
+                <div className="max-h-48 overflow-y-auto">
+                  {listboxOpen && (
+                    <Suspense fallback={<div>Loading…</div>}>
+                      <Countries
+                        selectedCountry={selectedCountry}
+                        getClassName={(active) => {
+                          return (
+                            `w-full cursor-pointer py-2 flex justify-start items-center text-left cursor-pointer` +
+                            `rounded ${active ? '' : null}`
+                          );
+                        }}
+                      />
+                    </Suspense>
+                  )}
+                </div>
+              </Listbox.Options>
+            </>
+          );
+        }}
+      </Listbox>
+    </div>
+  );
+}
+
+export function Countries({selectedCountry, getClassName}) {
+  // TODO: We should have this handled inside this component, no?
+  const countries = fetchSync('/api/countries').json();
+
+  return countries.map((country) => {
+    const isSelected = country.isoCode === selectedCountry.isoCode;
+    return (
+      <Listbox.Option key={country.isoCode} value={country}>
+        {({active}) => (
+          <div className={getClassName(active)}>
+            {country.name}
+            {isSelected ? (
+              <span className="ml-2">
+                <CheckIcon />
+              </span>
+            ) : null}
+          </div>
+        )}
+      </Listbox.Option>
+    );
+  });
+}
+
+export function CheckIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
+        stroke="#FFFFFF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/templates/demo-store-neue/src/components/blocks/MoneyPrice.client.jsx b/templates/demo-store-neue/src/components/blocks/MoneyPrice.client.jsx
@@ -0,0 +1,15 @@
+import {useMoney} from '@shopify/hydrogen';
+
+/**
+ * A client component that defines the currency code, currency symbol, and amount of a product
+ */
+export default function MoneyPrice({money}) {
+  const {currencyCode, currencyNarrowSymbol, amount} = useMoney(money);
+  return (
+    <span className="text-black text-md">
+      {currencyCode}
+      {currencyNarrowSymbol}
+      {amount}
+    </span>
+  );
+}