Repository: storybookjs/storybook
File: code/core/src/shared/checklist-store/checklistData.tsx (TypeScript)

Code before:
                  withArrow
                >
                  Learn how to use Controls to add stories without writing any code
                </Link>
              </p>
            </>
          ),
          criteria: 'At least 20 stories exist in the index',
          subscribe: subscribeToIndex((entries) => {
            const stories = Object.values(entries).filter(
              (entry): entry is API_StoryEntry => entry.type === 'story'
            );
            return stories.length >= 20;
          }),
        },
        {
          id: 'whatsNewStorybook10',
          label: "See what's new",
          criteria: "What's New page is opened",
          action: {
            label: 'Go',
            onClick: ({ api, accept }) => {
              api.navigate('/settings/whats-new');
              accept();
            },
          },
        },
      ],
    },

    {
      id: 'development',
      title: 'Development',
      items: [
        {
          id: 'controls',
          after: ['renderComponent'],
          label: 'Change a story with Controls',
          available: () => !!globalThis?.FEATURES?.controls,
          criteria: 'Story args are updated',
          subscribe: ({ api, done }) => api.on(STORY_ARGS_UPDATED, done),
          content: ({ api }) => (
            <>
              <p>
                When you change the value of one of the inputs in the Controls table, the story
                automatically updates to reflect that change. It&apos;s a great way to explore how a
                component handles various inputs.
              </p>
              <img
                src={api.getDocsUrl({
                  asset: 'api/doc-block-controls.png',

Review comment (suggestion):
can you stop the listener once the accept function is called? and if possible not start listening if not necessary (like if the user has already gone through this before)

Code after:
                  target="_blank"
                  withArrow
                >
                  Learn how to use Controls to add stories without writing any code
                </Link>
              </p>
            </>
          ),
          criteria: 'At least 20 stories exist in the index',
          subscribe: subscribeToIndex((entries) => {
            const stories = Object.values(entries).filter(
              (entry): entry is API_StoryEntry => entry.type === 'story'
            );
            return stories.length >= 20;
          }),
        },
        {
          id: 'whatsNewStorybook10',
          label: "See what's new",
          criteria: "What's New page is opened",
          action: {
            label: 'Go',
            onClick: ({ api }) => api.navigate('/settings/whats-new'),
          },
          subscribe: ({ accept }) =>
            LocationMonitor.subscribe((l) => l.search.endsWith('/settings/whats-new') && accept()),
        },
      ],
    },

    {
      id: 'development',
      title: 'Development',
      items: [
        {
          id: 'controls',
          after: ['renderComponent'],
          label: 'Change a story with Controls',
          available: () => !!globalThis?.FEATURES?.controls,
          criteria: 'Story args are updated',
          subscribe: ({ api, done }) => api.on(STORY_ARGS_UPDATED, done),
          content: ({ api }) => (
            <>
              <p>
                When you change the value of one of the inputs in the Controls table, the story
                automatically updates to reflect that change. It&apos;s a great way to explore how a
                component handles various inputs.
              </p>
              <img
                src={api.getDocsUrl({
                  asset: 'api/doc-block-controls.png',