# Pitch Deck Editor

A powerful, reusable React component library for creating and editing professional pitch decks. Built with modern web technologies including React, Tailwind CSS, and Zustand.

## Features

- 🎨 **Visual Editor**: Intuitive drag-and-drop interface for creating slides
- 📊 **Multiple Elements**: Support for text, shapes, charts, and tables
- 🎭 **Presentation Mode**: Built-in slideshow capabilities
- 🖼️ **Image Support**: Easy image insertion and manipulation
- 💾 **Export**: Export presentations to PDF
- 🎯 **Templates**: Pre-built templates for quick setup
- ⌨️ **Keyboard Shortcuts**: Efficient keyboard navigation
- 🎨 **Theming**: Customizable styling with Tailwind CSS
- 📱 **Responsive**: Works on different screen sizes

## Installation



### npm

```bash
npm install @tech-alfia/pitch-deck-editor
```

### pnpm

```bash
pnpm add @tech-alfia/pitch-deck-editor
```

### yarn

```bash
yarn add @tech-alfia/pitch-deck-editor
```

## Quick Start

```jsx
import React from 'react';
import { PitchDeckEditor } from '@tech-alfia/pitch-deck-editor';
import '@tech-alfia/pitch-deck-editor/dist/index.css';

export default function App() {
  return (
    <div className="h-screen w-screen">
      <PitchDeckEditor />
    </div>
  );
}
```

## Usage

### Basic Example

```jsx
import { PitchDeckEditor } from '@alfia/pitch-deck-editor';

function MyApp() {
  return (
    <PitchDeckEditor 
      initialSlides={[]}
      onSave={(presentation) => console.log(presentation)}
    />
  );
}
```

### With Custom Configuration

```jsx
import { PitchDeckEditor } from '@alfia/pitch-deck-editor';

function MyApp() {
  return (
    <PitchDeckEditor 
      initialDeck={{
        id: 'deck-1',
        title: 'My Presentation',
        slides: []
      }}
      onChange={(deck) => console.log(deck)}
    />
  );
}
```

### With API Persistence

```jsx
import { PitchDeckEditor } from '@alfia/pitch-deck-editor';
import { createApiClient } from './api';

function MyApp() {
  const apiClient = createApiClient();
  const deckId = 'deck-123';
  const [saveStatus, setSaveStatus] = useState('idle');

  const handleChange = (deck) => {
    setSaveStatus('saving');
    apiClient.saveDeck(deckId, deck)
      .then(() => setSaveStatus('saved'))
      .catch(() => setSaveStatus('error'));
  };

  return (
    <PitchDeckEditor 
      initialDeck={initialDeckData}
      apiClient={apiClient}
      deckId={deckId}
      onChange={handleChange}
      saveStatus={saveStatus}
      onNavigateBack={() => window.history.back()}
    />
  );
}
```

## Components

### PitchDeckEditor

The main component that provides the complete pitch deck editing experience.

**Props:**
- `initialDeck` (Object): Initial deck data
- `ai` (Object): AI configuration and client
- `onChange` (Function): Callback when presentation changes
- `onNavigateBack` (Function): Callback to navigate back
- `saveStatus` (String): Current save status ('idle' | 'saving' | 'saved' | 'error')
- `className` (String): Custom CSS class (default: 'h-screen')
- `apiClient` (Object): API client for persistence (optional)
- `deckId` (String): Deck ID for API operations (optional)

## Features in Detail

### Slide Management
- Create, duplicate, and delete slides
- Reorder slides with drag-and-drop
- Customizable slide layouts and themes

### Element Support
- **Text**: Rich text editing with formatting options
- **Shapes**: Rectangles, circles, lines, and more
- **Images**: Insert and manipulate images
- **Charts**: Embed charts and data visualizations
- **Tables**: Create and edit data tables

### Export Options
- **PDF**: Export entire presentation as PDF
- **Images**: Export individual slides as images
- **JSON**: Save presentation as JSON for later editing

### Keyboard Shortcuts
- `Ctrl+Z` / `Cmd+Z`: Undo
- `Ctrl+Y` / `Cmd+Y`: Redo
- `Delete`: Delete selected element
- `Ctrl+D` / `Cmd+D`: Duplicate slide
- `Escape`: Deselect element



## Requirements

- React >= 18.0.0
- React DOM >= 18.0.0
- Node.js >= 16

## Dependencies

- **@radix-ui/react-dropdown-menu**: Dropdown menu component
- **jspdf**: PDF generation
- **jspdf-autotable**: Table support for PDF
- **lucide-react**: Icon library
- **zustand**: State management

