Car Paint Map Library

Interactive car paint map component for vehicle damage tracking and visualization.

Features

• 🎨 Interactive SVG Map - Click to cycle through paint statuses
• 📊 Status Tracking - Original, Local Paint, Paint, Changed
• 📝 Part Details - Add notes and photos to each part
• 🔄 Easy Integration - Simple props-based API
• 🎯 TypeScript Support - Full type safety
• 📱 Responsive Design - Works on all screen sizes

Installation

npm install car-paint-map-kfs

Usage

import React, { useState } from 'react';
import { CarPaintMap } from 'car-paint-map-lib';

function App() {
  const [carData, setCarData] = useState({});

  return (
    <CarPaintMap
      value={carData}
      onChange={setCarData}
      disabled={false}
    />
  );
}

API Reference

CarPaintMap Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Record<string, PartStatus> | {} | Current car part data | | onChange | (data: Record<string, PartStatus>) => void | undefined | Called when data changes | | disabled | boolean | false | Disable all interactions | | className | string | undefined | Additional CSS classes | | style | React.CSSProperties | undefined | Additional styles |

PartStatus Type

interface PartStatus {
  status: 'original' | 'local_paint' | 'paint' | 'changed';
  photo: PhotoData | null;
  note: string | null;
}

PhotoData Type

interface PhotoData {
  id?: string;
  url?: string;
  name?: string;
  uid?: string;
}

Status Types

• original - Original paint (gray)
• local_paint - Local paint (yellow)
• paint - Full paint (blue)
• changed - Changed part (red)

Interactions

• Left Click - Cycle through statuses: Original → Local → Paint → Changed
• Right Click - Reset to Original
• Click on Status Panel - View part details and add notes/photos

Data Format

The component maintains data in this format:

{
  "hood": {
    status: "paint",
    photo: { url: "...", id: "123", name: "hood.jpg" },
    note: "Small scratch on front"
  },
  "front_bumper": {
    status: "original",
    photo: null,
    note: null
  }
  // ... other parts
}

Getting Payload Data

Use the toPayload() method from the hook to get API-ready data:

import { useCarPaintMap } from 'car-paint-map-lib';

function MyComponent() {
  const { toPayload } = useCarPaintMap();
  
  const handleSubmit = () => {
    const payload = toPayload();
    console.log(payload);
    /*
    [
      {
        partId: "hood",
        status: "paint",
        photoUrl: "...",
        photoId: "123",
        photoName: "hood.jpg"
      }
    ]
    */
  };
}

Customization

Custom File Upload

You can pass a custom FileUpload component to the PartModal:

import { PartModal } from 'car-paint-map-lib';
import MyFileUpload from './MyFileUpload';

<PartModal
  // ... other props
  FileUploadComponent={MyFileUpload}
/>

Custom Styling

<CarPaintMap
  className="my-custom-class"
  style={{
    border: '2px solid blue',
    borderRadius: '12px'
  }}
/>

Development

# Install dependencies
npm install

# Start development
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Lint code
npm run lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Your Name

Changelog

1.0.0

• Initial release
• Interactive SVG car map
• Status tracking
• Part details modal
• TypeScript support