@doswiftly/cli 0.1.1

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

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface AccordionProps {
+  type?: 'single' | 'multiple';
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionContext = React.createContext<{
+  value: string | string[];
+  onValueChange: (value: string) => void;
+  type: 'single' | 'multiple';
+} | null>(null);
+
+const Accordion: React.FC<AccordionProps> = ({
+  type = 'single',
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  className,
+}) => {
+  const [internalValue, setInternalValue] = React.useState<string | string[]>(
+    defaultValue || (type === 'multiple' ? [] : '')
+  );
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  const handleValueChange = (itemValue: string) => {
+    let newValue: string | string[];
+
+    if (type === 'multiple') {
+      const currentArray = Array.isArray(value) ? value : [];
+      newValue = currentArray.includes(itemValue)
+        ? currentArray.filter((v) => v !== itemValue)
+        : [...currentArray, itemValue];
+    } else {
+      newValue = value === itemValue ? '' : itemValue;
+    }
+
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <AccordionContext.Provider value={{ value, onValueChange: handleValueChange, type }}>
+      <div className={className}>{children}</div>
+    </AccordionContext.Provider>
+  );
+};
+
+Accordion.displayName = 'Accordion';
+
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ className, value, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-value={value}
+      className={cn('border-b border-border', className)}
+      {...props}
+    />
+  )
+);
+
+AccordionItem.displayName = 'AccordionItem';
+
+export interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const context = React.useContext(AccordionContext);
+    if (!context) throw new Error('AccordionTrigger must be used within Accordion');
+
+    const isOpen = Array.isArray(context.value)
+      ? context.value.includes(value)
+      : context.value === value;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={() => context.onValueChange(value)}
+        aria-expanded={isOpen}
+        className={cn(
+          'flex w-full items-center justify-between py-4 font-medium transition-all',
+          'hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <svg
+          className={cn('h-4 w-4 shrink-0 transition-transform duration-200', isOpen && 'rotate-180')}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fillRule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+    );
+  }
+);
+
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const context = React.useContext(AccordionContext);
+    if (!context) throw new Error('AccordionContent must be used within Accordion');
+
+    const isOpen = Array.isArray(context.value)
+      ? context.value.includes(value)
+      : context.value === value;
+
+    if (!isOpen) return null;
+
+    return (
+      <div
+        ref={ref}
+        role="region"
+        className={cn('overflow-hidden text-sm transition-all', className)}
+        {...props}
+      >
+        <div className="pb-4 pt-0">{children}</div>
+      </div>
+    );
+  }
+);
+
+AccordionContent.displayName = 'AccordionContent';
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline';
+}
+
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant = 'default', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+          {
+            'bg-primary text-primary-foreground': variant === 'default',
+            'bg-secondary text-secondary-foreground': variant === 'secondary',
+            'bg-green-600 text-white': variant === 'success',
+            'bg-yellow-600 text-white': variant === 'warning',
+            'bg-red-600 text-white': variant === 'destructive',
+            'border border-border bg-background text-foreground': variant === 'outline',
+          },
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+export { Badge };

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', asChild, ...props }, ref) => {
+    // Note: asChild is extracted but not used in this simple implementation
+    // For full Radix UI Slot support, install @radix-ui/react-slot
+    return (
+      <button
+        className={cn(
+          // Base styles
+          'inline-flex items-center justify-center rounded-md 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',
+          // Variant styles
+          {
+            'bg-primary text-primary-foreground hover:bg-primary/90':
+              variant === 'default',
+            'bg-secondary text-secondary-foreground hover:bg-secondary/80':
+              variant === 'secondary',
+            'border border-border bg-background hover:bg-muted hover:text-foreground':
+              variant === 'outline',
+            'hover:bg-muted hover:text-foreground': variant === 'ghost',
+            'bg-red-600 text-white hover:bg-red-700': variant === 'destructive',
+          },
+          // Size styles
+          {
+            'h-10 px-4 py-2 text-sm': size === 'default',
+            'h-9 px-3 text-xs': size === 'sm',
+            'h-11 px-8 text-base': size === 'lg',
+            'h-10 w-10': size === 'icon',
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button };

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border border-border bg-background shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+    {...props}
+  >
+    {children}
+  </h3>
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

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

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

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

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+const Dialog: React.FC<DialogProps> = ({ open, onOpenChange, children }) => {
+  React.useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="relative z-50">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/50 transition-opacity"
+        onClick={() => onOpenChange?.(false)}
+        aria-hidden="true"
+      />
+      {/* Dialog container */}
+      <div className="fixed inset-0 overflow-y-auto">
+        <div className="flex min-h-full items-center justify-center p-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Dialog.displayName = 'Dialog';
+
+export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClose?: () => void;
+}
+
+const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, onClose, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          'relative w-full max-w-lg rounded-lg bg-background p-6 shadow-lg',
+          'animate-fade-in',
+          className
+        )}
+        onClick={(e) => e.stopPropagation()}
+        {...props}
+      >
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            aria-label="Close dialog"
+          >
+            <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>
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+
+DialogContent.displayName = 'DialogContent';
+
+const DialogHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
+    {...props}
+  />
+);
+
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className,
+  ...props
+}) => (
+  <h2
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+);
+
+DialogTitle.displayName = 'DialogTitle';
+
+const DialogDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  className,
+  ...props
+}) => (
+  <p className={cn('text-sm text-muted-foreground', className)} {...props} />
+);
+
+DialogDescription.displayName = 'DialogDescription';
+
+const DialogFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+
+DialogFooter.displayName = 'DialogFooter';
+
+export { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter };