Format code

.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['standard-with-typescript', 'plugin:prettier/recommended'],
   parserOptions: {
-    project: './tsconfig.json'
-  }
+    project: './tsconfig.json',
+  },
 }

.prettierrc.cjs

@@ -1,13 +1,18 @@
 module.exports = {
   singleQuote: true,
   semi: false,
-  plugins: [require('@shopify/prettier-plugin-liquid/standalone'), require('prettier-plugin-tailwindcss')],
+  printWidth: 80,
+  plugins: [
+    require('@shopify/prettier-plugin-liquid/standalone'),
+    require('prettier-plugin-tailwindcss'),
+  ],
   overrides: [
     {
       files: '*.liquid',
       options: {
         parser: 'liquid-html',
         singleQuote: false,
+        printWidth: 120,
       },
     },
   ],

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["shopify.theme-check-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
+  "recommendations": [
+    "shopify.theme-check-vscode",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode"
+  ]
 }

frontend/entrypoints/theme.css

@@ -1,6 +1,6 @@
-@import "tailwindcss/base";
-@import "@/styles/base.css";
-@import "tailwindcss/components";
-@import "@/styles/components";
-@import "tailwindcss/utilities";
-@import "@/styles/utilities";
+@import 'tailwindcss/base';
+@import '@/styles/base.css';
+@import 'tailwindcss/components';
+@import '@/styles/components';
+@import 'tailwindcss/utilities';
+@import '@/styles/utilities';

frontend/islands/cart-drawer-items.js

@@ -1,18 +1,18 @@
 import CartItems from './cart-items'
 
 class CartDrawerItems extends CartItems {
-  getSectionsToRender () {
+  getSectionsToRender() {
     return [
       {
         id: 'CartDrawer',
         section: 'cart-drawer',
-        selector: '[tabindex="-1"]'
+        selector: '[tabindex="-1"]',
       },
       {
         id: 'cart-icon-bubble',
         section: 'cart-icon-bubble',
-        selector: '.shopify-section'
-      }
+        selector: '.shopify-section',
+      },
     ]
   }
 }

frontend/islands/cart-drawer.js

@@ -1,15 +1,21 @@
 import { trapFocus, removeTrapFocus } from '@/lib/a11y'
 
 class CartDrawer extends window.HTMLElement {
-  constructor () {
+  constructor() {
     super()
 
-    this.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close())
-    this.querySelector('#CartDrawer-Overlay').addEventListener('click', this.close.bind(this))
+    this.addEventListener(
+      'keyup',
+      (evt) => evt.code === 'Escape' && this.close()
+    )
+    this.querySelector('#CartDrawer-Overlay').addEventListener(
+      'click',
+      this.close.bind(this)
+    )
     this.setHeaderCartIconAccessibility()
   }
 
-  setHeaderCartIconAccessibility () {
+  setHeaderCartIconAccessibility() {
     const cartLink = document.querySelector('#cart-icon-bubble')
     cartLink.setAttribute('role', 'button')
     cartLink.setAttribute('aria-haspopup', 'dialog')
@@ -25,59 +31,72 @@ class CartDrawer extends window.HTMLElement {
     })
   }
 
-  open (triggeredBy) {
+  open(triggeredBy) {
     if (triggeredBy) this.setActiveElement(triggeredBy)
     // here the animation doesn't seem to always get triggered. A timeout seem to help
-    setTimeout(() => { this.classList.add('active') })
+    setTimeout(() => {
+      this.classList.add('active')
+    })
 
-    this.addEventListener('transitionend', () => {
-      const containerToTrapFocusOn = document.getElementById('CartDrawer')
-      const focusElement = this.querySelector('[tabindex="-1"]')
-      trapFocus(containerToTrapFocusOn, focusElement)
-    }, { once: true })
+    this.addEventListener(
+      'transitionend',
+      () => {
+        const containerToTrapFocusOn = document.getElementById('CartDrawer')
+        const focusElement = this.querySelector('[tabindex="-1"]')
+        trapFocus(containerToTrapFocusOn, focusElement)
+      },
+      { once: true }
+    )
 
     document.body.classList.add('overflow-hidden')
   }
 
-  close () {
+  close() {
     this.classList.remove('active')
     removeTrapFocus(this.activeElement)
     document.body.classList.remove('overflow-hidden')
   }
 
-  renderContents (parsedState) {
+  renderContents(parsedState) {
     this.productId = parsedState.id
-    this.getSectionsToRender().forEach(section => {
-      const sectionElement = section.selector ? document.querySelector(section.selector) : document.getElementById(section.id)
-      sectionElement.innerHTML =
-        this.getSectionInnerHTML(parsedState.sections[section.id], section.selector)
+    this.getSectionsToRender().forEach((section) => {
+      const sectionElement = section.selector
+        ? document.querySelector(section.selector)
+        : document.getElementById(section.id)
+      sectionElement.innerHTML = this.getSectionInnerHTML(
+        parsedState.sections[section.id],
+        section.selector
+      )
     })
 
     setTimeout(() => {
-      this.querySelector('#CartDrawer-Overlay').addEventListener('click', this.close.bind(this))
+      this.querySelector('#CartDrawer-Overlay').addEventListener(
+        'click',
+        this.close.bind(this)
+      )
       this.open()
     })
   }
 
-  getSectionInnerHTML (html, selector = '.shopify-section') {
+  getSectionInnerHTML(html, selector = '.shopify-section') {
     return new window.DOMParser()
       .parseFromString(html, 'text/html')
       .querySelector(selector).innerHTML
   }
 
-  getSectionsToRender () {
+  getSectionsToRender() {
     return [
       {
         id: 'cart-drawer',
-        selector: '#CartDrawer'
+        selector: '#CartDrawer',
       },
       {
-        id: 'cart-icon-bubble'
-      }
+        id: 'cart-icon-bubble',
+      },
     ]
   }
 
-  setActiveElement (element) {
+  setActiveElement(element) {
     this.activeElement = element
   }
 }