@squeletteapp/widget-react 3.0.1 → 3.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/changelog-banner.d.ts +3 -1
- package/dist/components/changelog-banner.js +6 -5
- package/dist/context.d.ts +1 -0
- package/dist/index.d.ts +6 -5
- package/dist/index.esm.js +4 -3
- package/dist/index.esm.js.map +2 -2
- package/dist/index.js +4 -3
- package/dist/index.js.map +2 -2
- package/package.json +9 -9
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import type { Position } from "@squeletteapp/widget-builder";
|
|
1
2
|
export interface ChangelogBannerProps {
|
|
2
3
|
debug?: boolean;
|
|
4
|
+
position?: Position;
|
|
3
5
|
}
|
|
4
6
|
/**
|
|
5
7
|
* ChangelogBanner - Renders a banner for the latest changelog entry
|
|
@@ -8,4 +10,4 @@ export interface ChangelogBannerProps {
|
|
|
8
10
|
* checks if it should be shown, and displays a banner at the bottom
|
|
9
11
|
* of the screen. Must be used within a ChangelogProvider.
|
|
10
12
|
*/
|
|
11
|
-
export declare function ChangelogBanner({ debug }: ChangelogBannerProps): null;
|
|
13
|
+
export declare function ChangelogBanner({ debug, position }: ChangelogBannerProps): null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useChangelogContext } from
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useChangelogContext } from "../context";
|
|
4
4
|
/**
|
|
5
5
|
* ChangelogBanner - Renders a banner for the latest changelog entry
|
|
6
6
|
*
|
|
@@ -8,7 +8,7 @@ import { useChangelogContext } from '../context';
|
|
|
8
8
|
* checks if it should be shown, and displays a banner at the bottom
|
|
9
9
|
* of the screen. Must be used within a ChangelogProvider.
|
|
10
10
|
*/
|
|
11
|
-
export function ChangelogBanner({ debug = false }) {
|
|
11
|
+
export function ChangelogBanner({ debug = false, position = "s" }) {
|
|
12
12
|
const { store, module, theme, base, slug } = useChangelogContext();
|
|
13
13
|
const widgetRef = React.useRef(null);
|
|
14
14
|
// Store initial theme in ref to use in creation
|
|
@@ -22,6 +22,7 @@ export function ChangelogBanner({ debug = false }) {
|
|
|
22
22
|
contentTheme: initialThemeRef.current,
|
|
23
23
|
slug,
|
|
24
24
|
debug,
|
|
25
|
+
position,
|
|
25
26
|
})
|
|
26
27
|
.then((widget) => {
|
|
27
28
|
if (mounted && widget) {
|
|
@@ -35,7 +36,7 @@ export function ChangelogBanner({ debug = false }) {
|
|
|
35
36
|
widgetRef.current = null;
|
|
36
37
|
}
|
|
37
38
|
};
|
|
38
|
-
}, [slug, store, module, base, debug]);
|
|
39
|
+
}, [slug, store, module, base, debug, position]);
|
|
39
40
|
// Update theme when it changes (separate effect to avoid recreating widget)
|
|
40
41
|
React.useEffect(() => {
|
|
41
42
|
widgetRef.current?.setTheme(theme);
|
package/dist/context.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ type WidgetModule = {
|
|
|
19
19
|
contentTheme?: ContentTheme;
|
|
20
20
|
slug: string;
|
|
21
21
|
debug?: boolean;
|
|
22
|
+
position?: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center';
|
|
22
23
|
}) => Promise<unknown>;
|
|
23
24
|
createChangelogEntriesListDropdownWidget: (anchor: string, store: WidgetStore, options: {
|
|
24
25
|
base?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
export { ChangelogProvider, useChangelogContext, type ChangelogProviderProps
|
|
2
|
-
export { ChangelogEntryModal, type ChangelogEntryModalProps, } from
|
|
3
|
-
export { ChangelogEntriesListDropdown, type ChangelogEntriesListDropdownProps, } from
|
|
4
|
-
export { ChangelogBanner, type ChangelogBannerProps
|
|
5
|
-
export type { ContentTheme } from
|
|
1
|
+
export { ChangelogProvider, useChangelogContext, type ChangelogProviderProps } from "./context";
|
|
2
|
+
export { ChangelogEntryModal, type ChangelogEntryModalProps, } from "./components/changelog-entry-modal";
|
|
3
|
+
export { ChangelogEntriesListDropdown, type ChangelogEntriesListDropdownProps, } from "./components/changelog-entries-list-dropdown";
|
|
4
|
+
export { ChangelogBanner, type ChangelogBannerProps } from "./components/changelog-banner";
|
|
5
|
+
export type { ContentTheme } from "./types";
|
|
6
|
+
export type { Position } from "@squeletteapp/widget-builder";
|
package/dist/index.esm.js
CHANGED
|
@@ -119,7 +119,7 @@ function ChangelogEntriesListDropdown({
|
|
|
119
119
|
|
|
120
120
|
// src/components/changelog-banner.tsx
|
|
121
121
|
import * as React4 from "react";
|
|
122
|
-
function ChangelogBanner({ debug = false }) {
|
|
122
|
+
function ChangelogBanner({ debug = false, position = "s" }) {
|
|
123
123
|
const { store, module, theme, base, slug } = useChangelogContext();
|
|
124
124
|
const widgetRef = React4.useRef(null);
|
|
125
125
|
const initialThemeRef = React4.useRef(theme);
|
|
@@ -129,7 +129,8 @@ function ChangelogBanner({ debug = false }) {
|
|
|
129
129
|
base,
|
|
130
130
|
contentTheme: initialThemeRef.current,
|
|
131
131
|
slug,
|
|
132
|
-
debug
|
|
132
|
+
debug,
|
|
133
|
+
position
|
|
133
134
|
}).then((widget) => {
|
|
134
135
|
if (mounted && widget) {
|
|
135
136
|
widgetRef.current = widget;
|
|
@@ -142,7 +143,7 @@ function ChangelogBanner({ debug = false }) {
|
|
|
142
143
|
widgetRef.current = null;
|
|
143
144
|
}
|
|
144
145
|
};
|
|
145
|
-
}, [slug, store, module, base, debug]);
|
|
146
|
+
}, [slug, store, module, base, debug, position]);
|
|
146
147
|
React4.useEffect(() => {
|
|
147
148
|
widgetRef.current?.setTheme(theme);
|
|
148
149
|
}, [theme]);
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/context.tsx", "../src/components/changelog-entry-modal.tsx", "../src/components/changelog-entries-list-dropdown.tsx", "../src/components/changelog-banner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport type { ContentTheme } from './types';\n\n// Lazy-loaded types - we don't import the actual module at the top level\ntype WidgetStore = {\n getState: () => Record<string, unknown>;\n mount: (source: string, widget: unknown) => Promise<void>;\n unmount: (source: string) => void;\n open: (source: string) => Promise<void>;\n setTheme: (theme: ContentTheme) => void;\n};\n\ntype WidgetModule = {\n createChangelogStore: () => WidgetStore;\n createChangelogEntryWidget: (\n ticketId: string,\n options: { base?: string; contentTheme?: ContentTheme; slug?: string }\n ) => unknown;\n createChangelogBannerWidget: (\n store: WidgetStore,\n options: { base?: string; contentTheme?: ContentTheme; slug: string; debug?: boolean }\n ) => Promise<unknown>;\n createChangelogEntriesListDropdownWidget: (\n anchor: string,\n store: WidgetStore,\n options: { base?: string; contentTheme?: ContentTheme; slug?: string; position?: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center' }\n ) => unknown;\n};\n\ntype ChangelogContextValue = {\n store: WidgetStore;\n module: WidgetModule;\n theme: ContentTheme;\n base?: string;\n slug: string;\n};\n\nconst ChangelogContext = React.createContext<ChangelogContextValue | null>(null);\n\nexport interface ChangelogProviderProps {\n children: React.ReactNode;\n slug: string;\n theme?: ContentTheme;\n base?: string;\n}\n\n/**\n * ChangelogProvider - Provides changelog store and configuration to child components\n *\n * This provider handles:\n * - Creating and managing the widget store (client-side only)\n * - Syncing theme changes to all widgets\n * - Providing base URL and slug to all child components\n */\nexport function ChangelogProvider({\n children,\n slug,\n theme = 'light',\n base,\n}: ChangelogProviderProps) {\n const [context, setContext] = React.useState<{\n store: WidgetStore;\n module: WidgetModule;\n } | null>(null);\n\n // Initialize store on client side only\n React.useEffect(() => {\n import('@squeletteapp/widget').then((mod) => {\n const widgetModule = mod as unknown as WidgetModule;\n setContext({\n store: widgetModule.createChangelogStore(),\n module: widgetModule,\n });\n });\n }, []);\n\n // Update theme when it changes\n React.useEffect(() => {\n context?.store.setTheme(theme);\n }, [context, theme]);\n\n // Don't render children until store is ready (client-side only)\n if (!context) {\n return null;\n }\n\n return (\n <ChangelogContext.Provider\n value={{ store: context.store, module: context.module, theme, base, slug }}\n >\n {children}\n </ChangelogContext.Provider>\n );\n}\n\nexport function useChangelogContext(): ChangelogContextValue {\n const context = React.useContext(ChangelogContext);\n if (!context) {\n throw new Error('useChangelogContext must be used within a ChangelogProvider');\n }\n return context;\n}\n", "'use client';\n\nimport * as React from 'react';\nimport { useChangelogContext } from '../context';\n\nexport interface ChangelogEntryModalProps {\n ticketId: string;\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * ChangelogEntryModal - Renders a modal for a single changelog entry\n *\n * This component manages its own widget lifecycle and automatically\n * cleans up on unmount. Must be used within a ChangelogProvider.\n */\nexport function ChangelogEntryModal({\n ticketId,\n onOpenChange,\n}: ChangelogEntryModalProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{ setTheme: (t: string) => void } | null>(null);\n\n React.useEffect(() => {\n const widget = module.createChangelogEntryWidget(ticketId, {\n base,\n contentTheme: theme,\n slug,\n }) as { onOpenChange: (cb: (isOpen: boolean) => void) => void; setTheme: (t: string) => void };\n\n if (onOpenChange) {\n widget.onOpenChange(onOpenChange);\n }\n\n widgetRef.current = widget;\n store.mount(ticketId, widget);\n\n return () => {\n store.unmount(ticketId);\n widgetRef.current = null;\n };\n }, [ticketId, slug, store, module, base, onOpenChange, theme]);\n\n // Update theme when it changes\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n return null;\n}\n", "'use client';\n\nimport * as React from 'react';\nimport { useChangelogContext } from '../context';\n\ntype Position = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center';\n\nexport interface ChangelogEntriesListDropdownProps {\n children: React.ReactElement;\n position?: Position;\n}\n\n/**\n * ChangelogEntriesListDropdown - Renders a dropdown list of changelog entries\n *\n * This component wraps a child element (trigger) and opens the dropdown\n * when the child is clicked. Must be used within a ChangelogProvider.\n */\nexport function ChangelogEntriesListDropdown({\n children,\n position,\n}: ChangelogEntriesListDropdownProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{\n preload: () => void;\n open: () => void;\n destroy: () => void;\n setTheme: (t: string) => void;\n } | null>(null);\n const anchorId = React.useId();\n const cleanAnchorId = `sq-dropdown-${anchorId.replace(/:/g, '')}`;\n\n // Store initial theme in ref to use in creation\n const initialThemeRef = React.useRef(theme);\n\n // Create widget once on mount (theme changes handled separately via setTheme)\n React.useEffect(() => {\n const widget = module.createChangelogEntriesListDropdownWidget(\n `#${cleanAnchorId}`,\n store,\n {\n base,\n contentTheme: initialThemeRef.current,\n slug,\n position,\n }\n ) as {\n preload: () => void;\n open: () => void;\n destroy: () => void;\n setTheme: (t: string) => void;\n };\n\n widget.preload();\n widgetRef.current = widget;\n\n return () => {\n widget.destroy();\n widgetRef.current = null;\n };\n }, [slug, store, module, base, cleanAnchorId, position]);\n\n // Update theme when it changes (separate effect to avoid recreating widget)\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n const handleClick = React.useCallback(() => {\n widgetRef.current?.open();\n }, []);\n\n // Clone the child and add the anchor id and click handler\n return React.cloneElement(children, {\n id: cleanAnchorId,\n onClick: (e: React.MouseEvent) => {\n const originalOnClick = children.props.onClick;\n if (originalOnClick) {\n originalOnClick(e);\n }\n handleClick();\n },\n });\n}\n", "
|
|
5
|
-
"mappings": ";AAEA,YAAY,WAAW;AAuFnB;AAlDJ,IAAM,mBAAyB,oBAA4C,IAAI;AAiBxE,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AACF,GAA2B;AACzB,QAAM,CAAC,SAAS,UAAU,IAAU,eAG1B,IAAI;AAGd,EAAM,gBAAU,MAAM;AACpB,WAAO,sBAAsB,EAAE,KAAK,CAAC,QAAQ;AAC3C,YAAM,eAAe;AACrB,iBAAW;AAAA,QACT,OAAO,aAAa,qBAAqB;AAAA,QACzC,QAAQ;AAAA,MACV,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAGL,EAAM,gBAAU,MAAM;AACpB,aAAS,MAAM,SAAS,KAAK;AAAA,EAC/B,GAAG,CAAC,SAAS,KAAK,CAAC;AAGnB,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,QAAQ,OAAO,MAAM,KAAK;AAAA,MAExE;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,sBAA6C;AAC3D,QAAM,UAAgB,iBAAW,gBAAgB;AACjD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,6DAA6D;AAAA,EAC/E;AACA,SAAO;AACT;;;ACrGA,YAAYA,YAAW;AAchB,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,EAAE,OAAO,QAAQ,OAAO,MAAM,KAAK,IAAI,oBAAoB;AACjE,QAAM,YAAkB,cAAiD,IAAI;AAE7E,EAAM,iBAAU,MAAM;AACpB,UAAM,SAAS,OAAO,2BAA2B,UAAU;AAAA,MACzD;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF,CAAC;AAED,QAAI,cAAc;AAChB,aAAO,aAAa,YAAY;AAAA,IAClC;AAEA,cAAU,UAAU;AACpB,UAAM,MAAM,UAAU,MAAM;AAE5B,WAAO,MAAM;AACX,YAAM,QAAQ,QAAQ;AACtB,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,MAAM,cAAc,KAAK,CAAC;AAG7D,EAAM,iBAAU,MAAM;AACpB,cAAU,SAAS,SAAS,KAAK;AAAA,EACnC,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;AC/CA,YAAYC,YAAW;AAgBhB,SAAS,6BAA6B;AAAA,EAC3C;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,EAAE,OAAO,QAAQ,OAAO,MAAM,KAAK,IAAI,oBAAoB;AACjE,QAAM,YAAkB,cAKd,IAAI;AACd,QAAM,WAAiB,aAAM;AAC7B,QAAM,gBAAgB,eAAe,SAAS,QAAQ,MAAM,EAAE,CAAC;AAG/D,QAAM,kBAAwB,cAAO,KAAK;AAG1C,EAAM,iBAAU,MAAM;AACpB,UAAM,SAAS,OAAO;AAAA,MACpB,IAAI,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,QACE;AAAA,QACA,cAAc,gBAAgB;AAAA,QAC9B;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAOA,WAAO,QAAQ;AACf,cAAU,UAAU;AAEpB,WAAO,MAAM;AACX,aAAO,QAAQ;AACf,gBAAU,UAAU;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,QAAQ,MAAM,eAAe,QAAQ,CAAC;AAGvD,EAAM,iBAAU,MAAM;AACpB,cAAU,SAAS,SAAS,KAAK;AAAA,EACnC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,cAAoB,mBAAY,MAAM;AAC1C,cAAU,SAAS,KAAK;AAAA,EAC1B,GAAG,CAAC,CAAC;AAGL,SAAa,oBAAa,UAAU;AAAA,IAClC,IAAI;AAAA,IACJ,SAAS,CAAC,MAAwB;AAChC,YAAM,kBAAkB,SAAS,MAAM;AACvC,UAAI,iBAAiB;AACnB,wBAAgB,CAAC;AAAA,MACnB;AACA,kBAAY;AAAA,IACd;AAAA,EACF,CAAC;AACH;;;AChFA,YAAYC,YAAW;
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport type { ContentTheme } from './types';\n\n// Lazy-loaded types - we don't import the actual module at the top level\ntype WidgetStore = {\n getState: () => Record<string, unknown>;\n mount: (source: string, widget: unknown) => Promise<void>;\n unmount: (source: string) => void;\n open: (source: string) => Promise<void>;\n setTheme: (theme: ContentTheme) => void;\n};\n\ntype WidgetModule = {\n createChangelogStore: () => WidgetStore;\n createChangelogEntryWidget: (\n ticketId: string,\n options: { base?: string; contentTheme?: ContentTheme; slug?: string }\n ) => unknown;\n createChangelogBannerWidget: (\n store: WidgetStore,\n options: { base?: string; contentTheme?: ContentTheme; slug: string; debug?: boolean; position?: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center' }\n ) => Promise<unknown>;\n createChangelogEntriesListDropdownWidget: (\n anchor: string,\n store: WidgetStore,\n options: { base?: string; contentTheme?: ContentTheme; slug?: string; position?: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center' }\n ) => unknown;\n};\n\ntype ChangelogContextValue = {\n store: WidgetStore;\n module: WidgetModule;\n theme: ContentTheme;\n base?: string;\n slug: string;\n};\n\nconst ChangelogContext = React.createContext<ChangelogContextValue | null>(null);\n\nexport interface ChangelogProviderProps {\n children: React.ReactNode;\n slug: string;\n theme?: ContentTheme;\n base?: string;\n}\n\n/**\n * ChangelogProvider - Provides changelog store and configuration to child components\n *\n * This provider handles:\n * - Creating and managing the widget store (client-side only)\n * - Syncing theme changes to all widgets\n * - Providing base URL and slug to all child components\n */\nexport function ChangelogProvider({\n children,\n slug,\n theme = 'light',\n base,\n}: ChangelogProviderProps) {\n const [context, setContext] = React.useState<{\n store: WidgetStore;\n module: WidgetModule;\n } | null>(null);\n\n // Initialize store on client side only\n React.useEffect(() => {\n import('@squeletteapp/widget').then((mod) => {\n const widgetModule = mod as unknown as WidgetModule;\n setContext({\n store: widgetModule.createChangelogStore(),\n module: widgetModule,\n });\n });\n }, []);\n\n // Update theme when it changes\n React.useEffect(() => {\n context?.store.setTheme(theme);\n }, [context, theme]);\n\n // Don't render children until store is ready (client-side only)\n if (!context) {\n return null;\n }\n\n return (\n <ChangelogContext.Provider\n value={{ store: context.store, module: context.module, theme, base, slug }}\n >\n {children}\n </ChangelogContext.Provider>\n );\n}\n\nexport function useChangelogContext(): ChangelogContextValue {\n const context = React.useContext(ChangelogContext);\n if (!context) {\n throw new Error('useChangelogContext must be used within a ChangelogProvider');\n }\n return context;\n}\n", "'use client';\n\nimport * as React from 'react';\nimport { useChangelogContext } from '../context';\n\nexport interface ChangelogEntryModalProps {\n ticketId: string;\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * ChangelogEntryModal - Renders a modal for a single changelog entry\n *\n * This component manages its own widget lifecycle and automatically\n * cleans up on unmount. Must be used within a ChangelogProvider.\n */\nexport function ChangelogEntryModal({\n ticketId,\n onOpenChange,\n}: ChangelogEntryModalProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{ setTheme: (t: string) => void } | null>(null);\n\n React.useEffect(() => {\n const widget = module.createChangelogEntryWidget(ticketId, {\n base,\n contentTheme: theme,\n slug,\n }) as { onOpenChange: (cb: (isOpen: boolean) => void) => void; setTheme: (t: string) => void };\n\n if (onOpenChange) {\n widget.onOpenChange(onOpenChange);\n }\n\n widgetRef.current = widget;\n store.mount(ticketId, widget);\n\n return () => {\n store.unmount(ticketId);\n widgetRef.current = null;\n };\n }, [ticketId, slug, store, module, base, onOpenChange, theme]);\n\n // Update theme when it changes\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n return null;\n}\n", "'use client';\n\nimport * as React from 'react';\nimport { useChangelogContext } from '../context';\n\ntype Position = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center';\n\nexport interface ChangelogEntriesListDropdownProps {\n children: React.ReactElement;\n position?: Position;\n}\n\n/**\n * ChangelogEntriesListDropdown - Renders a dropdown list of changelog entries\n *\n * This component wraps a child element (trigger) and opens the dropdown\n * when the child is clicked. Must be used within a ChangelogProvider.\n */\nexport function ChangelogEntriesListDropdown({\n children,\n position,\n}: ChangelogEntriesListDropdownProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{\n preload: () => void;\n open: () => void;\n destroy: () => void;\n setTheme: (t: string) => void;\n } | null>(null);\n const anchorId = React.useId();\n const cleanAnchorId = `sq-dropdown-${anchorId.replace(/:/g, '')}`;\n\n // Store initial theme in ref to use in creation\n const initialThemeRef = React.useRef(theme);\n\n // Create widget once on mount (theme changes handled separately via setTheme)\n React.useEffect(() => {\n const widget = module.createChangelogEntriesListDropdownWidget(\n `#${cleanAnchorId}`,\n store,\n {\n base,\n contentTheme: initialThemeRef.current,\n slug,\n position,\n }\n ) as {\n preload: () => void;\n open: () => void;\n destroy: () => void;\n setTheme: (t: string) => void;\n };\n\n widget.preload();\n widgetRef.current = widget;\n\n return () => {\n widget.destroy();\n widgetRef.current = null;\n };\n }, [slug, store, module, base, cleanAnchorId, position]);\n\n // Update theme when it changes (separate effect to avoid recreating widget)\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n const handleClick = React.useCallback(() => {\n widgetRef.current?.open();\n }, []);\n\n // Clone the child and add the anchor id and click handler\n return React.cloneElement(children, {\n id: cleanAnchorId,\n onClick: (e: React.MouseEvent) => {\n const originalOnClick = children.props.onClick;\n if (originalOnClick) {\n originalOnClick(e);\n }\n handleClick();\n },\n });\n}\n", "\"use client\";\n\nimport * as React from \"react\";\nimport type { Position } from \"@squeletteapp/widget-builder\";\nimport { useChangelogContext } from \"../context\";\n\nexport interface ChangelogBannerProps {\n debug?: boolean;\n position?: Position;\n}\n\n/**\n * ChangelogBanner - Renders a banner for the latest changelog entry\n *\n * This component automatically fetches the latest changelog entry,\n * checks if it should be shown, and displays a banner at the bottom\n * of the screen. Must be used within a ChangelogProvider.\n */\nexport function ChangelogBanner({ debug = false, position = \"s\" }: ChangelogBannerProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{\n destroy: () => void;\n setTheme: (t: string) => void;\n } | null>(null);\n\n // Store initial theme in ref to use in creation\n const initialThemeRef = React.useRef(theme);\n\n // Create widget once on mount (theme changes handled separately via setTheme)\n React.useEffect(() => {\n let mounted = true;\n\n module\n .createChangelogBannerWidget(store, {\n base,\n contentTheme: initialThemeRef.current,\n slug,\n debug,\n position,\n })\n .then((widget) => {\n if (mounted && widget) {\n widgetRef.current = widget as {\n destroy: () => void;\n setTheme: (t: string) => void;\n };\n }\n });\n\n return () => {\n mounted = false;\n if (widgetRef.current) {\n widgetRef.current.destroy();\n widgetRef.current = null;\n }\n };\n }, [slug, store, module, base, debug, position]);\n\n // Update theme when it changes (separate effect to avoid recreating widget)\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n return null;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "React", "React"]
|
|
7
7
|
}
|
package/dist/index.js
CHANGED
|
@@ -159,7 +159,7 @@ function ChangelogEntriesListDropdown({
|
|
|
159
159
|
|
|
160
160
|
// src/components/changelog-banner.tsx
|
|
161
161
|
var React4 = __toESM(require("react"), 1);
|
|
162
|
-
function ChangelogBanner({ debug = false }) {
|
|
162
|
+
function ChangelogBanner({ debug = false, position = "s" }) {
|
|
163
163
|
const { store, module: module2, theme, base, slug } = useChangelogContext();
|
|
164
164
|
const widgetRef = React4.useRef(null);
|
|
165
165
|
const initialThemeRef = React4.useRef(theme);
|
|
@@ -169,7 +169,8 @@ function ChangelogBanner({ debug = false }) {
|
|
|
169
169
|
base,
|
|
170
170
|
contentTheme: initialThemeRef.current,
|
|
171
171
|
slug,
|
|
172
|
-
debug
|
|
172
|
+
debug,
|
|
173
|
+
position
|
|
173
174
|
}).then((widget) => {
|
|
174
175
|
if (mounted && widget) {
|
|
175
176
|
widgetRef.current = widget;
|
|
@@ -182,7 +183,7 @@ function ChangelogBanner({ debug = false }) {
|
|
|
182
183
|
widgetRef.current = null;
|
|
183
184
|
}
|
|
184
185
|
};
|
|
185
|
-
}, [slug, store, module2, base, debug]);
|
|
186
|
+
}, [slug, store, module2, base, debug, position]);
|
|
186
187
|
React4.useEffect(() => {
|
|
187
188
|
widgetRef.current?.setTheme(theme);
|
|
188
189
|
}, [theme]);
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/context.tsx", "../src/components/changelog-entry-modal.tsx", "../src/components/changelog-entries-list-dropdown.tsx", "../src/components/changelog-banner.tsx"],
|
|
4
|
-
"sourcesContent": ["// Export Provider and context hook\nexport {
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["// Export Provider and context hook\nexport { ChangelogProvider, useChangelogContext, type ChangelogProviderProps } from \"./context\";\n\n// Export React components\nexport {\n ChangelogEntryModal,\n type ChangelogEntryModalProps,\n} from \"./components/changelog-entry-modal\";\n\nexport {\n ChangelogEntriesListDropdown,\n type ChangelogEntriesListDropdownProps,\n} from \"./components/changelog-entries-list-dropdown\";\n\nexport { ChangelogBanner, type ChangelogBannerProps } from \"./components/changelog-banner\";\n\n// Export types\nexport type { ContentTheme } from \"./types\";\nexport type { Position } from \"@squeletteapp/widget-builder\";\n", "'use client';\n\nimport * as React from 'react';\nimport type { ContentTheme } from './types';\n\n// Lazy-loaded types - we don't import the actual module at the top level\ntype WidgetStore = {\n getState: () => Record<string, unknown>;\n mount: (source: string, widget: unknown) => Promise<void>;\n unmount: (source: string) => void;\n open: (source: string) => Promise<void>;\n setTheme: (theme: ContentTheme) => void;\n};\n\ntype WidgetModule = {\n createChangelogStore: () => WidgetStore;\n createChangelogEntryWidget: (\n ticketId: string,\n options: { base?: string; contentTheme?: ContentTheme; slug?: string }\n ) => unknown;\n createChangelogBannerWidget: (\n store: WidgetStore,\n options: { base?: string; contentTheme?: ContentTheme; slug: string; debug?: boolean; position?: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center' }\n ) => Promise<unknown>;\n createChangelogEntriesListDropdownWidget: (\n anchor: string,\n store: WidgetStore,\n options: { base?: string; contentTheme?: ContentTheme; slug?: string; position?: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center' }\n ) => unknown;\n};\n\ntype ChangelogContextValue = {\n store: WidgetStore;\n module: WidgetModule;\n theme: ContentTheme;\n base?: string;\n slug: string;\n};\n\nconst ChangelogContext = React.createContext<ChangelogContextValue | null>(null);\n\nexport interface ChangelogProviderProps {\n children: React.ReactNode;\n slug: string;\n theme?: ContentTheme;\n base?: string;\n}\n\n/**\n * ChangelogProvider - Provides changelog store and configuration to child components\n *\n * This provider handles:\n * - Creating and managing the widget store (client-side only)\n * - Syncing theme changes to all widgets\n * - Providing base URL and slug to all child components\n */\nexport function ChangelogProvider({\n children,\n slug,\n theme = 'light',\n base,\n}: ChangelogProviderProps) {\n const [context, setContext] = React.useState<{\n store: WidgetStore;\n module: WidgetModule;\n } | null>(null);\n\n // Initialize store on client side only\n React.useEffect(() => {\n import('@squeletteapp/widget').then((mod) => {\n const widgetModule = mod as unknown as WidgetModule;\n setContext({\n store: widgetModule.createChangelogStore(),\n module: widgetModule,\n });\n });\n }, []);\n\n // Update theme when it changes\n React.useEffect(() => {\n context?.store.setTheme(theme);\n }, [context, theme]);\n\n // Don't render children until store is ready (client-side only)\n if (!context) {\n return null;\n }\n\n return (\n <ChangelogContext.Provider\n value={{ store: context.store, module: context.module, theme, base, slug }}\n >\n {children}\n </ChangelogContext.Provider>\n );\n}\n\nexport function useChangelogContext(): ChangelogContextValue {\n const context = React.useContext(ChangelogContext);\n if (!context) {\n throw new Error('useChangelogContext must be used within a ChangelogProvider');\n }\n return context;\n}\n", "'use client';\n\nimport * as React from 'react';\nimport { useChangelogContext } from '../context';\n\nexport interface ChangelogEntryModalProps {\n ticketId: string;\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * ChangelogEntryModal - Renders a modal for a single changelog entry\n *\n * This component manages its own widget lifecycle and automatically\n * cleans up on unmount. Must be used within a ChangelogProvider.\n */\nexport function ChangelogEntryModal({\n ticketId,\n onOpenChange,\n}: ChangelogEntryModalProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{ setTheme: (t: string) => void } | null>(null);\n\n React.useEffect(() => {\n const widget = module.createChangelogEntryWidget(ticketId, {\n base,\n contentTheme: theme,\n slug,\n }) as { onOpenChange: (cb: (isOpen: boolean) => void) => void; setTheme: (t: string) => void };\n\n if (onOpenChange) {\n widget.onOpenChange(onOpenChange);\n }\n\n widgetRef.current = widget;\n store.mount(ticketId, widget);\n\n return () => {\n store.unmount(ticketId);\n widgetRef.current = null;\n };\n }, [ticketId, slug, store, module, base, onOpenChange, theme]);\n\n // Update theme when it changes\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n return null;\n}\n", "'use client';\n\nimport * as React from 'react';\nimport { useChangelogContext } from '../context';\n\ntype Position = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'center';\n\nexport interface ChangelogEntriesListDropdownProps {\n children: React.ReactElement;\n position?: Position;\n}\n\n/**\n * ChangelogEntriesListDropdown - Renders a dropdown list of changelog entries\n *\n * This component wraps a child element (trigger) and opens the dropdown\n * when the child is clicked. Must be used within a ChangelogProvider.\n */\nexport function ChangelogEntriesListDropdown({\n children,\n position,\n}: ChangelogEntriesListDropdownProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{\n preload: () => void;\n open: () => void;\n destroy: () => void;\n setTheme: (t: string) => void;\n } | null>(null);\n const anchorId = React.useId();\n const cleanAnchorId = `sq-dropdown-${anchorId.replace(/:/g, '')}`;\n\n // Store initial theme in ref to use in creation\n const initialThemeRef = React.useRef(theme);\n\n // Create widget once on mount (theme changes handled separately via setTheme)\n React.useEffect(() => {\n const widget = module.createChangelogEntriesListDropdownWidget(\n `#${cleanAnchorId}`,\n store,\n {\n base,\n contentTheme: initialThemeRef.current,\n slug,\n position,\n }\n ) as {\n preload: () => void;\n open: () => void;\n destroy: () => void;\n setTheme: (t: string) => void;\n };\n\n widget.preload();\n widgetRef.current = widget;\n\n return () => {\n widget.destroy();\n widgetRef.current = null;\n };\n }, [slug, store, module, base, cleanAnchorId, position]);\n\n // Update theme when it changes (separate effect to avoid recreating widget)\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n const handleClick = React.useCallback(() => {\n widgetRef.current?.open();\n }, []);\n\n // Clone the child and add the anchor id and click handler\n return React.cloneElement(children, {\n id: cleanAnchorId,\n onClick: (e: React.MouseEvent) => {\n const originalOnClick = children.props.onClick;\n if (originalOnClick) {\n originalOnClick(e);\n }\n handleClick();\n },\n });\n}\n", "\"use client\";\n\nimport * as React from \"react\";\nimport type { Position } from \"@squeletteapp/widget-builder\";\nimport { useChangelogContext } from \"../context\";\n\nexport interface ChangelogBannerProps {\n debug?: boolean;\n position?: Position;\n}\n\n/**\n * ChangelogBanner - Renders a banner for the latest changelog entry\n *\n * This component automatically fetches the latest changelog entry,\n * checks if it should be shown, and displays a banner at the bottom\n * of the screen. Must be used within a ChangelogProvider.\n */\nexport function ChangelogBanner({ debug = false, position = \"s\" }: ChangelogBannerProps) {\n const { store, module, theme, base, slug } = useChangelogContext();\n const widgetRef = React.useRef<{\n destroy: () => void;\n setTheme: (t: string) => void;\n } | null>(null);\n\n // Store initial theme in ref to use in creation\n const initialThemeRef = React.useRef(theme);\n\n // Create widget once on mount (theme changes handled separately via setTheme)\n React.useEffect(() => {\n let mounted = true;\n\n module\n .createChangelogBannerWidget(store, {\n base,\n contentTheme: initialThemeRef.current,\n slug,\n debug,\n position,\n })\n .then((widget) => {\n if (mounted && widget) {\n widgetRef.current = widget as {\n destroy: () => void;\n setTheme: (t: string) => void;\n };\n }\n });\n\n return () => {\n mounted = false;\n if (widgetRef.current) {\n widgetRef.current.destroy();\n widgetRef.current = null;\n }\n };\n }, [slug, store, module, base, debug, position]);\n\n // Update theme when it changes (separate effect to avoid recreating widget)\n React.useEffect(() => {\n widgetRef.current?.setTheme(theme);\n }, [theme]);\n\n return null;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "module", "React", "module", "React", "module"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@squeletteapp/widget-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.1.3",
|
|
5
5
|
"description": "React components for Squelette changelog widgets",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -15,16 +15,12 @@
|
|
|
15
15
|
"files": [
|
|
16
16
|
"dist"
|
|
17
17
|
],
|
|
18
|
-
"scripts": {
|
|
19
|
-
"build": "tsc && node build.js",
|
|
20
|
-
"dev": "node dev.js",
|
|
21
|
-
"prepublishOnly": "npm run build"
|
|
22
|
-
},
|
|
23
18
|
"peerDependencies": {
|
|
24
19
|
"react": ">=16.8.0"
|
|
25
20
|
},
|
|
26
21
|
"dependencies": {
|
|
27
|
-
"@squeletteapp/widget": "
|
|
22
|
+
"@squeletteapp/widget": "3.1.2",
|
|
23
|
+
"@squeletteapp/widget-builder": "1.0.1"
|
|
28
24
|
},
|
|
29
25
|
"devDependencies": {
|
|
30
26
|
"@types/react": "^18.0.0",
|
|
@@ -39,5 +35,9 @@
|
|
|
39
35
|
"squelette"
|
|
40
36
|
],
|
|
41
37
|
"author": "Squelette",
|
|
42
|
-
"license": "MIT"
|
|
43
|
-
|
|
38
|
+
"license": "MIT",
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "tsc && node build.js",
|
|
41
|
+
"dev": "node dev.js"
|
|
42
|
+
}
|
|
43
|
+
}
|