@designfever/web-review-kit 0.6.0 → 0.7.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/.env.sample +29 -0
- package/README.md +35 -10
- package/dist/chunk-AB5B6O77.js +584 -0
- package/dist/chunk-AB5B6O77.js.map +1 -0
- package/dist/{chunk-IN36JHEU.js → chunk-RPVLRULC.js} +504 -143
- package/dist/chunk-RPVLRULC.js.map +1 -0
- package/dist/image.types-BmzkFSPX.d.cts +71 -0
- package/dist/image.types-BmzkFSPX.d.ts +71 -0
- package/dist/index.cjs +1019 -144
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +27 -3
- package/dist/index.d.ts +27 -3
- package/dist/index.js +50 -3
- package/dist/index.js.map +1 -1
- package/dist/react-shell.cjs +10293 -5185
- package/dist/react-shell.cjs.map +1 -1
- package/dist/react-shell.d.cts +37 -4
- package/dist/react-shell.d.ts +37 -4
- package/dist/react-shell.js +9624 -4856
- package/dist/react-shell.js.map +1 -1
- package/dist/token-Dt-ZH-YO.d.cts +88 -0
- package/dist/token-nJXPPdYX.d.ts +88 -0
- package/dist/{types-DFHHVRBc.d.cts → types-DT9Z66mV.d.cts} +13 -1
- package/dist/{types-DFHHVRBc.d.ts → types-DT9Z66mV.d.ts} +13 -1
- package/dist/vite.cjs +1116 -5
- package/dist/vite.cjs.map +1 -1
- package/dist/vite.d.cts +45 -1
- package/dist/vite.d.ts +45 -1
- package/dist/vite.js +800 -5
- package/dist/vite.js.map +1 -1
- package/docs/README.md +11 -7
- package/docs/adapters.md +126 -0
- package/docs/adaptor.sample.ts +13 -1
- package/docs/architecture.md +2 -1
- package/docs/code-review-0.6.0.md +232 -0
- package/docs/db-setup.md +4 -2
- package/docs/figma-image-mvp-0.7.0.md +327 -0
- package/docs/installation.md +39 -7
- package/docs/release-notes-0.7.0.md +128 -0
- package/package.json +6 -2
- package/dist/chunk-IN36JHEU.js.map +0 -1
package/docs/db-setup.md
CHANGED
|
@@ -4,9 +4,11 @@ Supabase is an optional backend adapter. A host project may use it for canonical
|
|
|
4
4
|
|
|
5
5
|
## Environment
|
|
6
6
|
|
|
7
|
+
Start from [.env.sample](../.env.sample), then fill Supabase values only in the host project that uses the Supabase adapter.
|
|
8
|
+
|
|
7
9
|
```env
|
|
8
|
-
VITE_REVIEW_PROJECT_ID=
|
|
9
|
-
VITE_REVIEW_SUPABASE_URL=
|
|
10
|
+
VITE_REVIEW_PROJECT_ID=my-project
|
|
11
|
+
VITE_REVIEW_SUPABASE_URL=
|
|
10
12
|
VITE_REVIEW_SUPABASE_ANON_KEY=
|
|
11
13
|
VITE_REVIEW_SUPABASE_TABLE=review_items
|
|
12
14
|
VITE_REVIEW_SUPABASE_PRESENCE_PRIVATE=false
|
|
@@ -0,0 +1,327 @@
|
|
|
1
|
+
# Figma Image MVP 0.7.0 Structure Note
|
|
2
|
+
|
|
3
|
+
This is the investigation note for Todo 802, `Figma 이미지 MVP 구조 조사`.
|
|
4
|
+
It records the minimum 0.7.0 scope before implementation.
|
|
5
|
+
|
|
6
|
+
## Goal
|
|
7
|
+
|
|
8
|
+
0.7.0 should add a dev/local Figma image management MVP without breaking the
|
|
9
|
+
current host-helper flow.
|
|
10
|
+
|
|
11
|
+
- If a Figma image store is configured, the review shell uses the new image
|
|
12
|
+
management flow.
|
|
13
|
+
- If no Figma image store is configured, the shell keeps the current Figma
|
|
14
|
+
helper fallback: dispatch the host keyboard shortcut and detect the host
|
|
15
|
+
overlay.
|
|
16
|
+
- `FIGMA_TOKEN` is required only by the Figma image server/dev endpoint when it
|
|
17
|
+
renders or adds an image. It must not become a package-wide or browser env
|
|
18
|
+
requirement.
|
|
19
|
+
- Rendered images should be downloaded into a local/dev asset cache. Prefer webp
|
|
20
|
+
when an image transformer is configured, but keep `png`/`jpg` fallback without
|
|
21
|
+
adding a package dependency. Always keep the original `figmaUrl`, `fileKey`,
|
|
22
|
+
and `nodeId` so the image can be regenerated later.
|
|
23
|
+
- Removing keyboard shortcut helpers from host projects belongs after the MVP
|
|
24
|
+
has stabilized.
|
|
25
|
+
|
|
26
|
+
## Current State
|
|
27
|
+
|
|
28
|
+
### Existing Review Adapters
|
|
29
|
+
|
|
30
|
+
`WebReviewKitAdapter` is a QA item persistence contract:
|
|
31
|
+
|
|
32
|
+
- `get`
|
|
33
|
+
- `list`
|
|
34
|
+
- `create`
|
|
35
|
+
- `update`
|
|
36
|
+
- `remove`
|
|
37
|
+
|
|
38
|
+
`ReviewShellAdapter` wraps that contract for shell sources, status handling,
|
|
39
|
+
submission sync, and write-mode checks. It is intentionally centered on
|
|
40
|
+
`ReviewItem`.
|
|
41
|
+
|
|
42
|
+
Do not overload this adapter for Figma image bindings in 0.7.0. Figma images
|
|
43
|
+
need their own small store contract so QA item source switching, status updates,
|
|
44
|
+
and submission sync do not become coupled to image management.
|
|
45
|
+
|
|
46
|
+
### Current Figma Integration
|
|
47
|
+
|
|
48
|
+
The current Figma integration is only a host-helper toggle:
|
|
49
|
+
|
|
50
|
+
- `docs/figma-overlay.md` states that the package does not fetch Figma data or
|
|
51
|
+
own a server-side token.
|
|
52
|
+
- `src/react-shell/figma.ts` reads `window.__figma` and builds a Figma frame
|
|
53
|
+
link from `fileKey->nodeId`.
|
|
54
|
+
- `src/react-shell/hooks/use.review.target.overlay.ts` dispatches `KeyF` into
|
|
55
|
+
the iframe target when the Figma overlay is toggled.
|
|
56
|
+
- `src/react-shell/settings.ts` and `use.review.settings.ts` store the current
|
|
57
|
+
`figma-token` setting in browser `localStorage`.
|
|
58
|
+
- `dev/src/main.tsx` currently provides a dev `window.__figma` fixture.
|
|
59
|
+
|
|
60
|
+
This flow should remain as the fallback for projects that have no image store.
|
|
61
|
+
|
|
62
|
+
### Dev Server Gap
|
|
63
|
+
|
|
64
|
+
`src/vite.ts` currently exports source/data locator plugins only. There is no
|
|
65
|
+
middleware endpoint yet.
|
|
66
|
+
|
|
67
|
+
A local `fileAdapter` cannot be browser-only, because browser code cannot write
|
|
68
|
+
a JSON file. The local MVP should add a Vite/dev-server endpoint and expose a
|
|
69
|
+
browser store client that calls that endpoint.
|
|
70
|
+
|
|
71
|
+
## Proposed 0.7.0 Shape
|
|
72
|
+
|
|
73
|
+
### Public/Shell Option
|
|
74
|
+
|
|
75
|
+
Add an optional shell-level Figma image config. Keep it absent by default.
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
type ReviewShellFigmaImagesOptions = {
|
|
79
|
+
store?: ReviewFigmaImageStore;
|
|
80
|
+
enabled?: boolean;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
interface ReviewShellProps {
|
|
84
|
+
// existing props...
|
|
85
|
+
figmaImages?: ReviewShellFigmaImagesOptions;
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Fallback rule:
|
|
90
|
+
|
|
91
|
+
- `figmaImages?.store` exists: show/use Figma image management UI.
|
|
92
|
+
- `figmaImages?.store` is missing: keep the current host-helper overlay button
|
|
93
|
+
and keyboard shortcut behavior.
|
|
94
|
+
|
|
95
|
+
### Store Contract
|
|
96
|
+
|
|
97
|
+
The 0.7.0 contract should be separate from `WebReviewKitAdapter`.
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
type ReviewFigmaImageTarget =
|
|
101
|
+
| { type: 'route'; projectId: string; pageUrl: string; slot?: string }
|
|
102
|
+
| { type: 'figma-node'; projectId: string; fileKey: string; nodeId: string };
|
|
103
|
+
|
|
104
|
+
type ReviewFigmaImage = {
|
|
105
|
+
id: string;
|
|
106
|
+
projectId: string;
|
|
107
|
+
target: ReviewFigmaImageTarget;
|
|
108
|
+
figmaUrl: string;
|
|
109
|
+
fileKey: string;
|
|
110
|
+
nodeId: string;
|
|
111
|
+
imageUrl: string;
|
|
112
|
+
imageFormat: 'webp' | 'png' | 'jpg';
|
|
113
|
+
mimeType: string;
|
|
114
|
+
label?: string;
|
|
115
|
+
order: number;
|
|
116
|
+
storageKey?: string;
|
|
117
|
+
width?: number;
|
|
118
|
+
height?: number;
|
|
119
|
+
byteSize?: number;
|
|
120
|
+
createdAt: string;
|
|
121
|
+
updatedAt: string;
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
type ReviewFigmaImageStore = {
|
|
125
|
+
listImages(target: ReviewFigmaImageTarget): Promise<ReviewFigmaImage[]>;
|
|
126
|
+
addImage(input: {
|
|
127
|
+
target: ReviewFigmaImageTarget;
|
|
128
|
+
figmaUrl: string;
|
|
129
|
+
imageFormat?: 'webp' | 'png' | 'jpg';
|
|
130
|
+
}): Promise<ReviewFigmaImage>;
|
|
131
|
+
deleteImage(id: string): Promise<void>;
|
|
132
|
+
reorderImages(input: {
|
|
133
|
+
target: ReviewFigmaImageTarget;
|
|
134
|
+
imageIds: string[];
|
|
135
|
+
}): Promise<ReviewFigmaImage[]>;
|
|
136
|
+
updateImage(
|
|
137
|
+
id: string,
|
|
138
|
+
patch: Partial<Pick<ReviewFigmaImage, 'label' | 'order'>>
|
|
139
|
+
): Promise<ReviewFigmaImage>;
|
|
140
|
+
};
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
`addImage` owns the internal image rendering/upload/cache step. The UI should
|
|
144
|
+
not know whether the returned `imageUrl` came from a local dev server,
|
|
145
|
+
OpenClaw-hosted upload, or a future Cloudflare-backed uploader.
|
|
146
|
+
|
|
147
|
+
Default target output is `image/webp` with a quality setting around 90-95 for
|
|
148
|
+
review/reference overlays, but the package should not force an image conversion
|
|
149
|
+
dependency for the dev MVP. Without a configured transformer, the local cache
|
|
150
|
+
stores the actual Figma render format (`png` or `jpg`) and records that real
|
|
151
|
+
`mimeType`/`imageFormat` in metadata.
|
|
152
|
+
|
|
153
|
+
### Module Layout
|
|
154
|
+
|
|
155
|
+
Use the architecture doc's existing direction, but convert the current single
|
|
156
|
+
`src/react-shell/figma.ts` file into a small module when implementation begins.
|
|
157
|
+
|
|
158
|
+
```txt
|
|
159
|
+
src/figma/
|
|
160
|
+
image.types.ts
|
|
161
|
+
parse.ts
|
|
162
|
+
|
|
163
|
+
src/react-shell/figma/
|
|
164
|
+
image.client.ts
|
|
165
|
+
image.panel.tsx
|
|
166
|
+
image.state.ts
|
|
167
|
+
frame.ts
|
|
168
|
+
|
|
169
|
+
src/vite.ts
|
|
170
|
+
reviewFigmaImageStore()
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
Suggested responsibilities:
|
|
174
|
+
|
|
175
|
+
- `src/figma/parse.ts`: parse Figma node copy links into `fileKey` and `nodeId`.
|
|
176
|
+
- `src/react-shell/figma/image.client.ts`: browser client for the dev endpoint
|
|
177
|
+
or any host-provided store.
|
|
178
|
+
- `src/react-shell/figma/image.panel.tsx`: list/add/delete/reorder UI.
|
|
179
|
+
- `src/vite.ts`: dev middleware for local JSON metadata and Figma rendering.
|
|
180
|
+
|
|
181
|
+
### Local MVP Endpoint
|
|
182
|
+
|
|
183
|
+
Add a dev plugin instead of trying to write files from browser code.
|
|
184
|
+
|
|
185
|
+
```ts
|
|
186
|
+
reviewFigmaImageStore({
|
|
187
|
+
enabled: true,
|
|
188
|
+
projectId: 'df-web-review-kit',
|
|
189
|
+
dataFile: '.df-review/figma-images.json',
|
|
190
|
+
});
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
Endpoint shape can stay internal for 0.7.0, but should map directly to the
|
|
194
|
+
store contract:
|
|
195
|
+
|
|
196
|
+
- `GET /__dfwr/figma-images`
|
|
197
|
+
- `POST /__dfwr/figma-images`
|
|
198
|
+
- `PATCH /__dfwr/figma-images/:id`
|
|
199
|
+
- `DELETE /__dfwr/figma-images/:id`
|
|
200
|
+
|
|
201
|
+
The dev endpoint reads `FIGMA_TOKEN` from server env only when it needs to call
|
|
202
|
+
Figma. Do not expose `VITE_FIGMA_TOKEN`.
|
|
203
|
+
|
|
204
|
+
Token validation is intentionally lazy:
|
|
205
|
+
|
|
206
|
+
- Store missing or disabled: no token check, keep the current host-helper
|
|
207
|
+
fallback.
|
|
208
|
+
- Store enabled but no image render/add request has happened: no token check.
|
|
209
|
+
- Image render/add request: require `FIGMA_TOKEN` from the dev/server
|
|
210
|
+
environment and return `DFWR_FIGMA_TOKEN_MISSING` when it is absent.
|
|
211
|
+
|
|
212
|
+
## Impact Files
|
|
213
|
+
|
|
214
|
+
Expected package-side implementation files:
|
|
215
|
+
|
|
216
|
+
- `.env.sample`: document server-only `FIGMA_TOKEN` separately from browser
|
|
217
|
+
`VITE_*` values.
|
|
218
|
+
- `src/types.ts` or `src/figma/image.types.ts`: shared Figma image types.
|
|
219
|
+
- `src/index.ts`: export public Figma image types/parser only if needed by host
|
|
220
|
+
projects.
|
|
221
|
+
- `src/react-shell/types.ts`: add optional `figmaImages`.
|
|
222
|
+
- `src/react-shell/review/shell.tsx`: pass state/actions into the panel and
|
|
223
|
+
preserve existing fallback behavior.
|
|
224
|
+
- `src/react-shell/topbar.tsx`: keep the existing overlay toggle available when
|
|
225
|
+
no image store exists.
|
|
226
|
+
- `src/react-shell/review/settings.modal.tsx` and
|
|
227
|
+
`src/react-shell/hooks/use.review.settings.ts`: stop treating browser
|
|
228
|
+
`figma-token` as the new API token. Keep it only for legacy host helpers if
|
|
229
|
+
needed.
|
|
230
|
+
- `src/vite.ts`: add the dev local metadata endpoint.
|
|
231
|
+
- `dev/vite.config.ts` and `dev/src/main.tsx`: wire the local MVP for dogfood.
|
|
232
|
+
|
|
233
|
+
Token helpers already added for the implementation steps:
|
|
234
|
+
|
|
235
|
+
- `readReviewFigmaToken()` / `requireReviewFigmaToken()` validate an explicit
|
|
236
|
+
token/env object without reading browser globals.
|
|
237
|
+
- `readReviewFigmaServerToken()` / `requireReviewFigmaServerToken()` are
|
|
238
|
+
exported from `@designfever/web-review-kit/vite` for dev/server-only code.
|
|
239
|
+
- `ReviewFigmaTokenError` carries `DFWR_FIGMA_TOKEN_MISSING` so UI/API callers
|
|
240
|
+
can show a clear setup error.
|
|
241
|
+
|
|
242
|
+
Parser/render helpers already added for the implementation steps:
|
|
243
|
+
|
|
244
|
+
- `parseReviewFigmaNodeRef()` accepts either a Figma copy link or existing
|
|
245
|
+
`fileKey->nodeId` value.
|
|
246
|
+
- URL `node-id` values are normalized from Figma web form like `4-228` to API
|
|
247
|
+
form like `4:228`.
|
|
248
|
+
- `createReviewFigmaFrameUrl()` centralizes Figma frame link generation.
|
|
249
|
+
- `renderReviewFigmaServerImage()` is exported from
|
|
250
|
+
`@designfever/web-review-kit/vite` and calls Figma `/v1/images/:fileKey` with
|
|
251
|
+
a server-side token.
|
|
252
|
+
- The Figma API render URL is a temporary source URL. The local file adapter now
|
|
253
|
+
downloads it into the dev asset cache before writing JSON metadata.
|
|
254
|
+
|
|
255
|
+
Local metadata store helpers already added for the implementation steps:
|
|
256
|
+
|
|
257
|
+
- `createReviewFigmaImageStoreClient()` creates a browser-side
|
|
258
|
+
`ReviewFigmaImageStore` that calls the dev endpoint.
|
|
259
|
+
- `reviewFigmaImageStore()` is exported from
|
|
260
|
+
`@designfever/web-review-kit/vite` and adds the local dev middleware.
|
|
261
|
+
- The default endpoint is `/__dfwr/figma-images`.
|
|
262
|
+
- The dev fixture stores metadata at `.df-review/figma-images.json`; the
|
|
263
|
+
`.df-review` folder is gitignored.
|
|
264
|
+
- The local middleware downloads rendered image binaries into
|
|
265
|
+
`.df-review/figma-assets` by default and stores the served local asset URL as
|
|
266
|
+
`imageUrl`.
|
|
267
|
+
- The asset endpoint defaults to `/__dfwr/figma-images/assets`.
|
|
268
|
+
- `cacheAssets: false` keeps the old temporary render URL behavior for debugging.
|
|
269
|
+
- `transformAsset` can convert the downloaded data before it is written, which
|
|
270
|
+
is where a future sharp/Cloudflare webp conversion step should plug in.
|
|
271
|
+
|
|
272
|
+
Review page multi-image UI already added for the implementation steps:
|
|
273
|
+
|
|
274
|
+
- When `figmaImages.store` is configured, the shell shows a Figma Images side
|
|
275
|
+
panel.
|
|
276
|
+
- The panel supports list, add, delete, reorder, select, and overlay opacity
|
|
277
|
+
controls for the current route + viewport target.
|
|
278
|
+
- When no store is configured, the legacy host-helper Figma overlay fallback is
|
|
279
|
+
still used.
|
|
280
|
+
|
|
281
|
+
Release snapshot helpers already added for the implementation steps:
|
|
282
|
+
|
|
283
|
+
- `createReviewFigmaImagesSnapshot()` clones and sorts image metadata for JSON
|
|
284
|
+
persistence.
|
|
285
|
+
- `createReviewFigmaReleaseSnapshot()` returns a release-shaped JSON object
|
|
286
|
+
with `figmaImagesSnapshot`.
|
|
287
|
+
- `collectReviewFigmaReleaseSnapshot()` can collect images through any
|
|
288
|
+
`ReviewFigmaImageStore` for a set of targets.
|
|
289
|
+
- The local Vite middleware exposes
|
|
290
|
+
`GET/POST /__dfwr/figma-images/snapshot` for dev release JSON snapshots.
|
|
291
|
+
|
|
292
|
+
Expected host-project follow-up files after stabilization:
|
|
293
|
+
|
|
294
|
+
- `lexus_official_v2026/src/helper/helper.review-kit.ts`: remove per-project
|
|
295
|
+
helper wiring only after 0.7.0 fallback has been verified.
|
|
296
|
+
- Host review route files: pass the image store config only for projects that
|
|
297
|
+
opt into the new flow.
|
|
298
|
+
|
|
299
|
+
## Release Boundary
|
|
300
|
+
|
|
301
|
+
There is no runtime "review release" model in the current package code. The
|
|
302
|
+
existing release files are package release notes.
|
|
303
|
+
|
|
304
|
+
For 0.7.0, do not introduce a release table or separate release image store.
|
|
305
|
+
Todo 808 can keep this simple by snapshotting the current image list as JSON on
|
|
306
|
+
whatever release object gets introduced:
|
|
307
|
+
|
|
308
|
+
```ts
|
|
309
|
+
figmaImagesSnapshot: ReviewFigmaImage[];
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
That is enough to ensure old review releases do not change when the current
|
|
313
|
+
project/page Figma bindings are edited later.
|
|
314
|
+
|
|
315
|
+
## Verification Plan
|
|
316
|
+
|
|
317
|
+
For Todo 802, this document is the artifact.
|
|
318
|
+
|
|
319
|
+
For the following implementation todos:
|
|
320
|
+
|
|
321
|
+
- Adapter missing: `/review` still works with current keyboard shortcut/Figma
|
|
322
|
+
helper fallback.
|
|
323
|
+
- Adapter configured and `FIGMA_TOKEN` missing: adding/rendering a Figma image
|
|
324
|
+
returns a clear error without breaking the rest of the review shell.
|
|
325
|
+
- Adapter configured and `FIGMA_TOKEN` present: a Figma node copy link can be
|
|
326
|
+
added, listed, deleted, reordered, and survives dev server restart.
|
|
327
|
+
- Existing QA adapters still pass `pnpm typecheck` and `pnpm build`.
|
package/docs/installation.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Install `df-web-review-kit` in a host project and mount the review shell on a `/review` route.
|
|
4
4
|
|
|
5
5
|
The default setup is local-only. Remote DB and presence are optional adapters.
|
|
6
|
+
For the QA adapter and Figma image store split, see [Adapter boundaries](adapters.md).
|
|
6
7
|
|
|
7
8
|
## Package Install
|
|
8
9
|
|
|
@@ -16,6 +17,22 @@ Supabase is optional. Install it only in host projects that use the Supabase ada
|
|
|
16
17
|
pnpm add @supabase/supabase-js
|
|
17
18
|
```
|
|
18
19
|
|
|
20
|
+
## Environment
|
|
21
|
+
|
|
22
|
+
Copy the repository [.env.sample](../.env.sample) into the host project as `.env.local`.
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
cp node_modules/@designfever/web-review-kit/.env.sample .env.local
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
For a local-only setup, set only the project id:
|
|
29
|
+
|
|
30
|
+
```env
|
|
31
|
+
VITE_REVIEW_PROJECT_ID=my-project
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Supabase and source-opening values are optional. Leave Supabase URL/key empty when the review shell should use local browser storage only.
|
|
35
|
+
|
|
19
36
|
## Vite Route
|
|
20
37
|
|
|
21
38
|
Create a review entry such as:
|
|
@@ -44,7 +61,7 @@ import {
|
|
|
44
61
|
localAdapter,
|
|
45
62
|
} from '@designfever/web-review-kit';
|
|
46
63
|
|
|
47
|
-
const REVIEW_PROJECT_ID = 'my-project';
|
|
64
|
+
const REVIEW_PROJECT_ID = import.meta.env.VITE_REVIEW_PROJECT_ID || 'my-project';
|
|
48
65
|
const REVIEW_PATH_PREFIX = '/review';
|
|
49
66
|
|
|
50
67
|
const local = localAdapter({
|
|
@@ -111,7 +128,7 @@ import {
|
|
|
111
128
|
} from '@designfever/web-review-kit';
|
|
112
129
|
import { createClient } from '@supabase/supabase-js';
|
|
113
130
|
|
|
114
|
-
const REVIEW_PROJECT_ID = 'my-project';
|
|
131
|
+
const REVIEW_PROJECT_ID = import.meta.env.VITE_REVIEW_PROJECT_ID || 'my-project';
|
|
115
132
|
const REVIEW_PATH_PREFIX = '/review';
|
|
116
133
|
|
|
117
134
|
const local = localAdapter({
|
|
@@ -220,15 +237,25 @@ Captured DOM nodes will include `data-wrk-source-file`, `data-wrk-source-line`,
|
|
|
220
237
|
|
|
221
238
|
In the review shell, hold `Option` over the target iframe to show source candidates from the DOM ancestry. Click the target to pin the candidate list, then choose which file to open. The side rail Source Tree panel lists section/source/data candidates and can scroll to a section or open its source/data file. It can also show live box metrics, text/font metadata, media URLs, and class tags for each node. If the file path is absolute, it opens directly. If the plugin stores relative paths, pass `sourceRoot` when mounting the shell.
|
|
222
239
|
|
|
240
|
+
Source opening reads these optional host env values from `.env.local`:
|
|
241
|
+
|
|
242
|
+
```env
|
|
243
|
+
VITE_REVIEW_SOURCE_ROOT=/absolute/path/to/project
|
|
244
|
+
VITE_REVIEW_SOURCE_EDITOR=cursor
|
|
245
|
+
VITE_REVIEW_SOURCE_URL_TEMPLATE=
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
`VITE_REVIEW_SOURCE_ROOT` is needed when the locator stores relative paths. Absolute source paths can open without it. `VITE_REVIEW_SOURCE_EDITOR` supports `vscode`, `cursor`, `webstorm`, and `custom`. Use `VITE_REVIEW_SOURCE_URL_TEMPLATE` only with `custom`; the template supports `{path}`, `{encodedPath}`, `{line}`, and `{column}`.
|
|
249
|
+
|
|
250
|
+
In Vite/ESM hosts, env values override matching `sourceRoot`, `sourceInspector.editor`, and `sourceInspector.urlTemplate` init values. Init values still work as a fallback for existing projects and CommonJS consumers.
|
|
251
|
+
|
|
223
252
|
```tsx
|
|
224
253
|
mountReviewShell({
|
|
225
254
|
projectId: REVIEW_PROJECT_ID,
|
|
226
255
|
pages,
|
|
227
256
|
adapters,
|
|
228
257
|
reviewPathPrefix: REVIEW_PATH_PREFIX,
|
|
229
|
-
sourceRoot: import.meta.env.VITE_REVIEW_SOURCE_ROOT,
|
|
230
258
|
sourceInspector: {
|
|
231
|
-
editor: 'vscode', // 'vscode' | 'cursor' | 'webstorm' | 'custom'
|
|
232
259
|
maxDepth: 9,
|
|
233
260
|
hoverOutline: true,
|
|
234
261
|
includePlacer: false,
|
|
@@ -248,7 +275,7 @@ In React shell mode, DOM/area draft composers dock into the QA panel when the sh
|
|
|
248
275
|
|
|
249
276
|
## Custom Adapter
|
|
250
277
|
|
|
251
|
-
If a team or host project owns its own QA backend, keep that adapter in the host project or in a separate package. Start from [adaptor.sample.ts](adaptor.sample.ts) and map its `WebReviewKitAdapter` methods to your backend API.
|
|
278
|
+
If a team or host project owns its own QA backend, keep that adapter in the host project or in a separate package. Start from [adaptor.sample.ts](adaptor.sample.ts) and map its `WebReviewKitAdapter` methods to your backend API. Do not put Figma image storage into the QA adapter; use a separate `ReviewFigmaImageStore`.
|
|
252
279
|
|
|
253
280
|
The sample explains the main interfaces:
|
|
254
281
|
|
|
@@ -261,12 +288,17 @@ Private keys, admin credentials, canonical numbering, and permission checks shou
|
|
|
261
288
|
|
|
262
289
|
## Environment
|
|
263
290
|
|
|
291
|
+
The full copyable template is [.env.sample](../.env.sample).
|
|
292
|
+
|
|
264
293
|
```env
|
|
265
|
-
VITE_REVIEW_PROJECT_ID=
|
|
266
|
-
VITE_REVIEW_SUPABASE_URL=
|
|
294
|
+
VITE_REVIEW_PROJECT_ID=my-project
|
|
295
|
+
VITE_REVIEW_SUPABASE_URL=
|
|
267
296
|
VITE_REVIEW_SUPABASE_ANON_KEY=
|
|
268
297
|
VITE_REVIEW_SUPABASE_TABLE=review_items
|
|
269
298
|
VITE_REVIEW_SUPABASE_PRESENCE_PRIVATE=false
|
|
299
|
+
VITE_REVIEW_SOURCE_ROOT=/absolute/path/to/project
|
|
300
|
+
VITE_REVIEW_SOURCE_EDITOR=cursor
|
|
301
|
+
VITE_REVIEW_SOURCE_URL_TEMPLATE=
|
|
270
302
|
```
|
|
271
303
|
|
|
272
304
|
Rules:
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# 릴리즈 노트: 0.7.0
|
|
2
|
+
|
|
3
|
+
0.6.0 release 이후 변경 사항 정리.
|
|
4
|
+
|
|
5
|
+
비교 기준: `0.6.0`
|
|
6
|
+
검토 기준: `main` release candidate
|
|
7
|
+
|
|
8
|
+
## 주요 변경
|
|
9
|
+
|
|
10
|
+
- Figma reference image workflow를 review shell 안으로 옮겼다.
|
|
11
|
+
- Figma image local cache와 Vite plugin helper를 추가했다.
|
|
12
|
+
- QA 작성 필드를 `fields` option으로 확장해 title을 선택적으로 받을 수 있게 했다.
|
|
13
|
+
- QA item에 optional assignee 표시/변경 flow를 추가했다.
|
|
14
|
+
- 느린 remote adapter, 특히 df-sheet 연동에서 list/create/update/delete pending 상태를 UI로 표시한다.
|
|
15
|
+
- deep link item restore와 QA list focus 위치 보정을 개선했다.
|
|
16
|
+
- right rail Figma icon stroke를 다른 rail icon과 분리해 맞췄다.
|
|
17
|
+
- 릴리즈 직전 QA mutation failure feedback과 Figma image target key 보정을 반영했다.
|
|
18
|
+
- Sitemap modal에 페이지 검색 필터를 추가했다.
|
|
19
|
+
- Sitemap tree row를 ASCII prefix 대신 접기/펼치기 가능한 folder explorer 형태로 바꿨다.
|
|
20
|
+
- Sitemap tree depth를 더 빨리 읽을 수 있게 indent 영역에 subtle guide line을 추가했다.
|
|
21
|
+
- Sitemap tree guide line을 folder caret 중앙축에 맞추고 body row divider 대신 hover/active block highlight를 사용하도록 정리했다.
|
|
22
|
+
- Sitemap body row 높이를 줄이고 상태 컬럼을 Todo/Review/Hold count 중심으로 정리했다.
|
|
23
|
+
|
|
24
|
+
## 변경
|
|
25
|
+
|
|
26
|
+
### Figma Image Workflow
|
|
27
|
+
|
|
28
|
+
review shell에서 Figma reference image를 등록하고 target page 위에 overlay로 올릴 수 있게 했다.
|
|
29
|
+
|
|
30
|
+
- dev server plugin이 Figma API 호출과 local asset cache를 담당한다.
|
|
31
|
+
- Figma token은 server env의 `FIGMA_TOKEN`을 사용하고 browser bundle로 노출하지 않는다.
|
|
32
|
+
- metadata는 `.df-review/figma-images.json`, asset은 `.df-review/figma-assets/`에 저장한다.
|
|
33
|
+
- review shell에서는 image manager panel과 layer controls를 제공한다.
|
|
34
|
+
- 일반 route에서는 host가 연결한 overlay control만 사용할 수 있게 boundary를 분리했다.
|
|
35
|
+
|
|
36
|
+
### QA Fields
|
|
37
|
+
|
|
38
|
+
adapter option에 `fields`를 추가했다.
|
|
39
|
+
|
|
40
|
+
- `fields.title`이 true일 때만 QA 작성/수정 화면에 title input을 표시한다.
|
|
41
|
+
- title은 optional field이며 없으면 기존 comment-only 작성 흐름을 유지한다.
|
|
42
|
+
- local fallback에는 assignee sample을 넣지 않고 host adapter가 필요한 field만 선언한다.
|
|
43
|
+
|
|
44
|
+
### Assignee
|
|
45
|
+
|
|
46
|
+
status와 분리된 optional assignee flow를 추가했다.
|
|
47
|
+
|
|
48
|
+
- `assigneeTitle`로 select label을 host가 지정할 수 있다.
|
|
49
|
+
- `assigneeOptions`로 담당자 목록을 넣는다.
|
|
50
|
+
- `updateAssignee`가 있는 adapter에서만 list item assignee 변경을 허용한다.
|
|
51
|
+
- edit modal에서는 assignee를 수정하지 않는다.
|
|
52
|
+
|
|
53
|
+
### Remote Adapter Pending UI
|
|
54
|
+
|
|
55
|
+
remote adapter가 느릴 때 빈 상태처럼 보이지 않도록 loading/pending feedback을 추가했다.
|
|
56
|
+
|
|
57
|
+
- QA list 로딩 중 spinner와 loading text를 표시한다.
|
|
58
|
+
- refresh 중에는 refresh button을 disabled + spinner 상태로 둔다.
|
|
59
|
+
- QA 등록/수정/삭제/status/assignee 변경 중에는 item/form 단위 pending 상태를 표시한다.
|
|
60
|
+
- create 실패 시 작성 form에 error message를 표시한다.
|
|
61
|
+
|
|
62
|
+
### Deep Link Restore
|
|
63
|
+
|
|
64
|
+
remote list가 늦게 도착하는 경우에도 URL의 `item` query를 복원할 수 있게 보정했다.
|
|
65
|
+
|
|
66
|
+
- initial item restore를 list loading 이후 한 번 더 시도한다.
|
|
67
|
+
- focus scroll 후 layout/animation 때문에 위치가 틀어지는 케이스를 다시 보정한다.
|
|
68
|
+
- df-sheet처럼 list 응답이 느린 adapter에서 deep link item focus 실패를 줄였다.
|
|
69
|
+
|
|
70
|
+
### Release Candidate Fixes
|
|
71
|
+
|
|
72
|
+
- QA status/assignee/submit/delete 실패 시 unhandled rejection으로 남기지 않고 toast로 feedback을 표시한다.
|
|
73
|
+
- QA edit 실패는 toast와 edit modal inline error를 함께 유지한다.
|
|
74
|
+
- Figma image target key가 review shell과 dev overlay에서 query/hash를 포함한 normalized target을 사용하도록 보정했다.
|
|
75
|
+
- Sitemap modal에서 페이지 이름/경로를 검색할 수 있고, 일치하는 하위 page의 상위 folder context를 유지한다.
|
|
76
|
+
- Sitemap folder row는 caret으로 접고 펼칠 수 있으며, 검색 중에는 일치 항목의 상위 folder를 자동으로 펼친다.
|
|
77
|
+
- Sitemap folder depth는 세로 guide line으로 보강해 깊은 경로도 한눈에 구분되게 했다.
|
|
78
|
+
- Sitemap body row divider를 제거하고 hover/active block highlight로 행 구분을 처리한다.
|
|
79
|
+
- Sitemap list는 Total 대신 Todo/Review/Hold state count를 직접 보여준다.
|
|
80
|
+
|
|
81
|
+
## Host 적용 메모
|
|
82
|
+
|
|
83
|
+
### Lexus dogfood integration
|
|
84
|
+
|
|
85
|
+
- Lexus host에서 df-sheet adapter로 title/assignee/status update flow를 확인했다.
|
|
86
|
+
- df-sheet list loading 동안 empty state 대신 loading state가 뜨는지 확인했다.
|
|
87
|
+
- direct URL item restore가 list load 이후 active item을 잡는지 확인했다.
|
|
88
|
+
- Lexus 배포 전에는 `link:../df-web-review-kit`를 published package version으로 바꿔야 한다.
|
|
89
|
+
|
|
90
|
+
### Vite plugin
|
|
91
|
+
|
|
92
|
+
Figma image local cache를 쓰는 host는 Vite config에 review-kit plugin helper를 연결해야 한다.
|
|
93
|
+
|
|
94
|
+
- `reviewFigmaImageStore()`는 dev/local cache endpoint를 제공한다.
|
|
95
|
+
- `FIGMA_TOKEN`은 server env로만 둔다.
|
|
96
|
+
- image format 변환이 필요하면 host가 `sharp` 같은 변환기를 plugin option으로 연결한다.
|
|
97
|
+
|
|
98
|
+
## 문서
|
|
99
|
+
|
|
100
|
+
- README quick start에 `fields`, `assigneeTitle`, `assigneeOptions`, `updateAssignee` 예시를 추가했다.
|
|
101
|
+
- custom adapter sample에 optional title/assignee field와 update flow를 추가했다.
|
|
102
|
+
- QA adapter와 Figma image store boundary 문서를 추가했다.
|
|
103
|
+
- Figma image MVP 구조 note를 추가했다.
|
|
104
|
+
|
|
105
|
+
## 검증
|
|
106
|
+
|
|
107
|
+
아래 명령을 확인했다.
|
|
108
|
+
|
|
109
|
+
- `pnpm run typecheck`
|
|
110
|
+
- `pnpm run typecheck:dev`
|
|
111
|
+
- `pnpm run lint:dead-code`
|
|
112
|
+
- `pnpm run build`
|
|
113
|
+
- `pnpm run build:dev`
|
|
114
|
+
- `npm pack --dry-run --json`
|
|
115
|
+
|
|
116
|
+
수동 확인:
|
|
117
|
+
|
|
118
|
+
- Lexus dogfood review page에서 df-sheet QA list loading state
|
|
119
|
+
- df-sheet QA create form title field
|
|
120
|
+
- QA list item status/assignee pending state
|
|
121
|
+
- direct URL item restore and focus
|
|
122
|
+
- Figma rail/menu icon stroke
|
|
123
|
+
|
|
124
|
+
## 메모
|
|
125
|
+
|
|
126
|
+
- `package.json` version은 `0.7.0`이다.
|
|
127
|
+
- npm publish 전에는 registry login 상태와 latest published version을 확인해야 한다.
|
|
128
|
+
- Lexus target app의 React SVG prop warning(`fill-rule`, `clip-rule`)은 review-kit package warning이 아니다.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designfever/web-review-kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Designfever web page review overlay toolkit.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -41,13 +41,15 @@
|
|
|
41
41
|
"files": [
|
|
42
42
|
"dist",
|
|
43
43
|
"docs",
|
|
44
|
-
"README.md"
|
|
44
|
+
"README.md",
|
|
45
|
+
".env.sample"
|
|
45
46
|
],
|
|
46
47
|
"scripts": {
|
|
47
48
|
"build": "tsup src/index.ts src/react-shell.tsx src/vite.ts --format esm,cjs --dts --sourcemap --clean --external react --external react-dom --external react/jsx-runtime",
|
|
48
49
|
"dev": "tsup src/index.ts src/react-shell.tsx src/vite.ts --format esm,cjs --dts --sourcemap --watch --external react --external react-dom --external react/jsx-runtime",
|
|
49
50
|
"dev:review": "vite --config dev/vite.config.ts",
|
|
50
51
|
"build:dev": "vite build --config dev/vite.config.ts",
|
|
52
|
+
"lint:dead-code": "knip",
|
|
51
53
|
"prepare": "pnpm build",
|
|
52
54
|
"typecheck": "tsc --noEmit",
|
|
53
55
|
"typecheck:dev": "tsc --noEmit -p tsconfig.dev.json"
|
|
@@ -64,8 +66,10 @@
|
|
|
64
66
|
},
|
|
65
67
|
"devDependencies": {
|
|
66
68
|
"@supabase/supabase-js": "^2.108.2",
|
|
69
|
+
"@types/node": "^26.0.1",
|
|
67
70
|
"@types/react": "^19.2.17",
|
|
68
71
|
"@types/react-dom": "^19.2.3",
|
|
72
|
+
"knip": "^6.20.0",
|
|
69
73
|
"lucide-react": "^1.20.0",
|
|
70
74
|
"react": "^19.2.7",
|
|
71
75
|
"react-dom": "^19.2.7",
|