Merge pull request #36 from garytyler/upgrade-hydrogen-remix-vite

Upgrade Hydrogen to 2024.4.7

.eslintrc.js → .eslintrc.cjs

@@ -3,9 +3,9 @@
  */
 module.exports = {
   extends: [
+    '@remix-run/eslint-config',
     'plugin:hydrogen/recommended',
     'plugin:hydrogen/typescript',
-    'plugin:storybook/recommended',
   ],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'off',
@@ -14,7 +14,6 @@ module.exports = {
     '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',
+    'no-console': ['warn', {allow: ['warn', 'error']}],
   },
 };

.gitignore

@@ -8,3 +8,4 @@ node_modules
 .vscode
 .hydrogen
 .yarn
+storefrontapi.generated.d.ts

.graphqlrc.yml

@@ -1 +1,7 @@
-schema: node_modules/@shopify/hydrogen-react/storefront.schema.json
+projects:
+  default:
+    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+    documents:
+      - '!*.d.ts'
+      - '*.{ts,tsx,js,jsx}'
+      - 'app/**/*.{ts,tsx,js,jsx}'

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -1,43 +1,47 @@
-# Hydrogen template: Demo Store
+# LZX Frontend
 
-Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **full-featured setup** of components, queries and tooling to get started with Hydrogen.
+## Development
 
-[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
-[Get familiar with Remix](https://remix.run/docs/en/v1)
+### Requirements
 
-## What's included
+- Node >=18.19 (https://nodejs.org)
+- Yarn 4.5.3 (https://yarnpkg.com/)
 
-- Remix
-- Hydrogen
-- Oxygen
-- Shopify CLI
-- ESLint
-- Prettier
-- GraphQL generator
-- TypeScript and JavaScript flavors
-- Tailwind CSS (via PostCSS)
-- Full-featured setup of components and routes
+### Getting Started
 
-## Getting started
+Set required environment variables:
 
-**Requirements:**
+- `SESSION_SECRET`
+- `PUBLIC_STOREFRONT_API_TOKEN`
+- `PRIVATE_STOREFRONT_API_TOKEN`
+- `PUBLIC_STORE_DOMAIN`
+- `PUBLIC_STOREFRONT_ID`
+- `CLUSTER_NAME`
+- `DATA_API_BASE_URL`
+- `DATA_API_KEY`
+- `DATABASE_NAME`
+- `DATABASE_URL`
 
-- Node.js version 16.14.0 or higher
+Install dependencies:
 
-```bash
-npm create @shopify/hydrogen@latest -- --template demo-store
 ```
+yarn install
+```
+
+Run development server:
 
-Remember to update `.env` with your shop's domain and Storefront API token!
+```
+yarn run dev
+```
 
-## Building for production
+Run development server on local network:
 
-```bash
-npm run build
+```
+yarn run dev --host
 ```
 
-## Local development
+Build and run preview server:
 
-```bash
-npm run dev
+```
+yarn run preview
 ```

app/components/CountrySelector.tsx

@@ -1,12 +1,12 @@
 import {useFetcher, useLocation, useMatches} from '@remix-run/react';
-import {Heading, Button, IconCheck} from '~/components';
+import {Heading, Button, IconCheck, Text} from '~/components';
 import {useCallback, useEffect, useRef} from 'react';
 import {useInView} from 'react-intersection-observer';
-import {Localizations, Locale, CartAction} from '~/lib/type';
+import type {Localizations, Locale} from '~/lib/type';
+import {CartAction} from '~/lib/type';
 import {DEFAULT_LOCALE} from '~/lib/utils';
 import clsx from 'clsx';
-import {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
-import {Text} from '~/components';
+import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
 import IconPolicy from '~/components/IconPolicy';
 
 export function CountrySelector() {

app/components/Footer.tsx

@@ -1,9 +1,11 @@
 import Logo from './Logo';
-import {FaInstagram} from 'react-icons/fa';
-import {FaDiscord} from 'react-icons/fa';
-import {FaTwitch} from 'react-icons/fa';
-import {FaYoutube} from 'react-icons/fa';
-import {FaFacebook} from 'react-icons/fa';
+import {
+  FaInstagram,
+  FaDiscord,
+  FaTwitch,
+  FaYoutube,
+  FaFacebook,
+} from 'react-icons/fa';
 import {CountrySelector} from './CountrySelector';
 import MailchimpSubscribe from 'react-mailchimp-subscribe';