Release: Patch 9.0.17

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 9.0.17
+
+- Addon Vitest: Fix support for plain `stories.tsx` files - [#32041](https://github.com/storybookjs/storybook/pull/32041), thanks @ghengeveld!
+- Onboarding: Intent survey - [#31944](https://github.com/storybookjs/storybook/pull/31944), thanks @ghengeveld!
+- UI: Fix text color for failing stories in sidebar - [#32042](https://github.com/storybookjs/storybook/pull/32042), thanks @ghengeveld!
+
 ## 9.0.16
 
 - Automigration: Fail with non-zero exit code on migration failure - [#31923](https://github.com/storybookjs/storybook/pull/31923), thanks @mrginglymus!

code/.storybook/main.ts

@@ -93,6 +93,11 @@ const config = defineMain({
       directory: '../addons/vitest/template/stories',
       titlePrefix: 'addons/vitest',
     },
+    {
+      directory: '../addons/vitest/src',
+      titlePrefix: 'addons/vitest',
+      files: 'stories.tsx',
+    },
   ],
   addons: [
     '@storybook/addon-themes',

code/addons/onboarding/src/Onboarding.tsx

@@ -13,6 +13,7 @@ import { HighlightElement } from './components/HighlightElement/HighlightElement
 import type { STORYBOOK_ADDON_ONBOARDING_STEPS } from './constants';
 import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from './constants';
 import { GuidedTour } from './features/GuidedTour/GuidedTour';
+import { IntentSurvey } from './features/IntentSurvey/IntentSurvey';
 import { SplashScreen } from './features/SplashScreen/SplashScreen';
 
 const SpanHighlight = styled.span(({ theme }) => ({
@@ -106,14 +107,21 @@ export default function Onboarding({ api }: { api: API }) {
     setEnabled(false);
   }, [api, setEnabled]);
 
-  const completeOnboarding = useCallback(() => {
-    api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
-      step: '6:FinishedOnboarding' satisfies StepKey,
-      type: 'telemetry',
-    });
-    selectStory('configure-your-project--docs');
-    disableOnboarding();
-  }, [api, selectStory, disableOnboarding]);
+  const completeOnboarding = useCallback(
+    (answers: Record<string, unknown>) => {
+      api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
+        step: '7:FinishedOnboarding' satisfies StepKey,
+        type: 'telemetry',
+      });
+      api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
+        answers,
+        type: 'survey',
+      });
+      selectStory('configure-your-project--docs');
+      disableOnboarding();
+    },
+    [api, selectStory, disableOnboarding]
+  );
 
   useEffect(() => {
     api.setQueryParams({ onboarding: 'true' });
@@ -136,7 +144,9 @@ export default function Onboarding({ api }: { api: API }) {
 
   useEffect(() => {
     setStep((current) => {
-      if (['1:Intro', '5:StoryCreated', '6:FinishedOnboarding'].includes(current)) {
+      if (
+        ['1:Intro', '5:StoryCreated', '6:IntentSurvey', '7:FinishedOnboarding'].includes(current)
+      ) {
         return current;
       }
 
@@ -272,12 +282,14 @@ export default function Onboarding({ api }: { api: API }) {
       {showConfetti && <Confetti />}
       {step === '1:Intro' ? (
         <SplashScreen onDismiss={() => setStep('2:Controls')} />
+      ) : step === '6:IntentSurvey' ? (
+        <IntentSurvey onComplete={completeOnboarding} onDismiss={disableOnboarding} />
       ) : (
         <GuidedTour
           step={step}
           steps={steps}
           onClose={disableOnboarding}
-          onComplete={completeOnboarding}
+          onComplete={() => setStep('6:IntentSurvey')}
         />
       )}
     </ThemeProvider>

code/addons/onboarding/src/constants.ts

@@ -6,5 +6,6 @@ export const STORYBOOK_ADDON_ONBOARDING_STEPS = [
   '3:SaveFromControls',
   '4:CreateStory',
   '5:StoryCreated',
-  '6:FinishedOnboarding',
+  '6:IntentSurvey',
+  '7:FinishedOnboarding',
 ] as const;

code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { expect, fn, screen, userEvent, waitFor } from 'storybook/test';
+
+import { IntentSurvey } from './IntentSurvey';
+
+const meta = {
+  component: IntentSurvey,
+  args: {
+    onComplete: fn(),
+    onDismiss: fn(),
+  },
+} as Meta<typeof IntentSurvey>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {};
+
+export const Submitting: Story = {
+  play: async ({ args }) => {
+    const button = await screen.findByRole('button', { name: 'Submit' });
+    await expect(button).toBeDisabled();
+
+    await userEvent.click(await screen.findByText('Design system'));
+    await expect(button).toBeDisabled();
+
+    await userEvent.click(await screen.findByText('Functional testing'));
+    await userEvent.click(await screen.findByText('Accessibility testing'));
+    await userEvent.click(await screen.findByText('Visual testing'));
+    await expect(button).toBeDisabled();
+
+    await userEvent.selectOptions(screen.getByRole('combobox'), ['We use it at work']);
+    await expect(button).not.toBeDisabled();
+
+    await userEvent.click(button);
+
+    await waitFor(async () => {
+      await expect(button).toBeDisabled();
+      await expect(args.onComplete).toHaveBeenCalledWith({
+        building: {
+          'application-ui': false,
+          'design-system': true,
+        },
+        interest: {
+          'accessibility-testing': true,
+          'ai-augmented-development': false,
+          'design-handoff': false,
+          'functional-testing': true,
+          'team-collaboration': false,
+          'ui-documentation': false,
+          'visual-testing': true,
+        },
+        referrer: {
+          'ai-agent': false,
+          'via-friend-or-colleague': false,
+          'via-social-media': false,
+          'we-use-it-at-work': true,
+          'web-search': false,
+          youtube: false,
+        },
+      });
+    });
+  },
+};