@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/ui/select.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/templates/storefront-nextjs-shadcn/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  (
+    { className = "", orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={orientation}
+      className={`shrink-0 bg-border ${
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]"
+      } ${className}`}
+      {...props}
+    />
+  )
+);
+Separator.displayName = "Separator";
+
+export { Separator };

package/templates/storefront-nextjs-shadcn/components/ui/skeleton.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('animate-pulse rounded-md bg-muted', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };

package/templates/storefront-nextjs-shadcn/components/ui/spinner.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'default' | 'primary' | 'secondary';
+}
+
+const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ className, size = 'md', variant = 'default', ...props }, ref) => {
+    const sizeClasses = {
+      sm: 'h-4 w-4 border-2',
+      md: 'h-8 w-8 border-2',
+      lg: 'h-12 w-12 border-3',
+      xl: 'h-16 w-16 border-4',
+    };
+
+    const variantClasses = {
+      default: 'border-border border-t-foreground',
+      primary: 'border-primary/20 border-t-primary',
+      secondary: 'border-secondary/20 border-t-secondary',
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-label="Loading"
+        className={cn('inline-block', className)}
+        {...props}
+      >
+        <div
+          className={cn(
+            'animate-spin rounded-full',
+            sizeClasses[size],
+            variantClasses[variant]
+          )}
+        />
+        <span className="sr-only">Loading...</span>
+      </div>
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';
+
+/**
+ * SpinnerOverlay - Full-screen loading overlay with spinner
+ */
+export interface SpinnerOverlayProps {
+  visible: boolean;
+  message?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const SpinnerOverlay: React.FC<SpinnerOverlayProps> = ({
+  visible,
+  message,
+  size = 'lg',
+}) => {
+  if (!visible) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Loading"
+    >
+      <div className="flex flex-col items-center gap-4 rounded-lg bg-background p-8 shadow-lg">
+        <Spinner size={size} variant="primary" />
+        {message && (
+          <p className="text-sm font-medium text-foreground">{message}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+SpinnerOverlay.displayName = 'SpinnerOverlay';
+
+export { Spinner, SpinnerOverlay };

package/templates/storefront-nextjs-shadcn/components/ui/tabs.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface TabsProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const TabsContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+} | null>(null);
+
+const Tabs: React.FC<TabsProps> = ({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  className,
+}) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue || '');
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  const handleValueChange = (newValue: string) => {
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+};
+
+Tabs.displayName = 'Tabs';
+
+const TabsList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="tablist"
+      className={cn(
+        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+TabsList.displayName = 'TabsList';
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, value, ...props }, ref) => {
+    const context = React.useContext(TabsContext);
+    if (!context) throw new Error('TabsTrigger must be used within Tabs');
+
+    const isActive = context.value === value;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="tab"
+        aria-selected={isActive}
+        onClick={() => context.onValueChange(value)}
+        className={cn(
+          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium',
+          'transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          isActive
+            ? 'bg-background text-foreground shadow-sm'
+            : 'hover:bg-background/50 hover:text-foreground',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+TabsTrigger.displayName = 'TabsTrigger';
+
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ className, value, ...props }, ref) => {
+    const context = React.useContext(TabsContext);
+    if (!context) throw new Error('TabsContent must be used within Tabs');
+
+    if (context.value !== value) return null;
+
+    return (
+      <div
+        ref={ref}
+        role="tabpanel"
+        tabIndex={0}
+        className={cn('mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+TabsContent.displayName = 'TabsContent';
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/templates/storefront-nextjs-shadcn/components/ui/toast.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'success' | 'error' | 'warning';
+  onClose?: () => void;
+}
+
+const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
+  ({ className, variant = 'default', onClose, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        aria-live="polite"
+        aria-atomic="true"
+        className={cn(
+          'pointer-events-auto flex w-full max-w-md items-center justify-between gap-4 rounded-lg p-4 shadow-lg',
+          'transition-all duration-300',
+          {
+            'bg-background border border-border text-foreground': variant === 'default',
+            'bg-green-600 text-white': variant === 'success',
+            'bg-red-600 text-white': variant === 'error',
+            'bg-yellow-600 text-white': variant === 'warning',
+          },
+          className
+        )}
+        {...props}
+      >
+        <div className="flex-1 text-sm font-medium">{children}</div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex h-6 w-6 items-center justify-center rounded-md opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            aria-label="Close notification"
+          >
+            <svg
+              className="h-4 w-4"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Toast.displayName = 'Toast';
+
+/**
+ * ToastContainer - Container for toast notifications
+ * Position: fixed bottom-right
+ */
+export interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
+
+const ToastContainer = React.forwardRef<HTMLDivElement, ToastContainerProps>(
+  ({ className, position = 'bottom-right', children, ...props }, ref) => {
+    const positionClasses = {
+      'top-right': 'top-4 right-4',
+      'top-left': 'top-4 left-4',
+      'bottom-right': 'bottom-4 right-4',
+      'bottom-left': 'bottom-4 left-4',
+      'top-center': 'top-4 left-1/2 -translate-x-1/2',
+      'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'pointer-events-none fixed z-50 flex flex-col gap-2',
+          positionClasses[position],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ToastContainer.displayName = 'ToastContainer';
+
+export { Toast, ToastContainer };

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

@@ -0,0 +1,9 @@
+/**
+ * Wishlist Components
+ *
+ * Components for wishlist functionality.
+ */
+
+export { WishlistButton } from './wishlist-button';
+export { WishlistIcon } from './wishlist-icon';
+export { WishlistItem } from './wishlist-item';

package/templates/storefront-nextjs-shadcn/components/wishlist/wishlist-button.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+/**
+ * WishlistButton Component
+ *
+ * Toggle button to add/remove products from wishlist.
+ * Shows filled heart when product is in wishlist.
+ */
+
+import { useState, useCallback } from 'react';
+import { Heart } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useWishlistStore } from '@/stores/wishlist-store';
+import { toast } from 'sonner';
+
+interface WishlistButtonProps {
+  productId: string;
+  variantId?: string;
+  productTitle: string;
+  variantTitle?: string;
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+  variant?: 'default' | 'icon' | 'icon-sm';
+  className?: string;
+}
+
+export function WishlistButton({
+  productId,
+  variantId,
+  productTitle,
+  variantTitle,
+  price,
+  image,
+  variant = 'default',
+  className,
+}: WishlistButtonProps) {
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const {
+    wishlists,
+    isInWishlist,
+    getWishlistForProduct,
+    addItem,
+    removeItem,
+  } = useWishlistStore();
+
+  const inWishlist = isInWishlist(productId, variantId);
+
+  const handleToggle = useCallback(() => {
+    setIsAnimating(true);
+    setTimeout(() => setIsAnimating(false), 300);
+
+    if (inWishlist) {
+      // Find the wishlist containing this product and remove it
+      const wishlist = getWishlistForProduct(productId, variantId);
+      if (wishlist) {
+        const item = wishlist.items.find(
+          (i) =>
+            i.productId === productId &&
+            (variantId ? i.variantId === variantId : true)
+        );
+        if (item) {
+          removeItem(wishlist.id, item.id);
+          toast.success('Usunięto z listy życzeń');
+        }
+      }
+    } else {
+      // Add to first wishlist or create default
+      const wishlistId = wishlists[0]?.id || 'default';
+      addItem(wishlistId, {
+        productId,
+        variantId,
+        productTitle,
+        variantTitle,
+        price,
+        priceAtAdd: price,
+        image,
+        notifyOnSale: false,
+        notifyOnRestock: false,
+      });
+      toast.success('Dodano do listy życzeń');
+    }
+  }, [
+    inWishlist,
+    productId,
+    variantId,
+    productTitle,
+    variantTitle,
+    price,
+    image,
+    wishlists,
+    addItem,
+    removeItem,
+    getWishlistForProduct,
+  ]);
+
+  if (variant === 'icon' || variant === 'icon-sm') {
+    return (
+      <Button
+        variant="ghost"
+        size={variant === 'icon-sm' ? 'sm' : 'icon'}
+        className={cn(
+          'transition-all duration-200',
+          inWishlist && 'text-red-500 hover:text-red-600',
+          isAnimating && 'scale-125',
+          className
+        )}
+        onClick={handleToggle}
+        aria-label={inWishlist ? 'Usuń z listy życzeń' : 'Dodaj do listy życzeń'}
+      >
+        <Heart
+          className={cn(
+            'h-5 w-5 transition-all',
+            variant === 'icon-sm' && 'h-4 w-4',
+            inWishlist && 'fill-current'
+          )}
+        />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant={inWishlist ? 'secondary' : 'outline'}
+      className={cn(
+        'gap-2 transition-all duration-200',
+        isAnimating && 'scale-105',
+        className
+      )}
+      onClick={handleToggle}
+    >
+      <Heart
+        className={cn(
+          'h-4 w-4 transition-all',
+          inWishlist && 'fill-current text-red-500'
+        )}
+      />
+      {inWishlist ? 'W liście życzeń' : 'Dodaj do listy życzeń'}
+    </Button>
+  );
+}