Prettier works!

components/cart/actions.ts

@@ -1,13 +1,7 @@
 'use server';
 
 import { TAGS } from 'lib/constants';
-import {
-  addToCart,
-  createCart,
-  getCart,
-  removeFromCart,
-  updateCart,
-} from 'lib/shopify';
+import { 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, [
-      { merchandiseId: selectedVariantId, quantity: 1 }
-    ]);
+    await addToCart(cartId, [{ 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 ? (
-          <LoadingDots className="mb-3 bg-white" />
-        ) : (
-          <PlusIcon className="h-5" />
-        )}
+        {pending ? <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
-        availableForSale={availableForSale}
-        selectedVariantId={selectedVariantId}
-      />
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>

components/cart/delete-item-button.tsx

@@ -13,29 +13,31 @@ import {
 
 function SubmitButton() {
   const { pending } = useFormStatus();
-  
+
   return (
     <button
       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', {
-        'cursor-not-allowed px-0': pending
-      })}
+      className={clsx(
+        '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" />        
+        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
       )}
     </button>
   );
 }
 
 export function DeleteItemButton({ item }: { item: CartItem }) {
   const [message, formAction] = useFormState(removeItem, null);
-  const itemId = item.id;  
+  const itemId = item.id;
   const actionWithVariant = formAction.bind(null, itemId);
 
   return (

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

@@ -8,57 +8,49 @@ 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' }) {
   const { pending } = useFormStatus();
 
   return (
     <button
-      type='submit'
-      aria-label={
-        type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'
-      }
+      type="submit"
+      aria-label={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({
-  item,
-  type,
-}: {
-  item: CartItem;
-  type: 'plus' | 'minus';
-}) {
+export function EditItemQuantityButton({ 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"

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
-  // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
-  plugins: [require('prettier-plugin-tailwindcss')]
+  plugins: ['prettier-plugin-tailwindcss']
 };