@rensblitz/customer-instant-feedback-app 2.0.3 → 2.0.5

package/README.md

@@ -37,7 +37,61 @@ pnpm add @rensblitz/customer-instant-feedback-app @supabase/supabase-js react re
 
 ## Quick Start
 
-### 1. Wrap your app
+### 1. Environment variables (host project)
+
+Add these to your **host project's** `.env` file (not this package):
+
+**Vite / Create React App:**
+```
+VITE_FEEDBACK_SUPABASE_URL=https://your-project.supabase.co
+VITE_FEEDBACK_SUPABASE_ANON_KEY=your-anon-key
+```
+
+**Next.js:**
+```
+NEXT_PUBLIC_FEEDBACK_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_FEEDBACK_SUPABASE_ANON_KEY=your-anon-key
+```
+
+Get these from Supabase: Project Settings → API. Use the `anon` (public) key.
+
+**TypeScript users:** Add type definitions for these environment variables. For Vite projects, create `src/vite-env.d.ts`:
+
+```typescript
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FEEDBACK_SUPABASE_URL: string
+  readonly VITE_FEEDBACK_SUPABASE_ANON_KEY: string
+}
+```
+
+For Next.js, add to `next-env.d.ts` or create a similar declaration file.
+
+Alternatively, call `configureFeedbackClient({ url, anonKey })` at app init.
+
+### 2. Database migrations
+
+Run these SQL files in your Supabase SQL editor, in order:
+
+1. `migrations/schema_central.sql` – Creates tables
+2. `migrations/extend_feedback_items.sql` – **Skip for new installs.** Only run if you already have `feedback_items` from a previous setup; running on a fresh install will fail.
+3. `migrations/rls_central.sql` – RLS policies
+4. `migrations/create_admin.sql` – Creates your first admin (replace placeholder UUID)
+
+### 3. Edge Functions (required for admin)
+
+The admin UI uses Edge Functions to create/delete reviewers. Deploy them:
+
+```bash
+# From the package root (e.g. node_modules/@rensblitz/customer-instant-feedback-app)
+supabase functions deploy create-reviewer
+supabase functions deploy delete-reviewer
+```
+
+Or copy `supabase/functions/` into your Supabase project and deploy.
+
+### 4. Wrap your app
 
 In your root component (e.g. `App.tsx` or `main.tsx`):
 
@@ -65,7 +119,7 @@ function App() {
           <Route
             path="/*"
             element={
-              <FeedbackProvider projectId={projectId}>
+              <FeedbackProvider projectId={projectId} feedbackReviewPath="/feedback">
                 <YourApp />
               </FeedbackProvider>
             }
@@ -79,19 +133,15 @@ function App() {
 
 **Important:** Always import the CSS file. Without it, the feedback modal has no styles.
 
-### 2. Get your project ID
-
-The `projectId` is created when you add a project in the admin UI (`/feedback-admin`). You must be an admin to access it. After creating a company and project, copy the generated `project_id` (format: `short-code_uuid`) and pass it to `FeedbackProvider`.
+### 5. Get your project ID
 
-### 3. Create the first admin
+Go to `/feedback-admin`, create a company and project, then copy the `project_id` (format: `short-code_uuid`) and pass it to `FeedbackProvider` and `FeedbackReviewPage`.
 
-Admins are created manually via SQL. In the Supabase SQL editor for the central project:
+### 6. Create the first admin
 
-1. Create a user in Authentication → Users → Add user (email + password)
+1. Create a user in Supabase: Authentication → Users → Add user (email + password)
 2. Copy the user's UUID
-3. Run: `insert into public.admins (user_id) values ('your-user-uuid');`
-
-See `migrations/create_admin.sql` for the template.
+3. Run the SQL from `migrations/create_admin.sql` (replace the placeholder UUID)
 
 ## How it works
 
@@ -127,7 +177,9 @@ See `migrations/create_admin.sql` for the template.
 ### Rate limiting
 
 ```tsx
-<FeedbackProvider projectId="..." rateLimitSeconds={60} />
+<FeedbackProvider projectId="..." rateLimitSeconds={60}>
+  <YourApp />
+</FeedbackProvider>
 ```
 
 ### Validation
@@ -141,15 +193,17 @@ See `migrations/create_admin.sql` for the template.
     allowScreenshots: true,
     maxScreenshotSize: 1024 * 1024,
   }}
-/>
+>
+  <YourApp />
+</FeedbackProvider>
 ```
 
 ## Migrations (central Supabase project)
 
-The package uses a centralized Supabase project. Run these migrations in order:
+Run these migrations in your Supabase SQL editor, in order:
 
 1. `migrations/schema_central.sql` – Creates companies, projects, admins, reviewers, and feedback_items tables
-2. `migrations/extend_feedback_items.sql` – Run only if feedback_items already exists from a previous setup
+2. `migrations/extend_feedback_items.sql` – **Skip for new installs.** Only run if you are upgrading an existing installation that already has a `feedback_items` table from a prior setup. Running on a fresh install will fail.
 3. `migrations/rls_central.sql` – RLS policies
 4. `migrations/create_admin.sql` – Template for creating first admin(s)
 
@@ -179,15 +233,56 @@ interface FeedbackReviewPageProps {
 
 ## Development
 
-### Building the package
+### Testing the library locally
+
+The `demo/` folder contains a separate app that imports the library like a real consumer would:
+
+1. **First time setup:**
+   ```bash
+   npm run demo:install
+   npm link
+   cd demo && npm link @rensblitz/customer-instant-feedback-app
+   ```
+   Add `VITE_FEEDBACK_SUPABASE_URL` and `VITE_FEEDBACK_SUPABASE_ANON_KEY` to `demo/.env` (copy from `demo/.env.example` if present).
+
+2. **Build the library:**
+   ```bash
+   npm run build
+   ```
+
+3. **Run the demo app:**
+   ```bash
+   npm run demo
+   ```
+
+The demo app imports from `node_modules` using `npm link`, so it works exactly like a real host app. 
+
+**After making changes to the library:**
+- Rebuild: `npm run build`
+- The demo will hot-reload automatically
+
+**Demo includes:**
+- `/feedback-admin` - Admin interface for managing companies, projects, and reviewers
+- `/feedback-login` - Login page for reviewers
+- `/feedback` - Feedback review page
+- `/readme` - Setup guide (also available as `FeedbackReadmePage` for host apps)
+- `/` - Demo page with the feedback widget
+
+### Building for npm
 
 ```bash
 npm run build
 ```
 
+Builds the library (ESM, CommonJS, TypeScript declarations, CSS).
+
 ### Publishing to npm
 
-The package is configured for publishing to npm with ESM and CommonJS builds, TypeScript declarations, and CSS styles exported separately.
+```bash
+npm publish --access public
+```
+
+The package is configured for npm distribution with proper exports.
 
 ## License