Update penny to use the app folder

.env

@@ -35,7 +35,6 @@ NEXT_PUBLIC_CONTACT_PROVIDER='gorgias'
 NEXT_PUBLIC_RECAPTCHA_SITE_KEY='6LdArl4gAAAAADf30J5nPO2hStNG8_IYrnl43RlT'
 
 # Sentry
-NEXT_PUBLIC_SENTRY_DSN='https://b3dadbce4879487b90076bf1350f8534@o4504254488313856.ingest.sentry.io/4504254630461440'
 SENTRY_ORG='penny-bz'
 SENTRY_PROJECT='penny'
 SENTRY_IGNORE_API_RESOLUTION_ERROR='1'

.env-example

@@ -45,7 +45,6 @@ NEXT_PUBLIC_DEFAULT_KLAVIYO_LIST_ID=''
 NEXT_PUBLIC_RECAPTCHA_SITE_KEY=''
 
 # Sentry
-NEXT_PUBLIC_SENTRY_DSN=''
 SENTRY_ORG=''
 SENTRY_PROJECT=''
 SENTRY_IGNORE_API_RESOLUTION_ERROR='1'

.env.local-example

@@ -1,5 +1,5 @@
 # NextAuth
-NEXTAUTH_URL='http://localhost:3000'
+NEXTAUTH_URL='http://localhost:3000/api/auth'
 # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
 NEXTAUTH_SECRET=''
 
@@ -10,17 +10,15 @@ ALLACCESS_PRIVATE_KEY=''
 GOOGLE_CLIENT_ID=''
 GOOGLE_CLIENT_SECRET=''
 
-# If you want to disable Sentry for local dev redefine this here
+# Enable Sentry logging per-environment (set up here and in your hosting provider)
 NEXT_PUBLIC_SENTRY_DSN=''
+SENTRY_AUTH_TOKEN=''
 
 # Shopify Multipass
 SHOPIFY_MULTIPASS_SECRET=''
 
-# Sentry
-SENTRY_AUTH_TOKEN=''
-
 # Playwright URL for local runs
-PLAYWRIGHT_TEST_BASE_URL='http://127.0.0.1:3000'
+PLAYWRIGHT_TEST_BASE_URL='http://localhost:3000'
 # Set a product name to use in your own tests
 PLAYWRIGHT_PRODUCT_NAME_INSTOCK=''
 PLAYWRIGHT_PRODUCT_SIZE_INSTOCK=''

.eslintignore

@@ -11,6 +11,6 @@ countries.json
 !.takeshape
 !.storybook
 !.lighthouse
-!.jest
+!.vitest
 worker
 mocks

.github/actions/run-lighthouse/action.yml

@@ -14,7 +14,7 @@ runs:
   steps:
     - name: Get audit urls
       id: audit-urls
-      uses: actions/github-script@v6.3.3
+      uses: actions/github-script@v7
       with:
         script: |
           const targetUrl = '${{ github.event.deployment_status.target_url }}';
@@ -24,17 +24,18 @@ runs:
 
     - name: Audit URLs using Lighthouse
       id: audit
-      uses: treosh/lighthouse-ci-action@v9
+      uses: treosh/lighthouse-ci-action@v11
       with:
         urls: ${{ steps.audit-urls.outputs.urls }}
         configPath: ./.lighthouse/profiles/${{ inputs.profile }}.js
         uploadArtifacts: true
+        artifactName: lighthouse-results-${{ inputs.profile }}
         temporaryPublicStorage: true
         runs: 5
 
     - name: Format Lighthouse score
       id: format
-      uses: actions/github-script@v6.3.3
+      uses: actions/github-script@v7
       with:
         script: |
           const lighthouseCommentMaker = require('./.lighthouse/lighthouseCommentMaker.js');

.github/workflows/chromatic.yml

@@ -16,17 +16,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required to retrieve git history
 
       - name: setup node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
           cache: 'npm'
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: |
             ~/.npm

.github/workflows/playwright.yml

@@ -7,30 +7,39 @@ env:
   HUSKY: 0
 
 jobs:
-  playwright-test:
-    name: Test
+  Run:
+    name: Shard ${{ matrix.shardIndex }}
     if: github.event.deployment_status.state == 'success' && github.event.deployment_status.environment == 'Preview'
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    env:
+      SHARD_INDEX: ${{ matrix.shardIndex }}
+      SHARD_TOTAL: 3
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex:
+          - 1
+          - 2
+          - 3
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
-          cache: 'npm'
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Install Playwright browsers
+      - name: Install Playwright Browsers
         run: npx playwright install --with-deps
 
       - name: Run Playwright tests
-        run: npx playwright test
+        run: npx playwright test --shard=$SHARD_INDEX/$SHARD_TOTAL
         env:
           PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
           PLAYWRIGHT_PRODUCT_NAME_INSTOCK: ${{ vars.PLAYWRIGHT_PRODUCT_NAME_INSTOCK }}
@@ -44,34 +53,48 @@ jobs:
           PLAYWRIGHT_USER_EMAIL: ${{ vars.PLAYWRIGHT_USER_EMAIL }}
           PLAYWRIGHT_USER_PASSWORD: ${{ vars.PLAYWRIGHT_USER_PASSWORD }}
 
+      - name: Move Playwright report
+        if: ${{ success() || failure() }}
+        shell: bash
+        run: |
+          mkdir blob-reports
+          mv blob-report blob-reports/blob-report-$SHARD_INDEX
+
       - name: Upload artifact
-        uses: actions/upload-artifact@v3
-        if: always()
+        uses: actions/upload-artifact@v4
+        if: ${{ success() || failure() }}
         with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
-
-  # If configured, host your playwright report on S3
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-reports
+          retention-days: 1
 
   report:
     name: Report
     if: ${{ vars.PLAYWRIGHT_S3_URL != '' && (success() || failure()) }}
     runs-on: ubuntu-latest
     needs:
-      - playwright-test
+      - Run
     env:
       HTML_REPORT_URL_PATH: reports/${{ github.sha }}/${{ github.run_attempt }}
     steps:
       - name: Download results
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
-          name: playwright-report
-          path: playwright/${{ env.HTML_REPORT_URL_PATH }}
+          path: blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge reports
+        shell: bash
+        run: |
+          mv ./blob-reports/**/*.zip ./blob-reports
+          npx playwright merge-reports --reporter html ./blob-reports
+          mkdir -p ./playwright-report-upload/$HTML_REPORT_URL_PATH
+          mv ./playwright-report/* ./playwright-report-upload/$HTML_REPORT_URL_PATH
 
       - name: Upload to S3
         run: |
-          aws s3 sync playwright s3://$S3_BUCKET
+          aws s3 sync ./playwright-report-upload s3://$S3_BUCKET
         env:
           S3_BUCKET: ${{ vars.PLAYWRIGHT_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.PLAYWRIGHT_AWS_ACCESS_KEY_ID }}
@@ -87,10 +110,10 @@ jobs:
 
       - name: Post status
         if: ${{ success() || failure() }}
-        uses: Sibz/github-status-action@v1
+        uses: guibranco/github-status-action-v2@v1.1.13
         with:
           authToken: ${{ secrets.GITHUB_TOKEN }}
           context: Playwright Report
-          state: ${{ needs.playwright-test.result }}
+          state: ${{ needs.Run.result }}
           sha: ${{ github.sha }}
           target_url: ${{ vars.PLAYWRIGHT_S3_URL }}${{ env.HTML_REPORT_URL_PATH }}/index.html

.github/workflows/test.yml

@@ -20,16 +20,16 @@ jobs:
       # Required for API access during typechecking
       TAKESHAPE_API_KEY: ${{ secrets.TAKESHAPE_API_KEY }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
           cache: 'npm'
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ~/.npm

.lighthouse/lighthouseCommentMaker.js

@@ -12,7 +12,6 @@ ${scoreRow('Performance', summary.performance)}
 ${scoreRow('Accessibility', summary.accessibility)}
 ${scoreRow('Best practices', summary['best-practices'])}
 ${scoreRow('SEO', summary.seo)}
-${scoreRow('PWA', summary.pwa)}
 `;
 }
 

.lighthouse/profiles/desktop.js

@@ -3,7 +3,7 @@ const constants = require('../constants');
 module.exports = {
   ci: {
     collect: {
-      extends: 'lighthouse:default',
+      extends: 'lighthouse:no-pwa',
       settings: {
         formFactor: 'desktop',
         throttling: constants.throttling.desktopFIOS,
@@ -18,7 +18,7 @@ module.exports = {
           'maskable-icon', // not helpful
           'unsized-images' // not helpful
         ],
-        onlyCategories: ['accessibility', 'best-practices', 'performance', 'seo', 'pwa'],
+        onlyCategories: ['accessibility', 'best-practices', 'performance', 'seo'],
         budgets: [
           {
             path: '/*',
@@ -33,13 +33,13 @@ module.exports = {
               },
               {
                 metric: 'speed-index',
-                budget: 300 // 0.3s
+                budget: 500 // 0.5s
               }
             ],
             resourceSizes: [
               {
                 resourceType: 'script',
-                budget: 300 // 300k
+                budget: 600 // 600k
               },
               {
                 resourceType: 'total',
@@ -49,7 +49,7 @@ module.exports = {
             resourceCounts: [
               {
                 resourceType: 'third-party',
-                budget: 10
+                budget: 15
               }
             ]
           }