Repository: storybookjs/storybook
File: code/core/src/manager/components/sidebar/ChecklistWidget.tsx (TypeScript)

Code before:
  const { loaded, allItems, nextItems, progress, accept, mute, items } = useChecklist();
  const [renderItems, setItems] = useState<ChecklistItem[]>([]);

  const hasItems = renderItems.length > 0;
  const transitionItems = useTransitionArray(allItems, renderItems, {
    keyFn: (item) => item.id,
    timeout: 300,
  });

  useEffect(() => {
    // Render old items (with updated status) for 2 seconds before
    // rendering new items, in order to allow exit transition.
    setItems((current) =>
      current.map((item) => ({
        ...item,
        isCompleted: items[item.id].status === 'accepted' || items[item.id].status === 'done',
        isSkipped: items[item.id].status === 'skipped',
      }))
    );
    const timeout = setTimeout(setItems, 2000, nextItems);
    return () => clearTimeout(timeout);
  }, [nextItems, items]);

  return (
    <CollapsibleWithMargin collapsed={!hasItems || !loaded}>
      <HoverCard outlineAnimation="rainbow">
        <Collapsible
          collapsed={!hasItems}
          disabled={!hasItems}
          summary={({ isCollapsed, toggleCollapsed, toggleProps }) => (
            <Listbox onClick={toggleCollapsed}>
              <Listbox.Item>
                <Listbox.Item style={{ flexShrink: 1 }}>
                  {loaded && (
                    <Optional
                      content={
                        <OpenGuideAction>
                          <strong>{title(progress)}</strong>
                        </OpenGuideAction>
                      }
                      fallback={<OpenGuideAction />}
                    />
                  )}
                </Listbox.Item>
                <Listbox.Item>
                  <CollapseToggle
                    {...toggleProps}
                    id="checklist-module-collapse-toggle"
                    ariaLabel={`${isCollapsed ? 'Expand' : 'Collapse'} onboarding checklist`}
                  >
                    <ChevronSmallUpIcon

Review comment (suggestion):
If the ID is purely for testing purposes, we should prefer to use something like `data-test-id` instead. For the future

Code after:
  const { loaded, allItems, nextItems, progress, accept, mute, items } = useChecklist();
  const [renderItems, setItems] = useState<ChecklistItem[]>([]);

  const hasItems = renderItems.length > 0;
  const transitionItems = useTransitionArray(allItems, renderItems, {
    keyFn: (item) => item.id,
    timeout: 300,
  });

  useEffect(() => {
    // Render old items (with updated status) for 2 seconds before
    // rendering new items, in order to allow exit transition.
    setItems((current) =>
      current.map((item) => ({
        ...item,
        isCompleted: items[item.id].status === 'accepted' || items[item.id].status === 'done',
        isSkipped: items[item.id].status === 'skipped',
      }))
    );
    const timeout = setTimeout(setItems, 2000, nextItems);
    return () => clearTimeout(timeout);
  }, [nextItems, items]);

  return (
    <CollapsibleWithMargin collapsed={!hasItems || !loaded}>
      <HoverCard id="storybook-checklist-widget" outlineAnimation="rainbow">
        <Collapsible
          collapsed={!hasItems}
          disabled={!hasItems}
          summary={({ isCollapsed, toggleCollapsed, toggleProps }) => (
            <Listbox onClick={toggleCollapsed}>
              <Listbox.Item>
                <Listbox.Item style={{ flexShrink: 1 }}>
                  {loaded && (
                    <Optional
                      content={
                        <OpenGuideAction>
                          <strong>{title(progress)}</strong>
                        </OpenGuideAction>
                      }
                      fallback={<OpenGuideAction />}
                    />
                  )}
                </Listbox.Item>
                <Listbox.Item>
                  <CollapseToggle
                    {...toggleProps}
                    id="checklist-module-collapse-toggle"
                    ariaLabel={`${isCollapsed ? 'Expand' : 'Collapse'} onboarding checklist`}
                  >
                    <ChevronSmallUpIcon