@squeletteapp/widget-react 0.1.0 → 1.0.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 { useFeedbackWidget, useRoadmapWidget, useChangelogWidget, useWidget, type WidgetOptions, type WidgetInstance, } from './hooks';
-export { FeedbackWidget, RoadmapWidget, ChangelogWidget, type FeedbackWidgetProps, type RoadmapWidgetProps, type ChangelogWidgetProps, } from './components';
-export { createFeedbackWidget, createRoadmapWidget, createChangelogWidget, createWidget, } from '@squeletteapp/widget';
+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';

package/dist/index.esm.js

@@ -1,175 +1,158 @@
-// src/hooks.ts
-import { useEffect, useRef, useCallback } from "react";
-import {
-  createFeedbackWidget,
-  createRoadmapWidget,
-  createChangelogWidget,
-  createWidget
-} from "@squeletteapp/widget";
-function useFeedbackWidget(workspaceSlug, boardSlug, options) {
-  const widgetRef = useRef(null);
-  const initWidget = useCallback(() => {
-    if (widgetRef.current) {
-      widgetRef.current.destroy();
-    }
-    widgetRef.current = createFeedbackWidget(workspaceSlug, boardSlug, options);
-    return widgetRef.current;
-  }, [workspaceSlug, boardSlug, options]);
-  useEffect(() => {
-    const widget = initWidget();
-    return () => {
-      if (widget) {
-        widget.destroy();
-      }
-    };
-  }, [initWidget]);
-  return widgetRef.current;
-}
-function useRoadmapWidget(workspaceSlug, boardSlug, options) {
-  const widgetRef = useRef(null);
-  const initWidget = useCallback(() => {
-    if (widgetRef.current) {
-      widgetRef.current.destroy();
-    }
-    widgetRef.current = createRoadmapWidget(workspaceSlug, boardSlug, options);
-    return widgetRef.current;
-  }, [workspaceSlug, boardSlug, options]);
-  useEffect(() => {
-    const widget = initWidget();
-    return () => {
-      if (widget) {
-        widget.destroy();
-      }
-    };
-  }, [initWidget]);
-  return widgetRef.current;
-}
-function useChangelogWidget(workspaceSlug, options) {
-  const widgetRef = useRef(null);
-  const initWidget = useCallback(() => {
-    if (widgetRef.current) {
-      widgetRef.current.destroy();
-    }
-    widgetRef.current = createChangelogWidget(workspaceSlug, options);
-    return widgetRef.current;
-  }, [workspaceSlug, options]);
-  useEffect(() => {
-    const widget = initWidget();
-    return () => {
-      if (widget) {
-        widget.destroy();
-      }
-    };
-  }, [initWidget]);
-  return widgetRef.current;
-}
-function useWidget(options) {
-  const widgetRef = useRef(null);
-  const initWidget = useCallback(() => {
-    if (widgetRef.current) {
-      widgetRef.current.destroy();
-    }
-    widgetRef.current = createWidget(options);
-    return widgetRef.current;
-  }, [options]);
-  useEffect(() => {
-    const widget = initWidget();
-    return () => {
-      if (widget) {
-        widget.destroy();
-      }
-    };
-  }, [initWidget]);
-  return widgetRef.current;
-}
-
-// src/components.tsx
-import { useId } from "react";
+// src/context.tsx
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-function FeedbackWidget({
-  workspaceSlug,
-  boardSlug,
+var ChangelogContext = React.createContext(null);
+function ChangelogProvider({
   children,
-  className,
-  ...options
+  slug,
+  theme = "light",
+  base
 }) {
-  const buttonId = useId();
-  const widget = useFeedbackWidget(workspaceSlug, boardSlug, {
-    ...options,
-    buttonSelector: `#${buttonId}`
-  });
+  const [context, setContext] = React.useState(null);
+  React.useEffect(() => {
+    import("@squeletteapp/widget").then((mod) => {
+      const widgetModule = mod;
+      setContext({
+        store: widgetModule.createChangelogStore(),
+        module: widgetModule
+      });
+    });
+  }, []);
+  React.useEffect(() => {
+    context?.store.setTheme(theme);
+  }, [context, theme]);
+  if (!context) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
-    "button",
+    ChangelogContext.Provider,
     {
-      id: buttonId,
-      className,
-      type: "button",
+      value: { store: context.store, module: context.module, theme, base, slug },
       children
     }
   );
 }
-function RoadmapWidget({
-  workspaceSlug,
-  boardSlug,
-  children,
-  className,
-  ...options
+function useChangelogContext() {
+  const context = React.useContext(ChangelogContext);
+  if (!context) {
+    throw new Error("useChangelogContext must be used within a ChangelogProvider");
+  }
+  return context;
+}
+
+// src/components/changelog-entry-modal.tsx
+import * as React2 from "react";
+function ChangelogEntryModal({
+  ticketId,
+  onOpenChange
 }) {
-  const buttonId = useId();
-  const widget = useRoadmapWidget(workspaceSlug, boardSlug, {
-    ...options,
-    buttonSelector: `#${buttonId}`
-  });
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      id: buttonId,
-      className,
-      type: "button",
-      children
+  const { store, module, theme, base, slug } = useChangelogContext();
+  const widgetRef = React2.useRef(null);
+  React2.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]);
+  React2.useEffect(() => {
+    widgetRef.current?.setTheme(theme);
+  }, [theme]);
+  return null;
 }
-function ChangelogWidget({
-  workspaceSlug,
+
+// src/components/changelog-entries-list-dropdown.tsx
+import * as React3 from "react";
+function ChangelogEntriesListDropdown({
   children,
-  className,
-  ...options
+  position
 }) {
-  const buttonId = useId();
-  const widget = useChangelogWidget(workspaceSlug, {
-    ...options,
-    buttonSelector: `#${buttonId}`
-  });
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      id: buttonId,
-      className,
-      type: "button",
-      children
+  const { store, module, theme, base, slug } = useChangelogContext();
+  const widgetRef = React3.useRef(null);
+  const anchorId = React3.useId();
+  const cleanAnchorId = `sq-dropdown-${anchorId.replace(/:/g, "")}`;
+  const initialThemeRef = React3.useRef(theme);
+  React3.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]);
+  React3.useEffect(() => {
+    widgetRef.current?.setTheme(theme);
+  }, [theme]);
+  const handleClick = React3.useCallback(() => {
+    widgetRef.current?.open();
+  }, []);
+  return React3.cloneElement(children, {
+    id: cleanAnchorId,
+    onClick: (e) => {
+      const originalOnClick = children.props.onClick;
+      if (originalOnClick) {
+        originalOnClick(e);
+      }
+      handleClick();
     }
-  );
+  });
 }
 
-// src/index.ts
-import {
-  createFeedbackWidget as createFeedbackWidget2,
-  createRoadmapWidget as createRoadmapWidget2,
-  createChangelogWidget as createChangelogWidget2,
-  createWidget as createWidget2
-} from "@squeletteapp/widget";
+// src/components/changelog-banner.tsx
+import * as React4 from "react";
+function ChangelogBanner({ debug = false }) {
+  const { store, module, theme, base, slug } = useChangelogContext();
+  const widgetRef = React4.useRef(null);
+  const initialThemeRef = React4.useRef(theme);
+  React4.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]);
+  React4.useEffect(() => {
+    widgetRef.current?.setTheme(theme);
+  }, [theme]);
+  return null;
+}
 export {
-  ChangelogWidget,
-  FeedbackWidget,
-  RoadmapWidget,
-  createChangelogWidget2 as createChangelogWidget,
-  createFeedbackWidget2 as createFeedbackWidget,
-  createRoadmapWidget2 as createRoadmapWidget,
-  createWidget2 as createWidget,
-  useChangelogWidget,
-  useFeedbackWidget,
-  useRoadmapWidget,
-  useWidget
+  ChangelogBanner,
+  ChangelogEntriesListDropdown,
+  ChangelogEntryModal,
+  ChangelogProvider,
+  useChangelogContext
 };
 //# sourceMappingURL=index.esm.js.map