@zonetrix/viewer 1.0.0

package/README.md

@@ -0,0 +1,165 @@
+# @zonetrix/viewer
+
+Lightweight React component for rendering interactive seat maps. Perfect for booking systems, event ticketing, and venue management.
+
+## Features
+
+- 🎯 **Read-only rendering** - Display seat maps without editing capabilities
+- 🔄 **Interactive selection** - Click seats to select/deselect
+- 🌐 **API integration** - Load configs from JSON file or API endpoint
+- 🎨 **Customizable** - Override colors and styles
+- 📱 **Responsive** - Works on all screen sizes
+- ⚡ **Lightweight** - Minimal dependencies, small bundle size
+
+## Installation
+
+```bash
+npm install @zonetrix/viewer
+# or
+yarn add @zonetrix/viewer
+# or
+pnpm add @zonetrix/viewer
+```
+
+## Usage
+
+### Basic Example (with JSON file)
+
+```tsx
+import { SeatMapViewer } from '@zonetrix/viewer';
+import config from './my-venue-config.json';
+
+function App() {
+  return (
+    <SeatMapViewer
+      config={config}
+      onSeatSelect={(seat) => console.log('Selected:', seat)}
+      onSeatDeselect={(seat) => console.log('Deselected:', seat)}
+    />
+  );
+}
+```
+
+### With API URL
+
+```tsx
+import { SeatMapViewer } from '@zonetrix/viewer';
+
+function App() {
+  return (
+    <SeatMapViewer
+      configUrl="https://api.example.com/venue/123/config"
+      onSeatSelect={(seat) => console.log('Selected:', seat)}
+    />
+  );
+}
+```
+
+### With Seat State Overrides
+
+```tsx
+import { SeatMapViewer } from '@seat-map-studio/viewer';
+
+function App() {
+  const [reservedSeats, setReservedSeats] = useState(['A-1', 'A-2', 'B-5']);
+  const [unavailableSeats] = useState(['C-1']);
+
+  return (
+    <SeatMapViewer
+      config={config}
+      reservedSeats={reservedSeats}
+      unavailableSeats={unavailableSeats}
+      onSeatSelect={(seat) => {
+        // Handle seat selection
+      }}
+    />
+  );
+}
+```
+
+### Custom Colors
+
+```tsx
+import { SeatMapViewer } from '@seat-map-studio/viewer';
+
+function App() {
+  return (
+    <SeatMapViewer
+      config={config}
+      colorOverrides={{
+        seatAvailable: '#00ff00',
+        seatSelected: '#0000ff',
+        seatReserved: '#ffff00',
+        seatUnavailable: '#ff0000',
+      }}
+    />
+  );
+}
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `config` | `SeatMapConfig` | - | Seat map configuration object |
+| `configUrl` | `string` | - | URL to fetch configuration from |
+| `reservedSeats` | `string[]` | `[]` | Array of seat IDs/numbers to mark as reserved |
+| `unavailableSeats` | `string[]` | `[]` | Array of seat IDs/numbers to mark as unavailable |
+| `onSeatSelect` | `(seat: SeatData) => void` | - | Called when a seat is selected |
+| `onSeatDeselect` | `(seat: SeatData) => void` | - | Called when a seat is deselected |
+| `onSelectionChange` | `(seats: SeatData[]) => void` | - | Called when selection changes |
+| `colorOverrides` | `Partial<ColorSettings>` | - | Custom color overrides |
+| `showTooltip` | `boolean` | `true` | Show tooltip on hover |
+| `zoomEnabled` | `boolean` | `true` | Enable mouse wheel zoom |
+| `className` | `string` | `''` | Additional CSS classes |
+| `onConfigLoad` | `(config: SeatMapConfig) => void` | - | Called when config is loaded |
+| `onError` | `(error: Error) => void` | - | Called on error |
+
+### Types
+
+#### SeatData
+```typescript
+interface SeatData {
+  seatState: 'available' | 'reserved' | 'selected' | 'unavailable';
+  shape?: 'circle' | 'square' | 'rounded-square';
+  sectionName?: string;
+  rowLabel?: string;
+  columnLabel?: string;
+  price?: number;
+  seatNumber?: string;
+}
+```
+
+#### SeatMapConfig
+```typescript
+interface SeatMapConfig {
+  version: string;
+  metadata: {
+    name: string;
+    description?: string;
+    createdAt: string;
+    updatedAt: string;
+    venue?: string;
+    capacity?: number;
+  };
+  canvas: {
+    width: number;
+    height: number;
+    backgroundColor: string;
+  };
+  colors: ColorSettings;
+  seats: SerializedSeat[];
+  sections?: SerializedSection[];
+  stages?: SerializedStage[];
+}
+```
+
+## Creating Seat Map Configs
+
+Use [@seat-map-studio/creator](../creator) to visually design and export seat map configurations.
+
+## License
+
+MIT

package/dist/components/SeatMapViewer.d.ts

@@ -0,0 +1,18 @@
+import { SeatMapConfig, SeatData, ColorSettings } from '../types';
+
+export interface SeatMapViewerProps {
+    config?: SeatMapConfig;
+    configUrl?: string;
+    reservedSeats?: string[];
+    unavailableSeats?: string[];
+    onSeatSelect?: (seat: SeatData) => void;
+    onSeatDeselect?: (seat: SeatData) => void;
+    onSelectionChange?: (seats: SeatData[]) => void;
+    colorOverrides?: Partial<ColorSettings>;
+    showTooltip?: boolean;
+    zoomEnabled?: boolean;
+    className?: string;
+    onConfigLoad?: (config: SeatMapConfig) => void;
+    onError?: (error: Error) => void;
+}
+export declare const SeatMapViewer: React.FC<SeatMapViewerProps>;

package/dist/hooks/useConfigFetcher.d.ts

@@ -0,0 +1,10 @@
+import { SeatMapConfig } from '../types';
+
+interface UseConfigFetcherResult {
+    config: SeatMapConfig | null;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => void;
+}
+export declare function useConfigFetcher(configUrl?: string): UseConfigFetcherResult;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { SeatMapViewer } from './components/SeatMapViewer';
+export type { SeatMapViewerProps } from './components/SeatMapViewer';
+export type { SeatState, SeatShape, SeatData, SerializedSeat, SerializedSection, SerializedStage, ColorSettings, SeatMapConfig, } from './types';
+export { DEFAULT_COLORS } from './types';
+export { useConfigFetcher } from './hooks/useConfigFetcher';