Add QR Code Preset Loader Script to Import Presets.

Author: jamesblackjr

schemas/qrcode-schema.sql

@@ -0,0 +1,32 @@
+-- Create schema for QR code presets system
+-- This script creates tables for QR code presets with UUIDs and relationships
+
+-- Enable UUID extension if not already enabled
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- Create qrcode_presets table
+CREATE TABLE IF NOT EXISTS qrcode_presets (
+ id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+ identifier VARCHAR(255) UNIQUE NOT NULL,
+ name VARCHAR(255) NOT NULL,
+ description TEXT,
+ src TEXT NOT NULL,
+ height INTEGER NOT NULL,
+ width INTEGER NOT NULL,
+ excavate BOOLEAN DEFAULT true,
+ logo_padding INTEGER,
+ logo_padding_style VARCHAR(50),
+ opacity DECIMAL,
+ quiet_zone INTEGER DEFAULT 0,
+ remove_qrcode_behind_logo BOOLEAN DEFAULT true,
+ enabled BOOLEAN DEFAULT true,
+ cross_origin VARCHAR(50),
+ x INTEGER,
+ y INTEGER,
+ created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+ updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create indexes for faster lookups
+CREATE INDEX IF NOT EXISTS idx_qrcode_presets_identifier ON qrcode_presets(identifier);
+CREATE INDEX IF NOT EXISTS idx_qrcode_presets_enabled ON qrcode_presets(enabled);

scripts/load-qrcode-presets.ts

@@ -0,0 +1,120 @@
+#!/usr/bin/env ts-node
+/**
+ * QR Code Presets Database Loader
+ * 
+ * This script loads the QR code presets from the static presets file
+ * into the Supabase database.
+ */
+
+import { createClient } from '@supabase/supabase-js';
+import dotenv from 'dotenv';
+import { v4 as uuidv4 } from 'uuid';
+import { qrcodePresets } from '../src/presets/qrcode.presets';
+import type { ImageSettings } from '../src/components/ui/qr-code/qr-code.types';
+
+// Initialize environment variables
+dotenv.config();
+
+// Check for required environment variables
+const supabaseUrl = process.env.VITE_SUPABASE_URL;
+const supabaseKey = process.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl) {
+ console.error('\x1b[31mError: VITE_SUPABASE_URL environment variable is required\x1b[0m');
+ console.log('Please make sure you have a .env file with the following variables:');
+ console.log(' VITE_SUPABASE_URL=your_supabase_url');
+ console.log(' VITE_SUPABASE_ANON_KEY=your_supabase_anon_key');
+ process.exit(1);
+}
+
+if (!supabaseKey) {
+ console.error('\x1b[31mError: VITE_SUPABASE_ANON_KEY environment variable is required\x1b[0m');
+ console.log('Please make sure you have a .env file with the following variables:');
+ console.log(' VITE_SUPABASE_URL=your_supabase_url');
+ console.log(' VITE_SUPABASE_ANON_KEY=your_supabase_anon_key');
+ process.exit(1);
+}
+
+console.log('\x1b[32mFound Supabase credentials, connecting to database...\x1b[0m');
+
+// Create Supabase client
+const supabase = createClient(supabaseUrl, supabaseKey);
+
+/**
+ * Insert a QR code preset if it doesn't exist
+ */
+const insertQRCodePreset = async (identifier: string, preset: ImageSettings): Promise<string | null> => {
+ try {
+ // Check if preset already exists
+ const { data: existingPreset } = await supabase
+ .from('qrcode_presets')
+ .select('id, identifier')
+ .eq('identifier', identifier)
+ .single();
+
+ if (existingPreset) {
+ console.log(`QR code preset ${identifier} already exists with ID: ${existingPreset.id}`);
+ return existingPreset.id;
+ }
+
+ // Format preset for database
+ const presetData = {
+ identifier,
+ name: identifier.charAt(0).toUpperCase() + identifier.slice(1).replace(/([A-Z])/g, ' $1').trim(),
+ description: `${identifier.charAt(0).toUpperCase() + identifier.slice(1).replace(/([A-Z])/g, ' $1').trim()} QR code preset`,
+ src: preset.src,
+ height: preset.height,
+ width: preset.width,
+ excavate: preset.excavate,
+ logo_padding: preset.logoPadding,
+ logo_padding_style: preset.logoPaddingStyle,
+ opacity: preset.opacity,
+ quiet_zone: preset.quietZone,
+ remove_qrcode_behind_logo: preset.removeQrCodeBehindLogo,
+ enabled: true,
+ cross_origin: preset.crossOrigin,
+ x: preset.x,
+ y: preset.y
+ };
+
+ // Insert QR code preset
+ const { data, error } = await supabase
+ .from('qrcode_presets')
+ .insert(presetData)
+ .select('id')
+ .single();
+
+ if (error) {
+ console.error(`Error inserting QR code preset ${identifier}:`, error);
+ return null;
+ }
+
+ console.log(`QR code preset ${identifier} inserted successfully!`);
+ return data ? data.id : null;
+ } catch (error) {
+ console.error(`Error inserting QR code preset ${identifier}:`, error);
+ return null;
+ }
+};
+
+/**
+ * Load all QR code presets into the database
+ */
+const loadQRCodePresets = async () => {
+ console.log('\x1b[36mStarting QR code presets database load...\x1b[0m');
+ 
+ try {
+ // Process all QR code presets in sequence
+ for (const [id, preset] of Object.entries(qrcodePresets)) {
+ await insertQRCodePreset(id, preset);
+ }
+ 
+ console.log('\x1b[32mQR code presets loaded successfully!\x1b[0m');
+ } catch (error) {
+ console.error('\x1b[31mError loading QR code presets:\x1b[0m', error);
+ throw error;
+ }
+};
+
+// Run the loader
+loadQRCodePresets().catch(err => console.error('Error loading QR code presets:', err));

src/components/ui/qr-code/index.ts

@@ -49,10 +49,10 @@
  * ```
  */
 
+'use client';
+
 // Export all components and types
 export * from './qr-code';
 export * from './qr-code.types';
-
-// For backwards compatibility
-import QRCodeComponent from './qr-code';
-export default QRCodeComponent;
+export * from './qr-code.hooks';
+export { default } from './qr-code';

src/components/ui/qr-code/qr-code.hooks.ts

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ImageSettings } from './qr-code.types';
+import { fetchAllQRCodePresets, fetchEnabledQRCodePresets, fetchQRCodePresetByIdentifier } from '@/services/qrcode';
+import { logger } from '@/services/logger/logger.service';
+
+/**
+ * Default QR code preset to use when database fails to load
+ */
+const defaultQRCodePreset: ImageSettings = {
+ src: '/images/programmer-icon-transparent.png',
+ height: 69,
+ width: 69,
+ excavate: true,
+ logoPadding: 13,
+ logoPaddingStyle: 'circle',
+ opacity: 1,
+ quietZone: 0,
+ removeQrCodeBehindLogo: true
+};
+
+/**
+ * Hook to load QR code presets from the database
+ * 
+ * @param onlyEnabled - Whether to only load enabled presets
+ * @returns Object containing the presets and loading state
+ */
+export const useQRCodePresets = (onlyEnabled = false) => {
+ const [presets, setPresets] = useState<Record<string, ImageSettings>>({ programmerIcon: defaultQRCodePreset });
+ const [isLoading, setIsLoading] = useState<boolean>(true);
+ const [error, setError] = useState<Error | null>(null);
+
+ useEffect(() => {
+ const loadQRCodePresets = async () => {
+ try {
+ setIsLoading(true);
+ 
+ // Fetch presets from database
+ const dbPresets = onlyEnabled 
+ ? await fetchEnabledQRCodePresets() 
+ : await fetchAllQRCodePresets();
+ 
+ // If no presets found, ensure we have at least a default one
+ if (Object.keys(dbPresets).length === 0) {
+ logger.warn('No QR code presets found in database, using default fallback');
+ setPresets({ programmerIcon: defaultQRCodePreset });
+ } else {
+ // Update state with database presets
+ setPresets(dbPresets);
+ }
+ 
+ setError(null);
+ } catch (err) {
+ logger.error('Failed to load QR code presets from database:', err);
+ setError(err instanceof Error ? err : new Error('Failed to load QR code presets'));
+ 
+ // Use minimal default preset as fallback
+ setPresets({ programmerIcon: defaultQRCodePreset });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ loadQRCodePresets();
+ }, [onlyEnabled]);
+
+ return { presets, isLoading, error };
+};
+
+/**
+ * Hook to get a specific QR code preset by identifier
+ * 
+ * @param identifier - The preset identifier to fetch
+ * @returns The preset and loading state
+ */
+export const useQRCodePreset = (identifier: string) => {
+ const [preset, setPreset] = useState<ImageSettings | null>(null);
+ const [isLoading, setIsLoading] = useState<boolean>(true);
+ const [error, setError] = useState<Error | null>(null);
+
+ useEffect(() => {
+ const loadQRCodePreset = async () => {
+ try {
+ setIsLoading(true);
+ 
+ // Fetch preset from database
+ const dbPreset = await fetchQRCodePresetByIdentifier(identifier);
+ 
+ if (!dbPreset) {
+ logger.warn(`QR code preset ${identifier} not found, using default fallback`);
+ setPreset(defaultQRCodePreset);
+ } else {
+ setPreset(dbPreset);
+ }
+ 
+ setError(null);
+ } catch (err) {
+ logger.error(`Failed to load QR code preset ${identifier}:`, err);
+ setError(err instanceof Error ? err : new Error(`Failed to load QR code preset ${identifier}`));
+ 
+ // Use default preset as fallback
+ setPreset(defaultQRCodePreset);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ loadQRCodePreset();
+ }, [identifier]);
+
+ return { preset, isLoading, error };
+};

src/components/ui/qr-code/qr-code.module.css

@@ -9,10 +9,39 @@
  margin-bottom: 1rem;
 }
 
+/* Loading state for the container */
+.loading {
+ position: relative;
+}
+
+/* Loading indicator */
+.loadingIndicator {
+ width: 40px;
+ height: 40px;
+ border: 3px solid rgba(255, 255, 255, 0.2);
+ border-top-color: rgba(255, 255, 255, 0.8);
+ border-radius: 50%;
+ animation: qrcode-loading-spinner 0.8s linear infinite;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+/* Loading animation */
+@keyframes qrcode-loading-spinner {
+ to {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+}
+
 /* Wrapper for the QR code image */
 .qr-wrapper {
  padding: 0.5rem;
  border-radius: 0.25rem;
+ position: relative;
+ min-height: 100px;
+ min-width: 100px;
 }
 
 /* Title text below QR code */