pdfn 0.0.1 → 0.2.0

package/templates/tailwind/invoice.tsx

@@ -0,0 +1,191 @@
+import { Document, Page, Thead, PageNumber, TotalPages } from "@pdfn/react";
+import { Tailwind } from "@pdfn/tailwind";
+
+/**
+ * Professional Invoice template using Tailwind CSS
+ *
+ * Demonstrates:
+ * - Thead with repeat for multi-page tables
+ * - PageNumber and TotalPages in footer
+ * - Configurable tax rate
+ */
+
+interface InvoiceProps {
+  number?: string;
+  date?: string;
+  dueDate?: string;
+  customer?: {
+    name: string;
+    address: string;
+    city: string;
+  };
+  items?: Array<{
+    name: string;
+    description?: string;
+    qty: number;
+    price: number;
+  }>;
+  taxRate?: number;
+  notes?: string;
+  company?: {
+    name: string;
+    address: string;
+    email: string;
+    phone: string;
+  };
+}
+
+export default function Invoice({
+  number = "INV-2025-001",
+  date = "January 15, 2025",
+  dueDate = "February 14, 2025",
+  customer = {
+    name: "Acme Corporation",
+    address: "456 Enterprise Blvd, Suite 100",
+    city: "Austin, TX 78701",
+  },
+  items = [
+    { name: "Web Development", description: "Frontend development with React", qty: 40, price: 150 },
+    { name: "API Integration", description: "REST API setup and configuration", qty: 20, price: 175 },
+    { name: "UI/UX Design", description: "User interface design", qty: 15, price: 125 },
+  ],
+  taxRate = 0.1,
+  notes = "Payment is due within 30 days. Thank you for your business!",
+  company = {
+    name: "Your Company",
+    address: "123 Business St, San Francisco, CA 94102",
+    email: "hello@yourcompany.com",
+    phone: "+1 (555) 123-4567",
+  },
+}: InvoiceProps) {
+  const subtotal = items.reduce((sum, item) => sum + item.qty * item.price, 0);
+  const tax = subtotal * taxRate;
+  const total = subtotal + tax;
+
+  const formatCurrency = (amount: number) =>
+    "$" + amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+  return (
+    <Document title={`Invoice ${number}`}>
+      <Tailwind>
+        <Page
+          size="A4"
+          margin="1in"
+          footer={
+            <div className="flex justify-between items-center text-xs text-gray-500 border-t border-gray-200 pt-3">
+              <div>
+                {company.name} • {company.email} • {company.phone}
+              </div>
+              <div>
+                Page <PageNumber /> of <TotalPages />
+              </div>
+            </div>
+          }
+        >
+          {/* Header */}
+          <div className="flex justify-between items-start mb-8">
+            <div>
+              <div className="text-2xl font-bold text-gray-900">{company.name}</div>
+              <div className="text-xs text-gray-500 mt-1">{company.address}</div>
+            </div>
+            <div className="text-right">
+              <div className="text-3xl font-bold text-gray-900 tracking-tight">INVOICE</div>
+              <div className="text-lg font-semibold text-gray-600 mt-1">{number}</div>
+            </div>
+          </div>
+
+          {/* Invoice Details & Bill To */}
+          <div className="flex justify-between mb-8">
+            <div>
+              <div className="text-xs font-semibold text-gray-500 uppercase mb-2">Bill To</div>
+              <div className="text-sm font-semibold text-gray-900">{customer.name}</div>
+              <div className="text-sm text-gray-600 mt-0.5">{customer.address}</div>
+              <div className="text-sm text-gray-600">{customer.city}</div>
+            </div>
+            <div className="text-right">
+              <table className="ml-auto text-sm">
+                <tbody>
+                  <tr>
+                    <td className="text-gray-500 pr-4 py-0.5">Invoice Date:</td>
+                    <td className="text-gray-900 py-0.5">{date}</td>
+                  </tr>
+                  <tr>
+                    <td className="text-gray-500 pr-4 py-0.5">Due Date:</td>
+                    <td className="text-gray-900 py-0.5">{dueDate}</td>
+                  </tr>
+                  <tr>
+                    <td className="text-gray-500 pr-4 py-1.5 font-semibold">Amount Due:</td>
+                    <td className="text-gray-900 py-1.5 font-bold text-lg">{formatCurrency(total)}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Items Table */}
+          <table className="w-full mb-6 border-collapse">
+            <Thead repeat>
+              <tr className="bg-gray-800 text-white">
+                <th className="text-left py-3 px-4 text-xs font-semibold uppercase">Description</th>
+                <th className="text-center py-3 px-4 text-xs font-semibold uppercase w-16">Qty</th>
+                <th className="text-right py-3 px-4 text-xs font-semibold uppercase w-24">Rate</th>
+                <th className="text-right py-3 px-4 text-xs font-semibold uppercase w-28">Amount</th>
+              </tr>
+            </Thead>
+            <tbody>
+              {items.map((item, i) => (
+                <tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
+                  <td className="py-3 px-4 border-b border-gray-100">
+                    <div className="font-medium text-gray-900 text-sm">{item.name}</div>
+                    {item.description && (
+                      <div className="text-xs text-gray-500 mt-0.5">{item.description}</div>
+                    )}
+                  </td>
+                  <td className="text-center py-3 px-4 text-gray-700 text-sm border-b border-gray-100">
+                    {item.qty}
+                  </td>
+                  <td className="text-right py-3 px-4 text-gray-700 text-sm border-b border-gray-100">
+                    {formatCurrency(item.price)}
+                  </td>
+                  <td className="text-right py-3 px-4 font-medium text-gray-900 text-sm border-b border-gray-100">
+                    {formatCurrency(item.qty * item.price)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          {/* Totals */}
+          <div className="flex justify-end mb-8">
+            <table className="w-64 text-sm">
+              <tbody>
+                <tr>
+                  <td className="py-2 text-gray-600">Subtotal</td>
+                  <td className="py-2 text-right text-gray-900">{formatCurrency(subtotal)}</td>
+                </tr>
+                <tr>
+                  <td className="py-2 text-gray-600">Tax ({(taxRate * 100).toFixed(0)}%)</td>
+                  <td className="py-2 text-right text-gray-900">{formatCurrency(tax)}</td>
+                </tr>
+                <tr className="border-t-2 border-gray-800">
+                  <td className="pt-3 pb-2 font-bold text-gray-900 text-base">Total Due</td>
+                  <td className="pt-3 pb-2 text-right font-bold text-gray-900 text-lg">
+                    {formatCurrency(total)}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          {/* Notes */}
+          {notes && (
+            <div className="bg-gray-50 p-4 rounded-lg">
+              <div className="text-xs font-semibold text-gray-700 uppercase mb-1">Notes</div>
+              <div className="text-sm text-gray-600">{notes}</div>
+            </div>
+          )}
+        </Page>
+      </Tailwind>
+    </Document>
+  );
+}

package/templates/tailwind/letter.tsx

@@ -0,0 +1,132 @@
+import { Document, Page } from "@pdfn/react";
+import { Tailwind } from "@pdfn/tailwind";
+
+/**
+ * Business Letter template - US Letter size
+ *
+ * Demonstrates:
+ * - Professional letterhead
+ * - Proper business letter format
+ * - Single page layout
+ */
+
+interface LetterProps {
+  sender?: {
+    name: string;
+    title?: string;
+    company: string;
+    address: string;
+    city: string;
+    email: string;
+    phone: string;
+  };
+  recipient?: {
+    name: string;
+    title?: string;
+    company: string;
+    address: string;
+    city: string;
+  };
+  date?: string;
+  subject?: string;
+  body?: string[];
+  closing?: string;
+  signature?: string;
+}
+
+export default function Letter({
+  sender = {
+    name: "Alex Chen",
+    title: "Head of Partnerships",
+    company: "Your Company",
+    address: "123 Business St, Suite 100",
+    city: "San Francisco, CA 94102",
+    email: "alex@yourcompany.com",
+    phone: "+1 (555) 123-4567",
+  },
+  recipient = {
+    name: "Sarah Johnson",
+    title: "Chief Technology Officer",
+    company: "Acme Corporation",
+    address: "456 Enterprise Blvd, Suite 100",
+    city: "Austin, TX 78701",
+  },
+  date = "January 15, 2025",
+  subject = "Partnership Proposal",
+  body = [
+    "I hope this letter finds you well. Following our conversation last month, I wanted to formally present our partnership proposal for your consideration.",
+    "Our solution has helped over 500 companies streamline their workflows, reducing development time by an average of 60%. We believe our platform would be an excellent fit for your needs.",
+    "I would welcome the opportunity to schedule a technical demo with your team. Please let me know if you would be available for a call next week.",
+  ],
+  closing = "Best regards",
+  signature = "Alex Chen",
+}: LetterProps) {
+  return (
+    <Document title={`Letter - ${subject}`}>
+      <Tailwind>
+        <Page size="Letter" margin="1in">
+          {/* Letterhead */}
+          <div className="mb-6 pb-3 border-b-2 border-gray-800">
+            <div className="flex justify-between items-start">
+              <div>
+                <div className="text-xl font-bold text-gray-900">{sender.company}</div>
+                <div className="text-xs text-gray-500 mt-1">
+                  {sender.address} • {sender.city}
+                </div>
+              </div>
+              <div className="text-right text-xs text-gray-500">
+                <div>{sender.email}</div>
+                <div>{sender.phone}</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Date */}
+          <div className="text-sm text-gray-700 mb-6">{date}</div>
+
+          {/* Recipient Info */}
+          <div className="mb-6">
+            <div className="text-sm font-semibold text-gray-900">{recipient.name}</div>
+            {recipient.title && (
+              <div className="text-sm text-gray-600">{recipient.title}</div>
+            )}
+            <div className="text-sm text-gray-600">{recipient.company}</div>
+            <div className="text-sm text-gray-500">
+              {recipient.address}, {recipient.city}
+            </div>
+          </div>
+
+          {/* Subject Line */}
+          <div className="mb-4 py-1.5 border-l-4 border-gray-800 pl-3 bg-gray-50">
+            <span className="text-sm font-bold text-gray-900 uppercase tracking-wide">Re: </span>
+            <span className="text-sm font-medium text-gray-800">{subject}</span>
+          </div>
+
+          {/* Salutation */}
+          <div className="text-sm text-gray-900 mb-3">Dear {recipient.name},</div>
+
+          {/* Body */}
+          <div className="space-y-3 mb-6">
+            {body.map((paragraph, i) => (
+              <p key={i} className="text-sm text-gray-700 leading-relaxed">
+                {paragraph}
+              </p>
+            ))}
+          </div>
+
+          {/* Closing & Signature */}
+          <div className="mt-6">
+            <div className="text-sm text-gray-900 mb-6">{closing},</div>
+            <div className="border-b border-gray-300 w-40 mb-1"></div>
+            <div className="text-sm font-bold text-gray-900">{signature}</div>
+            {sender.title && (
+              <div className="text-xs text-gray-600">
+                {sender.title}, {sender.company}
+              </div>
+            )}
+          </div>
+        </Page>
+      </Tailwind>
+    </Document>
+  );
+}

package/templates/tailwind/poster.tsx

@@ -0,0 +1,124 @@
+import { Document, Page } from "@pdfn/react";
+import { Tailwind } from "@pdfn/tailwind";
+
+/**
+ * Event Poster template - Tabloid size, Landscape orientation
+ *
+ * Demonstrates:
+ * - Large format (Tabloid: 17" x 11")
+ * - Landscape orientation
+ * - Full-bleed design (margin: 0)
+ * - Bold typography and visual hierarchy
+ */
+
+interface PosterProps {
+  headline?: string;
+  year?: string;
+  subheadline?: string;
+  date?: string;
+  venue?: string;
+  highlights?: string[];
+  cta?: string;
+  website?: string;
+}
+
+export default function Poster({
+  headline = "Tech Conference",
+  year = "2025",
+  subheadline = "Innovation Meets Inspiration",
+  date = "March 15-17, 2025",
+  venue = "Convention Center, San Francisco",
+  highlights = ["50+ Speakers", "Workshops", "Networking"],
+  cta = "Get Tickets",
+  website = "techconf2025.com",
+}: PosterProps) {
+  // Tabloid landscape dimensions
+  const pageHeight = "792pt"; // 11 inches
+
+  return (
+    <Document title={`Poster - ${headline}`}>
+      <Tailwind>
+        <Page size="Tabloid" orientation="landscape" margin="0">
+          {/* Full bleed dark background */}
+          <div
+            className="bg-gray-900 text-white p-12 flex flex-col"
+            style={{ minHeight: pageHeight, height: pageHeight }}
+          >
+            {/* Top Section: Logo and Accent */}
+            <div className="flex justify-between items-start mb-4">
+              <div className="text-2xl font-black text-white">PDFN</div>
+              <div className="flex gap-2">
+                <div className="h-1.5 w-32 bg-cyan-500 rounded-full"></div>
+                <div className="h-1.5 w-16 bg-cyan-500/50 rounded-full"></div>
+                <div className="h-1.5 w-8 bg-cyan-500/25 rounded-full"></div>
+              </div>
+            </div>
+
+            {/* Main Content - Vertically Centered */}
+            <div className="flex-1 flex flex-col justify-center">
+              {/* Headline */}
+              <h1 className="text-8xl font-black tracking-tight leading-none mb-6">
+                {headline}
+                {year && <span className="text-cyan-400"> {year}</span>}
+              </h1>
+
+              {subheadline && (
+                <p className="text-3xl text-gray-400 font-light max-w-3xl mb-12">
+                  {subheadline}
+                </p>
+              )}
+
+              {/* Event Details */}
+              <div className="flex gap-20">
+                <div>
+                  <div className="text-sm text-cyan-500 uppercase tracking-widest font-bold mb-2">
+                    Date
+                  </div>
+                  <div className="text-4xl font-bold">{date}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-cyan-500 uppercase tracking-widest font-bold mb-2">
+                    Venue
+                  </div>
+                  <div className="text-4xl font-bold">{venue}</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Bottom Section */}
+            <div className="flex items-end justify-between">
+              {/* Highlights/Tags */}
+              <div className="flex gap-4">
+                {highlights.map((highlight, i) => (
+                  <div
+                    key={i}
+                    className="border-2 border-gray-600 text-white px-6 py-3 rounded-full text-base font-semibold"
+                  >
+                    {highlight}
+                  </div>
+                ))}
+              </div>
+
+              {/* CTA */}
+              <div className="text-right">
+                <div className="inline-block bg-cyan-500 text-gray-900 text-2xl font-black px-10 py-5 rounded-xl">
+                  {cta}
+                </div>
+                <div className="text-base text-gray-500 mt-4 font-mono tracking-wide">
+                  {website}
+                </div>
+              </div>
+            </div>
+
+            {/* Bottom Accent */}
+            <div className="flex justify-end gap-2 mt-8">
+              <div className="h-1.5 w-8 bg-cyan-500/25 rounded-full"></div>
+              <div className="h-1.5 w-16 bg-cyan-500/50 rounded-full"></div>
+              <div className="h-1.5 w-32 bg-cyan-500 rounded-full"></div>
+            </div>
+          </div>
+        </Page>
+      </Tailwind>
+    </Document>
+  );
+}

package/templates/tailwind/ticket.tsx

@@ -0,0 +1,140 @@
+import { Document, Page } from "@pdfn/react";
+import { Tailwind } from "@pdfn/tailwind";
+
+/**
+ * Event Ticket template - A5 size (smaller format)
+ *
+ * Demonstrates:
+ * - Compact page size (A5: 148mm x 210mm)
+ * - Creative visual design with banner
+ * - QR code placeholder
+ */
+
+interface TicketProps {
+  event?: string;
+  year?: string;
+  tagline?: string;
+  date?: string;
+  time?: string;
+  venue?: string;
+  venueAddress?: string;
+  attendee?: string;
+  ticketType?: string;
+  ticketNumber?: string;
+  price?: string;
+}
+
+export default function Ticket({
+  event = "Tech Conference",
+  year = "2025",
+  tagline = "Innovation Meets Inspiration",
+  date = "March 15, 2025",
+  time = "9:00 AM - 6:00 PM",
+  venue = "Convention Center",
+  venueAddress = "123 Main St, San Francisco, CA",
+  attendee = "John Smith",
+  ticketType = "VIP Access",
+  ticketNumber = "TC25-VIP-001234",
+  price = "$599.00",
+}: TicketProps) {
+  return (
+    <Document title={`Ticket - ${event}`}>
+      <Tailwind>
+        <Page size="A5" margin="0">
+          {/* Header Banner */}
+          <div className="bg-gray-900 px-6 py-7 text-center">
+            <div className="text-3xl font-black text-white tracking-wide">
+              {event}
+              {year && <span className="text-cyan-400"> {year}</span>}
+            </div>
+            {tagline && (
+              <div className="text-sm text-cyan-400 mt-2 font-medium uppercase tracking-widest">
+                {tagline}
+              </div>
+            )}
+          </div>
+
+          {/* Ticket Content */}
+          <div className="px-6 py-5">
+            {/* Ticket Type Badge */}
+            <div className="flex justify-center -mt-10 mb-5">
+              <div className="bg-cyan-500 text-gray-900 text-xs font-bold uppercase px-5 py-2 rounded-full tracking-widest">
+                {ticketType}
+              </div>
+            </div>
+
+            {/* Event Details Grid */}
+            <div className="grid grid-cols-2 gap-4 mb-5">
+              <div className="bg-gray-50 rounded-lg p-3.5 text-center">
+                <div className="text-xs text-gray-500 uppercase tracking-wider font-medium">
+                  Date
+                </div>
+                <div className="text-base font-bold text-gray-900 mt-1">{date}</div>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-3.5 text-center">
+                <div className="text-xs text-gray-500 uppercase tracking-wider font-medium">
+                  Time
+                </div>
+                <div className="text-base font-bold text-gray-900 mt-1">{time}</div>
+              </div>
+            </div>
+
+            {/* Venue */}
+            <div className="bg-gray-50 rounded-lg p-3.5 text-center mb-5">
+              <div className="text-xs text-gray-500 uppercase tracking-wider font-medium">
+                Venue
+              </div>
+              <div className="text-base font-bold text-gray-900 mt-1">{venue}</div>
+              <div className="text-xs text-gray-500 mt-1">{venueAddress}</div>
+            </div>
+
+            {/* Tear Line */}
+            <div className="flex items-center gap-2 my-5">
+              <div className="flex-1 border-t-2 border-dashed border-gray-300"></div>
+              <div className="text-sm text-gray-400">✂</div>
+              <div className="flex-1 border-t-2 border-dashed border-gray-300"></div>
+            </div>
+
+            {/* Attendee Section */}
+            <div className="text-center mb-5">
+              <div className="text-xs text-gray-500 uppercase tracking-wider font-medium mb-1">
+                Admit One
+              </div>
+              <div className="text-4xl font-black text-gray-900">{attendee}</div>
+            </div>
+
+            {/* QR Code Area */}
+            <div className="flex justify-center mb-5">
+              <div className="w-36 h-36 bg-white border-2 border-gray-900 rounded-xl p-2 flex items-center justify-center">
+                {/* Simulated QR pattern */}
+                <div className="grid grid-cols-5 gap-1 w-full h-full">
+                  {[...Array(25)].map((_, i) => (
+                    <div
+                      key={i}
+                      className={`rounded-sm ${
+                        [0, 1, 2, 4, 5, 6, 10, 12, 14, 18, 19, 20, 22, 23, 24].includes(i)
+                          ? "bg-gray-900"
+                          : "bg-gray-100"
+                      }`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="flex justify-between items-center text-sm border-t-2 border-gray-900 pt-3">
+              <div className="font-mono text-xs text-gray-600">{ticketNumber}</div>
+              <div className="font-bold text-lg text-gray-900">{price}</div>
+            </div>
+
+            {/* Terms */}
+            <p className="text-center text-xs text-gray-400 mt-3">
+              Non-transferable • Non-refundable • Present at entry
+            </p>
+          </div>
+        </Page>
+      </Tailwind>
+    </Document>
+  );
+}

package/cli.js

@@ -1,14 +0,0 @@
-#!/usr/bin/env node
-
-console.log(`
-  ╔═══════════════════════════════════════════╗
-  ║                                           ║
-  ║   PDFN - The React framework for PDFs     ║
-  ║                                           ║
-  ║   Coming soon!                            ║
-  ║                                           ║
-  ║   https://pdfn.dev                        ║
-  ║   https://github.com/pdfnjs/pdfn          ║
-  ║                                           ║
-  ╚═══════════════════════════════════════════╝
-`);