review-lens-react 0.2.1 → 1.0.1

package/README.md

@@ -1,5 +1,7 @@
 # review-lens-react
 
+<img src="https://raw.githubusercontent.com/ichichich3011/review-lens-react/main/packages/review-lens-react/review-lens-logo.svg" alt="Review Lens logo" width="64" height="64">
+
 `review-lens-react` is a React overlay for UX reviews inside frontend apps. Designers can inspect real DOM elements, see computed spacing and typography details, lock an element, write feedback, and store that feedback in Google Sheets. Developers can open the same app, see page comments anchored to selectors, and resolve feedback while implementing the review.
 
 The package is intended to be mounted by the host app only when review mode is needed. It does not add a global launcher by default.
@@ -52,7 +54,8 @@ export function AppReviewMode() {
     <ReviewLensProvider
       config={{
         googleClientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
-        spreadsheetId: import.meta.env.VITE_REVIEW_LENS_SPREADSHEET_ID,
+        contentSpreadsheetId: import.meta.env.VITE_REVIEW_LENS_CONTENT_SPREADSHEET_ID,
+        usersSpreadsheetId: import.meta.env.VITE_REVIEW_LENS_USERS_SPREADSHEET_ID,
         projectKey: "landing-pages-app",
         contentId: "article-123"
       }}
@@ -92,7 +95,8 @@ Config:
 | Name | Required | Description |
 | --- | --- | --- |
 | `googleClientId` | yes, unless `adapter` is provided | OAuth web client id from Google Cloud. |
-| `spreadsheetId` | yes, unless `adapter` is provided | Google Sheet id from the Sheet URL. |
+| `contentSpreadsheetId` | yes, unless `adapter` is provided | Google Sheet id for review feedback and messages. |
+| `usersSpreadsheetId` | yes, unless `adapter` is provided | Google Sheet id for user roles and authentication metadata. |
 | `sheetName` | no | Feedback sheet name. Defaults to `Feedback`. |
 | `projectKey` | yes | Stable app/project key, for example `landing-pages-app`. |
 | `contentId` | yes | Stable content key shared by localhost and production. |
@@ -100,6 +104,7 @@ Config:
 | `normalizeUrl` | no | Custom URL normalization function. |
 | `designTokens` | no | Allowed spacing, font size, line height, color, and radius values for advisory token checks. |
 | `captureScreenshot` | no | Optional hook that captures a screenshot for a selected target. |
+| `emailNotifications` | no | Enables Gmail notifications for authors and assignees. Requires the Gmail send scope. |
 | `uploadAttachment` | no | Optional hook that stores screenshots and returns attachment URLs. |
 | `adapter` | no | Custom storage adapter for tests, demos, or a future backend. |
 
@@ -143,12 +148,13 @@ Official references:
 
 Open Google Cloud Console and choose the project that should own the OAuth client.
 
-### 2. Enable Google Sheets API
+### 2. Enable Google APIs
 
 In Google Cloud Console:
 
 1. Go to `APIs & Services`.
 2. Enable `Google Sheets API`.
+3. Enable `Gmail API` when `emailNotifications` should send notification emails.
 
 ### 3. Configure OAuth consent
 
@@ -166,6 +172,37 @@ https://www.googleapis.com/auth/userinfo.email
 
 The Sheets scope is used to read/write feedback rows. The email scope is used to match the signed-in Google account against the `Users` tab.
 
+To send review notifications from the signed-in user's Gmail account, also add:
+
+```text
+https://www.googleapis.com/auth/gmail.send
+```
+
+Then enable notifications in the provider config:
+
+```tsx
+<ReviewLensProvider
+  config={{
+    googleClientId,
+    contentSpreadsheetId,
+    usersSpreadsheetId,
+    projectKey: "demo",
+    contentId: "article-123",
+    emailNotifications: true
+  }}
+>
+  {children}
+</ReviewLensProvider>
+```
+
+Notification emails include a `reviewLensFeedback=<id>` link back to the selected feedback and state that they were sent by Review Lens on behalf of the signed-in user. The default Google adapter only requests the Gmail scope when `emailNotifications` is enabled.
+
+The package also exports `ReviewLensLogo` for host apps that want to reuse the same mark in custom launchers or review entry points:
+
+```tsx
+import { ReviewLensLogo } from "review-lens-react";
+```
+
 ### 4. Create an OAuth web client
 
 In Google Cloud Console:
@@ -186,15 +223,17 @@ https://your-production-app.example.com
 
 Use the generated client id as `googleClientId`.
 
-### 5. Create the Google Sheet
+### 5. Create the Google Sheets
 
-Create one shared Google Sheet and copy its id from the URL:
+Create a content Google Sheet and copy its id from the URL:
 
 ```text
 https://docs.google.com/spreadsheets/d/SPREADSHEET_ID/edit
 ```
 
-Share the Sheet with every reviewer/developer who should use the overlay. Users need Sheet access because the browser writes directly to the Google Sheets API as the signed-in user.
+Use this id as `contentSpreadsheetId`. Share the content Sheet with every reviewer/developer who should create or update review content.
+
+Create a separate users/auth Google Sheet and use its id as `usersSpreadsheetId`. Normal reviewers only need read access to this Sheet; admins can keep write access to themselves.
 
 ### 6. Add the `Feedback` tab
 
@@ -214,7 +253,7 @@ Create a tab named `Messages` with this header row:
 id,feedbackId,body,authorEmail,createdAt
 ```
 
-### 8. Add the `Users` tab
+### 8. Add the `Users` tab in the users Sheet
 
 Create a tab named `Users` with this header row:
 
@@ -261,7 +300,8 @@ If your app has a different URL model, pass a custom normalizer:
 <ReviewLensProvider
   config={{
     googleClientId,
-    spreadsheetId,
+    contentSpreadsheetId,
+    usersSpreadsheetId,
     projectKey: "landing-pages-app",
     contentId: article.id,
     normalizeUrl: (url) => new URL(url).pathname.replace(/^\/preview/, "")

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import "./styles.css";
 export { ReviewLensProvider, useReviewLens } from "./review-lens-provider";
 export { ReviewLensOverlay } from "./review-lens-overlay";
+export { ReviewLensLogo } from "./review-lens-logo";
 export type { ReviewLensOverlayPlacement, ReviewLensViewportOption } from "./review-lens-overlay";
 export { createGoogleSheetsAdapter } from "./sheets/google-sheets-adapter";
 export { buildElementTarget } from "./selectors/build-element-target";
 export { normalizeReviewUrl } from "./url/normalize-review-url";
-export type { CssSnapshot, CreateAttachmentInput, CreateFeedbackInput, CreateMessageInput, ElementFingerprint, FeedbackCategory, FeedbackSeverity, FeedbackStatus, ReviewLensAttachment, ReviewLensAdapter, ReviewLensConfig, ReviewLensDesignTokens, ReviewLensFeedback, ReviewLensPermission, ReviewLensRole, ReviewLensTarget, ReviewLensThreadMessage, ReviewLensViewportPreset, UpdateFeedbackInput } from "./types";
+export type { CssSnapshot, CreateAttachmentInput, CreateFeedbackInput, CreateMessageInput, ElementFingerprint, FeedbackCategory, FeedbackSeverity, FeedbackStatus, ReviewLensAttachment, ReviewLensAdapter, ReviewLensConfig, ReviewLensDesignTokens, ReviewLensEmailNotificationOptions, ReviewLensFeedback, ReviewLensPermission, ReviewLensRole, ReviewLensSendEmailInput, ReviewLensTarget, ReviewLensThreadMessage, ReviewLensViewportPreset, UpdateFeedbackInput } from "./types";

package/dist/review-lens-logo.d.ts

@@ -0,0 +1,6 @@
+type ReviewLensLogoProps = {
+    className?: string;
+    title?: string;
+};
+export declare function ReviewLensLogo({ className, title }: ReviewLensLogoProps): import("react/jsx-runtime").JSX.Element;
+export {};