Create a new Hydrogen project

.eslintignore

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

.eslintrc.cjs

@@ -0,0 +1,12 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['@remix-run/eslint-config', 'plugin:hydrogen/recommended'],
+  rules: {
+    'hydrogen/prefer-image-component': 'off',
+    'no-useless-escape': 'off',
+    'no-case-declarations': 'off',
+    'no-console': ['warn', {allow: ['warn', 'error']}],
+  },
+};

.github/workflows/oxygen-deployment-1000020231.yml

@@ -0,0 +1,44 @@
+# Don't change the line below!
+#! oxygen_storefront_id: 1000020231
+
+name: Storefront 1000020231
+on: [push]
+
+permissions:
+  contents: read
+  deployments: write
+
+jobs:
+  deploy:
+    name: Deploy to Oxygen
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          check-latest: true
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build and Publish to Oxygen
+        run: npx shopify hydrogen deploy
+        env:
+          SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000020231 }}

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+/.DS_Store
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+.shopify

.graphqlrc.yml

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

.npmrc

@@ -0,0 +1,2 @@
+@shopify:registry=https://registry.npmjs.com
+progress=false

README.md

@@ -1 +1,45 @@
-# packdigital_saurabh
+# Hydrogen template: Skeleton
+
+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 **minimal setup** of components, queries and tooling to get started with Hydrogen.
+
+[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
+[Get familiar with Remix](https://remix.run/docs/en/v1)
+
+## What's included
+
+- Remix
+- Hydrogen
+- Oxygen
+- Vite
+- Shopify CLI
+- ESLint
+- Prettier
+- GraphQL generator
+- TypeScript and JavaScript flavors
+- Minimal setup of components and routes
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 18.0.0 or higher
+
+```bash
+npm create @shopify/hydrogen@latest
+```
+
+## Building for production
+
+```bash
+npm run build
+```
+
+## Local development
+
+```bash
+npm run dev
+```
+
+## Setup for using Customer Account API (`/account` section)
+
+Follow step 1 and 2 of <https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen#step-1-set-up-a-public-domain-for-local-development>

app/components/Aside.jsx

@@ -0,0 +1,77 @@
+import {createContext, useContext, useState} from 'react';
+
+/**
+ * A side bar component with Overlay
+ * @example
+ * ```jsx
+ * <Aside type="search" heading="SEARCH">
+ *  <input type="search" />
+ *  ...
+ * </Aside>
+ * ```
+ * @param {{
+ *   children?: React.ReactNode;
+ *   type: AsideType;
+ *   heading: React.ReactNode;
+ * }}
+ */
+export function Aside({children, heading, type}) {
+  const {type: activeType, close} = useAside();
+  const expanded = type === activeType;
+
+  return (
+    <div
+      aria-modal
+      className={`overlay ${expanded ? 'expanded' : ''}`}
+      role="dialog"
+    >
+      <button className="close-outside" onClick={close} />
+      <aside>
+        <header>
+          <h3>{heading}</h3>
+          <button className="close reset" onClick={close}>
+            &times;
+          </button>
+        </header>
+        <main>{children}</main>
+      </aside>
+    </div>
+  );
+}
+
+const AsideContext = createContext(null);
+
+Aside.Provider = function AsideProvider({children}) {
+  const [type, setType] = useState('closed');
+
+  return (
+    <AsideContext.Provider
+      value={{
+        type,
+        open: setType,
+        close: () => setType('closed'),
+      }}
+    >
+      {children}
+    </AsideContext.Provider>
+  );
+};
+
+export function useAside() {
+  const aside = useContext(AsideContext);
+  if (!aside) {
+    throw new Error('useAside must be used within an AsideProvider');
+  }
+  return aside;
+}
+
+/** @typedef {'search' | 'cart' | 'mobile' | 'closed'} AsideType */
+/**
+ * @typedef {{
+ *   type: AsideType;
+ *   open: (mode: AsideType) => void;
+ *   close: () => void;
+ * }} AsideContextValue
+ */
+
+/** @typedef {import('react').ReactNode} ReactNode */