Add consistent configs

.editorconfig

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

.eslintignore

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

.eslintrc

@@ -1,3 +1,9 @@
 {
-  "extends": ["@remix-run/eslint-config"]
+  "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"
+  }
 }

README.md

@@ -10,8 +10,8 @@
 2. [ ] Break down code into the roadmap for "glue layer" and Hydrogen UI
 3. [ ] Create list of what mental models and code patterns have changed, and what functionality is no longer possible that we should de-risk with existing merchants (e.g. server routing).
 
-
 ## Principles:
+
 - Start with the unknowns, and areas where we think patterns may be different. Copy/pasting markup is easy and can be done at the end.
 - Do not over engineer; our demo store is used as a quick reference for Developers. DRYing up code in a way that makes the trail hard to follow for unfamiliar developers is an anti-pattern.
 - Keep as close to existing Demo Store as possible, without breaking Remix best practices

app/components/AccountAddressBook.tsx

@@ -1,9 +1,10 @@
-import { Form } from "@remix-run/react";
+import {Form} from '@remix-run/react';
 import type {
   Customer,
   MailingAddress,
-} from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Button, Link, Text } from "~/components";
+} from '@shopify/hydrogen-ui-alpha/storefront-api-types';
+
+import {Button, Link, Text} from '~/components';
 
 export function AccountAddressBook({
   customer,
@@ -17,7 +18,7 @@ export function AccountAddressBook({
       <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 && (
+          {!addresses.length && (
             <Text className="mb-1" width="narrow" as="p" size="copy">
               You haven&apos;t saved any addresses yet.
             </Text>
@@ -31,7 +32,7 @@ export function AccountAddressBook({
               Add an Address
             </Button>
           </div>
-          {Boolean(addresses?.length) && (
+          {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 />
@@ -68,9 +69,8 @@ function Address({
       <ul className="flex-1 flex-row">
         {(address.firstName || address.lastName) && (
           <li>
-            {"" +
-              (address.firstName && address.firstName + " ") +
-              address?.lastName}
+            {String(address.firstName && `${address.firstName} `) +
+              address.lastName}
           </li>
         )}
         {address.formatted &&
@@ -86,7 +86,10 @@ function Address({
         </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">
+          <button
+            type="submit"
+            className="text-left text-primary/50 ml-6 text-sm"
+          >
             Remove
           </button>
         </Form>

app/components/AccountDetails.tsx

@@ -1,8 +1,9 @@
-import type { Customer } from "@shopify/hydrogen-ui-alpha/storefront-api-types";
-import { Link } from "~/components";
+import type {Customer} from '@shopify/hydrogen-ui-alpha/storefront-api-types';
 
-export function AccountDetails({ customer }: { customer: Customer }) {
-  const { firstName, lastName, email, phone } = customer;
+import {Link} from '~/components';
+
+export function AccountDetails({customer}: {customer: Customer}) {
+  const {firstName, lastName, email, phone} = customer;
 
   return (
     <>
@@ -18,12 +19,12 @@ export function AccountDetails({ customer }: { customer: Customer }) {
           <div className="mt-4 text-sm text-primary/50">Name</div>
           <p className="mt-1">
             {firstName || lastName
-              ? (firstName ? firstName + " " : "") + lastName
-              : "Add name"}{" "}
+              ? (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>
+          <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>

app/components/Button.tsx

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