@bailierich/booking-components 2.0.0

package/README.md

@@ -0,0 +1,319 @@
+# @oviah/booking-components
+
+Reusable booking and section components for the OVIAH multi-tenant booking platform.
+
+## 📦 What's Included
+
+- **21 Section Components** - Logo, Hero, Gallery, Testimonials, and more
+- **Complete Booking Flow** - Multi-step booking with validation and animations
+- **Universal Renderers** - SectionRenderer and BookingFlow orchestrator
+- **UI Components** - BottomSheet, modals, and form elements
+- **Animation Utilities** - Pre-built Framer Motion animations
+- **Full TypeScript Support** - Complete type definitions
+
+## 🚀 Quick Start
+
+```tsx
+import {
+  SectionRenderer,
+  BookingFlow,
+  Hero,
+  Gallery
+} from '@oviah/booking-components';
+
+// Render any section dynamically
+<SectionRenderer
+  section={{
+    id: 'hero-1',
+    type: 'hero',
+    settings: {
+      headline: 'Welcome',
+      subheadline: 'Book your appointment today'
+    }
+  }}
+  theme={{
+    colors: { primary: '#D8C4FF', secondary: '#014421', text: '#000000' },
+    typography: { headingFont: 'Geist Sans' }
+  }}
+/>
+
+// Complete booking flow
+<BookingFlow
+  config={config}
+  colors={colors}
+  services={services}
+  onComplete={(bookingData) => {
+    console.log('Booking complete!', bookingData);
+  }}
+/>
+```
+
+## 📚 Documentation
+
+- **[API Reference](./docs/API.md)** - Complete component API
+- **[Data Shapes](./docs/DATA_SHAPES.md)** - Data structures and interfaces
+- **[Callbacks](./docs/CALLBACKS.md)** - Event handling patterns
+- **[Styling](./docs/STYLING.md)** - Theme customization guide
+- **[Payment Integration](./docs/PAYMENT_INTEGRATION.md)** - Payment setup guide
+- **[Migration Guide](./docs/MIGRATION.md)** - Migrate from inline components
+
+## 🎨 Components
+
+### Section Components (21 total)
+
+All section components accept `colors` and `typography` props for theming:
+
+- **Logo** - Logo/brand mark display
+- **Header** - Text header with name, title, bio
+- **FeaturedLink** - Large CTA button
+- **LinkList** - List of clickable links
+- **SocialBar** - Social media icons
+- **InstagramFeed** - Instagram grid
+- **MinimalHeader** - Sticky header
+- **MinimalNavigation** - Navigation links
+- **MinimalFooter** - Footer section
+- **FeatureContent** - Feature with image/text
+- **Hero** - Hero section with image
+- **About** - About section
+- **ServicesPreview** - Services grid/list
+- **Gallery** - Image gallery
+- **Testimonials** - Client testimonials
+- **Team** - Team members
+- **Contact** - Contact info/form
+- **BeforeAfter** - Before/after comparisons
+- **PricingTable** - Pricing plans
+- **BookingSection** - Booking flow wrapper
+- **FixedInfoCard** - Fixed corner card
+
+### Booking Flow Components
+
+- **BookingFlow** - Main orchestrator
+- **ServiceSelection** - Service picker
+- **DateSelection** - Date picker
+- **TimeSelection** - Time slot picker
+- **AddonsSelection** - Add-ons picker
+- **ContactForm** - Contact information
+- **Confirmation** - Review and payment
+
+### UI Components
+
+- **BottomSheet** - Slide-up modal
+- **SectionRenderer** - Universal section renderer
+
+### Animation Utilities
+
+- `createEntranceAnimation()` - Entry animations
+- `createStaggerAnimation()` - Stagger lists
+- `getSlideVariants()` - Slide transitions
+- `getFadeVariants()` - Fade transitions
+
+## 🔧 Installation
+
+### For This Project (stylink-saas-dashboard)
+
+This package is part of the workspace and is automatically linked:
+
+```bash
+npm install
+```
+
+### For Your Tenant Template Project
+
+You have **three options** to use this package in your other project:
+
+#### Option 1: Local Link (Best for Active Development)
+
+**Step 1 - In this project:**
+```bash
+cd packages/booking-components
+npm run build
+npm link
+```
+
+**Step 2 - In your tenant template project:**
+```bash
+npm link @oviah/booking-components
+```
+
+**To unlink later:**
+```bash
+npm unlink @oviah/booking-components
+npm install
+```
+
+#### Option 2: File Path (Best for Local Development)
+
+**In your tenant template's package.json:**
+```json
+{
+  "dependencies": {
+    "@oviah/booking-components": "file:../stylink-saas-dashboard/packages/booking-components"
+  }
+}
+```
+
+Then run:
+```bash
+npm install
+```
+
+**Note:** Adjust the path based on where your projects are located relative to each other.
+
+#### Option 3: GitHub Packages (Best for Production)
+
+**Step 1 - Update this package's package.json:**
+```json
+{
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YOUR_ORG/stylink-saas-dashboard.git",
+    "directory": "packages/booking-components"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  }
+}
+```
+
+**Step 2 - Create .npmrc in packages/booking-components:**
+```
+@oviah:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+**Step 3 - Build and publish:**
+```bash
+cd packages/booking-components
+npm run build
+npm publish
+```
+
+**Step 4 - In your tenant template, create .npmrc:**
+```
+@oviah:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+**Step 5 - Install:**
+```bash
+npm install @oviah/booking-components@1.0.0
+```
+
+## 💡 Usage Examples
+
+### Render Sections Dynamically
+
+```tsx
+const sections = [
+  { id: '1', type: 'logo', settings: { logoUrl: '/logo.png' } },
+  { id: '2', type: 'hero', settings: { headline: 'Welcome' } },
+  { id: '3', type: 'gallery', settings: { images: [...] } }
+];
+
+{sections.map(section => (
+  <SectionRenderer
+    key={section.id}
+    section={section}
+    theme={theme}
+  />
+))}
+```
+
+### Complete Booking Flow
+
+```tsx
+<BookingFlow
+  config={{
+    steps: {
+      service_selection: { enabled: true, settings: {...} },
+      date_selection: { enabled: true, settings: {...} },
+      time_selection: { enabled: true, settings: {...} },
+      contact_form: { enabled: true, settings: {...} }
+    },
+    progressBar: { style: 'dots' },
+    transitions: { style: 'slide', speed: 'normal' }
+  }}
+  colors={{
+    primary: '#D8C4FF',
+    secondary: '#014421',
+    text: '#000000'
+  }}
+  services={services}
+  dates={availableDates}
+  times={availableTimes}
+  onComplete={(bookingData) => {
+    // Handle booking submission
+  }}
+/>
+```
+
+### Individual Components
+
+```tsx
+import { Hero, Gallery, Testimonials } from '@oviah/booking-components';
+
+<Hero
+  headline="Welcome to Our Salon"
+  subheadline="Professional beauty services"
+  heroImage="/hero.jpg"
+  ctaButton={{ text: 'Book Now', url: '/book' }}
+  layout="split"
+  colors={{ primary: '#D8C4FF', text: '#000000' }}
+  typography={{ headingFont: 'Geist Sans' }}
+/>
+
+<Gallery
+  title="Our Work"
+  images={galleryImages}
+  columns={3}
+  colors={{ primary: '#D8C4FF', text: '#000000' }}
+  typography={{ headingFont: 'Geist Sans' }}
+/>
+
+<Testimonials
+  title="What Clients Say"
+  testimonials={testimonials}
+  layout="grid"
+  colors={{ primary: '#D8C4FF', text: '#000000' }}
+  typography={{ headingFont: 'Geist Sans' }}
+/>
+```
+
+## 🎯 Key Features
+
+### ✅ Type-Safe
+
+Full TypeScript support with complete type definitions:
+
+```typescript
+import type {
+  Section,
+  BookingFlowConfig,
+  ColorScheme,
+  TypographyConfig
+} from '@oviah/booking-components';
+```
+
+### ✅ Themeable
+
+All components accept consistent color and typography props.
+
+### ✅ Responsive
+
+Mobile-first design with automatic breakpoints.
+
+### ✅ Accessible
+
+Semantic HTML, ARIA labels, keyboard navigation, screen reader support.
+
+### ✅ Animated
+
+Smooth animations with Framer Motion that respect `prefers-reduced-motion`.
+
+## 🤝 Contributing
+
+This is a private package for the OVIAH platform. For internal use only.
+
+## 📝 License
+
+UNLICENSED - Private package for OVIAH

package/TENANT_DATA_INTEGRATION.md

@@ -0,0 +1,402 @@
+# Tenant Data Integration Guide
+
+Complete guide for integrating the configuration data structure in your tenant template project.
+
+## 📊 Configuration Data Structure
+
+### Storage Location
+
+**Database Table**: `business_configs`
+**Column**: `page_builder` (JSONB)
+**Access**: Via API endpoint `/api/studio/config/[businessId]`
+
+The entire page configuration is stored as a JSON object in the `page_builder` column of the `business_configs` table.
+
+## 🗂️ Complete Config Object Structure
+
+```typescript
+{
+  // Template metadata
+  template_id?: string;
+  version: string;
+
+  // Theme configuration
+  theme: {
+    colors: {
+      primary: string;        // e.g., "#D8C4FF"
+      secondary: string;      // e.g., "#014421"
+      text: string;           // e.g., "#000000"
+      buttonText?: string;    // e.g., "#FFFFFF"
+      linkBackground?: string;
+      linkText?: string;
+      bookingText?: string;
+    },
+    typography: {
+      headingFont: string;    // e.g., "'Geist Sans', sans-serif"
+      bodyFont: string;       // e.g., "'Inter', sans-serif"
+      bodySize: string;       // e.g., "16px"
+    }
+  },
+
+  // Page background
+  background: {
+    type: 'color' | 'gradient' | 'image';
+    value: string;            // Color hex, gradient CSS, or image URL
+  },
+
+  // Page sections array
+  sections: Array<{
+    id: string;               // Unique identifier
+    type: string;             // Section type (hero, about, etc.)
+    enabled: boolean;         // Show/hide toggle
+    position: number;         // Sort order
+    settings: {
+      // Type-specific settings
+      marginTop?: number;
+      marginBottom?: number;
+      paddingTop?: number;
+      paddingBottom?: number;
+      // ... section-specific props
+    }
+  }>,
+
+  // Booking flow configuration
+  booking_flow?: {
+    steps: {
+      service_selection: { enabled: boolean; settings: {...} },
+      date_selection: { enabled: boolean; settings: {...} },
+      time_selection: { enabled: boolean; settings: {...} },
+      addon_selection: { enabled: boolean; settings: {...} },
+      contact_form: { enabled: boolean; settings: {...} }
+    },
+    progressBar: {
+      type: 'stepped' | 'dots' | 'bar';
+      showStepNames?: boolean;
+    },
+    transitions: {
+      style: 'slide' | 'fade';
+      speed: 'fast' | 'normal' | 'slow';
+    },
+    background?: {
+      type: 'color' | 'gradient' | 'image';
+      value: string;
+    }
+  }
+}
+```
+
+## 🎨 How Background & Theme Are Handled
+
+### In the Studio
+
+**Storage**: Config is saved to `business_configs.page_builder` as JSONB
+
+**ThemeEditor Component** (`src/components/studio/editor/ThemeEditor.tsx`):
+- Manages `config.theme.colors` (primary, secondary, text, buttonText)
+- Manages `config.theme.typography` (headingFont, bodyFont, bodySize)
+- Manages `config.background` (type, value)
+
+**Auto-save**: Changes are debounced and saved automatically every 2 seconds
+
+### In the Preview/Tenant Page
+
+**Fetching**: `GET /api/studio/config/[businessId]` returns the full config
+
+**Application** (`src/app/[businessId]/page.tsx` lines 377-412):
+
+```typescript
+// 1. Extract theme and background from config
+const { theme, background } = config;
+const themeColors = theme?.colors || {
+  primary: '#D8C4FF',
+  secondary: '#014421',
+  text: '#000000'
+};
+const themeTypography = theme?.typography || {
+  headingFont: 'Geist Sans',
+  bodyFont: 'Inter',
+  bodySize: '16px'
+};
+
+// 2. Calculate background style based on type
+const backgroundStyle: React.CSSProperties =
+  background?.type === 'gradient'
+    ? { background: background.value }
+    : background?.type === 'image'
+    ? {
+        backgroundImage: `url(${background.value})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center'
+      }
+    : { backgroundColor: background?.value || '#FFFFFF' };
+
+// 3. Apply to root container
+<div
+  className="min-h-screen"
+  style={{
+    ...backgroundStyle,
+    color: themeColors.text,
+    fontFamily: themeTypography.bodyFont,
+    fontSize: themeTypography.bodySize
+  }}
+>
+  {/* Sections rendered here */}
+</div>
+```
+
+## 🚀 Integration in Your Tenant Template
+
+### Step 1: Create API Endpoint
+
+```typescript
+// app/api/config/[slug]/route.ts
+import { createClient } from '@supabase/supabase-js';
+import { NextRequest, NextResponse } from 'next/server';
+
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.SUPABASE_SERVICE_ROLE_KEY!
+);
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+
+  const { data, error } = await supabase
+    .from('business_configs')
+    .select('page_builder, business_name, client_id')
+    .eq('client_id', slug)
+    .single();
+
+  if (error || !data) {
+    return NextResponse.json(
+      { error: 'Configuration not found' },
+      { status: 404 }
+    );
+  }
+
+  return NextResponse.json({
+    config: data.page_builder,
+    businessName: data.business_name,
+    clientId: data.client_id
+  });
+}
+```
+
+### Step 2: Create Tenant Landing Page
+
+```typescript
+// app/[slug]/page.tsx
+'use client';
+
+import { use, useEffect, useState } from 'react';
+import { SectionRenderer } from '@oviah/booking-components';
+
+export default function TenantLandingPage({ params }) {
+  const { slug } = use(params);
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadConfig() {
+      try {
+        const res = await fetch(`/api/config/${slug}`);
+        if (!res.ok) throw new Error('Failed to load');
+
+        const data = await res.json();
+        setConfig(data.config);
+      } catch (error) {
+        console.error('Failed to load config:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadConfig();
+  }, [slug]);
+
+  if (loading) return <div>Loading...</div>;
+  if (!config) return <div>Page not found</div>;
+
+  // Extract theme and background
+  const { theme, background, sections } = config;
+  const themeColors = theme?.colors || {
+    primary: '#D8C4FF',
+    secondary: '#014421',
+    text: '#000000'
+  };
+  const themeTypography = theme?.typography || {
+    headingFont: 'Geist Sans',
+    bodyFont: 'Inter',
+    bodySize: '16px'
+  };
+
+  // Calculate background style
+  const backgroundStyle =
+    background?.type === 'gradient'
+      ? { background: background.value }
+      : background?.type === 'image'
+      ? {
+          backgroundImage: `url(${background.value})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center'
+        }
+      : { backgroundColor: background?.value || '#FFFFFF' };
+
+  // Filter and sort sections
+  const enabledSections = sections
+    .filter(s => s.enabled)
+    .sort((a, b) => a.position - b.position);
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        ...backgroundStyle,
+        color: themeColors.text,
+        fontFamily: themeTypography.bodyFont,
+        fontSize: themeTypography.bodySize
+      }}
+    >
+      {enabledSections.map((section) => {
+        const marginTop = section.settings?.marginTop || 0;
+        const marginBottom = section.settings?.marginBottom || 0;
+        const paddingTop = section.settings?.paddingTop || 0;
+        const paddingBottom = section.settings?.paddingBottom || 0;
+
+        return (
+          <div
+            key={section.id}
+            style={{
+              marginTop: `${marginTop}px`,
+              marginBottom: `${marginBottom}px`,
+              paddingTop: `${paddingTop}px`,
+              paddingBottom: `${paddingBottom}px`
+            }}
+          >
+            <SectionRenderer
+              section={section}
+              theme={theme}
+              enableInlineEditing={false}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+### Step 3: Create Booking Page
+
+```typescript
+// app/[slug]/book/page.tsx
+'use client';
+
+import { use, useEffect, useState } from 'react';
+import { BookingFlow } from '@oviah/booking-components';
+
+export default function BookingPage({ params }) {
+  const { slug } = use(params);
+  const [config, setConfig] = useState(null);
+
+  useEffect(() => {
+    async function loadConfig() {
+      const res = await fetch(`/api/config/${slug}`);
+      const data = await res.json();
+      setConfig(data.config);
+    }
+    loadConfig();
+  }, [slug]);
+
+  if (!config) return <div>Loading...</div>;
+
+  const themeColors = config.theme?.colors || {};
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <BookingFlow
+        config={config.booking_flow || {}}
+        colors={themeColors}
+        services={[]}  // Fetch from your API
+        dates={[]}     // Fetch available dates
+        times={[]}     // Fetch available times
+        addons={[]}    // Fetch available addons
+        onComplete={(bookingData) => {
+          // Submit booking to your API
+          console.log('Booking submitted:', bookingData);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## 📋 Background Type Examples
+
+### Solid Color
+```json
+{
+  "background": {
+    "type": "color",
+    "value": "#FFFFFF"
+  }
+}
+```
+
+### Gradient
+```json
+{
+  "background": {
+    "type": "gradient",
+    "value": "linear-gradient(135deg, #D8C4FF 0%, #014421 100%)"
+  }
+}
+```
+
+### Image
+```json
+{
+  "background": {
+    "type": "image",
+    "value": "https://your-storage-url.com/backgrounds/image.jpg"
+  }
+}
+```
+
+## 🎯 Key Points
+
+1. **All styling is centralized** in the `config` object
+2. **Background is separate** from theme (at `config.background`)
+3. **Theme contains** colors and typography (at `config.theme`)
+4. **Sections have individual spacing** (marginTop, marginBottom, paddingTop, paddingBottom)
+5. **Typography cascades** from the root container to all sections
+6. **Package components** automatically use theme colors and typography
+
+## 🔧 Environment Variables Needed
+
+```env
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
+SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
+
+# App URL
+NEXT_PUBLIC_APP_URL=https://your-domain.com
+```
+
+## 🚨 Common Gotchas
+
+1. **Don't forget defaults**: Always provide fallback values for theme colors and typography
+2. **Filter enabled sections**: Only render sections where `enabled: true`
+3. **Sort by position**: Always sort sections by the `position` field
+4. **Apply spacing correctly**: Margin/padding are stored in pixels (number), apply as `${value}px`
+5. **Background style calculation**: Handle all three types (color, gradient, image) differently
+
+## 📖 See Also
+
+- [README.md](./README.md) - Package installation and usage
+- [TENANT_SETUP.md](./TENANT_SETUP.md) - Step-by-step tenant setup
+- [API.md](./docs/API.md) - Complete API reference
+- [DATA_SHAPES.md](./docs/DATA_SHAPES.md) - Data structures reference