@aws505/sheetsite 1.0.0

package/src/components/ui/Icons.tsx

@@ -0,0 +1,508 @@
+/**
+ * Icon Library
+ *
+ * SVG icons for common use cases across business websites.
+ * All icons use currentColor for easy theming.
+ */
+
+import React from 'react';
+
+export interface IconProps {
+  className?: string;
+  size?: number;
+  'aria-hidden'?: boolean;
+}
+
+const defaultProps: IconProps = {
+  className: '',
+  size: 24,
+  'aria-hidden': true,
+};
+
+// =============================================================================
+// GENERAL ICONS
+// =============================================================================
+
+export function PhoneIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+    </svg>
+  );
+}
+
+export function MailIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <rect width="20" height="16" x="2" y="4" rx="2" />
+      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+    </svg>
+  );
+}
+
+export function MapPinIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  );
+}
+
+export function ClockIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  );
+}
+
+export function StarIcon({ className = '', size = 24, filled = false, ...props }: IconProps & { filled?: boolean }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={filled ? 'currentColor' : 'none'}
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function ChevronRightIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}
+
+export function MenuIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  );
+}
+
+export function XIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+export function CheckIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+// =============================================================================
+// SERVICE ICONS
+// =============================================================================
+
+export function ScissorsIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <circle cx="6" cy="6" r="3" />
+      <path d="M8.12 8.12 12 12" />
+      <path d="M20 4 8.12 15.88" />
+      <circle cx="6" cy="18" r="3" />
+      <path d="M14.8 14.8 20 20" />
+    </svg>
+  );
+}
+
+export function WrenchIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+    </svg>
+  );
+}
+
+export function SparklesIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+      <path d="M5 3v4" />
+      <path d="M19 17v4" />
+      <path d="M3 5h4" />
+      <path d="M17 19h4" />
+    </svg>
+  );
+}
+
+export function HeartIcon({ className = '', size = 24, filled = false, ...props }: IconProps & { filled?: boolean }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={filled ? 'currentColor' : 'none'}
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+    </svg>
+  );
+}
+
+export function UtensilsIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2" />
+      <path d="M7 2v20" />
+      <path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7" />
+    </svg>
+  );
+}
+
+export function CakeIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" />
+      <path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1" />
+      <path d="M2 21h20" />
+      <path d="M7 8v3" />
+      <path d="M12 8v3" />
+      <path d="M17 8v3" />
+      <path d="M7 4h.01" />
+      <path d="M12 4h.01" />
+      <path d="M17 4h.01" />
+    </svg>
+  );
+}
+
+export function BriefcaseIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <rect width="20" height="14" x="2" y="7" rx="2" ry="2" />
+      <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
+    </svg>
+  );
+}
+
+// =============================================================================
+// SOCIAL ICONS
+// =============================================================================
+
+export function YelpIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      {...props}
+    >
+      <path d="M20.16 12.73l-3.29 1.47c-.64.28-1.31-.26-1.2-.97l.52-3.4c.08-.56.49-.98 1.03-1.04l3.39-.38c.7-.08 1.22.58 1 1.23l-1.07 2.62c-.14.35-.36.41-.38.47zM14.13 15.58l-.52 3.4c-.11.7.55 1.25 1.2.97l3.29-1.47c.02-.06.24-.12.38-.47l1.07-2.62c.22-.65-.3-1.31-1-1.23l-3.39.38c-.54.06-.95.48-1.03 1.04zM10.98 3.05c-.47-.6-1.37-.5-1.7.2l-3.6 7.51c-.24.5-.01 1.1.51 1.33l2.63 1.21c.62.28 1.3-.2 1.27-.89l-.33-7.97c-.02-.56-.3-1.01-.78-1.39zM8.37 14.35l-2.63-1.21c-.52-.23-.75-.83-.51-1.33l3.6-7.51c.33-.7 1.23-.8 1.7-.2.48.38.76.83.78 1.39l.33 7.97c.03.69-.65 1.17-1.27.89zM10.04 16.42l-3.22 1.8c-.62.35-1.36-.14-1.28-.86l.44-3.52c.06-.53.42-.95.92-1.08l3.02-.78c.69-.18 1.32.43 1.09 1.1l-1.24 3.06c-.14.33-.38.34-.42.34-.04 0-.18-.01-.31.04v-.1z" />
+    </svg>
+  );
+}
+
+export function InstagramIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+    </svg>
+  );
+}
+
+export function FacebookIcon({ className = '', size = 24, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+    </svg>
+  );
+}
+
+// =============================================================================
+// ICON MAP
+// =============================================================================
+
+/**
+ * Map of icon names to components.
+ * Use this to render icons dynamically based on string names.
+ */
+export const iconMap: Record<string, React.FC<IconProps>> = {
+  phone: PhoneIcon,
+  mail: MailIcon,
+  email: MailIcon,
+  'map-pin': MapPinIcon,
+  location: MapPinIcon,
+  clock: ClockIcon,
+  time: ClockIcon,
+  star: StarIcon,
+  'chevron-down': ChevronDownIcon,
+  'chevron-right': ChevronRightIcon,
+  menu: MenuIcon,
+  x: XIcon,
+  close: XIcon,
+  check: CheckIcon,
+  scissors: ScissorsIcon,
+  wrench: WrenchIcon,
+  tool: WrenchIcon,
+  sparkles: SparklesIcon,
+  heart: HeartIcon,
+  utensils: UtensilsIcon,
+  food: UtensilsIcon,
+  cake: CakeIcon,
+  briefcase: BriefcaseIcon,
+  yelp: YelpIcon,
+  instagram: InstagramIcon,
+  facebook: FacebookIcon,
+};
+
+/**
+ * Get an icon component by name.
+ */
+export function getIcon(name: string): React.FC<IconProps> | null {
+  return iconMap[name.toLowerCase()] || null;
+}
+
+/**
+ * Render an icon by name.
+ */
+export function Icon({ name, ...props }: IconProps & { name: string }) {
+  const IconComponent = getIcon(name);
+  if (!IconComponent) return null;
+  return <IconComponent {...props} />;
+}

package/src/config/index.ts

@@ -0,0 +1,207 @@
+/**
+ * SheetSite Configuration Module
+ *
+ * Provides configuration types, business type presets, and utilities
+ * for setting up and customizing websites.
+ */
+
+// Types
+export * from './types';
+
+// Presets
+export {
+  presets,
+  getPreset,
+  getSupportedBusinessTypes,
+  businessCategories,
+  recommendBusinessType,
+  tailorPreset,
+  restaurantPreset,
+  homeKitchenPreset,
+  salonPreset,
+  repairPreset,
+  professionalPreset,
+  genericPreset,
+} from './presets';
+
+// =============================================================================
+// CONFIGURATION UTILITIES
+// =============================================================================
+
+import type {
+  SiteConfig,
+  BusinessType,
+  BusinessPreset,
+  ThemePreset,
+  PageConfig,
+  HomeSectionType,
+} from './types';
+import { getPreset } from './presets';
+
+/**
+ * Create a site configuration from a business preset.
+ * Allows overriding specific values.
+ */
+export function createSiteConfig(
+  businessType: BusinessType | string,
+  overrides?: Partial<SiteConfig>
+): SiteConfig {
+  const preset = getPreset(businessType);
+  const config = { ...preset.config };
+
+  if (overrides) {
+    // Merge theme
+    if (overrides.theme) {
+      config.theme = { ...config.theme, ...overrides.theme };
+    }
+
+    // Merge pages
+    if (overrides.pages) {
+      config.pages = { ...config.pages, ...overrides.pages } as SiteConfig['pages'];
+    }
+
+    // Merge SEO
+    if (overrides.seo) {
+      config.seo = { ...config.seo, ...overrides.seo };
+    }
+
+    // Merge contact form
+    if (overrides.contactForm) {
+      config.contactForm = { ...config.contactForm, ...overrides.contactForm };
+    }
+
+    // Merge features
+    if (overrides.features) {
+      config.features = { ...config.features, ...overrides.features };
+    }
+
+    // Simple overrides
+    if (overrides.siteUrl) config.siteUrl = overrides.siteUrl;
+    if (overrides.customClasses) {
+      config.customClasses = { ...config.customClasses, ...overrides.customClasses };
+    }
+  }
+
+  return config;
+}
+
+/**
+ * Get the sheet template for a business type.
+ * Useful for generating documentation or Google Sheet templates.
+ */
+export function getSheetTemplate(businessType: BusinessType | string): BusinessPreset['sheetTemplate'] {
+  const preset = getPreset(businessType);
+  return preset.sheetTemplate;
+}
+
+/**
+ * Get default data for a business type.
+ */
+export function getDefaultData(businessType: BusinessType | string): BusinessPreset['defaults'] {
+  const preset = getPreset(businessType);
+  return preset.defaults;
+}
+
+/**
+ * Get icon suggestions for a business type.
+ */
+export function getIconSuggestions(businessType: BusinessType | string): string[] {
+  const preset = getPreset(businessType);
+  return preset.iconSuggestions;
+}
+
+/**
+ * Get image suggestions for a business type.
+ */
+export function getImageSuggestions(businessType: BusinessType | string): string[] {
+  const preset = getPreset(businessType);
+  return preset.imageSuggestions;
+}
+
+/**
+ * Validate a site configuration.
+ */
+export function validateSiteConfig(config: SiteConfig): { valid: boolean; errors: string[] } {
+  const errors: string[] = [];
+
+  // Check required fields
+  if (!config.businessType) {
+    errors.push('businessType is required');
+  }
+
+  if (!config.pages?.home) {
+    errors.push('pages.home configuration is required');
+  }
+
+  if (!config.theme) {
+    errors.push('theme configuration is required');
+  }
+
+  // Check home page sections
+  if (config.pages?.home?.sections) {
+    const validSections: HomeSectionType[] = [
+      'hero', 'services', 'menu', 'products', 'gallery',
+      'testimonials', 'team', 'faq', 'hours', 'location',
+      'contact-form', 'cta', 'how-it-works', 'announcements', 'about-preview',
+    ];
+
+    for (const section of config.pages.home.sections) {
+      if (!validSections.includes(section)) {
+        errors.push(`Invalid home section: ${section}`);
+      }
+    }
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+  };
+}
+
+// =============================================================================
+// THEME HELPERS
+// =============================================================================
+
+/**
+ * Get available theme presets.
+ */
+export const themePresets: ThemePreset[] = [
+  'warm-brown',
+  'cool-blue',
+  'earth-green',
+  'warm-amber',
+  'elegant-gold',
+  'fresh-teal',
+  'bold-red',
+  'soft-pink',
+  'slate-gray',
+  'forest-green',
+];
+
+/**
+ * Get a description for a theme preset.
+ */
+export function getThemeDescription(preset: ThemePreset): string {
+  const descriptions: Record<ThemePreset, string> = {
+    'warm-brown': 'Warm, earthy tones perfect for tailoring, leather goods, and traditional crafts',
+    'cool-blue': 'Professional and trustworthy, ideal for professional services and tech',
+    'earth-green': 'Natural and organic, great for eco-friendly, outdoor, and health businesses',
+    'warm-amber': 'Welcoming and appetizing, perfect for food, hospitality, and home businesses',
+    'elegant-gold': 'Luxurious and sophisticated, suited for upscale and formal businesses',
+    'fresh-teal': 'Modern and creative, ideal for spas, creative studios, and wellness',
+    'bold-red': 'Energetic and urgent, great for automotive, sports, and action-oriented businesses',
+    'soft-pink': 'Gentle and feminine, perfect for beauty, weddings, and delicate services',
+    'slate-gray': 'Minimalist and industrial, suited for modern, urban businesses',
+    'forest-green': 'Deep and natural, ideal for outdoor, nature, and sustainability-focused businesses',
+  };
+
+  return descriptions[preset];
+}
+
+/**
+ * Recommend a theme based on business type.
+ */
+export function recommendTheme(businessType: BusinessType | string): ThemePreset {
+  const preset = getPreset(businessType);
+  return preset.config.theme.preset || 'cool-blue';
+}