@qr-styled/browser 1.0.0

package/dist/lib/utils/types.d.ts

@@ -0,0 +1,119 @@
+/**
+ * QR code data types for specialized content
+ */
+export type QRDataType = 'url' | 'text' | 'vcard' | 'wifi' | 'email' | 'sms' | 'geo';
+/**
+ * vCard contact data
+ */
+export interface VCardData {
+    firstName?: string;
+    lastName?: string;
+    organization?: string;
+    title?: string;
+    phone?: string;
+    email?: string;
+    url?: string;
+    address?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+    country?: string;
+}
+/**
+ * WiFi configuration data
+ */
+export interface WiFiData {
+    ssid: string;
+    password?: string;
+    encryption?: 'WPA' | 'WEP' | 'nopass';
+    hidden?: boolean;
+}
+/**
+ * Email data
+ */
+export interface EmailData {
+    email: string;
+    subject?: string;
+    body?: string;
+}
+/**
+ * SMS data
+ */
+export interface SMSData {
+    phone: string;
+    message?: string;
+}
+/**
+ * Geolocation data
+ */
+export interface GeoData {
+    latitude: number;
+    longitude: number;
+}
+/**
+ * QR generation options interface
+ */
+export interface QROptions {
+    /** URL or text content for the QR code */
+    url?: string;
+    /** Type of QR code data */
+    type?: QRDataType;
+    /** Structured data for specialized QR types */
+    data?: VCardData | WiFiData | EmailData | SMSData | GeoData;
+    /** Canvas size in pixels */
+    size?: number;
+    /** QR code quiet zone margin (in modules, typically 4) */
+    margin?: number;
+    /** Canvas padding in pixels */
+    padding?: number;
+    /** QR code foreground color (hex format) */
+    foregroundColor?: string;
+    /** @deprecated Use foregroundColor instead */
+    color?: string;
+    /** Path, URL, or HTMLImageElement for logo */
+    logo?: string | HTMLImageElement;
+    /** Logo size in pixels */
+    logoSize?: number;
+    /** Use rounded module corners */
+    rounded?: boolean;
+    /** Module corner radius (0.0-0.5) */
+    moduleRadius?: number;
+    /** Padding around logo */
+    logoPadding?: number;
+    /** Logo background shape */
+    logoShape?: 'circle' | 'square';
+    /** Logo background color */
+    logoBackgroundColor?: string;
+    /** Corner radius for square logo background */
+    logoRadius?: number;
+    /** Use gradient colors */
+    gradient?: boolean;
+    /** Comma-separated gradient colors */
+    gradientColors?: string;
+    /** Gradient angle in degrees (0-360) */
+    gradientAngle?: number;
+    /** Background corner radius */
+    cornerRadius?: number;
+    /** Background color */
+    backgroundColor?: string;
+    /** QR error correction level */
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    /** Custom eye (finder pattern) color */
+    eyeColor?: string;
+    /** Custom eye radius (0.0-0.5) */
+    eyeRadius?: number;
+}
+/**
+ * Default configuration options for QR code generation
+ */
+export declare const DEFAULT_OPTIONS: Required<Omit<QROptions, 'url' | 'data' | 'color'>>;
+/**
+ * Valid logo shapes
+ */
+export declare const VALID_LOGO_SHAPES: readonly ["circle", "square"];
+/**
+ * Valid error correction levels
+ */
+export declare const VALID_ERROR_CORRECTION_LEVELS: readonly ["L", "M", "Q", "H"];
+export type LogoShape = (typeof VALID_LOGO_SHAPES)[number];
+export type ErrorCorrectionLevel = (typeof VALID_ERROR_CORRECTION_LEVELS)[number];

package/dist/lib/utils/types.js

@@ -0,0 +1,34 @@
+/**
+ * Default configuration options for QR code generation
+ */
+export const DEFAULT_OPTIONS = {
+    type: 'text',
+    size: 600,
+    margin: 4,
+    padding: 40,
+    foregroundColor: '#000000',
+    logo: '',
+    logoSize: 120,
+    rounded: true,
+    moduleRadius: 0.35,
+    logoPadding: 10,
+    logoShape: 'circle',
+    logoBackgroundColor: '#ffffff',
+    logoRadius: 20,
+    gradient: false,
+    gradientColors: '#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5',
+    gradientAngle: 45,
+    cornerRadius: 60,
+    backgroundColor: '#ffffff',
+    errorCorrectionLevel: 'H',
+    eyeColor: '',
+    eyeRadius: 0
+};
+/**
+ * Valid logo shapes
+ */
+export const VALID_LOGO_SHAPES = ['circle', 'square'];
+/**
+ * Valid error correction levels
+ */
+export const VALID_ERROR_CORRECTION_LEVELS = ['L', 'M', 'Q', 'H'];

package/dist/lib/utils/validators.d.ts

@@ -0,0 +1,10 @@
+import { QROptions } from './types.js';
+/**
+ * Validates QR generation options
+ * @throws {Error} If options are invalid
+ */
+export declare function validateOptions(options: QROptions): void;
+/**
+ * Normalizes and merges options with defaults
+ */
+export declare function normalizeOptions<T extends Partial<QROptions>>(options: T, defaults: Partial<QROptions>): T & Partial<QROptions>;

package/dist/lib/utils/validators.js

@@ -0,0 +1,126 @@
+import { VALID_LOGO_SHAPES, VALID_ERROR_CORRECTION_LEVELS } from './types.js';
+/**
+ * Validates QR generation options
+ * @throws {Error} If options are invalid
+ */
+export function validateOptions(options) {
+    // Validate that either url or data is provided
+    if (!options.url && !options.data) {
+        throw new Error('URL, text content, or structured data is required');
+    }
+    // Validate specialized data types
+    if (options.type &&
+        options.type !== 'url' &&
+        options.type !== 'text' &&
+        !options.data) {
+        throw new Error(`Structured data is required for type '${options.type}'`);
+    }
+    if (options.size && (options.size < 100 || options.size > 5000)) {
+        throw new Error('Size must be between 100 and 5000 pixels');
+    }
+    if (options.margin !== undefined &&
+        (options.margin < 0 || options.margin > 10)) {
+        throw new Error('Margin must be between 0 and 10 modules');
+    }
+    if (options.moduleRadius !== undefined &&
+        (options.moduleRadius < 0 || options.moduleRadius > 0.5)) {
+        throw new Error('Module radius must be between 0.0 and 0.5');
+    }
+    if (options.eyeRadius !== undefined &&
+        (options.eyeRadius < 0 || options.eyeRadius > 0.5)) {
+        throw new Error('Eye radius must be between 0.0 and 0.5');
+    }
+    if (options.gradientAngle &&
+        (options.gradientAngle < 0 || options.gradientAngle > 360)) {
+        throw new Error('Gradient angle must be between 0 and 360 degrees');
+    }
+    if (options.logoShape &&
+        !VALID_LOGO_SHAPES.includes(options.logoShape)) {
+        throw new Error(`Logo shape must be one of: ${VALID_LOGO_SHAPES.join(', ')}`);
+    }
+    if (options.logoSize && (options.logoSize < 50 || options.logoSize > 500)) {
+        throw new Error('Logo size must be between 50 and 500 pixels');
+    }
+    if (options.errorCorrectionLevel &&
+        !VALID_ERROR_CORRECTION_LEVELS.includes(options.errorCorrectionLevel)) {
+        throw new Error(`Error correction level must be one of: ${VALID_ERROR_CORRECTION_LEVELS.join(', ')}`);
+    }
+    // Support both deprecated 'color' and new 'foregroundColor'
+    const colorToValidate = options.foregroundColor || options.color;
+    if (colorToValidate && !/^#([0-9A-F]{3}){1,2}$/i.test(colorToValidate)) {
+        throw new Error('Color must be in hex format (e.g., #000000)');
+    }
+    if (options.eyeColor && !/^#([0-9A-F]{3}){1,2}$/i.test(options.eyeColor)) {
+        throw new Error('Eye color must be in hex format (e.g., #000000)');
+    }
+    if (options.backgroundColor &&
+        !/^#([0-9A-F]{3}){1,2}$/i.test(options.backgroundColor)) {
+        throw new Error('Background color must be in hex format (e.g., #ffffff)');
+    }
+    if (options.logoBackgroundColor &&
+        !/^#([0-9A-F]{3}){1,2}$/i.test(options.logoBackgroundColor)) {
+        throw new Error('Logo background color must be in hex format (e.g., #ffffff)');
+    }
+    if (options.gradientColors) {
+        const colors = options.gradientColors.split(',').map(c => c.trim());
+        colors.forEach(color => {
+            if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
+                throw new Error(`Invalid gradient color: ${color}. Must be in hex format`);
+            }
+        });
+    }
+    // Validate specialized data structures
+    if (options.data && options.type) {
+        switch (options.type) {
+            case 'vcard':
+                {
+                    const vcard = options.data;
+                    if (!vcard.firstName && !vcard.lastName) {
+                        throw new Error('vCard requires at least a first name or last name');
+                    }
+                }
+                break;
+            case 'wifi':
+                {
+                    const wifi = options.data;
+                    if (!wifi.ssid) {
+                        throw new Error('WiFi QR code requires SSID');
+                    }
+                }
+                break;
+            case 'email':
+                {
+                    const email = options.data;
+                    if (!email.email) {
+                        throw new Error('Email QR code requires email address');
+                    }
+                }
+                break;
+            case 'sms':
+                {
+                    const sms = options.data;
+                    if (!sms.phone) {
+                        throw new Error('SMS QR code requires phone number');
+                    }
+                }
+                break;
+            case 'geo':
+                {
+                    const geo = options.data;
+                    if (geo.latitude === undefined || geo.longitude === undefined) {
+                        throw new Error('Geo QR code requires latitude and longitude');
+                    }
+                }
+                break;
+        }
+    }
+}
+/**
+ * Normalizes and merges options with defaults
+ */
+export function normalizeOptions(options, defaults) {
+    return {
+        ...defaults,
+        ...options
+    };
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@qr-styled/browser",
+  "version": "1.0.0",
+  "description": "A professional browser QR code generator library with advanced styling options including gradients, rounded modules, logo support, specialized QR types (vCard, WiFi, Email, SMS, Geo), and eye customization",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "demo": "python3 -m http.server 3000",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
+  },
+  "keywords": [
+    "qr",
+    "qrcode",
+    "qr-code",
+    "generator",
+    "styled",
+    "gradient",
+    "logo",
+    "custom",
+    "canvas",
+    "browser",
+    "html5",
+    "vcard",
+    "wifi",
+    "email",
+    "sms",
+    "geo",
+    "contact-card",
+    "typescript"
+  ],
+  "author": "Luis Manuel Yerena Sosa",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Luisma92/qr-styled.git",
+    "directory": "packages/browser"
+  },
+  "bugs": {
+    "url": "https://github.com/Luisma92/qr-styled/issues"
+  },
+  "homepage": "https://github.com/Luisma92/qr-styled/tree/main/packages/browser#readme",
+  "dependencies": {
+    "qrcode": "^1.5.4"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@types/qrcode": "^1.5.5",
+    "@vitest/ui": "^4.0.18",
+    "happy-dom": "^15.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}