Onboarding: Intent survey

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, string[] | string>) => {
+      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,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { action } from 'storybook/actions';
+
+import { IntentSurvey } from './IntentSurvey';
+
+const meta = {
+  title: 'Onboarding/IntentSurvey',
+  component: IntentSurvey,
+  args: {
+    onComplete: action('onComplete'),
+    onDismiss: action('onDismiss'),
+  },
+} as Meta<typeof IntentSurvey>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {};

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

@@ -0,0 +1,253 @@
+import React, { useState } from 'react';
+
+import { Button, Form, Modal } from 'storybook/internal/components';
+
+import { styled } from 'storybook/theming';
+
+interface BaseField {
+  label: string;
+  options: Record<string, { label: string }>;
+  required?: boolean;
+}
+
+interface CheckboxField extends BaseField {
+  type: 'checkbox';
+  value: string[];
+}
+
+interface SelectField extends BaseField {
+  type: 'select';
+  value: string[];
+}
+
+type FormFields = {
+  building: CheckboxField;
+  interest: CheckboxField;
+  referrer: SelectField;
+};
+
+const Content = styled(Modal.Content)(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.color.defaultText,
+  gap: 8,
+}));
+
+const Row = styled.div({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: 14,
+  marginBottom: 8,
+});
+
+const Question = styled.div(({ theme }) => ({
+  marginTop: 8,
+  marginBottom: 2,
+  fontWeight: theme.typography.weight.bold,
+}));
+
+const Label = styled.label({
+  display: 'flex',
+  gap: 8,
+
+  '&:has(input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled))': {
+    cursor: 'pointer',
+  },
+});
+
+const Actions = styled(Modal.Actions)({
+  marginTop: 8,
+});
+
+const Checkbox = styled(Form.Checkbox)({
+  margin: 2,
+});
+
+export const IntentSurvey = ({
+  onComplete,
+  onDismiss,
+}: {
+  onComplete: (formData: Record<string, string[] | string>) => void;
+  onDismiss: () => void;
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [formFields, setFormFields] = useState<FormFields>({
+    building: {
+      label: 'What are you building?',
+      type: 'checkbox',
+      value: [],
+      required: true,
+      options: shuffleObject({
+        'design-system': {
+          label: 'Design system',
+        },
+        'application-ui': {
+          label: 'Application UI',
+        },
+      }),
+    },
+    interest: {
+      label: 'Which of these are you interested in?',
+      type: 'checkbox',
+      value: [],
+      required: true,
+      options: shuffleObject({
+        'ui-documentation': {
+          label: 'Generating UI docs',
+        },
+        'functional-testing': {
+          label: 'Functional testing',
+        },
+        'accessibility-testing': {
+          label: 'Accessibility testing',
+        },
+        'visual-testing': {
+          label: 'Visual testing',
+        },
+        'ai-augmented-development': {
+          label: 'Building UI with AI',
+        },
+        'team-collaboration': {
+          label: 'Team collaboration',
+        },
+        'design-handoff': {
+          label: 'Design handoff',
+        },
+      }),
+    },
+    referrer: {
+      label: 'How did you learn about Storybook?',
+      type: 'select',
+      required: true,
+      value: [],
+      options: shuffleObject({
+        'we-use-it-at-work': {
+          label: 'We use it at work',
+        },
+        'via-friend-or-colleague': {
+          label: 'Via friend or colleague',
+        },
+        'via-social-media': {
+          label: 'Via social media',
+        },
+        youtube: {
+          label: 'YouTube',
+        },
+        'web-search': {
+          label: 'Web Search',
+        },
+        'ai-agent': {
+          label: 'AI Agent (e.g. ChatGPT)',
+        },
+      }),
+    },
+  });
+
+  const updateFormData = (key: keyof FormFields, optionOrValue: string, value?: boolean) => {
+    const field = formFields[key];
+    setFormFields((fields) => {
+      if (field.type === 'checkbox') {
+        const newValue = value
+          ? [...field.value, optionOrValue]
+          : field.value.filter((item) => item !== optionOrValue);
+        return { ...fields, [key]: { ...field, value: newValue } };
+      }
+      if (field.type === 'select') {
+        return { ...fields, [key]: { ...field, value: [optionOrValue] } };
+      }
+      return fields;
+    });
+  };
+
+  const isValid = Object.values(formFields).every(
+    (field) => !field.required || field.value.length > 0
+  );
+
+  const onSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    if (!isValid) {
+      return;
+    }
+    e.preventDefault();
+    const formData = Object.fromEntries(
+      Object.entries(formFields).map(([key, field]) => [key, field.value])
+    );
+    setIsSubmitting(true);
+    onComplete(formData);
+  };
+
+  return (
+    <Modal defaultOpen width={420} onEscapeKeyDown={onDismiss}>
+      <Form onSubmit={onSubmitForm} id="create-new-story-form">
+        <Content>
+          <Modal.Header>
+            <Modal.Title>Help improve Storybook</Modal.Title>
+          </Modal.Header>
+
+          {(Object.keys(formFields) as Array<keyof FormFields>).map((key) => {
+            const field = formFields[key];
+            return (
+              <React.Fragment key={key}>
+                <Question>{field.label}</Question>
+                {field.type === 'checkbox' && (
+                  <Row>
+                    {Object.entries(field.options).map(([opt, option]) => {
+                      const id = `${key}:${opt}`;
+                      return (
+                        <div key={id}>
+                          <Label htmlFor={id}>
+                            <Checkbox
+                              name={id}
+                              id={id}
+                              disabled={isSubmitting}
+                              onChange={(e) => updateFormData(key, opt, e.target.checked)}
+                            />
+                            {option.label}
+                          </Label>
+                        </div>
+                      );
+                    })}
+                  </Row>
+                )}
+                {field.type === 'select' && (
+                  <Form.Select
+                    name={key}
+                    id={key}
+                    required={field.required}
+                    onChange={(e) => updateFormData(key, e.target.value)}
+                  >
+                    <option disabled selected>
+                      Select an option...
+                    </option>
+                    {Object.entries(field.options).map(([opt, option]) => (
+                      <option key={opt} value={opt}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </Form.Select>
+                )}
+              </React.Fragment>
+            );
+          })}
+
+          <Actions>
+            <Button disabled={isSubmitting || !isValid} size="medium" type="submit" variant="solid">
+              Submit
+            </Button>
+          </Actions>
+        </Content>
+      </Form>
+    </Modal>
+  );
+};
+
+function shuffle<T>(array: T[]): T[] {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+function shuffleObject<T extends object>(object: T): T {
+  return Object.fromEntries(shuffle(Object.entries(object))) as T;
+}

code/addons/onboarding/src/preset.ts

@@ -7,7 +7,7 @@ import type { CoreConfig, Options } from 'storybook/internal/types';
 import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from './constants';
 
 type Event = {
-  type: 'telemetry';
+  type: 'telemetry' | 'survey';
   step: string;
   payload?: any;
 };
@@ -24,11 +24,9 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
 
     channel.on(STORYBOOK_ADDON_ONBOARDING_CHANNEL, ({ type, ...event }: Event) => {
       if (type === 'telemetry') {
-        // @ts-expect-error (bad string)
-        telemetry('addon-onboarding', {
-          ...event,
-          addonVersion,
-        });
+        telemetry('addon-onboarding', { ...event, addonVersion });
+      } else if (type === 'survey') {
+        telemetry('onboarding-survey', { ...event, addonVersion });
       }
     });
   }

code/addons/pseudo-states/src/manager/PseudoStateTool.tsx

@@ -1,6 +1,6 @@
 import React, { type ComponentProps, useCallback } from 'react';
 
-import { Checkbox, IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
+import { Form, IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
 import { color, styled } from 'storybook/internal/theming';
 
 import { ButtonIcon, RefreshIcon } from '@storybook/icons';
@@ -50,7 +50,7 @@ export const PseudoStateTool = () => {
     return {
       id: option,
       title: <LinkTitle active={active}>:{PSEUDO_STATES[option]}</LinkTitle>,
-      input: <Checkbox checked={active} onChange={toggleOption(option)} />,
+      input: <Form.Checkbox checked={active} onChange={toggleOption(option)} />,
       active,
     };
   });