[Project - Onboarding]: Implement flow "step-by-step guide"

[valentinpalkovic]

Implement flow "step-by-step guide"

Guided tour: In the first step, Storybook will introduce users to the primary key concepts of the manager through a guided tour. We will use a step-by-step tooltip-driven mechanism to introduce concepts such as what a story is, the sidebar, canvas or story preview, and interactive story updates via arg. This guided tour will provide users with a foundational understanding of the key concepts they need to start with Storybook.

Prerequisites

Preview Give feedback

1. Each element, on which we want to show a tooltip, has to be uniquely accessible via CSS selectors. If elements are not accessible yet by a unique CSS selector, add an ID to the element in the manager.
2. Check, whether the channel API allows to navigate between stories and to listen to Control changes. If we cannot detect a control change, let's just listen to the URL, when the control changes in step 4

Steps

Step 1: Welcome to Storybook

If the requirements are fulfilled (onboarding=true param is set in URL), the onboarding gets triggered, and a "Welcome to Storybook modal appears"
.

• Clicking on "Start 3-minute tour" will continue to step 2.
• Clicking on "Skip tour" will remove the onboarding=true parameter from the URL. This should also trigger the onboarding to be closed.

Step 2: Your Stories

The second step introduces the concept of Stories and explains where to find them in the sidebar. The stories section of the sidebar gets highlighted.

• Clicking on "Next" will continue to step 3

Step 3: Interactive story preview

This step will explain the user, where their component will appear. The canvas area gets highlighted

• Clicking on "Next" will continue to step 4

Step 4: Interactive story playground

The whole main area of the Storybook manager gets highlighted. The tooltip appears beside the primary button control. Ther ribbon effect will be implemented separately. Don't care of this for now.

• Clicking on the control will continue to step 5

Step 5: Nice One!

Arriving at step 5 will fire a confetti rain at the main area of Storybook. A new tooltip will pop up, which tells you to continue to the "How to write a Story" part of the onboarding guide. Do not implement the confetti rain. This will be part of a different ticket.

At this step, the "step-by-step introduction ends, and the "How to write your first Story" part starts, which is handled in a different ticket.