Checklist: Fix how state changes are reported and drop some completion restrictions

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

@@ -64,10 +64,12 @@ export async function initializeChecklist() {
     );
 
     store.onStateChange((state: StoreState, previousState: StoreState) => {
+      const entries = Object.entries(state.items);
+
       // Split values into project-local (done) and user-local (accepted, skipped) persistence
       const projectValues: Partial<StoreState['items']> = {};
       const userValues: Partial<StoreState['items']> = {};
-      Object.entries(state.items).forEach(([id, { status, mutedAt }]) => {
+      entries.forEach(([id, { status, mutedAt }]) => {
         if (status === 'done') {
           projectValues[id as keyof StoreState['items']] = { status };
         } else if (status === 'accepted' || status === 'skipped') {
@@ -83,12 +85,34 @@ export async function initializeChecklist() {
       saveProjectState({ items: projectValues as StoreState['items'] });
       saveUserState({ items: userValues, widget: state.widget });
 
-      const changedValues = Object.entries(state.items).filter(
-        ([key, value]) => value !== previousState.items[key as keyof typeof state.items]
+      // Gather items that have changed state
+      const { mutedItems, statusItems } = entries.reduce(
+        (acc, [item, { mutedAt, status }]) => {
+          const prev = previousState.items[item as keyof typeof state.items];
+          if (mutedAt !== prev?.mutedAt) {
+            acc.mutedItems.push(item);
+          }
+          if (status !== prev?.status) {
+            acc.statusItems.push(item);
+          }
+          return acc;
+        },
+        { mutedItems: [] as string[], statusItems: [] as string[] }
       );
-      telemetry('onboarding-checklist', {
-        ...(changedValues.length > 0 ? { items: Object.fromEntries(changedValues) } : {}),
-        ...(!deepEqual(state.widget, previousState.widget) ? { widget: state.widget } : {}),
+      if (mutedItems.length > 0) {
+        telemetry('onboarding-checklist-muted', {
+          items: mutedItems,
+          completedItems: entries.reduce<string[]>((acc, [id, { status }]) => {
+            return status === 'done' || status === 'accepted' ? acc.concat([id]) : acc;
+          }, []),
+          skippedItems: entries.reduce<string[]>((acc, [id, { status }]) => {
+            return status === 'skipped' ? acc.concat([id]) : acc;
+          }, []),
+        });
+      }
+      statusItems.forEach((item) => {
+        const { status } = state.items[item as keyof typeof state.items];
+        telemetry('onboarding-checklist-status', { item, status });
       });
     });
   } catch (err) {

code/core/src/shared/checklist-store/checklistData.tsx

@@ -195,7 +195,7 @@ export const checklistData = {
         },
         {
           id: 'renderComponent',
-          label: 'Render a component',
+          label: 'Render your first component',
           criteria: 'A story finished rendering successfully',
           subscribe: ({ api, done }) =>
             api.on(
@@ -281,7 +281,6 @@ export const Primary: Story = {
         },
         {
           id: 'moreComponents',
-          after: ['renderComponent'],
           label: 'Add 5 components',
           content: ({ api }) => (
             <>
@@ -323,7 +322,6 @@ export const Primary: Story = {
         },
         {
           id: 'moreStories',
-          after: ['renderComponent'],
           label: 'Add 20 stories',
           content: ({ api }) => (
             <>
@@ -380,7 +378,6 @@ export const Primary: Story = {
       items: [
         {
           id: 'controls',
-          after: ['renderComponent'],
           label: 'Change a story with Controls',
           available: () => !!globalThis?.FEATURES?.controls,
           criteria: 'Story args are updated',
@@ -423,7 +420,6 @@ export const Primary: Story = {
         },
         {
           id: 'viewports',
-          after: ['renderComponent'],
           label: 'Check responsiveness with Viewports',
           available: () => !!globalThis?.FEATURES?.viewport,
           criteria: 'Viewport global is updated',
@@ -468,7 +464,6 @@ export const Primary: Story = {
         },
         {
           id: 'organizeStories',
-          after: ['renderComponent'],
           label: 'Group your components',
           criteria: 'A root node exists in the index',
           subscribe: subscribeToIndex((entries) =>
@@ -672,7 +667,6 @@ export default {
         },
         {
           id: 'writeInteractions',
-          after: ['renderComponent'],
           label: 'Test functionality with interactions',
           available: () => !!globalThis?.FEATURES?.interactions,
           criteria: 'At least one story with a play or test function',

code/core/src/telemetry/types.ts

@@ -33,7 +33,8 @@ export type EventType =
   | 'test-run'
   | 'addon-onboarding'
   | 'onboarding-survey'
-  | 'onboarding-checklist'
+  | 'onboarding-checklist-muted'
+  | 'onboarding-checklist-status'
   | 'mocking'
   | 'automigrate'
   | 'migrate'