@rensblitz/customer-instant-feedback-app 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rens Blitz
+
+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

@@ -0,0 +1,179 @@
+# Customer Instant Feedback App
+
+A React component library for collecting user feedback directly within your application.
+
+## Features
+
+-   Capture screenshots with feedback
+-   Annotate specific elements
+-   Categorize feedback (Bug, UX, Content, Other)
+-   Configurable security modes (Open, Public Insert, Authenticated Only)
+-   Client-side rate limiting
+-   Input validation
+
+## Installation
+
+```bash
+npm install @rensblitz/customer-instant-feedback-app
+```
+
+Or with yarn:
+
+```bash
+yarn add @rensblitz/customer-instant-feedback-app
+```
+
+## Usage
+
+Wrap your application with `FeedbackProvider`:
+
+```tsx
+import { FeedbackProvider } from '@rensblitz/customer-instant-feedback-app';
+import '@rensblitz/customer-instant-feedback-app/style.css';
+import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient('YOUR_URL', 'YOUR_ANON_KEY');
+
+function App() {
+  return (
+    <FeedbackProvider 
+      supabaseClient={supabase}
+      securityMode="public-insert" // Recommended for production
+      rateLimitSeconds={30}
+      validation={{
+        maxCommentLength: 2000,
+        maxNameLength: 100,
+        maxScreenshotSize: 500000, // 500KB
+      }}
+    >
+      <YourApp />
+    </FeedbackProvider>
+  );
+}
+```
+
+## Security Configuration
+
+The `FeedbackProvider` accepts a `securityMode` prop to control access levels.
+
+### Modes
+
+| Mode | Description | Use Case |
+| :--- | :--- | :--- |
+| `open` (Default) | Full public access (read/write/update/delete). | Development / Internal Testing |
+| `public-insert` | Anyone can submit feedback. Only authenticated users can read/manage. | Production (Recommended) |
+| `authenticated-only` | Only authenticated users can submit or read feedback. | Internal Tools / Protected Apps |
+| `custom` | You manage RLS policies entirely yourself. | Advanced Requirements |
+
+### Rate Limiting
+
+Client-side rate limiting is available via `rateLimitSeconds`.
+
+```tsx
+<FeedbackProvider rateLimitSeconds={60} ... />
+```
+
+### Validation
+
+Input validation can be configured via `validation` prop.
+
+```tsx
+<FeedbackProvider 
+  validation={{
+    maxCommentLength: 500,
+    maxNameLength: 50,
+    allowScreenshots: true,
+    maxScreenshotSize: 1024 * 1024 // 1MB
+  }} 
+  ... 
+/>
+```
+
+## Migrations
+
+We provide SQL templates for each security mode in the `migrations/` folder.
+
+### 1. Open Mode (`migrations/feedback_items_open.sql`)
+
+Best for local development where auth is not set up.
+
+```sql
+create policy "Allow public access to feedback items"
+on public.feedback_items for all
+using (true) with check (true);
+```
+
+### 2. Public Insert (`migrations/feedback_items_public_insert.sql`)
+
+Allows anonymous users to submit feedback, but protects data from being read or modified publicly.
+
+```sql
+create policy "Anyone can submit feedback"
+on public.feedback_items for insert to public
+with check (true);
+
+create policy "Authenticated users can read feedback"
+on public.feedback_items for select to authenticated
+using (true);
+```
+
+### 3. Authenticated Only (`migrations/feedback_items_authenticated.sql`)
+
+Strict mode requiring authentication for all operations.
+
+```sql
+create policy "Authenticated users can manage feedback"
+on public.feedback_items for all to authenticated
+using (true) with check (true);
+```
+
+## TypeScript Types
+
+```typescript
+type SecurityMode = 'open' | 'public-insert' | 'authenticated-only' | 'custom';
+
+interface ValidationConfig {
+  maxCommentLength?: number;
+  maxNameLength?: number;
+  allowScreenshots?: boolean;
+  maxScreenshotSize?: number;
+}
+
+interface FeedbackProviderProps {
+  children: React.ReactNode;
+  enabled?: boolean;
+  supabaseClient?: SupabaseClient;
+  securityMode?: SecurityMode;
+  rateLimitSeconds?: number;
+  validation?: ValidationConfig;
+}
+```
+
+## Security Best Practices
+
+1.  **Always enable RLS** on your Supabase tables.
+2.  Use `public-insert` or stricter in production.
+3.  Combine client-side rate limiting with server-side protection (e.g., Supabase Edge Functions or API Gateway) for robust defense.
+4.  Sanitize inputs on the server/database side as well if possible (though Supabase handles SQL injection automatically).
+
+## Development
+
+### Building the Package
+
+```bash
+npm run build
+```
+
+This will compile TypeScript and bundle the library for distribution.
+
+### Publishing to npm
+
+The package is configured for publishing to npm with the following setup:
+- ESM and CommonJS builds for compatibility
+- TypeScript declarations included
+- CSS styles exported separately
+- Migrations included for easy Supabase setup
+
+## License
+
+MIT © Rens Blitz