@product7/feedback-sdk 1.0.1

package/src/utils/helpers.js

@@ -0,0 +1,219 @@
+export function generateId(prefix = 'feedback') {
+	const timestamp = Date.now();
+	const random = Math.random().toString(36).substring(2, 9);
+	return `${prefix}_${timestamp}_${random}`;
+}
+
+export function deepMerge(target, source) {
+	const result = { ...target };
+
+	for (const key in source) {
+		if (source.hasOwnProperty(key)) {
+			if (
+				source[key] &&
+				typeof source[key] === 'object' &&
+				!Array.isArray(source[key])
+			) {
+				result[key] = deepMerge(target[key] || {}, source[key]);
+			} else {
+				result[key] = source[key];
+			}
+		}
+	}
+
+	return result;
+}
+
+export function debounce(func, wait) {
+	let timeout;
+	return function executedFunction(...args) {
+		const later = () => {
+			clearTimeout(timeout);
+			func(...args);
+		};
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+	};
+}
+
+export function throttle(func, limit) {
+	let lastFunc;
+	let lastRan;
+	return function (...args) {
+		if (!lastRan) {
+			func(...args);
+			lastRan = Date.now();
+		} else {
+			clearTimeout(lastFunc);
+			lastFunc = setTimeout(
+				() => {
+					if (Date.now() - lastRan >= limit) {
+						func(...args);
+						lastRan = Date.now();
+					}
+				},
+				limit - (Date.now() - lastRan)
+			);
+		}
+	};
+}
+
+export function isValidEmail(email) {
+	if (!email || typeof email !== 'string') return false;
+
+	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+	return emailRegex.test(email.trim());
+}
+
+export function sanitizeHTML(str) {
+	if (!str || typeof str !== 'string') return '';
+
+	const div = document.createElement('div');
+	div.textContent = str;
+	return div.innerHTML;
+}
+
+export function getCSSProperty(element, property, fallback = '') {
+	if (!element || !property) return fallback;
+
+	try {
+		const style = window.getComputedStyle(element);
+		return style.getPropertyValue(property) || fallback;
+	} catch (error) {
+		return fallback;
+	}
+}
+
+export function isInViewport(element) {
+	if (!element) return false;
+
+	const rect = element.getBoundingClientRect();
+	return (
+		rect.top >= 0 &&
+		rect.left >= 0 &&
+		rect.bottom <=
+			(window.innerHeight || document.documentElement.clientHeight) &&
+		rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+	);
+}
+
+export function scrollToElement(element, options = {}) {
+	if (!element) return;
+
+	const defaultOptions = {
+		behavior: 'smooth',
+		block: 'center',
+		inline: 'nearest',
+	};
+
+	element.scrollIntoView({ ...defaultOptions, ...options });
+}
+
+export function getBrowserInfo() {
+	const userAgent = navigator.userAgent;
+	const platform = navigator.platform;
+
+	return {
+		userAgent,
+		platform,
+		language: navigator.language || navigator.userLanguage,
+		cookieEnabled: navigator.cookieEnabled,
+		screenResolution: `${screen.width}x${screen.height}`,
+		windowSize: `${window.innerWidth}x${window.innerHeight}`,
+		timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+	};
+}
+
+export function formatFileSize(bytes) {
+	if (bytes === 0) return '0 Bytes';
+
+	const k = 1024;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+export function delay(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function safeJsonParse(str, fallback = null) {
+	try {
+		return JSON.parse(str);
+	} catch (error) {
+		return fallback;
+	}
+}
+
+export function escapeRegex(string) {
+	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function getNestedProperty(obj, path, defaultValue = undefined) {
+	if (!obj || !path) return defaultValue;
+
+	const keys = path.split('.');
+	let current = obj;
+
+	for (const key of keys) {
+		if (current === null || current === undefined || !(key in current)) {
+			return defaultValue;
+		}
+		current = current[key];
+	}
+
+	return current;
+}
+
+export function setNestedProperty(obj, path, value) {
+	if (!obj || !path) return obj;
+
+	const keys = path.split('.');
+	const lastKey = keys.pop();
+	let current = obj;
+
+	for (const key of keys) {
+		if (!(key in current) || typeof current[key] !== 'object') {
+			current[key] = {};
+		}
+		current = current[key];
+	}
+
+	current[lastKey] = value;
+	return obj;
+}
+
+export function isBrowser() {
+	return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+
+export function isMobile() {
+	if (!isBrowser()) return false;
+
+	return (
+		/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+			navigator.userAgent
+		) || window.innerWidth <= 768
+	);
+}
+
+export function getCurrentTimestamp() {
+	return new Date().toISOString();
+}
+
+export function validateConfig(config, required = []) {
+	const missing = [];
+
+	for (const key of required) {
+		if (!config[key]) {
+			missing.push(key);
+		}
+	}
+
+	if (missing.length > 0) {
+		throw new Error(`Missing required configuration: ${missing.join(', ')}`);
+	}
+
+	return true;
+}

package/src/widgets/BaseWidget.js

@@ -0,0 +1,334 @@
+export class BaseWidget {
+	constructor(options = {}) {
+		this.id = options.id;
+		this.sdk = options.sdk;
+		this.apiService = options.apiService;
+		this.type = options.type || 'base';
+
+		this.options = {
+			container: null,
+			position: this.sdk.config.position,
+			theme: this.sdk.config.theme,
+			boardId: this.sdk.config.boardId,
+			autoShow: false,
+			customStyles: {},
+			...options,
+		};
+
+		this.element = null;
+		this.modalElement = null;
+		this.mounted = false;
+		this.destroyed = false;
+
+		this.state = {
+			isOpen: false,
+			isSubmitting: false,
+			title: '',
+			content: '',
+			email: '',
+			attachments: [],
+			errors: {},
+		};
+
+		this._bindMethods();
+	}
+
+	mount(container) {
+		if (this.mounted || this.destroyed) return this;
+
+		if (typeof container === 'string') {
+			container = document.querySelector(container);
+		}
+
+		if (!container) {
+			container = document.body;
+		}
+
+		this.container = container;
+		this.element = this._render();
+		this.container.appendChild(this.element);
+
+		this.mounted = true;
+		this._attachEvents();
+		this.onMount();
+
+		if (this.options.autoShow) {
+			this.show();
+		}
+
+		this.sdk.eventBus.emit('widget:mounted', { widget: this });
+		return this;
+	}
+
+	show() {
+		if (this.element) {
+			this.element.style.display = 'block';
+		}
+		return this;
+	}
+
+	hide() {
+		if (this.element) {
+			this.element.style.display = 'none';
+		}
+		return this;
+	}
+
+	openModal() {
+		this.state.isOpen = true;
+		this._renderModal();
+	}
+
+	closeModal() {
+		this.state.isOpen = false;
+		if (this.modalElement) {
+			this.modalElement.remove();
+			this.modalElement = null;
+		}
+		this._resetForm();
+	}
+
+	async submitFeedback() {
+		if (this.state.isSubmitting) return;
+
+		try {
+			this.state.isSubmitting = true;
+			this._updateSubmitButton();
+
+			const payload = {
+				title: this.state.title || 'Feedback',
+				content: this.state.content,
+				email: this.state.email,
+				board_id: this.options.boardId,
+				attachments: this.state.attachments,
+			};
+
+			if (!this.state.content.trim()) {
+				this._showError('Please enter your feedback message.');
+				return;
+			}
+
+			const response = await this.apiService.submitFeedback(payload);
+
+			this._showSuccessMessage();
+			this.closeModal();
+
+			this.sdk.eventBus.emit('feedback:submitted', {
+				widget: this,
+				feedback: response,
+			});
+		} catch (error) {
+			this._showError('Failed to submit feedback. Please try again.');
+			this.sdk.eventBus.emit('feedback:error', { widget: this, error });
+		} finally {
+			this.state.isSubmitting = false;
+			this._updateSubmitButton();
+		}
+	}
+
+	handleConfigUpdate(newConfig) {
+		this.options.theme = newConfig.theme;
+		if (this.element) {
+			this._updateTheme();
+		}
+	}
+
+	destroy() {
+		if (this.destroyed) return;
+
+		this.onDestroy();
+		this.closeModal();
+
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+
+		this.destroyed = true;
+		this.mounted = false;
+		this.sdk.eventBus.emit('widget:destroyed', { widget: this });
+	}
+
+	onMount() {}
+	onDestroy() {}
+
+	_render() {
+		throw new Error('_render() must be implemented by concrete widget');
+	}
+
+	_attachEvents() {
+		// Override in concrete widgets
+	}
+
+	_bindMethods() {
+		this.openModal = this.openModal.bind(this);
+		this.closeModal = this.closeModal.bind(this);
+		this.submitFeedback = this.submitFeedback.bind(this);
+	}
+
+	_renderModal() {
+		if (this.modalElement) return;
+
+		this.modalElement = document.createElement('div');
+		this.modalElement.className = `feedback-modal theme-${this.options.theme}`;
+		this.modalElement.innerHTML = this._getModalHTML();
+
+		document.body.appendChild(this.modalElement);
+		this._attachModalEvents();
+
+		const firstInput = this.modalElement.querySelector('input, textarea');
+		if (firstInput) {
+			setTimeout(() => firstInput.focus(), 100);
+		}
+	}
+
+	_getModalHTML() {
+		return `
+      <div class="feedback-modal-overlay">
+        <div class="feedback-modal-content">
+          <div class="feedback-modal-header">
+            <h3>Send Feedback</h3>
+            <button class="feedback-modal-close" type="button">&times;</button>
+          </div>
+          <form class="feedback-form">
+            <div class="feedback-form-group">
+              <label for="feedback-title-${this.id}">Title</label>
+              <input 
+                type="text" 
+                id="feedback-title-${this.id}" 
+                name="title" 
+                placeholder="Brief description of your feedback"
+                value="${this.state.title}"
+              />
+            </div>
+            <div class="feedback-form-group">
+              <label for="feedback-content-${this.id}">Message *</label>
+              <textarea 
+                id="feedback-content-${this.id}" 
+                name="content" 
+                placeholder="Tell us more about your feedback..."
+                required
+              >${this.state.content}</textarea>
+            </div>
+            <div class="feedback-form-actions">
+              <button type="button" class="feedback-btn feedback-btn-cancel">Cancel</button>
+              <button type="submit" class="feedback-btn feedback-btn-submit">
+                ${this.state.isSubmitting ? 'Sending...' : 'Send Feedback'}
+              </button>
+            </div>
+            <div class="feedback-error" style="display: none;"></div>
+          </form>
+        </div>
+      </div>
+    `;
+	}
+
+	_attachModalEvents() {
+		const modal = this.modalElement;
+
+		modal
+			.querySelector('.feedback-modal-close')
+			.addEventListener('click', this.closeModal);
+		modal
+			.querySelector('.feedback-btn-cancel')
+			.addEventListener('click', this.closeModal);
+		modal
+			.querySelector('.feedback-modal-overlay')
+			.addEventListener('click', (e) => {
+				if (e.target === e.currentTarget) {
+					this.closeModal();
+				}
+			});
+
+		const form = modal.querySelector('.feedback-form');
+		form.addEventListener('submit', (e) => {
+			e.preventDefault();
+			this.submitFeedback();
+		});
+
+		modal
+			.querySelector('input[name="title"]')
+			.addEventListener('input', (e) => {
+				this.state.title = e.target.value;
+			});
+
+		modal
+			.querySelector('textarea[name="content"]')
+			.addEventListener('input', (e) => {
+				this.state.content = e.target.value;
+			});
+	}
+
+	_updateSubmitButton() {
+		if (this.modalElement) {
+			const submitBtn = this.modalElement.querySelector('.feedback-btn-submit');
+			if (submitBtn) {
+				submitBtn.textContent = this.state.isSubmitting
+					? 'Sending...'
+					: 'Send Feedback';
+				submitBtn.disabled = this.state.isSubmitting;
+			}
+		}
+	}
+
+	_showError(message) {
+		if (this.modalElement) {
+			const errorElement = this.modalElement.querySelector('.feedback-error');
+			errorElement.textContent = message;
+			errorElement.style.display = 'block';
+			setTimeout(() => {
+				if (errorElement) {
+					errorElement.style.display = 'none';
+				}
+			}, 5000);
+		}
+	}
+
+	_showSuccessMessage() {
+		const notification = document.createElement('div');
+		notification.className = 'feedback-success-notification';
+		notification.innerHTML = `
+      <div class="feedback-success-content">
+        <span>✓ Feedback submitted successfully!</span>
+        <button class="feedback-success-close">&times;</button>
+      </div>
+    `;
+
+		document.body.appendChild(notification);
+
+		setTimeout(() => {
+			if (notification.parentNode) {
+				notification.parentNode.removeChild(notification);
+			}
+		}, 3000);
+
+		notification
+			.querySelector('.feedback-success-close')
+			.addEventListener('click', () => {
+				if (notification.parentNode) {
+					notification.parentNode.removeChild(notification);
+				}
+			});
+	}
+
+	_resetForm() {
+		this.state.title = '';
+		this.state.content = '';
+		this.state.email = '';
+		this.state.errors = {};
+	}
+
+	_updateTheme() {
+		if (this.element) {
+			this.element.className = this.element.className.replace(
+				/theme-\w+/,
+				`theme-${this.options.theme}`
+			);
+		}
+		if (this.modalElement) {
+			this.modalElement.className = this.modalElement.className.replace(
+				/theme-\w+/,
+				`theme-${this.options.theme}`
+			);
+		}
+	}
+}

package/src/widgets/ButtonWidget.js

@@ -0,0 +1,62 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class ButtonWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'button' });
+	}
+
+	_render() {
+		const button = document.createElement('div');
+		button.className = `feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`;
+		button.innerHTML = `
+      <button class="feedback-trigger-btn" type="button">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+        </svg>
+        Feedback
+      </button>
+    `;
+
+		if (this.options.customStyles) {
+			Object.assign(button.style, this.options.customStyles);
+		}
+
+		return button;
+	}
+
+	_attachEvents() {
+		const button = this.element.querySelector('.feedback-trigger-btn');
+		button.addEventListener('click', this.openModal);
+
+		button.addEventListener('mouseenter', () => {
+			if (!this.state.isSubmitting) {
+				button.style.transform = 'translateY(-2px)';
+			}
+		});
+
+		button.addEventListener('mouseleave', () => {
+			button.style.transform = 'translateY(0)';
+		});
+	}
+
+	updateText(text) {
+		const button = this.element?.querySelector('.feedback-trigger-btn');
+		if (button) {
+			const textNode = button.childNodes[button.childNodes.length - 1];
+			if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+				textNode.textContent = text;
+			}
+		}
+	}
+
+	updatePosition(position) {
+		this.options.position = position;
+		if (this.element) {
+			this.element.className = this.element.className.replace(
+				/position-\w+-\w+/,
+				`position-${position}`
+			);
+		}
+	}
+}