Merge pull request #5 from contentstack/shopify-add-oxygen-workflow-ww7p

Shopify add oxygen workflow ww7p

.eslintignore

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

.eslintrc.js

@@ -0,0 +1,18 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: [
+    '@remix-run/eslint-config',
+    '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',
+  },
+};

.github/workflows/jira.yml

@@ -0,0 +1,33 @@
+name: Create JIRA ISSUE
+on:
+  pull_request:
+    types: [opened]
+jobs:
+  security:
+    if: ${{ github.actor == 'dependabot[bot]' || github.actor == 'snyk-bot' || contains(github.event.pull_request.head.ref, 'snyk-fix-')  || contains(github.event.pull_request.head.ref, 'snyk-upgrade-')}}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Login into JIRA
+        uses: atlassian/gajira-login@master
+        env:
+          JIRA_BASE_URL: ${{ secrets.JIRA_BASE_URL }}
+          JIRA_USER_EMAIL: ${{ secrets.JIRA_USER_EMAIL }}
+          JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }}
+      - name: Create a JIRA Issue
+        id: create
+        uses: atlassian/gajira-create@master
+        with:
+          project: ${{ secrets.JIRA_PROJECT }}
+          issuetype: ${{ secrets.JIRA_ISSUE_TYPE }}
+          summary: |
+            ${{ github.event.pull_request.title }}
+          description: |
+            PR: ${{ github.event.pull_request.html_url }}
+
+          fields: "${{ secrets.JIRA_FIELDS }}"
+      - name: Transition issue
+        uses: atlassian/gajira-transition@v3
+        with:
+          issue: ${{ steps.create.outputs.issue }}
+          transition: ${{ secrets.JIRA_TRANSITION }}

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

@@ -0,0 +1,57 @@
+# Don't change the line below!
+#! oxygen_storefront_id: 1000010341
+
+name: Storefront 1000010341
+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@v3
+        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
+        id: deploy
+        uses: shopify/oxygenctl-action@v4
+        with:
+          oxygen_deployment_token: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000010341 }}
+          build_command: "npm run build"
+
+      # Create GitHub Deployment
+      - name: Create GitHub Deployment
+        uses: shopify/github-deployment-action@v1
+        if: always()
+        with:
+          token: ${{ github.token }}
+          environment: 'preview'
+          preview_url: ${{ steps.deploy.outputs.url }}
+          description: ${{ github.event.head_commit.message }}
+

.github/workflows/sca-scan.yml

@@ -0,0 +1,15 @@
+name: Source Composition Analysis Scan
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          args: --all-projects --fail-on=all

.gitignore

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

.graphqlrc.yml

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

CHANGELOG.md

@@ -0,0 +1,143 @@
+# skeleton
+
+## 1.0.0
+
+### Major Changes
+
+- The Storefront API 2023-10 now returns menu item URLs that include the `primaryDomainUrl`, instead of defaulting to the Shopify store ID URL (example.myshopify.com). The skeleton template requires changes to check for the `primaryDomainUrl`: by [@blittle](https://github.com/blittle)
+
+  1. Update the `HeaderMenu` component to accept a `primaryDomainUrl` and include
+     it in the internal url check
+
+  ```diff
+  // app/components/Header.tsx
+
+  + import type {HeaderQuery} from 'storefrontapi.generated';
+
+  export function HeaderMenu({
+    menu,
+  +  primaryDomainUrl,
+    viewport,
+  }: {
+    menu: HeaderProps['header']['menu'];
+  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+    viewport: Viewport;
+  }) {
+
+    // ...code
+
+    // if the url is internal, we strip the domain
+    const url =
+      item.url.includes('myshopify.com') ||
+      item.url.includes(publicStoreDomain) ||
+  +   item.url.includes(primaryDomainUrl)
+        ? new URL(item.url).pathname
+        : item.url;
+
+     // ...code
+
+  }
+  ```
+
+  2. Update the `FooterMenu` component to accept a `primaryDomainUrl` prop and include
+     it in the internal url check
+
+  ```diff
+  // app/components/Footer.tsx
+
+  - import type {FooterQuery} from 'storefrontapi.generated';
+  + import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
+
+  function FooterMenu({
+    menu,
+  +  primaryDomainUrl,
+  }: {
+    menu: FooterQuery['menu'];
+  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+  }) {
+    // code...
+
+    // if the url is internal, we strip the domain
+    const url =
+      item.url.includes('myshopify.com') ||
+      item.url.includes(publicStoreDomain) ||
+  +   item.url.includes(primaryDomainUrl)
+        ? new URL(item.url).pathname
+        : item.url;
+
+     // ...code
+
+    );
+  }
+  ```
+
+  3. Update the `Footer` component to accept a `shop` prop
+
+  ```diff
+  export function Footer({
+    menu,
+  + shop,
+  }: FooterQuery & {shop: HeaderQuery['shop']}) {
+    return (
+      <footer className="footer">
+  -      <FooterMenu menu={menu} />
+  +      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
+      </footer>
+    );
+  }
+  ```
+
+  4. Update `Layout.tsx` to pass the `shop` prop
+
+  ```diff
+  export function Layout({
+    cart,
+    children = null,
+    footer,
+    header,
+    isLoggedIn,
+  }: LayoutProps) {
+    return (
+      <>
+        <CartAside cart={cart} />
+        <SearchAside />
+        <MobileMenuAside menu={header.menu} shop={header.shop} />
+        <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
+        <main>{children}</main>
+        <Suspense>
+          <Await resolve={footer}>
+  -          {(footer) => <Footer menu={footer.menu}  />}
+  +          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
+          </Await>
+        </Suspense>
+      </>
+    );
+  }
+  ```
+
+### Patch Changes
+
+- If you are calling `useMatches()` in different places of your app to access the data returned by the root loader, you may want to update it to the following pattern to enhance types: ([#1289](https://github.com/Shopify/hydrogen/pull/1289)) by [@frandiox](https://github.com/frandiox)
+
+  ```ts
+  // root.tsx
+
+  import {useMatches} from '@remix-run/react';
+  import {type SerializeFrom} from '@shopify/remix-oxygen';
+
+  export const useRootLoaderData = () => {
+    const [root] = useMatches();
+    return root?.data as SerializeFrom<typeof loader>;
+  };
+
+  export function loader(context) {
+    // ...
+  }
+  ```
+
+  This way, you can import `useRootLoaderData()` anywhere in your app and get the correct type for the data returned by the root loader.
+
+- Updated dependencies [[`81400439`](https://github.com/Shopify/hydrogen/commit/814004397c1d17ef0a53a425ed28a42cf67765cf), [`a6f397b6`](https://github.com/Shopify/hydrogen/commit/a6f397b64dc6a0d856cb7961731ee1f86bf80292), [`3464ec04`](https://github.com/Shopify/hydrogen/commit/3464ec04a084e1ceb30ee19874dc1b9171ce2b34), [`7fc088e2`](https://github.com/Shopify/hydrogen/commit/7fc088e21bea47840788cb7c60f873ce1f253128), [`867e0b03`](https://github.com/Shopify/hydrogen/commit/867e0b033fc9eb04b7250baea97d8fd49d26ccca), [`ad45656c`](https://github.com/Shopify/hydrogen/commit/ad45656c5f663cc1a60eab5daab4da1dfd0e6cc3), [`f24e3424`](https://github.com/Shopify/hydrogen/commit/f24e3424c8e2b363b181b71fcbd3e45f696fdd3f), [`66a48573`](https://github.com/Shopify/hydrogen/commit/66a4857387148b6a104df5783314c74aca8aada0), [`0ae7cbe2`](https://github.com/Shopify/hydrogen/commit/0ae7cbe280d8351126e11dc13f35d7277d9b2d86), [`8198c1be`](https://github.com/Shopify/hydrogen/commit/8198c1befdfafb39fbcc88d71f91d21eae252973), [`ad45656c`](https://github.com/Shopify/hydrogen/commit/ad45656c5f663cc1a60eab5daab4da1dfd0e6cc3)]:
+  - @shopify/hydrogen@2023.10.0
+  - @shopify/remix-oxygen@2.0.0
+  - @shopify/cli-hydrogen@6.0.0

app/components/Aside.tsx

@@ -0,0 +1,47 @@
+/**
+ * A side bar component with Overlay that works without JavaScript.
+ * @example
+ * ```jsx
+ * <Aside id="search-aside" heading="SEARCH">
+ *  <input type="search" />
+ *  ...
+ * </Aside>
+ * ```
+ */
+export function Aside({
+  children,
+  heading,
+  id = 'aside',
+}: {
+  children?: React.ReactNode;
+  heading: React.ReactNode;
+  id?: string;
+}) {
+  return (
+    <div aria-modal className="overlay" id={id} role="dialog">
+      <button
+        className="close-outside"
+        onClick={() => {
+          history.go(-1);
+          window.location.hash = '';
+        }}
+      />
+      <aside>
+        <header>
+          <h3>{heading}</h3>
+          <CloseAside />
+        </header>
+        <main>{children}</main>
+      </aside>
+    </div>
+  );
+}
+
+function CloseAside() {
+  return (
+    /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+    <a className="close" href="#" onChange={() => history.go(-1)}>
+      &times;
+    </a>
+  );
+}