Use Shadcn

README.md

@@ -116,6 +116,7 @@ src/
 │       │   ├── credit-cards/   # Saved payment methods
 │       │   ├── orders/         # Order history
 │       │   │   └── [id]/       # Order details
+│       │   ├── register/       # Registration
 │       │   └── profile/        # Profile settings
 │       ├── cart/               # Shopping cart
 │       ├── products/           # Product listing
@@ -127,6 +128,7 @@ src/
 │   ├── products/               # ProductCard, ProductGrid, Filters
 │   └── search/                 # SearchBar
 ├── contexts/
+│   ├── AuthContext.tsx         # Client-side auth state
 │   └── CartContext.tsx         # Client-side cart state sync
 └── lib/
     ├── spree.ts                # SDK client configuration
@@ -151,8 +153,8 @@ All data fetching is done through server actions in `src/lib/data/`:
 // Products
 import { getProducts, getProduct, getProductFilters } from '@/lib/data/products'
 
-const products = await getProducts({ per_page: 12 })
-const product = await getProduct('product-slug', { includes: 'variants,images' })
+const products = await getProducts({ limit: 12 })
+const product = await getProduct('product-slug', { expand: ['variants', 'images'] })
 const filters = await getProductFilters({ taxon_id: 'txn_xxx' })
 
 // Cart
@@ -167,6 +169,13 @@ await removeCartItem('li_xxx')
 import { login, register, logout, getCustomer } from '@/lib/data/customer'
 
 const result = await login('user@example.com', 'password')
+await register({
+  email: 'user@example.com',
+  password: 'password',
+  password_confirmation: 'password',
+  first_name: 'John',
+  last_name: 'Doe',
+})
 const customer = await getCustomer()
 await logout()
 

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

next.config.ts

@@ -8,22 +8,9 @@ const nextConfig: NextConfig = {
   transpilePackages: ["@spree/next", "@spree/sdk"],
   turbopack: {
     root: __dirname,
-    rules: {
-      "*.svg": {
-        loaders: ["@svgr/webpack"],
-        as: "*.js",
-      },
-    },
-  },
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ["@svgr/webpack"],
-    });
-    return config;
   },
   images: {
-    qualities: [25, 50, 75, 100],
+    qualities: [25, 50, 75, 85, 100],
     dangerouslyAllowLocalIP: true, // Allow localhost images in development
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],