hazo_notes 1.1.0 → 1.1.1

package/README.md

@@ -46,8 +46,15 @@ npm install hazo_connect hazo_auth hazo_logs
 
 ### 1. Add the Component
 
+**Important:** You must pass your UI components via the `popover_components` or `sheet_components` prop. The component cannot auto-import these across package boundaries.
+
 ```tsx
 import { HazoNotesIcon } from 'hazo_notes';
+// Import your shadcn/ui components
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+// Create the components object
+const popover_components = { Popover, PopoverTrigger, PopoverContent };
 
 function MyComponent() {
   return (
@@ -56,6 +63,7 @@ function MyComponent() {
       <HazoNotesIcon
         ref_id="customer-info-section"
         label="Customer Information"
+        popover_components={popover_components}
       />
     </div>
   );
@@ -148,6 +156,9 @@ For detailed setup instructions, see [SETUP_CHECKLIST.md](./SETUP_CHECKLIST.md).
 
 ```tsx
 import { HazoNotesIcon } from 'hazo_notes';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+const popover_components = { Popover, PopoverTrigger, PopoverContent };
 
 export default function FormPage() {
   return (
@@ -157,6 +168,7 @@ export default function FormPage() {
         <HazoNotesIcon
           ref_id="income-field"
           label="Annual Income"
+          popover_components={popover_components}
         />
       </div>
       <input type="number" name="income" />
@@ -177,6 +189,7 @@ export default function FormPage() {
   max_files_per_note={5}
   allowed_file_types={['pdf', 'docx', 'png', 'jpg']}
   max_file_size_mb={10}
+  popover_components={popover_components}
 />
 ```
 
@@ -188,10 +201,15 @@ export default function FormPage() {
 ### Slide Panel Style
 
 ```tsx
+import { Sheet, SheetTrigger, SheetContent } from '@/components/ui/sheet';
+
+const sheet_components = { Sheet, SheetTrigger, SheetContent };
+
 <HazoNotesIcon
   ref_id="detailed-notes"
   label="Detailed Notes"
   panel_style="slide_panel"
+  sheet_components={sheet_components}
 />
 ```
 
@@ -204,6 +222,7 @@ export default function FormPage() {
   ref_id="quick-notes"
   label="Quick Notes"
   save_mode="auto"
+  popover_components={popover_components}
 />
 ```
 
@@ -217,6 +236,7 @@ export default function FormPage() {
   label="Styled Notes"
   background_color="bg-blue-50"
   className="ml-2"
+  popover_components={popover_components}
 />
 ```
 
@@ -228,6 +248,9 @@ export default function FormPage() {
 import { useState } from 'react';
 import { HazoNotesIcon } from 'hazo_notes';
 import type { NoteEntry } from 'hazo_notes/types';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+const popover_components = { Popover, PopoverTrigger, PopoverContent };
 
 export default function ControlledExample() {
   const [notes, setNotes] = useState<NoteEntry[]>([]);
@@ -238,6 +261,7 @@ export default function ControlledExample() {
       label="Controlled Notes"
       notes={notes}
       on_notes_change={setNotes}
+      popover_components={popover_components}
     />
   );
 }
@@ -291,6 +315,18 @@ interface HazoNotesIconProps {
   // Required
   ref_id: string;                      // Unique identifier for this notes instance
 
+  // UI Components (REQUIRED - must pass one based on panel_style)
+  popover_components?: {               // Required for panel_style="popover" (default)
+    Popover: React.ComponentType<any>;
+    PopoverTrigger: React.ComponentType<any>;
+    PopoverContent: React.ComponentType<any>;
+  };
+  sheet_components?: {                 // Required for panel_style="slide_panel"
+    Sheet: React.ComponentType<any>;
+    SheetTrigger: React.ComponentType<any>;
+    SheetContent: React.ComponentType<any>;
+  };
+
   // Display
   label?: string;                      // Panel header label
   has_notes?: boolean;                 // Show indicator when notes exist
@@ -567,9 +603,37 @@ Each note entry in the JSONB array:
 
 ### Notes icon doesn't open panel
 
-**Problem**: Icon renders but clicking does nothing.
+**Problem**: Icon renders but clicking shows "Notes unavailable - pass popover_components prop" tooltip.
+
+**Cause**: The component cannot auto-import UI components across package boundaries.
+
+**Solution**: You must explicitly pass the UI components prop:
+
+```tsx
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+const popover_components = { Popover, PopoverTrigger, PopoverContent };
+
+<HazoNotesIcon
+  ref_id="my-notes"
+  popover_components={popover_components}  // Required!
+/>
+```
+
+For slide panel style, use `sheet_components` instead:
+```tsx
+import { Sheet, SheetTrigger, SheetContent } from '@/components/ui/sheet';
+
+const sheet_components = { Sheet, SheetTrigger, SheetContent };
+
+<HazoNotesIcon
+  ref_id="my-notes"
+  panel_style="slide_panel"
+  sheet_components={sheet_components}
+/>
+```
 
-**Solution**: Install required UI components:
+Make sure you also have the required dependencies:
 ```bash
 npm install @radix-ui/react-popover @radix-ui/react-dialog
 ```

package/SETUP_CHECKLIST.md

@@ -215,8 +215,15 @@ logfile = logs/hazo_notes.log
 
 ### 8. Add the HazoNotesIcon component
 
+**IMPORTANT:** You must pass the UI components via the `popover_components` or `sheet_components` prop. The component cannot auto-import these across package boundaries.
+
 ```tsx
 import { HazoNotesIcon } from 'hazo_notes';
+// Import your shadcn/ui popover components
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+// Create the components object once
+const popover_components = { Popover, PopoverTrigger, PopoverContent };
 
 function MyComponent() {
   return (
@@ -225,12 +232,27 @@ function MyComponent() {
       <HazoNotesIcon
         ref_id="customer-info-section"
         label="Customer Information"
+        popover_components={popover_components}  // Required!
       />
     </div>
   );
 }
 ```
 
+For slide panel style, import Sheet components instead:
+
+```tsx
+import { Sheet, SheetTrigger, SheetContent } from '@/components/ui/sheet';
+
+const sheet_components = { Sheet, SheetTrigger, SheetContent };
+
+<HazoNotesIcon
+  ref_id="field-id"
+  panel_style="slide_panel"
+  sheet_components={sheet_components}  // Required for slide_panel!
+/>
+```
+
 ### 9. (Optional) Configure component props
 
 You can override config file settings via component props:
@@ -239,6 +261,7 @@ You can override config file settings via component props:
 <HazoNotesIcon
   ref_id="field-123"
   label="Customer Notes"
+  popover_components={popover_components}  // Required!
 
   // UI configuration overrides
   panel_style="slide_panel"      // 'popover' | 'slide_panel'
@@ -394,10 +417,26 @@ After setup, verify everything works:
 - Verify `@radix-ui/react-popover` or `@radix-ui/react-dialog` is installed
 - Check browser console for import errors
 
-### Notes icon doesn't open panel
-- Verify UI components are installed: `npm install @radix-ui/react-popover @radix-ui/react-dialog`
-- Check that the component matches `panel_style` (popover uses `react-popover`, slide_panel uses `react-dialog`)
-- Look for errors in browser console
+### Notes icon doesn't open panel (shows "Notes unavailable" tooltip)
+This is the most common issue. The component cannot auto-import UI components across package boundaries.
+
+**Solution:** Pass the UI components via the `popover_components` or `sheet_components` prop:
+
+```tsx
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+
+const popover_components = { Popover, PopoverTrigger, PopoverContent };
+
+<HazoNotesIcon
+  ref_id="my-notes"
+  popover_components={popover_components}  // This is required!
+/>
+```
+
+Also verify:
+- UI components are installed: `npm install @radix-ui/react-popover @radix-ui/react-dialog`
+- You have shadcn/ui components at `@/components/ui/popover` (or your equivalent path)
+- For slide_panel style, use `sheet_components` with Sheet components instead
 
 ### Notes not saving
 - Check that `getUserIdFromRequest` returns a valid user ID

package/dist/index.client.d.ts

@@ -8,7 +8,7 @@
  */
 export * from './components/index.js';
 export * from './hooks/index.js';
-export type { NoteFile, NoteEntry, NoteEntryDB, NewNoteInput, NoteUserInfo, HazoNotesIconProps, HazoNotesPanelProps, HazoNotesEntryProps, HazoNotesFilePreviewProps, NotesApiResponse, AddNoteApiResponse, } from './types/index.js';
+export type { NoteFile, NoteEntry, NoteEntryDB, NewNoteInput, NoteUserInfo, HazoNotesIconProps, HazoNotesPanelProps, HazoNotesEntryProps, HazoNotesFilePreviewProps, NotesApiResponse, AddNoteApiResponse, PopoverComponents, SheetComponents, } from './types/index.js';
 export { LoggerProvider, use_logger, noop_logger } from './logger/index.js';
 export type { Logger, LoggerProviderProps } from './logger/index.js';
 export { cn } from './utils/cn.js';

package/dist/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../src/index.client.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,cAAc,uBAAuB,CAAC;AAGtC,cAAc,kBAAkB,CAAC;AAGjC,YAAY,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC5E,YAAY,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAGrE,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,GACd,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../src/index.client.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,cAAc,uBAAuB,CAAC;AAGtC,cAAc,kBAAkB,CAAC;AAGjC,YAAY,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,gBAAgB,EAChB,kBAAkB,EAElB,iBAAiB,EACjB,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC5E,YAAY,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAGrE,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,GACd,MAAM,uBAAuB,CAAC"}

package/dist/index.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","sourceRoot":"","sources":["../src/index.client.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,aAAa;AACb,cAAc,uBAAuB,CAAC;AAEtC,QAAQ;AACR,cAAc,kBAAkB,CAAC;AAiBjC,uBAAuB;AACvB,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG5E,sBAAsB;AACtB,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,GACd,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.client.js","sourceRoot":"","sources":["../src/index.client.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,aAAa;AACb,cAAc,uBAAuB,CAAC;AAEtC,QAAQ;AACR,cAAc,kBAAkB,CAAC;AAoBjC,uBAAuB;AACvB,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG5E,sBAAsB;AACtB,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,aAAa,GACd,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_notes",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Database-backed notes system with file attachment support for the hazo ecosystem",
   "type": "module",
   "main": "./dist/index.client.js",