@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/stores/wishlist-store.ts

@@ -0,0 +1,291 @@
+/**
+ * Wishlist Store
+ *
+ * Zustand store for managing customer wishlists.
+ * Syncs with backend GraphQL API when customer is authenticated.
+ *
+ * Features:
+ * - Optimistic UI updates (local state first)
+ * - Backend sync when authenticated
+ * - LocalStorage persistence for anonymous users
+ * - Multiple wishlist support
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface WishlistItem {
+  id: string;
+  productId: string;
+  variantId?: string;
+  productTitle: string;
+  variantTitle?: string;
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  priceAtAdd: {
+    amount: string;
+    currencyCode: string;
+  };
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+  notifyOnSale: boolean;
+  notifyOnRestock: boolean;
+  addedAt: Date;
+}
+
+export interface Wishlist {
+  id: string;
+  name: string;
+  isPublic: boolean;
+  shareToken?: string;
+  items: WishlistItem[];
+  itemCount: number;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface WishlistState {
+  // State
+  wishlists: Wishlist[];
+  activeWishlistId: string | null;
+  isHydrated: boolean;
+  isSyncing: boolean;
+
+  // Actions
+  setWishlists: (wishlists: Wishlist[]) => void;
+  setActiveWishlist: (wishlistId: string | null) => void;
+  addWishlist: (wishlist: Wishlist) => void;
+  removeWishlist: (wishlistId: string) => void;
+  addItem: (wishlistId: string, item: Omit<WishlistItem, 'id' | 'addedAt'>) => void;
+  removeItem: (wishlistId: string, itemId: string) => void;
+  updateItem: (wishlistId: string, itemId: string, updates: Partial<WishlistItem>) => void;
+  clearWishlist: (wishlistId: string) => void;
+  clearAll: () => void;
+  setSyncing: (syncing: boolean) => void;
+
+  // Computed
+  getActiveWishlist: () => Wishlist | undefined;
+  getWishlistById: (wishlistId: string) => Wishlist | undefined;
+  isInWishlist: (productId: string, variantId?: string) => boolean;
+  getWishlistForProduct: (productId: string, variantId?: string) => Wishlist | undefined;
+  getTotalItems: () => number;
+}
+
+// Generate a temporary ID for local items before sync
+const generateTempId = () => `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+// Default wishlist name
+const DEFAULT_WISHLIST_NAME = 'My Wishlist';
+
+export const useWishlistStore = create<WishlistState>()(
+  persist(
+    (set, get) => ({
+      wishlists: [],
+      activeWishlistId: null,
+      isHydrated: false,
+      isSyncing: false,
+
+      setWishlists: (wishlists: Wishlist[]) => {
+        set({ wishlists });
+        // Set active wishlist to first one if not set
+        if (!get().activeWishlistId && wishlists.length > 0) {
+          set({ activeWishlistId: wishlists[0].id });
+        }
+      },
+
+      setActiveWishlist: (wishlistId: string | null) => {
+        set({ activeWishlistId: wishlistId });
+      },
+
+      addWishlist: (wishlist: Wishlist) => {
+        set((state) => ({
+          wishlists: [...state.wishlists, wishlist],
+          activeWishlistId: state.activeWishlistId || wishlist.id,
+        }));
+      },
+
+      removeWishlist: (wishlistId: string) => {
+        set((state) => {
+          const remaining = state.wishlists.filter((w) => w.id !== wishlistId);
+          return {
+            wishlists: remaining,
+            activeWishlistId:
+              state.activeWishlistId === wishlistId
+                ? remaining[0]?.id || null
+                : state.activeWishlistId,
+          };
+        });
+      },
+
+      addItem: (wishlistId: string, item) => {
+        set((state) => {
+          // Find or create default wishlist
+          let wishlists = [...state.wishlists];
+          let targetWishlistId = wishlistId;
+
+          // If no wishlist exists, create a default one
+          if (wishlists.length === 0) {
+            const newWishlist: Wishlist = {
+              id: generateTempId(),
+              name: DEFAULT_WISHLIST_NAME,
+              isPublic: false,
+              items: [],
+              itemCount: 0,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            };
+            wishlists = [newWishlist];
+            targetWishlistId = newWishlist.id;
+          }
+
+          return {
+            wishlists: wishlists.map((w) => {
+              if (w.id === targetWishlistId) {
+                // Check if item already exists
+                const existingItem = w.items.find(
+                  (i) =>
+                    i.productId === item.productId &&
+                    (item.variantId ? i.variantId === item.variantId : !i.variantId)
+                );
+
+                if (existingItem) {
+                  // Update existing item
+                  return {
+                    ...w,
+                    items: w.items.map((i) =>
+                      i.id === existingItem.id ? { ...i, ...item } : i
+                    ),
+                    updatedAt: new Date(),
+                  };
+                }
+
+                // Add new item
+                const newItem: WishlistItem = {
+                  ...item,
+                  id: generateTempId(),
+                  addedAt: new Date(),
+                };
+
+                return {
+                  ...w,
+                  items: [...w.items, newItem],
+                  itemCount: w.itemCount + 1,
+                  updatedAt: new Date(),
+                };
+              }
+              return w;
+            }),
+            activeWishlistId: state.activeWishlistId || targetWishlistId,
+          };
+        });
+      },
+
+      removeItem: (wishlistId: string, itemId: string) => {
+        set((state) => ({
+          wishlists: state.wishlists.map((w) => {
+            if (w.id === wishlistId) {
+              return {
+                ...w,
+                items: w.items.filter((i) => i.id !== itemId),
+                itemCount: Math.max(0, w.itemCount - 1),
+                updatedAt: new Date(),
+              };
+            }
+            return w;
+          }),
+        }));
+      },
+
+      updateItem: (wishlistId: string, itemId: string, updates: Partial<WishlistItem>) => {
+        set((state) => ({
+          wishlists: state.wishlists.map((w) => {
+            if (w.id === wishlistId) {
+              return {
+                ...w,
+                items: w.items.map((i) =>
+                  i.id === itemId ? { ...i, ...updates } : i
+                ),
+                updatedAt: new Date(),
+              };
+            }
+            return w;
+          }),
+        }));
+      },
+
+      clearWishlist: (wishlistId: string) => {
+        set((state) => ({
+          wishlists: state.wishlists.map((w) => {
+            if (w.id === wishlistId) {
+              return {
+                ...w,
+                items: [],
+                itemCount: 0,
+                updatedAt: new Date(),
+              };
+            }
+            return w;
+          }),
+        }));
+      },
+
+      clearAll: () => {
+        set({ wishlists: [], activeWishlistId: null });
+      },
+
+      setSyncing: (syncing: boolean) => {
+        set({ isSyncing: syncing });
+      },
+
+      getActiveWishlist: () => {
+        const state = get();
+        return state.wishlists.find((w) => w.id === state.activeWishlistId);
+      },
+
+      getWishlistById: (wishlistId: string) => {
+        return get().wishlists.find((w) => w.id === wishlistId);
+      },
+
+      isInWishlist: (productId: string, variantId?: string) => {
+        return get().wishlists.some((w) =>
+          w.items.some(
+            (i) =>
+              i.productId === productId &&
+              (variantId ? i.variantId === variantId : true)
+          )
+        );
+      },
+
+      getWishlistForProduct: (productId: string, variantId?: string) => {
+        return get().wishlists.find((w) =>
+          w.items.some(
+            (i) =>
+              i.productId === productId &&
+              (variantId ? i.variantId === variantId : true)
+          )
+        );
+      },
+
+      getTotalItems: () => {
+        return get().wishlists.reduce((total, w) => total + w.itemCount, 0);
+      },
+    }),
+    {
+      name: 'wishlist-storage',
+      // Persist all wishlists
+      partialize: (state) => ({
+        wishlists: state.wishlists,
+        activeWishlistId: state.activeWishlistId,
+      }),
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          state.isHydrated = true;
+        }
+      },
+    }
+  )
+);

package/templates/storefront-nextjs-shadcn/tailwind.config.ts

@@ -0,0 +1,111 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Primary brand color - customize for your store
+        primary: {
+          DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
+          foreground: 'rgb(var(--primary-foreground) / <alpha-value>)',
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+        // Secondary color for accents
+        secondary: {
+          DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
+          foreground: 'rgb(var(--secondary-foreground) / <alpha-value>)',
+        },
+        // Accent color for highlights
+        accent: {
+          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
+          foreground: 'rgb(var(--accent-foreground) / <alpha-value>)',
+        },
+        // Background and foreground
+        background: 'rgb(var(--background) / <alpha-value>)',
+        foreground: 'rgb(var(--foreground) / <alpha-value>)',
+        // Muted colors for subtle elements
+        muted: {
+          DEFAULT: 'rgb(var(--muted) / <alpha-value>)',
+          foreground: 'rgb(var(--muted-foreground) / <alpha-value>)',
+        },
+        // Border color
+        border: 'rgb(var(--border) / <alpha-value>)',
+        // Ring color for focus states
+        ring: 'rgb(var(--ring) / <alpha-value>)',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: '1rem',
+          sm: '2rem',
+          lg: '4rem',
+          xl: '5rem',
+          '2xl': '6rem',
+        },
+      },
+      // Commerce-specific spacing
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+        '128': '32rem',
+      },
+      // Product card aspect ratios
+      aspectRatio: {
+        'product': '4 / 5',
+        'product-wide': '16 / 9',
+        'product-square': '1 / 1',
+      },
+      // Animation for cart and interactions
+      animation: {
+        'slide-in': 'slideIn 0.3s ease-out',
+        'slide-out': 'slideOut 0.3s ease-in',
+        'fade-in': 'fadeIn 0.2s ease-out',
+        'bounce-subtle': 'bounceSubtle 0.5s ease-out',
+      },
+      keyframes: {
+        slideIn: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        slideOut: {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        bounceSubtle: {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.05)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/templates/storefront-nextjs-shadcn/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/storefront-nextjs-shadcn/wrangler.toml

@@ -0,0 +1,9 @@
+#:schema node_modules/wrangler/config-schema.json
+
+name = "storefront-template-{{PROJECT_NAME}}"
+main = ".open-next/worker.js"
+compatibility_date = "2024-09-23"
+compatibility_flags = ["nodejs_compat"]
+
+# Assets directory for static files
+assets = { directory = ".open-next/assets", binding = "ASSETS" }