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, 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,
+        },
+      });
+    });
+  },
+};

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

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+
+import { Button, Form, Modal } from 'storybook/internal/components';
+
+import { styled } from 'storybook/theming';
+
+import { isChromatic } from '../../../../../.storybook/isChromatic';
+
+interface BaseField {
+  label: string;
+  options: Record<string, { label: string }>;
+  required?: boolean;
+}
+
+interface CheckboxField extends BaseField {
+  type: 'checkbox';
+  values: Record<keyof BaseField['options'], boolean>;
+}
+
+interface SelectField extends BaseField {
+  type: 'select';
+  values: Record<keyof BaseField['options'], boolean>;
+}
+
+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, Record<string, boolean>>) => void;
+  onDismiss: () => void;
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [formFields, setFormFields] = useState<FormFields>({
+    building: {
+      label: 'What are you building?',
+      type: 'checkbox',
+      required: true,
+      options: shuffleObject({
+        'design-system': { label: 'Design system' },
+        'application-ui': { label: 'Application UI' },
+      }),
+      values: {
+        'design-system': false,
+        'application-ui': false,
+      },
+    },
+    interest: {
+      label: 'Which of these are you interested in?',
+      type: 'checkbox',
+      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' },
+      }),
+      values: {
+        'ui-documentation': false,
+        'functional-testing': false,
+        'accessibility-testing': false,
+        'visual-testing': false,
+        'ai-augmented-development': false,
+        'team-collaboration': false,
+        'design-handoff': false,
+      },
+    },
+    referrer: {
+      label: 'How did you learn about Storybook?',
+      type: 'select',
+      required: true,
+      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)' },
+      }),
+      values: {
+        'we-use-it-at-work': false,
+        'via-friend-or-colleague': false,
+        'via-social-media': false,
+        youtube: false,
+        'web-search': false,
+        'ai-agent': false,
+      },
+    },
+  });
+
+  const updateFormData = (key: keyof FormFields, optionOrValue: string, value?: boolean) => {
+    const field = formFields[key];
+    setFormFields((fields) => {
+      if (field.type === 'checkbox') {
+        const values = { ...field.values, [optionOrValue]: !!value };
+        return { ...fields, [key]: { ...field, values } };
+      }
+      if (field.type === 'select') {
+        const values = Object.fromEntries(
+          Object.entries(field.values).map(([opt]) => [opt, opt === optionOrValue])
+        );
+        return { ...fields, [key]: { ...field, values } };
+      }
+      return fields;
+    });
+  };
+
+  const isValid = Object.values(formFields).every((field) => {
+    if (!field.required) {
+      return true;
+    }
+    // Check if at least one option is selected (true)
+    return Object.values(field.values).some((value) => value === true);
+  });
+
+  const onSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    if (!isValid) {
+      return;
+    }
+    e.preventDefault();
+    setIsSubmitting(true);
+    onComplete(
+      Object.fromEntries(Object.entries(formFields).map(([key, field]) => [key, field.values]))
+    );
+  };
+
+  return (
+    <Modal defaultOpen width={420} onEscapeKeyDown={onDismiss}>
+      <Form onSubmit={onSubmitForm} id="intent-survey-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}
+                              checked={field.values[opt]}
+                              disabled={isSubmitting}
+                              onChange={(e) => updateFormData(key, opt, e.target.checked)}
+                            />
+                            {option.label}
+                          </Label>
+                        </div>
+                      );
+                    })}
+                  </Row>
+                )}
+                {field.type === 'select' && (
+                  <Form.Select
+                    name={key}
+                    id={key}
+                    value={
+                      Object.entries(field.values).find(([, isSelected]) => isSelected)?.[0] || ''
+                    }
+                    required={field.required}
+                    disabled={isSubmitting}
+                    onChange={(e) => updateFormData(key, e.target.value)}
+                  >
+                    <option disabled hidden value="">
+                      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 isChromatic() ? object : (Object.fromEntries(shuffle(Object.entries(object))) as T);
+}