Prettier works!

components/cart/actions.ts

@@ -1,13 +1,7 @@
 'use server';
 
 import { TAGS } from 'lib/constants';
-import {
+import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
-  addToCart,
-  createCart,
-  getCart,
-  removeFromCart,
-  updateCart,
-} from 'lib/shopify';
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 
@@ -30,9 +24,7 @@ export async function addItem(prevState: any, selectedVariantId: string) {
   }
 
   try {
-    await addToCart(cartId, [
+    await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity: 1 }]);
-      { merchandiseId: selectedVariantId, quantity: 1 }
-    ]);
     revalidateTag(TAGS.cart);
   } catch (e) {
     return 'Error adding item to cart';
@@ -81,7 +73,7 @@ export async function updateItemQuantity(
       {
         id: lineId,
         merchandiseId: variantId,
-        quantity,
+        quantity
       }
     ]);
     revalidateTag(TAGS.cart);

components/cart/add-to-cart.tsx

@@ -58,11 +58,7 @@ function SubmitButton({
       })}
     >
       <div className="absolute left-0 ml-4">
-        {pending ? (
+        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
-          <LoadingDots className="mb-3 bg-white" />
-        ) : (
-          <PlusIcon className="h-5" />
-        )}
       </div>
       Add To Cart
     </button>
@@ -89,10 +85,7 @@ export function AddToCart({
 
   return (
     <form action={actionWithVariant}>
-      <SubmitButton
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
-        availableForSale={availableForSale}
-        selectedVariantId={selectedVariantId}
-      />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>

components/cart/delete-item-button.tsx

@@ -19,13 +19,15 @@ function SubmitButton() {
       type="submit"
       aria-label="Remove cart item"
       aria-disabled={pending}
-      className={clsx('ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200', {
+      className={clsx(
-        'cursor-not-allowed px-0': pending
+        'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
-      })}
+        {
+          'cursor-not-allowed px-0': pending
+        }
+      )}
     >
       {pending ? (
         <LoadingDots className="bg-white" />
-        
       ) : (
         <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
       )}

components/cart/edit-item-quantity-button.tsx

@@ -8,7 +8,7 @@ import type { CartItem } from 'lib/shopify/types';
 import {
   // @ts-ignore
   experimental_useFormState as useFormState,
-  experimental_useFormStatus as useFormStatus,
+  experimental_useFormStatus as useFormStatus
 } from 'react-dom';
 
 function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
@@ -16,49 +16,41 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
 
   return (
     <button
-      type='submit'
+      type="submit"
-      aria-label={
+      aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
-        type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'
-      }
       aria-disabled={pending}
       className={clsx(
         'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
         {
           'cursor-not-allowed': pending,
-          'ml-auto': type === 'minus',
+          'ml-auto': type === 'minus'
-        },
+        }
       )}
     >
       {pending ? (
-        <LoadingDots className='bg-black dark:bg-white' />
+        <LoadingDots className="bg-black dark:bg-white" />
       ) : type === 'plus' ? (
-        <PlusIcon className='h-4 w-4 dark:text-neutral-500' />
+        <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
       ) : (
-        <MinusIcon className='h-4 w-4 dark:text-neutral-500' />
+        <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
       )}
     </button>
   );
 }
 
-export function EditItemQuantityButton({
+export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
-  item,
-  type,
-}: {
-  item: CartItem;
-  type: 'plus' | 'minus';
-}) {
   const [message, formAction] = useFormState(updateItemQuantity, null);
   const payload = {
     lineId: item.id,
     variantId: item.merchandise.id,
-    quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1,
+    quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
   };
   const actionWithVariant = formAction.bind(null, payload);
 
   return (
     <form action={actionWithVariant}>
       <SubmitButton type={type} />
-      <p aria-live='polite' className='sr-only' role='status'>
+      <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>
     </form>

components/layout/footer.tsx

@@ -59,7 +59,7 @@ export default async function Footer() {
           <p>Designed in California</p>
           <p className="md:ml-auto">
             <a href="https://vercel.com" className="text-black dark:text-white">
-            Crafted by ▲ Vercel
+              Crafted by ▲ Vercel
             </a>
           </p>
         </div>

components/layout/search/filter/index.tsx

@@ -19,7 +19,11 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
   return (
     <>
       <nav>
-        {title ? <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">{title}</h3> : null}
+        {title ? (
+          <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
+            {title}
+          </h3>
+        ) : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />
         </ul>

lib/constants.ts

@@ -23,7 +23,7 @@ export const sorting: SortFilterItem[] = [
 export const TAGS = {
   collections: 'collections',
   products: 'products',
-  cart: 'cart',
+  cart: 'cart'
 };
 
 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "packageManager": "pnpm@8.2.0",
+  "packageManager": "pnpm@8.7.0",
   "engines": {
     "node": ">=18",
     "pnpm": ">=7"

pnpm-lock.yaml

@@ -337,8 +337,8 @@ packages:
       fastq: 1.15.0
     dev: true
 
-  /@rushstack/eslint-patch@1.5.0:
+  /@rushstack/eslint-patch@1.5.1:
-    resolution: {integrity: sha512-EF3948ckf3f5uPgYbQ6GhyA56Dmv8yg0+ir+BroRjwdxyZJsekhZzawOecC2rOTPCz173t7ZcR1HHZu0dZgOCw==}
+    resolution: {integrity: sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==}
     dev: true
 
   /@swc/helpers@0.5.2:
@@ -379,8 +379,8 @@ packages:
     resolution: {integrity: sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A==}
     dev: true
 
-  /@types/prop-types@15.7.7:
+  /@types/prop-types@15.7.8:
-    resolution: {integrity: sha512-FbtmBWCcSa2J4zL781Zf1p5YUBXQomPEcep9QZCfRfQgTxz3pJWiDFLebohZ9fFntX5ibzOkSsrJ0TEew8cAog==}
+    resolution: {integrity: sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==}
     dev: true
 
   /@types/react-dom@18.2.8:
@@ -392,7 +392,7 @@ packages:
   /@types/react@18.2.23:
     resolution: {integrity: sha512-qHLW6n1q2+7KyBEYnrZpcsAmU/iiCh9WGCKgXvMxx89+TYdJWRjZohVIo9XTcoLhfX3+/hP0Pbulu3bCZQ9PSA==}
     dependencies:
-      '@types/prop-types': 15.7.7
+      '@types/prop-types': 15.7.8
       '@types/scheduler': 0.16.4
       csstype: 3.1.2
     dev: true
@@ -1092,7 +1092,7 @@ packages:
         optional: true
     dependencies:
       '@next/eslint-plugin-next': 13.5.3
-      '@rushstack/eslint-patch': 1.5.0
+      '@rushstack/eslint-patch': 1.5.1
       '@typescript-eslint/parser': 6.7.3(eslint@8.50.0)(typescript@5.2.2)
       eslint: 8.50.0
       eslint-import-resolver-node: 0.3.9

prettier.config.js

@@ -1,10 +1,9 @@
+/** @type {import('prettier').Config} */
 module.exports = {
   singleQuote: true,
   arrowParens: 'always',
   trailingComma: 'none',
   printWidth: 100,
   tabWidth: 2,
-  // pnpm doesn't support plugin autoloading
+  plugins: ['prettier-plugin-tailwindcss']
-  // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
-  plugins: [require('prettier-plugin-tailwindcss')]
 };