Route Selection Component

A React component for handling route and journey selection with support for one-way and return journeys.

Installation

npm install route-selection-component

Features

• Dynamic route selection handling (single route, two-way routes, multiple routes)
• Journey type selection (One-Way/Return)
• Date selection with calendar picker
• Responsive design
• Debug mode for development
• Standalone and embedded modes
• TypeScript support
• Independent state management per instance using Zustand

Usage

Basic Example

import { RouteSelection, createRouteSelectionStore } from 'route-selection-component';

function App() {
  // Create a store instance for this component
  const store = createRouteSelectionStore({
    routes: [
      {
        id: 1,
        departure: "Cape Jervis",
        arrival: "Penneshaw",
        reverseId: 2
      },
      {
        id: 2,
        departure: "Penneshaw",
        arrival: "Cape Jervis",
        reverseId: 1
      }
    ],
    journeyTypes: ["One-Way", "Return"],
    defaultJourneyType: "One-Way",
    dates: {
      departureDate: "2024-12-30",
      returnDate: "2024-12-31"
    }
  });

  return (
    <RouteSelection
      store={store}
      data={{
        routes: [
          {
            id: 1,
            departure: "Cape Jervis",
            arrival: "Penneshaw",
            reverseId: 2
          },
          {
            id: 2,
            departure: "Penneshaw",
            arrival: "Cape Jervis",
            reverseId: 1
          }
        ],
        journeyTypes: ["One-Way", "Return"],
        defaultJourneyType: "One-Way",
        dates: {
          departureDate: "2024-12-30",
          returnDate: "2024-12-31"
        }
      }}
      onComplete={(data) => {
        console.log('Selection complete:', data);
      }}
      onBack={() => {
        console.log('Back button clicked');
      }}
    />
  );
}

Multiple Instances Example

function MultipleRouteSelections() {
  // Create independent stores for each instance
  const store1 = createRouteSelectionStore(data1);
  const store2 = createRouteSelectionStore(data2);

  return (
    <div>
      <RouteSelection
        store={store1}
        data={data1}
        onComplete={handleComplete1}
      />
      <RouteSelection
        store={store2}
        data={data2}
        onComplete={handleComplete2}
      />
    </div>
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | data | RouteSelectionData | No | Test data | The route and journey configuration data | | debug | boolean | No | false | Enable debug mode to show event data modals | | onComplete | (data: any) => void | No | - | Callback when selection is complete | | onBack | () => void | No | - | Callback when back button is clicked | | store | RouteSelectionStore | No | Default store | Zustand store instance for state management |

State Management

The component uses Zustand for state management with the following features:

1. Independent State Per Instance: Each component instance can have its own store using the createRouteSelectionStore factory function.

2. Store Injection: Pass a store instance via the store prop to maintain independent state.

3. Default Store: Falls back to an internal store if no store prop is provided.

4. Automatic Cleanup: State is automatically reset when the component unmounts.

Store Factory

import { createRouteSelectionStore } from 'route-selection-component';

const store = createRouteSelectionStore({
  routes: [...],
  journeyTypes: [...],
  defaultJourneyType: "One-Way",
  dates: {
    departureDate: "2024-12-30",
    returnDate: "2024-12-31"
  }
});

[Rest of the README remains the same...]