[Tracking] Storybook Onboarding

[vanessayuenn]

This ticket is a tracking ticket for implementing the new Storybook Onboarding flow.

---

1. Milestone - Prepare @storybook/addon-onboarding

Preview Give feedback

1. [Project - Onboarding]: Create a new addon @storybook/addon-onboarding addon-onboarding#15
   +0
   

2. Milestone - Minimum setup of @storybook/addon-onboarding

Preview Give feedback

1. [Project - Onboarding]: Set up a new React application in @storybook/addon-onboarding addon-onboarding#14
   +0
   
2. [Project - Onboarding]: Set up Storybook and Chromatic for @storybook/addon-onboarding addon-onboarding#13
   +0
   

3. Milestone - Component development and library selection

Preview Give feedback

1. [Project - Onboarding]: Evaluate and decide which tooltip library we want to use addon-onboarding#12
   +0
   
2. [Project - Onboarding]: Evaluate and decide which state management library to use (native React Context, recoil, redux,...) addon-onboarding#11
   +0
3. [Project - Onboarding]: Implement Modal component (without styling) addon-onboarding#8
   +0
   
4. [Project - Onboarding]: Implement Tooltip functionality (without styling) #22673
   1 of 1
   +0
   
5. [Project - Onboarding]: Implement Hook "useElementHighlighter" #22675
   +0
   
6. [Project - Onboarding]: Implement Code Syntax highlighter (without styling) addon-onboarding#9
   +0
   
7. [Project - Onboarding]: Implement progress bar (without styling) #22785
   +0
8. [Project - Onboarding]: Implement list component (without styling) #22786
   +0
9. [Project - Onboarding]: Initialize Emotion ThemeProvider #22783
   +0
   
10. [Project - Onboarding]: Implement dummy Confetti component addon-onboarding#10
    +0
    

4. Milestone - Implement onboarding flow

Preview Give feedback

1. [Project - Onboarding]: Implement flow "step-by-step guide" addon-onboarding#16
   2 of 2
   +0
   
2. [Project - Onboarding]: Implement flow: "How to write your first Story" #22891
   +0
   

5. Milestone - Tracking

Preview Give feedback

1. [Project - Onboarding]: Implement Browser-to-Node Telemetry Events for @storybook/addon-onboarding addon-onboarding#36
   +0
2. [Project - Onboarding]: Implement telemetry in each step of the onboarding flow addon-onboarding#39
   +0
3. Add onboarding_story_count to project metadata

6. Milestone - Styling/polishing/cleanup

Preview Give feedback

1. [Project - Onboarding]: Style Modal component addon-onboarding#23
   +0
   
2. [Project - Onboarding]: Style Tooltip component addon-onboarding#24
   +0
   
3. [Project - Onboarding]: Style SyntaxHighlighter addon-onboarding#25
   +0
   
4. [Project - Onboarding]: Style list component addon-onboarding#26
   +0
   
5. [Project - Onboarding]: Add ribbon to Step Interactive story playground addon-onboarding#17
   +0
   
6. [Project - Onboarding]: Design and add the "Configure Your Project" mdx file addon-onboarding#27
   +0
   
7. [Project - Onboarding]: Style welcome modal addon-onboarding#28
   +0
   
8. [Project - Onboarding]: Style confettis animation addon-onboarding#29
   +0
   
9. [Project - Onboarding]: Style PulsatingEffect addon-onboarding#30
   +0
   
10. [Project - Onboarding]: Style stories modal addon-onboarding#31
    +0
    
11. [Project - Onboarding]: Add background to Write Stories modal addon-onboarding#32
    +0
    
12. [Project - Onboarding]: Trigger onboarding only for screen width > x (TBD) #22977
    +0
    
13. [Project - Onboarding]: [TBD] Let people know to remove the addon as soon as it doesn't get triggered any more by showing a console.warn message #22978
    +0
    
14. [Project - Onboarding]: Make Toggle step more resilient because it tends to be activated before users interact with it #22980
    +0
    

7. Milestone - Connect Onboarding flow to Storybook's CLI

Preview Give feedback

1. [Project - Onboarding]: Adjust storybook dev to accept url params to trigger the onboarding #22870
   +0
   
2. [Project - Onboarding]: Automate call to storybook dev <url-params> after storybook init #22871
   +0
   
3. [Project - Onboarding]: Adjust "storybook init" to automatically set up "@storybook/addon-onboarding" for react-based Projects #22872
   +0
   
4. [Project - Onboarding]: Adjust created dummy files and Storybook configuration #22784
   1 of 1
   +0
   

8. Milestone - QA

Preview Give feedback

1. Test in Latest Safari
2. Test in latest Chrome
3. Test in latest Firefox
4. Test in latest Edge
5. Test in dark/light mode
6. Test responsiveness
7. Test all react-based frameworks once. Make sure the right code in the SyntaxHighlighter is shown (Javascript, Typescript and Next.js (Typescript/Javascript)
8. Make sure @storybook/addon-onboarding is not listed in addon catalog

Design Tasks

Preview Give feedback

1. Fix moving backgrop in the syntaxHighlighter
2. Change copy sentence to have the path underneath
3. Improve guided tour in dark mode
4. Fix Copy Button positioning
5. Explore more inspiring ways to present features in the configure page
6. Round 2 design QA addon-onboarding#60
   +0

9. Rollout

Preview Give feedback

1. Change the @storybook/telemetry dependency in @storybook/addon-onboarding to the version, which ships Core: Integrate serverChannel into channel #22940 and test whether telemetry events are sent
2. Merge React: Add addon-onboarding as part of init #22972 into next. Do NOT patch it back to main.
3. [Optional] Announcement post on Discord. Talk with Joe about the timing and when to release the post. Ask explicitly for community feedback within the post