[WIP] Add custom fields for seat form

[Copilot]

Add Custom Fields For Seat Form

This PR implements customizable data collection forms for seats, seat categories, and seat sections. Users can now define custom fields that will be displayed in the UI and included in export/import operations.

Implementation Summary

Type Definitions:

• Added customFields?: Record<string, any> to ISeat, ISeatCategory, and ISection interfaces
• Created ICustomFieldDefinition interface for defining custom field schemas
• Added CustomFieldType type supporting: text, number, select, and checkbox
• Extended ISTKProps.options to include customFields configuration

UI Components:

• Created reusable CustomFields component for rendering custom field inputs
• Extended CategoryManager with custom fields editing via popover (FileEdit icon)
• Extended SectionManager with custom fields editing via popover (FileEdit icon)
• Added custom fields section to seat edit controls (displayed when single seat selected)

State Management:

• Redux reducers already handle custom fields via spread operator - no changes needed
• Custom fields are automatically preserved during updates

Export/Import:

• Modified domSeatsToJSON in transformer to include seat custom fields
• Categories and sections custom fields auto-exported via state
• Import via sync action already handles custom fields correctly

Documentation & Examples:

• Created CUSTOM_FIELDS.md with comprehensive usage guide
• Added custom-fields.stories.tsx - blank canvas example
• Added custom-fields-import.stories.tsx - pre-populated data example with pricing, accessibility, and view quality fields

Screenshots

Seat with Custom Fields:

Imported Data with Custom Fields:

Example Usage

import SeatToolkit from "@mezh-hq/react-seat-toolkit";
import { ICustomFieldDefinition } from "@mezh-hq/react-seat-toolkit/types";

const seatCustomFields: ICustomFieldDefinition[] = [
  {
    name: "price",
    label: "Ticket Price",
    type: "number",
    required: true,
    placeholder: "Enter price"
  },
  {
    name: "accessibility",
    label: "Wheelchair Accessible",
    type: "checkbox"
  },
  {
    name: "view",
    label: "View Quality",
    type: "select",
    options: ["Excellent", "Good", "Fair", "Limited"]
  }
];

<SeatToolkit
  mode="designer"
  data={data}
  options={{
    customFields: {
      seat: seatCustomFields,
      category: categoryCustomFields,
      section: sectionCustomFields
    }
  }}
/>

Testing

• ✅ Build passes without errors
• ✅ Linting passes without errors
• ✅ Custom fields render correctly in UI
• ✅ Custom fields are included in JSON export
• ✅ Custom fields are restored on import
• ✅ All field types (text, number, select, checkbox) working
• ✅ Storybook examples demonstrate functionality

Checklist:

• Update type definitions to support custom fields
  • Add customFields to ISeat interface
  • Add customFields to ISeatCategory interface
  • Add customFields to ISection interface
  • Add configuration option to ISTKProps for defining custom field schemas
• Update UI components to render custom fields
  • Create reusable CustomFields component for rendering custom fields
  • Extend CategoryManager component to support custom fields
  • Extend SectionManager component to support custom fields
  • Add custom fields to seat edit controls
• Update state management
  • Redux reducers already handle custom field updates via spread operator
  • Custom fields included in initialization
• Update export/import functionality
  • Modify stateToJSON to include custom fields for seats
  • Categories and sections custom fields auto-exported via state
  • Import already handles custom fields via sync action
• Build and test the changes
  • Verify build succeeds
  • Verify linting passes
  • Create example/test with custom fields
  • Verify export includes custom fields
  • Verify import restores custom fields
  • Create comprehensive documentation

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add Custom Fields For Seat Form</issue_title>
<issue_description>Is there possible to add custom field for seat form? Basically i need the admin to tag the ticket price to the seat after create the foolr plan.</issue_description>

<agent_instructions>Research and devise the changes needed to make the data collection forms for a seat, seat category and a seat section be customizable based on given user options extenally

These new fields must be included in the final json output when exporting and also be considered during imports</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@Akalanka47000 Well tbh that would be a pretty good addition if we can make it optional but right now I'm not sure if I have the time for it.

When I wrote this library, the idea was that the pricing was to be handled by whatever consumes a seat plan, say an event or a concert. This is because the pricing might change based on different events whereas the layout stays the same. Please check if you have the possibility to follow a similar approach and I will in the meantime see the best way to customize these forms but unfortunately I cannot promise a date for it</comment_new>

Fixes #26

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.