@storybook/addon-onboarding 0.0.26 → 0.0.27--canary.48.e9e2981.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/manager.js +71 -62
  2. package/dist/manager.js.map +1 -1
  3. package/dist/manager.mjs +65 -56
  4. package/dist/manager.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/manager.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/PulsatingEffect/PulsatingEffect.tsx","../src/components/Confetti/Confetti.tsx","../src/components/Button/Button.tsx","../src/features/GuidedTour/Tooltip.tsx","../src/features/GuidedTour/GuidedTour.tsx","../src/components/Modal/Modal.styled.tsx","../src/components/Modal/Modal.tsx","../src/features/WelcomeModal/StorybookLogo.tsx","../src/features/WelcomeModal/WelcomeModal.styled.tsx","../src/features/WelcomeModal/WelcomeModal.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx","../src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx","../src/components/SyntaxHighlighter/Snippet/Snippet.styled.tsx","../src/components/SyntaxHighlighter/Snippet/Snippet.tsx","../src/components/SyntaxHighlighter/SyntaxHighlighter.tsx","../src/components/List/List.styled.tsx","../src/components/List/List.tsx","../src/components/List/ListItem/ListItem.styled.tsx","../src/components/List/ListItem/ListItem.tsx","../src/features/WriteStoriesModal/hooks/useGetButtonPath.tsx","../src/features/WriteStoriesModal/hooks/useGetWarningButtonStatus.tsx","../src/features/WriteStoriesModal/hooks/useGetBackdropBoundary.tsx","../src/features/WriteStoriesModal/code/javascript.tsx","../src/features/WriteStoriesModal/code/typescript.tsx","../src/features/WriteStoriesModal/code/nextjs-typescript.tsx","../src/features/WriteStoriesModal/hooks/useGetFrameworkName.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.tsx","../src/App.tsx","../src/manager.tsx"],"names":["useEffect","PulsatingEffect","targetSelector","element","keyframes","style","styleElement","init_PulsatingEffect","__esmMin","ReactConfetti","React","styled","createPortal","useState","Confetti","top","left","width","height","colors","confettiProps","confettiContainer","container","Wrapper","draw","getRandomInt","min","max","context","init_Confetti","Button","init_Button","theme","TooltipBody","TooltipTitle","TooltipContent","TooltipFooter","Tooltip","init_Tooltip","step","primaryProps","tooltipProps","Joyride","STATUS","UPDATE_STORY_ARGS","GuidedTour","api","isFinalStep","onFirstTourDone","onLastTourDone","stepIndex","setStepIndex","data","init_GuidedTour","css","Dialog","StyledOverlay","StyledContent","ContentWrapper","init_Modal_styled","children","contentProps","ref","Modal","onEscapeKeyDown","onInteractOutside","ev","rootProps","init_Modal","StorybookLogo","init_StorybookLogo","Icons","ModalContentWrapper","TopContent","Title","Description","SkipButton","StyledIcon","Background","circle1Anim","Circle1","circle2Anim","Circle2","circle3Anim","Circle3","StyledTitle","StyledDescription","init_WelcomeModal_styled","WelcomeModal","init_WelcomeModal","onProceed","skipOnboarding","Close","ModalContent","Main","Header","ModalTitle","Content","SpanHighlight","Image","init_WriteStoriesModal_styled","motion","Code","Container","Backdrop","init_SyntaxHighlighter_styled","SnippetWrapper","init_Snippet_styled","Fragment","forwardRef","StorybookSyntaxHighlighter","ThemeProvider","ensure","themes","wrapperVariants","Snippet","init_Snippet","active","content","open","customStyle","toggle","code","i","createRef","useCallback","useLayoutEffect","useMemo","OFFSET","SyntaxHighlighter","init_SyntaxHighlighter","activeStep","steps","setSteps","refs","getYPos","idx","yPos","setNewSteps","newSteps","backdropHeight","finalSteps","resizeObserver","ListWrapper","init_List_styled","List","init_List","ListItemWrapper","ListItemContentWrapper","ListItemIndexWrapper","init_ListItem_styled","isCompleted","ListItem","init_ListItem","index","useGetButtonPath","buttonPath","setButtonPath","e","init_useGetButtonPath","STORY_INDEX_INVALIDATED","STORY_RENDERED","useGetWarningButtonStatus","init_useGetWarningButtonStatus","addonsStore","status","setStatus","getWarningButtonStatus","useGetBackdropBoundary","init_useGetBackdropBoundary","className","boundary","setBoundary","javascript_default","init_javascript","typescript_default","init_typescript","nextjs_typescript_default","init_nextjs_typescript","useGetProject","project","setProject","json","init_useGetFrameworkName","useMeasure","WriteStoriesModal","init_WriteStoriesModal","init_title_sidebar","init_story_name_sidebar","init_args","onFinish","setStep","isWarningStoryCopied","setWarningStoryCopied","clipboardButtonRef","clipboardButtonBounds","warningButtonStatus","backdropBoundary","copyWarningStory","warningContent","title_sidebar_default","story_name_sidebar_default","args_default","App_exports","__export","App","addons","enabled","setEnabled","showConfetti","setShowConfetti","url","path","stepTimeout","storyId","confetti","init_App","ReactDOM","lazy","Suspense","STORY_SPECIFIED","urlState","isOnboarding","domNode"],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\n\nexport function PulsatingEffect({\n targetSelector,\n}: {\n targetSelector: string;\n}): JSX.Element {\n useEffect(() => {\n const element = document.querySelector<HTMLElement>(targetSelector);\n\n if (element) {\n element.style.animation = \"pulsate 3s infinite\";\n element.style.transformOrigin = \"center\";\n element.style.animationTimingFunction = \"ease-in-out\";\n\n const keyframes = `\n @keyframes pulsate {\n 0% {\n box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);\n }\n }\n `;\n const style = document.createElement(\"style\");\n style.id = \"sb-onboarding-pulsating-effect\";\n style.innerHTML = keyframes;\n document.head.appendChild(style);\n }\n\n return () => {\n const styleElement = document.querySelector(\n \"#sb-onboarding-pulsating-effect\"\n );\n\n if (styleElement) {\n styleElement.remove();\n }\n\n if (element) {\n element.style.animation = \"auto\";\n }\n };\n }, [targetSelector]);\n\n return null;\n}\n","import ReactConfetti from \"react-confetti\";\nimport React, { useEffect } from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { createPortal } from \"react-dom\";\nimport { useState } from \"react\";\n\ninterface ConfettiProps\n extends Omit<React.ComponentProps<typeof ReactConfetti>, \"drawShape\"> {\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n numberOfPieces?: number;\n recycle?: boolean;\n colors?: string[];\n}\n\nconst Wrapper = styled.div<{\n width: number;\n height: number;\n top: number;\n left: number;\n}>(({ width, height, left, top }) => ({\n width: `${width}px`,\n height: `${height}px`,\n left: `${left}px`,\n top: `${top}px`,\n position: \"relative\",\n overflow: \"hidden\",\n}));\n\nexport function Confetti({\n top = 0,\n left = 0,\n width = window.innerWidth,\n height = window.innerHeight,\n colors = [\"#CA90FF\", \"#FC521F\", \"#66BF3C\", \"#FF4785\", \"#FFAE00\", \"#1EA7FD\"],\n ...confettiProps\n}: ConfettiProps): React.ReactPortal {\n const [confettiContainer] = useState(() => {\n const container = document.createElement(\"div\");\n container.setAttribute(\"id\", \"confetti-container\");\n container.setAttribute(\n \"style\",\n \"position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;\"\n );\n\n return container;\n });\n\n useEffect(() => {\n document.body.appendChild(confettiContainer);\n\n return () => {\n document.body.removeChild(confettiContainer);\n };\n }, []);\n\n return createPortal(\n <Wrapper top={top} left={left} width={width} height={height}>\n <ReactConfetti colors={colors} drawShape={draw} {...confettiProps} />\n </Wrapper>,\n confettiContainer\n );\n}\n\nenum ParticleShape {\n Circle = 1,\n Square = 2,\n TShape = 3,\n LShape = 4,\n Triangle = 5,\n QuarterCircle = 6,\n}\n\nfunction getRandomInt(min: number, max: number) {\n return Math.floor(Math.random() * (max - min)) + min;\n}\n\nfunction draw(context: CanvasRenderingContext2D) {\n this.shape = this.shape || getRandomInt(1, 6);\n\n switch (this.shape) {\n case ParticleShape.Square: {\n const cornerRadius = 2;\n const width = this.w / 2;\n const height = this.h / 2;\n\n context.moveTo(-width + cornerRadius, -height);\n context.lineTo(width - cornerRadius, -height);\n context.arcTo(\n width,\n -height,\n width,\n -height + cornerRadius,\n cornerRadius\n );\n context.lineTo(width, height - cornerRadius);\n context.arcTo(width, height, width - cornerRadius, height, cornerRadius);\n context.lineTo(-width + cornerRadius, height);\n context.arcTo(\n -width,\n height,\n -width,\n height - cornerRadius,\n cornerRadius\n );\n context.lineTo(-width, -height + cornerRadius);\n context.arcTo(\n -width,\n -height,\n -width + cornerRadius,\n -height,\n cornerRadius\n );\n\n break;\n }\n case ParticleShape.TShape: {\n context.rect(-4, -4, 8, 16);\n context.rect(-12, -4, 24, 8);\n break;\n }\n case ParticleShape.LShape: {\n context.rect(-4, -4, 8, 16);\n context.rect(-4, -4, 24, 8);\n break;\n }\n case ParticleShape.Circle: {\n context.arc(0, 0, this.radius, 0, 2 * Math.PI);\n break;\n }\n case ParticleShape.Triangle: {\n context.moveTo(16, 4);\n context.lineTo(4, 24);\n context.lineTo(24, 24);\n break;\n }\n case ParticleShape.QuarterCircle: {\n context.arc(4, -4, 4, -Math.PI / 2, 0);\n context.lineTo(4, 0);\n break;\n }\n }\n\n context.closePath();\n context.fill();\n}\n","import { styled } from \"@storybook/theming\";\nimport React, { FC, forwardRef } from \"react\";\n\nexport interface ButtonProps {\n children: string;\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const Button = styled.button`\n all: unset;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 0.75rem;\n background: ${({ theme }) => theme.color.secondary};\n color: ${({ theme }) => theme.color.lightest};\n height: 32px;\n font-size: 0.8125rem;\n font-weight: 700;\n font-family: ${({ theme }) => theme.typography.fonts.base};\n transition: all 0.16s ease-in-out;\n text-decoration: none;\n\n &:hover {\n background-color: #0b94eb;\n }\n\n &:focus {\n box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n }\n`;\n","import React from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { TooltipRenderProps } from \"react-joyride\";\nimport { Button } from \"../../components/Button/Button\";\n\nconst TooltipBody = styled.div`\n background: #fff;\n width: 260px;\n padding: 15px;\n border-radius: 5px;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst TooltipTitle = styled.div`\n font-size: 13px;\n font-weight: 700;\n color: ${({ theme }) => theme.color.darkest};\n`;\n\nconst TooltipContent = styled.p`\n font-size: 13px;\n text-align: start;\n color: ${({ theme }) => theme.color.mediumdark};\n margin: 0;\n margin-top: 5px;\n`;\n\nconst TooltipFooter = styled.div`\n display: flex;\n justify-content: flex-end;\n margin-top: 15px;\n`;\n\nexport type TooltipProps = TooltipRenderProps & {\n step: TooltipRenderProps[\"step\"] & { hideNextButton?: boolean; onNextButtonClick?: () => void };\n};\n\nexport const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => {\n return (\n <TooltipBody {...tooltipProps}>\n <Wrapper>\n {step.title && <TooltipTitle>{step.title}</TooltipTitle>}\n <TooltipContent>{step.content}</TooltipContent>\n </Wrapper>\n {!step.hideNextButton && (\n <TooltipFooter id=\"buttonNext\">\n <Button {...{\n ...primaryProps,\n ...(step.onNextButtonClick ? { onClick: step.onNextButtonClick } : {})\n }}>Next</Button>\n </TooltipFooter>\n )}\n </TooltipBody>\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport Joyride, { CallBackProps, STATUS, Step } from \"react-joyride\";\n\nimport { PulsatingEffect } from \"../../components/PulsatingEffect/PulsatingEffect\";\nimport { Confetti } from \"../../components/Confetti/Confetti\";\nimport { API } from \"@storybook/manager-api\";\nimport { UPDATE_STORY_ARGS } from \"@storybook/core-events\";\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\n\ntype GuidedTourStep = TooltipProps['step'];\n\nexport function GuidedTour({\n api,\n isFinalStep,\n onFirstTourDone,\n onLastTourDone,\n}: {\n api: API;\n isFinalStep?: boolean;\n onFirstTourDone: () => void;\n onLastTourDone: () => void;\n}) {\n const [stepIndex, setStepIndex] = useState<number>();\n\n useEffect(() => {\n api.once(UPDATE_STORY_ARGS, () => {\n setStepIndex(3);\n });\n }, []);\n\n const steps: GuidedTourStep[] = isFinalStep\n ? [\n {\n target: \"#example-button--warning\",\n title: \"Congratulations!\",\n content:\n \"You just created your first story. You nailed the basics. Continue setting up your project and start writing stories for your components.\",\n placement: \"right\",\n disableOverlay: true,\n disableBeacon: true,\n floaterProps: {\n disableAnimation: true,\n },\n onNextButtonClick() {\n onLastTourDone();\n },\n },\n ]\n : [\n {\n target: \"#storybook-explorer-tree > div\",\n title: \"Storybook is built from stories\",\n content:\n \"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.\",\n placement: \"right\",\n disableBeacon: true,\n styles: {\n spotlight: {\n transform: \"translateY(30px)\",\n },\n },\n floaterProps: {\n disableAnimation: true,\n },\n },\n {\n target: \"#storybook-preview-iframe\",\n title: \"Storybook previews are interactive\",\n content:\n \"Whenever you modify code or stories, Storybook automatically updates how it previews your components.\",\n placement: \"bottom\",\n },\n {\n target: \"#root div[role=main]\",\n title: \"Interactive story playground\",\n content: (\n <>\n See how a story renders with different data and state without\n touching code.\n <br />\n <br />\n Try it out by pressing this button.\n <PulsatingEffect targetSelector=\"#control-primary\" />\n </>\n ),\n placement: \"right\",\n spotlightClicks: true,\n floaterProps: {\n target: \"#control-primary\",\n },\n hideNextButton: true,\n },\n {\n target: \"#control-primary\",\n title: \"Congratulations!\",\n content: (\n <>\n You've learned how to control your stories interactively. Now:\n let's explore how to write your first story.\n <Confetti\n numberOfPieces={800}\n recycle={false}\n tweenDuration={20000}\n />\n </>\n ),\n placement: \"right\",\n disableOverlay: true,\n },\n ];\n\n return (\n <Joyride\n steps={steps}\n continuous\n stepIndex={stepIndex}\n spotlightPadding={0}\n hideBackButton\n disableCloseOnEsc\n disableOverlayClose\n disableScrolling\n hideCloseButton\n callback={(data: CallBackProps) => {\n if (!isFinalStep && data.status === STATUS.FINISHED) {\n onFirstTourDone();\n }\n }}\n floaterProps={{\n styles: {\n floater: {\n padding: \"8px 0 0 8px\",\n filter:\n \"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))\",\n },\n },\n }}\n tooltipComponent={Tooltip}\n styles={{\n spotlight: {\n border: \"solid 2px #004c7c\",\n },\n overlay: {\n backgroundColor: \"rgba(0, 0, 0, 0.48)\",\n },\n options: {\n zIndex: 10000,\n primaryColor: \"#029CFD\",\n },\n }}\n />\n );\n}\n","import { css, styled } from \"@storybook/theming\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nexport const StyledOverlay = styled.div`\n background-color: rgba(27, 28, 29, 0.48);\n position: fixed;\n inset: 0px;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledContent = styled.div<{\n width: number;\n height: number;\n}>(\n ({ width, height }) => css`\n background-color: white;\n border-radius: 6px;\n box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: ${width ?? 740}px;\n height: ${height ? `${height}px` : \"auto\"};\n max-width: calc(100% - 40px);\n max-height: 85vh;\n overflow: hidden;\n `\n);\n\nexport const ContentWrapper = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Dialog.Content>\n>(({ width, height, children, ...contentProps }, ref) => (\n <Dialog.Content ref={ref} asChild {...contentProps}>\n <StyledContent width={width} height={height}>\n {children}\n </StyledContent>\n </Dialog.Content>\n));\n","import React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { ContentWrapper, StyledOverlay } from \"./Modal.styled\";\n\ntype ContentProps = React.ComponentProps<typeof ContentWrapper>;\n\ninterface ModalProps\n extends Omit<React.ComponentProps<typeof Dialog.Root>, \"children\"> {\n width?: number;\n height?: number;\n children: (props: {\n Title: typeof Dialog.Title;\n Description: typeof Dialog.Description;\n Close: typeof Dialog.Close;\n }) => React.ReactNode;\n onEscapeKeyDown?: ContentProps[\"onEscapeKeyDown\"];\n onInteractOutside?: ContentProps[\"onInteractOutside\"];\n}\n\nexport const initial = { opacity: 0 };\nexport const animate = { opacity: 1, transition: { duration: 0.3 } };\nexport const exit = { opacity: 0, transition: { duration: 0.3 } };\n\nexport function Modal({\n children,\n width,\n height,\n onEscapeKeyDown,\n onInteractOutside = (ev) => ev.preventDefault(),\n ...rootProps\n}: ModalProps) {\n return (\n <Dialog.Root {...rootProps}>\n <Dialog.Portal>\n <Dialog.Overlay asChild>\n <StyledOverlay />\n </Dialog.Overlay>\n <ContentWrapper\n width={width}\n height={height}\n onInteractOutside={onInteractOutside}\n onEscapeKeyDown={onEscapeKeyDown}\n >\n {children({\n Title: Dialog.Title,\n Description: Dialog.Description,\n Close: Dialog.Close,\n })}\n </ContentWrapper>\n </Dialog.Portal>\n </Dialog.Root>\n );\n}\n","import React from \"react\";\n\nexport function StorybookLogo() {\n return (\n <svg\n width=\"32px\"\n height=\"40px\"\n viewBox=\"0 0 256 319\"\n preserveAspectRatio=\"xMidYMid\"\n >\n <defs>\n <path\n d=\"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z\"\n id=\"path-1\"\n ></path>\n </defs>\n <g>\n <mask id=\"mask-2\" fill=\"white\">\n <use xlinkHref=\"#path-1\"></use>\n </mask>\n <use fill=\"#FF4785\" fillRule=\"nonzero\" xlinkHref=\"#path-1\"></use>\n <path\n d=\"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z\"\n fill=\"#FFFFFF\"\n fillRule=\"nonzero\"\n mask=\"url(#mask-2)\"\n ></path>\n </g>\n </svg>\n );\n}\n","import { Icons } from \"@storybook/components\";\nimport { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContentWrapper = styled.div`\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100%;\n justify-content: space-between;\n`;\n\nexport const TopContent = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n`;\n\nexport const Title = styled.h1`\n margin: 0;\n margin-top: 20px;\n margin-bottom: 5px;\n color: ${({ theme }) => theme.color.darkest};\n font-weight: ${({ theme }) => theme.typography.weight.bold};\n font-size: ${({ theme }) => theme.typography.size.m1}px;\n line-height: ${({ theme }) => theme.typography.size.m3}px;\n`;\n\nexport const Description = styled.p`\n margin: 0;\n margin-bottom: 20px;\n max-width: 320px;\n text-align: center;\n font-size: ${({ theme }) => theme.typography.size.s2}px;\n font-weight: ${({ theme }) => theme.typography.weight.regular};\n line-height: ${({ theme }) => theme.typography.size.m1}px;\n color: ${({ theme }) => theme.color.darker};\n`;\n\nexport const SkipButton = styled.button`\n all: unset;\n cursor: pointer;\n font-size: 13px;\n color: #798186;\n padding-bottom: 20px;\n\n &:focus-visible {\n outline: auto;\n }\n`;\n\nexport const StyledIcon = styled(Icons)`\n margin-left: 2px;\n height: 10px;\n`;\n\nexport const Background = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(-200px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n position: absolute;\n width: 1200px;\n height: 1200px;\n left: -200px;\n top: -900px;\n background: radial-gradient(\n circle at center,\n rgba(253, 255, 147, 1) 0%,\n rgba(253, 255, 147, 0) 70%\n );\n animation: ${circle1Anim} 4s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 3;\n`;\n\nexport const circle2Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(400px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n position: absolute;\n width: 1200px;\n height: 1200px;\n left: -600px;\n top: -840px;\n background: radial-gradient(\n circle at center,\n rgba(255, 119, 119, 1) 0%,\n rgba(255, 119, 119, 0) 70%\n );\n animation: ${circle2Anim} 6s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 2;\n`;\n\nexport const circle3Anim = keyframes`\n 0% { transform: translate(600px, -40px) }\n 50% { transform: translate(600px, -200px) }\n 100% { transform: translate(600px, -40px) }\n`;\n\nexport const Circle3 = styled.div`\n position: absolute;\n width: 1200px;\n height: 1200px;\n left: -600px;\n top: -840px;\n background: radial-gradient(\n circle at center,\n rgba(119, 255, 247, 0.8) 0%,\n rgba(119, 255, 247, 0) 70%\n );\n animation: ${circle3Anim} 4s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 4;\n`;\n\nexport const StyledTitle = styled.h2`\n color: #000;\n font-weight: 700;\n font-size: 20px;\n line-height: 20px;\n`;\nexport const StyledDescription = styled.p`\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #454e54;\n`;\n","import React, { FC } from \"react\";\n\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"./StorybookLogo\";\nimport {\n ModalContentWrapper,\n SkipButton,\n StyledIcon,\n Title,\n Description,\n Background,\n Circle1,\n Circle2,\n Circle3,\n TopContent,\n} from \"./WelcomeModal.styled\";\n\ninterface WelcomeModalProps {\n onProceed: () => void;\n skipOnboarding: () => void;\n}\n\nexport const WelcomeModal: FC<WelcomeModalProps> = ({\n onProceed,\n skipOnboarding,\n}) => {\n return (\n <Modal width={540} height={430} defaultOpen>\n {({ Close }) => (\n <ModalContentWrapper data-chromatic=\"ignore\">\n <TopContent>\n <StorybookLogo />\n <Title>Welcome to Storybook</Title>\n <Description>\n Storybook helps you develop UI components. Learn the basics in a\n few simple steps.\n </Description>\n <Button style={{ marginTop: 4 }} onClick={onProceed}>\n Start your 3 minute tour\n </Button>\n </TopContent>\n <SkipButton onClick={skipOnboarding}>\n Skip tour\n <StyledIcon icon=\"arrowright\" />\n </SkipButton>\n <Background>\n <Circle1 />\n <Circle2 />\n <Circle3 />\n </Background>\n </ModalContentWrapper>\n )}\n </Modal>\n );\n};\n","import { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContent = styled.div`\n display: flex;\n flex-direction: row;\n height: 100%;\n max-height: 85vh;\n`;\n\nexport const Main = styled.div`\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n font-family: ${({ theme }) => theme.typography.fonts.base};\n`;\n\nexport const Header = styled.div`\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 15px;\n border-bottom: 1px solid ${({ theme }) => theme.appBorderColor};\n height: 40px;\n`;\n\nexport const ModalTitle = styled.div`\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 13px;\n font-weight: bold;\n color: ${({ theme }) => theme.color.darkest};\n\n span {\n margin-top: 2px;\n }\n`;\n\nexport const Content = styled.div`\n font-size: 13px;\n padding: 15px;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: space-between;\n color: ${({ theme }) => theme.color.darker};\n\n h3 {\n font-size: 13px;\n font-weight: bold;\n padding: 0;\n margin: 0;\n }\n`;\n\nexport const SpanHighlight = styled.span`\n color: ${({ theme }) => theme.color.secondary};\n display: inline-block;\n border-radius: 4px;\n padding: 0.2em 0.4em;\n opacity: 0.8;\n background-color: ${({ theme }) => theme.color.secondary}20;\n font-weight: bold;\n`;\n\nexport const Image = styled.img`\n max-width: 100%;\n margin-top: 1em;\n`;\n\nexport const Background = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(120px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n position: absolute;\n width: 350px;\n height: 350px;\n left: -160px;\n top: -260px;\n background: radial-gradient(\n circle at center,\n rgba(255, 119, 119, 1) 0%,\n rgba(255, 119, 119, 0) 70%\n );\n animation: ${circle1Anim} 8s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 2;\n`;\n\nexport const circle2Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 33% { transform: translate(-64px, 0px) }\n 66% { transform: translate(120px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n position: absolute;\n width: 350px;\n height: 350px;\n left: -54px;\n top: -250px;\n background: radial-gradient(\n circle at center,\n rgba(253, 255, 147, 1) 0%,\n rgba(253, 255, 147, 0) 70%\n );\n animation: ${circle2Anim} 12s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 3;\n`;\n\nexport const circle3Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(-120px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle3 = styled.div`\n position: absolute;\n width: 350px;\n height: 350px;\n left: 150px;\n top: -220px;\n background: radial-gradient(\n circle at center,\n rgba(119, 255, 247, 0.8) 0%,\n rgba(119, 255, 247, 0) 70%\n );\n animation: ${circle3Anim} 4s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 4;\n`;\n","import { styled } from \"@storybook/theming\";\nimport { motion } from \"framer-motion\";\n\nexport const Code = styled(motion.div)`\n position: relative;\n z-index: 2;\n`;\n\nexport const Container = styled.div<{ width: number }>`\n position: relative;\n box-sizing: border-box;\n background: #171c23;\n width: ${({ width }) => width}px;\n height: 100%;\n overflow: hidden;\n padding-left: 15px;\n padding-right: 15px;\n padding-top: 6px;\n\n && {\n pre {\n background: transparent !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n }\n`;\n\nexport const Backdrop = styled(motion.div)`\n background: #143046;\n position: absolute;\n z-index: 1;\n left: 0;\n width: 100%;\n height: 200px;\n`;\n","import { styled } from \"@storybook/theming\";\nimport { motion } from \"framer-motion\";\n\nexport const SnippetWrapper = styled(motion.div)<{ active?: boolean }>`\n position: relative;\n padding-top: 12px;\n padding-bottom: 12px;\n`;\n","import { motion } from \"framer-motion\";\nimport { Fragment, forwardRef } from \"react\";\nimport { SnippetWrapper } from \"./Snippet.styled\";\nimport React from \"react\";\nimport { SyntaxHighlighter as StorybookSyntaxHighlighter } from \"@storybook/components\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\n\ninterface Props {\n content: { code: string; toggle?: boolean }[];\n active: boolean;\n open?: boolean;\n}\n\nconst wrapperVariants = {\n default: {\n filter: \"grayscale(1)\",\n opacity: 0.5,\n },\n active: {\n filter: \"grayscale(0)\",\n opacity: 1,\n },\n};\n\nexport const Snippet = forwardRef<HTMLDivElement, Props>(\n ({ active, content, open }, ref) => {\n const customStyle = {\n fontSize: \"0.8125rem\",\n lineHeight: \"1.1875rem\",\n };\n\n return (\n <ThemeProvider theme={ensure(themes.dark)}>\n <SnippetWrapper\n ref={ref}\n initial=\"default\"\n animate={active ? \"active\" : \"default\"}\n aria-hidden={!active}\n variants={wrapperVariants}\n transition={{ ease: \"easeInOut\", duration: 0.6 }}\n >\n {content.map(({ toggle, code }, i) => (\n <Fragment key={i}>\n {toggle === undefined && (\n <StorybookSyntaxHighlighter\n language=\"javascript\"\n customStyle={customStyle}\n >\n {code}\n </StorybookSyntaxHighlighter>\n )}\n\n {toggle && !open && (\n <StorybookSyntaxHighlighter\n language=\"javascript\"\n customStyle={customStyle}\n >\n {` // ...`}\n </StorybookSyntaxHighlighter>\n )}\n\n {toggle && open && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ delay: 0.4 }}\n >\n <StorybookSyntaxHighlighter\n language=\"javascript\"\n customStyle={customStyle}\n codeTagProps={{ style: { paddingLeft: \"15px\" } }}\n >\n {code}\n </StorybookSyntaxHighlighter>\n </motion.div>\n )}\n </Fragment>\n ))}\n </SnippetWrapper>\n </ThemeProvider>\n );\n }\n);\n","import React, {\n createRef,\n useCallback,\n useLayoutEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Backdrop, Code, Container } from \"./SyntaxHighlighter.styled\";\nimport { Snippet } from \"./Snippet/Snippet\";\n\ntype SyntaxHighlighterProps = {\n data: { code: string; toggle?: boolean }[][];\n activeStep: number;\n width: number;\n};\n\ntype StepsProps = {\n yPos: number;\n backdropHeight: number;\n index: number;\n open: boolean;\n};\n\nconst OFFSET = 49;\n\nexport const SyntaxHighlighter = ({\n activeStep,\n data,\n width,\n}: SyntaxHighlighterProps) => {\n const [steps, setSteps] = useState<StepsProps[]>([]);\n\n const refs = useMemo(\n () => data.map(() => createRef<HTMLDivElement>()),\n [data]\n );\n\n const getYPos = (idx: number) => {\n let yPos = 0;\n for (let i = 0; i < idx; i++) {\n yPos -= refs[i].current!.getBoundingClientRect().height;\n }\n return yPos;\n };\n\n const setNewSteps = useCallback(() => {\n const newSteps = data.flatMap((content, i) => {\n const backdropHeight = refs[i].current!.getBoundingClientRect().height;\n const finalSteps = [\n {\n yPos: getYPos(i) + OFFSET - 7,\n backdropHeight,\n index: i,\n open: false,\n },\n ];\n\n if (content.length > 1) {\n finalSteps.push({\n yPos: getYPos(i) + OFFSET - 7,\n backdropHeight,\n index: i,\n open: true,\n });\n }\n\n return finalSteps;\n });\n\n setSteps(newSteps);\n }, [data]);\n\n useLayoutEffect(() => {\n // Call setNewSteps every time height of the refs elements changes\n const resizeObserver = new ResizeObserver(() => {\n setNewSteps();\n });\n\n refs.forEach((ref) => {\n resizeObserver.observe(ref.current!);\n });\n\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n\n return (\n <Container width={width}>\n <Code\n animate={{ y: steps[activeStep]?.yPos ?? 0 }}\n transition={{ ease: \"easeInOut\", duration: 0.6 }}\n >\n {data.map((content, idx: number) => (\n <Snippet\n key={idx}\n ref={refs[idx]}\n active={steps[activeStep]?.index === idx}\n open={\n steps[activeStep]?.index > idx\n ? true\n : steps[activeStep]?.open ?? false\n }\n content={content}\n />\n ))}\n </Code>\n <Backdrop\n animate={{ height: steps[activeStep]?.backdropHeight ?? 0 }}\n transition={{ ease: \"easeInOut\", duration: 0.6 }}\n style={{ top: OFFSET }}\n className=\"syntax-highlighter-backdrop\"\n />\n </Container>\n );\n};\n","import { styled } from \"@storybook/theming\";\n\nexport const ListWrapper = styled.ul(() => ({\n display: \"flex\",\n flexDirection: \"column\",\n rowGap: 16,\n padding: 0,\n margin: 0,\n}));\n","import React from \"react\";\nimport { ListWrapper } from \"./List.styled\";\n\ninterface ListProps {\n children: React.ReactNode;\n}\n\nexport const List = ({ children }: ListProps) => {\n return <ListWrapper>{children}</ListWrapper>;\n};\n","import { styled } from \"@storybook/theming\";\n\nexport const ListItemWrapper = styled.li(() => ({\n display: \"flex\",\n alignItems: \"flex-start\",\n columnGap: 12,\n}));\n\nexport const ListItemContentWrapper = styled.div(({ theme }) => ({\n fontFamily: theme.typography.fonts.base,\n color: theme.color.darker,\n fontSize: \"13px\",\n}));\n\nexport const ListItemIndexWrapper = styled.div<{ isCompleted: boolean }>(\n ({ isCompleted, theme }) => ({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n border: !isCompleted && `1px solid ${theme.color.medium}`,\n minWidth: 20,\n width: 20,\n height: 20,\n borderRadius: \"50%\",\n backgroundColor: isCompleted ? theme.color.green : \"white\",\n fontFamily: theme.typography.fonts.base,\n fontSize: 10,\n fontWeight: 600,\n color: theme.color.dark,\n })\n);\n","import React from \"react\";\nimport { Icons } from \"@storybook/components\";\nimport {\n ListItemContentWrapper,\n ListItemIndexWrapper,\n ListItemWrapper,\n} from \"./ListItem.styled\";\n\ninterface ListItemProps {\n children: React.ReactNode;\n index: number;\n isCompleted?: boolean;\n}\n\nexport const ListItem = ({ children, index, isCompleted }: ListItemProps) => {\n return (\n <ListItemWrapper>\n <ListItemIndexWrapper\n aria-label={isCompleted ? \"complete\" : \"not complete\"}\n isCompleted={isCompleted}\n >\n {isCompleted ? (\n <Icons width={10} height={10} icon=\"check\" color=\"white\" />\n ) : (\n index\n )}\n </ListItemIndexWrapper>\n <ListItemContentWrapper>{children}</ListItemContentWrapper>\n </ListItemWrapper>\n );\n};\n","import { useEffect, useState } from \"react\";\nimport { Response } from \"../../../types/response\";\n\nexport function useGetButtonPath() {\n const [buttonPath, setButtonPath] = useState<Response<string>>(null);\n\n useEffect(() => {\n const getButtonPath = async () => {\n try {\n const response = await fetch(\"/index.json\");\n const json = await response.json();\n const buttonPath = json.entries[\"example-button--primary\"].importPath;\n setButtonPath({\n data: buttonPath,\n error: null,\n });\n } catch (e) {\n setButtonPath({\n data: null,\n error: e,\n });\n }\n };\n getButtonPath();\n }, []);\n\n return buttonPath;\n}\n","import { useState, useEffect } from \"react\";\nimport { Response } from \"../../../types/response\";\nimport { API, AddonStore } from \"@storybook/manager-api\";\nimport {\n STORY_INDEX_INVALIDATED,\n STORY_RENDERED,\n} from \"@storybook/core-events\";\n\nexport const useGetWarningButtonStatus = (\n active: boolean,\n api: API,\n addonsStore: AddonStore\n) => {\n const [status, setStatus] = useState<Response<boolean>>(null);\n\n useEffect(() => {\n if (active) {\n const getWarningButtonStatus = () => {\n addonsStore.getChannel().once(STORY_RENDERED, () => {\n const out = api.getData(\"example-button--warning\");\n\n if (out) {\n setStatus({ data: true, error: null });\n }\n });\n };\n\n // If the story already exists, we don't need to listen to any events\n if(api.getData(\"example-button--warning\")) {\n setStatus({ data: true, error: null });\n } else {\n addonsStore\n .getServerChannel()\n .on(STORY_INDEX_INVALIDATED, getWarningButtonStatus);\n }\n\n return () => {\n addonsStore\n .getServerChannel()\n .off(STORY_INDEX_INVALIDATED, getWarningButtonStatus);\n };\n }\n }, [active]);\n\n return status;\n};\n","import { useEffect, useState } from \"react\";\n\n// get an element and return its boundary. It accepts a classname as argument\nexport const useGetBackdropBoundary = (className: string, active: boolean) => {\n const [boundary, setBoundary] = useState<{\n top: number;\n left: number;\n height: number;\n width: number;\n } | null>(null);\n\n const element = document.querySelector(`.${className}`) as HTMLElement;\n\n // setBoundary if element changes sized. use resize observer\n useEffect(() => {\n if (active) {\n const resizeObserver = new ResizeObserver(() => {\n if (element) {\n setBoundary({\n top: element.offsetTop,\n left: element.offsetLeft,\n height: element.offsetHeight,\n width: element.offsetWidth,\n });\n }\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [className, active]);\n\n return boundary;\n};\n","export default [\n [\n {\n code: `// Button.stories.jsx`,\n },\n ],\n [\n {\n code: `import { Button } from './Button';`,\n },\n ],\n [\n {\n code: `export default {\n title: 'Example/Button',\n component: Button,\n // ...\n };`,\n },\n ],\n [\n { code: `export const Primary = {` },\n {\n code: `args: {\n primary: true,\n label: 'Click',\n background: 'red'\n }`,\n toggle: true,\n },\n { code: `};` },\n ],\n [\n {\n code: `// Copy the code below\nexport const Warning = {\n args: {\n primary: true,\n backgroundColor: 'red',\n label: 'Delete now'\n }\n};`,\n },\n ],\n];\n","export default [\n [\n {\n code: `// Button.stories.tsx`,\n },\n ],\n [\n {\n code: `import type { Meta, StoryObj } from '@storybook/react';\n \n import { Button } from './Button';`,\n },\n ],\n [\n {\n code: `const meta: Meta<typeof Button> = {\n title: 'Example/Button',\n component: Button,\n // ...\n };\n \n export default meta;`,\n },\n ],\n [\n { code: `export const Primary: Story = {` },\n {\n code: `args: {\n primary: true,\n label: 'Click',\n background: 'red'\n }`,\n toggle: true,\n },\n { code: `};` },\n ],\n [\n {\n code: `// Copy the code below\nexport const Warning: Story = {\n args: {\n primary: true,\n backgroundColor: 'red',\n label: 'Delete now'\n }\n};`,\n },\n ],\n];\n","export default [\n [\n {\n code: `// Button.stories.tsx`,\n },\n ],\n [\n {\n code: `import type { Meta, StoryObj } from '@storybook/nextjs';\n \n import { Button } from './Button';`,\n },\n ],\n [\n {\n code: `const meta: Meta<typeof Button> = {\n title: 'Example/Button',\n component: Button,\n // ...\n };\n \n export default meta;`,\n },\n ],\n [\n { code: `export const Primary: Story = {` },\n {\n code: `args: {\n primary: true,\n label: 'Click',\n background: 'red'\n }`,\n toggle: true,\n },\n { code: `};` },\n ],\n [\n {\n code: `// Copy the code below\nexport const Warning: Story = {\n args: {\n primary: true,\n backgroundColor: 'red',\n label: 'Delete now'\n }\n};`,\n },\n ],\n];\n","// fetch project.json and read `framework.name` from it and return it\n\nimport { useEffect, useState } from \"react\";\nimport { Response } from \"../../../types/response\";\n\ntype Project = {\n language: \"javascript\" | \"typescript\";\n framework: {\n name: string;\n };\n};\n\nexport function useGetProject() {\n const [project, setProject] = useState<Response<Project>>(null);\n\n useEffect(() => {\n const getProject = async () => {\n try {\n const response = await fetch(\"/project.json\");\n const json = await response.json();\n\n setProject({\n data: json,\n error: null,\n });\n } catch (e) {\n setProject({\n data: null,\n error: e,\n });\n }\n };\n getProject();\n }, []);\n\n return project;\n}\n","import React, { FC, useState } from \"react\";\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { Icons } from \"@storybook/components\";\nimport useMeasure from \"react-use-measure\";\nimport {\n Background,\n Circle1,\n Circle2,\n Circle3,\n Content,\n Header,\n Image,\n Main,\n ModalContent,\n ModalTitle,\n SpanHighlight,\n} from \"./WriteStoriesModal.styled\";\nimport { SyntaxHighlighter } from \"../../components/SyntaxHighlighter/SyntaxHighlighter\";\nimport { List } from \"../../components/List/List\";\nimport { ListItem } from \"../../components/List/ListItem/ListItem\";\nimport { useGetButtonPath } from \"./hooks/useGetButtonPath\";\nimport { useGetWarningButtonStatus } from \"./hooks/useGetWarningButtonStatus\";\nimport { useGetBackdropBoundary } from \"./hooks/useGetBackdropBoundary\";\nimport titleSidebarImg from \"./assets/01-title-sidebar.png\";\nimport storyNameSidebarImg from \"./assets/02-story-name-sidebar.png\";\nimport argsImg from \"./assets/03-args.png\";\nimport dataJavascript from \"./code/javascript\";\nimport dataTypescript from \"./code/typescript\";\nimport dataTypescriptNextjs from \"./code/nextjs-typescript\";\nimport { useGetProject } from \"./hooks/useGetFrameworkName\";\nimport { API, AddonStore } from \"@storybook/manager-api\";\n\n// TODO: Add warning if backdropBoundary && !warningButtonStatus?.data is not true.\n// backdropBoundary && !warningButtonStatus?.data\n\ninterface WriteStoriesModalProps {\n onFinish: () => void;\n api: API;\n addonsStore: AddonStore;\n skipOnboarding: () => void;\n}\n\nexport const WriteStoriesModal: FC<WriteStoriesModalProps> = ({\n onFinish,\n api,\n addonsStore,\n skipOnboarding,\n}) => {\n const [step, setStep] = useState<\n \"imports\" | \"meta\" | \"story\" | \"args\" | \"customStory\"\n >(\"imports\");\n\n const stepIndex = {\n imports: 1,\n meta: 2,\n story: 3,\n args: 4,\n customStory: 5,\n };\n\n const [isWarningStoryCopied, setWarningStoryCopied] = useState(false);\n\n const [clipboardButtonRef, clipboardButtonBounds] = useMeasure();\n\n const buttonPath = useGetButtonPath();\n const warningButtonStatus = useGetWarningButtonStatus(\n step === \"customStory\",\n api,\n addonsStore\n );\n const backdropBoundary = useGetBackdropBoundary(\n \"syntax-highlighter-backdrop\",\n step === \"customStory\"\n );\n\n const project = useGetProject();\n const isJavascript = project?.data?.language === \"javascript\";\n\n const data = isJavascript\n ? dataJavascript\n : project?.data?.framework.name === \"@storybook/nextjs\"\n ? dataTypescriptNextjs\n : dataTypescript;\n\n const copyWarningStory = () => {\n const warningContent = data[4][0].code;\n navigator.clipboard.writeText(\n warningContent.replace(\"// Copy the code below\", \"\")\n );\n setWarningStoryCopied(true);\n };\n\n return (\n <Modal width={740} height={430} defaultOpen>\n {({ Title, Description, Close }) => (\n <ModalContent>\n {data ? (\n <SyntaxHighlighter\n activeStep={stepIndex[step] || 1}\n data={data}\n width={480}\n />\n ) : null}\n {backdropBoundary && !warningButtonStatus?.data && (\n <Button\n ref={clipboardButtonRef}\n onClick={() => {\n copyWarningStory();\n }}\n style={{\n position: \"absolute\",\n top: backdropBoundary.top + backdropBoundary.height - 45,\n left:\n backdropBoundary.left +\n backdropBoundary.width -\n (clipboardButtonBounds.width ?? 0) -\n 10,\n zIndex: 1000,\n }}\n >\n {isWarningStoryCopied ? \"Copied to clipboard\" : \"Copy code\"}\n </Button>\n )}\n <Main>\n <Header>\n <Title asChild>\n <ModalTitle>\n <Icons icon=\"bookmarkhollow\" width={13} />\n <span>How to write a story</span>\n </ModalTitle>\n </Title>\n\n <Icons\n style={{ cursor: \"pointer\" }}\n icon=\"cross\"\n width={13}\n onClick={skipOnboarding}\n />\n </Header>\n <Description asChild>\n <Content>\n {step === \"imports\" && (\n <>\n <div>\n <h3>Imports</h3>\n <p>\n First, import Meta and StoryObj for type safety and\n autocompletion in TypeScript stories.\n </p>\n <p>\n Next, import a component. In this case, the Button\n component.\n </p>\n </div>\n <Button\n style={{ marginTop: 4 }}\n onClick={() => {\n setStep(\"meta\");\n }}\n >\n Next\n </Button>\n </>\n )}\n {step === \"meta\" && (\n <>\n <div>\n <h3>Meta</h3>\n <p>\n The default export, Meta, contains metadata about this\n component's stories. The title field controls where\n stories appear in the sidebar.\n </p>\n <Image\n width=\"204\"\n alt=\"Title property pointing to Storybook's sidebar\"\n src={titleSidebarImg}\n />\n </div>\n <Button\n style={{ marginTop: 4 }}\n onClick={() => {\n setStep(\"story\");\n }}\n >\n Next\n </Button>\n </>\n )}\n {step === \"story\" && (\n <>\n <div>\n <h3>Story</h3>\n <p>\n Each named export is a story. Its contents specify how\n the story is rendered in addition to other configuration\n options.\n </p>\n <Image\n width=\"190\"\n alt=\"Story export pointing to the sidebar entry of the story\"\n src={storyNameSidebarImg}\n />\n </div>\n <Button\n style={{ marginTop: 4 }}\n onClick={() => {\n setStep(\"args\");\n }}\n >\n Next\n </Button>\n </>\n )}\n {step === \"args\" && (\n <>\n <div>\n <h3>Args</h3>\n <p>\n Args are inputs that are passed to the component, which\n Storybook uses to render the component in different\n states. In React, args = props. They also specify the\n initial control settings for the story.\n </p>\n <Image\n alt=\"Args mapped to their controls in Storybook\"\n width=\"253\"\n src={argsImg}\n />\n </div>\n <Button\n style={{ marginTop: 4 }}\n onClick={() => {\n setStep(\"customStory\");\n }}\n >\n Next\n </Button>\n </>\n )}\n {step === \"customStory\" &&\n (!warningButtonStatus?.error ? (\n <>\n <div>\n <h3>Create your first story</h3>\n <p>\n Now it's your turn. See how easy it is to create your\n first story by following these steps below.\n </p>\n <List>\n <ListItem\n isCompleted={\n isWarningStoryCopied || warningButtonStatus?.data\n }\n index={1}\n >\n Copy the Warning story\n </ListItem>\n <ListItem\n isCompleted={warningButtonStatus?.data}\n index={2}\n >\n Open{\" \"}\n {buttonPath?.data ? (\n <SpanHighlight>{buttonPath.data}</SpanHighlight>\n ) : (\n <>the Button Story</>\n )}{\" \"}\n in your current working directory\n </ListItem>\n <ListItem\n isCompleted={warningButtonStatus?.data}\n index={3}\n >\n Paste it at the bottom of the file\n </ListItem>\n </List>\n </div>\n {warningButtonStatus?.data ? (\n <Button\n onClick={() => {\n onFinish();\n }}\n >\n Go to story\n </Button>\n ) : null}\n </>\n ) : null)}\n </Content>\n </Description>\n <Background>\n <Circle1 />\n <Circle2 />\n <Circle3 />\n </Background>\n </Main>\n </ModalContent>\n )}\n </Modal>\n );\n};\n","import React, { useCallback, useEffect, useState } from \"react\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport { addons, type API } from \"@storybook/manager-api\";\n\nimport { GuidedTour } from \"./features/GuidedTour/GuidedTour\";\nimport { WelcomeModal } from \"./features/WelcomeModal/WelcomeModal\";\nimport { WriteStoriesModal } from \"./features/WriteStoriesModal/WriteStoriesModal\";\nimport { Confetti } from \"./components/Confetti/Confetti\";\n\ntype Step =\n | \"1:Welcome\"\n | \"2:StorybookTour\"\n | \"3:WriteYourStory\"\n | \"4:VisitNewStory\"\n | \"5:ConfigureYourProject\";\n\nconst theme = ensure(themes.light);\n\nexport default function App({ api }: { api: API }) {\n const [enabled, setEnabled] = useState(true);\n const [showConfetti, setShowConfetti] = useState(false);\n const [step, setStep] = useState<Step>(\"1:Welcome\");\n\n const skipOnboarding = useCallback(() => {\n // remove onboarding query parameter from current url\n const url = new URL(window.location.href);\n const path = decodeURIComponent(url.searchParams.get(\"path\"));\n url.search = `?path=${path}&onboarding=false`;\n history.replaceState({}, \"\", url.href);\n api.setQueryParams({ onboarding: \"false\" });\n setEnabled(false);\n }, [setEnabled, api]);\n\n useEffect(() => {\n let stepTimeout: number;\n if (step === \"4:VisitNewStory\") {\n setShowConfetti(true);\n stepTimeout = window.setTimeout(() => {\n setStep(\"5:ConfigureYourProject\");\n }, 2000);\n }\n\n return () => {\n clearTimeout(stepTimeout);\n };\n }, [step]);\n\n useEffect(() => {\n const storyId = api.getCurrentStoryData()?.id;\n api.setQueryParams({ onboarding: \"true\" });\n // make sure the initial state is set correctly:\n // 1. Selected story is primary button\n // 2. The addon panel is opened, in the bottom and the controls tab is selected\n if (storyId !== \"example-button--primary\") {\n api.selectStory(\"example-button--primary\", undefined, {\n ref: undefined,\n });\n }\n }, []);\n\n return (\n <ThemeProvider theme={theme}>\n {enabled && showConfetti && (\n <Confetti\n numberOfPieces={800}\n recycle={false}\n tweenDuration={20000}\n onConfettiComplete={(confetti) => {\n confetti.reset();\n setShowConfetti(false);\n }}\n />\n )}\n {enabled && step === \"1:Welcome\" && (\n <WelcomeModal\n onProceed={() => setStep(\"2:StorybookTour\")}\n skipOnboarding={skipOnboarding}\n />\n )}\n {enabled &&\n (step === \"2:StorybookTour\" || step === \"5:ConfigureYourProject\") && (\n <GuidedTour\n api={api}\n isFinalStep={step === \"5:ConfigureYourProject\"}\n onFirstTourDone={() => {\n setStep(\"3:WriteYourStory\");\n }}\n onLastTourDone={() => {\n api.selectStory(\"configure-your-project--docs\");\n skipOnboarding();\n }}\n />\n )}\n {enabled && step === \"3:WriteYourStory\" && (\n <WriteStoriesModal\n api={api}\n addonsStore={addons}\n onFinish={() => {\n api.selectStory(\"example-button--warning\");\n setStep(\"4:VisitNewStory\");\n }}\n skipOnboarding={skipOnboarding}\n />\n )}\n </ThemeProvider>\n );\n}\n","import ReactDOM from \"react-dom\";\nimport React, { lazy, Suspense } from \"react\";\nimport { addons } from \"@storybook/manager-api\";\nimport { STORY_SPECIFIED } from \"@storybook/core-events\";\n\nconst App = lazy(() => import(\"./App\"));\n\n// The addon is enabled only when:\n// 1. The onboarding query parameter is present\n// 2. The example button stories are present\naddons.register(\"@storybook/addon-onboarding\", async (api) => {\n const urlState = api.getUrlState();\n const isOnboarding = urlState.path === '/onboarding' || urlState.queryParams.onboarding === 'true';\n\n api.once(STORY_SPECIFIED, () => {\n let hasButtonStories = !!api.getData(\"example-button--primary\") || !!document.getElementById('example-button--primary')\n\n if (!hasButtonStories) {\n 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/addon-onboarding#uninstalling`);\n return;\n }\n\n if (!isOnboarding || window.innerWidth < 730) {\n return;\n }\n\n api.togglePanel(true);\n api.togglePanelPosition(\"bottom\");\n api.setSelectedPanel(\"addon-controls\");\n\n // Add a new DOM element to document.body, where we will bootstrap our React app\n const domNode = document.createElement(\"div\");\n\n domNode.id = \"storybook-addon-onboarding\";\n // Append the new DOM element to document.body\n document.body.appendChild(domNode);\n\n // Render the React app\n ReactDOM.render(\n <Suspense fallback={<div>Loading...</div>}>\n <App api={api} />\n </Suspense>,\n domNode\n );\n })\n});\n"]}
1
+ {"version":3,"sources":["../src/components/PulsatingEffect/PulsatingEffect.tsx","../src/components/Confetti/Confetti.tsx","../src/components/Button/Button.tsx","../src/features/GuidedTour/Tooltip.tsx","../src/features/GuidedTour/GuidedTour.tsx","../src/components/Modal/Modal.styled.tsx","../src/components/Modal/Modal.tsx","../src/features/WelcomeModal/StorybookLogo.tsx","../src/features/WelcomeModal/WelcomeModal.styled.tsx","../src/features/WelcomeModal/WelcomeModal.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx","../src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx","../src/components/SyntaxHighlighter/Snippet/Snippet.styled.tsx","../src/components/SyntaxHighlighter/Snippet/Snippet.tsx","../src/components/SyntaxHighlighter/SyntaxHighlighter.tsx","../src/components/List/List.styled.tsx","../src/components/List/List.tsx","../src/components/List/ListItem/ListItem.styled.tsx","../src/components/List/ListItem/ListItem.tsx","../src/features/WriteStoriesModal/hooks/useGetButtonPath.tsx","../src/features/WriteStoriesModal/hooks/useGetWarningButtonStatus.tsx","../src/features/WriteStoriesModal/hooks/useGetBackdropBoundary.tsx","../src/features/WriteStoriesModal/code/javascript.tsx","../src/features/WriteStoriesModal/code/typescript.tsx","../src/features/WriteStoriesModal/code/nextjs-typescript.tsx","../src/features/WriteStoriesModal/hooks/useGetFrameworkName.tsx","../src/features/WriteStoriesModal/WriteStoriesModal.tsx","../src/App.tsx","../src/manager.tsx"],"names":["useEffect","PulsatingEffect","targetSelector","element","keyframes","style","styleElement","init_PulsatingEffect","__esmMin","ReactConfetti","React","styled","createPortal","useState","Confetti","top","left","width","height","colors","confettiProps","confettiContainer","container","Wrapper","draw","getRandomInt","min","max","context","init_Confetti","StyledButton","Button","init_Button","theme","variant","children","onClick","rest","TooltipBody","TooltipTitle","TooltipContent","TooltipFooter","Tooltip","init_Tooltip","step","primaryProps","tooltipProps","Joyride","STATUS","UPDATE_STORY_ARGS","GuidedTour","api","isFinalStep","onFirstTourDone","onLastTourDone","stepIndex","setStepIndex","data","init_GuidedTour","css","Dialog","StyledOverlay","StyledContent","ContentWrapper","init_Modal_styled","contentProps","ref","Modal","onEscapeKeyDown","onInteractOutside","ev","rootProps","init_Modal","StorybookLogo","init_StorybookLogo","Icons","ModalContentWrapper","TopContent","Title","Description","SkipButton","StyledIcon","Background","circle1Anim","Circle1","circle2Anim","Circle2","circle3Anim","Circle3","StyledTitle","StyledDescription","init_WelcomeModal_styled","WelcomeModal","init_WelcomeModal","onProceed","skipOnboarding","Close","ModalContent","Main","Header","ModalTitle","Content","SpanHighlight","Image","ButtonsWrapper","init_WriteStoriesModal_styled","motion","Code","Container","Backdrop","init_SyntaxHighlighter_styled","SnippetWrapper","init_Snippet_styled","Fragment","forwardRef","StorybookSyntaxHighlighter","ThemeProvider","ensure","themes","wrapperVariants","Snippet","init_Snippet","active","content","open","customStyle","toggle","code","i","createRef","useCallback","useLayoutEffect","useMemo","OFFSET","SyntaxHighlighter","init_SyntaxHighlighter","activeStep","steps","setSteps","refs","getYPos","idx","yPos","setNewSteps","newSteps","backdropHeight","finalSteps","resizeObserver","ListWrapper","init_List_styled","List","init_List","ListItemWrapper","ListItemContentWrapper","ListItemIndexWrapper","init_ListItem_styled","isCompleted","ListItem","init_ListItem","index","useGetButtonPath","buttonPath","setButtonPath","e","init_useGetButtonPath","STORY_INDEX_INVALIDATED","STORY_RENDERED","useGetWarningButtonStatus","init_useGetWarningButtonStatus","addonsStore","status","setStatus","getWarningButtonStatus","useGetBackdropBoundary","init_useGetBackdropBoundary","className","boundary","setBoundary","javascript_default","init_javascript","typescript_default","init_typescript","nextjs_typescript_default","init_nextjs_typescript","useGetProject","project","setProject","json","init_useGetFrameworkName","useMeasure","WriteStoriesModal","init_WriteStoriesModal","init_title_sidebar","init_story_name_sidebar","init_args","onFinish","setStep","isWarningStoryCopied","setWarningStoryCopied","clipboardButtonRef","clipboardButtonBounds","warningButtonStatus","backdropBoundary","copyWarningStory","warningContent","title_sidebar_default","story_name_sidebar_default","args_default","App_exports","__export","App","addons","enabled","setEnabled","showConfetti","setShowConfetti","url","path","stepTimeout","storyId","confetti","init_App","ReactDOM","lazy","Suspense","STORY_SPECIFIED","urlState","isOnboarding","domNode"],"mappings":"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","sourcesContent":["import { useEffect } from \"react\";\n\nexport function PulsatingEffect({\n targetSelector,\n}: {\n targetSelector: string;\n}): JSX.Element {\n useEffect(() => {\n const element = document.querySelector<HTMLElement>(targetSelector);\n\n if (element) {\n element.style.animation = \"pulsate 3s infinite\";\n element.style.transformOrigin = \"center\";\n element.style.animationTimingFunction = \"ease-in-out\";\n\n const keyframes = `\n @keyframes pulsate {\n 0% {\n box-shadow: 0 0 0 0 rgba(2, 156, 253, 0.7), 0 0 0 0 rgba(2, 156, 253, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 20px rgba(2, 156, 253, 0), 0 0 0 40px rgba(2, 156, 253, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(2, 156, 253, 0), 0 0 0 0 rgba(2, 156, 253, 0);\n }\n }\n `;\n const style = document.createElement(\"style\");\n style.id = \"sb-onboarding-pulsating-effect\";\n style.innerHTML = keyframes;\n document.head.appendChild(style);\n }\n\n return () => {\n const styleElement = document.querySelector(\n \"#sb-onboarding-pulsating-effect\"\n );\n\n if (styleElement) {\n styleElement.remove();\n }\n\n if (element) {\n element.style.animation = \"auto\";\n }\n };\n }, [targetSelector]);\n\n return null;\n}\n","import ReactConfetti from \"react-confetti\";\nimport React, { useEffect } from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { createPortal } from \"react-dom\";\nimport { useState } from \"react\";\n\ninterface ConfettiProps\n extends Omit<React.ComponentProps<typeof ReactConfetti>, \"drawShape\"> {\n top?: number;\n left?: number;\n width?: number;\n height?: number;\n numberOfPieces?: number;\n recycle?: boolean;\n colors?: string[];\n}\n\nconst Wrapper = styled.div<{\n width: number;\n height: number;\n top: number;\n left: number;\n}>(({ width, height, left, top }) => ({\n width: `${width}px`,\n height: `${height}px`,\n left: `${left}px`,\n top: `${top}px`,\n position: \"relative\",\n overflow: \"hidden\",\n}));\n\nexport function Confetti({\n top = 0,\n left = 0,\n width = window.innerWidth,\n height = window.innerHeight,\n colors = [\"#CA90FF\", \"#FC521F\", \"#66BF3C\", \"#FF4785\", \"#FFAE00\", \"#1EA7FD\"],\n ...confettiProps\n}: ConfettiProps): React.ReactPortal {\n const [confettiContainer] = useState(() => {\n const container = document.createElement(\"div\");\n container.setAttribute(\"id\", \"confetti-container\");\n container.setAttribute(\n \"style\",\n \"position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;\"\n );\n\n return container;\n });\n\n useEffect(() => {\n document.body.appendChild(confettiContainer);\n\n return () => {\n document.body.removeChild(confettiContainer);\n };\n }, []);\n\n return createPortal(\n <Wrapper top={top} left={left} width={width} height={height}>\n <ReactConfetti colors={colors} drawShape={draw} {...confettiProps} />\n </Wrapper>,\n confettiContainer\n );\n}\n\nenum ParticleShape {\n Circle = 1,\n Square = 2,\n TShape = 3,\n LShape = 4,\n Triangle = 5,\n QuarterCircle = 6,\n}\n\nfunction getRandomInt(min: number, max: number) {\n return Math.floor(Math.random() * (max - min)) + min;\n}\n\nfunction draw(context: CanvasRenderingContext2D) {\n this.shape = this.shape || getRandomInt(1, 6);\n\n switch (this.shape) {\n case ParticleShape.Square: {\n const cornerRadius = 2;\n const width = this.w / 2;\n const height = this.h / 2;\n\n context.moveTo(-width + cornerRadius, -height);\n context.lineTo(width - cornerRadius, -height);\n context.arcTo(\n width,\n -height,\n width,\n -height + cornerRadius,\n cornerRadius\n );\n context.lineTo(width, height - cornerRadius);\n context.arcTo(width, height, width - cornerRadius, height, cornerRadius);\n context.lineTo(-width + cornerRadius, height);\n context.arcTo(\n -width,\n height,\n -width,\n height - cornerRadius,\n cornerRadius\n );\n context.lineTo(-width, -height + cornerRadius);\n context.arcTo(\n -width,\n -height,\n -width + cornerRadius,\n -height,\n cornerRadius\n );\n\n break;\n }\n case ParticleShape.TShape: {\n context.rect(-4, -4, 8, 16);\n context.rect(-12, -4, 24, 8);\n break;\n }\n case ParticleShape.LShape: {\n context.rect(-4, -4, 8, 16);\n context.rect(-4, -4, 24, 8);\n break;\n }\n case ParticleShape.Circle: {\n context.arc(0, 0, this.radius, 0, 2 * Math.PI);\n break;\n }\n case ParticleShape.Triangle: {\n context.moveTo(16, 4);\n context.lineTo(4, 24);\n context.lineTo(24, 24);\n break;\n }\n case ParticleShape.QuarterCircle: {\n context.arc(4, -4, 4, -Math.PI / 2, 0);\n context.lineTo(4, 0);\n break;\n }\n }\n\n context.closePath();\n context.fill();\n}\n","import React, { ComponentProps, FC } from \"react\";\nimport { styled } from \"@storybook/theming\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n children: string;\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n variant?: \"primary\" | \"secondary\" | \"outline\";\n}\n\nconst StyledButton = styled.button<{ variant: ButtonProps[\"variant\"] }>`\n all: unset;\n box-sizing: border-box;\n border: 0;\n border-radius: 0.25rem;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 0.75rem;\n background: ${({ theme, variant }) => {\n if (variant === \"primary\") return theme.color.secondary;\n if (variant === \"secondary\") return theme.background.app;\n if (variant === \"outline\") return \"transparent\";\n return theme.color.secondary;\n }};\n color: ${({ theme, variant }) => {\n if (variant === \"primary\") return theme.color.lightest;\n if (variant === \"secondary\") return theme.darkest;\n if (variant === \"outline\") return theme.darkest;\n return theme.color.lightest;\n }};\n box-shadow: ${({ variant }) => {\n if (variant === \"primary\") return \"none\";\n if (variant === \"secondary\") return \"#D9E8F2 0 0 0 1px inset\";\n if (variant === \"outline\") return \"#D9E8F2 0 0 0 1px inset\";\n return \"none\";\n }};\n height: 32px;\n font-size: 0.8125rem;\n font-weight: 700;\n font-family: ${({ theme }) => theme.typography.fonts.base};\n transition: all 0.16s ease-in-out;\n text-decoration: none;\n\n &:hover {\n background-color: ${({ variant }) => {\n if (variant === \"primary\") return \"#0b94eb\";\n if (variant === \"secondary\") return \"#eef4f9\";\n if (variant === \"outline\") return \"transparent\";\n return \"#0b94eb\";\n }};\n }\n\n &:focus {\n box-shadow: ${({ variant }) => {\n if (variant === \"primary\") return \"inset 0 0 0 1px rgba(0, 0, 0, 0.2)\";\n if (variant === \"secondary\") return \"inset 0 0 0 1px #0b94eb\";\n if (variant === \"outline\") return \"inset 0 0 0 1px #0b94eb\";\n return \"inset 0 0 0 2px rgba(0, 0, 0, 0.1)\";\n }};\n }\n`;\n\nexport const Button: FC<ButtonProps> = ({\n children,\n onClick,\n variant = \"primary\",\n ...rest\n}) => {\n return (\n <StyledButton onClick={onClick} variant={variant} {...rest}>\n {children}\n </StyledButton>\n );\n};\n","import React from \"react\";\nimport { styled } from \"@storybook/theming\";\nimport { TooltipRenderProps } from \"react-joyride\";\nimport { Button } from \"../../components/Button/Button\";\n\nconst TooltipBody = styled.div`\n background: #fff;\n width: 260px;\n padding: 15px;\n border-radius: 5px;\n`;\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst TooltipTitle = styled.div`\n font-size: 13px;\n font-weight: 700;\n color: ${({ theme }) => theme.color.darkest};\n`;\n\nconst TooltipContent = styled.p`\n font-size: 13px;\n text-align: start;\n color: ${({ theme }) => theme.color.mediumdark};\n margin: 0;\n margin-top: 5px;\n`;\n\nconst TooltipFooter = styled.div`\n display: flex;\n justify-content: flex-end;\n margin-top: 15px;\n`;\n\nexport type TooltipProps = TooltipRenderProps & {\n step: TooltipRenderProps[\"step\"] & { hideNextButton?: boolean; onNextButtonClick?: () => void };\n};\n\nexport const Tooltip = ({ step, primaryProps, tooltipProps }: TooltipProps) => {\n return (\n <TooltipBody {...tooltipProps}>\n <Wrapper>\n {step.title && <TooltipTitle>{step.title}</TooltipTitle>}\n <TooltipContent>{step.content}</TooltipContent>\n </Wrapper>\n {!step.hideNextButton && (\n <TooltipFooter id=\"buttonNext\">\n <Button {...{\n ...primaryProps,\n ...(step.onNextButtonClick ? { onClick: step.onNextButtonClick } : {})\n }}>Next</Button>\n </TooltipFooter>\n )}\n </TooltipBody>\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport Joyride, { CallBackProps, STATUS, Step } from \"react-joyride\";\n\nimport { PulsatingEffect } from \"../../components/PulsatingEffect/PulsatingEffect\";\nimport { Confetti } from \"../../components/Confetti/Confetti\";\nimport { API } from \"@storybook/manager-api\";\nimport { UPDATE_STORY_ARGS } from \"@storybook/core-events\";\nimport { Tooltip, TooltipProps } from \"./Tooltip\";\n\ntype GuidedTourStep = TooltipProps['step'];\n\nexport function GuidedTour({\n api,\n isFinalStep,\n onFirstTourDone,\n onLastTourDone,\n}: {\n api: API;\n isFinalStep?: boolean;\n onFirstTourDone: () => void;\n onLastTourDone: () => void;\n}) {\n const [stepIndex, setStepIndex] = useState<number>();\n\n useEffect(() => {\n api.once(UPDATE_STORY_ARGS, () => {\n setStepIndex(3);\n });\n }, []);\n\n const steps: GuidedTourStep[] = isFinalStep\n ? [\n {\n target: \"#example-button--warning\",\n title: \"Congratulations!\",\n content:\n \"You just created your first story. You nailed the basics. Continue setting up your project and start writing stories for your components.\",\n placement: \"right\",\n disableOverlay: true,\n disableBeacon: true,\n floaterProps: {\n disableAnimation: true,\n },\n onNextButtonClick() {\n onLastTourDone();\n },\n },\n ]\n : [\n {\n target: \"#storybook-explorer-tree > div\",\n title: \"Storybook is built from stories\",\n content:\n \"Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.\",\n placement: \"right\",\n disableBeacon: true,\n styles: {\n spotlight: {\n transform: \"translateY(30px)\",\n },\n },\n floaterProps: {\n disableAnimation: true,\n },\n },\n {\n target: \"#storybook-preview-iframe\",\n title: \"Storybook previews are interactive\",\n content:\n \"Whenever you modify code or stories, Storybook automatically updates how it previews your components.\",\n placement: \"bottom\",\n },\n {\n target: \"#root div[role=main]\",\n title: \"Interactive story playground\",\n content: (\n <>\n See how a story renders with different data and state without\n touching code.\n <br />\n <br />\n Try it out by pressing this button.\n <PulsatingEffect targetSelector=\"#control-primary\" />\n </>\n ),\n placement: \"right\",\n spotlightClicks: true,\n floaterProps: {\n target: \"#control-primary\",\n },\n hideNextButton: true,\n },\n {\n target: \"#control-primary\",\n title: \"Congratulations!\",\n content: (\n <>\n You've learned how to control your stories interactively. Now:\n let's explore how to write your first story.\n <Confetti\n numberOfPieces={800}\n recycle={false}\n tweenDuration={20000}\n />\n </>\n ),\n placement: \"right\",\n disableOverlay: true,\n },\n ];\n\n return (\n <Joyride\n steps={steps}\n continuous\n stepIndex={stepIndex}\n spotlightPadding={0}\n hideBackButton\n disableCloseOnEsc\n disableOverlayClose\n disableScrolling\n hideCloseButton\n callback={(data: CallBackProps) => {\n if (!isFinalStep && data.status === STATUS.FINISHED) {\n onFirstTourDone();\n }\n }}\n floaterProps={{\n styles: {\n floater: {\n padding: \"8px 0 0 8px\",\n filter:\n \"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))\",\n },\n },\n }}\n tooltipComponent={Tooltip}\n styles={{\n spotlight: {\n border: \"solid 2px #004c7c\",\n },\n overlay: {\n backgroundColor: \"rgba(0, 0, 0, 0.48)\",\n },\n options: {\n zIndex: 10000,\n primaryColor: \"#029CFD\",\n },\n }}\n />\n );\n}\n","import { css, styled } from \"@storybook/theming\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport React from \"react\";\n\nexport const StyledOverlay = styled.div`\n background-color: rgba(27, 28, 29, 0.48);\n position: fixed;\n inset: 0px;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledContent = styled.div<{\n width: number;\n height: number;\n}>(\n ({ width, height }) => css`\n background-color: white;\n border-radius: 6px;\n box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: ${width ?? 740}px;\n height: ${height ? `${height}px` : \"auto\"};\n max-width: calc(100% - 40px);\n max-height: 85vh;\n overflow: hidden;\n `\n);\n\nexport const ContentWrapper = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Dialog.Content>\n>(({ width, height, children, ...contentProps }, ref) => (\n <Dialog.Content ref={ref} asChild {...contentProps}>\n <StyledContent width={width} height={height}>\n {children}\n </StyledContent>\n </Dialog.Content>\n));\n","import React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { ContentWrapper, StyledOverlay } from \"./Modal.styled\";\n\ntype ContentProps = React.ComponentProps<typeof ContentWrapper>;\n\ninterface ModalProps\n extends Omit<React.ComponentProps<typeof Dialog.Root>, \"children\"> {\n width?: number;\n height?: number;\n children: (props: {\n Title: typeof Dialog.Title;\n Description: typeof Dialog.Description;\n Close: typeof Dialog.Close;\n }) => React.ReactNode;\n onEscapeKeyDown?: ContentProps[\"onEscapeKeyDown\"];\n onInteractOutside?: ContentProps[\"onInteractOutside\"];\n}\n\nexport const initial = { opacity: 0 };\nexport const animate = { opacity: 1, transition: { duration: 0.3 } };\nexport const exit = { opacity: 0, transition: { duration: 0.3 } };\n\nexport function Modal({\n children,\n width,\n height,\n onEscapeKeyDown,\n onInteractOutside = (ev) => ev.preventDefault(),\n ...rootProps\n}: ModalProps) {\n return (\n <Dialog.Root {...rootProps}>\n <Dialog.Portal>\n <Dialog.Overlay asChild>\n <StyledOverlay />\n </Dialog.Overlay>\n <ContentWrapper\n width={width}\n height={height}\n onInteractOutside={onInteractOutside}\n onEscapeKeyDown={onEscapeKeyDown}\n >\n {children({\n Title: Dialog.Title,\n Description: Dialog.Description,\n Close: Dialog.Close,\n })}\n </ContentWrapper>\n </Dialog.Portal>\n </Dialog.Root>\n );\n}\n","import React from \"react\";\n\nexport function StorybookLogo() {\n return (\n <svg\n width=\"32px\"\n height=\"40px\"\n viewBox=\"0 0 256 319\"\n preserveAspectRatio=\"xMidYMid\"\n >\n <defs>\n <path\n d=\"M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z\"\n id=\"path-1\"\n ></path>\n </defs>\n <g>\n <mask id=\"mask-2\" fill=\"white\">\n <use xlinkHref=\"#path-1\"></use>\n </mask>\n <use fill=\"#FF4785\" fillRule=\"nonzero\" xlinkHref=\"#path-1\"></use>\n <path\n d=\"M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z\"\n fill=\"#FFFFFF\"\n fillRule=\"nonzero\"\n mask=\"url(#mask-2)\"\n ></path>\n </g>\n </svg>\n );\n}\n","import { Icons } from \"@storybook/components\";\nimport { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContentWrapper = styled.div`\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100%;\n justify-content: space-between;\n`;\n\nexport const TopContent = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n`;\n\nexport const Title = styled.h1`\n margin: 0;\n margin-top: 20px;\n margin-bottom: 5px;\n color: ${({ theme }) => theme.color.darkest};\n font-weight: ${({ theme }) => theme.typography.weight.bold};\n font-size: ${({ theme }) => theme.typography.size.m1}px;\n line-height: ${({ theme }) => theme.typography.size.m3}px;\n`;\n\nexport const Description = styled.p`\n margin: 0;\n margin-bottom: 20px;\n max-width: 320px;\n text-align: center;\n font-size: ${({ theme }) => theme.typography.size.s2}px;\n font-weight: ${({ theme }) => theme.typography.weight.regular};\n line-height: ${({ theme }) => theme.typography.size.m1}px;\n color: ${({ theme }) => theme.color.darker};\n`;\n\nexport const SkipButton = styled.button`\n all: unset;\n cursor: pointer;\n font-size: 13px;\n color: #798186;\n padding-bottom: 20px;\n\n &:focus-visible {\n outline: auto;\n }\n`;\n\nexport const StyledIcon = styled(Icons)`\n margin-left: 2px;\n height: 10px;\n`;\n\nexport const Background = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(-200px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n position: absolute;\n width: 1200px;\n height: 1200px;\n left: -200px;\n top: -900px;\n background: radial-gradient(\n circle at center,\n rgba(253, 255, 147, 1) 0%,\n rgba(253, 255, 147, 0) 70%\n );\n animation: ${circle1Anim} 4s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 3;\n`;\n\nexport const circle2Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(400px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n position: absolute;\n width: 1200px;\n height: 1200px;\n left: -600px;\n top: -840px;\n background: radial-gradient(\n circle at center,\n rgba(255, 119, 119, 1) 0%,\n rgba(255, 119, 119, 0) 70%\n );\n animation: ${circle2Anim} 6s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 2;\n`;\n\nexport const circle3Anim = keyframes`\n 0% { transform: translate(600px, -40px) }\n 50% { transform: translate(600px, -200px) }\n 100% { transform: translate(600px, -40px) }\n`;\n\nexport const Circle3 = styled.div`\n position: absolute;\n width: 1200px;\n height: 1200px;\n left: -600px;\n top: -840px;\n background: radial-gradient(\n circle at center,\n rgba(119, 255, 247, 0.8) 0%,\n rgba(119, 255, 247, 0) 70%\n );\n animation: ${circle3Anim} 4s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 4;\n`;\n\nexport const StyledTitle = styled.h2`\n color: #000;\n font-weight: 700;\n font-size: 20px;\n line-height: 20px;\n`;\nexport const StyledDescription = styled.p`\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #454e54;\n`;\n","import React, { FC } from \"react\";\n\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { StorybookLogo } from \"./StorybookLogo\";\nimport {\n ModalContentWrapper,\n SkipButton,\n StyledIcon,\n Title,\n Description,\n Background,\n Circle1,\n Circle2,\n Circle3,\n TopContent,\n} from \"./WelcomeModal.styled\";\n\ninterface WelcomeModalProps {\n onProceed: () => void;\n skipOnboarding: () => void;\n}\n\nexport const WelcomeModal: FC<WelcomeModalProps> = ({\n onProceed,\n skipOnboarding,\n}) => {\n return (\n <Modal width={540} height={430} defaultOpen>\n {({ Close }) => (\n <ModalContentWrapper data-chromatic=\"ignore\">\n <TopContent>\n <StorybookLogo />\n <Title>Welcome to Storybook</Title>\n <Description>\n Storybook helps you develop UI components. Learn the basics in a\n few simple steps.\n </Description>\n <Button style={{ marginTop: 4 }} onClick={onProceed}>\n Start your 3 minute tour\n </Button>\n </TopContent>\n <SkipButton onClick={skipOnboarding}>\n Skip tour\n <StyledIcon icon=\"arrowright\" />\n </SkipButton>\n <Background>\n <Circle1 />\n <Circle2 />\n <Circle3 />\n </Background>\n </ModalContentWrapper>\n )}\n </Modal>\n );\n};\n","import { keyframes, styled } from \"@storybook/theming\";\n\nexport const ModalContent = styled.div`\n display: flex;\n flex-direction: row;\n height: 100%;\n max-height: 85vh;\n`;\n\nexport const Main = styled.div`\n position: relative;\n flex: 1;\n display: flex;\n flex-direction: column;\n font-family: ${({ theme }) => theme.typography.fonts.base};\n`;\n\nexport const Header = styled.div`\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 15px;\n border-bottom: 1px solid ${({ theme }) => theme.appBorderColor};\n height: 40px;\n`;\n\nexport const ModalTitle = styled.div`\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 13px;\n font-weight: bold;\n color: ${({ theme }) => theme.color.darkest};\n\n span {\n margin-top: 2px;\n }\n`;\n\nexport const Content = styled.div`\n font-size: 13px;\n padding: 15px;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: space-between;\n color: ${({ theme }) => theme.color.darker};\n\n h3 {\n font-size: 13px;\n font-weight: bold;\n padding: 0;\n margin: 0;\n }\n`;\n\nexport const SpanHighlight = styled.span`\n color: ${({ theme }) => theme.color.secondary};\n display: inline-block;\n border-radius: 4px;\n padding: 0.2em 0.4em;\n opacity: 0.8;\n background-color: ${({ theme }) => theme.color.secondary}20;\n font-weight: bold;\n`;\n\nexport const Image = styled.img`\n max-width: 100%;\n margin-top: 1em;\n`;\n\nexport const Background = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n overflow: hidden;\n`;\n\nexport const circle1Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(120px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle1 = styled.div`\n position: absolute;\n width: 350px;\n height: 350px;\n left: -160px;\n top: -260px;\n background: radial-gradient(\n circle at center,\n rgba(255, 119, 119, 1) 0%,\n rgba(255, 119, 119, 0) 70%\n );\n animation: ${circle1Anim} 8s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 2;\n`;\n\nexport const circle2Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 33% { transform: translate(-64px, 0px) }\n 66% { transform: translate(120px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle2 = styled.div`\n position: absolute;\n width: 350px;\n height: 350px;\n left: -54px;\n top: -250px;\n background: radial-gradient(\n circle at center,\n rgba(253, 255, 147, 1) 0%,\n rgba(253, 255, 147, 0) 70%\n );\n animation: ${circle2Anim} 12s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 3;\n`;\n\nexport const circle3Anim = keyframes`\n 0% { transform: translate(0px, 0px) }\n 50% { transform: translate(-120px, 0px) }\n 100% { transform: translate(0px, 0px) }\n`;\n\nexport const Circle3 = styled.div`\n position: absolute;\n width: 350px;\n height: 350px;\n left: 150px;\n top: -220px;\n background: radial-gradient(\n circle at center,\n rgba(119, 255, 247, 0.8) 0%,\n rgba(119, 255, 247, 0) 70%\n );\n animation: ${circle3Anim} 4s linear infinite;\n animation-timing-function: ease-in-out;\n z-index: 4;\n`;\n\nexport const ButtonsWrapper = styled.div`\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin-top: 4px;\n`;","import { styled } from \"@storybook/theming\";\nimport { motion } from \"framer-motion\";\n\nexport const Code = styled(motion.div)`\n position: relative;\n z-index: 2;\n`;\n\nexport const Container = styled.div<{ width: number }>`\n position: relative;\n box-sizing: border-box;\n background: #171c23;\n width: ${({ width }) => width}px;\n height: 100%;\n overflow: hidden;\n padding-left: 15px;\n padding-right: 15px;\n padding-top: 6px;\n\n && {\n pre {\n background: transparent !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n }\n`;\n\nexport const Backdrop = styled(motion.div)`\n background: #143046;\n position: absolute;\n z-index: 1;\n left: 0;\n width: 100%;\n height: 200px;\n`;\n","import { styled } from \"@storybook/theming\";\nimport { motion } from \"framer-motion\";\n\nexport const SnippetWrapper = styled(motion.div)<{ active?: boolean }>`\n position: relative;\n padding-top: 12px;\n padding-bottom: 12px;\n`;\n","import { motion } from \"framer-motion\";\nimport { Fragment, forwardRef } from \"react\";\nimport { SnippetWrapper } from \"./Snippet.styled\";\nimport React from \"react\";\nimport { SyntaxHighlighter as StorybookSyntaxHighlighter } from \"@storybook/components\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\n\ninterface Props {\n content: { code: string; toggle?: boolean }[];\n active: boolean;\n open?: boolean;\n}\n\nconst wrapperVariants = {\n default: {\n filter: \"grayscale(1)\",\n opacity: 0.5,\n },\n active: {\n filter: \"grayscale(0)\",\n opacity: 1,\n },\n};\n\nexport const Snippet = forwardRef<HTMLDivElement, Props>(\n ({ active, content, open }, ref) => {\n const customStyle = {\n fontSize: \"0.8125rem\",\n lineHeight: \"1.1875rem\",\n };\n\n return (\n <ThemeProvider theme={ensure(themes.dark)}>\n <SnippetWrapper\n ref={ref}\n initial=\"default\"\n animate={active ? \"active\" : \"default\"}\n aria-hidden={!active}\n variants={wrapperVariants}\n transition={{ ease: \"easeInOut\", duration: 0.6 }}\n >\n {content.map(({ toggle, code }, i) => (\n <Fragment key={i}>\n {toggle === undefined && (\n <StorybookSyntaxHighlighter\n language=\"javascript\"\n customStyle={customStyle}\n >\n {code}\n </StorybookSyntaxHighlighter>\n )}\n\n {toggle && !open && (\n <StorybookSyntaxHighlighter\n language=\"javascript\"\n customStyle={customStyle}\n >\n {` // ...`}\n </StorybookSyntaxHighlighter>\n )}\n\n {toggle && open && (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ delay: 0.4 }}\n >\n <StorybookSyntaxHighlighter\n language=\"javascript\"\n customStyle={customStyle}\n codeTagProps={{ style: { paddingLeft: \"15px\" } }}\n >\n {code}\n </StorybookSyntaxHighlighter>\n </motion.div>\n )}\n </Fragment>\n ))}\n </SnippetWrapper>\n </ThemeProvider>\n );\n }\n);\n","import React, {\n createRef,\n useCallback,\n useLayoutEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Backdrop, Code, Container } from \"./SyntaxHighlighter.styled\";\nimport { Snippet } from \"./Snippet/Snippet\";\n\ntype SyntaxHighlighterProps = {\n data: { code: string; toggle?: boolean }[][];\n activeStep: number;\n width: number;\n};\n\ntype StepsProps = {\n yPos: number;\n backdropHeight: number;\n index: number;\n open: boolean;\n};\n\nconst OFFSET = 49;\n\nexport const SyntaxHighlighter = ({\n activeStep,\n data,\n width,\n}: SyntaxHighlighterProps) => {\n const [steps, setSteps] = useState<StepsProps[]>([]);\n\n const refs = useMemo(\n () => data.map(() => createRef<HTMLDivElement>()),\n [data]\n );\n\n const getYPos = (idx: number) => {\n let yPos = 0;\n for (let i = 0; i < idx; i++) {\n yPos -= refs[i].current!.getBoundingClientRect().height;\n }\n return yPos;\n };\n\n const setNewSteps = useCallback(() => {\n const newSteps = data.flatMap((content, i) => {\n const backdropHeight = refs[i].current!.getBoundingClientRect().height;\n const finalSteps = [\n {\n yPos: getYPos(i) + OFFSET - 7,\n backdropHeight,\n index: i,\n open: false,\n },\n ];\n\n if (content.length > 1) {\n finalSteps.push({\n yPos: getYPos(i) + OFFSET - 7,\n backdropHeight,\n index: i,\n open: true,\n });\n }\n\n return finalSteps;\n });\n\n setSteps(newSteps);\n }, [data]);\n\n useLayoutEffect(() => {\n // Call setNewSteps every time height of the refs elements changes\n const resizeObserver = new ResizeObserver(() => {\n setNewSteps();\n });\n\n refs.forEach((ref) => {\n resizeObserver.observe(ref.current!);\n });\n\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n\n return (\n <Container width={width}>\n <Code\n animate={{ y: steps[activeStep]?.yPos ?? 0 }}\n transition={{ ease: \"easeInOut\", duration: 0.6 }}\n >\n {data.map((content, idx: number) => (\n <Snippet\n key={idx}\n ref={refs[idx]}\n active={steps[activeStep]?.index === idx}\n open={\n steps[activeStep]?.index > idx\n ? true\n : steps[activeStep]?.open ?? false\n }\n content={content}\n />\n ))}\n </Code>\n <Backdrop\n animate={{ height: steps[activeStep]?.backdropHeight ?? 0 }}\n transition={{ ease: \"easeInOut\", duration: 0.6 }}\n style={{ top: OFFSET }}\n className=\"syntax-highlighter-backdrop\"\n />\n </Container>\n );\n};\n","import { styled } from \"@storybook/theming\";\n\nexport const ListWrapper = styled.ul(() => ({\n display: \"flex\",\n flexDirection: \"column\",\n rowGap: 16,\n padding: 0,\n margin: 0,\n}));\n","import React from \"react\";\nimport { ListWrapper } from \"./List.styled\";\n\ninterface ListProps {\n children: React.ReactNode;\n}\n\nexport const List = ({ children }: ListProps) => {\n return <ListWrapper>{children}</ListWrapper>;\n};\n","import { styled } from \"@storybook/theming\";\n\nexport const ListItemWrapper = styled.li(() => ({\n display: \"flex\",\n alignItems: \"flex-start\",\n columnGap: 12,\n}));\n\nexport const ListItemContentWrapper = styled.div(({ theme }) => ({\n fontFamily: theme.typography.fonts.base,\n color: theme.color.darker,\n fontSize: \"13px\",\n}));\n\nexport const ListItemIndexWrapper = styled.div<{ isCompleted: boolean }>(\n ({ isCompleted, theme }) => ({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n border: !isCompleted && `1px solid ${theme.color.medium}`,\n minWidth: 20,\n width: 20,\n height: 20,\n borderRadius: \"50%\",\n backgroundColor: isCompleted ? theme.color.green : \"white\",\n fontFamily: theme.typography.fonts.base,\n fontSize: 10,\n fontWeight: 600,\n color: theme.color.dark,\n })\n);\n","import React from \"react\";\nimport { Icons } from \"@storybook/components\";\nimport {\n ListItemContentWrapper,\n ListItemIndexWrapper,\n ListItemWrapper,\n} from \"./ListItem.styled\";\n\ninterface ListItemProps {\n children: React.ReactNode;\n index: number;\n isCompleted?: boolean;\n}\n\nexport const ListItem = ({ children, index, isCompleted }: ListItemProps) => {\n return (\n <ListItemWrapper>\n <ListItemIndexWrapper\n aria-label={isCompleted ? \"complete\" : \"not complete\"}\n isCompleted={isCompleted}\n >\n {isCompleted ? (\n <Icons width={10} height={10} icon=\"check\" color=\"white\" />\n ) : (\n index\n )}\n </ListItemIndexWrapper>\n <ListItemContentWrapper>{children}</ListItemContentWrapper>\n </ListItemWrapper>\n );\n};\n","import { useEffect, useState } from \"react\";\nimport { Response } from \"../../../types/response\";\n\nexport function useGetButtonPath() {\n const [buttonPath, setButtonPath] = useState<Response<string>>(null);\n\n useEffect(() => {\n const getButtonPath = async () => {\n try {\n const response = await fetch(\"/index.json\");\n const json = await response.json();\n const buttonPath = json.entries[\"example-button--primary\"].importPath;\n setButtonPath({\n data: buttonPath,\n error: null,\n });\n } catch (e) {\n setButtonPath({\n data: null,\n error: e,\n });\n }\n };\n getButtonPath();\n }, []);\n\n return buttonPath;\n}\n","import { useState, useEffect } from \"react\";\nimport { Response } from \"../../../types/response\";\nimport { API, AddonStore } from \"@storybook/manager-api\";\nimport {\n STORY_INDEX_INVALIDATED,\n STORY_RENDERED,\n} from \"@storybook/core-events\";\n\nexport const useGetWarningButtonStatus = (\n active: boolean,\n api: API,\n addonsStore: AddonStore\n) => {\n const [status, setStatus] = useState<Response<boolean>>(null);\n\n useEffect(() => {\n if (active) {\n const getWarningButtonStatus = () => {\n addonsStore.getChannel().once(STORY_RENDERED, () => {\n const out = api.getData(\"example-button--warning\");\n\n if (out) {\n setStatus({ data: true, error: null });\n }\n });\n };\n\n // If the story already exists, we don't need to listen to any events\n if(api.getData(\"example-button--warning\")) {\n setStatus({ data: true, error: null });\n } else {\n addonsStore\n .getServerChannel()\n .on(STORY_INDEX_INVALIDATED, getWarningButtonStatus);\n }\n\n return () => {\n addonsStore\n .getServerChannel()\n .off(STORY_INDEX_INVALIDATED, getWarningButtonStatus);\n };\n }\n }, [active]);\n\n return status;\n};\n","import { useEffect, useState } from \"react\";\n\n// get an element and return its boundary. It accepts a classname as argument\nexport const useGetBackdropBoundary = (className: string, active: boolean) => {\n const [boundary, setBoundary] = useState<{\n top: number;\n left: number;\n height: number;\n width: number;\n } | null>(null);\n\n const element = document.querySelector(`.${className}`) as HTMLElement;\n\n // setBoundary if element changes sized. use resize observer\n useEffect(() => {\n if (active) {\n const resizeObserver = new ResizeObserver(() => {\n if (element) {\n setBoundary({\n top: element.offsetTop,\n left: element.offsetLeft,\n height: element.offsetHeight,\n width: element.offsetWidth,\n });\n }\n });\n\n resizeObserver.observe(element);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [className, active]);\n\n return boundary;\n};\n","export default [\n [\n {\n code: `// Button.stories.jsx`,\n },\n ],\n [\n {\n code: `import { Button } from './Button';`,\n },\n ],\n [\n {\n code: `export default {\n title: 'Example/Button',\n component: Button,\n // ...\n };`,\n },\n ],\n [\n { code: `export const Primary = {` },\n {\n code: `args: {\n primary: true,\n label: 'Click',\n background: 'red'\n }`,\n toggle: true,\n },\n { code: `};` },\n ],\n [\n {\n code: `// Copy the code below\nexport const Warning = {\n args: {\n primary: true,\n backgroundColor: 'red',\n label: 'Delete now'\n }\n};`,\n },\n ],\n];\n","export default [\n [\n {\n code: `// Button.stories.tsx`,\n },\n ],\n [\n {\n code: `import type { Meta, StoryObj } from '@storybook/react';\n \n import { Button } from './Button';`,\n },\n ],\n [\n {\n code: `const meta: Meta<typeof Button> = {\n title: 'Example/Button',\n component: Button,\n // ...\n };\n \n export default meta;`,\n },\n ],\n [\n { code: `export const Primary: Story = {` },\n {\n code: `args: {\n primary: true,\n label: 'Click',\n background: 'red'\n }`,\n toggle: true,\n },\n { code: `};` },\n ],\n [\n {\n code: `// Copy the code below\nexport const Warning: Story = {\n args: {\n primary: true,\n backgroundColor: 'red',\n label: 'Delete now'\n }\n};`,\n },\n ],\n];\n","export default [\n [\n {\n code: `// Button.stories.tsx`,\n },\n ],\n [\n {\n code: `import type { Meta, StoryObj } from '@storybook/nextjs';\n \n import { Button } from './Button';`,\n },\n ],\n [\n {\n code: `const meta: Meta<typeof Button> = {\n title: 'Example/Button',\n component: Button,\n // ...\n };\n \n export default meta;`,\n },\n ],\n [\n { code: `export const Primary: Story = {` },\n {\n code: `args: {\n primary: true,\n label: 'Click',\n background: 'red'\n }`,\n toggle: true,\n },\n { code: `};` },\n ],\n [\n {\n code: `// Copy the code below\nexport const Warning: Story = {\n args: {\n primary: true,\n backgroundColor: 'red',\n label: 'Delete now'\n }\n};`,\n },\n ],\n];\n","// fetch project.json and read `framework.name` from it and return it\n\nimport { useEffect, useState } from \"react\";\nimport { Response } from \"../../../types/response\";\n\ntype Project = {\n language: \"javascript\" | \"typescript\";\n framework: {\n name: string;\n };\n};\n\nexport function useGetProject() {\n const [project, setProject] = useState<Response<Project>>(null);\n\n useEffect(() => {\n const getProject = async () => {\n try {\n const response = await fetch(\"/project.json\");\n const json = await response.json();\n\n setProject({\n data: json,\n error: null,\n });\n } catch (e) {\n setProject({\n data: null,\n error: e,\n });\n }\n };\n getProject();\n }, []);\n\n return project;\n}\n","import React, { FC, useState } from \"react\";\nimport { Button } from \"../../components/Button/Button\";\nimport { Modal } from \"../../components/Modal/Modal\";\nimport { Icons } from \"@storybook/components\";\nimport useMeasure from \"react-use-measure\";\nimport {\n Background,\n ButtonsWrapper,\n Circle1,\n Circle2,\n Circle3,\n Content,\n Header,\n Image,\n Main,\n ModalContent,\n ModalTitle,\n SpanHighlight,\n} from \"./WriteStoriesModal.styled\";\nimport { SyntaxHighlighter } from \"../../components/SyntaxHighlighter/SyntaxHighlighter\";\nimport { List } from \"../../components/List/List\";\nimport { ListItem } from \"../../components/List/ListItem/ListItem\";\nimport { useGetButtonPath } from \"./hooks/useGetButtonPath\";\nimport { useGetWarningButtonStatus } from \"./hooks/useGetWarningButtonStatus\";\nimport { useGetBackdropBoundary } from \"./hooks/useGetBackdropBoundary\";\nimport titleSidebarImg from \"./assets/01-title-sidebar.png\";\nimport storyNameSidebarImg from \"./assets/02-story-name-sidebar.png\";\nimport argsImg from \"./assets/03-args.png\";\nimport dataJavascript from \"./code/javascript\";\nimport dataTypescript from \"./code/typescript\";\nimport dataTypescriptNextjs from \"./code/nextjs-typescript\";\nimport { useGetProject } from \"./hooks/useGetFrameworkName\";\nimport { API, AddonStore } from \"@storybook/manager-api\";\n\n// TODO: Add warning if backdropBoundary && !warningButtonStatus?.data is not true.\n// backdropBoundary && !warningButtonStatus?.data\n\ninterface WriteStoriesModalProps {\n onFinish: () => void;\n api: API;\n addonsStore: AddonStore;\n skipOnboarding: () => void;\n}\n\nexport const WriteStoriesModal: FC<WriteStoriesModalProps> = ({\n onFinish,\n api,\n addonsStore,\n skipOnboarding,\n}) => {\n const [step, setStep] = useState<\n \"imports\" | \"meta\" | \"story\" | \"args\" | \"customStory\"\n >(\"imports\");\n\n const stepIndex = {\n imports: 1,\n meta: 2,\n story: 3,\n args: 4,\n customStory: 5,\n };\n\n const [isWarningStoryCopied, setWarningStoryCopied] = useState(false);\n\n const [clipboardButtonRef, clipboardButtonBounds] = useMeasure();\n\n const buttonPath = useGetButtonPath();\n const warningButtonStatus = useGetWarningButtonStatus(\n step === \"customStory\",\n api,\n addonsStore\n );\n const backdropBoundary = useGetBackdropBoundary(\n \"syntax-highlighter-backdrop\",\n step === \"customStory\"\n );\n\n const project = useGetProject();\n const isJavascript = project?.data?.language === \"javascript\";\n\n const data = isJavascript\n ? dataJavascript\n : project?.data?.framework.name === \"@storybook/nextjs\"\n ? dataTypescriptNextjs\n : dataTypescript;\n\n const copyWarningStory = () => {\n const warningContent = data[4][0].code;\n navigator.clipboard.writeText(\n warningContent.replace(\"// Copy the code below\", \"\")\n );\n setWarningStoryCopied(true);\n };\n\n return (\n <Modal width={740} height={430} defaultOpen>\n {({ Title, Description }) => (\n <ModalContent>\n {data ? (\n <SyntaxHighlighter\n activeStep={stepIndex[step] || 1}\n data={data}\n width={480}\n />\n ) : null}\n {step === \"customStory\" &&\n backdropBoundary &&\n !warningButtonStatus?.data && (\n <Button\n ref={clipboardButtonRef}\n onClick={() => copyWarningStory()}\n style={{\n position: \"absolute\",\n top: backdropBoundary.top + backdropBoundary.height - 45,\n left:\n backdropBoundary.left +\n backdropBoundary.width -\n (clipboardButtonBounds.width ?? 0) -\n 10,\n zIndex: 1000,\n }}\n >\n {isWarningStoryCopied ? \"Copied to clipboard\" : \"Copy code\"}\n </Button>\n )}\n <Main>\n <Header>\n <Title asChild>\n <ModalTitle>\n <Icons icon=\"bookmarkhollow\" width={13} />\n <span>How to write a story</span>\n </ModalTitle>\n </Title>\n\n <Icons\n style={{ cursor: \"pointer\" }}\n icon=\"cross\"\n width={13}\n onClick={skipOnboarding}\n />\n </Header>\n <Description asChild>\n <Content>\n {step === \"imports\" && (\n <>\n <div>\n <h3>Imports</h3>\n <p>\n First, import Meta and StoryObj for type safety and\n autocompletion in TypeScript stories.\n </p>\n <p>\n Next, import a component. In this case, the Button\n component.\n </p>\n </div>\n <Button\n style={{ marginTop: 4 }}\n onClick={() => {\n setStep(\"meta\");\n }}\n >\n Next\n </Button>\n </>\n )}\n {step === \"meta\" && (\n <>\n <div>\n <h3>Meta</h3>\n <p>\n The default export, Meta, contains metadata about this\n component's stories. The title field controls where\n stories appear in the sidebar.\n </p>\n <Image\n width=\"204\"\n alt=\"Title property pointing to Storybook's sidebar\"\n src={titleSidebarImg}\n />\n </div>\n <ButtonsWrapper>\n <Button\n variant=\"secondary\"\n onClick={() => setStep(\"imports\")}\n >\n Previous\n </Button>\n <Button onClick={() => setStep(\"story\")}>Next</Button>\n </ButtonsWrapper>\n </>\n )}\n {step === \"story\" && (\n <>\n <div>\n <h3>Story</h3>\n <p>\n Each named export is a story. Its contents specify how\n the story is rendered in addition to other configuration\n options.\n </p>\n <Image\n width=\"190\"\n alt=\"Story export pointing to the sidebar entry of the story\"\n src={storyNameSidebarImg}\n />\n </div>\n <ButtonsWrapper>\n <Button\n variant=\"secondary\"\n onClick={() => setStep(\"meta\")}\n >\n Previous\n </Button>\n <Button onClick={() => setStep(\"args\")}>Next</Button>\n </ButtonsWrapper>\n </>\n )}\n {step === \"args\" && (\n <>\n <div>\n <h3>Args</h3>\n <p>\n Args are inputs that are passed to the component, which\n Storybook uses to render the component in different\n states. In React, args = props. They also specify the\n initial control settings for the story.\n </p>\n <Image\n alt=\"Args mapped to their controls in Storybook\"\n width=\"253\"\n src={argsImg}\n />\n </div>\n <ButtonsWrapper>\n <Button\n variant=\"secondary\"\n onClick={() => setStep(\"story\")}\n >\n Previous\n </Button>\n <Button onClick={() => setStep(\"customStory\")}>\n Next\n </Button>\n </ButtonsWrapper>\n </>\n )}\n {step === \"customStory\" &&\n (!warningButtonStatus?.error ? (\n <>\n <div>\n <h3>Create your first story</h3>\n <p>\n Now it's your turn. See how easy it is to create your\n first story by following these steps below.\n </p>\n <List>\n <ListItem\n isCompleted={\n isWarningStoryCopied || warningButtonStatus?.data\n }\n index={1}\n >\n Copy the Warning story\n </ListItem>\n <ListItem\n isCompleted={warningButtonStatus?.data}\n index={2}\n >\n Open{\" \"}\n {buttonPath?.data ? (\n <SpanHighlight>{buttonPath.data}</SpanHighlight>\n ) : (\n <>the Button Story</>\n )}{\" \"}\n in your current working directory\n </ListItem>\n <ListItem\n isCompleted={warningButtonStatus?.data}\n index={3}\n >\n Paste it at the bottom of the file\n </ListItem>\n </List>\n </div>\n <ButtonsWrapper>\n <Button\n variant=\"secondary\"\n onClick={() => setStep(\"args\")}\n >\n Previous\n </Button>\n {warningButtonStatus?.data ? (\n <Button onClick={() => onFinish()}>\n Go to story\n </Button>\n ) : null}\n </ButtonsWrapper>\n </>\n ) : null)}\n </Content>\n </Description>\n <Background>\n <Circle1 />\n <Circle2 />\n <Circle3 />\n </Background>\n </Main>\n </ModalContent>\n )}\n </Modal>\n );\n};\n","import React, { useCallback, useEffect, useState } from \"react\";\nimport { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport { addons, type API } from \"@storybook/manager-api\";\n\nimport { GuidedTour } from \"./features/GuidedTour/GuidedTour\";\nimport { WelcomeModal } from \"./features/WelcomeModal/WelcomeModal\";\nimport { WriteStoriesModal } from \"./features/WriteStoriesModal/WriteStoriesModal\";\nimport { Confetti } from \"./components/Confetti/Confetti\";\n\ntype Step =\n | \"1:Welcome\"\n | \"2:StorybookTour\"\n | \"3:WriteYourStory\"\n | \"4:VisitNewStory\"\n | \"5:ConfigureYourProject\";\n\nconst theme = ensure(themes.light);\n\nexport default function App({ api }: { api: API }) {\n const [enabled, setEnabled] = useState(true);\n const [showConfetti, setShowConfetti] = useState(false);\n const [step, setStep] = useState<Step>(\"1:Welcome\");\n\n const skipOnboarding = useCallback(() => {\n // remove onboarding query parameter from current url\n const url = new URL(window.location.href);\n const path = decodeURIComponent(url.searchParams.get(\"path\"));\n url.search = `?path=${path}&onboarding=false`;\n history.replaceState({}, \"\", url.href);\n api.setQueryParams({ onboarding: \"false\" });\n setEnabled(false);\n }, [setEnabled, api]);\n\n useEffect(() => {\n let stepTimeout: number;\n if (step === \"4:VisitNewStory\") {\n setShowConfetti(true);\n stepTimeout = window.setTimeout(() => {\n setStep(\"5:ConfigureYourProject\");\n }, 2000);\n }\n\n return () => {\n clearTimeout(stepTimeout);\n };\n }, [step]);\n\n useEffect(() => {\n const storyId = api.getCurrentStoryData()?.id;\n api.setQueryParams({ onboarding: \"true\" });\n // make sure the initial state is set correctly:\n // 1. Selected story is primary button\n // 2. The addon panel is opened, in the bottom and the controls tab is selected\n if (storyId !== \"example-button--primary\") {\n api.selectStory(\"example-button--primary\", undefined, {\n ref: undefined,\n });\n }\n }, []);\n\n return (\n <ThemeProvider theme={theme}>\n {enabled && showConfetti && (\n <Confetti\n numberOfPieces={800}\n recycle={false}\n tweenDuration={20000}\n onConfettiComplete={(confetti) => {\n confetti.reset();\n setShowConfetti(false);\n }}\n />\n )}\n {enabled && step === \"1:Welcome\" && (\n <WelcomeModal\n onProceed={() => setStep(\"2:StorybookTour\")}\n skipOnboarding={skipOnboarding}\n />\n )}\n {enabled &&\n (step === \"2:StorybookTour\" || step === \"5:ConfigureYourProject\") && (\n <GuidedTour\n api={api}\n isFinalStep={step === \"5:ConfigureYourProject\"}\n onFirstTourDone={() => {\n setStep(\"3:WriteYourStory\");\n }}\n onLastTourDone={() => {\n api.selectStory(\"configure-your-project--docs\");\n skipOnboarding();\n }}\n />\n )}\n {enabled && step === \"3:WriteYourStory\" && (\n <WriteStoriesModal\n api={api}\n addonsStore={addons}\n onFinish={() => {\n api.selectStory(\"example-button--warning\");\n setStep(\"4:VisitNewStory\");\n }}\n skipOnboarding={skipOnboarding}\n />\n )}\n </ThemeProvider>\n );\n}\n","import ReactDOM from \"react-dom\";\nimport React, { lazy, Suspense } from \"react\";\nimport { addons } from \"@storybook/manager-api\";\nimport { STORY_SPECIFIED } from \"@storybook/core-events\";\n\nconst App = lazy(() => import(\"./App\"));\n\n// The addon is enabled only when:\n// 1. The onboarding query parameter is present\n// 2. The example button stories are present\naddons.register(\"@storybook/addon-onboarding\", async (api) => {\n const urlState = api.getUrlState();\n const isOnboarding = urlState.path === '/onboarding' || urlState.queryParams.onboarding === 'true';\n\n api.once(STORY_SPECIFIED, () => {\n let hasButtonStories = !!api.getData(\"example-button--primary\") || !!document.getElementById('example-button--primary')\n\n if (!hasButtonStories) {\n 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/addon-onboarding#uninstalling`);\n return;\n }\n\n if (!isOnboarding || window.innerWidth < 730) {\n return;\n }\n\n api.togglePanel(true);\n api.togglePanelPosition(\"bottom\");\n api.setSelectedPanel(\"addon-controls\");\n\n // Add a new DOM element to document.body, where we will bootstrap our React app\n const domNode = document.createElement(\"div\");\n\n domNode.id = \"storybook-addon-onboarding\";\n // Append the new DOM element to document.body\n document.body.appendChild(domNode);\n\n // Render the React app\n ReactDOM.render(\n <Suspense fallback={<div>Loading...</div>}>\n <App api={api} />\n </Suspense>,\n domNode\n );\n })\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-onboarding",
3
- "version": "0.0.26",
3
+ "version": "0.0.27--canary.48.e9e2981.0",
4
4
  "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
5
5
  "keywords": [
6
6
  "storybook-addons",