@bailierich/booking-components 2.0.0

package/lib/storage.ts

@@ -0,0 +1,239 @@
+/**
+ * Form Image Storage Utilities for OVIAH Booking Components
+ *
+ * Handles image uploads for form photo fields using Supabase Storage
+ * Targets the "form-uploads" bucket for form submission attachments
+ */
+
+import { createClient } from '@supabase/supabase-js';
+
+// Supabase client will be initialized from environment variables
+let supabaseClient: ReturnType<typeof createClient> | null = null;
+
+export function getSupabaseClient() {
+  if (!supabaseClient) {
+    const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+    if (!supabaseUrl || !supabaseKey) {
+      throw new Error('Supabase URL and Anon Key must be provided');
+    }
+
+    supabaseClient = createClient(supabaseUrl, supabaseKey);
+  }
+  return supabaseClient;
+}
+
+// Storage configuration for form uploads
+export const FORM_UPLOAD_CONFIG = {
+  bucket: 'form-uploads',
+  structure: '{clientId}/{formId}/{timestamp}_{filename}',
+  limits: {
+    maxSize: 5 * 1024 * 1024, // 5MB in bytes
+    allowedTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/jpg'],
+  }
+} as const;
+
+export interface UploadedFormImage {
+  url: string;
+  path: string;
+  filename: string;
+  size: number;
+  type: string;
+}
+
+/**
+ * Upload a form image to Supabase Storage
+ */
+export async function uploadFormImage(
+  file: File,
+  clientId: string,
+  formId: string
+): Promise<UploadedFormImage> {
+  console.log('📦 uploadFormImage called:', { fileName: file.name, clientId, formId });
+
+  // Validate file size
+  if (file.size > FORM_UPLOAD_CONFIG.limits.maxSize) {
+    throw new Error(`File size exceeds maximum of ${FORM_UPLOAD_CONFIG.limits.maxSize / 1024 / 1024}MB`);
+  }
+
+  // Validate file type
+  if (!FORM_UPLOAD_CONFIG.limits.allowedTypes.includes(file.type)) {
+    throw new Error(`File type ${file.type} not allowed. Accepted types: JPG, PNG, WebP`);
+  }
+
+  console.log('🎨 Starting image optimization...');
+  // Optimize image before upload
+  const optimizedFile = await optimizeImage(file);
+  console.log('✅ Image optimized:', { originalSize: file.size, optimizedSize: optimizedFile.size });
+
+  // Generate unique filename
+  const timestamp = Date.now();
+  const fileExt = file.name.split('.').pop()?.toLowerCase() || 'jpg';
+  const sanitizedName = file.name.replace(/[^a-zA-Z0-9.-]/g, '_').substring(0, 50);
+  const fileName = `${timestamp}_${sanitizedName}`;
+  const filePath = `${clientId}/${formId}/${fileName}`;
+
+  console.log('☁️ Uploading to Supabase:', { filePath, bucket: FORM_UPLOAD_CONFIG.bucket });
+
+  // Get Supabase client
+  const supabase = getSupabaseClient();
+
+  // Upload to Supabase Storage
+  const { data, error } = await supabase.storage
+    .from(FORM_UPLOAD_CONFIG.bucket)
+    .upload(filePath, optimizedFile, {
+      cacheControl: '3600',
+      upsert: false,
+      contentType: optimizedFile.type
+    });
+
+  console.log('📤 Upload result:', { data, error });
+
+  if (error) {
+    console.error('❌ Supabase upload error:', error);
+    throw new Error(`Upload failed: ${error.message}`);
+  }
+
+  console.log('✅ Upload successful, getting public URL...');
+
+  // Get public URL
+  const { data: { publicUrl } } = supabase.storage
+    .from(FORM_UPLOAD_CONFIG.bucket)
+    .getPublicUrl(filePath);
+
+  console.log('✅ Public URL obtained:', publicUrl);
+
+  return {
+    url: publicUrl,
+    path: filePath,
+    filename: file.name,
+    size: optimizedFile.size,
+    type: optimizedFile.type
+  };
+}
+
+/**
+ * Optimize image before upload
+ * - Resize to max 1920px width
+ * - Compress to 85% quality
+ */
+export async function optimizeImage(
+  file: File,
+  maxWidth: number = 1920,
+  quality: number = 0.85
+): Promise<File> {
+  console.log('🖼️ optimizeImage: Starting optimization');
+
+  // Determine if the image supports transparency
+  const supportsTransparency = file.type === 'image/png' || file.type === 'image/webp';
+  const outputType = supportsTransparency ? file.type : 'image/jpeg';
+
+  console.log('🖼️ optimizeImage: Output type:', outputType, 'Transparency:', supportsTransparency);
+
+  return new Promise((resolve, reject) => {
+    // Set a timeout to prevent hanging
+    const timeout = setTimeout(() => {
+      console.error('⏱️ optimizeImage: Timeout after 30 seconds');
+      reject(new Error('Image optimization timed out'));
+    }, 30000);
+
+    const img = new Image();
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { alpha: supportsTransparency });
+
+    if (!ctx) {
+      clearTimeout(timeout);
+      console.error('❌ optimizeImage: Canvas context not available');
+      reject(new Error('Canvas context not available'));
+      return;
+    }
+
+    console.log('🖼️ optimizeImage: Created canvas and context');
+
+    img.onload = () => {
+      console.log('🖼️ optimizeImage: Image loaded', { width: img.width, height: img.height });
+
+      try {
+        // Calculate new dimensions
+        const ratio = Math.min(maxWidth / img.width, 1);
+        canvas.width = img.width * ratio;
+        canvas.height = img.height * ratio;
+
+        console.log('🖼️ optimizeImage: Resizing to', { width: canvas.width, height: canvas.height });
+
+        // Clear canvas with transparency if needed
+        if (supportsTransparency) {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+
+        // Draw resized image
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+        console.log('🖼️ optimizeImage: Image drawn, converting to blob...');
+
+        // Convert to blob
+        canvas.toBlob(
+          (blob) => {
+            clearTimeout(timeout);
+
+            if (!blob) {
+              console.error('❌ optimizeImage: Blob conversion failed');
+              reject(new Error('Image optimization failed'));
+              return;
+            }
+
+            console.log('✅ optimizeImage: Blob created', { size: blob.size, type: outputType });
+
+            // Create new file with optimized blob
+            const optimizedFile = new File([blob], file.name, {
+              type: outputType,
+              lastModified: Date.now()
+            });
+
+            console.log('✅ optimizeImage: Optimization complete');
+            resolve(optimizedFile);
+          },
+          outputType,
+          quality
+        );
+      } catch (err) {
+        clearTimeout(timeout);
+        console.error('❌ optimizeImage: Error during processing', err);
+        reject(err);
+      }
+    };
+
+    img.onerror = (err) => {
+      clearTimeout(timeout);
+      console.error('❌ optimizeImage: Failed to load image', err);
+      reject(new Error('Failed to load image'));
+    };
+
+    console.log('🖼️ optimizeImage: Creating object URL and loading image...');
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+/**
+ * Validate image file
+ */
+export function validateImageFile(file: File): { valid: boolean; error?: string } {
+  // Check file size
+  if (file.size > FORM_UPLOAD_CONFIG.limits.maxSize) {
+    return {
+      valid: false,
+      error: `File size exceeds maximum of ${FORM_UPLOAD_CONFIG.limits.maxSize / 1024 / 1024}MB`
+    };
+  }
+
+  // Check file type
+  if (!FORM_UPLOAD_CONFIG.limits.allowedTypes.includes(file.type)) {
+    return {
+      valid: false,
+      error: `File type not allowed. Accepted: JPG, PNG, WebP`
+    };
+  }
+
+  return { valid: true };
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@bailierich/booking-components",
+  "version": "2.0.0",
+  "description": "Shared booking flow components for OVIAH platform",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bailierich/oviah-saas-dashboard.git",
+    "directory": "packages/booking-components"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": {
+      "types": "./dist/styles/index.d.ts",
+      "import": "./dist/styles/index.mjs",
+      "require": "./dist/styles/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "framer-motion": "^12.23.24",
+    "lucide-react": "^0.542.0",
+    "clsx": "^2.1.1",
+    "@supabase/supabase-js": "^2.39.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5",
+    "tsup": "^8.0.0"
+  },
+  "keywords": [
+    "booking",
+    "appointments",
+    "react",
+    "components",
+    "oviah"
+  ],
+  "author": "OVIAH",
+  "license": "UNLICENSED"
+}

package/styles/animations.ts

@@ -0,0 +1,210 @@
+import type { AnimationVariants, TransitionDirection } from '../types';
+
+/**
+ * Animation duration calculator based on speed and reduced motion preference
+ */
+export function getAnimationDuration(
+  speed: 'fast' | 'normal' | 'slow',
+  reducedMotion: boolean = false
+): number {
+  if (reducedMotion) return 0.15;
+
+  switch (speed) {
+    case 'fast':
+      return 0.2;
+    case 'slow':
+      return 0.5;
+    default:
+      return 0.3;
+  }
+}
+
+/**
+ * Slide animation variants for step transitions
+ */
+export function getSlideVariants(slideDistance: number = 50): AnimationVariants {
+  return {
+    enter: (direction: TransitionDirection) => ({
+      x: direction === 'forward' ? slideDistance : -slideDistance,
+      opacity: 0,
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+    },
+    exit: (direction: TransitionDirection) => ({
+      x: direction === 'forward' ? -slideDistance : slideDistance,
+      opacity: 0,
+    }),
+  };
+}
+
+/**
+ * Fade animation variants for step transitions
+ */
+export function getFadeVariants(): AnimationVariants {
+  return {
+    enter: () => ({
+      opacity: 0,
+      scale: 0.95,
+    }),
+    center: {
+      opacity: 1,
+      scale: 1,
+    },
+    exit: () => ({
+      opacity: 0,
+      scale: 0.95,
+    }),
+  };
+}
+
+/**
+ * Get transition variants based on style preference
+ */
+export function getTransitionVariants(
+  style: 'slide' | 'fade',
+  slideDistance?: number
+): AnimationVariants {
+  return style === 'fade' ? getFadeVariants() : getSlideVariants(slideDistance);
+}
+
+/**
+ * Common animation configurations
+ */
+export const animations = {
+  /**
+   * Smooth easing curve for natural motion
+   */
+  easing: [0.4, 0, 0.2, 1] as const,
+
+  /**
+   * Spring configuration for elastic animations
+   */
+  spring: {
+    type: 'spring' as const,
+    damping: 30,
+    stiffness: 300,
+  },
+
+  /**
+   * Stagger children animation
+   */
+  staggerChildren: {
+    staggerChildren: 0.05,
+    delayChildren: 0.1,
+  },
+
+  /**
+   * Card hover animation
+   */
+  cardHover: {
+    scale: 1.02,
+    transition: { duration: 0.2 },
+  },
+
+  /**
+   * Button hover animation
+   */
+  buttonHover: {
+    scale: 1.05,
+    transition: { duration: 0.2 },
+  },
+
+  /**
+   * Fade in animation
+   */
+  fadeIn: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+
+  /**
+   * Slide up animation (for bottom sheets)
+   */
+  slideUp: {
+    initial: { y: '100%' },
+    animate: { y: 0 },
+    exit: { y: '100%' },
+  },
+
+  /**
+   * Scale in animation
+   */
+  scaleIn: {
+    initial: { opacity: 0, scale: 0.9 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.9 },
+  },
+
+  /**
+   * Slide in from left
+   */
+  slideInLeft: {
+    initial: { opacity: 0, x: -10 },
+    animate: { opacity: 1, x: 0 },
+  },
+
+  /**
+   * Slide in from right
+   */
+  slideInRight: {
+    initial: { opacity: 0, x: 10 },
+    animate: { opacity: 1, x: 0 },
+  },
+
+  /**
+   * Backdrop animation
+   */
+  backdrop: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+};
+
+/**
+ * Accessibility: Check for reduced motion preference
+ */
+export function shouldReduceMotion(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Create stagger animation for list items
+ */
+export function createStaggerAnimation(
+  itemCount: number,
+  baseDelay: number = 0.1,
+  delayIncrement: number = 0.05
+) {
+  return Array.from({ length: itemCount }, (_, index) => ({
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0 },
+    transition: {
+      duration: 0.3,
+      delay: baseDelay + index * delayIncrement,
+      ease: animations.easing,
+    },
+  }));
+}
+
+/**
+ * Utility to create entrance animation with delay
+ */
+export function createEntranceAnimation(
+  delay: number = 0,
+  duration: number = 0.3
+) {
+  return {
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0 },
+    transition: {
+      duration,
+      delay,
+      ease: animations.easing,
+    },
+  };
+}

package/styles/index.ts

@@ -0,0 +1 @@
+export * from './animations';

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": ".",
+    "strict": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "components/**/*",
+    "types/**/*",
+    "styles/**/*",
+    "hooks/**/*",
+    "index.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['index.ts', 'styles/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+  treeshake: true,
+  splitting: false,
+  minify: true,
+});