feat: turn into public integration playground

[anyelopetit]

Turn hellotext-react-test Into a Public Integration Playground

Summary

This PR transforms the existing hellotext-react-test app from a minimal Create React App starter (with hardcoded values and default boilerplate) into a fully functional integration playground for the public Hellotext JavaScript SDK. The playground is designed for customers and internal QA to quickly verify SDK features — tracking events, forms, webchat, UTM capture, and session management — without editing source code or accessing the main Hellotext codebase.

---

What Changed

Dependency & Build

Area	Before	After
SDK source	git://github.com/hellotext/hellotext.js#b8e3f92... (pinned SHA)	@hellotext/hellotext: ^2.4.0 (public npm)
SDK styles	Not imported	@hellotext/hellotext/styles/index.css imported in index.js
Package name	my-app	hellotext-playground
Removed	reportWebVitals.js, logo.svg, whatwg-fetch devDep	—
Tests	Default CRA "renders learn react link"	7 tests covering setup, init, dashboard, tabs, event log

New Components (all in src/components/)

Component	Purpose
SetupScreen.js	Runtime Business ID + Webchat ID entry form with localStorage persistence
Dashboard.js	Tab navigation layout with header, reset button, and event log sidebar
SessionPanel.js	Displays Hellotext.session and listens for session-set
UtmPanel.js	Shows captured UTM data, provides test URL link, listens for utm-set
TrackingPanel.js	Preset event buttons (product.viewed, cart.added, checkout.started) + custom event input
FormsPanel.js	Mount/unmount forms by ID via data-hello-form, listens for forms:collected / form:completed
WebchatPanel.js	Monitors webchat lifecycle events (mounted, opened, closed, message:sent/received)
EventLog.js	Shared log panel with timestamps, status badges, and JSON payload display
HellotextLogo.js	Reusable SVG logo component using currentColor

Branding & Design

• Color scheme aligned with Hellotext brand: primary blue #5d00b2 (buttons, interactive elements), accent orange #ff4a00 (logo), white backgrounds.
• SVG logo replaces plain text in both the Setup Screen and Dashboard header.
• Design system built with CSS custom properties for consistent theming.
• Google Fonts loaded: Inter (sans-serif) and JetBrains Mono (monospace).
• Responsive layout: side-by-side on desktop, stacked on mobile (≤900px).

Documentation

File	Description
README.md	Rewritten: prerequisites, getting started, feature overview, testing, build
docs/USER_MANUAL.md	Comprehensive step-by-step guide with QA checklists, troubleshooting tables, and architecture reference

---

Screenshots

Setup Screen — Login with Business ID

The first screen users see. Enter a public Business ID (and optionally a Webchat ID) to initialize the SDK. Values persist in localStorage.

---

Session Panel

Displays the current Hellotext.session token. The session-set event fires when the session is assigned and appears in the Event Log.

---

UTM Capture Panel

Shows how the SDK captures UTM parameters from the URL. Includes a "Test URL" button to reload with sample params and a table displaying captured values.

---

Tracking Events Panel

Fire preset tracking events (product.viewed, cart.added, checkout.started) or enter a custom event name with JSON params. Each call logs success/error in the Event Log.

---

Forms Panel

Enter a Form ID to mount a <div data-hello-form="..."> element. The SDK discovers and renders the form. Listens for forms:collected and form:completed events.

---

Webchat Panel

Monitors webchat lifecycle events. If webchat is configured for the business, the widget appears in the bottom-right corner. Events like webchat:mounted, webchat:opened, and webchat:message:sent appear in the log.

---

How to Test

Quick verification

git checkout feat/public-integration-playground
yarn install
yarn start
# Open http://localhost:3000
# Enter a Business ID → Then you can explore all tabs

Automated tests

yarn test --watchAll=false

All 7 tests pass:

 PASS  src/App.test.js
  Setup Screen
    ✓ renders setup screen with Business ID input and Initialize button
    ✓ Initialize button is disabled when Business ID is empty
    ✓ persists Business ID in localStorage after initialization
  Dashboard
    ✓ shows dashboard with tab navigation after initialization
    ✓ displays the Business ID in the dashboard header
    ✓ event log is visible and shows initialization entry
    ✓ switching tabs updates the visible panel

Test Suites: 1 passed, 1 total
Tests:       7 passed, 7 total

Production build

yarn build
# Outputs to build/ — no warnings, no errors

[pelcasandra]

The images are broken.

[anyelopetit]

The images are broken.

Already fixed it. Sorry for that