@openfeed-ink/widget 0.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.
Files changed (43) hide show
  1. package/LICENSE +661 -0
  2. package/README.md +141 -0
  3. package/dist/npm/AnnouncementBanner-BPo8Jmax.js +75 -0
  4. package/dist/npm/App.d.ts +5 -0
  5. package/dist/npm/ChangelogTab-DBQ5Ip6K.js +18 -0
  6. package/dist/npm/DrawerType-D9YHimv7.js +1184 -0
  7. package/dist/npm/FeatureDialog-BU1c2n3F.js +31 -0
  8. package/dist/npm/FeedbackTab-V7VCrze1.js +71 -0
  9. package/dist/npm/Main.d.ts +5 -0
  10. package/dist/npm/PopoverType-DlyRog2q.js +1863 -0
  11. package/dist/npm/RoadmapTab-DOYJBpgd.js +18 -0
  12. package/dist/npm/WidgetContent-Bs4eY5OF.js +507 -0
  13. package/dist/npm/button-Q2Dh1yK6.js +3086 -0
  14. package/dist/npm/components/AnnouncementBanner.d.ts +4 -0
  15. package/dist/npm/components/ChangelogTab.d.ts +6 -0
  16. package/dist/npm/components/FeatureDialog.d.ts +5 -0
  17. package/dist/npm/components/FeedbackTab.d.ts +8 -0
  18. package/dist/npm/components/NewFeedback.d.ts +9 -0
  19. package/dist/npm/components/RoadmapTab.d.ts +6 -0
  20. package/dist/npm/components/WidgetContent.d.ts +8 -0
  21. package/dist/npm/components/theme-provider.d.ts +8 -0
  22. package/dist/npm/components/triggerType/DrawerType.d.ts +11 -0
  23. package/dist/npm/components/triggerType/PopoverType.d.ts +11 -0
  24. package/dist/npm/components/ui/button.d.ts +10 -0
  25. package/dist/npm/components/ui/dialog.d.ts +11 -0
  26. package/dist/npm/components/ui/drawer.d.ts +10 -0
  27. package/dist/npm/components/ui/popover.d.ts +7 -0
  28. package/dist/npm/components/ui/tabs.d.ts +11 -0
  29. package/dist/npm/context/outsideEvent.d.ts +17 -0
  30. package/dist/npm/context/shadow-root.d.ts +5 -0
  31. package/dist/npm/dialog-5J_RZfbt.js +107 -0
  32. package/dist/npm/hooks/use-local-storage.d.ts +1 -0
  33. package/dist/npm/index-BaBFRQOq.js +1043 -0
  34. package/dist/npm/index-BkmaVINv.js +334 -0
  35. package/dist/npm/index-MTTUickr.js +237 -0
  36. package/dist/npm/index.d.ts +2 -0
  37. package/dist/npm/index.js +6 -0
  38. package/dist/npm/lib/utils.d.ts +2 -0
  39. package/dist/npm/mount.d.ts +7 -0
  40. package/dist/npm/react/OpenFeed.d.ts +7 -0
  41. package/dist/npm/types/index.d.ts +31 -0
  42. package/dist/npm/x-BkA0RvhX.js +9 -0
  43. package/package.json +95 -0
package/README.md ADDED
@@ -0,0 +1,141 @@
1
+ # @openfeed/widget
2
+
3
+ **Embeddable feedback, roadmap and changelog widget.**
4
+ Part of [OpenFeed](https://openfeed.ink) — the open source alternative to Canny and Frill.
5
+
6
+ [![npm](https://img.shields.io/npm/v/@openfeed/widget?color=6366f1)](https://www.npmjs.com/package/@openfeed-ink/widget)
7
+ [![npm downloads](https://img.shields.io/npm/dm/@openfeed/widget?color=6366f1)](https://www.npmjs.com/package/@openfeed-ink/widget)
8
+
9
+ ---
10
+
11
+ ## Install
12
+
13
+ ```bash
14
+ npm install @openfeed/widget
15
+ # or
16
+ pnpm add @openfeed/widget
17
+ # or
18
+ yarn add @openfeed/widget
19
+ ```
20
+
21
+ **Prefer a script tag?**
22
+ ```html
23
+ <script async src="https://cdn.openfeed.ink/widget/v1/widget.iife.js" data-project-id="your-project-id"></script>
24
+ ```
25
+
26
+ ---
27
+
28
+ ## Usage
29
+
30
+ ### React
31
+
32
+ ```tsx
33
+ import { OpenFeed } from '@openfeed-ink/widget'
34
+
35
+ export default function App() {
36
+ return (
37
+ <>
38
+ <YourApp />
39
+ <OpenFeed projectId="your-project-id" />
40
+ </>
41
+ )
42
+ }
43
+ ```
44
+
45
+ ### Next.js
46
+
47
+ ```tsx
48
+ // app/layout.tsx
49
+ import { OpenFeed } from '@openfeed-ink/widget'
50
+
51
+ export default function RootLayout({ children }) {
52
+ return (
53
+ <html>
54
+ <body>
55
+ {children}
56
+ <OpenFeed projectId="your-project-id" />
57
+ </body>
58
+ </html>
59
+ )
60
+ }
61
+ ```
62
+
63
+ ### Plain HTML / Any framework
64
+
65
+ ```html
66
+ <script
67
+ async
68
+ src="https://cdn.openfeed.ink/widget/v1/widget.iife.js"
69
+ data-project-id="your-project-id">
70
+ </script>
71
+ ```
72
+
73
+ ---
74
+
75
+ ## What it includes
76
+
77
+ One widget. Three tabs. All customizable from your dashboard — no code changes needed.
78
+
79
+ | Tab | What it does |
80
+ |---|---|
81
+ | 💬 Feedback | Users submit, upvote feature requests and write comments |
82
+ | 🗺️ Roadmap | Users see what's Planned / In Progress / Done |
83
+ | 📣 Changelog | Users see your latest updates with notification dot |
84
+
85
+ Enable or disable each tab from your OpenFeed dashboard.
86
+
87
+ ---
88
+
89
+ ## How customization works
90
+
91
+ You **never edit code** to change how the widget looks or behaves.
92
+
93
+ 1. Go to your OpenFeed dashboard → Widget Settings
94
+ 2. Change colors, theme, button position, which tabs to show
95
+ 3. Click Save
96
+ 4. Widget updates instantly in your app
97
+
98
+ The `projectId` prop is the only thing that never changes.
99
+
100
+ ---
101
+
102
+ ## Props
103
+
104
+ | Prop | Type | Required | Description |
105
+ |---|---|---|---|
106
+ | `projectId` | `string` | ✅ | Your project slug from OpenFeed dashboard |
107
+
108
+ All other configuration (colors, theme, position, enabled tabs) is managed from your dashboard.
109
+
110
+ ---
111
+
112
+ ## TypeScript
113
+
114
+ Fully typed. No `@types` package needed.
115
+
116
+ ```tsx
117
+ import { OpenFeed } from '@openfeed-ink/widget'
118
+ // Types are included — no extra install required
119
+ ```
120
+
121
+ ---
122
+
123
+ ## Shadow DOM isolation
124
+
125
+ The widget renders inside a Shadow DOM container. This means:
126
+
127
+ - ✅ Widget styles never affect your app
128
+ - ✅ Your app styles never affect the widget
129
+ - ✅ Works in any framework — React, Vue, Svelte, plain HTML
130
+ - ✅ No CSS conflicts, ever
131
+
132
+ ---
133
+
134
+ ## Get started
135
+
136
+ 1. Create a free account at [openfeed.ink](https://openfeed.ink)
137
+ 2. Create a project and copy your project slug
138
+ 3. Install this package and add `<OpenFeed projectId="your-project-id" />`
139
+ 4. Customize everything from your dashboard
140
+
141
+ **Or self-host OpenFeed for free** → [github.com/OpenFeed-ink/openfeed](https://github.com/OpenFeed-ink/openfeed)
package/dist/npm/AnnouncementBanner-BPo8Jmax.js ADDED
@@ -0,0 +1,75 @@
1
+ "use client";
2
+ import { jsx as e, jsxs as t } from "react/jsx-runtime";
3
+ import { useState as p } from "react";
4
+ import { B as i, c as f } from "./button-Q2Dh1yK6.js";
5
+ import { c as u } from "./index-BkmaVINv.js";
6
+ import { X as x } from "./x-BkA0RvhX.js";
7
+ const b = [
8
+ [
9
+ "path",
10
+ {
11
+ d: "M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z",
12
+ key: "q8bfy3"
13
+ }
14
+ ],
15
+ ["path", { d: "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14", key: "1853fq" }],
16
+ ["path", { d: "M8 6v8", key: "15ugcq" }]
17
+ ], g = u("megaphone", b);
18
+ function z({
19
+ announcement: a
20
+ }) {
21
+ const [n, r] = p(!0), { position: o, text: l, link: s, dismiss: c, bgcolor: m, textcolor: d } = a, h = () => {
22
+ r(!1);
23
+ };
24
+ return n ? /* @__PURE__ */ e(
25
+ "div",
26
+ {
27
+ className: f(
28
+ "fixed right-0 left-0 z-40 animate-in duration-300 fade-in",
29
+ o === "top" ? "top-0" : "bottom-0"
30
+ ),
31
+ style: { backgroundColor: m, color: d },
32
+ children: /* @__PURE__ */ e("div", { className: "container mx-auto px-4 py-3", children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-4 rounded-lg bg-inherit backdrop-blur-sm", children: [
33
+ /* @__PURE__ */ t("div", { className: "flex flex-1 items-center gap-3 px-4 py-2", children: [
34
+ /* @__PURE__ */ e(g, { className: "h-5 w-5 shrink-0 opacity-80" }),
35
+ /* @__PURE__ */ e("span", { className: "text-sm font-medium md:text-base", children: l })
36
+ ] }),
37
+ /* @__PURE__ */ t("div", { className: "flex items-center gap-2 pr-2", children: [
38
+ s && /* @__PURE__ */ e(
39
+ i,
40
+ {
41
+ variant: "link",
42
+ size: "sm",
43
+ className: "h-8 text-xs md:text-sm",
44
+ asChild: !0,
45
+ children: /* @__PURE__ */ e(
46
+ "a",
47
+ {
48
+ href: s,
49
+ target: "_blank",
50
+ rel: "noopener noreferrer",
51
+ style: { color: "inherit" },
52
+ children: a.actionBtn || "Learn more"
53
+ }
54
+ )
55
+ }
56
+ ),
57
+ c && /* @__PURE__ */ e(
58
+ i,
59
+ {
60
+ variant: "ghost",
61
+ size: "icon",
62
+ onClick: h,
63
+ className: "h-8 w-8 rounded-full",
64
+ "aria-label": "Dismiss announcement",
65
+ children: /* @__PURE__ */ e(x, { className: "h-4 w-4" })
66
+ }
67
+ )
68
+ ] })
69
+ ] }) })
70
+ }
71
+ ) : null;
72
+ }
73
+ export {
74
+ z as default
75
+ };
package/dist/npm/App.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { Config, WidgetConfig } from './types';
2
+ export default function App({ config, widgetConfig }: {
3
+ config: Config;
4
+ widgetConfig: WidgetConfig;
5
+ }): import("react/jsx-runtime").JSX.Element;
package/dist/npm/ChangelogTab-DBQ5Ip6K.js ADDED
@@ -0,0 +1,18 @@
1
+ "use client";
2
+ import { jsx as l } from "react/jsx-runtime";
3
+ import { u as s } from "./index-BkmaVINv.js";
4
+ function m(e) {
5
+ const { iframeKey: r, ready: a, setReady: t } = s();
6
+ return /* @__PURE__ */ l("div", { className: "flex h-full w-full", children: /* @__PURE__ */ l(
7
+ "iframe",
8
+ {
9
+ src: `${e.apiUrl}/pub/${e.projectId}/changelog?theme=${e.theme}`,
10
+ className: "h-full w-full border-0",
11
+ onLoad: () => !a && t(!0)
12
+ },
13
+ r
14
+ ) });
15
+ }
16
+ export {
17
+ m as default
18
+ };