@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/THEME_CUSTOMIZATION.md

@@ -0,0 +1,245 @@
+# Theme Customization Guide
+
+This guide explains how to customize the theme colors and appearance of your storefront.
+
+## Overview
+
+The storefront uses a theme system based on CSS variables and Tailwind CSS v4. The theme supports:
+- Light mode
+- Dark mode
+- System preference detection
+- Smooth transitions between themes
+- Persistent theme selection (localStorage)
+
+## Theme Configuration
+
+The main theme configuration is located in `lib/theme/theme-config.ts`:
+
+```typescript
+export const themeConfig = {
+  defaultTheme: "system",
+  themes: ["light", "dark", "system"],
+  enableSystem: true,
+  disableTransitionOnChange: false,
+  storageKey: "doswiftly-theme",
+  attribute: "class",
+  colors: {
+    light: { /* ... */ },
+    dark: { /* ... */ }
+  }
+}
+```
+
+## Customizing Colors
+
+### Method 1: Update CSS Variables (Recommended)
+
+Edit `app/globals.css` to change theme colors:
+
+```css
+@theme {
+  /* Light mode colors */
+  --color-primary: rgb(59 130 246); /* Change this */
+  --color-primary-foreground: rgb(255 255 255);
+  /* ... other colors */
+}
+
+.dark {
+  /* Dark mode colors */
+  --color-primary: rgb(96 165 250); /* Change this */
+  --color-primary-foreground: rgb(15 23 42);
+  /* ... other colors */
+}
+```
+
+### Method 2: Update Theme Config
+
+Edit `lib/theme/theme-config.ts`:
+
+```typescript
+export const themeConfig = {
+  // ...
+  colors: {
+    light: {
+      primary: "220 90% 56%", // HSL format
+      // ...
+    },
+    dark: {
+      primary: "220 90% 70%",
+      // ...
+    }
+  }
+}
+```
+
+## Available Color Variables
+
+The following CSS variables are available for customization:
+
+### Core Colors
+- `--color-background` - Main background color
+- `--color-foreground` - Main text color
+- `--color-primary` - Primary brand color
+- `--color-primary-foreground` - Text on primary color
+- `--color-secondary` - Secondary brand color
+- `--color-secondary-foreground` - Text on secondary color
+
+### UI Colors
+- `--color-muted` - Muted background (for disabled states, etc.)
+- `--color-muted-foreground` - Muted text color
+- `--color-accent` - Accent color (for highlights)
+- `--color-accent-foreground` - Text on accent color
+- `--color-border` - Border color
+- `--color-ring` - Focus ring color
+
+### Component Colors
+- `--color-card` - Card background
+- `--color-card-foreground` - Card text
+- `--color-destructive` - Error/danger color
+- `--color-destructive-foreground` - Text on destructive color
+
+## Brand Color Examples
+
+### Blue Theme (Default)
+```css
+--color-primary: rgb(59 130 246); /* blue-500 */
+```
+
+### Green Theme
+```css
+--color-primary: rgb(34 197 94); /* green-500 */
+--color-accent: rgb(74 222 128); /* green-400 */
+```
+
+### Purple Theme
+```css
+--color-primary: rgb(168 85 247); /* purple-500 */
+--color-accent: rgb(192 132 252); /* purple-400 */
+```
+
+### Orange Theme
+```css
+--color-primary: rgb(249 115 22); /* orange-500 */
+--color-accent: rgb(251 146 60); /* orange-400 */
+```
+
+## Theme Switcher Components
+
+Three theme switcher variants are available:
+
+### 1. Simple Toggle (Default)
+```tsx
+import { ThemeSwitcher } from "@/components/layout/theme-switcher";
+
+<ThemeSwitcher />
+```
+
+### 2. Dropdown Menu
+```tsx
+import { ThemeSwitcherDropdown } from "@/components/layout/theme-switcher";
+
+<ThemeSwitcherDropdown />
+```
+
+### 3. Compact Buttons
+```tsx
+import { ThemeSwitcherCompact } from "@/components/layout/theme-switcher";
+
+<ThemeSwitcherCompact showLabel />
+```
+
+## Programmatic Theme Control
+
+Use the `useTheme` hook from `next-themes`:
+
+```tsx
+"use client";
+
+import { useTheme } from "next-themes";
+
+export function MyComponent() {
+  const { theme, setTheme, systemTheme } = useTheme();
+  
+  return (
+    <button onClick={() => setTheme("dark")}>
+      Switch to Dark Mode
+    </button>
+  );
+}
+```
+
+## Disable Theme Transitions
+
+To disable transitions when theme changes (prevents flash):
+
+```typescript
+// lib/theme/theme-config.ts
+export const themeConfig = {
+  // ...
+  disableTransitionOnChange: true, // Set to true
+}
+```
+
+## Custom Theme Storage
+
+To use a different storage key:
+
+```typescript
+// lib/theme/theme-config.ts
+export const themeConfig = {
+  // ...
+  storageKey: "my-custom-theme-key",
+}
+```
+
+## Force a Specific Theme
+
+To force light or dark mode without system detection:
+
+```typescript
+// lib/theme/theme-config.ts
+export const themeConfig = {
+  defaultTheme: "light", // or "dark"
+  enableSystem: false, // Disable system detection
+}
+```
+
+## Testing Themes
+
+1. **Manual Testing**: Use the theme switcher in the header
+2. **Browser DevTools**: Toggle dark mode in DevTools
+3. **System Preference**: Change your OS theme settings
+
+## Troubleshooting
+
+### Theme Flashing on Page Load
+
+Add `suppressHydrationWarning` to the `<html>` tag (already done in `app/layout.tsx`):
+
+```tsx
+<html lang="en" suppressHydrationWarning>
+```
+
+### Theme Not Persisting
+
+Check that localStorage is enabled and the storage key is correct in `theme-config.ts`.
+
+### Colors Not Updating
+
+1. Clear browser cache
+2. Restart dev server
+3. Check CSS variable names match in both `globals.css` and components
+
+## Best Practices
+
+1. **Use CSS Variables**: Always use CSS variables instead of hardcoded colors
+2. **Test Both Themes**: Ensure your custom colors work in both light and dark mode
+3. **Maintain Contrast**: Ensure sufficient contrast for accessibility (WCAG AA)
+4. **Consistent Naming**: Keep color variable names consistent across themes
+5. **Document Changes**: Document any custom color choices for your team
+
+## Resources
+
+- [next-themes Documentation](https://github.com/pacocoursey/next-themes)
+- [Tailwind CSS v4 Documentation](https://tailwindcss.com/docs)
+- [WCAG Contrast Checker](https://webaim.org/resources/contrastchecker/)

package/templates/storefront-nextjs-shadcn/app/about/page.tsx

@@ -0,0 +1,34 @@
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+
+export default function AboutPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+      
+      <div className="mx-auto max-w-3xl">
+        <h1 className="mb-6 text-4xl font-bold text-foreground">About Us</h1>
+        
+        <div className="prose prose-gray max-w-none">
+          <p className="text-lg text-muted-foreground">
+            Welcome to our store! We are dedicated to providing you with the best products and exceptional customer service.
+          </p>
+          
+          <h2 className="mt-8 text-2xl font-semibold text-foreground">Our Story</h2>
+          <p className="text-muted-foreground">
+            Founded with a passion for quality and customer satisfaction, we've been serving customers worldwide with carefully curated products.
+          </p>
+          
+          <h2 className="mt-8 text-2xl font-semibold text-foreground">Our Mission</h2>
+          <p className="text-muted-foreground">
+            To provide high-quality products at competitive prices while delivering an exceptional shopping experience.
+          </p>
+          
+          <h2 className="mt-8 text-2xl font-semibold text-foreground">Contact Us</h2>
+          <p className="text-muted-foreground">
+            Have questions? Feel free to reach out to our customer support team.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/account/addresses/page.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { getGraphQLClient } from "@/lib/graphql/client";
+import { useAuthStore } from "@/stores/auth-store";
+import {
+  CustomerDocument,
+  CustomerAddressCreateDocument,
+  CustomerAddressUpdateDocument,
+  CustomerAddressDeleteDocument,
+  CustomerDefaultAddressUpdateDocument,
+} from "@/generated/graphql";
+import { Button } from "@/components/ui/button";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import {
+  AddressList,
+  type Address,
+} from "@/components/account/address-list";
+import {
+  AddressForm,
+  type AddressFormData,
+} from "@/components/account/address-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export default function AddressesPage() {
+  const client = getGraphQLClient();
+  const queryClient = useQueryClient();
+  const { accessToken } = useAuthStore();
+
+  // Fetch customer with addresses
+  const { data: customerData, isLoading } = useQuery({
+    queryKey: ["customer", "addresses", accessToken],
+    queryFn: async () => {
+      if (!accessToken) return null;
+      const result = await client.request(CustomerDocument, {
+        customerAccessToken: accessToken,
+      });
+      return result.customer;
+    },
+    enabled: !!accessToken,
+  });
+
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [editingAddress, setEditingAddress] = useState<Address | undefined>();
+
+  // Delete address mutation
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      return client.request(CustomerAddressDeleteDocument, {
+        id,
+        customerAccessToken: accessToken!,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
+    },
+  });
+
+  // Set default address mutation
+  const setDefaultMutation = useMutation({
+    mutationFn: async (addressId: string) => {
+      return client.request(CustomerDefaultAddressUpdateDocument, {
+        addressId,
+        customerAccessToken: accessToken!,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
+    },
+  });
+
+  // Create/Update address mutation
+  const saveMutation = useMutation({
+    mutationFn: async ({
+      id,
+      address,
+    }: {
+      id?: string;
+      address: any;
+    }) => {
+      if (id) {
+        return client.request(CustomerAddressUpdateDocument, {
+          id,
+          address,
+          customerAccessToken: accessToken!,
+        });
+      } else {
+        return client.request(CustomerAddressCreateDocument, {
+          address,
+          customerAccessToken: accessToken!,
+        });
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
+      setIsFormOpen(false);
+    },
+  });
+
+  const addresses = customerData?.addresses?.edges?.map((edge) => ({
+    id: edge.node.id,
+    firstName: edge.node.firstName || "",
+    lastName: edge.node.lastName || "",
+    company: edge.node.company || "",
+    address1: edge.node.address1 || "",
+    address2: edge.node.address2 || "",
+    city: edge.node.city || "",
+    province: edge.node.province || "",
+    zip: edge.node.zip || "",
+    country: edge.node.country || "",
+    phone: edge.node.phone || "",
+    isDefault: edge.node.id === customerData?.defaultAddress?.id,
+  })) || [];
+
+  const handleAdd = () => {
+    setEditingAddress(undefined);
+    setIsFormOpen(true);
+  };
+
+  const handleEdit = (address: Address) => {
+    setEditingAddress(address);
+    setIsFormOpen(true);
+  };
+
+  const handleDelete = (id: string) => {
+    if (confirm("Are you sure you want to delete this address?")) {
+      deleteMutation.mutate(id);
+    }
+  };
+
+  const handleSetDefault = (id: string) => {
+    setDefaultMutation.mutate(id);
+  };
+
+  const handleSubmit = async (data: AddressFormData) => {
+    const address = {
+      firstName: data.firstName,
+      lastName: data.lastName,
+      company: data.company || null,
+      address1: data.address1,
+      address2: data.address2 || null,
+      city: data.city,
+      province: data.province,
+      zip: data.zip,
+      country: data.country,
+      phone: data.phone || null,
+    };
+
+    await saveMutation.mutateAsync({
+      id: editingAddress?.id,
+      address,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="animate-pulse space-y-4">
+          <div className="h-8 bg-muted rounded w-1/4"></div>
+          <div className="h-64 bg-muted rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Addresses</h1>
+          <p className="mt-2 text-muted-foreground">
+            Manage your shipping and billing addresses
+          </p>
+        </div>
+        <Button onClick={handleAdd}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Address
+        </Button>
+      </div>
+
+      <AddressList
+        addresses={addresses}
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+        onSetDefault={handleSetDefault}
+        onAdd={handleAdd}
+      />
+
+      {/* Address Form Dialog */}
+      <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {editingAddress ? "Edit Address" : "Add New Address"}
+            </DialogTitle>
+          </DialogHeader>
+          <AddressForm
+            address={editingAddress}
+            onSubmit={handleSubmit}
+            onCancel={() => setIsFormOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}