Dynamic Vehicle Form

A React component for creating dynamic vehicle selection and configuration forms.

Installation

npm install dynamic-vehicle-form

Usage

// Import the component and its styles
import { DynamicForm } from 'dynamic-vehicle-form';
import 'dynamic-vehicle-form/dist/index.css';

function App() {
  const handleComplete = (data) => {
    // Data contains:
    // - items: Raw form data
    // - selectedData: Processed data with type names and values
    console.log('Form completed:', data);
  };

  const handleBack = () => {
    // Handle back navigation
    console.log('Back clicked');
  };

  // Provide custom form configuration
  const formConfig = {
    pageData: {
      PST_Question: "Select your vehicle type",
      Main_Question: "Would you like to add a vehicle",
      Summary Title: "Added Vehicles",
      Allow_Multiple: true,
      // ... rest of the configuration
    }
  };

  return (
    <DynamicForm
      onComplete={handleComplete}
      onBack={handleBack}
      initialData={formConfig} // Optional
    />
  );
}

Props

| Prop | Type | Description | | ----------- | ------------------------------------------------------- | --------------------------------------------------------------------------- | | onComplete | (data: { items: any[], selectedData: any[] }) => void | Callback when form is completed. Receives both raw and processed form data. | | onBack | () => void | Callback when back navigation is requested | | initialData | { pageData: object } | Optional form configuration. If not provided, uses default configuration |

Input Configuration

The form accepts a configuration object through the initialData prop with the following structure:

interface FormConfig {
  pageData: {
    // Main form settings
    PST_Question: string;          // Question for vehicle type selection
    Main_Question: string;         // Primary question text
    "Summary Title": string;       // Title for the summary section
    Allow_Multiple: boolean;       // Allow multiple vehicle entries
    Add_Another_Button?: string;   // Text for add another button

    // Vehicle type options
    dropdown_options: Array<{
      id: number;
      name: string;
      icon?: string;
    }>;

    // Form fields configuration
    detailed_questions: Array<{
      id: number;
      custom_field_name: string;      // Field identifier
      custom_question_text: string;    // Question text
      field_type: string;             // Type: 'text' | 'integer' | 'dropdown' | 'multi-select' | 'yesno'
      validation_pattern?: string;     // Regex pattern for validation
      validation_message?: string;     // Error message for validation
      mandatory?: number;             // 1 for required, 0 for optional
      sort_key?: number;             // Order in form
      options?: Array<{              // For dropdown/multi-select
        value: string;
        display_name: string;
      }>;
      combined_descriptor?: string;   // Unit or additional description
    }>;
  };
}

Events and Outputs

The component emits data through the following callbacks:

onComplete

Called when the form is submitted. Receives an object with:

{
  items: Array<{
    id: string;
    typeId: number;
    values: Record<string, any>;    // Raw form values
    fields: Record<string, {        // Structured field data
      id: number;
      key_param: string | null;
      value: any;
    }>;
  }>;
  selectedData: Array<{             // Processed data
    type: string;                   // Vehicle type name
    [key: string]: any;            // Form values
  }>;
}

onBack

Called when the back navigation is triggered. Use this to handle navigation in the parent application.

Styling

The component uses Tailwind CSS for styling. The required styles are included in the package's CSS file, which must be imported alongside the component:

import 'dynamic-vehicle-form/dist/index.css';

No additional Tailwind setup is required as all necessary styles are compiled and included in the distributed CSS file.