@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/layout/mobile-menu.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X, ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface MobileMenuItem {
+  label: string;
+  href: string;
+  children?: MobileMenuItem[];
+}
+
+export interface MobileMenuProps {
+  items?: MobileMenuItem[];
+  className?: string;
+}
+
+const defaultItems: MobileMenuItem[] = [
+  {
+    label: "Products",
+    href: "/products",
+  },
+  {
+    label: "Collections",
+    href: "/collections",
+  },
+  {
+    label: "Categories",
+    href: "/categories",
+  },
+  {
+    label: "About",
+    href: "/about",
+  },
+];
+
+export function MobileMenu({ items = defaultItems, className }: MobileMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+  const pathname = usePathname();
+
+  // Close menu when route changes
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  // Prevent body scroll when menu is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  const toggleExpanded = (href: string) => {
+    const newExpanded = new Set(expandedItems);
+    if (newExpanded.has(href)) {
+      newExpanded.delete(href);
+    } else {
+      newExpanded.add(href);
+    }
+    setExpandedItems(newExpanded);
+  };
+
+  const isActive = (href: string) => {
+    if (href === "/") {
+      return pathname === "/";
+    }
+    return pathname.startsWith(href);
+  };
+
+  const renderMenuItem = (item: MobileMenuItem, level = 0) => {
+    const hasChildren = item.children && item.children.length > 0;
+    const isExpanded = expandedItems.has(item.href);
+    const active = isActive(item.href);
+
+    return (
+      <div key={item.href}>
+        <div
+          className={cn(
+            "flex items-center justify-between",
+            level > 0 && "ml-4"
+          )}
+        >
+          <Link
+            href={item.href}
+            className={cn(
+              "flex-1 py-3 text-base font-medium transition-colors",
+              active
+                ? "text-primary"
+                : "text-foreground hover:text-primary"
+            )}
+            aria-current={active ? "page" : undefined}
+          >
+            {item.label}
+          </Link>
+
+          {hasChildren && (
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                toggleExpanded(item.href);
+              }}
+              className="p-3 text-muted-foreground hover:text-foreground"
+              aria-label={`Toggle ${item.label} submenu`}
+              aria-expanded={isExpanded}
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-5 w-5" />
+              ) : (
+                <ChevronRight className="h-5 w-5" />
+              )}
+            </button>
+          )}
+        </div>
+
+        {hasChildren && isExpanded && (
+          <div className="border-l-2 border-border pl-2">
+            {item.children!.map((child) => renderMenuItem(child, level + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {/* Hamburger Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          "inline-flex items-center justify-center rounded-md p-2",
+          "text-foreground hover:bg-accent hover:text-accent-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          className
+        )}
+        aria-label="Toggle mobile menu"
+        aria-expanded={isOpen}
+        aria-controls="mobile-menu"
+      >
+        {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+      </button>
+
+      {/* Mobile Menu Overlay */}
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-40 bg-black/50"
+            onClick={() => setIsOpen(false)}
+            aria-hidden="true"
+          />
+
+          {/* Menu Panel */}
+          <div
+            id="mobile-menu"
+            className="fixed inset-y-0 left-0 z-50 w-full max-w-sm bg-background shadow-xl"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Mobile navigation"
+          >
+            <div className="flex h-full flex-col">
+              {/* Header */}
+              <div className="flex items-center justify-between border-b border-border p-4">
+                <h2 className="text-lg font-semibold">Menu</h2>
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  aria-label="Close mobile menu"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+
+              {/* Menu Items */}
+              <nav className="flex-1 overflow-y-auto p-4">
+                <div className="space-y-1">
+                  {items.map((item) => renderMenuItem(item))}
+                </div>
+              </nav>
+
+              {/* Footer */}
+              <div className="border-t border-border p-4">
+                <div className="flex flex-col gap-2">
+                  <Link
+                    href="/account"
+                    className="rounded-md bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground hover:bg-primary/90"
+                  >
+                    My Account
+                  </Link>
+                  <Link
+                    href="/cart"
+                    className="rounded-md border border-border px-4 py-2 text-center text-sm font-medium hover:bg-accent"
+                  >
+                    View Cart
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/layout/navigation.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export interface NavigationItem {
+  label: string;
+  href: string;
+  children?: NavigationItem[];
+}
+
+export interface NavigationProps {
+  items?: NavigationItem[];
+  className?: string;
+}
+
+const defaultItems: NavigationItem[] = [
+  {
+    label: "Products",
+    href: "/products",
+  },
+  {
+    label: "Collections",
+    href: "/collections",
+  },
+  {
+    label: "Categories",
+    href: "/categories",
+  },
+  {
+    label: "About",
+    href: "/about",
+  },
+];
+
+export function Navigation({ items = defaultItems, className }: NavigationProps) {
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    if (href === "/") {
+      return pathname === "/";
+    }
+    return pathname.startsWith(href);
+  };
+
+  return (
+    <nav
+      className={cn("flex items-center gap-6", className)}
+      role="navigation"
+      aria-label="Main navigation"
+    >
+      {items.map((item) => (
+        <div key={item.href} className="relative group">
+          <Link
+            href={item.href}
+            className={cn(
+              "text-sm font-medium transition-colors hover:text-primary",
+              isActive(item.href)
+                ? "text-primary"
+                : "text-muted-foreground"
+            )}
+            aria-current={isActive(item.href) ? "page" : undefined}
+          >
+            {item.label}
+          </Link>
+
+          {/* Dropdown for nested items */}
+          {item.children && item.children.length > 0 && (
+            <div className="absolute left-0 top-full hidden pt-2 group-hover:block">
+              <div className="rounded-md border border-border bg-background p-2 shadow-lg">
+                <div className="flex flex-col gap-0">
+                  {item.children.map((child) => (
+                    <Link
+                      key={child.href}
+                      href={child.href}
+                      className={cn(
+                        "rounded-sm px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+                        isActive(child.href)
+                          ? "bg-accent text-accent-foreground"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      {child.label}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/layout/theme-switcher.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun, Monitor } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+
+/**
+ * ThemeSwitcher - Toggle between light/dark/system themes
+ */
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  // Avoid hydration mismatch
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="sm" className="h-9 w-9 p-0">
+        <Sun className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  const cycleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+
+  const getIcon = () => {
+    switch (theme) {
+      case "light":
+        return <Sun className="h-4 w-4" />;
+      case "dark":
+        return <Moon className="h-4 w-4" />;
+      case "system":
+        return <Monitor className="h-4 w-4" />;
+      default:
+        return <Sun className="h-4 w-4" />;
+    }
+  };
+
+  const getLabel = () => {
+    switch (theme) {
+      case "light":
+        return "Switch to dark mode";
+      case "dark":
+        return "Switch to system mode";
+      case "system":
+        return "Switch to light mode";
+      default:
+        return "Toggle theme";
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={cycleTheme}
+      className="h-9 w-9 p-0"
+      aria-label={getLabel()}
+    >
+      {getIcon()}
+    </Button>
+  );
+}
+
+export interface ThemeSwitcherDropdownProps {
+  className?: string;
+}
+
+/**
+ * ThemeSwitcherDropdown - Dropdown menu for theme selection
+ */
+export function ThemeSwitcherDropdown({
+  className = "",
+}: ThemeSwitcherDropdownProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const themes = [
+    { value: "light", label: "Light", icon: Sun },
+    { value: "dark", label: "Dark", icon: Moon },
+    { value: "system", label: "System", icon: Monitor },
+  ];
+
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      <span className="text-xs font-medium text-muted-foreground mb-1">
+        Theme
+      </span>
+      {themes.map(({ value, label, icon: Icon }) => (
+        <button
+          key={value}
+          onClick={() => setTheme(value)}
+          className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted ${
+            theme === value
+              ? "bg-muted font-medium text-foreground"
+              : "text-muted-foreground"
+          }`}
+        >
+          <Icon className="h-4 w-4" />
+          <span>{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export interface ThemeSwitcherCompactProps {
+  showLabel?: boolean;
+  className?: string;
+}
+
+/**
+ * ThemeSwitcherCompact - Compact theme switcher with optional label
+ */
+export function ThemeSwitcherCompact({
+  showLabel = false,
+  className = "",
+}: ThemeSwitcherCompactProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      {showLabel && (
+        <span className="text-sm font-medium text-foreground">Theme:</span>
+      )}
+      <div className="flex items-center rounded-lg border border-border bg-background p-1">
+        <button
+          onClick={() => setTheme("light")}
+          className={`rounded-md p-1.5 transition-colors ${
+            theme === "light"
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:bg-muted"
+          }`}
+          aria-label="Light mode"
+        >
+          <Sun className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => setTheme("dark")}
+          className={`rounded-md p-1.5 transition-colors ${
+            theme === "dark"
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:bg-muted"
+          }`}
+          aria-label="Dark mode"
+        >
+          <Moon className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => setTheme("system")}
+          className={`rounded-md p-1.5 transition-colors ${
+            theme === "system"
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:bg-muted"
+          }`}
+          aria-label="System mode"
+        >
+          <Monitor className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/loyalty/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Loyalty Program Components
+ *
+ * Components for loyalty program functionality.
+ */
+
+export { TierBadge } from './tier-badge';
+export { PointsBalance } from './points-balance';
+export { TierProgress } from './tier-progress';
+export { RewardsCatalog } from './rewards-catalog';
+export { PointsHistory } from './points-history';

package/templates/storefront-nextjs-shadcn/components/loyalty/points-balance.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+/**
+ * PointsBalance Component
+ *
+ * Displays current loyalty points balance with expiring points warning.
+ */
+
+import { Coins, AlertTriangle } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface PointsSummary {
+  totalPoints: number;
+  currentPoints: number;
+  pendingPoints: number;
+  redeemedPoints: number;
+  expiredPoints: number;
+  expiringPoints?: number;
+  nextExpiryDate?: string;
+}
+
+interface PointsBalanceProps {
+  points: PointsSummary;
+  variant?: 'default' | 'compact';
+  className?: string;
+}
+
+export function PointsBalance({ points, variant = 'default', className }: PointsBalanceProps) {
+  const {
+    currentPoints,
+    pendingPoints,
+    expiringPoints,
+    nextExpiryDate,
+  } = points;
+
+  const formatNumber = (num: number) => {
+    return new Intl.NumberFormat('pl-PL').format(num);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Intl.DateTimeFormat('pl-PL', {
+      day: 'numeric',
+      month: 'long',
+    }).format(new Date(dateString));
+  };
+
+  if (variant === 'compact') {
+    return (
+      <div className={cn('flex items-center gap-2', className)}>
+        <Coins className="h-5 w-5 text-yellow-500" />
+        <span className="font-bold text-lg">{formatNumber(currentPoints)}</span>
+        <span className="text-muted-foreground">pkt</span>
+      </div>
+    );
+  }
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <Coins className="h-5 w-5 text-yellow-500" />
+          Twoje punkty
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-4xl font-bold mb-2">
+          {formatNumber(currentPoints)}
+          <span className="text-lg font-normal text-muted-foreground ml-2">pkt</span>
+        </div>
+
+        {pendingPoints > 0 && (
+          <p className="text-sm text-muted-foreground mb-2">
+            + {formatNumber(pendingPoints)} pkt oczekujących
+          </p>
+        )}
+
+        {expiringPoints && expiringPoints > 0 && nextExpiryDate && (
+          <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-950 rounded-lg border border-amber-200 dark:border-amber-800">
+            <div className="flex items-start gap-2 text-amber-800 dark:text-amber-200">
+              <AlertTriangle className="h-4 w-4 mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <span className="font-semibold">{formatNumber(expiringPoints)} pkt</span>{' '}
+                wygaśnie {formatDate(nextExpiryDate)}
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}