@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

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 - Complete component API
• Data Shapes - Data structures and interfaces
• Callbacks - Event handling patterns
• Styling - Theme customization guide
• Payment Integration - Payment setup guide
• Migration Guide - 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:

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:

cd packages/booking-components
npm run build
npm link

Step 2 - In your tenant template project:

npm link @oviah/booking-components

To unlink later:

npm unlink @oviah/booking-components
npm install

Option 2: File Path (Best for Local Development)

In your tenant template's package.json:

{
  "dependencies": {
    "@oviah/booking-components": "file:../stylink-saas-dashboard/packages/booking-components"
  }
}

Then run:

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:

{
  "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:

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:

npm install @oviah/[email protected]

💡 Usage Examples

Render Sections Dynamically

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

<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

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:

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