@squeletteapp/widget-react 0.1.0

package/README.md

@@ -0,0 +1,113 @@
+# @squeletteapp/widget-react
+
+React components and hooks for Squelette feedback widgets.
+
+## Installation
+
+```bash
+npm install @squeletteapp/widget-react
+# or
+yarn add @squeletteapp/widget-react
+```
+
+## Usage
+
+### Using Components (Recommended)
+
+The easiest way to use Squelette widgets in React. Components automatically generate unique IDs using React's `useId()` hook:
+
+```tsx
+import { FeedbackWidget, RoadmapWidget, ChangelogWidget } from '@squeletteapp/widget-react';
+
+function App() {
+  return (
+    <div>
+      <FeedbackWidget
+        workspaceSlug="your-workspace"
+        boardSlug="feature-requests"
+        theme="light"
+        position="top"
+        onOpenChange={(isOpen) => console.log('Widget open:', isOpen)}
+      >
+        Give Feedback
+      </FeedbackWidget>
+
+      <RoadmapWidget
+        workspaceSlug="your-workspace"
+        boardSlug="roadmap"
+        theme="dark"
+      >
+        View Roadmap
+      </RoadmapWidget>
+
+      <ChangelogWidget
+        workspaceSlug="your-workspace"
+        theme="light"
+      >
+        What's New
+      </ChangelogWidget>
+    </div>
+  );
+}
+```
+
+### Using Hooks
+
+For more control, use the hooks directly:
+
+```tsx
+import { useFeedbackWidget } from '@squeletteapp/widget-react';
+
+function CustomButton() {
+  const widget = useFeedbackWidget('your-workspace', 'feature-requests', {
+    buttonSelector: '#my-feedback-button',
+    theme: 'light',
+    position: 'top',
+    onLoad: () => console.log('Widget loaded'),
+    onOpenChange: (isOpen) => console.log('Widget open:', isOpen),
+  });
+
+  return (
+    <button id="my-feedback-button">
+      Custom Feedback Button
+    </button>
+  );
+}
+```
+
+## API
+
+### Components
+
+#### `<FeedbackWidget>`
+- `workspaceSlug: string` - Your workspace slug
+- `boardSlug?: string` - Board slug (optional)
+- `theme?: 'light' | 'dark'` - Widget theme
+- `position?: 'top' | 'bottom' | 'left' | 'right'` - Widget position
+- `onLoad?: () => void` - Called when widget loads
+- `onOpenChange?: (isOpen: boolean) => void` - Called when widget opens/closes
+- `className?: string` - CSS class for the button
+- `children: ReactNode` - Button content
+
+#### `<RoadmapWidget>`
+Same props as FeedbackWidget, but `boardSlug` is required.
+
+#### `<ChangelogWidget>`
+Same props as FeedbackWidget, but no `boardSlug` prop.
+
+### Hooks
+
+#### `useFeedbackWidget(workspaceSlug, boardSlug, options)`
+#### `useRoadmapWidget(workspaceSlug, boardSlug, options)`
+#### `useChangelogWidget(workspaceSlug, options)`
+#### `useWidget(options)`
+
+All hooks return a widget instance with a `destroy()` method, or `null` if not initialized.
+
+## TypeScript
+
+This package includes full TypeScript support with proper type definitions.
+
+## Development
+
+Built with esbuild for fast compilation and optimized bundles. Supports both CommonJS and ESM formats.

package/dist/components.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { WidgetOptions } from './hooks';
+export interface FeedbackWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {
+    workspaceSlug: string;
+    boardSlug?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface RoadmapWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {
+    workspaceSlug: string;
+    boardSlug: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ChangelogWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {
+    workspaceSlug: string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function FeedbackWidget({ workspaceSlug, boardSlug, children, className, ...options }: FeedbackWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function RoadmapWidget({ workspaceSlug, boardSlug, children, className, ...options }: RoadmapWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChangelogWidget({ workspaceSlug, children, className, ...options }: ChangelogWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useFeedbackWidget, useRoadmapWidget, useChangelogWidget } from './hooks';
+export function FeedbackWidget({ workspaceSlug, boardSlug, children, className, ...options }) {
+    const buttonId = useId();
+    const widget = useFeedbackWidget(workspaceSlug, boardSlug, {
+        ...options,
+        buttonSelector: `#${buttonId}`,
+    });
+    return (_jsx("button", { id: buttonId, className: className, type: "button", children: children }));
+}
+export function RoadmapWidget({ workspaceSlug, boardSlug, children, className, ...options }) {
+    const buttonId = useId();
+    const widget = useRoadmapWidget(workspaceSlug, boardSlug, {
+        ...options,
+        buttonSelector: `#${buttonId}`,
+    });
+    return (_jsx("button", { id: buttonId, className: className, type: "button", children: children }));
+}
+export function ChangelogWidget({ workspaceSlug, children, className, ...options }) {
+    const buttonId = useId();
+    const widget = useChangelogWidget(workspaceSlug, {
+        ...options,
+        buttonSelector: `#${buttonId}`,
+    });
+    return (_jsx("button", { id: buttonId, className: className, type: "button", children: children }));
+}

package/dist/hooks.d.ts

@@ -0,0 +1,20 @@
+export interface WidgetOptions {
+    buttonSelector: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    theme?: string;
+    onLoad?: () => void;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export interface WidgetInstance {
+    destroy: () => void;
+}
+export declare function useFeedbackWidget(workspaceSlug: string, boardSlug: string | undefined, options: WidgetOptions): WidgetInstance | null;
+export declare function useRoadmapWidget(workspaceSlug: string, boardSlug: string, options: WidgetOptions): WidgetInstance | null;
+export declare function useChangelogWidget(workspaceSlug: string, options: WidgetOptions): WidgetInstance | null;
+export declare function useWidget(options: {
+    url: string;
+    buttonSelector: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    onLoad?: () => void;
+    onOpenChange?: (isOpen: boolean) => void;
+}): WidgetInstance | null;

package/dist/hooks.js

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { createFeedbackWidget, createRoadmapWidget, createChangelogWidget, createWidget } from '@squeletteapp/widget';
+export 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;
+}
+export 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;
+}
+export 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;
+}
+export 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;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+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';

package/dist/index.esm.js

@@ -0,0 +1,175 @@
+// 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";
+import { jsx } from "react/jsx-runtime";
+function FeedbackWidget({
+  workspaceSlug,
+  boardSlug,
+  children,
+  className,
+  ...options
+}) {
+  const buttonId = useId();
+  const widget = useFeedbackWidget(workspaceSlug, boardSlug, {
+    ...options,
+    buttonSelector: `#${buttonId}`
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id: buttonId,
+      className,
+      type: "button",
+      children
+    }
+  );
+}
+function RoadmapWidget({
+  workspaceSlug,
+  boardSlug,
+  children,
+  className,
+  ...options
+}) {
+  const buttonId = useId();
+  const widget = useRoadmapWidget(workspaceSlug, boardSlug, {
+    ...options,
+    buttonSelector: `#${buttonId}`
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id: buttonId,
+      className,
+      type: "button",
+      children
+    }
+  );
+}
+function ChangelogWidget({
+  workspaceSlug,
+  children,
+  className,
+  ...options
+}) {
+  const buttonId = useId();
+  const widget = useChangelogWidget(workspaceSlug, {
+    ...options,
+    buttonSelector: `#${buttonId}`
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id: buttonId,
+      className,
+      type: "button",
+      children
+    }
+  );
+}
+
+// src/index.ts
+import {
+  createFeedbackWidget as createFeedbackWidget2,
+  createRoadmapWidget as createRoadmapWidget2,
+  createChangelogWidget as createChangelogWidget2,
+  createWidget as createWidget2
+} from "@squeletteapp/widget";
+export {
+  ChangelogWidget,
+  FeedbackWidget,
+  RoadmapWidget,
+  createChangelogWidget2 as createChangelogWidget,
+  createFeedbackWidget2 as createFeedbackWidget,
+  createRoadmapWidget2 as createRoadmapWidget,
+  createWidget2 as createWidget,
+  useChangelogWidget,
+  useFeedbackWidget,
+  useRoadmapWidget,
+  useWidget
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/hooks.ts", "../src/components.tsx", "../src/index.ts"],
+  "sourcesContent": ["import { useEffect, useRef, useCallback } from 'react';\nimport { \n  createFeedbackWidget, \n  createRoadmapWidget, \n  createChangelogWidget,\n  createWidget\n} from '@squeletteapp/widget';\n\nexport interface WidgetOptions {\n  buttonSelector: string;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  theme?: string;\n  onLoad?: () => void;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport interface WidgetInstance {\n  destroy: () => void;\n}\n\nexport function useFeedbackWidget(\n  workspaceSlug: string,\n  boardSlug: string | undefined,\n  options: WidgetOptions\n): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createFeedbackWidget(workspaceSlug, boardSlug, options);\n    return widgetRef.current;\n  }, [workspaceSlug, boardSlug, options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}\n\nexport function useRoadmapWidget(\n  workspaceSlug: string,\n  boardSlug: string,\n  options: WidgetOptions\n): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createRoadmapWidget(workspaceSlug, boardSlug, options);\n    return widgetRef.current;\n  }, [workspaceSlug, boardSlug, options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}\n\nexport function useChangelogWidget(\n  workspaceSlug: string,\n  options: WidgetOptions\n): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createChangelogWidget(workspaceSlug, options);\n    return widgetRef.current;\n  }, [workspaceSlug, options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}\n\nexport function useWidget(options: {\n  url: string;\n  buttonSelector: string;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  onLoad?: () => void;\n  onOpenChange?: (isOpen: boolean) => void;\n}): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createWidget(options);\n    return widgetRef.current;\n  }, [options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}", "import React, { useId } from 'react';\nimport { useFeedbackWidget, useRoadmapWidget, useChangelogWidget, WidgetOptions } from './hooks';\n\nexport interface FeedbackWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {\n  workspaceSlug: string;\n  boardSlug?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface RoadmapWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {\n  workspaceSlug: string;\n  boardSlug: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface ChangelogWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {\n  workspaceSlug: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function FeedbackWidget({\n  workspaceSlug,\n  boardSlug,\n  children,\n  className,\n  ...options\n}: FeedbackWidgetProps) {\n  const buttonId = useId();\n\n  const widget = useFeedbackWidget(workspaceSlug, boardSlug, {\n    ...options,\n    buttonSelector: `#${buttonId}`,\n  });\n\n  return (\n    <button\n      id={buttonId}\n      className={className}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function RoadmapWidget({\n  workspaceSlug,\n  boardSlug,\n  children,\n  className,\n  ...options\n}: RoadmapWidgetProps) {\n  const buttonId = useId();\n\n  const widget = useRoadmapWidget(workspaceSlug, boardSlug, {\n    ...options,\n    buttonSelector: `#${buttonId}`,\n  });\n\n  return (\n    <button\n      id={buttonId}\n      className={className}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function ChangelogWidget({\n  workspaceSlug,\n  children,\n  className,\n  ...options\n}: ChangelogWidgetProps) {\n  const buttonId = useId();\n\n  const widget = useChangelogWidget(workspaceSlug, {\n    ...options,\n    buttonSelector: `#${buttonId}`,\n  });\n\n  return (\n    <button\n      id={buttonId}\n      className={className}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}", "// Export hooks\nexport {\n  useFeedbackWidget,\n  useRoadmapWidget,\n  useChangelogWidget,\n  useWidget,\n  type WidgetOptions,\n  type WidgetInstance,\n} from './hooks';\n\n// Export components\nexport {\n  FeedbackWidget,\n  RoadmapWidget,\n  ChangelogWidget,\n  type FeedbackWidgetProps,\n  type RoadmapWidgetProps,\n  type ChangelogWidgetProps,\n} from './components';\n\n// Re-export functions from the base widget package\nexport { \n  createFeedbackWidget,\n  createRoadmapWidget,\n  createChangelogWidget,\n  createWidget,\n} from '@squeletteapp/widget';"],
+  "mappings": "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",
+  "names": ["createFeedbackWidget", "createRoadmapWidget", "createChangelogWidget", "createWidget"]
+}

package/dist/index.js

@@ -0,0 +1,188 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ChangelogWidget: () => ChangelogWidget,
+  FeedbackWidget: () => FeedbackWidget,
+  RoadmapWidget: () => RoadmapWidget,
+  createChangelogWidget: () => import_widget2.createChangelogWidget,
+  createFeedbackWidget: () => import_widget2.createFeedbackWidget,
+  createRoadmapWidget: () => import_widget2.createRoadmapWidget,
+  createWidget: () => import_widget2.createWidget,
+  useChangelogWidget: () => useChangelogWidget,
+  useFeedbackWidget: () => useFeedbackWidget,
+  useRoadmapWidget: () => useRoadmapWidget,
+  useWidget: () => useWidget
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/hooks.ts
+var import_react = require("react");
+var import_widget = require("@squeletteapp/widget");
+function useFeedbackWidget(workspaceSlug, boardSlug, options) {
+  const widgetRef = (0, import_react.useRef)(null);
+  const initWidget = (0, import_react.useCallback)(() => {
+    if (widgetRef.current) {
+      widgetRef.current.destroy();
+    }
+    widgetRef.current = (0, import_widget.createFeedbackWidget)(workspaceSlug, boardSlug, options);
+    return widgetRef.current;
+  }, [workspaceSlug, boardSlug, options]);
+  (0, import_react.useEffect)(() => {
+    const widget = initWidget();
+    return () => {
+      if (widget) {
+        widget.destroy();
+      }
+    };
+  }, [initWidget]);
+  return widgetRef.current;
+}
+function useRoadmapWidget(workspaceSlug, boardSlug, options) {
+  const widgetRef = (0, import_react.useRef)(null);
+  const initWidget = (0, import_react.useCallback)(() => {
+    if (widgetRef.current) {
+      widgetRef.current.destroy();
+    }
+    widgetRef.current = (0, import_widget.createRoadmapWidget)(workspaceSlug, boardSlug, options);
+    return widgetRef.current;
+  }, [workspaceSlug, boardSlug, options]);
+  (0, import_react.useEffect)(() => {
+    const widget = initWidget();
+    return () => {
+      if (widget) {
+        widget.destroy();
+      }
+    };
+  }, [initWidget]);
+  return widgetRef.current;
+}
+function useChangelogWidget(workspaceSlug, options) {
+  const widgetRef = (0, import_react.useRef)(null);
+  const initWidget = (0, import_react.useCallback)(() => {
+    if (widgetRef.current) {
+      widgetRef.current.destroy();
+    }
+    widgetRef.current = (0, import_widget.createChangelogWidget)(workspaceSlug, options);
+    return widgetRef.current;
+  }, [workspaceSlug, options]);
+  (0, import_react.useEffect)(() => {
+    const widget = initWidget();
+    return () => {
+      if (widget) {
+        widget.destroy();
+      }
+    };
+  }, [initWidget]);
+  return widgetRef.current;
+}
+function useWidget(options) {
+  const widgetRef = (0, import_react.useRef)(null);
+  const initWidget = (0, import_react.useCallback)(() => {
+    if (widgetRef.current) {
+      widgetRef.current.destroy();
+    }
+    widgetRef.current = (0, import_widget.createWidget)(options);
+    return widgetRef.current;
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    const widget = initWidget();
+    return () => {
+      if (widget) {
+        widget.destroy();
+      }
+    };
+  }, [initWidget]);
+  return widgetRef.current;
+}
+
+// src/components.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FeedbackWidget({
+  workspaceSlug,
+  boardSlug,
+  children,
+  className,
+  ...options
+}) {
+  const buttonId = (0, import_react2.useId)();
+  const widget = useFeedbackWidget(workspaceSlug, boardSlug, {
+    ...options,
+    buttonSelector: `#${buttonId}`
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      id: buttonId,
+      className,
+      type: "button",
+      children
+    }
+  );
+}
+function RoadmapWidget({
+  workspaceSlug,
+  boardSlug,
+  children,
+  className,
+  ...options
+}) {
+  const buttonId = (0, import_react2.useId)();
+  const widget = useRoadmapWidget(workspaceSlug, boardSlug, {
+    ...options,
+    buttonSelector: `#${buttonId}`
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      id: buttonId,
+      className,
+      type: "button",
+      children
+    }
+  );
+}
+function ChangelogWidget({
+  workspaceSlug,
+  children,
+  className,
+  ...options
+}) {
+  const buttonId = (0, import_react2.useId)();
+  const widget = useChangelogWidget(workspaceSlug, {
+    ...options,
+    buttonSelector: `#${buttonId}`
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      id: buttonId,
+      className,
+      type: "button",
+      children
+    }
+  );
+}
+
+// src/index.ts
+var import_widget2 = require("@squeletteapp/widget");
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/hooks.ts", "../src/components.tsx"],
+  "sourcesContent": ["// Export hooks\nexport {\n  useFeedbackWidget,\n  useRoadmapWidget,\n  useChangelogWidget,\n  useWidget,\n  type WidgetOptions,\n  type WidgetInstance,\n} from './hooks';\n\n// Export components\nexport {\n  FeedbackWidget,\n  RoadmapWidget,\n  ChangelogWidget,\n  type FeedbackWidgetProps,\n  type RoadmapWidgetProps,\n  type ChangelogWidgetProps,\n} from './components';\n\n// Re-export functions from the base widget package\nexport { \n  createFeedbackWidget,\n  createRoadmapWidget,\n  createChangelogWidget,\n  createWidget,\n} from '@squeletteapp/widget';", "import { useEffect, useRef, useCallback } from 'react';\nimport { \n  createFeedbackWidget, \n  createRoadmapWidget, \n  createChangelogWidget,\n  createWidget\n} from '@squeletteapp/widget';\n\nexport interface WidgetOptions {\n  buttonSelector: string;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  theme?: string;\n  onLoad?: () => void;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport interface WidgetInstance {\n  destroy: () => void;\n}\n\nexport function useFeedbackWidget(\n  workspaceSlug: string,\n  boardSlug: string | undefined,\n  options: WidgetOptions\n): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createFeedbackWidget(workspaceSlug, boardSlug, options);\n    return widgetRef.current;\n  }, [workspaceSlug, boardSlug, options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}\n\nexport function useRoadmapWidget(\n  workspaceSlug: string,\n  boardSlug: string,\n  options: WidgetOptions\n): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createRoadmapWidget(workspaceSlug, boardSlug, options);\n    return widgetRef.current;\n  }, [workspaceSlug, boardSlug, options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}\n\nexport function useChangelogWidget(\n  workspaceSlug: string,\n  options: WidgetOptions\n): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createChangelogWidget(workspaceSlug, options);\n    return widgetRef.current;\n  }, [workspaceSlug, options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}\n\nexport function useWidget(options: {\n  url: string;\n  buttonSelector: string;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  onLoad?: () => void;\n  onOpenChange?: (isOpen: boolean) => void;\n}): WidgetInstance | null {\n  const widgetRef = useRef<WidgetInstance | null>(null);\n\n  const initWidget = useCallback(() => {\n    if (widgetRef.current) {\n      widgetRef.current.destroy();\n    }\n    \n    widgetRef.current = createWidget(options);\n    return widgetRef.current;\n  }, [options]);\n\n  useEffect(() => {\n    const widget = initWidget();\n    \n    return () => {\n      if (widget) {\n        widget.destroy();\n      }\n    };\n  }, [initWidget]);\n\n  return widgetRef.current;\n}", "import React, { useId } from 'react';\nimport { useFeedbackWidget, useRoadmapWidget, useChangelogWidget, WidgetOptions } from './hooks';\n\nexport interface FeedbackWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {\n  workspaceSlug: string;\n  boardSlug?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface RoadmapWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {\n  workspaceSlug: string;\n  boardSlug: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface ChangelogWidgetProps extends Omit<WidgetOptions, 'buttonSelector'> {\n  workspaceSlug: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function FeedbackWidget({\n  workspaceSlug,\n  boardSlug,\n  children,\n  className,\n  ...options\n}: FeedbackWidgetProps) {\n  const buttonId = useId();\n\n  const widget = useFeedbackWidget(workspaceSlug, boardSlug, {\n    ...options,\n    buttonSelector: `#${buttonId}`,\n  });\n\n  return (\n    <button\n      id={buttonId}\n      className={className}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function RoadmapWidget({\n  workspaceSlug,\n  boardSlug,\n  children,\n  className,\n  ...options\n}: RoadmapWidgetProps) {\n  const buttonId = useId();\n\n  const widget = useRoadmapWidget(workspaceSlug, boardSlug, {\n    ...options,\n    buttonSelector: `#${buttonId}`,\n  });\n\n  return (\n    <button\n      id={buttonId}\n      className={className}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function ChangelogWidget({\n  workspaceSlug,\n  children,\n  className,\n  ...options\n}: ChangelogWidgetProps) {\n  const buttonId = useId();\n\n  const widget = useChangelogWidget(workspaceSlug, {\n    ...options,\n    buttonSelector: `#${buttonId}`,\n  });\n\n  return (\n    <button\n      id={buttonId}\n      className={className}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}"],
+  "mappings": "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",
+  "names": ["import_react", "import_widget"]
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@squeletteapp/widget-react",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "React components and hooks for Squelette widgets",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && node build.js",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build",
+    "publish:widget-react": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "dependencies": {
+    "@squeletteapp/widget": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "esbuild": "^0.21.5",
+    "typescript": "^5.8.3"
+  },
+  "keywords": [
+    "react",
+    "widget",
+    "feedback",
+    "squelette"
+  ],
+  "author": "Squelette",
+  "license": "MIT"
+}