Addon-onboarding: Move onboarding to monorepo

code/addons/onboarding/src/App.tsx

@@ -27,7 +27,7 @@ export default function App({ api }: { api: API }) {
   const skipOnboarding = useCallback(() => {
     // remove onboarding query parameter from current url
     const url = new URL(window.location.href);
-    const path = decodeURIComponent(url.searchParams.get('path'));
+    const path = decodeURIComponent(url.searchParams.get('path') as any);
     url.search = `?path=${path}&onboarding=false`;
     history.replaceState({}, '', url.href);
     api.setQueryParams({ onboarding: 'false' });
@@ -121,7 +121,7 @@ export default function App({ api }: { api: API }) {
           onFirstTourDone={() => {
             setStep('3:WriteYourStory');
           }}
-          codeSnippets={codeSnippets}
+          codeSnippets={codeSnippets as any}
           onLastTourDone={() => {
             try {
               api.selectStory('configure-your-project--docs');
@@ -139,7 +139,7 @@ export default function App({ api }: { api: API }) {
       {enabled && step === '3:WriteYourStory' && (
         <WriteStoriesModal
           api={api}
-          codeSnippets={codeSnippets}
+          codeSnippets={codeSnippets as any}
           addonsStore={addons}
           onFinish={() => {
             try {

code/addons/onboarding/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps } from 'react';
 import React, { forwardRef } from 'react';
 import { styled } from '@storybook/theming';
 

code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx

@@ -45,7 +45,7 @@ export const OneTimeConfetti: Story = {
     recycle: false,
     tweenDuration: 20000,
     onConfettiComplete: (confetti) => {
-      confetti.reset();
+      confetti?.reset();
     },
   },
 };

code/addons/onboarding/src/components/Confetti/Confetti.tsx

@@ -76,7 +76,7 @@ function getRandomInt(min: number, max: number) {
   return Math.floor(Math.random() * (max - min)) + min;
 }
 
-function draw(context: CanvasRenderingContext2D) {
+function draw(this: any, context: CanvasRenderingContext2D) {
   this.shape = this.shape || getRandomInt(1, 6);
 
   switch (this.shape) {

code/addons/onboarding/src/components/List/List.stories.tsx

@@ -37,7 +37,7 @@ export const Default: StoryObj<typeof meta> = {
     );
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement.parentElement);
+    const canvas = within(canvasElement.parentElement!);
     const button = canvas.getByText('Complete');
 
     await expect(canvas.getAllByLabelText('complete')).toHaveLength(1);

code/addons/onboarding/src/components/List/ListItem/ListItem.tsx

@@ -13,7 +13,7 @@ export const ListItem = ({ children, index, isCompleted }: ListItemProps) => {
     <ListItemWrapper>
       <ListItemIndexWrapper
         aria-label={isCompleted ? 'complete' : 'not complete'}
-        isCompleted={isCompleted}
+        isCompleted={isCompleted!}
       >
         {isCompleted ? <CheckIcon width={10} height={10} color="white" /> : index}
       </ListItemIndexWrapper>

code/addons/onboarding/src/components/Modal/Modal.stories.tsx

@@ -37,7 +37,7 @@ export const Default: Story = {
     );
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement.parentElement);
+    const canvas = within(canvasElement.parentElement!);
     const button = canvas.getByText('Open modal');
     await userEvent.click(button);
     await expect(canvas.findByText('Hello world!')).resolves.toBeInTheDocument();
@@ -67,7 +67,7 @@ export const FixedWidth: Story = {
     );
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement.parentElement);
+    const canvas = within(canvasElement.parentElement!);
     const button = canvas.getByText('Open modal');
     await userEvent.click(button);
     await expect(canvas.findByText('Hello world!')).resolves.toBeInTheDocument();
@@ -97,7 +97,7 @@ export const FixedHeight: Story = {
     );
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement.parentElement);
+    const canvas = within(canvasElement.parentElement!);
     const button = canvas.getByText('Open modal');
     await userEvent.click(button);
     await expect(canvas.findByText('Hello world!')).resolves.toBeInTheDocument();
@@ -128,7 +128,7 @@ export const FixedWidthAndHeight: Story = {
     );
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement.parentElement);
+    const canvas = within(canvasElement.parentElement!);
     const button = canvas.getByText('Open modal');
     await userEvent.click(button);
     await expect(canvas.findByText('Hello world!')).resolves.toBeInTheDocument();

code/addons/onboarding/src/components/Modal/Modal.tsx

@@ -35,8 +35,8 @@ export function Modal({
           <StyledOverlay />
         </Dialog.Overlay>
         <ContentWrapper
-          width={width}
-          height={height}
+          width={width!}
+          height={height!}
           onInteractOutside={onInteractOutside}
           onEscapeKeyDown={onEscapeKeyDown}
         >

code/addons/onboarding/src/components/PulsatingEffect/PulsatingEffect.stories.tsx

@@ -35,7 +35,7 @@ export const Default: Story = {
     </>
   ),
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement.parentElement);
+    const canvas = within(canvasElement.parentElement!);
     const button = canvas.getByRole('button');
     await expect(button).toHaveStyle(
       'animation: 3s ease-in-out 0s infinite normal none running pulsate'

code/addons/onboarding/src/components/PulsatingEffect/PulsatingEffect.tsx

@@ -1,6 +1,10 @@
 import { useEffect } from 'react';
 
-export function PulsatingEffect({ targetSelector }: { targetSelector: string }): JSX.Element {
+export function PulsatingEffect({
+  targetSelector,
+}: {
+  targetSelector: string;
+}): JSX.Element | null {
   useEffect(() => {
     const element = document.querySelector<HTMLElement>(targetSelector);
 

code/addons/onboarding/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -1,11 +1,5 @@
 import React, { createRef, useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import {
-  Backdrop,
-  Code,
-  Container,
-  SnippetWrapper,
-  SnippetWrapperFirst,
-} from './SyntaxHighlighter.styled';
+import { Backdrop, Code, Container, SnippetWrapperFirst } from './SyntaxHighlighter.styled';
 import { Snippet } from './Snippet/Snippet';
 import { ThemeProvider, ensure, themes } from '@storybook/theming';
 import { SyntaxHighlighter as StorybookSyntaxHighlighter } from '@storybook/components';

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

@@ -1,18 +1,18 @@
+import type { ComponentProps } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
 import type { CallBackProps } from 'react-joyride';
-import Joyride, { STATUS, Step } from 'react-joyride';
+import Joyride, { STATUS } from 'react-joyride';
 import type { API } from '@storybook/manager-api';
 import { UPDATE_STORY_ARGS } from '@storybook/core-events';
 import { useTheme } from '@storybook/theming';
 
 import { PulsatingEffect } from '../../components/PulsatingEffect/PulsatingEffect';
 import { Confetti } from '../../components/Confetti/Confetti';
-import type { TooltipProps } from './Tooltip';
 import { Tooltip } from './Tooltip';
 import { SpanHighlight } from '../WriteStoriesModal/WriteStoriesModal.styled';
 import type { CodeSnippets } from '../WriteStoriesModal/code/types';
 
-type GuidedTourStep = TooltipProps['step'];
+type GuidedTourStep = ComponentProps<typeof Tooltip>['step'];
 
 export function GuidedTour({
   api,

code/addons/onboarding/src/features/GuidedTour/Tooltip.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import type { Step, TooltipRenderProps } from 'react-joyride';
@@ -40,16 +41,33 @@ const TooltipFooter = styled.div`
   margin-top: 15px;
 `;
 
-export type TooltipProps = {
-  step: Step & {
-    hideNextButton?: boolean;
-    onNextButtonClick?: () => void;
-  };
+type TooltipProps = {
+  step: Partial<
+    Pick<
+      // this only seems to happen during the check task, nos in vsCode..
+      // this seems to be 'any' in vsCode because of it?
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore (hide property 'input' circularly references itself in mapped type)
+      Step,
+      | 'title'
+      | 'content'
+      | 'target'
+      | 'placement'
+      | 'disableOverlay'
+      | 'disableBeacon'
+      | 'floaterProps'
+      | 'spotlightClicks'
+      | 'styles'
+    > & {
+      hideNextButton: boolean;
+      onNextButtonClick: () => void;
+    }
+  >;
   primaryProps: TooltipRenderProps['primaryProps'];
   tooltipProps: TooltipRenderProps['tooltipProps'];
 };
 
-export const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => {
+export const Tooltip: FC<TooltipProps> = ({ step, primaryProps, tooltipProps }) => {
   return (
     <TooltipBody {...tooltipProps}>
       <Wrapper>

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

@@ -57,7 +57,7 @@ export const DefaultPlayed: Story = {
     ...Default.args,
   },
   play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement.parentElement);
+    const canvas = within(canvasElement.parentElement!);
     const importsText = await canvas.findByText('Imports');
     await step('Wait for modal to be visible', async () => {
       const modal = await canvas.findByRole('dialog');

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

@@ -245,12 +245,14 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                         </p>
                         <List>
                           <ListItem
-                            isCompleted={isWarningStoryCopied || warningButtonStatus?.data}
+                            isCompleted={
+                              (isWarningStoryCopied as any) || (warningButtonStatus?.data as any)
+                            }
                             index={1}
                           >
                             Copy the Warning story.
                           </ListItem>
-                          <ListItem isCompleted={warningButtonStatus?.data} index={2}>
+                          <ListItem isCompleted={warningButtonStatus?.data as any} index={2}>
                             <Step2Text>
                               Open the Button story in your current working directory.
                             </Step2Text>
@@ -261,7 +263,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                               </SpanHighlight>
                             )}
                           </ListItem>
-                          <ListItem isCompleted={warningButtonStatus?.data} index={3}>
+                          <ListItem isCompleted={warningButtonStatus?.data as any} index={3}>
                             Paste it at the bottom of the file and save.
                           </ListItem>
                         </List>

code/addons/onboarding/src/helpers/textContentMatcher.tsx

@@ -14,7 +14,7 @@ export function textContentMatcher(textMatch: string | RegExp) {
   const hasText =
     typeof textMatch === 'string'
       ? (node: Element) => node.textContent === textMatch
-      : (node: Element) => textMatch.test(node.textContent);
+      : (node: Element) => textMatch.test(node.textContent!);
 
   const matcher = (_content: string, node: Element) => {
     if (!hasText(node)) {

scripts/package.json

@@ -176,7 +176,7 @@
     "ts-dedent": "^2.0.0",
     "tsup": "^6.7.0",
     "type-fest": "~2.19",
-    "typescript": "~5.2.2",
+    "typescript": "^5.3.2",
     "util": "^0.12.4",
     "uuid": "^9.0.0",
     "vitest": "^1.2.2",

scripts/yarn.lock

@@ -2837,7 +2837,7 @@ __metadata:
     ts-loader: "npm:^9.4.2"
     tsup: "npm:^6.7.0"
     type-fest: "npm:~2.19"
-    typescript: "npm:~5.2.2"
+    typescript: "npm:^5.3.2"
     util: "npm:^0.12.4"
     uuid: "npm:^9.0.0"
     verdaccio: "npm:^5.19.1"
@@ -14989,23 +14989,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:~5.2.2":
-  version: 5.2.2
-  resolution: "typescript@npm:5.2.2"
+"typescript@npm:^5.3.2":
+  version: 5.3.3
+  resolution: "typescript@npm:5.3.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 91ae3e6193d0ddb8656d4c418a033f0f75dec5e077ebbc2bd6d76439b93f35683936ee1bdc0e9cf94ec76863aa49f27159b5788219b50e1cd0cd6d110aa34b07
+  checksum: e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A~5.2.2#optional!builtin<compat/typescript>":
-  version: 5.2.2
-  resolution: "typescript@patch:typescript@npm%3A5.2.2#optional!builtin<compat/typescript>::version=5.2.2&hash=f3b441"
+"typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>":
+  version: 5.3.3
+  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 062c1cee1990e6b9419ce8a55162b8dc917eb87f807e4de0327dbc1c2fa4e5f61bc0dd4e034d38ff541d1ed0479b53bcee8e4de3a4075c51a1724eb6216cb6f5
+  checksum: 1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500
   languageName: node
   linkType: hard