@framed-dev/react 0.0.0
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.
- package/README.md +126 -0
- package/dist/index.cjs +6989 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +264 -0
- package/dist/index.d.ts +264 -0
- package/dist/index.js +6975 -0
- package/dist/index.js.map +1 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# @framed/react
|
|
2
|
+
|
|
3
|
+
Collect visual feedback and export AI-ready prompts.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@framed/react)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://www.typescriptlang.org/)
|
|
8
|
+
|
|
9
|
+
## What it does
|
|
10
|
+
|
|
11
|
+
- **Visual selection** — Click any element on your site to attach feedback
|
|
12
|
+
- **Screenshot capture** — Capture and annotate screenshots
|
|
13
|
+
- **Task organization** — Organize and prioritize feedback as tasks
|
|
14
|
+
- **AI export** — Copy structured prompts for Bolt, Lovable, or Cursor
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @framed/react
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
// app/layout.tsx
|
|
24
|
+
import { FramedProvider, FeedbackWidget } from '@framed/react';
|
|
25
|
+
|
|
26
|
+
export default function Layout({ children }: { children: React.ReactNode }) {
|
|
27
|
+
return (
|
|
28
|
+
<html lang="en">
|
|
29
|
+
<body>
|
|
30
|
+
<FramedProvider
|
|
31
|
+
config={{
|
|
32
|
+
supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
|
33
|
+
supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
|
34
|
+
}}
|
|
35
|
+
>
|
|
36
|
+
{children}
|
|
37
|
+
<FeedbackWidget />
|
|
38
|
+
</FramedProvider>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Environment Variables
|
|
46
|
+
|
|
47
|
+
```env
|
|
48
|
+
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
|
|
49
|
+
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbG...
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Database Setup
|
|
53
|
+
|
|
54
|
+
Run this in your Supabase SQL editor:
|
|
55
|
+
|
|
56
|
+
```sql
|
|
57
|
+
create table framed_tasks (
|
|
58
|
+
id uuid primary key default gen_random_uuid(),
|
|
59
|
+
project_id text,
|
|
60
|
+
type text not null,
|
|
61
|
+
status text not null default 'open',
|
|
62
|
+
element jsonb,
|
|
63
|
+
page jsonb not null,
|
|
64
|
+
feedback jsonb not null,
|
|
65
|
+
task jsonb not null,
|
|
66
|
+
attachments jsonb,
|
|
67
|
+
meta jsonb not null,
|
|
68
|
+
created_at timestamptz default now(),
|
|
69
|
+
updated_at timestamptz default now()
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
alter table framed_tasks enable row level security;
|
|
73
|
+
|
|
74
|
+
create policy "Allow all for authenticated users" on framed_tasks
|
|
75
|
+
for all using (auth.role() = 'authenticated');
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Configuration
|
|
79
|
+
|
|
80
|
+
| Prop | Type | Required | Description |
|
|
81
|
+
|------|------|----------|-------------|
|
|
82
|
+
| `supabaseUrl` | `string` | Yes | Your Supabase project URL |
|
|
83
|
+
| `supabaseKey` | `string` | Yes | Your Supabase anon key |
|
|
84
|
+
| `projectId` | `string` | No | Group tasks by project |
|
|
85
|
+
| `theme` | `'light' \| 'dark'` | No | Widget theme (default: light) |
|
|
86
|
+
|
|
87
|
+
## Hooks
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { useTasks } from '@framed/react';
|
|
91
|
+
|
|
92
|
+
function TaskList() {
|
|
93
|
+
const { tasks, openTasks, markDone, copyPrompt } = useTasks();
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<div>
|
|
97
|
+
<p>{openTasks.length} open tasks</p>
|
|
98
|
+
<button onClick={() => copyPrompt()}>Copy AI Prompt</button>
|
|
99
|
+
</div>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Available hooks
|
|
105
|
+
|
|
106
|
+
- `useTasks()` — Access tasks, mark done, copy AI prompt
|
|
107
|
+
- `useFramed()` — Access full provider context
|
|
108
|
+
|
|
109
|
+
## Export to AI Tools
|
|
110
|
+
|
|
111
|
+
1. Collect feedback via widget
|
|
112
|
+
2. Open drawer → click **Copy AI Prompt**
|
|
113
|
+
3. Paste in Bolt, Lovable, or Cursor
|
|
114
|
+
4. AI implements the changes
|
|
115
|
+
|
|
116
|
+
The prompt includes task details, element selectors, page context, and suggested changes — everything the AI needs to make the fix.
|
|
117
|
+
|
|
118
|
+
## License
|
|
119
|
+
|
|
120
|
+
MIT
|
|
121
|
+
|
|
122
|
+
## Links
|
|
123
|
+
|
|
124
|
+
- [GitHub](https://github.com/framed-dev/framed-widget)
|
|
125
|
+
- [Issues](https://github.com/framed-dev/framed-widget/issues)
|
|
126
|
+
- Docs: Coming soon
|