@product7/feedback-sdk 1.0.1

package/src/widgets/InlineWidget.js

@@ -0,0 +1,145 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class InlineWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'inline' });
+	}
+
+	_render() {
+		const widget = document.createElement('div');
+		widget.className = `feedback-widget feedback-widget-inline theme-${this.options.theme}`;
+		widget.innerHTML = `
+      <div class="feedback-inline-content">
+        <h3>Send us your feedback</h3>
+        <form class="feedback-inline-form">
+          <div class="feedback-form-group">
+            <input 
+              type="text" 
+              name="title" 
+              placeholder="Title (optional)"
+              value="${this.state.title}"
+            />
+          </div>
+          <div class="feedback-form-group">
+            <textarea 
+              name="content" 
+              placeholder="Your feedback..."
+              required
+            >${this.state.content}</textarea>
+          </div>
+          <div class="feedback-form-group">
+            <input 
+              type="email" 
+              name="email" 
+              placeholder="Email (optional)"
+              value="${this.state.email}"
+            />
+          </div>
+          <button type="submit" class="feedback-btn feedback-btn-submit">
+            Send Feedback
+          </button>
+          <div class="feedback-error" style="display: none;"></div>
+        </form>
+      </div>
+    `;
+
+		if (this.options.customStyles) {
+			Object.assign(widget.style, this.options.customStyles);
+		}
+
+		return widget;
+	}
+
+	_attachEvents() {
+		const form = this.element.querySelector('.feedback-inline-form');
+
+		form.addEventListener('submit', (e) => {
+			e.preventDefault();
+			this.submitFeedback();
+		});
+
+		form.querySelector('input[name="title"]').addEventListener('input', (e) => {
+			this.state.title = e.target.value;
+		});
+
+		form
+			.querySelector('textarea[name="content"]')
+			.addEventListener('input', (e) => {
+				this.state.content = e.target.value;
+			});
+
+		form.querySelector('input[name="email"]').addEventListener('input', (e) => {
+			this.state.email = e.target.value;
+		});
+	}
+
+	openModal() {
+		const textarea = this.element.querySelector('textarea[name="content"]');
+		if (textarea) {
+			textarea.focus();
+		}
+	}
+
+	closeModal() {
+		// Inline widget doesn't use modal
+	}
+
+	_showSuccessMessage() {
+		const widget = this.element.querySelector('.feedback-inline-content');
+		const originalContent = widget.innerHTML;
+
+		widget.innerHTML = `
+      <div class="feedback-success">
+        <div class="feedback-success-icon">✓</div>
+        <h3>Thank you!</h3>
+        <p>Your feedback has been submitted successfully.</p>
+        <button class="feedback-btn feedback-btn-reset">Send Another</button>
+      </div>
+    `;
+
+		const resetBtn = widget.querySelector('.feedback-btn-reset');
+		resetBtn.addEventListener('click', () => {
+			widget.innerHTML = originalContent;
+			this._attachEvents();
+			this._resetForm();
+		});
+	}
+
+	_showError(message) {
+		const errorElement = this.element.querySelector('.feedback-error');
+		if (errorElement) {
+			errorElement.textContent = message;
+			errorElement.style.display = 'block';
+
+			setTimeout(() => {
+				if (errorElement) {
+					errorElement.style.display = 'none';
+				}
+			}, 5000);
+		}
+	}
+
+	_updateSubmitButton() {
+		const submitBtn = this.element.querySelector('.feedback-btn-submit');
+		if (submitBtn) {
+			submitBtn.textContent = this.state.isSubmitting
+				? 'Sending...'
+				: 'Send Feedback';
+			submitBtn.disabled = this.state.isSubmitting;
+		}
+	}
+
+	updateTitle(title) {
+		const titleElement = this.element?.querySelector('h3');
+		if (titleElement) {
+			titleElement.textContent = title;
+		}
+	}
+
+	setPlaceholder(field, placeholder) {
+		const input = this.element?.querySelector(`[name="${field}"]`);
+		if (input) {
+			input.placeholder = placeholder;
+		}
+	}
+}

package/src/widgets/TabWidget.js

@@ -0,0 +1,65 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class TabWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'tab' });
+	}
+
+	_render() {
+		const tab = document.createElement('div');
+		tab.className = `feedback-widget feedback-widget-tab theme-${this.options.theme} position-${this.options.position}`;
+		tab.innerHTML = `
+      <div class="feedback-tab-trigger">
+        <span class="feedback-tab-text">Feedback</span>
+      </div>
+    `;
+
+		if (this.options.customStyles) {
+			Object.assign(tab.style, this.options.customStyles);
+		}
+
+		return tab;
+	}
+
+	_attachEvents() {
+		const tab = this.element.querySelector('.feedback-tab-trigger');
+		tab.addEventListener('click', this.openModal);
+
+		tab.addEventListener('mouseenter', () => {
+			if (!this.state.isSubmitting) {
+				tab.style.transform = this._getHoverTransform();
+			}
+		});
+
+		tab.addEventListener('mouseleave', () => {
+			tab.style.transform = 'none';
+		});
+	}
+
+	_getHoverTransform() {
+		const position = this.options.position;
+		if (position.includes('right')) {
+			return 'translateX(-5px)';
+		} else if (position.includes('left')) {
+			return 'translateX(5px)';
+		}
+		return 'none';
+	}
+
+	updateText(text) {
+		const textElement = this.element?.querySelector('.feedback-tab-text');
+		if (textElement) {
+			textElement.textContent = text;
+		}
+	}
+
+	updatePosition(position) {
+		this.options.position = position;
+		if (this.element) {
+			this.element.className = this.element.className.replace(
+				/position-\w+-\w+/,
+				`position-${position}`
+			);
+		}
+	}
+}

package/src/widgets/WidgetFactory.js

@@ -0,0 +1,64 @@
+import { SDKError } from '../utils/errors.js';
+import { ButtonWidget } from './ButtonWidget.js';
+import { InlineWidget } from './InlineWidget.js';
+import { TabWidget } from './TabWidget.js';
+
+export class WidgetFactory {
+	static widgets = new Map([
+		['button', ButtonWidget],
+		['tab', TabWidget],
+		['inline', InlineWidget],
+	]);
+
+	static register(type, WidgetClass) {
+		if (typeof type !== 'string' || !type.trim()) {
+			throw new SDKError('Widget type must be a non-empty string');
+		}
+
+		if (typeof WidgetClass !== 'function') {
+			throw new SDKError('Widget class must be a constructor function');
+		}
+
+		this.widgets.set(type, WidgetClass);
+	}
+
+	static create(type, options = {}) {
+		const WidgetClass = this.widgets.get(type);
+
+		if (!WidgetClass) {
+			const availableTypes = Array.from(this.widgets.keys()).join(', ');
+			throw new SDKError(
+				`Unknown widget type: ${type}. Available types: ${availableTypes}`
+			);
+		}
+
+		try {
+			return new WidgetClass(options);
+		} catch (error) {
+			throw new SDKError(
+				`Failed to create widget of type '${type}': ${error.message}`,
+				error
+			);
+		}
+	}
+
+	static getAvailableTypes() {
+		return Array.from(this.widgets.keys());
+	}
+
+	static isTypeRegistered(type) {
+		return this.widgets.has(type);
+	}
+
+	static unregister(type) {
+		return this.widgets.delete(type);
+	}
+
+	static clear() {
+		this.widgets.clear();
+	}
+
+	static getWidgetClass(type) {
+		return this.widgets.get(type);
+	}
+}