@umituz/web-canvas 1.0.0

package/dist/presentation/index.mjs

@@ -0,0 +1,14 @@
+import {
+  useCanvasExport,
+  useReportExport,
+  useScreenshotStudio
+} from "../chunk-SF6WND7M.mjs";
+import "../chunk-BN7JTXL7.mjs";
+import "../chunk-WMKPCJFI.mjs";
+import "../chunk-Z6IB4BQV.mjs";
+import "../chunk-MC6PNV2F.mjs";
+export {
+  useCanvasExport,
+  useReportExport,
+  useScreenshotStudio
+};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@umituz/web-canvas",
+  "version": "1.0.0",
+  "description": "Comprehensive canvas and screenshot generation library with device frames, patterns, and PDF export",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./domain": {
+      "types": "./dist/domain/index.d.ts",
+      "import": "./dist/domain/index.mjs",
+      "require": "./dist/domain/index.js"
+    },
+    "./services": {
+      "types": "./dist/application/index.d.ts",
+      "import": "./dist/application/index.mjs",
+      "require": "./dist/application/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/presentation/index.d.ts",
+      "import": "./dist/presentation/index.mjs",
+      "require": "./dist/presentation/index.js"
+    },
+    "./renderers": {
+      "types": "./dist/infrastructure/index.d.ts",
+      "import": "./dist/infrastructure/index.mjs",
+      "require": "./dist/infrastructure/index.js"
+    },
+    "./config": {
+      "types": "./dist/domain/config/index.d.ts",
+      "import": "./dist/domain/config/index.mjs",
+      "require": "./dist/domain/config/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/domain/index.ts src/application/index.ts src/presentation/index.ts src/infrastructure/index.ts src/domain/config/index.ts --format cjs,esm --dts --clean --external react",
+    "dev": "tsup src/index.ts src/domain/index.ts src/application/index.ts src/presentation/index.ts src/infrastructure/index.ts src/domain/config/index.ts --format cjs,esm --dts --watch --external react",
+    "lint": "tsc --noEmit"
+  },
+  "keywords": [
+    "canvas",
+    "screenshot",
+    "app-store",
+    "google-play",
+    "device-frame",
+    "pdf-export",
+    "html2canvas",
+    "jspdf",
+    "screenshot-generator",
+    "mobile-frame",
+    "ios-screenshot",
+    "android-screenshot",
+    "typescript",
+    "react",
+    "screenshot-studio"
+  ],
+  "author": "umituz",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.2.1",
+    "jszip": "^3.10.1",
+    "xlsx": "^0.18.5"
+  }
+}

package/src/application/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Application Layer Index
+ * Export all application services
+ */
+
+export * from './services/ScreenshotStudioService';
+export * from './services/ReportService';

package/src/application/services/ReportService.ts

@@ -0,0 +1,200 @@
+/**
+ * Report Service
+ * PDF export and report generation service
+ */
+
+import type { ReportData } from '../../domain/types/report.types';
+import type { PDFExportOptions, ExcelExportOptions } from '../../domain/types/report.types';
+
+export class ReportService {
+  private static instance: ReportService;
+
+  public static getInstance(): ReportService {
+    if (!ReportService.instance) {
+      ReportService.instance = new ReportService();
+    }
+    return ReportService.instance;
+  }
+
+  /**
+   * Export DOM element to PDF
+   */
+  async exportToPDF(
+    elementId: string,
+    options: PDFExportOptions = {}
+  ): Promise<void> {
+    const html2canvas = (await import('html2canvas')).default;
+    const jsPDF = (await import('jspdf')).default;
+
+    const element = document.getElementById(elementId);
+    if (!element) {
+      throw new Error('Report element not found');
+    }
+
+    const canvas = await html2canvas(element, {
+      scale: options.scale || 2,
+      useCORS: options.useCORS !== false,
+      backgroundColor: options.backgroundColor || '#ffffff',
+    });
+
+    const imgData = canvas.toDataURL('image/png');
+    const pdf = new jsPDF('p', 'mm', 'a4');
+    const imgWidth = 210;
+    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
+    pdf.save(options.filename || 'report.pdf');
+  }
+
+  /**
+   * Export canvas to PDF
+   */
+  async exportCanvasToPDF(
+    canvas: HTMLCanvasElement,
+    options: PDFExportOptions = {}
+  ): Promise<void> {
+    const jsPDF = (await import('jspdf')).default;
+
+    const imgData = canvas.toDataURL('image/png');
+    const pdf = new jsPDF('p', 'mm', 'a4');
+    const imgWidth = 210;
+    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
+    pdf.save(options.filename || 'canvas-export.pdf');
+  }
+
+  /**
+   * Export data to Excel
+   */
+  async exportToExcel(
+    data: ReportData,
+    options: ExcelExportOptions = {}
+  ): Promise<void> {
+    const XLSX = await import('xlsx');
+    const wb = XLSX.utils.book_new();
+
+    // Group items by type
+    const apps = data.items
+      .filter((i) => i.type === 'app')
+      .map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
+    const campaigns = data.items
+      .filter((i) => i.type === 'campaign')
+      .map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
+    const posts = data.items
+      .filter((i) => i.type === 'post')
+      .map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
+
+    if (apps.length > 0) {
+      XLSX.utils.book_append_sheet(
+        wb,
+        XLSX.utils.json_to_sheet(apps),
+        options.sheetName || 'Apps'
+      );
+    }
+    if (campaigns.length > 0) {
+      XLSX.utils.book_append_sheet(
+        wb,
+        XLSX.utils.json_to_sheet(campaigns),
+        'Campaigns'
+      );
+    }
+    if (posts.length > 0) {
+      XLSX.utils.book_append_sheet(
+        wb,
+        XLSX.utils.json_to_sheet(posts),
+        'Posts'
+      );
+    }
+
+    // Summary sheet
+    if (options.includeSummary !== false) {
+      const summary = [
+        { Metric: 'Total Reach', Value: data.summary.totalReach },
+        {
+          Metric: 'Total Engagement',
+          Value: data.summary.totalEngagement,
+        },
+        {
+          Metric: 'Average Score',
+          Value: data.summary.averageScore,
+        },
+        {
+          Metric: 'Export Date',
+          Value: new Date().toLocaleDateString(),
+        },
+      ];
+      XLSX.utils.book_append_sheet(
+        wb,
+        XLSX.utils.json_to_sheet(summary),
+        'Summary'
+      );
+    }
+
+    XLSX.writeFile(wb, options.filename || 'report.xlsx');
+  }
+
+  /**
+   * Export data to CSV
+   */
+  exportToCSV(
+    data: ReportData,
+    filename: string = 'report.csv',
+    delimiter: ',' | ';' = ','
+  ): void {
+    const headers = ['Type', 'Name', 'Metrics'];
+    const rows = data.items.map((item) => [
+      item.type,
+      item.name,
+      JSON.stringify(item.metrics),
+    ]);
+
+    const csvContent = [headers, ...rows]
+      .map((row) => row.map((cell) => `"${cell}"`).join(delimiter))
+      .join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+
+  /**
+   * Export multiple elements to PDF
+   */
+  async exportMultipleToPDF(
+    elementIds: string[],
+    options: PDFExportOptions = {}
+  ): Promise<void> {
+    const html2canvas = (await import('html2canvas')).default;
+    const jsPDF = (await import('jspdf')).default;
+
+    const pdf = new jsPDF('p', 'mm', 'a4');
+
+    for (let i = 0; i < elementIds.length; i++) {
+      const element = document.getElementById(elementIds[i]);
+      if (!element) continue;
+
+      const canvas = await html2canvas(element, {
+        scale: options.scale || 2,
+        useCORS: options.useCORS !== false,
+        backgroundColor: options.backgroundColor || '#ffffff',
+      });
+
+      const imgData = canvas.toDataURL('image/png');
+      const imgWidth = 210;
+      const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+      if (i > 0) {
+        pdf.addPage();
+      }
+
+      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
+    }
+
+    pdf.save(options.filename || 'multi-page-report.pdf');
+  }
+}

package/src/application/services/ScreenshotStudioService.ts

@@ -0,0 +1,243 @@
+/**
+ * Screenshot Studio Service
+ * High-level screenshot generation service
+ */
+
+import type {
+  ScreenshotContent,
+  ScreenshotDesign,
+  ScreenshotMetadata,
+  ScreenshotGenerationOptions,
+  ScreenshotProject,
+  DeviceType,
+  ScreenshotFormat,
+} from '../../domain/types/screenshot.types';
+import type { ScreenshotStudioConfig } from '../../domain/config/ScreenshotStudioConfig';
+import { DEFAULT_SCREENSHOT_STUDIO_CONFIG } from '../../domain/config/ScreenshotStudioConfig';
+import { ScreenshotRenderer } from '../../infrastructure/renderers/ScreenshotRenderer';
+
+export class ScreenshotStudioService {
+  private renderer: ScreenshotRenderer;
+  private config: ScreenshotStudioConfig;
+
+  constructor(config?: Partial<ScreenshotStudioConfig>) {
+    this.config = {
+      ...DEFAULT_SCREENSHOT_STUDIO_CONFIG,
+      ...config,
+    };
+    this.renderer = new ScreenshotRenderer();
+  }
+
+  /**
+   * Generate screenshot
+   */
+  public async generateScreenshot(
+    options: ScreenshotGenerationOptions
+  ): Promise<ScreenshotMetadata> {
+    const deviceConfig = this.config.device?.devices.find(
+      (d) => d === options.deviceType
+    );
+
+    if (!deviceConfig) {
+      throw new Error(`Device configuration not found for ${options.deviceType}`);
+    }
+
+    const canvas = this.renderer['canvasRenderer'].createCanvas(
+      options.customDimensions || { width: 1290, height: 2796 }
+    );
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) {
+      throw new Error('Failed to get canvas context');
+    }
+
+    this.renderer['renderPlaceholderContent'](
+      ctx,
+      { width: canvas.width, height: canvas.height },
+      options.deviceType
+    );
+
+    const blob = await this.renderer['canvasRenderer'].exportToBlob(canvas, {
+      format: (options.format || this.config.export?.defaultFormat || 'png') as ScreenshotFormat,
+      quality: options.quality || this.config.canvas?.defaultQuality || 0.9,
+    });
+
+    return {
+      id: this.generateId(),
+      deviceType: options.deviceType,
+      dimensions: { width: canvas.width, height: canvas.height },
+      format: options.format || this.config.export?.defaultFormat || 'png',
+      timestamp: new Date(),
+      fileSize: blob.blob.size,
+      url: blob.url,
+    };
+  }
+
+  /**
+   * Generate batch screenshots
+   */
+  public async generateBatchScreenshots(
+    deviceTypes: DeviceType[]
+  ): Promise<ScreenshotMetadata[]> {
+    const promises = deviceTypes.map((deviceType) =>
+      this.generateScreenshot({ deviceType })
+    );
+    return Promise.all(promises);
+  }
+
+  /**
+   * Generate designed screenshot
+   */
+  public async generateDesignedScreenshot(
+    content: ScreenshotContent,
+    design: ScreenshotDesign
+  ): Promise<ScreenshotMetadata> {
+    const canvas = await this.renderer.renderDesignedScreenshot(content, design);
+    const blob = await this.renderer['canvasRenderer'].exportToBlob(canvas, {
+      format: 'png' as ScreenshotFormat,
+    });
+
+    return {
+      id: this.generateId(),
+      deviceType: design.deviceType,
+      dimensions: { width: canvas.width, height: canvas.height },
+      format: 'png',
+      timestamp: new Date(),
+      fileSize: blob.blob.size,
+      url: blob.url,
+    };
+  }
+
+  /**
+   * Export project as ZIP
+   */
+  public async exportProjectAsZip(
+    project: ScreenshotProject
+  ): Promise<Blob> {
+    const JSZip = (await import('jszip')).default;
+    const zip = new JSZip();
+    const folder = zip.folder(project.currentLanguage);
+
+    if (!folder) {
+      throw new Error('Failed to create folder in ZIP');
+    }
+
+    // Add metadata if enabled
+    if (this.config.export?.includeMetadata) {
+      const metadataText = `APP NAME: ${project.appMetadata.appName}
+SUBTITLE: ${project.appMetadata.subtitle}
+DESCRIPTION:
+${project.appMetadata.description}
+
+KEYWORDS: ${project.appMetadata.keywords}
+WHATS NEW:
+${project.appMetadata.whatsNew}`;
+
+      folder.file('aso_metadata.txt', metadataText);
+    }
+
+    // Generate screenshots
+    for (let i = 0; i < project.screens.length; i++) {
+      const screen = project.screens[i];
+      const screenshot = await this.generateDesignedScreenshot(screen, project.design);
+      const base64Data = screenshot.url.split(',')[1];
+      folder.file(
+        `screen_${i + 1}_${project.design.deviceType}.png`,
+        base64Data,
+        { base64: true }
+      );
+    }
+
+    return await zip.generateAsync({ type: 'blob' });
+  }
+
+  /**
+   * Create project
+   */
+  public createProject(name: string): ScreenshotProject {
+    return {
+      id: this.generateId(),
+      name,
+      design: this.getDefaultDesign(),
+      screens: [this.getDefaultScreen()],
+      currentLanguage: this.config.defaultLanguage || 'en-US',
+      selectedScreenId: '1',
+      appMetadata: {
+        appName: 'My App',
+        subtitle: 'App Description',
+        promotionalText: 'Promotional text',
+        keywords: 'keyword1, keyword2',
+        description: 'App description',
+        whatsNew: 'What is new in this version',
+      },
+      appIcon: null,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+  }
+
+  /**
+   * Get default design
+   */
+  private getDefaultDesign(): ScreenshotDesign {
+    return {
+      backgroundColor: '#6366f1',
+      backgroundGradientEnd: '#a855f7',
+      backgroundImage: null,
+      backgroundBlur: 0,
+      backgroundOverlayOpacity: 0,
+      backgroundPattern: 'none',
+      textColor: '#ffffff',
+      highlightColor: '#fbbf24',
+      textAlign: 'center',
+      deviceColor: '#1f2937',
+      deviceType: (this.config.device?.defaultDevice || 'iphone-15-pro') as DeviceType,
+      frameStyle: 'realistic',
+      layout: 'text-top',
+      scale: 0.85,
+      fontFamily: 'Inter',
+      titleFontSize: 60,
+      subtitleFontSize: 24,
+      titleFontWeight: '900',
+      subtitleFontWeight: '500',
+      textCase: 'uppercase',
+      lineHeight: 0.9,
+      letterSpacing: -1,
+      rotation: 0,
+      rotationX: 0,
+      rotationY: 0,
+      rotationZ: 0,
+      offsetY: 0,
+      shadowIntensity: 0.5,
+      padding: 40,
+      gap: 20,
+      isPanoramic: false,
+    };
+  }
+
+  /**
+   * Get default screen
+   */
+  private getDefaultScreen(): ScreenshotContent {
+    return {
+      id: '1',
+      title: 'MY *APP*',
+      subtitle: 'Your app description here',
+      screenshot: null,
+      translations: {
+        'en-US': { title: 'MY *APP*', subtitle: 'Your app description here' },
+      },
+      imageFit: 'cover',
+      imageZoom: 1,
+      imageAnchorX: 50,
+      imageAnchorY: 50,
+    };
+  }
+
+  /**
+   * Generate unique ID
+   */
+  private generateId(): string {
+    return Math.random().toString(36).substr(2, 9);
+  }
+}

package/src/domain/config/CanvasConfig.ts

@@ -0,0 +1,36 @@
+/**
+ * Canvas Configuration
+ * Canvas operation configuration
+ */
+
+import type { CanvasFormat, CanvasQuality } from '../types/canvas.types';
+
+/**
+ * Canvas configuration
+ */
+export interface CanvasConfig {
+  /** Default export format */
+  defaultFormat?: CanvasFormat;
+  /** Default quality (0.0 - 1.0) */
+  defaultQuality?: CanvasQuality;
+  /** Maximum dimension (width or height) */
+  maxDimension?: number;
+  /** Scale factor for high-resolution exports */
+  scale?: number;
+  /** Default background color */
+  backgroundColor?: string;
+  /** Enable CORS for cross-origin images */
+  useCORS?: boolean;
+}
+
+/**
+ * Default canvas configuration
+ */
+export const DEFAULT_CANVAS_CONFIG: CanvasConfig = {
+  defaultFormat: 'png',
+  defaultQuality: 0.9,
+  maxDimension: 4096,
+  scale: 2,
+  backgroundColor: '#ffffff',
+  useCORS: true,
+};

package/src/domain/config/DeviceConfig.ts

@@ -0,0 +1,47 @@
+/**
+ * Device Configuration
+ * Device frame configuration
+ */
+
+import type { DeviceType } from '../types/screenshot.types';
+
+/**
+ * Device configuration
+ */
+export interface DeviceConfigOption {
+  /** Available device types */
+  devices: DeviceType[];
+  /** Default device type */
+  defaultDevice?: DeviceType;
+  /** Show device frame */
+  showFrame?: boolean;
+  /** Frame color */
+  frameColor?: string;
+  /** Frame thickness in pixels */
+  frameThickness?: number;
+}
+
+/**
+ * Device dimensions presets
+ */
+export const DEVICE_DIMENSIONS: Record<DeviceType, { width: number; height: number }> = {
+  'iphone-15-pro': { width: 1290, height: 2796 },
+  'iphone-15': { width: 1179, height: 2556 },
+  'iphone-se': { width: 1080, height: 2340 },
+  'ipad-pro': { width: 2048, height: 2732 },
+  'ipad': { width: 1620, height: 2160 },
+  'android-phone': { width: 1440, height: 3120 },
+  'android-tablet': { width: 2000, height: 2200 },
+  'desktop': { width: 1920, height: 1080 },
+};
+
+/**
+ * Default device configuration
+ */
+export const DEFAULT_DEVICE_CONFIG: DeviceConfigOption = {
+  devices: Object.keys(DEVICE_DIMENSIONS) as DeviceType[],
+  defaultDevice: 'iphone-15-pro',
+  showFrame: true,
+  frameColor: '#1f2937',
+  frameThickness: 8,
+};