@squeletteapp/widget 0.1.0 → 0.3.0

package/package.json

@@ -1,39 +1,53 @@
 {
   "name": "@squeletteapp/widget",
-  "version": "0.1.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "0.3.0",
+  "description": "Embeddable Squelette widget",
+  "type": "module",
+  "main": "dist/widget.js",
+  "module": "dist/widget.es.js",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/widget.es.js",
+      "default": "./dist/widget.js"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc && npm run build:browser",
-    "build:browser": "esbuild src/index.ts --bundle --format=iife --global-name=SqueletteWidget --outfile=dist/widget.js --minify --define:process.env.NEXT_PUBLIC_DASHBOARD_URL='\"https://squelette.app\"'",
-    "dev": "tsc --watch",
-    "prepublishOnly": "npm run build",
-    "publish:widget": "npm publish --access public"
+    "dev": "vite",
+    "build": "rimraf dist && tsc --emitDeclarationOnly && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [
     "widget",
     "feedback",
     "squelette",
-    "iframe"
+    "web-component",
+    "preact"
   ],
   "author": "Squelette",
   "license": "MIT",
-  "description": "Vanilla JavaScript widget for Squelette feedback collection",
+  "dependencies": {
+    "@preact/signals": "^2.3.2",
+    "clsx": "^2.1.1",
+    "motion": "^12.23.24",
+    "object-hash": "^3.0.0",
+    "preact": "^10.27.2",
+    "tailwind-merge": "^3.3.1"
+  },
   "devDependencies": {
-    "autoprefixer": "^10.4.16",
-    "esbuild": "^0.21.5",
-    "postcss": "^8.4.35",
-    "postcss-cli": "^11.0.0",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.8.3"
+    "autoprefixer": "^10.4.20",
+    "@preact/preset-vite": "^2.10.2",
+    "happy-dom": "^13.10.1",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vitest": "^1.6.0"
   }
 }

package/dist/button-component.d.ts

@@ -1,2 +0,0 @@
-declare let SqueletteWidgetButton: typeof HTMLElement | null;
-export { SqueletteWidgetButton };

package/dist/button-component.js

@@ -1,158 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SqueletteWidgetButton = void 0;
-const svgIcon = `
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gift-icon lucide-gift"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
-`;
-// Define the class only in browser environment
-let SqueletteWidgetButton = null;
-exports.SqueletteWidgetButton = SqueletteWidgetButton;
-if (typeof window !== "undefined" && typeof HTMLElement !== "undefined") {
-    exports.SqueletteWidgetButton = SqueletteWidgetButton = class extends HTMLElement {
-        constructor() {
-            super();
-            this.isOpen = false;
-            this.attachShadow({ mode: "open" });
-        }
-        connectedCallback() {
-            this.render();
-            this.setupEventListeners();
-        }
-        disconnectedCallback() {
-            // Cleanup if needed
-        }
-        static get observedAttributes() {
-            return ["data-open"];
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (name === "data-open") {
-                this.isOpen = newValue === "true";
-                this.updateButtonText();
-            }
-        }
-        setToggleHandler(handler) {
-            this.onToggle = handler;
-        }
-        toggle() {
-            this.isOpen = !this.isOpen;
-            this.setAttribute("data-open", this.isOpen.toString());
-            this.updateButtonText();
-            this.onToggle?.(this.isOpen);
-        }
-        render() {
-            if (!this.shadowRoot)
-                return;
-            // Create style element
-            const style = document.createElement("style");
-            style.textContent = `
-        @keyframes slideInFromBottom {
-          from {
-            transform: translateY(100px);
-            opacity: 0;
-          }
-          to {
-            transform: translateY(0);
-            opacity: 1;
-          }
-        }
-
-        :host {
-          position: fixed;
-          bottom: 20px;
-          right: 20px;
-          z-index: 9998;
-          animation: slideInFromBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-        }
-
-        .widget-button {
-          border-radius: 9999px;
-          height: 36px;
-          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-          border: 1px solid #e5e7eb;
-          font-size: 14px;
-          display: flex;
-          align-items: center;
-          background-color: #1f2937;
-          color: white;
-          justify-content: center;
-          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-          padding-left: 12px;
-          padding-right: 12px;
-          gap: 4px;
-          font-weight: 500;
-          cursor: pointer;
-          font-family: system-ui, -apple-system, sans-serif;
-        }
-
-        .widget-button:hover {
-          background-color: #374151;
-          transform: scale(1.05);
-          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
-        }
-
-        .widget-button:active {
-          transform: scale(0.98);
-        }
-
-        .widget-button-icon {
-          display: inline-flex;
-          align-items: center;
-          width: 16px;
-          height: 16px;
-          flex-shrink: 0;
-        }
-
-        .widget-button-text {
-          display: inline-flex;
-          align-items: center;
-          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-          overflow: hidden;
-          white-space: nowrap;
-          max-width: 288px;
-        }
-      `;
-            // Create button element
-            const button = document.createElement("button");
-            button.className = "widget-button";
-            button.setAttribute("aria-label", "Toggle feedback widget");
-            const iconDiv = document.createElement("div");
-            iconDiv.className = "widget-button-icon";
-            iconDiv.innerHTML = svgIcon;
-            const span = document.createElement("span");
-            span.className = "widget-button-text";
-            span.textContent = "What's new ?";
-            button.appendChild(iconDiv);
-            button.appendChild(span);
-            this.shadowRoot.appendChild(style);
-            this.shadowRoot.appendChild(button);
-        }
-        setupEventListeners() {
-            const button = this.shadowRoot?.querySelector(".widget-button");
-            if (button) {
-                button.addEventListener("click", () => this.toggle());
-            }
-        }
-        updateButtonText() {
-            const span = this.shadowRoot?.querySelector(".widget-button-text");
-            const iconDiv = this.shadowRoot?.querySelector(".widget-button-icon");
-            if (span && iconDiv) {
-                if (this.isOpen) {
-                    span.textContent = "✕";
-                    iconDiv.style.display = "none";
-                }
-                else {
-                    span.textContent = "What's new ?";
-                    iconDiv.style.display = "inline-block";
-                }
-            }
-        }
-    };
-}
-// Register the custom element only in browser environment
-if (typeof window !== "undefined" &&
-    typeof customElements !== "undefined" &&
-    SqueletteWidgetButton) {
-    if (!customElements.get("squelette-widget-button")) {
-        customElements.define("squelette-widget-button", SqueletteWidgetButton);
-    }
-}

package/dist/index.d.ts

@@ -1,26 +0,0 @@
-interface WidgetOptions {
-    url: string;
-    buttonSelector: string;
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    onLoad?: () => void;
-    onOpenChange?: (isOpen: boolean) => void;
-}
-export declare function createRoadmapWidget(workspaceSlug: string, boardSlug: string, options: Omit<WidgetOptions, 'url'> & {
-    theme?: string;
-}): {
-    destroy: () => void;
-};
-export declare function createChangelogWidget(workspaceSlug: string, options: Omit<WidgetOptions, 'url'> & {
-    theme?: string;
-}): {
-    destroy: () => void;
-};
-export declare function createFeedbackWidget(workspaceSlug: string, boardSlug: string | undefined, options: Omit<WidgetOptions, 'url'> & {
-    theme?: string;
-}): {
-    destroy: () => void;
-};
-export declare function createWidget(options: WidgetOptions): {
-    destroy: () => void;
-};
-export {};

package/dist/index.js

@@ -1,230 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createRoadmapWidget = createRoadmapWidget;
-exports.createChangelogWidget = createChangelogWidget;
-exports.createFeedbackWidget = createFeedbackWidget;
-exports.createWidget = createWidget;
-// For now, the production one
-const baseUrl = 'https://squelette.app';
-function createRoadmapWidget(workspaceSlug, boardSlug, options) {
-    const params = new URLSearchParams({ board: boardSlug });
-    if (options.theme)
-        params.set('theme', options.theme);
-    const url = `${baseUrl}/widget/${workspaceSlug}/roadmap?${params.toString()}`;
-    const { theme: _, ...widgetOptions } = options;
-    return createWidget({ ...widgetOptions, url });
-}
-function createChangelogWidget(workspaceSlug, options) {
-    const params = new URLSearchParams();
-    if (options.theme)
-        params.set('theme', options.theme);
-    const url = `${baseUrl}/widget/${workspaceSlug}/changelog${params.toString() ? `?${params.toString()}` : ''}`;
-    const { theme: _, ...widgetOptions } = options;
-    return createWidget({ ...widgetOptions, url });
-}
-function createFeedbackWidget(workspaceSlug, boardSlug, options) {
-    const params = new URLSearchParams();
-    if (boardSlug)
-        params.set('board', boardSlug);
-    if (options.theme)
-        params.set('theme', options.theme);
-    const url = `${baseUrl}/widget/${workspaceSlug}/feedback${params.toString() ? `?${params.toString()}` : ''}`;
-    const { theme: _, ...widgetOptions } = options;
-    return createWidget({ ...widgetOptions, url });
-}
-function createWidget(options) {
-    const { url, buttonSelector, position = 'top', onLoad, onOpenChange, } = options;
-    // Store initial URL to reset to when closing
-    const initialUrl = url;
-    // Create iframe element (initially hidden but preloaded)
-    const iframe = document.createElement('iframe');
-    iframe.src = url;
-    iframe.loading = 'eager';
-    // Function to update iframe dimensions based on URL
-    const updateIframeDimensions = (currentUrl) => {
-        const urlPath = new URL(currentUrl).pathname;
-        const isFeedback = urlPath.endsWith('/feedback');
-        const isChangelog = urlPath.endsWith('/changelog');
-        const isRoadmap = urlPath.endsWith('/roadmap');
-        const width = '400px';
-        let height = '540px';
-        switch (true) {
-            case isFeedback:
-                height = '250px';
-                break;
-            case isChangelog:
-                height = '500px';
-                break;
-            case isRoadmap:
-                height = '400px';
-                break;
-            default:
-                height = '540px';
-                break;
-        }
-        iframe.style.width = width;
-        iframe.style.height = height;
-    };
-    // Initial dimensions
-    updateIframeDimensions(url);
-    // Get user-provided button element
-    const button = document.querySelector(buttonSelector);
-    if (!button) {
-        console.error(`Button element not found with selector: ${buttonSelector}`);
-        return { destroy: () => { } };
-    }
-    // Position calculation helper function
-    const calculatePosition = (buttonRect, iframeWidth, iframeHeight, preferredPosition) => {
-        const viewport = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
-        const margin = 12; // Gap between button and iframe
-        let left;
-        let top;
-        switch (preferredPosition) {
-            case 'right':
-                left = buttonRect.right + margin;
-                top = buttonRect.top;
-                break;
-            case 'left':
-                left = buttonRect.left - iframeWidth - margin;
-                top = buttonRect.top;
-                break;
-            case 'top':
-                left = buttonRect.left - (iframeWidth - buttonRect.width) / 2;
-                top = buttonRect.top - iframeHeight - margin;
-                break;
-            case 'bottom':
-                left = buttonRect.left - (iframeWidth - buttonRect.width) / 2;
-                top = buttonRect.bottom + margin;
-                break;
-            default:
-                left = buttonRect.left - (iframeWidth - buttonRect.width) / 2;
-                top = buttonRect.top - iframeHeight - margin;
-        }
-        // Ensure iframe stays within viewport bounds
-        left = Math.max(10, Math.min(left, viewport.width - iframeWidth - 10));
-        top = Math.max(10, Math.min(top, viewport.height - iframeHeight - 10));
-        return { left, top };
-    };
-    // Function to update iframe position based on button position
-    const updateIframePosition = () => {
-        if (!button)
-            return;
-        const buttonRect = button.getBoundingClientRect();
-        const iframeWidth = Number.parseInt(iframe.style.width || '400px', 10);
-        const iframeHeight = Number.parseInt(iframe.style.height || '540px', 10);
-        const pos = calculatePosition(buttonRect, iframeWidth, iframeHeight, position);
-        iframe.style.left = `${pos.left}px`;
-        iframe.style.top = `${pos.top}px`;
-        iframe.style.bottom = 'auto';
-        iframe.style.right = 'auto';
-    };
-    iframe.style.cssText = `
-    position: fixed;
-    width: ${iframe.style.width || '400px'};
-    height: ${iframe.style.height || '540px'};
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    border-radius: 16px;
-    z-index: 9999;
-    background: transparent;
-    opacity: 0;
-    transform: translateY(20px);
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    pointer-events: none;
-    border: none;
-    box-sizing: border-box;
-  `;
-    // Update position on scroll
-    window.addEventListener('scroll', updateIframePosition);
-    window.addEventListener('resize', updateIframePosition);
-    // Initial position update
-    updateIframePosition();
-    // Listen for navigation changes and close requests inside iframe
-    window.addEventListener('message', (event) => {
-        if (event.source === iframe.contentWindow) {
-            if (event.data?.type === 'navigation') {
-                updateIframeDimensions(event.data.url);
-                updateIframePosition(); // Update position when dimensions change
-            }
-            else if (event.data?.type === 'close-iframe' && isIframeVisible) {
-                // Close the iframe when requested
-                // Reset iframe URL to initial URL before closing
-                iframe.src = initialUrl;
-                toggleIframe();
-            }
-        }
-    });
-    // Track iframe visibility state
-    let isIframeVisible = false;
-    // Toggle iframe visibility
-    const toggleIframe = () => {
-        isIframeVisible = !isIframeVisible;
-        if (isIframeVisible) {
-            iframe.style.pointerEvents = 'auto';
-            iframe.style.opacity = '1';
-            iframe.style.transform = 'translateY(0)';
-        }
-        else {
-            iframe.style.pointerEvents = 'none';
-            iframe.style.opacity = '0';
-            iframe.style.transform = 'translateY(20px)';
-            // Reset iframe URL to initial URL when closing
-            iframe.src = initialUrl;
-        }
-        if (onOpenChange) {
-            onOpenChange(isIframeVisible);
-        }
-    };
-    // Set up button click handler
-    button.addEventListener('click', toggleIframe);
-    // Close iframe on click outside
-    const handleClickOutside = (event) => {
-        const target = event.target;
-        if (isIframeVisible &&
-            !iframe.contains(target) &&
-            !button.contains(target)) {
-            toggleIframe();
-        }
-    };
-    document.addEventListener('click', handleClickOutside);
-    // Call onLoad callback when iframe is loaded
-    iframe.addEventListener('load', () => {
-        if (onLoad) {
-            onLoad();
-        }
-    });
-    // Check if iframe with same button already exists and remove it
-    const existingIframe = document.querySelector(`iframe[data-widget-button="${buttonSelector}"]`);
-    if (existingIframe) {
-        existingIframe.remove();
-    }
-    // Mark iframe with button selector for cleanup
-    iframe.setAttribute('data-widget-button', buttonSelector);
-    // Append iframe to body
-    document.body.appendChild(iframe);
-    // Return cleanup function
-    return {
-        destroy: () => {
-            // Send onOpenChange(false) if widget is currently open
-            if (isIframeVisible && onOpenChange) {
-                onOpenChange(false);
-            }
-            // Remove event listeners
-            window.removeEventListener('scroll', updateIframePosition);
-            window.removeEventListener('resize', updateIframePosition);
-            button.removeEventListener('click', toggleIframe);
-            document.removeEventListener('click', handleClickOutside);
-            iframe.removeEventListener('load', () => {
-                if (onLoad) {
-                    onLoad();
-                }
-            });
-            // Remove iframe from DOM
-            if (iframe.parentNode) {
-                iframe.parentNode.removeChild(iframe);
-            }
-        },
-    };
-}