feedback-vos 1.0.0

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 (10) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +309 -0
  3. package/dist/index.d.mts +21 -0
  4. package/dist/index.d.ts +21 -0
  5. package/dist/index.js +393 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +387 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/styles.css +848 -0
  10. package/package.json +59 -0
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Klaas Sysop
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
package/README.md ADDED
@@ -0,0 +1,309 @@
1
+ # Feedback Vos
2
+
3
+ A beautiful, customizable feedback widget for Next.js applications with built-in integrations for Notion and GitHub Issues.
4
+
5
+ ## Features
6
+
7
+ - 🎨 Modern and responsive design
8
+ - 📸 Screenshot functionality
9
+ - 🎯 Three feedback types: Bug, Idea, Other
10
+ - âš¡ Built for Next.js 14+ (App Router)
11
+ - 🎨 Tailwind CSS styling
12
+ - 📱 Mobile-friendly
13
+ - 🔄 Real-time feedback submission
14
+ - 🔌 Built-in integrations:
15
+ - **Notion API** - Send feedback directly to your Notion database
16
+ - **GitHub Issues** - Create issues automatically from feedback
17
+
18
+ ## Installation
19
+
20
+ ```bash
21
+ npm install feedback-vos
22
+ # or
23
+ yarn add feedback-vos
24
+ # or
25
+ pnpm add feedback-vos
26
+ ```
27
+
28
+ ## Quick Start
29
+
30
+ ### 1. Import the Widget
31
+
32
+ ```tsx
33
+ import { Widget } from 'feedback-vos';
34
+ import 'feedback-vos/styles';
35
+ ```
36
+
37
+ ### 2. Add to your Layout
38
+
39
+ ```tsx
40
+ // app/layout.tsx
41
+ import { Widget } from 'feedback-vos';
42
+ import 'feedback-vos/styles';
43
+
44
+ export default function RootLayout({
45
+ children,
46
+ }: {
47
+ children: React.ReactNode;
48
+ }) {
49
+ return (
50
+ <html lang="en">
51
+ <body>
52
+ {children}
53
+ <Widget
54
+ integration="notion"
55
+ notionConfig={{
56
+ apiKey: process.env.NEXT_PUBLIC_NOTION_API_KEY!,
57
+ databaseId: process.env.NEXT_PUBLIC_NOTION_DATABASE_ID!,
58
+ }}
59
+ />
60
+ </body>
61
+ </html>
62
+ );
63
+ }
64
+ ```
65
+
66
+ ## Configuration
67
+
68
+ ### Notion Integration
69
+
70
+ 1. **Create a Notion Integration:**
71
+ - Go to https://www.notion.so/my-integrations
72
+ - Click "New integration"
73
+ - Give it a name and select your workspace
74
+ - Copy the "Internal Integration Token"
75
+
76
+ 2. **Create a Notion Database:**
77
+ Create a database with the following properties:
78
+ - `Type` (Select property): Options should be `Bug`, `Idea`, `Other`
79
+ - `Comment` (Rich Text property)
80
+ - `Screenshot` (Files & Media property) - Optional
81
+ - `Created At` (Created Time property) - Optional but recommended
82
+
83
+ 3. **Share the database with your integration:**
84
+ - Open your database
85
+ - Click "..." in the top right
86
+ - Select "Add connections"
87
+ - Choose your integration
88
+
89
+ 4. **Get your Database ID:**
90
+ - Open your database in Notion
91
+ - The URL will look like: `https://www.notion.so/workspace/DATABASE_ID?v=...`
92
+ - Copy the `DATABASE_ID` (32 character hex string)
93
+
94
+ 5. **Configure in your app:**
95
+ ```tsx
96
+ <Widget
97
+ integration="notion"
98
+ notionConfig={{
99
+ apiKey: process.env.NEXT_PUBLIC_NOTION_API_KEY!,
100
+ databaseId: process.env.NEXT_PUBLIC_NOTION_DATABASE_ID!,
101
+ }}
102
+ />
103
+ ```
104
+
105
+ ### GitHub Integration
106
+
107
+ 1. **Create a GitHub Personal Access Token:**
108
+ - Go to https://github.com/settings/tokens
109
+ - Click "Generate new token (classic)"
110
+ - Give it a name and select scope: `repo` (for private repos) or `public_repo` (for public repos)
111
+ - Copy the token
112
+
113
+ 2. **Configure in your app:**
114
+ ```tsx
115
+ <Widget
116
+ integration="github"
117
+ githubConfig={{
118
+ token: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
119
+ owner: 'your-username',
120
+ repo: 'your-repo-name',
121
+ }}
122
+ />
123
+ ```
124
+
125
+ ## API Reference
126
+
127
+ ### Widget Props
128
+
129
+ ```typescript
130
+ interface WidgetProps {
131
+ integration: 'notion' | 'github';
132
+ notionConfig?: NotionConfig;
133
+ githubConfig?: GitHubConfig;
134
+ position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
135
+ }
136
+
137
+ interface NotionConfig {
138
+ apiKey: string;
139
+ databaseId: string;
140
+ }
141
+
142
+ interface GitHubConfig {
143
+ token: string;
144
+ owner: string;
145
+ repo: string;
146
+ }
147
+ ```
148
+
149
+ ### Position Options
150
+
151
+ - `bottom-right` (default) - Bottom right corner
152
+ - `bottom-left` - Bottom left corner
153
+ - `top-right` - Top right corner
154
+ - `top-left` - Top left corner
155
+
156
+ ## Examples
157
+
158
+ ### Notion Integration
159
+
160
+ ```tsx
161
+ import { Widget } from 'feedback-vos';
162
+ import 'feedback-vos/styles';
163
+
164
+ export default function Layout({ children }: { children: React.ReactNode }) {
165
+ return (
166
+ <html>
167
+ <body>
168
+ {children}
169
+ <Widget
170
+ integration="notion"
171
+ notionConfig={{
172
+ apiKey: process.env.NEXT_PUBLIC_NOTION_API_KEY!,
173
+ databaseId: process.env.NEXT_PUBLIC_NOTION_DATABASE_ID!,
174
+ }}
175
+ position="bottom-right"
176
+ />
177
+ </body>
178
+ </html>
179
+ );
180
+ }
181
+ ```
182
+
183
+ ### GitHub Integration
184
+
185
+ ```tsx
186
+ import { Widget } from 'feedback-vos';
187
+ import 'feedback-vos/styles';
188
+
189
+ export default function Layout({ children }: { children: React.ReactNode }) {
190
+ return (
191
+ <html>
192
+ <body>
193
+ {children}
194
+ <Widget
195
+ integration="github"
196
+ githubConfig={{
197
+ token: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
198
+ owner: 'klaas-sysop',
199
+ repo: 'my-project',
200
+ }}
201
+ position="bottom-left"
202
+ />
203
+ </body>
204
+ </html>
205
+ );
206
+ }
207
+ ```
208
+
209
+ ## Environment Variables
210
+
211
+ Add these to your `.env.local` file:
212
+
213
+ ```env
214
+ # For Notion
215
+ NEXT_PUBLIC_NOTION_API_KEY=secret_...
216
+ NEXT_PUBLIC_NOTION_DATABASE_ID=...
217
+
218
+ # For GitHub
219
+ NEXT_PUBLIC_GITHUB_TOKEN=ghp_...
220
+ ```
221
+
222
+ **Note:** Since these are `NEXT_PUBLIC_` variables, they will be exposed to the client. For production, consider using a backend API route to handle the integrations server-side.
223
+
224
+ ## Styling
225
+
226
+ The widget uses Tailwind CSS. Make sure Tailwind is configured in your Next.js project. The widget styles are automatically included when you import `'feedback-vos/styles'`.
227
+
228
+ ### Custom Colors
229
+
230
+ You can customize the brand colors by overriding Tailwind classes in your global CSS:
231
+
232
+ ```css
233
+ /* app/globals.css */
234
+ @tailwind base;
235
+ @tailwind components;
236
+ @tailwind utilities;
237
+
238
+ /* Override brand colors */
239
+ .bg-brand-500 {
240
+ background-color: #your-color;
241
+ }
242
+ ```
243
+
244
+ ## TypeScript Support
245
+
246
+ This package includes TypeScript definitions. No additional setup required.
247
+
248
+ ## Requirements
249
+
250
+ - Next.js 14+
251
+ - React 18+
252
+ - Tailwind CSS (should already be in your Next.js project)
253
+
254
+ ## Contributing
255
+
256
+ Contributions are welcome! Please feel free to submit a Pull Request.
257
+
258
+ ## License
259
+
260
+ MIT License - see LICENSE file for details.
261
+
262
+ ## Publishing
263
+
264
+ This package is ready to be published to npm. To publish:
265
+
266
+ 1. **Ensure you're logged in to npm:**
267
+ ```bash
268
+ npm login
269
+ ```
270
+
271
+ 2. **Verify the build works:**
272
+ ```bash
273
+ npm run build
274
+ ```
275
+ This will generate the `dist/` folder with all necessary files.
276
+
277
+ 3. **Check what will be published:**
278
+ ```bash
279
+ npm pack --dry-run
280
+ ```
281
+ This shows exactly which files will be included in the package.
282
+
283
+ 4. **Publish to npm:**
284
+ ```bash
285
+ npm publish
286
+ ```
287
+
288
+ For the first publish, the package will be public by default. If you need to explicitly set access:
289
+ ```bash
290
+ npm publish --access public
291
+ ```
292
+
293
+ 5. **Update version for subsequent releases:**
294
+ ```bash
295
+ npm version patch # for bug fixes (1.0.0 -> 1.0.1)
296
+ npm version minor # for new features (1.0.0 -> 1.1.0)
297
+ npm version major # for breaking changes (1.0.0 -> 2.0.0)
298
+ npm publish
299
+ ```
300
+
301
+ The `prepublishOnly` script in `package.json` will automatically run the build before publishing, ensuring the latest code is included.
302
+
303
+ ## Support
304
+
305
+ For issues, questions, or feature requests, please open an issue on [GitHub](https://github.com/klaas-sysop/npm-feedback-vos).
306
+
307
+ ---
308
+
309
+ Built with 💜 by [Klaas Sysop](https://github.com/klaas-sysop)
package/dist/index.d.mts ADDED
@@ -0,0 +1,21 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ interface NotionConfig {
4
+ apiKey: string;
5
+ databaseId: string;
6
+ }
7
+ interface GitHubConfig {
8
+ token: string;
9
+ owner: string;
10
+ repo: string;
11
+ }
12
+ interface WidgetProps {
13
+ integration: 'notion' | 'github';
14
+ notionConfig?: NotionConfig;
15
+ githubConfig?: GitHubConfig;
16
+ position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
17
+ }
18
+
19
+ declare function Widget({ integration, notionConfig, githubConfig, position }: WidgetProps): react_jsx_runtime.JSX.Element;
20
+
21
+ export { type GitHubConfig, type NotionConfig, Widget, type WidgetProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ interface NotionConfig {
4
+ apiKey: string;
5
+ databaseId: string;
6
+ }
7
+ interface GitHubConfig {
8
+ token: string;
9
+ owner: string;
10
+ repo: string;
11
+ }
12
+ interface WidgetProps {
13
+ integration: 'notion' | 'github';
14
+ notionConfig?: NotionConfig;
15
+ githubConfig?: GitHubConfig;
16
+ position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
17
+ }
18
+
19
+ declare function Widget({ integration, notionConfig, githubConfig, position }: WidgetProps): react_jsx_runtime.JSX.Element;
20
+
21
+ export { type GitHubConfig, type NotionConfig, Widget, type WidgetProps };