@rlse/widget 0.1.5 → 0.2.0

package/dist/ChangesModal.js

@@ -1,62 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
+import { renderDescription, getReleaseNotesUrl } from '@rlse/widget-core';
 import { markAllChangesAsSeen, getUnreadCount } from './storage';
-/**
- * Render a change description for display in the widget.
- * - HTML content (new format, stored after the rich-content migration): passed
- *   through directly after stripping event-handler attributes and javascript: URLs.
- *   Content is sanitised at the write path before storage.
- * - Markdown content (legacy records): converted via simpleMarkdownToHtml so
- *   older records continue to render correctly without a DB migration.
- */
-function renderDescription(content) {
-    if (!content)
-        return '';
-    if (content.trimStart().startsWith('<')) {
-        return content
-            .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, '')
-            .replace(/href\s*=\s*"javascript:[^"]*"/gi, '')
-            .replace(/href\s*=\s*'javascript:[^']*'/gi, '');
-    }
-    return simpleMarkdownToHtml(content);
-}
-function simpleMarkdownToHtml(markdown) {
-    // Helper to sanitize URLs - only allow safe protocols
-    const isSafeUrl = (url) => {
-        try {
-            const parsed = new URL(url);
-            const protocol = parsed.protocol.replace(':', '');
-            return ['http', 'https', 'mailto', 'tel'].includes(protocol);
-        }
-        catch {
-            // Relative URLs are OK
-            return (url.startsWith('/') ||
-                url.startsWith('./') ||
-                url.startsWith('../') ||
-                !url.includes(':'));
-        }
-    };
-    return markdown
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-        .replace(/__(.+?)__/g, '<strong>$1</strong>')
-        .replace(/\*(.+?)\*/g, '<em>$1</em>')
-        .replace(/_(.+?)_/g, '<em>$1</em>')
-        .replace(/`(.+?)`/g, '<code>$1</code>')
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
-        if (isSafeUrl(url)) {
-            // Escape quotes in URL to prevent injection
-            const safeUrl = url.replace(/"/g, '%22').replace(/'/g, '%27');
-            return `<a href="${safeUrl}" target="_blank" rel="noopener">${text}</a>`;
-        }
-        return text; // Return plain text for unsafe URLs
-    })
-        .split('\n\n')
-        .map((para) => `<p>${para}</p>`)
-        .join('');
-}
 function ChangeCard({ change, showStatus, showDates, }) {
     const date = new Date(change._creationTime).toLocaleDateString('en-US', {
         year: 'numeric',
@@ -110,18 +55,7 @@ export function ChangesModal({ config, changes, isLoading, isOpen, onClose, onMa
     }, [isOpen, onClose]);
     if (!isOpen)
         return null;
-    const releaseNotesUrl = (() => {
-        try {
-            const parsed = new URL(config.baseUrl);
-            const base = `${parsed.protocol}//${config.orgSlug}.${parsed.host}`;
-            return config.appSlug ? `${base}/${config.appSlug}` : base;
-        }
-        catch {
-            return config.appSlug
-                ? `${config.baseUrl}/${config.orgSlug}/${config.appSlug}`
-                : `${config.baseUrl}/${config.orgSlug}`;
-        }
-    })();
+    const releaseNotesUrl = getReleaseNotesUrl(config.baseUrl, config.orgSlug, config.appSlug);
     const unreadCount = getUnreadCount(config.orgSlug, changes);
     return (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "rlse-widget-title", onClick: (e) => {
             if (e.target === e.currentTarget) {

package/dist/RlseWidgetEmbed.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WidgetConfig } from './types';
+export interface RlseWidgetEmbedProps extends WidgetConfig {
+    /** Container style - pass CSS properties for the container */
+    containerStyle?: React.CSSProperties;
+    /** Show the header with title */
+    showHeader?: boolean;
+    /** Show the footer with "mark as read" and "view all" */
+    showFooter?: boolean;
+}
+export declare function RlseWidgetEmbed(props: RlseWidgetEmbedProps): React.ReactElement | null;

package/dist/RlseWidgetEmbed.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { renderDescription, formatChangeDate, getReleaseNotesUrl } from '@rlse/widget-core';
+import { DEFAULT_CONFIG } from './types';
+import { useWidgetData } from './useWidgetData';
+import { markAllChangesAsSeen, getUnreadCount } from './storage';
+export function RlseWidgetEmbed(props) {
+    const config = { ...DEFAULT_CONFIG, ...props };
+    const { containerStyle, showHeader = true, showFooter = true } = props;
+    const { changes, isLoading } = useWidgetData(config.orgSlug, config.appSlug, config.limit, config.baseUrl);
+    const handleMarkAsRead = useCallback(() => {
+        const changeIds = changes.map((c) => c._id);
+        markAllChangesAsSeen(config.orgSlug, changeIds);
+        // Trigger re-render
+        window.dispatchEvent(new Event('storage'));
+    }, [changes, config.orgSlug]);
+    const unreadCount = getUnreadCount(config.orgSlug, changes);
+    const releaseNotesUrl = getReleaseNotesUrl(config.baseUrl, config.orgSlug, config.appSlug);
+    const defaultContainerStyle = {
+        background: 'var(--background, white)',
+        borderRadius: 12,
+        border: '1px solid var(--border, #e2e8f0)',
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: '100%',
+        overflow: 'hidden',
+    };
+    const headerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '16px 20px',
+        borderBottom: '1px solid var(--border, #e2e8f0)',
+    };
+    const titleStyle = {
+        margin: 0,
+        fontSize: 16,
+        fontWeight: 600,
+    };
+    const contentStyle = {
+        overflowY: 'auto',
+        padding: '0 20px',
+        flex: 1,
+    };
+    const footerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '12px 20px',
+        borderTop: '1px solid var(--border, #e2e8f0)',
+        gap: 12,
+    };
+    return (_jsxs("div", { style: { ...defaultContainerStyle, ...containerStyle }, children: [showHeader && (_jsxs("div", { style: headerStyle, children: [_jsx("h2", { style: titleStyle, children: config.modalTitle }), unreadCount > 0 && (_jsx("span", { style: {
+                            fontSize: 12,
+                            fontWeight: 500,
+                            padding: '2px 8px',
+                            borderRadius: 10,
+                            background: config.primaryColor || '#3b82f6',
+                            color: 'white',
+                        }, children: unreadCount }))] })), _jsx("div", { style: contentStyle, children: isLoading ? (_jsx("div", { style: { padding: 40, textAlign: 'center' }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: 'spin 1s linear infinite' }, children: [_jsx("style", { children: `@keyframes spin{to{transform:rotate(360deg)}}` }), _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })] }) })) : changes.length === 0 ? (_jsx("div", { style: { padding: 40, textAlign: 'center', color: '#64748b' }, children: _jsx("p", { children: "No release notes yet. Check back soon!" }) })) : (changes.map((change) => (_jsxs("article", { style: { padding: '16px 0', borderBottom: '1px solid var(--border, #e2e8f0)' }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                justifyContent: 'space-between',
+                                gap: 12,
+                                marginBottom: 4,
+                            }, children: [_jsx("h3", { style: { margin: 0, fontSize: 14, fontWeight: 600 }, children: change.changeName }), config.showStatus && (_jsx("span", { style: {
+                                        fontSize: 11,
+                                        fontWeight: 500,
+                                        padding: '2px 8px',
+                                        borderRadius: 12,
+                                        background: 'rgba(59, 130, 246, 0.1)',
+                                        color: config.primaryColor || '#3b82f6',
+                                        border: `1px solid ${config.primaryColor || '#3b82f6'}`,
+                                        whiteSpace: 'nowrap',
+                                    }, children: change.currentStatus }))] }), _jsx("p", { style: {
+                                margin: '4px 0',
+                                fontSize: 13,
+                                color: '#64748b',
+                                lineHeight: 1.4,
+                            }, children: change.changeSummary }), _jsx("div", { style: { margin: '8px 0 0', fontSize: 13, lineHeight: 1.5 }, dangerouslySetInnerHTML: {
+                                __html: renderDescription(change.changeDescription),
+                            } }), config.showDates && (_jsx("div", { style: { marginTop: 8, fontSize: 11, color: '#64748b' }, children: formatChangeDate(change._creationTime) }))] }, change._id)))) }), showFooter && !isLoading && changes.length > 0 && (_jsxs("div", { style: footerStyle, children: [_jsx("button", { onClick: handleMarkAsRead, disabled: unreadCount === 0, style: {
+                            fontSize: 13,
+                            padding: '6px 12px',
+                            borderRadius: 6,
+                            border: 'none',
+                            background: config.primaryColor || '#3b82f6',
+                            color: 'white',
+                            cursor: unreadCount === 0 ? 'default' : 'pointer',
+                            fontWeight: 500,
+                            opacity: unreadCount === 0 ? 0.5 : 1,
+                        }, children: unreadCount === 0 ? 'All caught up' : 'Mark all as read' }), _jsx("a", { href: releaseNotesUrl, target: "_blank", rel: "noopener", style: {
+                            fontSize: 13,
+                            color: config.primaryColor || '#3b82f6',
+                            textDecoration: 'none',
+                            fontWeight: 500,
+                        }, children: "View all \u2192" })] }))] }));
+}

package/dist/RlseWidgetMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { WidgetConfig } from './types';
+export interface RlseWidgetMenuProps extends WidgetConfig {
+    /** Control open state externally */
+    isOpen?: boolean;
+    /** Callback when menu should close */
+    onClose?: () => void;
+    /** Container style for the dropdown */
+    dropdownStyle?: React.CSSProperties;
+    /** Max height of the dropdown */
+    maxHeight?: number;
+}
+export declare function RlseWidgetMenu(props: RlseWidgetMenuProps): React.ReactElement | null;

package/dist/RlseWidgetMenu.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { formatChangeDate, getReleaseNotesUrl } from '@rlse/widget-core';
+import { DEFAULT_CONFIG } from './types';
+import { useWidgetData } from './useWidgetData';
+import { markAllChangesAsSeen, getUnreadCount } from './storage';
+export function RlseWidgetMenu(props) {
+    const config = { ...DEFAULT_CONFIG, ...props };
+    const { isOpen: controlledIsOpen, onClose, dropdownStyle, maxHeight = 400, } = props;
+    // Internal state if not controlled externally
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isOpen = controlledIsOpen ?? internalOpen;
+    const { changes, isLoading } = useWidgetData(config.orgSlug, config.appSlug, config.limit, config.baseUrl);
+    const handleClose = useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+        else {
+            setInternalOpen(false);
+        }
+    }, [onClose]);
+    const handleMarkAsRead = useCallback(() => {
+        const changeIds = changes.map((c) => c._id);
+        markAllChangesAsSeen(config.orgSlug, changeIds);
+        window.dispatchEvent(new Event('storage'));
+        handleClose();
+    }, [changes, config.orgSlug, handleClose]);
+    const unreadCount = getUnreadCount(config.orgSlug, changes);
+    const releaseNotesUrl = getReleaseNotesUrl(config.baseUrl, config.orgSlug, config.appSlug);
+    const defaultDropdownStyle = {
+        position: 'absolute',
+        top: '100%',
+        right: 0,
+        marginTop: 8,
+        background: 'var(--background, white)',
+        borderRadius: 12,
+        border: '1px solid var(--border, #e2e8f0)',
+        boxShadow: '0 10px 40px -10px rgba(0, 0, 0, 0.2)',
+        width: 320,
+        maxHeight,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        zIndex: 1000,
+    };
+    const headerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '12px 16px',
+        borderBottom: '1px solid var(--border, #e2e8f0)',
+    };
+    const titleStyle = {
+        margin: 0,
+        fontSize: 14,
+        fontWeight: 600,
+    };
+    const contentStyle = {
+        overflowY: 'auto',
+        padding: '0 16px',
+        flex: 1,
+    };
+    const footerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '10px 16px',
+        borderTop: '1px solid var(--border, #e2e8f0)',
+    };
+    return (_jsxs("div", { style: { position: 'relative' }, children: [_jsxs("button", { onClick: () => setInternalOpen(!internalOpen), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '8px 12px',
+                    borderRadius: 8,
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: 'inherit',
+                }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275z" }), _jsx("path", { d: "M5 3v4" }), _jsx("path", { d: "M19 17v4" }), _jsx("path", { d: "M3 5h4" }), _jsx("path", { d: "M17 19h4" })] }), config.triggerLabel, unreadCount > 0 && (_jsx("span", { style: {
+                            fontSize: 11,
+                            fontWeight: 600,
+                            minWidth: 18,
+                            height: 18,
+                            padding: '0 5px',
+                            borderRadius: 9,
+                            background: config.primaryColor || '#3b82f6',
+                            color: 'white',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, children: unreadCount > 99 ? '99+' : unreadCount }))] }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { onClick: handleClose, style: {
+                            position: 'fixed',
+                            inset: 0,
+                            zIndex: 999,
+                        } }), _jsxs("div", { style: { ...defaultDropdownStyle, ...dropdownStyle }, children: [_jsxs("div", { style: headerStyle, children: [_jsx("h2", { style: titleStyle, children: config.modalTitle }), _jsx("button", { onClick: handleClose, style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            padding: 4,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            color: '#64748b',
+                                        }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) })] }), _jsx("div", { style: contentStyle, children: isLoading ? (_jsx("div", { style: { padding: 32, textAlign: 'center' }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: 'spin 1s linear infinite' }, children: [_jsx("style", { children: `@keyframes spin{to{transform:rotate(360deg)}}` }), _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })] }) })) : changes.length === 0 ? (_jsx("div", { style: {
+                                        padding: 32,
+                                        textAlign: 'center',
+                                        color: '#64748b',
+                                        fontSize: 13,
+                                    }, children: _jsx("p", { children: "No release notes yet." }) })) : (changes.map((change) => (_jsxs("article", { style: {
+                                        padding: '12px 0',
+                                        borderBottom: '1px solid var(--border, #e2e8f0)',
+                                    }, children: [_jsxs("div", { style: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                gap: 8,
+                                                marginBottom: 2,
+                                            }, children: [_jsx("h3", { style: { margin: 0, fontSize: 13, fontWeight: 600 }, children: change.changeName }), config.showStatus && (_jsx("span", { style: {
+                                                        fontSize: 10,
+                                                        fontWeight: 500,
+                                                        padding: '1px 6px',
+                                                        borderRadius: 10,
+                                                        background: 'rgba(59, 130, 246, 0.1)',
+                                                        color: config.primaryColor || '#3b82f6',
+                                                        border: `1px solid ${config.primaryColor || '#3b82f6'}`,
+                                                        whiteSpace: 'nowrap',
+                                                    }, children: change.currentStatus }))] }), _jsx("p", { style: {
+                                                margin: '2px 0',
+                                                fontSize: 12,
+                                                color: '#64748b',
+                                                lineHeight: 1.4,
+                                            }, children: change.changeSummary }), config.showDates && (_jsx("div", { style: { marginTop: 4, fontSize: 10, color: '#94a3b8' }, children: formatChangeDate(change._creationTime) }))] }, change._id)))) }), !isLoading && changes.length > 0 && (_jsxs("div", { style: footerStyle, children: [_jsx("button", { onClick: handleMarkAsRead, disabled: unreadCount === 0, style: {
+                                            fontSize: 12,
+                                            padding: '5px 10px',
+                                            borderRadius: 6,
+                                            border: 'none',
+                                            background: config.primaryColor || '#3b82f6',
+                                            color: 'white',
+                                            cursor: unreadCount === 0 ? 'default' : 'pointer',
+                                            fontWeight: 500,
+                                            opacity: unreadCount === 0 ? 0.5 : 1,
+                                        }, children: unreadCount === 0 ? 'All caught up' : 'Mark read' }), _jsx("a", { href: releaseNotesUrl, target: "_blank", rel: "noopener", style: {
+                                            fontSize: 12,
+                                            color: config.primaryColor || '#3b82f6',
+                                            textDecoration: 'none',
+                                            fontWeight: 500,
+                                        }, children: "View all \u2192" })] }))] })] }))] }));
+}

package/dist/angular/components/rlse-widget.component.d.ts

@@ -0,0 +1,53 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { WidgetDataService } from '../services/widget-data.service';
+import type { WidgetConfig, Change } from '@rlse/widget-core';
+export declare class RlseWidgetComponent implements OnInit, OnDestroy {
+    private widgetDataService;
+    orgSlug: string;
+    appSlug?: string;
+    trigger: 'auto' | 'manual' | 'both';
+    limit: number;
+    showStatus: boolean;
+    showDates: boolean;
+    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    theme: 'light' | 'dark' | 'auto';
+    primaryColor?: string;
+    triggerLabel: string;
+    modalTitle: string;
+    baseUrl: string;
+    config: Required<WidgetConfig>;
+    changes: Change[];
+    isLoading: boolean;
+    isOpen: boolean;
+    unreadCount: number;
+    releaseNotesUrl: string;
+    private destroy$;
+    constructor(widgetDataService: WidgetDataService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private loadChanges;
+    markAsRead(): void;
+    onOverlayClick(event: MouseEvent): void;
+    renderDescription(content: string): string;
+    formatDate(timestamp: number): string;
+    get triggerStyle(): string;
+    get badgeStyle(): string;
+    get overlayStyle(): string;
+    get modalStyle(): string;
+    get headerStyle(): string;
+    get titleStyle(): string;
+    get closeButtonStyle(): string;
+    get contentStyle(): string;
+    get centeredStyle(): string;
+    get emptyStyle(): string;
+    get changeCardStyle(): string;
+    get changeHeaderStyle(): string;
+    get changeTitleStyle(): string;
+    get statusBadgeStyle(): string;
+    get summaryStyle(): string;
+    get descriptionStyle(): string;
+    get dateStyle(): string;
+    get footerStyle(): string;
+    get markReadButtonStyle(): string;
+    get viewAllLinkStyle(): string;
+}