Add onboarding popovers on the sandbox page

[aymericzip]

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