@blackpoi55/screenshotreport

v1.0.13

Published

6 days ago

In-app screenshot capture + annotation + bug/case report dashboard. Drop-in for any React/Next project.

Downloads

1,779

0High
0Medium
0Low

blackpoi55

@blackpoi55/screenshotreport

ระบบ จับภาพหน้าจอ (capture) + วาด annotation + ส่ง bug/case report + dashboard แบบ drop-in สำหรับโปรเจค React / Next.js ทุกตัวในบริษัท

📷 ปุ่มลอยแคปหน้าจอ (ลากเลือกพื้นที่) + วางรูปจาก clipboard
✏️ เครื่องมือแก้ไข: กล่อง / ลูกศร / วงกลม / ข้อความ / เบลอ / วาดอิสระ (ใช้ fabric)
📩 ส่งรายงานเข้า API
📊 Dashboard ติดตามเคส + filter + export PDF + chat IT↔Dev
⚙️ ตั้งค่าทุกอย่างผ่าน config เดียว — ไม่มีค่า hardcode

ติดตั้ง

publish เป็น public บน npm แล้ว — ติดตั้งได้เลย ไม่ต้องตั้ง registry / token อะไร:

npm install @blackpoi55/screenshotreport
# หรือ
pnpm add @blackpoi55/screenshotreport

peer dependency: react >= 16.14, react-dom >= 16.14 (มีอยู่แล้วในโปรเจค React/Next) next เป็น optional — ไม่บังคับ ใช้กับ React ล้วนก็ได้

✅ Compatibility

Package นี้ bundle dependency ทุกตัวมาในตัว (html2canvas-pro, fabric, sweetalert2, jspdf, lucide-react) เหลือแค่ react เป็น external — จึงทำงานได้ทันทีแบบ zero-config:

| สภาพแวดล้อม | รองรับ | หมายเหตุ | |-------------|--------|----------| | Next.js App Router (13+) | ✅ | มี "use client" ในตัว | | Next.js Pages Router (ทุกเวอร์ชัน 10+) | ✅ | ดูตัวอย่าง _app.tsx ด้านล่าง | | React ล้วน (Vite/CRA) | ✅ | React 16.14+ |

ไม่ต้องตั้ง transpilePackages / next-transpile-modules เพราะ fabric (ESM) ถูก bundle มาแล้ว และยังคง lazy-load (ผ่าน dynamic import) จึง ปลอดภัยกับ SSR — ไม่ถูกโหลดตอน render ฝั่ง server

ใช้งาน

1. ครอบ `ScreenshotProvider` + import CSS (ครั้งเดียว)

// app/layout.tsx  (Next.js App Router)
import { ScreenshotProvider } from "@blackpoi55/screenshotreport";
import "@blackpoi55/screenshotreport/styles.css"; // CSS มาในตัว — scope ใต้ .sr-scope ไม่ชน CSS แอป

const members = [
  { label: "โบ๊ท", value: "โบ๊ท", color: "#ff96e9", textcolor: "#cdfdff", image: "<svg.../>" },
  { label: "ออย",  value: "ออย",  color: "#ff8903" },
];

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ScreenshotProvider
          config={{
            projectCode: "myproject",                           // เดิม = bucode (รหัสโปรเจคของคุณ)
            apiBaseUrl: "https://api-h-series.telecorp.co.th/api",
            caseReportPath: "/casereport",                      // ปุ่ม 💬 เปิดหน้านี้ (ตั้งตาม route จริง)
            members,                                            // เดิม = devOptions
            projectName: "My Project",                          // แสดงบนรายงาน (optional)
          }}
        >
          {children}
        </ScreenshotProvider>
      </body>
    </html>
  );
}

ปุ่มลอย 📷 💬 📄 จะโผล่มุมซ้ายล่างอัตโนมัติ (Ctrl+Q แคป, Ctrl+B วางรูป)

2. หน้า Dashboard

// app/casereport/page.tsx   (ตั้ง path ให้ตรงกับ caseReportPath ใน config)
import { CaseReportDashboard } from "@blackpoi55/screenshotreport";

export default function Page() {
  return <CaseReportDashboard />;
}

CaseReportDashboard ต้องอยู่ใต้ ScreenshotProvider เพื่ออ่าน config เดียวกัน

3. ใช้กับ Pages Router (Next.js เก่า)

// pages/_app.tsx
import type { AppProps } from "next/app";
import { ScreenshotProvider } from "@blackpoi55/screenshotreport";
import "@blackpoi55/screenshotreport/styles.css"; // scope ใต้ .sr-scope — ไม่ชน CSS แอป

const config = {
  projectCode: "myproject",
  apiBaseUrl: "https://api-h-series.telecorp.co.th/api",
  caseReportPath: "/casereport",
  members: [/* ... */],
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ScreenshotProvider config={config}>
      <Component {...pageProps} />
    </ScreenshotProvider>
  );
}

// pages/casereport.tsx  (ปิด SSR เพราะ dashboard เป็น client-only)
import dynamic from "next/dynamic";
const CaseReportDashboard = dynamic(
  () => import("@blackpoi55/screenshotreport").then((m) => m.CaseReportDashboard),
  { ssr: false }
);
export default function Page() {
  return <CaseReportDashboard />;
}

Config ทั้งหมด

| field | required | เดิมคือ | ค่า default | |-------|----------|---------|-------------| | projectCode | ✅ | bucode | - | | apiBaseUrl | ✅ | hardcode URL | - | | caseReportPath | ✅ | subpath + "/casereport" | - | | members | ✅ | devOptions | - | | projectName | | projectOptions label | = projectCode | | statusOptions | | statusOptions | ค่ามาตรฐาน | | priorityOptions | | priorityOptions | ค่ามาตรฐาน | | sortOptions | | sortOptions | ค่ามาตรฐาน | | titleOptions | | dropdown หัวข้อปัญหา | ค่ามาตรฐาน | | moduleOptions | | dropdown modules | ค่ามาตรฐาน | | typeOptions | | dropdown ประเภท | ค่ามาตรฐาน | | attachmentUrl | | ลิงก์ Google Drive | ไม่แสดงถ้าไม่ตั้ง | | enabled | | เปิด/ปิดปุ่มลอย (ปิดชั่วคราวได้) | true | | position | | มุมปุ่มลอย: bottom-left / bottom-right / top-left / top-right | "bottom-left" |

ตัวอย่าง config แบบเต็ม (ทุก field)

projectCode, apiBaseUrl, caseReportPath, members = ต้องมี ที่เหลือ optional option arrays ด้านล่างคือค่า default อยู่แล้ว — ใส่เฉพาะตอนอยากแก้ ไม่ใส่ก็ได้

const screenshotConfig = {
  // ===== required =====
  projectCode: "myproject",                                // รหัสโปรเจค (เดิม = bucode)
  apiBaseUrl: "https://api-h-series.telecorp.co.th/api",   // ฐาน API (ไม่ต้องมี / ท้าย)
  caseReportPath: "/casereport",                           // path หน้า dashboard (ปุ่ม 💬 เปิดหน้านี้)
  members: [                                               // ผู้ดูแล dev/IT (เดิม = devOptions)
    // label/value ต้องมี ; color/textcolor/image (SVG string) ใส่หรือไม่ก็ได้
    { label: "โบ๊ท", value: "โบ๊ท", color: "#3b82f6", textcolor: "#ffffff" },
    { label: "เอส",  value: "เอส",  color: "#ef4444", textcolor: "#ffffff" },
    // { label: "แคมป์", value: "แคมป์", color: "#06b6d4", image: "<svg ...>...</svg>" }, // มีไอคอนได้
  ],

  // ===== optional (มี default) =====
  projectName: "My Project",                               // ชื่อบนรายงาน/หัว dashboard (default = projectCode)
  attachmentUrl: "https://drive.google.com/drive/folders/xxxxx", // ลิงก์แนบในโมดัลเคส (ไม่ใส่ = ไม่โชว์)
  enabled: true,              // false = ปิดปุ่มลอย/เครื่องมือชั่วคราว
  position: "bottom-left",    // มุมปุ่มลอย: bottom-left | bottom-right | top-left | top-right

  // ---- dropdown options (ค่านี้คือ default อยู่แล้ว ใส่เพื่อ override เท่านั้น) ----
  statusOptions: [
    { label: "ทั้งหมด", value: "" },
    { label: "🟡 pending", value: "pending" },
    { label: "💻 Dev Done", value: "devdone" },
    { label: "🔧รออัพ Production", value: "waitproduction" },
    { label: "💻 Test Done", value: "testdone" },
    { label: "✅ resolved", value: "resolved" },
    { label: "❌ rejected", value: "rejected" },
    { label: "🔄 Converted to CR", value: "convertedtocr" },
  ],
  priorityOptions: [
    { label: "ทุกความสำคัญ", value: "" },
    { label: "🔴 1 วิกฤติ", value: "1 วิกฤติ" },
    { label: "🟠 2 สูง", value: "2 สูง" },
    { label: "🟡 3 ปานกลาง", value: "3 ปานกลาง" },
    { label: "🟢 4 ต่ำ", value: "4 ต่ำ" },
  ],
  sortOptions: [
    { label: "ล่าสุด ⬇️", value: "createdat-desc" },
    { label: "เก่าสุด ⬆️", value: "createdat-asc" },
  ],
  titleOptions: [   // dropdown "หัวข้อปัญหา" ตอนกดส่งเคส
    { label: "-- เลือกหัวข้อปัญหา --", value: "" },
    { label: "🌐 หน้าเว็บโหลดไม่ขึ้น", value: "หน้าเว็บโหลดไม่ขึ้น" },
    { label: "🌀 หน้าเว็บค้าง / ไม่ตอบสนอง", value: "หน้าเว็บค้างหรือไม่ตอบสนอง" },
    { label: "🚨 Error / แจ้งเตือนผิดปกติ", value: "เกิด Error หรือแจ้งเตือนผิดปกติ" },
    { label: "🔘 ปุ่มหรือฟังก์ชันกดไม่ได้", value: "ปุ่มหรือฟังก์ชันใช้งานไม่ได้" },
    { label: "📥 กรอกข้อมูลแล้วไม่บันทึก", value: "กรอกข้อมูลแล้วไม่บันทึก" },
    { label: "📊 ข้อมูลแสดงผลผิด", value: "แสดงผลไม่ถูกต้อง" },
    { label: "🔐 เข้าสู่ระบบไม่ได้", value: "ปัญหาการเข้าสู่ระบบ" },
    { label: "🐢 โหลดข้อมูลช้า / Time out", value: "โหลดข้อมูลช้า / Time out" },
    { label: "💥 ระบบล่ม", value: "ระบบล่มทั้งหมด" },
    { label: "✏️ อื่น ๆ (ระบุในรายละเอียด)", value: "อื่น ๆ" },
  ],
  moduleOptions: [   // dropdown "modules" ในโมดัลเคส
    { label: "🟢 Inventory", value: "Inventory" },
    { label: "🟠 QA", value: "QA" },
    { label: "🔴 LAB/Admin", value: "LAB/Admin" },
    { label: "🚨 Equipment", value: "Equipment" },
    { label: "🚨 Variance", value: "Variance" },
    { label: "🚨 Setting", value: "Setting" },
  ],
  typeOptions: [   // dropdown "ประเภทที่แจ้ง" ในโมดัลเคส
    { label: "🟢 Issue", value: "Issue" },
    { label: "🟠 ขอเพิ่มเงื่อนไข/ปรับการแสดงผล", value: "ขอเพิ่มเงื่อนไข/ปรับการแสดงผล" },
    { label: "🔴 คำถาม/ปรึกษา", value: "คำถาม/ปรึกษา" },
    { label: "🚨 Change Request", value: "Change Request" },
    { label: "🚨 User Error", value: "User Error" },
    { label: "🚨 Bug", value: "Bug" },
  ],
};

เกร็ด: <ScreenshotProvider> มี prop withFloatingButton (default true) — ใส่ withFloatingButton={false} ถ้าอยากได้แค่ dashboard ไม่เอาปุ่มลอย

Endpoints ที่ใช้ (อิงจาก apiBaseUrl):

POST {apiBaseUrl}/bugreport — ส่งรายงานใหม่
GET {apiBaseUrl}/bugreport/getbyCode/{projectCode} — ดึงเคส
PUT {apiBaseUrl}/bugreport/{id} — อัปเดตสถานะ/หมายเหตุ/chat

Payload ที่ส่งตอนแคปจะมีทั้ง projectCode และ bucode (ค่าเดียวกัน) เพื่อความเข้ากันได้กับ API เดิม

หมายเหตุการใช้งาน

HTTPS/localhost เท่านั้น — Clipboard API (copy/paste รูป) ต้องรันบน secure context
CSS: styles ทุกตัว scope ใต้ .sr-scope (component ห่อให้อัตโนมัติ) + preflight ปิด → ไม่มีทางไปชน/ทับ CSS ของแอปคุณเลย แม้แอปใช้ Tailwind v4 — import ลำดับไหนก็ได้ ไม่ต้องกังวล
godmode: เปิดหน้า dashboard ด้วย ?godmode=admin (ADMIN) หรือ ?godmode=IT เพื่อปลดสิทธิ์แก้ไข (เก็บใน localStorage)

Dev / Publish

npm install
npm run build          # สร้าง dist/ (js + d.ts + styles.css)

# publish ขึ้น public npm (npm login ก่อน; scope @blackpoi55 = บัญชี npm ของเจ้าของ)
npm publish --access public

โครงสร้าง:

src/
  index.ts                 # barrel export
  types.ts                 # ReportConfig, BugCase, ...
  config.ts                # default options + resolveConfig()
  ReportConfigContext.tsx  # context + useReportConfig (leaf)
  ScreenshotProvider.tsx   # <ScreenshotProvider config={...}>
  ScreenshotTool.tsx       # ปุ่มลอย + capture + editor + ส่ง
  CaseReportDashboard.tsx  # dashboard
  api.ts                   # fetch ทั้งหมด
  styles.css               # tailwind input (bundle -> dist/styles.css)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@blackpoi55/screenshotreport

ติดตั้ง

✅ Compatibility

ใช้งาน

1. ครอบ ScreenshotProvider + import CSS (ครั้งเดียว)

2. หน้า Dashboard

3. ใช้กับ Pages Router (Next.js เก่า)

Config ทั้งหมด

ตัวอย่าง config แบบเต็ม (ทุก field)

หมายเหตุการใช้งาน

Dev / Publish

1. ครอบ `ScreenshotProvider` + import CSS (ครั้งเดียว)