Merge pull request #322 from Shopify/changeset-release/v0.x-2022-10

[ci] release v0.x-2022-10 (alpha)

.changeset/pre.json

@@ -4,7 +4,14 @@
   "initialVersions": {
     "@shopify/cli-hydrogen": "4.0.0-alpha.0",
     "@shopify/hydrogen": "2.0.0-alpha.0",
-    "@shopify/remix-oxygen": "1.0.0-alpha.0"
+    "@shopify/remix-oxygen": "1.0.0-alpha.0",
+    "demo-store": "0.0.0",
+    "hello-world": "0.0.0"
   },
-  "changesets": []
+  "changesets": [
+    "big-planes-warn",
+    "bright-lemons-promise",
+    "curvy-apes-yawn",
+    "twenty-cheetahs-return"
+  ]
 }

packages/cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @shopify/cli-hydrogen
 
+## 4.0.0-alpha.1
+
+### Patch Changes
+
+- Update CLI to be executable and bundle templates in dist folder ([#326](https://github.com/Shopify/h2/pull/326)) by [@jplhomer](https://github.com/jplhomer)
+
 ## 4.0.0-alpha.0
 
 Package renaming. Similar to `@shopify/cli-h2-test@4.0.5`.

packages/cli/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.1",
   "type": "module",
   "scripts": {
     "build": "tsup --clean --config ./tsup.config.ts",

packages/hydrogen/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @shopify/hydrogen
 
+## 2.0.0-alpha.1
+
+### Patch Changes
+
+- Refactor cart ([#311](https://github.com/Shopify/h2/pull/311)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+- Fix a pagination bug on country change ([#317](https://github.com/Shopify/h2/pull/317)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
 ## 2.0.0-alpha.0
 
 Package renaming. Similar to `@shopify/h2-test-hydrogen@2.0.3`.

packages/hydrogen/package.json

@@ -5,7 +5,7 @@
     "@shopify:registry": "https://registry.npmjs.org"
   },
   "type": "module",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "main": "dist/index.cjs",
   "module": "dist/production/index.js",
   "types": "dist/production/index.d.ts",

packages/hydrogen/src/version.ts

@@ -1 +1 @@
-export const LIB_VERSION = '2.0.3';
+export const LIB_VERSION = '2.0.0-alpha.1';

packages/remix-oxygen/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @shopify/remix-oxygen
 
+## 1.0.0-alpha.1
+
+### Patch Changes
+
+- Initial release of @shopify/remix-oxygen by [@jplhomer](https://github.com/jplhomer)
+
 ## 0.0.0-alpha.0
 
 Package renaming. Similar to `@shopify/h2-test-remix-oxygen@0.0.5`.

packages/remix-oxygen/package.json

@@ -5,7 +5,7 @@
     "@shopify:registry": "https://registry.npmjs.org"
   },
   "type": "module",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "main": "dist/index.cjs",
   "module": "dist/production/index.js",
   "types": "dist/production/index.d.ts",

templates/demo-store-js/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

templates/demo-store-js/.eslintignore

@@ -0,0 +1,4 @@
+build
+node_modules
+bin
+*.d.ts

templates/demo-store-js/.eslintrc.js

@@ -0,0 +1,16 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['plugin:hydrogen/recommended', 'plugin:hydrogen/typescript'],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    'hydrogen/prefer-image-component': 'off',
+    'no-useless-escape': 'off',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    'no-case-declarations': 'off',
+    // TODO: Remove jest plugin from hydrogen/eslint-plugin
+    'jest/no-deprecated-functions': 'off',
+  },
+};

templates/demo-store-js/.gitignore

@@ -0,0 +1,14 @@
+node_modules
+
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+/app/styles/app.css
+.vscode
+/test-results/
+/playwright-report/
+/playwright/.cache/
+.hydrogen

templates/demo-store-js/.graphqlrc.yml

@@ -0,0 +1 @@
+schema: node_modules/@shopify/hydrogen-react/storefront.schema.json

templates/demo-store-js/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+build

templates/demo-store-js/app/components/AccountAddressBook.jsx

@@ -0,0 +1,86 @@
+import { Form } from "@remix-run/react";
+
+import { Button, Link, Text } from "~/components";
+
+export function AccountAddressBook({ customer, addresses }) {
+  return (
+    <>
+      <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>
+          )}
+
+          <div className="w-48">
+            <Button
+              to="address/add"
+              className="mt-2 text-sm w-full mb-6"
+              variant="secondary"
+            >
+              Add an Address
+            </Button>
+          </div>
+          {Boolean(addresses?.length) && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+              {customer.defaultAddress && (
+                <Address address={customer.defaultAddress} defaultAddress />
+              )}
+
+              {addresses
+                .filter((address) => address.id !== customer.defaultAddress?.id)
+                .map((address) => (
+                  <Address key={address.id} address={address} />
+                ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function Address({ address, defaultAddress }) {
+  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>
+      )}
+
+      <ul className="flex-1 flex-row">
+        {(address.firstName || address.lastName) && (
+          <li>
+            {"" +
+              (address.firstName && address.firstName + " ") +
+              address?.lastName}
+          </li>
+        )}
+
+        {address.formatted &&
+          address.formatted.map((line) => <li key={line}>{line}</li>)}
+      </ul>
+
+      <div className="flex flex-row font-medium mt-6">
+        <Link
+          to={`/account/address/${encodeURIComponent(address.id)}`}
+          className="text-left underline text-sm"
+          prefetch="intent"
+        >
+          Edit
+        </Link>
+        <Form action="address/delete" method="delete">
+          <input type="hidden" name="addressId" value={address.id} />
+          <button className="text-left text-primary/50 ml-6 text-sm">
+            Remove
+          </button>
+        </Form>
+      </div>
+    </div>
+  );
+}

templates/demo-store-js/app/components/AccountDetails.jsx

@@ -0,0 +1,40 @@
+import { Link } from "~/components";
+
+export function AccountDetails({ customer }) {
+  const { firstName, lastName, email, phone } = customer;
+
+  return (
+    <>
+      <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>
+            <Link
+              prefetch="intent"
+              className="underline text-sm font-normal"
+              to="/account/edit"
+            >
+              Edit
+            </Link>
+          </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>
+    </>
+  );
+}

templates/demo-store-js/app/components/AddToCartButton.jsx

@@ -0,0 +1,34 @@
+import { useFetcher, useMatches } from "@remix-run/react";
+import { Button } from "~/components";
+import { CartAction } from "~/lib/type";
+
+export function AddToCartButton({
+  children,
+  lines,
+  className = "",
+  variant = "primary",
+  width = "full",
+  ...props
+}) {
+  const [root] = useMatches();
+  const selectedLocale = root?.data?.selectedLocale;
+  const fetcher = useFetcher();
+
+  return (
+    <fetcher.Form action="/cart" method="post">
+      <input type="hidden" name="cartAction" value={CartAction.ADD_TO_CART} />
+      <input type="hidden" name="countryCode" value={selectedLocale.country} />
+      <input type="hidden" name="lines" value={JSON.stringify(lines)} />
+      <Button
+        as="button"
+        type="submit"
+        width={width}
+        variant={variant}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Button>
+    </fetcher.Form>
+  );
+}

templates/demo-store-js/app/components/Breadcrumbs.jsx

@@ -0,0 +1,26 @@
+import { Text } from "./Text";
+import { Link } from "./Link";
+
+// Renders a breadcrumb trail from a references metafield list
+export function Breadcrumbs({ breadcrumbs }) {
+  if (!breadcrumbs || breadcrumbs.length === 0) {
+    return null;
+  }
+
+  const breadcrumbsMarkup = breadcrumbs.map((breadcrumb, index) => {
+    const isLastBreadcrumb = index === breadcrumbs.length - 1;
+
+    return isLastBreadcrumb ? (
+      <Text key={breadcrumb.id} as="span">
+        {breadcrumb.title}
+      </Text>
+    ) : (
+      <span key={breadcrumb.id}>
+        <Link to={`/collections/${breadcrumb.handle}`}>{breadcrumb.title}</Link>
+        <span className="px-2">/</span>
+      </span>
+    );
+  });
+
+  return <nav className="flex items-center">{breadcrumbsMarkup}</nav>;
+}

templates/demo-store-js/app/components/Button.jsx

@@ -0,0 +1,51 @@
+import { forwardRef } from "react";
+import { Link } from "@remix-run/react";
+import clsx from "clsx";
+
+import { missingClass } from "~/lib/utils";
+
+export const Button = forwardRef(
+  (
+    {
+      as = "button",
+      className = "",
+      variant = "primary",
+      width = "auto",
+      ...props
+    },
+
+    ref
+  ) => {
+    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
+        // @todo: not supported until react-router makes it into Remix.
+        // preventScrollReset={true}
+        className={styles}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);