Update checklist according to latest proposal

Author: ghengeveld

code/core/src/manager-api/modules/stories.ts

@@ -120,6 +120,13 @@ export interface SubAPI {
    * @returns {API_LeafEntry} The current story's data.
    */
   getCurrentStoryData: () => API_LeafEntry;
+  /**
+   * Returns the current story index.
+   *
+   * @returns {API_PreparedStoryIndex | undefined} The current story index, or undefined if not yet
+   *   loaded.
+   */
+  getIndex: () => API_PreparedStoryIndex | undefined;
   /**
    * Sets the prepared story index to the given value.
    *
@@ -343,6 +350,10 @@ export const init: ModuleFn<SubAPI, SubState> = ({
 
       return api.getData(storyId, refId);
     },
+    getIndex: () => {
+      const { internal_index } = store.getState();
+      return internal_index;
+    },
     getParameters: (storyIdOrCombo, parameterName) => {
       const { storyId, refId } =
         typeof storyIdOrCombo === 'string'

code/core/src/manager/components/sidebar/ChecklistModule.stories.tsx

@@ -26,7 +26,7 @@ const meta = preview.meta({
       loaded: true,
       muted: false,
       accepted: ['controls'],
-      done: ['add-component'],
+      done: ['install-storybook', 'first-story', 'whats-new-storybook-10'],
       skipped: ['viewports'],
     });
   },

code/core/src/manager/settings/Checklist/Checklist.stories.tsx

@@ -38,7 +38,7 @@ export const Default = meta.story({
     ...checklistData,
     ...checklistStore,
     accepted: ['controls'],
-    done: ['add-component'],
+    done: ['install-storybook', 'first-story', 'whats-new-storybook-10'],
     skipped: ['viewports'],
   },
 });

code/core/src/manager/settings/Checklist/checklistData.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 
 import { Link } from 'storybook/internal/components';
+import {
+  STORY_ARGS_UPDATED,
+  STORY_FINISHED,
+  STORY_INDEX_INVALIDATED,
+  UPDATE_GLOBALS,
+} from 'storybook/internal/core-events';
 import type { API_IndexHash } from 'storybook/internal/types';
 
 import { type API } from 'storybook/manager-api';
@@ -32,20 +38,28 @@ export interface ChecklistData {
 export const checklistData: ChecklistData = {
   sections: [
     {
-      id: 'build',
-      title: 'Build',
+      id: 'basics',
+      title: 'Storybook basics',
       items: [
         {
-          id: 'whats-new-sb-9',
+          id: 'install-storybook',
+          label: 'Install Storybook',
+          subscribe: ({ done }) => done(),
+        },
+        {
+          id: 'whats-new-storybook-10',
           label: "See what's new",
           action: {
             label: 'Start',
-            onClick: ({ api }) => api.navigate('/settings/whats-new'),
+            onClick: ({ api, accept }) => {
+              api.navigate('/settings/whats-new');
+              accept();
+            },
           },
         },
         {
-          id: 'add-component',
-          label: 'Add component',
+          id: 'first-story',
+          label: 'Create first story',
           content: (
             <>
               <p>
@@ -63,52 +77,133 @@ export const checklistData: ChecklistData = {
               </p>
             </>
           ),
-          // subscribe: ({ done }) => done(),
+          subscribe: ({ api, done }) =>
+            api.on(STORY_FINISHED, ({ status }) => status === 'success' && done()),
         },
         {
-          id: 'add-5-10-components',
-          after: ['add-component'],
-          label: 'Add 5-10 total components',
+          id: 'more-components',
+          after: ['first-story'],
+          label: 'Add 5 components',
           content: (
-            <>
+            <p>
               A story is an object that describes how to render a component. You can have multiple
               stories per component, and those stories can build upon one another. For example, we
               can add Secondary and Tertiary stories based on our Primary story from above.
+            </p>
+          ),
+          subscribe: ({ api, done }) => {
+            const check = () => {
+              const entries = api.getIndex()?.entries || {};
+              const stories = Object.values(entries).filter(({ type }) => type === 'story');
+              const components = new Set(stories.map(({ title }) => title));
+              return components.size >= 5;
+            };
+            if (check()) {
+              done();
+            } else {
+              return api.on(STORY_INDEX_INVALIDATED, () => check() && done());
+            }
+          },
+        },
+        {
+          id: 'more-stories',
+          after: ['first-story'],
+          label: 'Add 20 stories',
+          content: (
+            <p>
+              A story is an object that describes how to render a component. You can have multiple
+              stories per component, and those stories can build upon one another. For example, we
+              can add Secondary and Tertiary stories based on our Primary story from above.
+            </p>
+          ),
+          subscribe: ({ api, done }) => {
+            const check = () => {
+              const entries = api.getIndex()?.entries || {};
+              const stories = Object.values(entries).filter(({ type }) => type === 'story');
+              return stories.length >= 20;
+            };
+            if (check()) {
+              done();
+            } else {
+              return api.on(STORY_INDEX_INVALIDATED, () => check() && done());
+            }
+          },
+        },
+      ],
+    },
+    {
+      id: 'development',
+      title: 'Development',
+      items: [
+        {
+          id: 'controls',
+          after: ['first-story'],
+          label: 'Controls',
+          content: (
+            <>
+              Storybook Controls gives you a graphical UI to interact with a component's arguments
+              dynamically without needing to code. Use the Controls panel to edit the inputs to your
+              stories and see the results in real-time. It's a great way to explore your components
+              and test different states.
             </>
           ),
-          subscribe: ({ done }) => done(),
+          subscribe: ({ api, done }) => api.on(STORY_ARGS_UPDATED, done),
         },
         {
-          id: 'check-improve-coverage',
-          after: ['add-component'],
-          label: 'Check + improve coverage',
+          id: 'viewports',
+          after: ['first-story'],
+          label: 'Viewports',
           content: (
             <>
               <p>
-                Test coverage is the practice of measuring whether existing tests fully cover your
-                code. It marks which conditions, logic branches, functions and variables in your
-                code are and are not being tested.
-              </p>
-              <p>
-                Coverage tests examine the instrumented code against a set of industry-accepted best
-                practices. They act as the last line of QA to improve the quality of your test
-                suite.
+                The viewport feature allows you to adjust the dimensions of the iframe your story is
+                rendered in. It makes it easy to develop responsive UIs. The Viewport module enables
+                you to change the viewport applied to a story by selecting from the list of
+                predefined viewports in the toolbar. If needed, you can set a story to default to a
+                specific viewport by using the globals option.
               </p>
+              <Link
+                href="https://storybook.js.org/docs/essentials/viewport#defining-the-viewport-for-a-story"
+                target="_blank"
+                withArrow
+              >
+                Learn more
+              </Link>
             </>
           ),
-          subscribe: ({ done }) => setTimeout(done, 3000),
+          subscribe: ({ api, done }) =>
+            api.on(UPDATE_GLOBALS, ({ globals }) => globals?.viewport && done()),
+        },
+        {
+          id: 'organize-stories',
+          after: ['first-story'],
+          label: 'Organize your stories',
         },
       ],
     },
     {
-      id: 'test',
-      title: 'Test',
+      id: 'testing',
+      title: 'Testing',
       items: [
+        {
+          id: 'install-vitest',
+          label: 'Install Vitest',
+          subscribe: ({ done }) => done(),
+          content: (
+            <p>
+              Storybook offers fast, powerful testing from the sidebar, with the Vitest addon. It
+              transforms your stories into real Vitest tests, and then runs them in the background,
+              via Vitest and Playwright. Results are displayed in your sidebar, and you can debug
+              failures with all your favorite features and addons, in addition to the browser dev
+              tools.
+            </p>
+          ),
+        },
         {
           id: 'run-tests',
-          after: ['add-component'],
+          after: ['first-story'],
           label: 'Run tests',
-          subscribe: ({ done }) => done(),
+          // subscribe: ({ done }) => done(),
           content: (
             <>
               <p>
@@ -129,7 +224,7 @@ export const checklistData: ChecklistData = {
         },
         {
           id: 'write-interactions',
-          after: ['add-component'],
+          after: ['first-story'],
           label: 'Write interactions',
           content: (
             <>
@@ -150,7 +245,7 @@ export const checklistData: ChecklistData = {
         },
         {
           id: 'accessibility-tests',
-          after: ['add-component'],
+          after: ['first-story'],
           label: 'Accessibility tests',
           subscribe: ({ done }) => done(),
           content: (
@@ -173,9 +268,9 @@ export const checklistData: ChecklistData = {
         },
         {
           id: 'visual-tests',
-          after: ['add-component'],
+          after: ['first-story'],
           label: 'Visual tests',
-          subscribe: ({ done }) => done(),
+          // subscribe: ({ done }) => done(),
           content: (
             <>
               <p>
@@ -195,51 +290,15 @@ export const checklistData: ChecklistData = {
             </>
           ),
         },
-        {
-          id: 'viewports',
-          after: ['add-component'],
-          label: 'Viewports',
-          content: (
-            <>
-              <p>
-                The viewport feature allows you to adjust the dimensions of the iframe your story is
-                rendered in. It makes it easy to develop responsive UIs. The Viewport module enables
-                you to change the viewport applied to a story by selecting from the list of
-                predefined viewports in the toolbar. If needed, you can set a story to default to a
-                specific viewport by using the globals option.
-              </p>
-              <Link
-                href="https://storybook.js.org/docs/essentials/viewport#defining-the-viewport-for-a-story"
-                target="_blank"
-                withArrow
-              >
-                Learn more
-              </Link>
-            </>
-          ),
-        },
       ],
     },
     {
       id: 'document',
       title: 'Document',
       items: [
-        {
-          id: 'controls',
-          after: ['add-component'],
-          label: 'Controls',
-          content: (
-            <>
-              Storybook Controls gives you a graphical UI to interact with a component's arguments
-              dynamically without needing to code. Use the Controls panel to edit the inputs to your
-              stories and see the results in real-time. It's a great way to explore your components
-              and test different states.
-            </>
-          ),
-        },
         {
           id: 'autodocs',
-          after: ['add-component'],
+          after: ['first-story'],
           label: 'Autodocs',
           content: (
             <>
@@ -251,14 +310,15 @@ export const checklistData: ChecklistData = {
           ),
         },
         {
-          id: 'share-story',
-          after: ['add-component'],
-          label: 'Share story',
+          id: 'mdx',
+          after: ['first-story'],
+          label: 'Write MDX documentation',
           content: (
             <>
-              Teams publish Storybook online to review and collaborate on works in progress. That
-              allows developers, designers, PMs, and other stakeholders to check if the UI looks
-              right without touching code or requiring a local dev environment.
+              MDX files mix Markdown and Javascript/JSX to create rich interactive documentation.
+              You can use Markdown&apos;s readable syntax (such as `# heading`) for your
+              documentation, include stories defined in Component Story Format (CSF), and freely
+              embed JSX component blocks at any point in the file. All at once.
             </>
           ),
         },