@zonetrix/viewer 1.1.0 → 2.1.0

package/README.md

@@ -14,8 +14,10 @@ Lightweight React component for rendering interactive seat maps in your booking
 - 🌐 **Flexible Config Loading** - Load from JSON files or API endpoints
 - 🔍 **Mouse Wheel Zoom** - Smooth zoom with configurable limits
 - 🎨 **Customizable Colors** - Override default colors to match your brand
+- 🏢 **Multi-floor Support** - Filter and display seats by floor
+- 👁️ **Hidden Seats** - Automatically filters out hidden seats
 - 📱 **Responsive** - Works seamlessly across all screen sizes
-- ⚡ **Lightweight** - Minimal dependencies (~95KB gzipped)
+- ⚡ **Lightweight** - Minimal dependencies
 - 🔒 **Type-safe** - Full TypeScript support
 
 ## Installation
@@ -31,7 +33,30 @@ pnpm add @zonetrix/viewer
 ### Peer Dependencies
 
 ```bash
-npm install react react-dom
+npm install react react-dom konva react-konva
+```
+
+## Exports
+
+```typescript
+// Main component
+import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatMapViewerProps } from '@zonetrix/viewer';
+
+// Types
+import type {
+  SeatState,
+  SeatShape,
+  SeatData,
+  SeatMapConfig,
+  ColorSettings
+} from '@zonetrix/viewer';
+
+// Hooks
+import { useConfigFetcher } from '@zonetrix/viewer';
+
+// Constants
+import { DEFAULT_COLORS } from '@zonetrix/viewer';
 ```
 
 ## Quick Start
@@ -40,6 +65,7 @@ npm install react react-dom
 
 ```tsx
 import { SeatMapViewer } from '@zonetrix/viewer';
+import type { SeatData, SeatMapConfig } from '@zonetrix/viewer';
 import venueConfig from './venue-config.json';
 
 function BookingApp() {
@@ -77,14 +103,19 @@ function BookingApp() {
 |------|------|----------|-------------|
 | `config` | `SeatMapConfig` | No* | Seat map configuration object |
 | `configUrl` | `string` | No* | URL to fetch configuration from |
+| `floorId` | `string` | No | Filter seats/stages by floor ID |
+| `onFloorChange` | `(floorId: string) => void` | No | Callback when floor changes |
 | `reservedSeats` | `string[]` | No | Array of seat IDs/numbers to mark as reserved |
 | `unavailableSeats` | `string[]` | No | Array of seat IDs/numbers to mark as unavailable |
 | `onSeatSelect` | `(seat: SeatData) => void` | No | Callback when a seat is selected |
 | `onSeatDeselect` | `(seat: SeatData) => void` | No | Callback when a seat is deselected |
 | `onSelectionChange` | `(seats: SeatData[]) => void` | No | Callback when selection changes |
 | `colorOverrides` | `Partial<ColorSettings>` | No | Custom colors for seat states |
+| `showTooltip` | `boolean` | No | Show tooltips on hover (default: true) |
 | `zoomEnabled` | `boolean` | No | Enable/disable mouse wheel zoom (default: true) |
-| `showSelectedCount` | `boolean` | No | Show selected seats counter (default: true) |
+| `className` | `string` | No | Custom CSS class for the container |
+| `onConfigLoad` | `(config: SeatMapConfig) => void` | No | Callback when config is loaded |
+| `onError` | `(error: Error) => void` | No | Callback when an error occurs |
 
 *Note: Either `config` or `configUrl` must be provided.
 
@@ -226,6 +257,68 @@ function MobileOptimized() {
 }
 ```
 
+### 6. Multi-floor Venue
+
+```tsx
+import { useState } from 'react';
+import { SeatMapViewer } from '@zonetrix/viewer';
+
+function MultiFloorVenue() {
+  const [currentFloor, setCurrentFloor] = useState('floor_1');
+
+  return (
+    <div>
+      {/* Floor selector */}
+      <div className="floor-tabs">
+        {venueConfig.floors?.map((floor) => (
+          <button
+            key={floor.id}
+            onClick={() => setCurrentFloor(floor.id)}
+            className={currentFloor === floor.id ? 'active' : ''}
+          >
+            {floor.name}
+          </button>
+        ))}
+      </div>
+
+      <SeatMapViewer
+        config={venueConfig}
+        floorId={currentFloor}
+        onFloorChange={setCurrentFloor}
+        onSeatSelect={(seat) => handleSelection(seat)}
+      />
+    </div>
+  );
+}
+```
+
+### 7. Error Handling
+
+```tsx
+import { SeatMapViewer } from '@zonetrix/viewer';
+
+function RobustViewer() {
+  const handleConfigLoad = (config) => {
+    console.log('Config loaded:', config.metadata.name);
+    console.log('Total seats:', config.seats.length);
+  };
+
+  const handleError = (error) => {
+    console.error('Failed to load seat map:', error.message);
+    // Show error notification to user
+  };
+
+  return (
+    <SeatMapViewer
+      configUrl="https://api.example.com/venues/123/config"
+      onConfigLoad={handleConfigLoad}
+      onError={handleError}
+      onSeatSelect={(seat) => console.log('Selected:', seat)}
+    />
+  );
+}
+```
+
 ## Configuration Format
 
 The viewer accepts a `SeatMapConfig` object. You can create these configurations using our creator studio or build them programmatically.
@@ -289,15 +382,18 @@ interface SeatData {
   columnLabel?: string;
   price?: number;
   seatNumber?: string;
+  floorId?: string;
 }
 ```
 
 ### SeatState
 
 ```typescript
-type SeatState = 'available' | 'reserved' | 'selected' | 'unavailable';
+type SeatState = 'available' | 'reserved' | 'selected' | 'unavailable' | 'hidden';
 ```
 
+Note: Hidden seats are automatically filtered out from the viewer.
+
 ### SeatShape
 
 ```typescript
@@ -314,6 +410,7 @@ interface ColorSettings {
   seatReserved: string;
   seatSelected: string;
   seatUnavailable: string;
+  seatHidden: string;
   gridLines: string;
   currency: string;
 }
@@ -327,6 +424,7 @@ interface ColorSettings {
 | `reserved` | Seat is booked by another user | ❌ No | Yellow/Warning color |
 | `selected` | Seat is selected by current user | ✅ Yes (to deselect) | Primary/Blue color |
 | `unavailable` | Seat is blocked (maintenance, etc.) | ❌ No | Gray color |
+| `hidden` | Seat exists but is not displayed | ❌ No | Not rendered |
 
 ## Events & Callbacks
 

package/dist/components/SeatMapViewer.d.ts

@@ -1,8 +1,11 @@
+import { default as React } from 'react';
 import { SeatMapConfig, SeatData, ColorSettings } from '../types';
 
 export interface SeatMapViewerProps {
     config?: SeatMapConfig;
     configUrl?: string;
+    floorId?: string;
+    onFloorChange?: (floorId: string) => void;
     reservedSeats?: string[];
     unavailableSeats?: string[];
     onSeatSelect?: (seat: SeatData) => void;