Add onboarding popovers on the sandbox page

Our Playground sandbox currently lacks an effective onboarding process.
Users can get confused, especially regarding hidden interactions (like "long press" to open the drawer).

We want to provide a step-by-step onboarding experience similar to:

• Guideflow example
• Pennylane onboarding

This will later be reused for onboarding in the CMS as well.

---

What needs to be done?

1. Create a generic React hook:

   • Name: useOnboard
   • Manages steps, navigation, triggers, etc.

2. UI Component:

   • Build a component inspired by
     /packages/@intlayer/design-system/src/components/Popover/index.tsx
   • Make it closable and easily integrated into onboarding flows. (use lucide-react for close icon)

3. Integration in Sandbox page:

   • Usage in the sandbox (e.g., targeting elements by ID).

The sandbox page integrate the intlayer editor and wrap the demo page in an iframe

---

Code reference

Code of the playground page:

• apps/website/src/app/[locale]/(playground)/playground/page.tsx

Code of the demo page:

• apps/website/src/app/[locale]/(landing)/demo/page.tsx

---

Motivation & Goal

• Reduce user friction, improve onboarding and feature discovery.
• Allow us to plug the same logic into other flows (e.g., CMS onboarding).
• Keep everything generic, composable, and open for contributions.

---

API Proposal: useOnboard

const MyComponent = () => {
  useOnboard(({ goToStep }) => ({
    "init": { 
      target: () => document.getElementById("elementId1"), // HTMLElement or HTMLElement[]
      title: "Long press",
      instruction: "Long press on this content to display the drawer",
      // Trigger: validate onboarding step when this event happens
      trigger: (callback: () => void) => {
        // Example: listen for a specific event and call callback()
        window.addEventListener('message', (e) => {
          if (e.data === "test") callback();
        });
      },
      onValidate: () => goToStep("strep-2"),
    },
    'step-2': { 
      target: () => document.getElementById("elementId2"),
      title: "Close",
      instruction: "Click to close the drawer",
      trigger: (callback: () => void) => {
        document.getElementById("elementId2")?.addEventListener('click', () => callback());
      },
      onValidate: () => null,
    }
  }))
}

this code is just an example of implementation, feel free to adapt it as you feel

Requirements

• target: A function returning an element (or array) to anchor the popover.
• title & instruction: Strings shown in the popover.
• trigger: Function for custom logic to progress the step.
• onValidate: Called when the step is validated, e.g., for chaining steps.

---

UI Component Requirements

• Built on the design-system Popover
• Must be closable
• Supports dynamic placement based on target
• Simple styling consistent with the design system

Start by reading apps/website/src/app/[locale]/(playground)/playground/page.tsx and the demo page at apps/website/src/app/[locale]/(landing)/demo/page.tsx, then inspect packages/@intlayer/design-system/src/components/Popover/index.tsx. Define the reusable useOnboard flow and closable popover integration for the sandbox, with step targets, triggers, and validation chaining working as the completion criteria.