@squeletteapp/widget-react 0.1.1 → 1.1.0

package/dist/components/changelog-banner.d.ts

@@ -0,0 +1,11 @@
+export interface ChangelogBannerProps {
+    debug?: boolean;
+}
+/**
+ * ChangelogBanner - Renders a banner for the latest changelog entry
+ *
+ * This component automatically fetches the latest changelog entry,
+ * checks if it should be shown, and displays a banner at the bottom
+ * of the screen. Must be used within a ChangelogProvider.
+ */
+export declare function ChangelogBanner({ debug }: ChangelogBannerProps): null;

package/dist/components/changelog-banner.js

@@ -0,0 +1,44 @@
+'use client';
+import * as React from 'react';
+import { useChangelogContext } from '../context';
+/**
+ * ChangelogBanner - Renders a banner for the latest changelog entry
+ *
+ * This component automatically fetches the latest changelog entry,
+ * checks if it should be shown, and displays a banner at the bottom
+ * of the screen. Must be used within a ChangelogProvider.
+ */
+export function ChangelogBanner({ debug = false }) {
+    const { store, module, theme, base, slug } = useChangelogContext();
+    const widgetRef = React.useRef(null);
+    // Store initial theme in ref to use in creation
+    const initialThemeRef = React.useRef(theme);
+    // Create widget once on mount (theme changes handled separately via setTheme)
+    React.useEffect(() => {
+        let mounted = true;
+        module
+            .createChangelogBannerWidget(store, {
+            base,
+            contentTheme: initialThemeRef.current,
+            slug,
+            debug,
+        })
+            .then((widget) => {
+            if (mounted && widget) {
+                widgetRef.current = widget;
+            }
+        });
+        return () => {
+            mounted = false;
+            if (widgetRef.current) {
+                widgetRef.current.destroy();
+                widgetRef.current = null;
+            }
+        };
+    }, [slug, store, module, base, debug]);
+    // Update theme when it changes (separate effect to avoid recreating widget)
+    React.useEffect(() => {
+        widgetRef.current?.setTheme(theme);
+    }, [theme]);
+    return null;
+}

package/dist/components/changelog-entries-list-dropdown.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+type Position = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center';
+export interface ChangelogEntriesListDropdownProps {
+    children: React.ReactElement;
+    position?: Position;
+}
+/**
+ * ChangelogEntriesListDropdown - Renders a dropdown list of changelog entries
+ *
+ * This component wraps a child element (trigger) and opens the dropdown
+ * when the child is clicked. Must be used within a ChangelogProvider.
+ */
+export declare function ChangelogEntriesListDropdown({ children, position, }: ChangelogEntriesListDropdownProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/components/changelog-entries-list-dropdown.js

@@ -0,0 +1,50 @@
+'use client';
+import * as React from 'react';
+import { useChangelogContext } from '../context';
+/**
+ * ChangelogEntriesListDropdown - Renders a dropdown list of changelog entries
+ *
+ * This component wraps a child element (trigger) and opens the dropdown
+ * when the child is clicked. Must be used within a ChangelogProvider.
+ */
+export function ChangelogEntriesListDropdown({ children, position, }) {
+    const { store, module, theme, base, slug } = useChangelogContext();
+    const widgetRef = React.useRef(null);
+    const anchorId = React.useId();
+    const cleanAnchorId = `sq-dropdown-${anchorId.replace(/:/g, '')}`;
+    // Store initial theme in ref to use in creation
+    const initialThemeRef = React.useRef(theme);
+    // Create widget once on mount (theme changes handled separately via setTheme)
+    React.useEffect(() => {
+        const widget = module.createChangelogEntriesListDropdownWidget(`#${cleanAnchorId}`, store, {
+            base,
+            contentTheme: initialThemeRef.current,
+            slug,
+            position,
+        });
+        widget.preload();
+        widgetRef.current = widget;
+        return () => {
+            widget.destroy();
+            widgetRef.current = null;
+        };
+    }, [slug, store, module, base, cleanAnchorId, position]);
+    // Update theme when it changes (separate effect to avoid recreating widget)
+    React.useEffect(() => {
+        widgetRef.current?.setTheme(theme);
+    }, [theme]);
+    const handleClick = React.useCallback(() => {
+        widgetRef.current?.open();
+    }, []);
+    // Clone the child and add the anchor id and click handler
+    return React.cloneElement(children, {
+        id: cleanAnchorId,
+        onClick: (e) => {
+            const originalOnClick = children.props.onClick;
+            if (originalOnClick) {
+                originalOnClick(e);
+            }
+            handleClick();
+        },
+    });
+}

package/dist/components/changelog-entry-modal.d.ts

@@ -0,0 +1,11 @@
+export interface ChangelogEntryModalProps {
+    ticketId: string;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * ChangelogEntryModal - Renders a modal for a single changelog entry
+ *
+ * This component manages its own widget lifecycle and automatically
+ * cleans up on unmount. Must be used within a ChangelogProvider.
+ */
+export declare function ChangelogEntryModal({ ticketId, onOpenChange, }: ChangelogEntryModalProps): null;

package/dist/components/changelog-entry-modal.js

@@ -0,0 +1,34 @@
+'use client';
+import * as React from 'react';
+import { useChangelogContext } from '../context';
+/**
+ * ChangelogEntryModal - Renders a modal for a single changelog entry
+ *
+ * This component manages its own widget lifecycle and automatically
+ * cleans up on unmount. Must be used within a ChangelogProvider.
+ */
+export function ChangelogEntryModal({ ticketId, onOpenChange, }) {
+    const { store, module, theme, base, slug } = useChangelogContext();
+    const widgetRef = React.useRef(null);
+    React.useEffect(() => {
+        const widget = module.createChangelogEntryWidget(ticketId, {
+            base,
+            contentTheme: theme,
+            slug,
+        });
+        if (onOpenChange) {
+            widget.onOpenChange(onOpenChange);
+        }
+        widgetRef.current = widget;
+        store.mount(ticketId, widget);
+        return () => {
+            store.unmount(ticketId);
+            widgetRef.current = null;
+        };
+    }, [ticketId, slug, store, module, base, onOpenChange, theme]);
+    // Update theme when it changes
+    React.useEffect(() => {
+        widgetRef.current?.setTheme(theme);
+    }, [theme]);
+    return null;
+}

package/dist/context.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { ContentTheme } from './types';
+type WidgetStore = {
+    getState: () => Record<string, unknown>;
+    mount: (source: string, widget: unknown) => Promise<void>;
+    unmount: (source: string) => void;
+    open: (source: string) => Promise<void>;
+    setTheme: (theme: ContentTheme) => void;
+};
+type WidgetModule = {
+    createChangelogStore: () => WidgetStore;
+    createChangelogEntryWidget: (ticketId: string, options: {
+        base?: string;
+        contentTheme?: ContentTheme;
+        slug?: string;
+    }) => unknown;
+    createChangelogBannerWidget: (store: WidgetStore, options: {
+        base?: string;
+        contentTheme?: ContentTheme;
+        slug: string;
+        debug?: boolean;
+    }) => Promise<unknown>;
+    createChangelogEntriesListDropdownWidget: (anchor: string, store: WidgetStore, options: {
+        base?: string;
+        contentTheme?: ContentTheme;
+        slug?: string;
+        position?: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center';
+    }) => unknown;
+};
+type ChangelogContextValue = {
+    store: WidgetStore;
+    module: WidgetModule;
+    theme: ContentTheme;
+    base?: string;
+    slug: string;
+};
+export interface ChangelogProviderProps {
+    children: React.ReactNode;
+    slug: string;
+    theme?: ContentTheme;
+    base?: string;
+}
+/**
+ * ChangelogProvider - Provides changelog store and configuration to child components
+ *
+ * This provider handles:
+ * - Creating and managing the widget store (client-side only)
+ * - Syncing theme changes to all widgets
+ * - Providing base URL and slug to all child components
+ */
+export declare function ChangelogProvider({ children, slug, theme, base, }: ChangelogProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function useChangelogContext(): ChangelogContextValue;
+export {};

package/dist/context.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const ChangelogContext = React.createContext(null);
+/**
+ * ChangelogProvider - Provides changelog store and configuration to child components
+ *
+ * This provider handles:
+ * - Creating and managing the widget store (client-side only)
+ * - Syncing theme changes to all widgets
+ * - Providing base URL and slug to all child components
+ */
+export function ChangelogProvider({ children, slug, theme = 'light', base, }) {
+    const [context, setContext] = React.useState(null);
+    // Initialize store on client side only
+    React.useEffect(() => {
+        import('@squeletteapp/widget').then((mod) => {
+            const widgetModule = mod;
+            setContext({
+                store: widgetModule.createChangelogStore(),
+                module: widgetModule,
+            });
+        });
+    }, []);
+    // Update theme when it changes
+    React.useEffect(() => {
+        context?.store.setTheme(theme);
+    }, [context, theme]);
+    // Don't render children until store is ready (client-side only)
+    if (!context) {
+        return null;
+    }
+    return (_jsx(ChangelogContext.Provider, { value: { store: context.store, module: context.module, theme, base, slug }, children: children }));
+}
+export function useChangelogContext() {
+    const context = React.useContext(ChangelogContext);
+    if (!context) {
+        throw new Error('useChangelogContext must be used within a ChangelogProvider');
+    }
+    return context;
+}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
-export { createChangelogWidget, createFeedbackWidget, createRoadmapWidget, createWidget, } from '@squeletteapp/widget';
-export { ChangelogWidget, type ChangelogWidgetProps, FeedbackWidget, type FeedbackWidgetProps, RoadmapWidget, type RoadmapWidgetProps, } from './components';
-export { useChangelogWidget, useFeedbackWidget, useRoadmapWidget, useWidget, type WidgetInstance, type WidgetOptions, } from './hooks';
+export { ChangelogProvider, useChangelogContext, type ChangelogProviderProps, } from './context';
+export { ChangelogEntryModal, type ChangelogEntryModalProps, } from './components/changelog-entry-modal';
+export { ChangelogEntriesListDropdown, type ChangelogEntriesListDropdownProps, } from './components/changelog-entries-list-dropdown';
+export { ChangelogBanner, type ChangelogBannerProps, } from './components/changelog-banner';
+export type { ContentTheme } from './types';