@fivepixels-js/react 0.1.0 → 0.1.1
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 +53 -2
- package/package.json +17 -3
package/README.md
CHANGED
|
@@ -1,7 +1,58 @@
|
|
|
1
1
|
# fivepixels
|
|
2
2
|
|
|
3
|
+
React library for **DOM element-level feedback** on staging, QA, and internal tool screens. Click targets to drop markers, collaborate with replies and reviews, and optionally escalate to GitHub Issues.
|
|
4
|
+
|
|
5
|
+
**Full documentation:** [library.codi-agit.com/fivepixels/guide](https://library.codi-agit.com/fivepixels/guide)
|
|
6
|
+
|
|
7
|
+
- **`data-report-id`** — re-find elements and restore marker positions after navigation or layout changes
|
|
8
|
+
- **Shadow Root UI** — panel, overlay, and markers isolated from host CSS; no stylesheet import required
|
|
9
|
+
- **localStorage or custom API** — omit handlers for browser storage, or pass `onList` / `onCreate` / `onUpdate` / `onDelete`
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @fivepixels-js/react react react-dom
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick Start
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { FivePixels } from "@fivepixels-js/react";
|
|
21
|
+
|
|
22
|
+
export default function App() {
|
|
23
|
+
return (
|
|
24
|
+
<>
|
|
25
|
+
<FivePixels />
|
|
26
|
+
|
|
27
|
+
<main>
|
|
28
|
+
<section
|
|
29
|
+
data-report-id="hero"
|
|
30
|
+
data-report-type="group"
|
|
31
|
+
>
|
|
32
|
+
<button data-report-id="hero-cta">Get started</button>
|
|
33
|
+
</section>
|
|
34
|
+
</main>
|
|
35
|
+
</>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
- `project.id` defaults to `"my-app"`. Set `project={{ id }}` for stage/production or multi-app setups.
|
|
41
|
+
- Render `<FivePixels />` once on pages that accept feedback.
|
|
42
|
+
- Target elements need `data-report-id`. Optional `data-report-type` defaults to `item`; use `group` for section-level targets.
|
|
43
|
+
- No CSS import — UI mounts inside a Shadow Root with bundled styles.
|
|
44
|
+
- For SSR (Next.js, etc.), render `FivePixels` on the client only (`"use client"`, dynamic import, etc.).
|
|
45
|
+
|
|
46
|
+
See the [guide](https://library.codi-agit.com/fivepixels/guide) for configuration, persistence, GitHub integration, and the full API.
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 한국어 문서
|
|
51
|
+
|
|
3
52
|
스테이징·QA·내부 도구 화면 위에 **DOM 요소 단위 피드백**을 남기는 React 라이브러리입니다. 버튼·섹션을 클릭해 마커를 찍고, 팀과 답변·검수 흐름을 거친 뒤 필요하면 GitHub Issue로 승격할 수 있습니다.
|
|
4
53
|
|
|
54
|
+
상세 가이드: [library.codi-agit.com/fivepixels/guide](https://library.codi-agit.com/fivepixels/guide)
|
|
55
|
+
|
|
5
56
|
- **`data-report-id`** — 화면이 바뀌어도 `querySelector`로 같은 요소를 다시 찾아 마커 위치를 복원합니다.
|
|
6
57
|
- **Shadow Root UI** — 호스트 앱 CSS와 분리된 패널·오버레이·마커를 제공합니다. 별도 CSS import는 필요 없습니다.
|
|
7
58
|
- **localStorage 또는 서버** — handler를 생략하면 브라우저 저장, `onList`/`onCreate`/`onUpdate`를 넘기면 API 연동합니다.
|
|
@@ -16,13 +67,13 @@
|
|
|
16
67
|
|
|
17
68
|
답변·검수(`denied` / `confirm` / `checkout`) 상세는 [Feedback Workflow](#feedback-workflow-view-모드)를 참고하세요.
|
|
18
69
|
|
|
19
|
-
|
|
70
|
+
### 설치
|
|
20
71
|
|
|
21
72
|
```bash
|
|
22
73
|
npm install @fivepixels-js/react react react-dom
|
|
23
74
|
```
|
|
24
75
|
|
|
25
|
-
|
|
76
|
+
### 빠른 시작
|
|
26
77
|
|
|
27
78
|
```tsx
|
|
28
79
|
import { FivePixels } from "@fivepixels-js/react";
|
package/package.json
CHANGED
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fivepixels-js/react",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "DOM element
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "React library for DOM element feedback markers on staging, QA, and internal tool UIs",
|
|
5
5
|
"license": "MIT",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"react",
|
|
8
|
+
"feedback",
|
|
9
|
+
"qa",
|
|
10
|
+
"staging",
|
|
11
|
+
"dom",
|
|
12
|
+
"markers",
|
|
13
|
+
"review",
|
|
14
|
+
"shadow-dom",
|
|
15
|
+
"ui",
|
|
16
|
+
"fivepixels",
|
|
17
|
+
"visual-feedback",
|
|
18
|
+
"github-issues"
|
|
19
|
+
],
|
|
6
20
|
"publishConfig": {
|
|
7
21
|
"access": "public"
|
|
8
22
|
},
|
|
@@ -10,7 +24,7 @@
|
|
|
10
24
|
"type": "git",
|
|
11
25
|
"url": "https://github.com/kimsangjunv1/fivepixels.git"
|
|
12
26
|
},
|
|
13
|
-
"homepage": "https://
|
|
27
|
+
"homepage": "https://library.codi-agit.com/fivepixels/guide",
|
|
14
28
|
"bugs": {
|
|
15
29
|
"url": "https://github.com/kimsangjunv1/fivepixels/issues"
|
|
16
30
|
},
|