### Install seat-charts

Source: https://github.com/bartwo21/seat-charts/blob/main/README.md

Install the seat-charts library using npm.

```bash
npm install seat-charts
```

--------------------------------

### React App Usage Example

Source: https://github.com/bartwo21/seat-charts/blob/main/README.md

Example of integrating BusList and Event components in a React application. Ensure all required imports and state management are correctly set up.

```typescript
import { useState } from "react"; // required
import { placeHolderBusSeats } from "./Bus"; // required
import { BusListData } from "./BusListData"; // required
import { seatMap } from "./EventSeat"; // required
import "rsuite/dist/rsuite.min.css"; // required
import "seat-charts/styles/BusList.scss";  // required
import "seat-charts/styles/BusSeat.scss";  // required
import "seat-charts/styles/EventSeat.scss"; // required
import "seat-charts/styles/Event.scss";  // required
import "./App.css";

import { BusList, Event, SelectedSeat, EventSelectedSeat, BusTicket, BusSeat } from "seat-charts";

function App() {
  const [userSelectedSeats, setUserSelectedSeats] = useState<{
    [busId: string]: SelectedSeat[];
  }>({});
  const [selectedSeat, setSelectedSeat] = useState<string>("");
  const [busData, setBusData] = useState<BusTicket[]>([]);
  const [userSelectedEventSeats, setUserSelectedEventSeats] = useState<EventSelectedSeat[]>([]);
  return (
    <>
      <BusList
        busSeats={placeHolderBusSeats as BusSeat[]}
        busTicketData={BusListData as unknown as BusTicket[]}
        onUserSelectedSeatsChange={setUserSelectedSeats}
        onSelectedSeatChange={setSelectedSeat}
        onBusDataChange={setBusData}
      />
      <Event
        seatMap={seatMap}
        onUserSelectedSeatsChange={setUserSelectedEventSeats}
      />
    </>
  );
}

export default App;
```

--------------------------------

### Start Development Server

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Run this command to start the development server. It supports Hot Module Replacement (HMR) and provides instant updates with source maps for debugging.

```bash
npm run dev
```

--------------------------------

### Install sass-embedded

Source: https://github.com/bartwo21/seat-charts/blob/main/README.md

Install sass-embedded as a development dependency for styling.

```bash
npm install -D sass-embedded
```

--------------------------------

### Displaying Bus List Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Data-Constants.md

Shows how to render a list of buses using the BusList component. The BusList component internally utilizes BusListData.

```typescript
import { BusList } from "seat-charts";
import { BusListData } from "seat-charts/data/BusListData";

function TicketListing() {
  // BusList internally uses BusListData
  return <BusList />;
}
```

--------------------------------

### Loading Bus Seats Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Data-Constants.md

Demonstrates how to load and display bus seats using the BusSeat component. Requires importing BusSeat and placeHolderBusSeats.

```typescript
import { BusSeat } from "seat-charts";
import { placeHolderBusSeats } from "seat-charts/data/Bus";

function BusView() {
  return (
    <BusSeat
      busData={{ ID: "1" }}
      userSelectedSeats={[]}
      setUserSelectedSeats={() => {}}
      onEntered={true}
      setActiveTicketId={() => {}}
    />
  );
}
```

--------------------------------

### Format Time Example Usage

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusList.md

Demonstrates how to use the `formatTime` function to convert a full ISO 8601 timestamp into a 5-character time string.

```typescript
formatTime("1900-01-01T23:59:00+03:00") // Returns "23:59"
```

--------------------------------

### Example Event Seat Data Format

Source: https://github.com/bartwo21/seat-charts/blob/main/README.md

Example data string representing event seating layout. 'a' for available, 'x' for occupied, '_' for space, and '[seat info]' for specific seat details.

```plaintext
'a[A1, 1, 45]a[A2, 2, 25]a[A3, 3, 25]a[A4, 4, 251]a[A5, 5, 25]a[A6, 6, 25]x[A7, 7, 25]; a[B1, 1, 25]a[B2, 2, 25]x[B3, 3, 25]a[B4, 4, 25]_a[B5, 5, 25]'
```

--------------------------------

### Full Seat Map Data Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/EventSeat.md

Provides a complete example of an encoded seat map string, demonstrating the usage of various symbols and structures.

```plaintext
"'a[A1, 1, 45]a[A2, 2, 25]a[A3, 3, 25]x[A4, 4, 25]'; 'a[B1, 1, 25]_a[B2, 2, 25]x[B3, 3, 25]'"
```

--------------------------------

### Seat Map Encoding Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

This example demonstrates the custom string encoding for flexible event venue layouts, including available seats, occupied seats, gaps, and row separators.

```string
'"a[A1, 1, 45]a[A2, 2, 25]x[A3, 3, 25]'; 'a[B1, 1, 25]_a[B2, 2, 25]'"
```

--------------------------------

### Event Component Integration Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Event.md

Demonstrates how to import and use the Event component in a booking application. Includes the necessary import statement for the component and its styles.

```typescript
import { Event } from "seat-charts";
import "seat-charts/styles/Event.scss";

function Booking() {
  return <Event />;
}
```

--------------------------------

### BusList Component Integration

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusList.md

This example demonstrates how to import and use the `BusList` component in a React application. It also highlights the necessary SCSS styles that need to be imported.

```typescript
import { BusList } from "seat-charts";
import "seat-charts/styles/BusList.scss";

function App() {
  return <BusList />;
}
```

--------------------------------

### Install TypeScript Development Dependencies

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/INDEX.md

Install TypeScript and its related types for React and ReactDOM to resolve potential TypeScript import errors. This is a common step for TypeScript projects.

```bash
npm install typescript @types/react @types/react-dom
```

--------------------------------

### Basic Bus Seating with BusList

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Demonstrates the basic usage of the BusList component for rendering a bus seating chart. Ensure React and ReactDOM are installed.

```typescript
import { BusList } from "seat-charts";

export function TicketBooking() {
  return <BusList />; 
}
```

--------------------------------

### Minimal Seat-Charts Usage

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

A basic example demonstrating how to import and use the BusList and Event components from the seat-charts library. Ensure all necessary SCSS styles and RSuite CSS are imported.

```typescript
import { BusList, Event } from "seat-charts";
import "seat-charts/styles/BusList.scss";
import "seat-charts/styles/BusSeat.scss";
import "seat-charts/styles/Event.scss";
import "seat-charts/styles/EventSeat.scss";
import "rsuite/dist/rsuite.min.css";

function App() {
  return (
    <>
      <BusList />
      <Event />
    </>
  );
}
```

--------------------------------

### Example Bus Seat Data

Source: https://github.com/bartwo21/seat-charts/blob/main/README.md

Example data structure for bus seats, including seat number, status, and price. Ensure 'Durum' and 'DurumYan' are strings if they represent numerical values.

```typescript
export const placeHolderBusSeats = [
  {
    KoltukStr: "01",
    KoltukNo: "1",
    Durum: "3",
    DurumYan: "0",
    KoltukFiyatiInternet: "350",
  },
  {
    KoltukStr: "KO",
    KoltukNo: "-1",
    Durum: "0",
    DurumYan: "0",
    KoltukFiyatiInternet: "0",
  },
  {
    KoltukStr: "KO",
    KoltukNo: "-1",
    Durum: "0",
    DurumYan: "0",
    KoltukFiyatiInternet: "0",
  },
  {
    KoltukStr: "02",
    KoltukNo: "2",
    Durum: "1",
    DurumYan: "1",
    KoltukFiyatiInternet: "350",
  },
  // Add more seats as needed
];
```

--------------------------------

### Rendering Event Seats Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Data-Constants.md

Illustrates how to render event seats using the EventSeat component with a predefined seat map. Requires importing EventSeat and seatMap.

```typescript
import { EventSeat } from "seat-charts";
import { seatMap } from "seat-charts/data/EventSeat";

function EventBooking() {
  const [selected, setSelected] = useState([]);
  
  return (
    <EventSeat
      data={seatMap}
      selectedSeats={selected}
      setSelectedSeats={setSelected}
    />
  );
}
```

--------------------------------

### Seat Map Data Format Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Event.md

An example of the encoded seat map string format used to represent venue seating. This format includes seat availability, identifiers, and prices.

```plaintext
"'a[A1, 1, 45]a[A2, 2, 25]...'; 'a[B1, 1, 25]x[B2, 2, 30]...'"
```

--------------------------------

### EventSeat React Usage Example

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/EventSeat.md

Demonstrates how to use the EventSeat component in a React application. It shows how to manage selected seats using the useState hook and pass data, selected seats, and a setter function to the component.

```typescript
import { EventSeat, SelectedSeat } from "seat-charts";
import { useState } from "react";

const seatMapString =
  "'a[A1, 1, 45]a[A2, 2, 25]x[A3, 3, 25]'; 'a[B1, 1, 25]x[B2, 2, 30]'" ;

function VenueBooking() {
  const [selected, setSelected] = useState<SelectedSeat[]>([]);

  return (
    <EventSeat
      data={seatMapString}
      selectedSeats={selected}
      setSelectedSeats={setSelected}
    />
  );
}

```

--------------------------------

### Import Bus Ticket List Data

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Imports the `BusListData` constant, which contains example bus ticket information. This data includes route details, pricing, and seat availability.

```typescript
import { BusListData } from "seat-charts/data/BusListData";

const tickets = BusListData;  // Type: BusTicket[]
```

--------------------------------

### Import Placeholder Bus Seats Data

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Imports the `placeHolderBusSeats` constant, which provides an example bus seat configuration array. This is useful for initializing or testing bus seat layouts.

```typescript
import { placeHolderBusSeats } from "seat-charts/data/Bus";

const busSeats = placeHolderBusSeats;  // Type: BusSeatData[]
```

--------------------------------

### Test Seat Selection

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Demonstrates how to test seat selection functionality using @testing-library/react and user-event. This snippet assumes you have the necessary testing libraries installed and configured.

```typescript
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { EventSeat } from "seat-charts";

test("toggles seat selection", async () => {
  const { container } = render(
    <EventSeat
      data="'a[A1, 1, 50]'"
      selectedSeats={[]}
      setSelectedSeats={jest.fn()}
    />
  );
  
  const seat = container.querySelector(".empty-event-seat");
  await userEvent.click(seat!); // Assert selection callback was called
});
```

--------------------------------

### Build for Production

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Execute these commands to create a production-ready build. This includes minified JavaScript, optimized CSS, and tree-shaken code.

```bash
npm run build
npm run preview
```

--------------------------------

### Project Dependencies

Source: https://github.com/bartwo21/seat-charts/blob/main/README.md

List of core dependencies required for the project, including React, rsuite, and sass.

```json
{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^5.2.1",
  "rsuite": "^5.64.0",
  "sass": "^1.77.3"
}
```

--------------------------------

### Sample Seat Objects

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Data-Constants.md

Illustrates various sample seat objects, demonstrating different states and types such as empty seats, sold seats, corridor markers, and door markers. Each object includes properties like KoltukStr, KoltukNo, Durum, DurumYan, and KoltukFiyatiInternet.

```typescript
// Empty seat with no adjacent restrictions
{
  KoltukStr: "08",
  KoltukNo: "8",
  Durum: "0",
  DurumYan: "0",
  KoltukFiyatiInternet: "350"
}
```

```typescript
// Seat sold to male with female-only adjacent restriction
{
  KoltukStr: "02",
  KoltukNo: "2",
  Durum: "1",
  DurumYan: "1",
  KoltukFiyatiInternet: "350"
}
```

```typescript
// Empty seat with female-only adjacent seat
{
  KoltukStr: "05",
  KoltukNo: "5",
  Durum: "0",
  DurumYan: "1",
  KoltukFiyatiInternet: "350"
}
```

```typescript
// Corridor marker
{
  KoltukStr: "KO",
  KoltukNo: "-1",
  Durum: "0",
  DurumYan: "0",
  KoltukFiyatiInternet: "0"
}
```

```typescript
// Door marker with different price
{
  KoltukStr: "36",
  KoltukNo: "36",
  Durum: "0",
  DurumYan: "0",
  KoltukFiyatiInternet: "50"
}
```

--------------------------------

### SVG Rendering Formula

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusSeat.md

Calculates the X and Y coordinates for rendering seats within the SVG grid. Uses constants for row count, start position, and dimensions.

```typescript
const columnIndex = Math.floor(index / rowCount);      // 5 rows per column
const rowIndex = rowCount - 1 - (index % rowCount);   // Reverse row order
const x = startX + columnIndex * columnWidth;
const y = startY + rowIndex * rowHeight;
```

--------------------------------

### EventSeat Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/MANIFEST.txt

Documentation for the EventSeat component, which visualizes interactive event seating charts.

```APIDOC
## EventSeat Component

### Description

The `EventSeat` component renders an interactive seating chart for events. It supports various layouts, custom pricing per seat, and dynamic selection toggling.

### Features

- Renders seating charts based on encoded map formats.
- Supports row-column layouts (e.g., A-Z rows).
- Allows custom pricing to be defined for individual seats.
- Handles gap/space rendering within the seating layout.
- Enables toggling seat selection.
- Displays price tooltips on hover.

### Props

- **seatMap** (object) - Required - Configuration object for the seating map.
- **onSeatToggle** (function) - Optional - Callback function when a seat's selection state is toggled.
- **pricing** (object) - Optional - Pricing information for seats.

### Examples

```typescript
import { EventSeat } from 'seat-charts';

const seatingData = {
  rows: ['A', 'B'],
  seats: [
    [{ id: 'A1', price: 50 }, { id: 'A2', price: 50 }],
    [{ id: 'B1', price: 75 }, { id: 'B2', price: 75 }]
  ]
};

<EventSeat seatMap={seatingData} />
```

### Styling

Includes styling for seat elements, selection states, and price tooltips.
```

--------------------------------

### Load Seat Charts and RSuite Styles

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/INDEX.md

Import necessary SCSS and CSS files to ensure proper styling for Seat Charts and RSuite components. This is crucial for resolving style loading issues.

```typescript
import "seat-charts/styles/BusList.scss";
import "rsuite/dist/rsuite.min.css";
```

--------------------------------

### Integrate BusSeat Component in React

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusSeat.md

Demonstrates how to integrate the BusSeat component into a React application using useState for managing selected seats and active ticket IDs. Ensure to import necessary hooks and the BusSeat component.

```typescript
import { useState } from "react";
import { BusSeat } from "seat-charts";
import { placeHolderBusSeats } from "./data/Bus";

function TicketView({ ticket }) {
  const [userSelectedSeats, setUserSelectedSeats] = useState({});
  const [activeTicketId, setActiveTicketId] = useState(null);

  return (
    <BusSeat
      busData={ticket}
      userSelectedSeats={userSelectedSeats[ticket.ID] || []}
      onEntered={true}
      setActiveTicketId={setActiveTicketId}
      setUserSelectedSeats={setUserSelectedSeats}
    />
  );
}
```

--------------------------------

### Package JSON Dev Dependencies

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Lists the development dependencies required for building and linting the project, including Vite, TypeScript, ESLint, and React plugins.

```json
{
  "@types/react": "^18.2.66",
  "@types/react-dom": "^18.2.22",
  "@typescript-eslint/eslint-plugin": "^7.2.0",
  "@typescript-eslint/parser": "^7.2.0",
  "@vitejs/plugin-react": "^4.2.1",
  "eslint": "^8.57.0",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.6",
  "sass": "^1.77.3",
  "typescript": "^5.2.2",
  "vite": "^5.2.0"
}
```

--------------------------------

### BusSeat Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/MANIFEST.txt

Documentation for the BusSeat component, which visualizes interactive bus seat maps.

```APIDOC
## BusSeat Component

### Description

The `BusSeat` component provides an interactive visualization of a bus seat map. It supports features like gender-based selection, seat status indicators, and restrictions on adjacent seat bookings.

### Features

- SVG-based seat rendering (typically a 5x13 grid).
- Gender selection modal for passengers.
- Seat status codes (0-6) indicating availability and booking status.
- Restrictions for adjacent seat bookings (max 4 seats per booking).
- Constraints for gender selection.

### Props

- **seats** (BusSeatData[]) - Required - Array of seat data objects.
- **onSeatSelect** (function) - Optional - Callback function when a seat is selected.
- **maxSeats** (number) - Optional - Maximum number of seats that can be booked at once (defaults to 4).

### Examples

```typescript
import { BusSeat } from 'seat-charts';

const seatLayout = [
  { id: '1A', status: 0, gender: 'male' },
  // ... more seats
];

<BusSeat seats={seatLayout} maxSeats={4} />
```

### Styling

Utilizes CSS classes for styling, including seat states and selection indicators.
```

--------------------------------

### Vite Configuration

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Basic Vite configuration file using TypeScript. Includes the React plugin for Fast Refresh and JSX transformation.

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})
```

--------------------------------

### Peer Dependencies for Seat Charts

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Lists the required peer dependencies for the seat-charts library, including React, ReactDOM, rsuite, and react-icons.

```json
{
  "react": ">=18.2.0",
  "react-dom": ">=18.2.0",
  "rsuite": ">=5.64.0",
  "react-icons": ">=5.2.1"
}
```

--------------------------------

### Import Placeholder Bus Seats Data

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Import the `placeHolderBusSeats` constant, which contains a 57-object bus configuration with numbered seats, corridor markers, and door markers.

```typescript
import { placeHolderBusSeats } from "seat-charts/data/Bus";
```

--------------------------------

### Required Styling Imports

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Import all necessary SCSS stylesheets for Seat Charts components and the peer dependency rsuite for proper styling.

```typescript
import "seat-charts/styles/BusList.scss";
import "seat-charts/styles/BusSeat.scss";
import "seat-charts/styles/Event.scss";
import "seat-charts/styles/EventSeat.scss";
import "rsuite/dist/rsuite.min.css";    // Peer dependency styling
```

--------------------------------

### BusSeat SCSS Styling

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/INDEX.md

SCSS classes used for styling the BusSeat component and its elements. Ensure rsuite CSS is included for peer styling dependencies.

```scss
BusSeat.scss → .bus-layout, .s-seat, .selected-male, .selected-female
BusList.scss → .bus-tickets-boxes, .bus-ticket-header, .selected-seats
EventSeat.scss → .event-seat-map, .event-seat, .occupied-event-seat
Event.scss → .event, .selected-seats
```

--------------------------------

### Manual Bus Seat Control with BusSeat

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Illustrates manual control over bus seats using the BusSeat component. This pattern requires managing selected seats and active ticket IDs.

```typescript
import { BusSeat, SelectedSeat, BusTicket } from "seat-charts";
import { useState } from "react";

export function CustomTicketView({ ticket }: { ticket: BusTicket }) {
  const [selected, setSelected] = useState<{ [id: string]: SelectedSeat[] }>({});
  const [activeId, setActiveId] = useState<string | null>(null);

  return (
    <BusSeat
      busData={ticket}
      userSelectedSeats={selected[ticket.ID] || []}
      setUserSelectedSeats={setSelected}
      onEntered={activeId === ticket.ID}
      setActiveTicketId={setActiveId}
    />
  );
}
```

--------------------------------

### Import EventSeat Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Import the EventSeat component from the seat-charts library. This component renders an interactive event venue seat map with a row-based layout.

```typescript
import { EventSeat } from "seat-charts";
```

--------------------------------

### Import Bus List Data

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Import the `BusListData` constant, which includes over 2 sample bus tickets with complete journey details for different routes.

```typescript
import { BusListData } from "seat-charts/data/BusListData";
```

--------------------------------

### Event Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/MANIFEST.txt

Documentation for the Event component, used for rendering event venue containers.

```APIDOC
## Event Component

### Description

The `Event` component serves as a container for event venue information, typically used in conjunction with seating charts. It helps structure the display of event-related data.

### Usage

This component is often used as a wrapper for `EventSeat` or other event-specific UI elements.

```typescript
import { Event } from 'seat-charts';

<Event>
  {/* Event-specific content, e.g., EventSeat component */}
</Event>
```

### Props

- **children** (ReactNode) - Required - The content to be rendered within the event container.
- **eventName** (string) - Optional - The name of the event.

### Styling

Provides a base container for event-related layouts.
```

--------------------------------

### Package JSON Runtime Dependencies

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Defines the runtime dependencies for the project, including React, ReactDOM, react-icons, and rsuite.

```json
{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^5.2.1",
  "rsuite": "^5.64.0"
}
```

--------------------------------

### Component Imports for Seat Charts

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Import core components like BusList, BusSeat, and Event from the main library package. Ensure these components are available in your project.

```typescript
import { BusList, BusSeat, Event } from "seat-charts";
```

--------------------------------

### Set Module Type to ES Modules

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Configure your `package.json` to use ES modules (ESM) instead of CommonJS. This is the default for the project.

```json
{
  "type": "module"
}
```

--------------------------------

### ESLint Configuration

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Shared ESLint rules for both source and build configuration files. Enforces code quality and consistent formatting across the project.

```javascript
/** @type {import('eslint').Linter.Config} */
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  ignorePatterns: ['node_modules/', 'dist/'],
  rules: {
    // Place your rules here
    '@typescript-eslint/no-explicit-any': 'warn',
    '@typescript-eslint/no-unused-vars': 'warn',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};
```

--------------------------------

### Import BusSeat Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Import the BusSeat component from the seat-charts library. This component provides an interactive SVG bus seat map with a gender-based selection modal.

```typescript
import { BusSeat } from "seat-charts";
```

--------------------------------

### Import SCSS Files

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/configuration.md

Import SCSS files into your TypeScript code for styling. Vite handles the automatic compilation to CSS during the build process.

```typescript
import "./BusSeat.scss";
import "./BusList.scss";
import "./Event.scss";
import "./EventSeat.scss";
```

--------------------------------

### Import Event Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Import the Event component from the seat-charts library. This component visualizes event venue seating and displays a summary of selected seats.

```typescript
import { Event } from "seat-charts";
```

--------------------------------

### BusSeat Component Props

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusSeat.md

The BusSeat component accepts the following props to manage bus data, user selections, and interaction states.

```APIDOC
## BusSeat Component Props

### Description
The BusSeat component accepts the following props to manage bus data, user selections, and interaction states.

### Parameters
#### Props
- **busData** (any) - Required - Bus ticket object containing ID and seat pricing.
- **userSelectedSeats** (SelectedSeat[]) - Required - Array of currently selected seats for this bus.
- **setUserSelectedSeats** (Function) - Required - State setter for updating selected seats across all buses.
- **onEntered** (boolean) - Required - Flag indicating if this bus panel is currently active/expanded.
- **setActiveTicketId** (Function) - Required - State setter for the currently active ticket ID.
```

--------------------------------

### Import Seat Map Data

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Import the `seatMap` constant, representing an encoded event venue configuration with customizable pricing tiers.

```typescript
import { seatMap } from "seat-charts/data/EventSeat";
```

--------------------------------

### Dynamic Import for Next.js

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/README.md

Use dynamic import to load the BusList component in Next.js, disabling server-side rendering as Seat-charts is client-side only.

```typescript
import dynamic from "next/dynamic";

const BusList = dynamic(() => import("seat-charts").then(m => m.BusList), {
  ssr: false // Seat-charts is client-side only
});
```

--------------------------------

### Import Seat Charts Stylesheets

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Imports all necessary SCSS stylesheets for bus and event components, as well as the required RSuite CSS dependency. These imports are essential for the visual rendering of the seat charts.

```typescript
// Bus components
import "seat-charts/styles/BusList.scss";
import "seat-charts/styles/BusSeat.scss";

// Event components
import "seat-charts/styles/EventSeat.scss";
import "seat-charts/styles/Event.scss";

// Required dependency
import "rsuite/dist/rsuite.min.css";
```

--------------------------------

### Data Constants

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/MANIFEST.txt

Information about the sample datasets and constants available for use with Seat Charts components.

```APIDOC
## Data Constants

### Description

This section details the sample datasets and constants provided within the Seat Charts library. These can be used for testing, examples, or as a basis for custom data structures.

### Available Constants

- **placeHolderBusSeats**: A large array (57 objects) of sample bus seat data, useful for populating `BusSeat` components during development or testing.

  ```javascript
  // Example structure (simplified)
  const placeHolderBusSeats = [
    { id: '1', row: 'A', number: 1, status: 0 },
    // ... 54 more objects
  ];
  ```

- **BusListData**: Sample data containing at least 2 bus tickets, suitable for initializing the `BusList` component.

  ```javascript
  // Example structure (simplified)
  const BusListData = [
    { id: 'TKT001', route: 'Route A', time: '10:00' },
    { id: 'TKT002', route: 'Route B', time: '12:00' },
  ];
  ```

- **seatMap**: A sample seat map structure, typically representing a 5x16 grid, which can be used with `EventSeat` or similar components.

  ```javascript
  // Example structure (simplified)
  const seatMap = {
    rows: ['1', '2', '3', '4', '5'],
    seats: [
      [{ id: '1A', price: 10 }, { id: '1B', price: 10 }, ...],
      // ... 4 more rows
    ]
  };
  ```
```

--------------------------------

### EventSeat Component Props

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/EventSeat.md

The EventSeat component accepts the following props to configure its behavior and display.

```APIDOC
## EventSeat Component Props

### Description

The EventSeat component is a React component that renders an interactive seating chart. It manages seat selection, occupied seat protection, and gap rendering based on encoded seat map data.

### Parameters

#### Props

- **data** (string) - Required - Encoded seat map string with row and seat information. This string defines the layout and status of each seat.
- **selectedSeats** (EventSelectedSeat[]) - Required - An array of objects representing the seats that are currently selected by the user.
- **setSelectedSeats** (Function) - Required - A callback function that is invoked when the selection of seats changes. It receives the updated array of selected seats as an argument.
```

--------------------------------

### BusSeat Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

The BusSeat component is an interactive SVG bus seat map that includes a gender-based selection modal. It visualizes the bus seats and handles seat selection logic.

```APIDOC
## BusSeat

### Description
Interactive SVG bus seat map with gender-based selection modal.

### Props
| Name | Type | Required | Description |
|------|------|----------|-------------|
| busData | any | Yes | Bus ticket object with ID and pricing |
| userSelectedSeats | SelectedSeat[] | Yes | Currently selected seats array |
| setUserSelectedSeats | Function | Yes | State setter for selected seats |
| onEntered | boolean | Yes | Panel active/expanded flag |
| setActiveTicketId | Function | Yes | State setter for active ticket |

### Features
- SVG-based seat visualization
- 5-seat column grid layout
- Gender selection modal for each seat
- Seat status validation (empty, sold, reserved, etc.)
- Gender-based seating constraints
- Maximum 4 seats per booking enforcement

### Styles
`seat-charts/styles/BusSeat.scss`
```

--------------------------------

### Sample Ticket Object 1

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Data-Constants.md

Represents a bus ticket from Alaşehir Sarıkız Turizm. Includes details like departure/arrival, pricing, and seat availability.

```typescript
{
  ID: "3",
  FirmaAdi: "Alaşehir Sarıkız Turizm",
  FirmaNo: "341",
  Saat: "1900-01-01T23:59:00+03:00",        // 23:59 departure
  Tarih: "2024-03-27T00:00:00+03:00",       // March 27, 2024
  KalkisNokta: "Alibeyköy",
  VarisNokta: "İzmir",
  IlkKalkisYeri: "İSTANBUL(Esenler)",
  SonVarisYeri: "DENİZLİ",
  OtobusKoltukYerlesimTipi: "2+1",
  OtobusTipi: "1+2",
  SeferTipiAciklamasi: "MOLALI",            // With stops
  NormalBiletFiyati: "350",
  BiletFiyatiInternet: "600",
  SeferBosKoltukSayisi: "37",
  SeyahatSuresi: "1900-01-01T08:30:00+03:00",  // 8.5 hours
  YaklasikSeyahatSuresi: "9-10",
  HatNo: "12",
  Vakit: "Gece",                             // Night departure
  SefereKadarIptalEdilebilmeSuresiDakika: "360",  // 6 hour cancellation
  MaximumRezerveTarihiSaati: "2024-03-27T00:00:00+03:00",
  Ozellikler: [],
  selectedSeats: []
}
```

--------------------------------

### Import Event Seat Map Data

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Imports the `seatMap` constant, which is a string representing an event venue's seat layout. It includes seat occupancy and pricing information.

```typescript
import { seatMap } from "seat-charts/data/EventSeat";

const eventSeats = seatMap;  // Type: string
```

--------------------------------

### Data Imports from Seat Charts

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Import data-related modules like placeHolderBusSeats, BusListData, and seatMap from their respective paths within the library. These provide sample or structural data.

```typescript
import { placeHolderBusSeats } from "seat-charts/data/Bus";
import { BusListData } from "seat-charts/data/BusListData";
import { seatMap } from "seat-charts/data/EventSeat";
```

--------------------------------

### Sample Ticket Object 2

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/Data-Constants.md

Represents a bus ticket from İstanbul Kalesi. Features include direct service, different seat configurations, and cancellation policies.

```typescript
{
  ID: "151",
  FirmaAdi: "İstanbul Kalesi",
  FirmaNo: "3",
  Saat: "1900-01-01T00:15:00+03:00",        // 00:15 departure
  Tarih: "2024-03-27T00:00:00+03:00",
  KalkisNokta: "Esenler Otogarı",
  VarisNokta: "İzmir",
  IlkKalkisYeri: "Esenler Otogarı",
  SonVarisYeri: "İzmir Otogarı",
  OtobusKoltukYerlesimTipi: "2+1",
  OtobusTipi: "2+1 TRAVEGO DELUXE",
  SeferTipiAciklamasi: "DIREKT",            // Direct service
  NormalBiletFiyati: "350",
  BiletFiyatiInternet: "630",
  SeferBosKoltukSayisi: "38",
  SeyahatSuresi: "1900-01-01T08:15:00+03:00",  // 8.25 hours
  YaklasikSeyahatSuresi: "8-9",
  HatNo: "1",
  Vakit: "Gece",
  SefereKadarIptalEdilebilmeSuresiDakika: "120",  // 2 hour cancellation
  OTipOzellik: "10001000011000001010000000000000000000000000000000",
  Ozellikler: [],
  selectedSeats: []
}
```

--------------------------------

### BusSeat Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/INDEX.md

The BusSeat component represents an individual seat on the bus, handling selection, deselection, and gender selection logic.

```APIDOC
## BusSeat Component

### Description
Represents a single seat within the bus seating chart. This component manages the state of a seat, including its selection, and handles user interactions like clicking to select or deselect.

### Props
- `busData` (object) - Data related to the bus.
- `userSelectedSeats` (array) - An array of currently selected seats.
- `setUserSelectedSeats` (function) - Function to update the user's selected seats.
- `onEntered` (function) - Callback function when a seat is entered.
- `setActiveTicketId` (function) - Function to set the active ticket ID.

### State
- `open` (boolean) - Controls the visibility of the gender selection modal.
- `seats` (array) - Internal representation of seats.
- `selectedSeat` (object) - The currently selected seat.

### Methods
- `handleOpen`: Opens the gender selection modal.
- `handleClose`: Closes the gender selection modal.
- `handleSelectSeat`: Handles the logic for selecting or deselecting a seat.
```

--------------------------------

### BusSeat Component State

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusSeat.md

The BusSeat component manages internal state for controlling the gender selection modal, seat configuration, and the currently selected seat.

```APIDOC
## BusSeat Component State

### Description
The BusSeat component manages internal state for controlling the gender selection modal, seat configuration, and the currently selected seat.

### State Variables
- **open** (boolean) - Controls visibility of gender selection modal. Initial Value: `false`.
- **seats** (any[]) - Bus seat configuration array loaded from placeholder data. Initial Value: `[]`. Updated: On `onEntered` prop change via `useEffect`.
- **selectedSeat** (string) - Currently selected seat number for gender modal display. Initial Value: `""`.
```

--------------------------------

### Import BusList Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Import the BusList component from the seat-charts library. This component displays a collapsible accordion-style list of bus tickets with integrated seat selection.

```typescript
import { BusList } from "seat-charts";
```

--------------------------------

### Seat Map Data Format

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/EventSeat.md

Understand the encoding rules for the seat map data string used by the EventSeat component.

```APIDOC
## Seat Map Data Format

### Description

The `data` prop for the EventSeat component expects a string that encodes the seating arrangement. This format allows for specifying seat availability, occupancy, and pricing.

### Encoding Rules

| Symbol | Meaning | Example |
|---|---|---|
| `'` | Row start/end marker | `'a[A1, 1, 45]'` |
| `;` | Row separator | After final seat marker |
| `a` | Available seat | `a[A1, 1, 45]` |
| `x` | Occupied seat | `x[B3, 3, 25]` |
| `_` | Space/gap | `_` |
| `[Name, Number, Price]` | Seat details | `[A1, 1, 45]` |

### Full Example

```
"'a[A1, 1, 45]a[A2, 2, 25]a[A3, 3, 25]x[A4, 4, 25]'; 'a[B1, 1, 25]_a[B2, 2, 25]x[B3, 3, 25]'"
```
```

--------------------------------

### BusList Component

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/MANIFEST.txt

Documentation for the BusList component, which provides an accordion-style list of bus tickets.

```APIDOC
## BusList Component

### Description

The `BusList` component renders a list of bus tickets, allowing users to expand and view details for each ticket using an accordion interface. It is designed for displaying travel information in a user-friendly format.

### Usage

```typescript
import { BusList } from 'seat-charts';

// Example usage within a React component
<BusList tickets={busTicketsData} />
```

### Props

- **tickets** (BusTicket[]) - Required - An array of bus ticket objects to display.
- **onTicketSelect** (function) - Optional - Callback function when a ticket is selected.

### State Management

Manages the expanded/collapsed state of each ticket in the list.

### CSS Classes

- `.bus-list-container`
- `.bus-ticket-item`
- `.ticket-details`
```

--------------------------------

### Display Bus Tickets with BusList

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/INDEX.md

Use the BusList component to display bus tickets. Ensure the BusList component is imported from the seat-charts library.

```typescript
import { BusList } from "seat-charts";

export function App() {
  return <BusList />;
}
```

--------------------------------

### handleSelectSeat

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusSeat.md

Validates seat availability based on several criteria and adds or removes a seat from the user's selection. It includes checks for seat status, adjacent seat restrictions, and booking limits.

```APIDOC
## handleSelectSeat

### Description
Validates seat availability and adds/removes seat from selection.

### Method
```typescript
const handleSelectSeat = (seatNumber: string, gender: string) => {
  const selectedSeat = Array.isArray(seats)
    ? seats.flat().find((seat) => seat.KoltukStr === seatNumber)
    : null;

  if (!selectedSeat) {
    alert("The seat you selected is not available.");
    return;
  }
  if (userSelectedSeats?.length === 4) {
    alert("You can select up to 4 seats.");
    return;
  }

  if (
    selectedSeat.Durum !== "0" ||
    selectedSeat.DurumYan === "3" ||
    selectedSeat.DurumYan === "4" ||
    selectedSeat.DurumYan === "5" ||
    selectedSeat.DurumYan === "6"
  ) {
    alert("The seat you selected is not available.");
    return;
  }

  if (selectedSeat.DurumYan === "1" && gender !== "female") {
    alert("This seat is only available for females.");
    return;
  }

  if (selectedSeat.DurumYan === "2" && gender !== "male") {
    alert("This seat is only available for males.");
    return;
  }

  if (!userSelectedSeats?.some((seat) => seat.seatNumber === seatNumber)) {
    setUserSelectedSeats((prevSeats) => {
      const updatedSeats = { ...prevSeats };
      const currentSeats = updatedSeats[busData.ID] || [];
      if (currentSeats.some((seat) => seat.seatNumber === seatNumber)) {
        updatedSeats[busData.ID] = currentSeats.filter(
          (seat) => seat.seatNumber !== seatNumber
        );
      } else {
        updatedSeats[busData.ID] = [
          ...currentSeats,
          {
            busId: busData.ID,
            seatNumber,
            gender,
            price: selectedSeat?.KoltukFiyatiInternet,
          },
        ];
      }
      return updatedSeats;
    });
  }
  setSelectedSeat(seatNumber);
  handleClose();
};
```

### Parameters
#### Path Parameters
- **seatNumber** (string) - Required - Seat identifier (e.g., "01", "A5")
- **gender** (string) - Required - Selected gender ("male" or "female")

### Returns
`void`

### Validation Checks
1. Seat must exist in configuration (shows alert if not)
2. Maximum 4 seats per booking (shows alert if exceeded)
3. Seat status must be "0" (empty)
4. Adjacent seat status must not be "3", "4", "5", or "6"
5. If adjacent seat sold to female ("1"), only females can select
6. If adjacent seat sold to male ("2"), only males can select

### Side Effects
- Updates parent's `userSelectedSeats` state
- Updates `selectedSeat` state
- Closes modal on success
```

--------------------------------

### Style Imports for Seat Charts Components

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/exports.md

Import SCSS styles for individual components like BusList, BusSeat, Event, and EventSeat. These imports ensure the correct styling is applied to the components.

```typescript
import "seat-charts/styles/BusList.scss";
import "seat-charts/styles/BusSeat.scss";
import "seat-charts/styles/Event.scss";
import "seat-charts/styles/EventSeat.scss";
```

--------------------------------

### handleOpen

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusSeat.md

Opens the gender selection modal and sets the active ticket ID. This function is used to initiate the seat selection process for a specific ticket.

```APIDOC
## handleOpen

### Description
Opens the gender selection modal and sets the active ticket.

### Method
```typescript
const handleOpen = () => {
  setOpen(true);
  setActiveTicketId(busData.ID);
};
```

### Parameters
None

### Returns
`void`

### Effect
- Sets `open` state to `true`
- Updates parent component's active ticket ID
```

--------------------------------

### Open Gender Selection Modal

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/api-reference/BusSeat.md

Opens the gender selection modal and sets the active ticket ID. Use this to initiate the seat selection process for a specific ticket.

```typescript
const handleOpen = () => {
  setOpen(true);
  setActiveTicketId(busData.ID);
};
```

--------------------------------

### Show Custom Event Seating with EventSeat

Source: https://github.com/bartwo21/seat-charts/blob/main/_autodocs/INDEX.md

Integrate the EventSeat component to display custom event seating arrangements. Manage selected seats using React's useState hook.

```typescript
import { EventSeat } from "seat-charts";
import { useState } from "react";

export function Venue() {
  const [selected, setSelected] = useState([]);
  return (
    <EventSeat
      data="'a[A1, 1, 50]a[A2, 2, 50]'"
      selectedSeats={selected}
      setSelectedSeats={setSelected}
    />
  );
}
```