@boothtrix/shared

Shared TypeScript types and utilities for booth map applications. This package provides the core data models, validation functions, and helper utilities used by both the Booth Map Studio editor and the @boothtrix/viewer component.

Installation

npm install @boothtrix/shared

Features

• TypeScript Types: Complete type definitions for booth maps, halls, floors, exhibitors, and more
• Validation: Config validation utilities to ensure data integrity
• Serialization: JSON export/import helpers for booth map configurations
• Utility Functions: Helper functions for booth operations (block/unblock, assign exhibitors, etc.)

Usage

Types

import type {
  BoothMapConfig,
  BoothData,
  HallConfig,
  FloorConfig,
  ExhibitorData,
  VenueConfig,
  BoothShape,
  BoothState,
} from '@boothtrix/shared';

// Define a booth
const booth: BoothData = {
  id: 'booth-001',
  position: { x: 10, y: 20 },
  width: 10,  // feet
  height: 10, // feet
  shape: 'rectangle',
  label: 'A-001',
  category: 'standard',
  sizeTier: 'medium',
  state: 'available',
  floorId: 'floor-1',
  isBlocked: false,
};

Validation

import { validateBoothMapConfig } from '@boothtrix/shared';

const config = loadConfigFromSomewhere();
const result = validateBoothMapConfig(config);

if (!result.valid) {
  console.error('Invalid config:', result.errors);
}

Creating Default Configuration

import { createDefaultConfig } from '@boothtrix/shared';

// Create a new booth map configuration
const config = createDefaultConfig('My Trade Fair 2025');

Working with Booths

import {
  blockBooth,
  unblockBooth,
  assignExhibitorToBooth,
  applyBoothStateOverrides,
} from '@boothtrix/shared';

// Block a booth
let config = blockBooth(config, 'booth-001', 'Reserved for sponsor', 'admin');

// Unblock a booth
config = unblockBooth(config, 'booth-001');

// Assign an exhibitor
config = assignExhibitorToBooth(config, 'booth-001', 'exhibitor-123');

// Apply state overrides (useful for viewer)
config = applyBoothStateOverrides(
  config,
  ['booth-001', 'booth-002'], // booked
  ['booth-003'],               // blocked
);

JSON Export/Import

import {
  exportConfigAsJSON,
  importConfigFromJSON,
  downloadConfigAsFile,
} from '@boothtrix/shared';

// Export to JSON string
const jsonString = exportConfigAsJSON(config);

// Import from JSON string
const importedConfig = importConfigFromJSON(jsonString);

// Download as file (browser only)
downloadConfigAsFile(config, 'my-booth-map.json');

Statistics

import {
  calculateCapacity,
  calculateAvailableBooths,
  calculateTotalArea,
  getBoothCountByState,
  getBoothsByHall,
  getBoothsByFloor,
} from '@boothtrix/shared';

const totalBooths = calculateCapacity(config);
const available = calculateAvailableBooths(config);
const area = calculateTotalArea(config); // in sq ft

const countsByState = getBoothCountByState(config);
// { available: 50, reserved: 10, booked: 30, blocked: 5, unavailable: 0, hidden: 5 }

const hallBooths = getBoothsByHall(config, 'hall-a');
const floorBooths = getBoothsByFloor(config, 'floor-1');

Type Reference

Core Types

| Type | Description | |------|-------------| | BoothMapConfig | Complete booth map configuration | | BoothData | Individual booth data | | HallConfig | Hall/zone configuration | | FloorConfig | Floor configuration | | ExhibitorData | Exhibitor/company data | | VenueConfig | Venue dimensions and settings |

Enum Types

| Type | Values | |------|--------| | BoothShape | 'square', 'rectangle', 'circle', 'triangle', 'polygon' | | BoothState | 'available', 'reserved', 'booked', 'blocked', 'unavailable', 'hidden' | | BoothCategory | 'standard', 'premium', 'sponsor', 'food-vendor', 'exhibitor', 'information', 'service', 'custom' | | BoothSizeTier | 'small', 'medium', 'large', 'xl', 'custom' | | PricingTier | 'economy', 'standard', 'premium' | | MeasurementUnit | 'ft', 'm' |

Default Colors

import { DEFAULT_BOOTH_COLORS } from '@boothtrix/shared';

// {
//   canvasBackground: '#1a1a1a',
//   gridLines: '#404040',
//   boothAvailable: '#22c55e',
//   boothReserved: '#eab308',
//   boothBooked: '#3b82f6',
//   boothBlocked: '#ef4444',
//   boothUnavailable: '#6b7280',
//   boothHidden: '#4a4a4a',
//   ...
// }

Related Packages

• @boothtrix/viewer - React component for displaying booth maps
• Booth Map Studio - Full-featured booth map editor

License

MIT