@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/ui/empty-state.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ className, icon, title, description, action, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col items-center justify-center gap-4 py-12 text-center',
+          className
+        )}
+        {...props}
+      >
+        {icon && (
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-muted-foreground">
+            {icon}
+          </div>
+        )}
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+          {description && (
+            <p className="text-sm text-muted-foreground max-w-md">{description}</p>
+          )}
+        </div>
+        {action && <div className="mt-2">{action}</div>}
+      </div>
+    );
+  }
+);
+
+EmptyState.displayName = 'EmptyState';
+
+/**
+ * EmptyCart - Pre-configured empty state for cart
+ */
+export const EmptyCart: React.FC<{ onContinueShopping?: () => void }> = ({
+  onContinueShopping,
+}) => {
+  return (
+    <EmptyState
+      icon={
+        <svg
+          className="h-8 w-8"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+          />
+        </svg>
+      }
+      title="Your cart is empty"
+      description="Add some products to your cart to get started."
+      action={
+        onContinueShopping && (
+          <button
+            onClick={onContinueShopping}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          >
+            Continue Shopping
+          </button>
+        )
+      }
+    />
+  );
+};
+
+EmptyCart.displayName = 'EmptyCart';
+
+/**
+ * EmptyProducts - Pre-configured empty state for product listings
+ */
+export const EmptyProducts: React.FC<{ onReset?: () => void }> = ({ onReset }) => {
+  return (
+    <EmptyState
+      icon={
+        <svg
+          className="h-8 w-8"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+      }
+      title="No products found"
+      description="Try adjusting your search or filter criteria to find what you're looking for."
+      action={
+        onReset && (
+          <button
+            onClick={onReset}
+            className="rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          >
+            Clear Filters
+          </button>
+        )
+      }
+    />
+  );
+};
+
+EmptyProducts.displayName = 'EmptyProducts';
+
+/**
+ * EmptyOrders - Pre-configured empty state for order history
+ */
+export const EmptyOrders: React.FC<{ onStartShopping?: () => void }> = ({
+  onStartShopping,
+}) => {
+  return (
+    <EmptyState
+      icon={
+        <svg
+          className="h-8 w-8"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+          />
+        </svg>
+      }
+      title="No orders yet"
+      description="You haven't placed any orders yet. Start shopping to see your order history here."
+      action={
+        onStartShopping && (
+          <button
+            onClick={onStartShopping}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          >
+            Start Shopping
+          </button>
+        )
+      }
+    />
+  );
+};
+
+EmptyOrders.displayName = 'EmptyOrders';
+
+/**
+ * EmptyWishlist - Pre-configured empty state for wishlist
+ */
+export const EmptyWishlist: React.FC<{ onBrowseProducts?: () => void }> = ({
+  onBrowseProducts,
+}) => {
+  return (
+    <EmptyState
+      icon={
+        <svg
+          className="h-8 w-8"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+          />
+        </svg>
+      }
+      title="Your wishlist is empty"
+      description="Save your favorite products to your wishlist for easy access later."
+      action={
+        onBrowseProducts && (
+          <button
+            onClick={onBrowseProducts}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          >
+            Browse Products
+          </button>
+        )
+      }
+    />
+  );
+};
+
+EmptyWishlist.displayName = 'EmptyWishlist';
+
+export { EmptyState };

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

@@ -0,0 +1,67 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';
+
+export { Input } from './input';
+export type { InputProps } from './input';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './card';
+
+export { Select } from './select';
+export type { SelectProps } from './select';
+
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';
+
+export { Skeleton } from './skeleton';
+export type { SkeletonProps } from './skeleton';
+
+export { Toast, ToastContainer } from './toast';
+export type { ToastProps, ToastContainerProps } from './toast';
+
+export {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from './dialog';
+export type { DialogProps, DialogContentProps } from './dialog';
+
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+export type { TabsProps, TabsTriggerProps, TabsContentProps } from './tabs';
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './accordion';
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from './accordion';
+
+export { Pagination } from './pagination';
+export type { PaginationProps } from './pagination';
+
+export { Spinner, SpinnerOverlay } from './spinner';
+export type { SpinnerProps, SpinnerOverlayProps } from './spinner';
+
+export {
+  EmptyState,
+  EmptyCart,
+  EmptyProducts,
+  EmptyOrders,
+  EmptyWishlist,
+} from './empty-state';
+export type { EmptyStateProps } from './empty-state';

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = 'text', label, error, id, ...props }, ref) => {
+    // Only generate ID if label or error exists (for accessibility)
+    // This prevents hydration mismatch from useId() generating different IDs on server/client
+    const needsId = !!(label || error);
+    const generatedId = React.useId();
+    const inputId = id || (needsId ? `input-${generatedId}` : undefined);
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="mb-2 block text-sm font-medium text-foreground"
+          >
+            {label}
+            {props.required && (
+              <span className="ml-1 text-red-600" aria-label="required">
+                *
+              </span>
+            )}
+          </label>
+        )}
+        <input
+          id={inputId}
+          type={type}
+          className={cn(
+            'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm',
+            'placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            error && 'border-red-600 focus-visible:ring-red-600',
+            className
+          )}
+          ref={ref}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={error ? `${inputId}-error` : undefined}
+          {...props}
+        />
+        {error && (
+          <p
+            id={`${inputId}-error`}
+            className="mt-1 text-sm text-red-600"
+            role="alert"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input };

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

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

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

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  showFirstLast?: boolean;
+  maxVisible?: number;
+}
+
+const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      className,
+      currentPage,
+      totalPages,
+      onPageChange,
+      showFirstLast = true,
+      maxVisible = 5,
+      ...props
+    },
+    ref
+  ) => {
+    const getPageNumbers = () => {
+      const pages: (number | string)[] = [];
+      
+      if (totalPages <= maxVisible) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+      }
+
+      const halfVisible = Math.floor(maxVisible / 2);
+      let startPage = Math.max(1, currentPage - halfVisible);
+      let endPage = Math.min(totalPages, currentPage + halfVisible);
+
+      if (currentPage <= halfVisible) {
+        endPage = maxVisible;
+      } else if (currentPage >= totalPages - halfVisible) {
+        startPage = totalPages - maxVisible + 1;
+      }
+
+      if (startPage > 1) {
+        pages.push(1);
+        if (startPage > 2) pages.push('...');
+      }
+
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(i);
+      }
+
+      if (endPage < totalPages) {
+        if (endPage < totalPages - 1) pages.push('...');
+        pages.push(totalPages);
+      }
+
+      return pages;
+    };
+
+    const pages = getPageNumbers();
+
+    return (
+      <nav
+        ref={ref}
+        role="navigation"
+        aria-label="Pagination"
+        className={cn('flex items-center justify-center gap-1', className)}
+        {...props}
+      >
+        {showFirstLast && (
+          <PaginationButton
+            onClick={() => onPageChange(1)}
+            disabled={currentPage === 1}
+            aria-label="Go to first page"
+          >
+            <svg
+              className="h-4 w-4"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </PaginationButton>
+        )}
+
+        <PaginationButton
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          aria-label="Go to previous page"
+        >
+          <svg
+            className="h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </PaginationButton>
+
+        {pages.map((page, index) =>
+          typeof page === 'number' ? (
+            <PaginationButton
+              key={index}
+              onClick={() => onPageChange(page)}
+              isActive={currentPage === page}
+              aria-label={`Go to page ${page}`}
+              aria-current={currentPage === page ? 'page' : undefined}
+            >
+              {page}
+            </PaginationButton>
+          ) : (
+            <span
+              key={index}
+              className="flex h-9 w-9 items-center justify-center text-sm text-muted-foreground"
+              aria-hidden="true"
+            >
+              {page}
+            </span>
+          )
+        )}
+
+        <PaginationButton
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          aria-label="Go to next page"
+        >
+          <svg
+            className="h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </PaginationButton>
+
+        {showFirstLast && (
+          <PaginationButton
+            onClick={() => onPageChange(totalPages)}
+            disabled={currentPage === totalPages}
+            aria-label="Go to last page"
+          >
+            <svg
+              className="h-4 w-4"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0zm-6 0a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </PaginationButton>
+        )}
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = 'Pagination';
+
+interface PaginationButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isActive?: boolean;
+}
+
+const PaginationButton = React.forwardRef<HTMLButtonElement, PaginationButtonProps>(
+  ({ className, isActive, disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={disabled}
+        className={cn(
+          'flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors',
+          '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-primary text-primary-foreground shadow-sm'
+            : 'hover:bg-accent hover:text-accent-foreground',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+PaginationButton.displayName = 'PaginationButton';
+
+export { Pagination };

package/templates/storefront-nextjs-shadcn/components/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }