Add guided tour and intent survey to checklist

Author: ghengeveld

code/.storybook/main.ts

@@ -81,6 +81,9 @@ const config = defineMain({
       directory: '../addons/onboarding/src',
       titlePrefix: 'addons/onboarding',
     },
+    {
+      directory: '../addons/onboarding/example-stories',
+    },
     {
       directory: '../addons/pseudo-states/src',
       titlePrefix: 'addons/pseudo-states',
@@ -100,6 +103,7 @@ const config = defineMain({
     },
   ],
   addons: [
+    '@storybook/addon-onboarding',
     '@storybook/addon-themes',
     '@storybook/addon-docs',
     '@storybook/addon-designs',

code/addons/onboarding/example-stories/Button.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
+
+export const Ad: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Df: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Gdf: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};

code/addons/onboarding/example-stories/Button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './button.css';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

code/addons/onboarding/example-stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}

code/addons/onboarding/src/Onboarding.tsx

@@ -98,16 +98,26 @@ export default function Onboarding({ api }: { api: API }) {
     [api]
   );
 
-  const disableOnboarding = useCallback(() => {
-    // remove onboarding query parameter from current url
-    const url = new URL(window.location.href);
-    // @ts-expect-error (not strict)
-    const path = decodeURIComponent(url.searchParams.get('path'));
-    url.search = `?path=${path}&onboarding=false`;
-    history.replaceState({}, '', url.href);
-    api.setQueryParams({ onboarding: 'false' });
-    setEnabled(false);
-  }, [api, setEnabled]);
+  const disableOnboarding = useCallback(
+    (dismissedStep?: StepKey) => {
+      if (dismissedStep) {
+        api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
+          step: dismissedStep,
+          type: 'dismiss',
+          userAgent,
+        });
+      }
+      // remove onboarding query parameter from current url
+      const url = new URL(window.location.href);
+      // @ts-expect-error (not strict)
+      const path = decodeURIComponent(url.searchParams.get('path'));
+      url.search = `?path=${path}&onboarding=false`;
+      history.replaceState({}, '', url.href);
+      api.setQueryParams({ onboarding: 'false' });
+      setEnabled(false);
+    },
+    [api, setEnabled, userAgent]
+  );
 
   const completeOnboarding = useCallback(
     (answers: Record<string, unknown>) => {
@@ -288,12 +298,15 @@ export default function Onboarding({ api }: { api: API }) {
       {step === '1:Intro' ? (
         <SplashScreen onDismiss={() => setStep('2:Controls')} />
       ) : step === '6:IntentSurvey' ? (
-        <IntentSurvey onComplete={completeOnboarding} onDismiss={disableOnboarding} />
+        <IntentSurvey
+          onComplete={completeOnboarding}
+          onDismiss={() => disableOnboarding('6:IntentSurvey')}
+        />
       ) : (
         <GuidedTour
           step={step}
           steps={steps}
-          onClose={disableOnboarding}
+          onClose={() => disableOnboarding(step)}
           onComplete={() => setStep('6:IntentSurvey')}
         />
       )}

code/addons/onboarding/src/Survey.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+
+import { type API } from 'storybook/manager-api';
+import { ThemeProvider, convert } from 'storybook/theming';
+
+import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from './constants';
+import { IntentSurvey } from './features/IntentSurvey/IntentSurvey';
+
+const theme = convert();
+
+export default function Survey({ api }: { api: API }) {
+  // eslint-disable-next-line compat/compat
+  const userAgent = globalThis?.navigator?.userAgent;
+
+  const disableOnboarding = useCallback(() => {
+    // remove onboarding query parameter from current url
+    const url = new URL(window.location.href);
+    // @ts-expect-error (not strict)
+    const path = decodeURIComponent(url.searchParams.get('path'));
+    url.search = `?path=${path}&onboarding=false`;
+    history.replaceState({}, '', url.href);
+    api.setQueryParams({ onboarding: 'false' });
+  }, [api]);
+
+  const complete = useCallback(
+    (answers: Record<string, unknown>) => {
+      api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
+        answers,
+        type: 'survey',
+        userAgent,
+      });
+      disableOnboarding();
+    },
+    [api, disableOnboarding, userAgent]
+  );
+
+  const dismiss = useCallback(() => {
+    api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL, {
+      type: 'skipSurvey',
+    });
+    disableOnboarding();
+  }, [api, disableOnboarding]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <IntentSurvey onComplete={complete} onDismiss={dismiss} />
+    </ThemeProvider>
+  );
+}

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

@@ -173,7 +173,7 @@ export const IntentSurvey = ({
     <Modal defaultOpen width={420} onEscapeKeyDown={onDismiss}>
       <Form onSubmit={onSubmitForm} id="intent-survey-form">
         <Content>
-          <Modal.Header>
+          <Modal.Header onClose={onDismiss}>
             <Modal.Title>Help improve Storybook</Modal.Title>
           </Modal.Header>
 

code/addons/onboarding/src/manager.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { STORY_SPECIFIED } from 'storybook/internal/core-events';
 
@@ -8,49 +8,50 @@ import { addons } from 'storybook/manager-api';
 import { ADDON_CONTROLS_ID } from './constants';
 
 const Onboarding = lazy(() => import('./Onboarding'));
+const Survey = lazy(() => import('./Survey'));
+
+const render = (node: React.ReactNode) => {
+  let container = document.getElementById('storybook-addon-onboarding');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'storybook-addon-onboarding';
+    document.body.appendChild(container);
+  }
+  createRoot(container).render(<Suspense fallback={<div />}>{node}</Suspense>);
+};
 
 // The addon is enabled only when:
 // 1. The onboarding query parameter is present
 // 2. The example button stories are present
 addons.register('@storybook/addon-onboarding', async (api) => {
-  const urlState = api.getUrlState();
-  const isOnboarding =
-    urlState.path === '/onboarding' || urlState.queryParams.onboarding === 'true';
-
-  api.once(STORY_SPECIFIED, () => {
-    const hasButtonStories =
-      !!api.getData('example-button--primary') ||
-      !!document.getElementById('example-button--primary');
-
-    if (!hasButtonStories) {
-      console.warn(
-        `[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/storybook/tree/next/code/addons/onboarding#uninstalling`
-      );
-      return;
-    }
-
-    if (!isOnboarding || window.innerWidth < 730) {
-      return;
-    }
-
-    api.togglePanel(true);
-    api.togglePanelPosition('bottom');
-    api.setSelectedPanel(ADDON_CONTROLS_ID);
-
-    // Add a new DOM element to document.body, where we will bootstrap our React app
-    const domNode = document.createElement('div');
-
-    domNode.id = 'storybook-addon-onboarding';
-    // Append the new DOM element to document.body
-    document.body.appendChild(domNode);
-
-    // Render the React app
-    // eslint-disable-next-line react/no-deprecated
-    ReactDOM.render(
-      <Suspense fallback={<div />}>
-        <Onboarding api={api} />
-      </Suspense>,
-      domNode
+  const { path, queryParams } = api.getUrlState();
+  const isOnboarding = path === '/onboarding' || queryParams.onboarding === 'true';
+  const isSurvey = queryParams.onboarding === 'survey';
+
+  if (isSurvey) {
+    return render(<Survey api={api} />);
+  }
+
+  await new Promise((resolve) => api.once(STORY_SPECIFIED, resolve));
+
+  const hasButtonStories =
+    !!api.getData('example-button--primary') ||
+    !!document.getElementById('example-button--primary');
+
+  if (!hasButtonStories) {
+    console.warn(
+      `[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/storybook/tree/next/code/addons/onboarding#uninstalling`
     );
-  });
+    return;
+  }
+
+  if (!isOnboarding || window.innerWidth < 730) {
+    return;
+  }
+
+  api.togglePanel(true);
+  api.togglePanelPosition('bottom');
+  api.setSelectedPanel(ADDON_CONTROLS_ID);
+
+  return render(<Onboarding api={api} />);
 });

code/core/src/components/components/Modal/Modal.styled.tsx

@@ -89,10 +89,13 @@ export const Col = styled.div({
   gap: 4,
 });
 
-export const Header = (props: React.ComponentProps<typeof Col>) => (
+export const Header = ({
+  onClose,
+  ...props
+}: React.ComponentProps<typeof Col> & { onClose?: () => void }) => (
   <Row>
     <Col {...props} />
-    <CloseButton />
+    <CloseButton onClick={onClose} />
   </Row>
 );
 

code/core/src/manager/settings/Checklist/Checklist.tsx

@@ -424,7 +424,7 @@ export const Checklist = ({
                                         Skip
                                       </Button>
                                     )}
-                                    {(isAccepted || isSkipped) && !isLocked && (
+                                    {((isAccepted && !item.once) || isSkipped) && !isLocked && (
                                       <Button
                                         variant="ghost"
                                         padding="small"