npm - feedback-vos - Versions diffs - 1.0.0 → 1.0.1 - Mend

feedback-vos 1.0.0 → 1.0.1

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

package/LICENSE CHANGED Viewed

@@ -1,22 +1,22 @@
-MIT License
-Copyright (c) 2024 Klaas Sysop
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+Copyright (c) 2024 Klaas Sysop
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md CHANGED Viewed

@@ -1,309 +1,103 @@
-# Feedback Vos
-A beautiful, customizable feedback widget for Next.js applications with built-in integrations for Notion and GitHub Issues.
-## Features
-- 🎨 Modern and responsive design
-- 📸 Screenshot functionality
-- 🎯 Three feedback types: Bug, Idea, Other
-- ⚡ Built for Next.js 14+ (App Router)
-- 🎨 Tailwind CSS styling
-- 📱 Mobile-friendly
-- 🔄 Real-time feedback submission
-- 🔌 Built-in integrations:
-  - **Notion API** - Send feedback directly to your Notion database
-  - **GitHub Issues** - Create issues automatically from feedback
-## Installation
-```bash
-npm install feedback-vos
-# or
-yarn add feedback-vos
-# or
-pnpm add feedback-vos
-```
-## Quick Start
-### 1. Import the Widget
-```tsx
-import { Widget } from 'feedback-vos';
-import 'feedback-vos/styles';
-```
-### 2. Add to your Layout
-```tsx
-// app/layout.tsx
-import { Widget } from 'feedback-vos';
-import 'feedback-vos/styles';
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>
-        {children}
-        <Widget
-          integration="notion"
-          notionConfig={{
-            apiKey: process.env.NEXT_PUBLIC_NOTION_API_KEY!,
-            databaseId: process.env.NEXT_PUBLIC_NOTION_DATABASE_ID!,
-          }}
-        />
-      </body>
-    </html>
-  );
-}
-```
-## Configuration
-### Notion Integration
-1. **Create a Notion Integration:**
-   - Go to https://www.notion.so/my-integrations
-   - Click "New integration"
-   - Give it a name and select your workspace
-   - Copy the "Internal Integration Token"
-2. **Create a Notion Database:**
-   Create a database with the following properties:
-   - `Type` (Select property): Options should be `Bug`, `Idea`, `Other`
-   - `Comment` (Rich Text property)
-   - `Screenshot` (Files & Media property) - Optional
-   - `Created At` (Created Time property) - Optional but recommended
-3. **Share the database with your integration:**
-   - Open your database
-   - Click "..." in the top right
-   - Select "Add connections"
-   - Choose your integration
-4. **Get your Database ID:**
-   - Open your database in Notion
-   - The URL will look like: `https://www.notion.so/workspace/DATABASE_ID?v=...`
-   - Copy the `DATABASE_ID` (32 character hex string)
-5. **Configure in your app:**
-   ```tsx
-   <Widget
-     integration="notion"
-     notionConfig={{
-       apiKey: process.env.NEXT_PUBLIC_NOTION_API_KEY!,
-       databaseId: process.env.NEXT_PUBLIC_NOTION_DATABASE_ID!,
-     }}
-   />
-   ```
-### GitHub Integration
-1. **Create a GitHub Personal Access Token:**
-   - Go to https://github.com/settings/tokens
-   - Click "Generate new token (classic)"
-   - Give it a name and select scope: `repo` (for private repos) or `public_repo` (for public repos)
-   - Copy the token
-2. **Configure in your app:**
-   ```tsx
-   <Widget
-     integration="github"
-     githubConfig={{
-       token: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
-       owner: 'your-username',
-       repo: 'your-repo-name',
-     }}
-   />
-   ```
-## API Reference
-### Widget Props
-```typescript
-interface WidgetProps {
-  integration: 'notion' | 'github';
-  notionConfig?: NotionConfig;
-  githubConfig?: GitHubConfig;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-}
-interface NotionConfig {
-  apiKey: string;
-  databaseId: string;
-}
-interface GitHubConfig {
-  token: string;
-  owner: string;
-  repo: string;
-}
-```
-### Position Options
-- `bottom-right` (default) - Bottom right corner
-- `bottom-left` - Bottom left corner
-- `top-right` - Top right corner
-- `top-left` - Top left corner
-## Examples
-### Notion Integration
-```tsx
-import { Widget } from 'feedback-vos';
-import 'feedback-vos/styles';
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <Widget
-          integration="notion"
-          notionConfig={{
-            apiKey: process.env.NEXT_PUBLIC_NOTION_API_KEY!,
-            databaseId: process.env.NEXT_PUBLIC_NOTION_DATABASE_ID!,
-          }}
-          position="bottom-right"
-        />
-      </body>
-    </html>
-  );
-}
-```
-### GitHub Integration
-```tsx
-import { Widget } from 'feedback-vos';
-import 'feedback-vos/styles';
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <Widget
-          integration="github"
-          githubConfig={{
-            token: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
-            owner: 'klaas-sysop',
-            repo: 'my-project',
-          }}
-          position="bottom-left"
-        />
-      </body>
-    </html>
-  );
-}
-```
-## Environment Variables
-Add these to your `.env.local` file:
-```env
-# For Notion
-NEXT_PUBLIC_NOTION_API_KEY=secret_...
-NEXT_PUBLIC_NOTION_DATABASE_ID=...
-# For GitHub
-NEXT_PUBLIC_GITHUB_TOKEN=ghp_...
-```
-**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.
-## Styling
-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'`.
-### Custom Colors
-You can customize the brand colors by overriding Tailwind classes in your global CSS:
-```css
-/* app/globals.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/* Override brand colors */
-.bg-brand-500 {
-  background-color: #your-color;
-}
-```
-## TypeScript Support
-This package includes TypeScript definitions. No additional setup required.
-## Requirements
-- Next.js 14+
-- React 18+
-- Tailwind CSS (should already be in your Next.js project)
-## Contributing
-Contributions are welcome! Please feel free to submit a Pull Request.
-## License
-MIT License - see LICENSE file for details.
-## Publishing
-This package is ready to be published to npm. To publish:
-1. **Ensure you're logged in to npm:**
-   ```bash
-   npm login
-   ```
-2. **Verify the build works:**
-   ```bash
-   npm run build
-   ```
-   This will generate the `dist/` folder with all necessary files.
-3. **Check what will be published:**
-   ```bash
-   npm pack --dry-run
-   ```
-   This shows exactly which files will be included in the package.
-4. **Publish to npm:**
-   ```bash
-   npm publish
-   ```
-   For the first publish, the package will be public by default. If you need to explicitly set access:
-   ```bash
-   npm publish --access public
-   ```
-5. **Update version for subsequent releases:**
-   ```bash
-   npm version patch  # for bug fixes (1.0.0 -> 1.0.1)
-   npm version minor  # for new features (1.0.0 -> 1.1.0)
-   npm version major  # for breaking changes (1.0.0 -> 2.0.0)
-   npm publish
-   ```
-The `prepublishOnly` script in `package.json` will automatically run the build before publishing, ensuring the latest code is included.
-## Support
-For issues, questions, or feature requests, please open an issue on [GitHub](https://github.com/klaas-sysop/npm-feedback-vos).
----
-Built with 💜 by [Klaas Sysop](https://github.com/klaas-sysop)
+# Feedback Vos
+A beautiful, customizable feedback widget for Next.js applications with built-in GitHub Issues integration.
+## Features
+- 🎨 Modern and responsive design
+- 📸 Screenshot functionality
+- 🎯 Three feedback types: Bug, Idea, Other
+- ⚡ Built for Next.js 14+ (App Router)
+- 🔌 Automatic GitHub Issues creation
+## Installation
+```bash
+npm install feedback-vos
+```
+## Quick Start
+```tsx
+// app/layout.tsx
+import { Widget } from 'feedback-vos';
+import 'feedback-vos/styles';
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Widget
+          integration="github"
+          githubConfig={{
+            token: process.env.NEXT_PUBLIC_GITHUB_TOKEN!,
+            owner: process.env.NEXT_PUBLIC_GITHUB_OWNER!,
+            repo: process.env.NEXT_PUBLIC_GITHUB_REPO!,
+          }}
+          position="bottom-right"
+        />
+      </body>
+    </html>
+  );
+}
+```
+## Configuration
+### GitHub Setup
+1. Create a GitHub Personal Access Token at https://github.com/settings/tokens with `repo` (private) or `public_repo` (public) scope and issue permissions
+2. Add to `.env.local`:
+   ```env
+   NEXT_PUBLIC_GITHUB_TOKEN=your_github_token_here
+   NEXT_PUBLIC_GITHUB_OWNER=your-username
+   NEXT_PUBLIC_GITHUB_REPO=your-repo-name
+   NEXT_PUBLIC_FEEDBACK_POSITION=bottom-right  # optional: bottom-left
+   ```
+**Important:** `owner` and `repo` are case-sensitive. Ensure Issues are enabled in your repository.
+## API Reference
+```typescript
+interface WidgetProps {
+  integration: 'github';
+  githubConfig: {
+    token: string;
+    owner: string;
+    repo: string;
+    screenshotPath?: string; // default: '.feedback-vos'
+  };
+  position?: 'bottom-right' | 'bottom-left';
+}
+```
+## How It Works
+When feedback is submitted:
+1. Feedback type and comment are captured
+2. Screenshots are compressed and uploaded to `.feedback-vos/` in your repo
+3. A GitHub issue is created with labels `feedback` and the feedback type
+**Note:** Labels must exist in your repository. Screenshots are stored in your repo (no size limits).
+## Troubleshooting
+- **404:** Check repository exists, case-sensitive `owner/repo`, token access, Issues enabled
+- **401:** Invalid/expired token or missing scope
+- **403:** No issue permissions, Issues disabled, or rate limit exceeded
+## Requirements
+- Next.js 14+
+- React 18+
+- Tailwind CSS
+## License
+MIT License
+---
+Built with 💜 by [Klaas Sysop](https://github.com/klaas-sysop)

package/dist/index.d.mts CHANGED Viewed

@@ -1,21 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-interface NotionConfig {
-    apiKey: string;
-    databaseId: string;
-}
 interface GitHubConfig {
     token: string;
     owner: string;
     repo: string;
+    screenshotPath?: string;
 }
 interface WidgetProps {
-    integration: 'notion' | 'github';
-    notionConfig?: NotionConfig;
-    githubConfig?: GitHubConfig;
+    integration: 'github';
+    githubConfig: GitHubConfig;
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
-declare function Widget({ integration, notionConfig, githubConfig, position }: WidgetProps): react_jsx_runtime.JSX.Element;
+declare function Widget({ integration, githubConfig, position }: WidgetProps): react_jsx_runtime.JSX.Element;
-export { type GitHubConfig, type NotionConfig, Widget, type WidgetProps };
+export { type GitHubConfig, Widget, type WidgetProps };

package/dist/index.d.ts CHANGED Viewed

@@ -1,21 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-interface NotionConfig {
-    apiKey: string;
-    databaseId: string;
-}
 interface GitHubConfig {
     token: string;
     owner: string;
     repo: string;
+    screenshotPath?: string;
 }
 interface WidgetProps {
-    integration: 'notion' | 'github';
-    notionConfig?: NotionConfig;
-    githubConfig?: GitHubConfig;
+    integration: 'github';
+    githubConfig: GitHubConfig;
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
-declare function Widget({ integration, notionConfig, githubConfig, position }: WidgetProps): react_jsx_runtime.JSX.Element;
+declare function Widget({ integration, githubConfig, position }: WidgetProps): react_jsx_runtime.JSX.Element;
-export { type GitHubConfig, type NotionConfig, Widget, type WidgetProps };
+export { type GitHubConfig, Widget, type WidgetProps };