wip

code/addons/onboarding/src/manager.tsx

@@ -31,10 +31,10 @@ addons.register(ADDON_ID, async (api) => {
   const isSurvey = queryParams.onboarding === 'survey';
 
   const hasCompletedSurvey = await new Promise<boolean>((resolve) => {
-    const unsubscribe = checklistStore.onStateChange(({ loaded, accepted }) => {
+    const unsubscribe = checklistStore.onStateChange(({ loaded, values }) => {
       if (loaded) {
         unsubscribe();
-        resolve(accepted.includes('onboarding-survey'));
+        resolve(values['onboarding-survey'].status === 'accepted');
       }
     });
   });

code/core/src/cli/globalSettings.ts

@@ -17,8 +17,15 @@ const userSettingSchema = z.object({
   init: z.object({ skipOnboarding: z.boolean().optional() }).optional(),
   checklist: z
     .object({
-      muted: z.union([z.boolean(), z.array(z.string())]).optional(),
-      values: z.record(z.enum(['accepted', 'done', 'skipped'])).optional(),
+      values: z
+        .record(
+          z.strictObject({
+            status: z.enum(['open', 'accepted', 'done', 'skipped']),
+            mutedAt: z.number().optional(),
+          })
+        )
+        .optional(),
+      widget: z.object({ disable: z.boolean().optional() }).optional(),
     })
     .optional(),
 });

code/core/src/core-server/utils/checklist.ts

@@ -4,8 +4,8 @@ import { logger } from 'storybook/internal/node-logger';
 import { telemetry } from 'storybook/internal/telemetry';
 
 import { globalSettings } from '../../cli';
+import type { ItemState } from '../../shared/checklist-store';
 import {
-  type ItemStatus,
   type StoreEvent,
   type StoreState,
   UNIVERSAL_CHECKLIST_STORE_OPTIONS,
@@ -42,17 +42,17 @@ export async function initializeChecklist() {
       globalSettings().then((settings) => {
         const checklist = settings.value.checklist;
         const state = {
-          muted: checklist?.muted ?? false,
           values: checklist?.values ?? {},
+          widget: checklist?.widget ?? { disable: false },
         };
         const setState = ({
-          muted = state.muted,
           values = state.values,
+          widget = state.widget,
         }: {
-          muted?: boolean | string[];
-          values?: Record<string, ItemStatus>;
+          values?: typeof state.values;
+          widget?: typeof state.widget;
         }) => {
-          settings.value.checklist = { muted, values };
+          settings.value.checklist = { values, widget };
           settings.save();
         };
         return [state, setState] as const;
@@ -67,32 +67,35 @@ export async function initializeChecklist() {
 
     store.setState((value) => ({
       ...value,
-      muted: userState.muted,
+      muted:
+        userState.widget.disable === true ||
+        Object.entries(userState.values)
+          .filter(([_, value]) => value.mutedAt)
+          .map(([id]) => id),
       values: { ...userState.values, ...projectState.values },
       loaded: true,
     }));
 
     store.onStateChange((state: StoreState, previousState: StoreState) => {
-      // Split values into user (accepted, skipped) and project (done) for storage
-      const userValues: Record<string, Extract<ItemStatus, 'accepted' | 'skipped'>> = {};
-      const projectValues: Record<string, Extract<ItemStatus, 'done'>> = {};
-
+      // Split values into project-local (done) and user-local (accepted, skipped) persistence
+      const projectValues: Record<string, ItemState> = {};
+      const userValues: Record<string, ItemState> = {};
       Object.entries(state.values).forEach(([id, value]) => {
-        if (value === 'accepted' || value === 'skipped') {
-          userValues[id] = value;
-        } else if (value === 'done') {
+        if (value.status === 'done') {
           projectValues[id] = value;
+        } else if (value.status === 'accepted' || value.status === 'skipped') {
+          userValues[id] = value;
         }
       });
-      saveProjectState({ values: projectValues } as Pick<StoreState, 'values'>);
-      saveUserState({ muted: state.muted, values: userValues });
+      saveProjectState({ values: projectValues });
+      saveUserState({ values: userValues, widget: state.widget });
 
       const changedValues = Object.entries(state.values).filter(
         ([key, value]) => value !== previousState.values[key]
       );
       telemetry('onboarding-checklist', {
-        ...(!equals(state.muted, previousState.muted) ? { muted: state.muted } : {}),
         ...(changedValues.length > 0 ? { values: Object.fromEntries(changedValues) } : {}),
+        ...(!equals(state.widget, previousState.widget) ? { widget: state.widget } : {}),
       });
     });
   } catch (err) {

code/core/src/manager-api/stores/checklist.ts

@@ -1,5 +1,4 @@
 import {
-  type ChecklistStore,
   type StoreEvent,
   type StoreState,
   createChecklistStore,
@@ -12,4 +11,4 @@ export const universalChecklistStore = UniversalStore.create<StoreState, StoreEv
   leader: globalThis.CONFIG_TYPE === 'PRODUCTION',
 });
 
-export const checklistStore: ChecklistStore = createChecklistStore(universalChecklistStore);
+export const checklistStore = createChecklistStore(universalChecklistStore);

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

@@ -30,12 +30,12 @@ const meta = preview.meta({
   beforeEach: async () => {
     mockStore.setState({
       loaded: true,
-      muted: false,
+      widget: {},
       values: {
-        controls: 'accepted',
-        'render-component': 'done',
-        'more-components': 'skipped',
-        'more-stories': 'skipped',
+        controls: { status: 'accepted' },
+        'render-component': { status: 'done' },
+        'more-components': { status: 'skipped' },
+        'more-stories': { status: 'skipped' },
       },
     });
   },
@@ -48,13 +48,13 @@ const play: PlayFunction = async ({ step }) => {
   await step('Complete viewports task', () => {
     mockStore.setState({
       loaded: true,
-      muted: false,
+      widget: {},
       values: {
-        controls: 'accepted',
-        'render-component': 'done',
-        viewports: 'done',
-        'more-components': 'skipped',
-        'more-stories': 'skipped',
+        controls: { status: 'accepted' },
+        'render-component': { status: 'done' },
+        viewports: { status: 'done' },
+        'more-components': { status: 'skipped' },
+        'more-stories': { status: 'skipped' },
       },
     });
   });
@@ -63,14 +63,14 @@ const play: PlayFunction = async ({ step }) => {
   await step('Skip install-vitest task', () => {
     mockStore.setState({
       loaded: true,
-      muted: false,
+      widget: {},
       values: {
-        controls: 'accepted',
-        'render-component': 'done',
-        viewports: 'done',
-        'more-components': 'skipped',
-        'more-stories': 'skipped',
-        'install-vitest': 'skipped',
+        controls: { status: 'accepted' },
+        'render-component': { status: 'done' },
+        viewports: { status: 'done' },
+        'more-components': { status: 'skipped' },
+        'more-stories': { status: 'skipped' },
+        'install-vitest': { status: 'skipped' },
       },
     });
   });

code/core/src/manager/components/sidebar/ChecklistWidget.tsx

@@ -174,8 +174,8 @@ export const ChecklistWidget = () => {
     setItems((current) =>
       current.map((item) => ({
         ...item,
-        isCompleted: values[item.id] === 'accepted' || values[item.id] === 'done',
-        isSkipped: values[item.id] === 'skipped',
+        isCompleted: values[item.id].status === 'accepted' || values[item.id].status === 'done',
+        isSkipped: values[item.id].status === 'skipped',
       }))
     );
     const timeout = setTimeout(setItems, 2000, nextItems);

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

@@ -50,10 +50,12 @@ const meta = {
   beforeEach: async () => {
     mockStore.setState({
       loaded: true,
-      muted: false,
-      accepted: ['controls'],
-      done: ['render-component'],
-      skipped: ['viewports'],
+      widget: {},
+      values: {
+        controls: { status: 'accepted' },
+        'render-component': { status: 'done' },
+        viewports: { status: 'skipped' },
+      },
     });
   },
 } satisfies Meta<typeof SidebarMenu>;

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

@@ -118,10 +118,12 @@ const meta = {
     internal_fullStatusStore.unset();
     internal_universalChecklistStore.setState({
       loaded: true,
-      muted: false,
-      accepted: ['controls'],
-      done: ['render-component'],
-      skipped: ['viewports'],
+      widget: {},
+      values: {
+        controls: { status: 'accepted' },
+        'render-component': { status: 'done' },
+        viewports: { status: 'skipped' },
+      },
     });
   },
 } satisfies Meta<typeof Sidebar>;

code/core/src/manager/components/sidebar/StatusButton.tsx

@@ -29,12 +29,7 @@ export const StatusLabel = styled.div<{ status: StatusValue }>(withStatusColor,
   margin: 3,
 });
 
-export interface StatusButtonProps extends ComponentProps<typeof Button> {
-  height?: number;
-  width?: number;
-  status: StatusValue;
-  selectedItem?: boolean;
-}
+export type StatusButtonProps = ComponentProps<typeof StyledButton>;
 
 const StyledButton = styled(Button)<{
   height?: number;

code/core/src/manager/components/sidebar/useChecklist.ts

@@ -14,9 +14,9 @@
   useStorybookState,
 } from 'storybook/manager-api';
 
-import type { ItemStatus } from '../../../shared/checklist-store';
-import type { ChecklistData } from '../../settings/Checklist/checklistData';
-import { checklistData } from '../../settings/Checklist/checklistData';
+import type { ItemState } from '../../../shared/checklist-store';
+import type { ChecklistData } from '../../../shared/checklist-store/checklistData';
+import { checklistData } from '../../../shared/checklist-store/checklistData';
 
 type RawItemWithSection = ChecklistData['sections'][number]['items'][number] & {
   itemIndex: number;
@@ -28,7 +28,7 @@
 export type ChecklistItem = RawItemWithSection & {
   isAvailable: boolean;
   isOpen: boolean;
-  isLockedBy: string[];
+  isLockedBy: string | undefined;
   isImmutable: boolean;
   isReady: boolean;
   isCompleted: boolean;
@@ -70,10 +70,10 @@
 const checkSkipped = (
   item: RawItemWithSection,
   itemsById: Record<RawItemWithSection['id'], RawItemWithSection>,
-  values: Record<string, ItemStatus>
+  values: Record<string, ItemState>
 ) => {
   const itemValue = values[item.id];
-  if (itemValue === 'skipped') {
+  if (itemValue.status === 'skipped') {
     return true;
   }
   for (const afterId of item.after ?? []) {
@@ -84,13 +84,35 @@
   return false;
 };
 
+const getAncestorIds = (
+  item: RawItemWithSection,
+  itemsById: Record<RawItemWithSection['id'], RawItemWithSection>
+): string[] => {
+  if (!item.after || item.after.length === 0) {
+    return [];
+  }
+  return item.after.flatMap((afterId) => {
+    const afterItem = itemsById[afterId];
+    return afterItem ? [...getAncestorIds(afterItem, itemsById), afterId] : [];
+  });
+};
+
+const checkLockedBy = (
+  item: RawItemWithSection,
+  itemsById: Record<RawItemWithSection['id'], RawItemWithSection>,
+  values: Record<string, ItemState>
+): string | undefined =>
+  getAncestorIds(item, itemsById).find(
+    (id) => values[id].status !== 'accepted' && values[id].status !== 'done'
+  );
+
 export const useChecklist = () => {
   const api = useStorybookApi();
   const index = useStoryIndex();
   const [checklistState] = experimental_useUniversalStore(universalChecklistStore);
-  const { loaded, muted, values } = checklistState;
+  const { loaded, widget, values } = checklistState;
 
-  const itemsById = useMemo<Record<RawItemWithSection['id'], RawItemWithSection>>(() => {
+  const itemsById = useMemo<Record<string, RawItemWithSection>>(() => {
     return Object.fromEntries(
       checklistData.sections.flatMap(
         ({ items, id: sectionId, title: sectionTitle }, sectionIndex) =>
@@ -103,21 +125,20 @@
 
   const allItems = useMemo(() => {
     return Object.values(itemsById).map<ChecklistItem>((item) => {
-      const itemValue = values[item.id];
-      const isAccepted = itemValue === 'accepted';
-      const isDone = itemValue === 'done';
+      const { status, mutedAt } = values[item.id];
+      const isOpen = status === 'open';
+      const isAccepted = status === 'accepted';
+      const isDone = status === 'done';
       const isCompleted = isAccepted || isDone;
       const isSkipped = !isCompleted && checkSkipped(item, itemsById, values);
-      const isMuted = Array.isArray(muted) ? muted.includes(item.id) : !!muted;
+      const isMuted = !!mutedAt || !!widget.disable;
 
       const isAvailable = isCompleted
         ? item.afterCompletion !== 'unavailable'
         : checkAvailable(item, itemsById, { api, index, item });
-      const isOpen = !isAccepted && !isDone && !isSkipped && isAvailable;
-      const isLockedBy =
-        item.after?.filter((id) => values[id] !== 'accepted' && values[id] !== 'done') ?? [];
+      const isLockedBy = checkLockedBy(item, itemsById, values);
       const isImmutable = isCompleted && item.afterCompletion === 'immutable';
-      const isReady = isOpen && !isMuted && isLockedBy.length === 0;
+      const isReady = isOpen && isAvailable && !isMuted && !isLockedBy;
 
       return {
         ...item,
@@ -133,7 +154,7 @@
         isMuted,
       };
     });
-  }, [itemsById, values, muted, api, index]);
+  }, [itemsById, values, widget, api, index]);
 
   const itemCollections = useMemo(() => {
     const availableItems = allItems.filter((item) => item.isAvailable);
@@ -174,7 +195,7 @@
       }
 
       const subscribed = subscriptions.has(item.id);
-      if (item.isOpen && !subscribed) {
+      if (item.isOpen && item.isAvailable && !subscribed) {
         subscriptions.set(
           item.id,
           item.subscribe({
@@ -185,7 +206,7 @@
             skip: () => checklistStore.skip(item.id),
           })
         );
-      } else if (subscribed && !item.isOpen) {
+      } else if (subscribed && !(item.isOpen && item.isAvailable)) {
         const unsubscribe = subscriptions.get(item.id);
         subscriptions.delete(item.id);
         if (typeof unsubscribe === 'function') {

code/core/src/manager/container/Menu.stories.tsx

@@ -29,10 +29,12 @@ export default {
   beforeEach: async () => {
     mockStore.setState({
       loaded: true,
-      muted: false,
-      accepted: ['controls'],
-      done: ['render-component'],
-      skipped: ['viewports'],
+      widget: {},
+      values: {
+        controls: { status: 'accepted' },
+        'render-component': { status: 'done' },
+        viewports: { status: 'skipped' },
+      },
     });
   },
   excludeStories: ['links'],