PDF Generator MVP

A web application for generating PDFs from JSON data using templates. This MVP focuses on the JSON Input Panel component with real-time validation and auto-fix capabilities.

Project Structure

generatePDFs/
├── src/                          # Source code directory
│   ├── components/               # React components
│   │   ├── JsonInputPanel.tsx    # JSON input component with editor
│   │   └── JsonInputPanel.css    # Styles for JSON input panel
│   ├── App.tsx                   # Main application component
│   ├── App.css                   # Application-level styles
│   ├── main.tsx                  # Application entry point
│   └── index.css                 # Global CSS styles
├── index.html                    # HTML entry point
├── package.json                  # Project dependencies and scripts
├── vite.config.ts                # Vite build configuration
├── tsconfig.json                 # TypeScript configuration
├── tsconfig.node.json            # TypeScript config for Node.js files
└── README.md                     # This file

File Descriptions

Root Level Files

package.json

Purpose: Defines project metadata, dependencies, and npm scripts.

Key Sections:

• Dependencies:
  • react & react-dom: React framework for UI
  • @uiw/react-codemirror: Code editor component wrapper
  • @codemirror/lang-json: JSON syntax highlighting support
• DevDependencies: TypeScript, Vite, and type definitions
• Scripts:
  • npm run dev: Start development server
  • npm run build: Build for production
  • npm run preview: Preview production build

vite.config.ts

Purpose: Configuration file for Vite build tool.

What it does:

• Configures Vite to use React plugin
• Enables fast hot module replacement (HMR) during development
• Sets up build optimizations

tsconfig.json

Purpose: TypeScript compiler configuration for source files.

Key Settings:

• jsx: "react-jsx": Modern React JSX transform (no need to import React)
• strict: true: Enables strict type checking
• target: "ES2020": Compiles to modern JavaScript
• module: "ESNext": Uses ES modules

tsconfig.node.json

Purpose: Separate TypeScript config for Node.js files (like vite.config.ts).

Why separate: Different module resolution rules for build tools vs application code.

index.html

Purpose: HTML entry point for the application.

Key Elements:

• Root <div id="root"> where React app mounts
• Script tag that loads main.tsx as ES module
• Basic meta tags for viewport and charset

Source Files (src/)

src/main.tsx

Purpose: Application entry point - initializes React and renders the app.

What it does:

1. Imports React and ReactDOM
2. Imports the main App component
3. Imports global CSS styles
4. Creates a React root and renders App in strict mode
5. Mounts the app to the #root element in index.html

StrictMode: Helps identify potential problems during development.

src/App.tsx

Purpose: Main application component - root of the React component tree.

Responsibilities:

• Manages global application state (JSON data)
• Provides layout structure (header, main content area)
• Renders the JsonInputPanel component
• Handles JSON data changes from child components

State Management:

• jsonData: Stores the current JSON string input
• handleJsonChange: Callback function passed to JsonInputPanel to update state

src/App.css

Purpose: Application-level styles for layout and structure.

Styles:

• .app: Full-width container with background color
• .app-header: Header styling with dark background
• .app-main: Main content area with padding and max-width

src/index.css

Purpose: Global CSS reset and base styles.

What it includes:

• CSS reset (removes default margins/padding)
• Base font family setup
• Root element styling

Component Files (src/components/)

src/components/JsonInputPanel.tsx

Purpose: Core component for JSON input with code editor, validation, and auto-fix.

Features:

1. Code Editor: Uses CodeMirror with JSON syntax highlighting
2. Real-time Validation: Validates JSON as user types
3. Auto-Fix: Automatically fixes common JSON errors
4. Format: Beautifies valid JSON with proper indentation
5. Load Sample: Pre-fills with example JSON data

Key Functions:

• validateJSON(): Parses JSON and catches errors
• autoFixJSON(): Fixes common issues:
  • Removes comments (// and /* */)
  • Fixes unquoted keys
  • Converts single quotes to double quotes
  • Removes trailing commas
  • Adds missing commas between properties
• handleAutoFix(): Attempts to fix and format JSON
• handleFormat(): Formats valid JSON with 2-space indentation
• handleLoadSample(): Loads example JSON data

Props:

• value: Current JSON string
• onChange: Callback when JSON changes

State:

• error: Stores validation error message or null

src/components/JsonInputPanel.css

Purpose: Styles for the JSON Input Panel component.

Style Classes:

• .json-input-panel: Container with white background and shadow
• .json-input-header: Header with title and action buttons
• .json-input-actions: Button container with flex layout
• .btn: Base button styles
• .btn-primary: Green format button
• .btn-secondary: Blue load sample button
• .btn-warning: Orange auto-fix button
• .json-input-editor: CodeMirror editor container
• .json-input-status: Status message area
• .status-success: Green success message
• .status-error: Red error message
• .status-info: Gray info message

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Start development server:

npm run dev

3. Open browser to the URL shown (usually http://localhost:5173)

Build for Production

npm run build

Output will be in the dist/ directory.

Technology Stack

• React 18: UI framework
• TypeScript: Type-safe JavaScript
• Vite: Fast build tool and dev server
• CodeMirror: Code editor with syntax highlighting
• CSS: Custom styling (no CSS framework)

Current Features (MVP Phase 1)

✅ JSON Input Panel with code editor ✅ Real-time JSON validation ✅ Auto-fix common JSON errors ✅ Format/beautify JSON ✅ Load sample JSON data ✅ Syntax highlighting ✅ Error messages with details

Package Distribution

The JSON Input Panel component can be built as a reusable npm package.

Build as Package

npm run build:lib

This creates a distributable package in the dist/ folder.

See PACKAGE_SETUP.md and BUILD_PACKAGE.md for detailed instructions.

Use as Package

# In another project
npm install /path/to/generatePDFs
# or
npm link json-input-panel

import { JsonInputPanel } from 'json-input-panel'
import 'json-input-panel/styles'

Next Steps (Future Features)

• Template Canvas Editor
• Field Mapping UI
• PDF Preview
• PDF Generation
• Template Management

Development Notes

• All components use TypeScript for type safety
• React hooks (useState, useMemo) for state management
• CodeMirror provides professional code editing experience
• Auto-fix uses regex patterns to fix common JSON issues
• Validation happens in real-time as user types