diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 0b8923cdca7f..7490aa15d182 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -67,9 +67,9 @@ "@storybook/icons": "^1.4.0", "@testing-library/react": "^14.0.0", "execa": "^9.5.2", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-resize-detector": "^7.1.2", + "react": "^19.1.1", + "react-dom": "^19.1.1", + "react-resize-detector": "^12.3.0", "typescript": "^5.8.3", "vitest-axe": "^0.1.0" }, diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 5b5365c3ef3c..064499999653 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -102,9 +102,9 @@ "markdown-to-jsx": "^7.7.2", "memoizerific": "^1.11.3", "polished": "^4.2.2", - "react": "^18.2.0", + "react": "^19.1.1", "react-colorful": "^5.1.2", - "react-dom": "^18.2.0", + "react-dom": "^19.1.1", "rehype-external-links": "^3.0.0", "rehype-slug": "^6.0.0", "telejson": "8.0.0", diff --git a/code/addons/docs/src/blocks/blocks/external/ExternalDocs.tsx b/code/addons/docs/src/blocks/blocks/external/ExternalDocs.tsx index 0e8f4cab2f7e..8a3d34f0f6cd 100644 --- a/code/addons/docs/src/blocks/blocks/external/ExternalDocs.tsx +++ b/code/addons/docs/src/blocks/blocks/external/ExternalDocs.tsx @@ -15,7 +15,7 @@ export type ExternalDocsProps = { function usePreview( projectAnnotations: ProjectAnnotations ) { - const previewRef = useRef>(); + const previewRef = useRef | null>(null); if (!previewRef.current) { previewRef.current = new ExternalPreview(projectAnnotations); diff --git a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx index 0986dab679ed..8222d2e5b6ba 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx @@ -1,4 +1,4 @@ -import type { FC } from 'react'; +import type { FC, JSX } from 'react'; import React from 'react'; import { TabsState } from 'storybook/internal/components'; diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx index d2fe3081fe37..0d5d4c66e885 100644 --- a/code/addons/docs/src/blocks/components/Preview.tsx +++ b/code/addons/docs/src/blocks/components/Preview.tsx @@ -154,7 +154,7 @@ const getSource = ( function getStoryId(children: ReactNode) { if (Children.count(children) === 1) { const elt = children as ReactElement; - if (elt.props) { + if (elt.props && typeof elt.props === 'object' && 'id' in elt.props) { return elt.props.id; } } @@ -221,7 +221,7 @@ export const Preview: FC = ({ e.preventDefault(); if (additionalActionItems.filter((item) => item.title === 'Copied').length === 0) { - copyToClipboard(source?.props.code ?? '').then(() => { + copyToClipboard((source?.props as { code?: string })?.code ?? '').then(() => { setAdditionalActionItems([ ...additionalActionItems, { @@ -252,7 +252,7 @@ export const Preview: FC = ({ border zoom={(z: number) => setScale(scale * z)} resetZoom={() => setScale(1)} - storyId={getStoryId(children)} + storyId={getStoryId(children) as string} baseUrl="./iframe.html" /> )} diff --git a/code/addons/docs/src/blocks/components/Story.tsx b/code/addons/docs/src/blocks/components/Story.tsx index 5af081fce655..dceb8a101e82 100644 --- a/code/addons/docs/src/blocks/components/Story.tsx +++ b/code/addons/docs/src/blocks/components/Story.tsx @@ -38,7 +38,7 @@ export const storyBlockIdFromId = ({ story, primary }: StoryProps) => `story--${story.id}${primary ? '--primary' : ''}`; const InlineStory: FunctionComponent = (props) => { - const storyRef = useRef(); + const storyRef = useRef(null); const [showLoader, setShowLoader] = useState(true); const [error, setError] = useState(); diff --git a/code/addons/docs/src/blocks/controls/Date.tsx b/code/addons/docs/src/blocks/controls/Date.tsx index 442d3af9d7c4..7746c806ee7c 100644 --- a/code/addons/docs/src/blocks/controls/Date.tsx +++ b/code/addons/docs/src/blocks/controls/Date.tsx @@ -69,8 +69,8 @@ const FlexSpaced = styled.div(({ theme }) => ({ export type DateProps = ControlProps & DateConfig; export const DateControl: FC = ({ name, value, onChange, onFocus, onBlur, argType }) => { const [valid, setValid] = useState(true); - const dateRef = useRef(); - const timeRef = useRef(); + const dateRef = useRef(null); + const timeRef = useRef(null); const readonly = !!argType?.table?.readonly; useEffect(() => { diff --git a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx index 2e14e3cce627..6e53ce23832f 100644 --- a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx +++ b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx @@ -104,12 +104,12 @@ export class JsonAddValue extends Component { className: 'rejt-minus-menu', style: minus, 'aria-label': `remove the array '${String(name)}'`, - }); + } as any); return ( <> @@ -380,7 +380,7 @@ export class JsonArray extends Component { className: 'rejt-plus-menu', style: plus, 'aria-label': `add a new item to the '${String(name)}' array`, - }); + } as any); const removeItemButton = minusMenuElement && cloneElement(minusMenuElement, { @@ -388,7 +388,7 @@ export class JsonArray extends Component { className: 'rejt-minus-menu', style: minus, 'aria-label': `remove the array '${String(name)}'`, - }); + } as any); const onlyValue = true; const startObject = '['; @@ -673,7 +673,7 @@ export class JsonFunctionValue extends Component { className: 'rejt-minus-menu', style: minus, 'aria-label': `remove the object '${String(name)}'`, - }); + } as any); return ( <> @@ -1269,7 +1269,7 @@ export class JsonObject extends Component { className: 'rejt-plus-menu', style: plus, 'aria-label': `add a new property to the object '${String(name)}'`, - }); + } as any); const removeItemButton = minusMenuElement && cloneElement(minusMenuElement, { @@ -1277,7 +1277,7 @@ export class JsonObject extends Component { className: 'rejt-minus-menu', style: minus, 'aria-label': `remove the object '${String(name)}'`, - }); + } as any); const list = keyList.map((key) => ( { 'aria-label': `remove the property '${String(name)}' with value '${String(originalValue)}'${ String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : '' }`, - }); + } as any); return (
  • diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index bd630e4f1004..146be3d19822 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -55,8 +55,8 @@ }, "devDependencies": { "@storybook/icons": "^1.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "react-resize-detector": "^7.1.2", "typescript": "^5.8.3" }, diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index b015f580a55e..d5df137a5f9c 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -53,8 +53,8 @@ "devDependencies": { "@neoconfetti/react": "^1.0.0", "@storybook/icons": "^1.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "react-joyride": "^2.8.2", "typescript": "^5.8.3" }, diff --git a/code/addons/onboarding/src/components/HighlightElement/HighlightElement.tsx b/code/addons/onboarding/src/components/HighlightElement/HighlightElement.tsx index 23fa7489ad68..9d3de3de2510 100644 --- a/code/addons/onboarding/src/components/HighlightElement/HighlightElement.tsx +++ b/code/addons/onboarding/src/components/HighlightElement/HighlightElement.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { type JSX, useEffect } from 'react'; export function HighlightElement({ targetSelector, diff --git a/code/addons/onboarding/src/manager.tsx b/code/addons/onboarding/src/manager.tsx index 3258b053c51e..2ff9598fca6a 100644 --- a/code/addons/onboarding/src/manager.tsx +++ b/code/addons/onboarding/src/manager.tsx @@ -1,5 +1,5 @@ import React, { Suspense, lazy } from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { STORY_SPECIFIED } from 'storybook/internal/core-events'; @@ -45,12 +45,11 @@ addons.register('@storybook/addon-onboarding', async (api) => { document.body.appendChild(domNode); // Render the React app - // eslint-disable-next-line react/no-deprecated - ReactDOM.render( + const root = createRoot(domNode); + root.render( }> - , - domNode + ); }); }); diff --git a/code/addons/pseudo-states/package.json b/code/addons/pseudo-states/package.json index e754eb16bb67..8bcb29d73baf 100644 --- a/code/addons/pseudo-states/package.json +++ b/code/addons/pseudo-states/package.json @@ -56,8 +56,8 @@ }, "devDependencies": { "@storybook/icons": "^1.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "typescript": "^5.8.3" }, "peerDependencies": { diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 977fc73d92ce..c87d525e3035 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -62,8 +62,8 @@ }, "devDependencies": { "@storybook/icons": "^1.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "typescript": "^5.8.3" }, "peerDependencies": { diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json index f94405d306a6..829fcc243d06 100644 --- a/code/addons/vitest/package.json +++ b/code/addons/vitest/package.json @@ -92,8 +92,8 @@ "micromatch": "^4.0.8", "pathe": "^1.1.2", "picocolors": "^1.1.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "semver": "^7.6.3", "sirv": "^2.0.4", "slash": "^5.0.0", diff --git a/code/addons/vitest/src/use-test-provider-state.ts b/code/addons/vitest/src/use-test-provider-state.ts index e9ecb3bd77e7..07e919415c1d 100644 --- a/code/addons/vitest/src/use-test-provider-state.ts +++ b/code/addons/vitest/src/use-test-provider-state.ts @@ -65,21 +65,25 @@ export const useTestProvider = ( // this follows the same behavior for the green border around the whole testing module in TestingModule.tsx const [isSettingsUpdated, setIsSettingsUpdated] = useState(false); - const settingsUpdatedTimeoutRef = useRef>(); + const settingsUpdatedTimeoutRef = useRef | null>(null); useEffect(() => { const unsubscribe = store.onStateChange((state, previousState) => { if (!isEqual(state.config, previousState.config)) { testProviderStore.settingsChanged(); setIsSettingsUpdated(true); - clearTimeout(settingsUpdatedTimeoutRef.current); - settingsUpdatedTimeoutRef.current = setTimeout(() => { - setIsSettingsUpdated(false); - }, 1000); + if (settingsUpdatedTimeoutRef.current) { + clearTimeout(settingsUpdatedTimeoutRef.current); + settingsUpdatedTimeoutRef.current = setTimeout(() => { + setIsSettingsUpdated(false); + }, 1000); + } } }); return () => { unsubscribe(); - clearTimeout(settingsUpdatedTimeoutRef.current); + if (settingsUpdatedTimeoutRef.current) { + clearTimeout(settingsUpdatedTimeoutRef.current); + } }; }, []); diff --git a/code/core/package.json b/code/core/package.json index c8ca010ca76b..aa3fb483e426 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -280,7 +280,7 @@ "@types/pretty-hrtime": "^1.0.0", "@types/prompts": "^2.0.9", "@types/react-syntax-highlighter": "11.0.5", - "@types/react-transition-group": "^4", + "@types/react-transition-group": "^4.4.12", "@types/semver": "^7.5.8", "@types/ws": "^8", "@vitest/utils": "^3.2.4", @@ -338,14 +338,14 @@ "prettier": "^3.5.3", "pretty-hrtime": "^1.0.3", "prompts": "^2.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-helmet-async": "^1.3.0", - "react-inspector": "^6.0.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", + "react-helmet-async": "^2.0.5", + "react-inspector": "^9.0.0", "react-popper-tooltip": "^4.4.2", "react-router-dom": "6.15.0", - "react-syntax-highlighter": "^15.4.5", - "react-textarea-autosize": "^8.3.0", + "react-syntax-highlighter": "^15.6.6", + "react-textarea-autosize": "^8.5.9", "react-transition-group": "^4.4.5", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0", diff --git a/code/core/src/actions/components/ActionLogger/index.tsx b/code/core/src/actions/components/ActionLogger/index.tsx index 1da7339e09c8..879825a4d373 100644 --- a/code/core/src/actions/components/ActionLogger/index.tsx +++ b/code/core/src/actions/components/ActionLogger/index.tsx @@ -1,4 +1,4 @@ -import type { ElementRef, ReactNode } from 'react'; +import type { ReactNode } from 'react'; import React, { Fragment, forwardRef, useEffect, useRef } from 'react'; import { ActionBar, ScrollArea } from 'storybook/internal/components'; @@ -42,7 +42,7 @@ interface ActionLoggerProps { } export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => { - const wrapperRef = useRef>(null); + const wrapperRef = useRef | null>(null); const wrapper = wrapperRef.current; const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight; @@ -50,7 +50,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => { // Scroll to bottom, when the action panel was already scrolled down // Scroll to bottom, when the action panel was already scrolled down - if (wasAtBottom) { + if (wasAtBottom && wrapperRef.current) { wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; } }, [wasAtBottom, actions.length]); diff --git a/code/core/src/component-testing/components/MethodCall.tsx b/code/core/src/component-testing/components/MethodCall.tsx index cb4fc43a87c2..07cbe71dcbf0 100644 --- a/code/core/src/component-testing/components/MethodCall.tsx +++ b/code/core/src/component-testing/components/MethodCall.tsx @@ -247,6 +247,8 @@ export const ObjectNode = ({ return ( <> ); const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call); - const endRef = useRef(); + const endRef = useRef(null); useEffect(() => { let observer: IntersectionObserver; if (global.IntersectionObserver) { @@ -403,7 +403,6 @@ export const Panel = memo<{ refId?: string; storyId: string; storyUrl: string }> caughtException={caughtException} unhandledErrors={unhandledErrors} pausedAt={pausedAt} - // @ts-expect-error TODO endRef={endRef} onScrollToEnd={scrollTarget && scrollToTarget} /> diff --git a/code/core/src/components/components/Zoom/ZoomElement.tsx b/code/core/src/components/components/Zoom/ZoomElement.tsx index 550042bbae10..9fee3894ce2c 100644 --- a/code/core/src/components/components/Zoom/ZoomElement.tsx +++ b/code/core/src/components/components/Zoom/ZoomElement.tsx @@ -39,7 +39,7 @@ export function ZoomElement({ centered, scale, children }: ZoomProps) { }, [scale]); useResizeObserver({ - ref: componentWrapperRef, + ref: componentWrapperRef as React.RefObject, onResize, }); diff --git a/code/core/src/components/components/Zoom/ZoomIFrame.tsx b/code/core/src/components/components/Zoom/ZoomIFrame.tsx index d166d3b96c28..662cbd70bc53 100644 --- a/code/core/src/components/components/Zoom/ZoomIFrame.tsx +++ b/code/core/src/components/components/Zoom/ZoomIFrame.tsx @@ -4,7 +4,7 @@ import React, { Component } from 'react'; export type IZoomIFrameProps = { scale: number; children: ReactElement; - iFrameRef: RefObject; + iFrameRef: RefObject; active?: boolean; }; @@ -14,8 +14,7 @@ export class ZoomIFrame extends Component { componentDidMount() { const { iFrameRef } = this.props; - // @ts-expect-error (non strict) - this.iframe = iFrameRef.current; + this.iframe = iFrameRef.current as HTMLIFrameElement; } shouldComponentUpdate(nextProps: IZoomIFrameProps) { diff --git a/code/core/src/components/components/addon-panel/addon-panel.tsx b/code/core/src/components/components/addon-panel/addon-panel.tsx index 8d56028a3293..1dc33249a9c6 100644 --- a/code/core/src/components/components/addon-panel/addon-panel.tsx +++ b/code/core/src/components/components/addon-panel/addon-panel.tsx @@ -1,8 +1,8 @@ import type { ReactElement } from 'react'; import React, { useEffect, useRef } from 'react'; -const usePrevious = (value: any) => { - const ref = useRef(); +const usePrevious = (value: ReactElement) => { + const ref = useRef(undefined); useEffect(() => { // happens after return @@ -12,7 +12,7 @@ const usePrevious = (value: any) => { return ref.current; }; -const useUpdate = (update: boolean, value: any) => { +const useUpdate = (update: boolean, value: ReactElement) => { const previousValue = usePrevious(value); return update ? value : previousValue; diff --git a/code/core/src/components/components/tabs/tabs.helpers.tsx b/code/core/src/components/components/tabs/tabs.helpers.tsx index 7e51d48625a4..04cce8e5adef 100644 --- a/code/core/src/components/components/tabs/tabs.helpers.tsx +++ b/code/core/src/components/components/tabs/tabs.helpers.tsx @@ -1,4 +1,4 @@ -import type { FC, PropsWithChildren, ReactChild, ReactElement, ReactNode } from 'react'; +import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react'; import React, { Children } from 'react'; import type { Addon_RenderOptions } from 'storybook/internal/types'; @@ -21,8 +21,8 @@ export const childrenToList = (children: TabsProps['children']) => ({ props: { title, id, color, children: childrenOfChild }, }: ReactElement<{ - children: FC | ReactChild | null; - title: ReactChild | null | FC; + children: FC | ReactElement | null; + title: ReactElement | FC | string | number | null | boolean | undefined; id: string; color?: string; }>) => { diff --git a/code/core/src/components/components/tabs/tabs.hooks.tsx b/code/core/src/components/components/tabs/tabs.hooks.tsx index 60c4f49c0d9c..34c2015f8f3a 100644 --- a/code/core/src/components/components/tabs/tabs.hooks.tsx +++ b/code/core/src/components/components/tabs/tabs.hooks.tsx @@ -39,8 +39,8 @@ const AddonButton = styled(TabButton)<{ preActive: boolean }>(({ active, theme, }); export function useList(list: ChildrenListComplete) { - const tabBarRef = useRef(); - const addonsRef = useRef(); + const tabBarRef = useRef(null); + const addonsRef = useRef(null); const tabRefs = useRef(new Map()); const { width: tabBarWidth = 1 } = useResizeObserver({ // @ts-expect-error (non strict) @@ -91,7 +91,6 @@ export function useList(list: ChildrenListComplete) { > - {/* @ts-expect-error (we know this is broken) */} + {/* @ts-expect-error (non strict) */} {title} ); diff --git a/code/core/src/components/components/tabs/tabs.tsx b/code/core/src/components/components/tabs/tabs.tsx index 771e79f07ccd..bc749e2e36cc 100644 --- a/code/core/src/components/components/tabs/tabs.tsx +++ b/code/core/src/components/components/tabs/tabs.tsx @@ -205,7 +205,6 @@ export const Tabs: FC = memo( // @ts-expect-error (non strict) - {/* @ts-expect-error (non strict) */} {visibleList.map(({ title, id, active, color }, index) => { const indexId = `index-${index}`; diff --git a/code/core/src/components/components/tooltip/WithTooltip.tsx b/code/core/src/components/components/tooltip/WithTooltip.tsx index 8276bcd5e43a..844a66556ed0 100644 --- a/code/core/src/components/components/tooltip/WithTooltip.tsx +++ b/code/core/src/components/components/tooltip/WithTooltip.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, ReactNode } from 'react'; +import type { ComponentProps, ComponentType, ReactElement, ReactNode } from 'react'; import React, { useCallback, useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; @@ -35,7 +35,7 @@ export interface WithTooltipPureProps svg?: boolean; withArrows?: boolean; hasChrome?: boolean; - tooltip: ReactNode | ((p: WithHideFn) => ReactNode); + tooltip: ReactElement | ComponentType; children: ReactNode; onDoubleClick?: () => void; /** diff --git a/code/core/src/highlight/StoryContent.tsx b/code/core/src/highlight/StoryContent.tsx index 132e4f1c6337..00834758c087 100644 --- a/code/core/src/highlight/StoryContent.tsx +++ b/code/core/src/highlight/StoryContent.tsx @@ -22,7 +22,6 @@ export const StoryContent = ({ <> {/* @ts-expect-error popover is not yet supported by React */} - {/* @ts-expect-error popover is not yet supported by React */}
    Greetings, one and all!
    diff --git a/code/core/src/manager/components/sidebar/FileSearchList.tsx b/code/core/src/manager/components/sidebar/FileSearchList.tsx index 15593113ad2f..80428608b201 100644 --- a/code/core/src/manager/components/sidebar/FileSearchList.tsx +++ b/code/core/src/manager/components/sidebar/FileSearchList.tsx @@ -84,7 +84,7 @@ export const FileSearchList = memo(function FileSearchList({ errorItemId, }: FileSearchListProps) { const [selectedItem, setSelectedItem] = useState(null); - const parentRef = React.useRef(); + const parentRef = React.useRef(null); const sortedSearchResults = useMemo(() => { // search results with no exports should be at the end of the list @@ -119,7 +119,6 @@ export const FileSearchList = memo(function FileSearchList({ const rowVirtualizer = useVirtualizer({ count, - // @ts-expect-error (non strict) getScrollElement: () => parentRef.current, paddingStart: 16, @@ -291,7 +290,6 @@ export const FileSearchList = memo(function FileSearchList({ if (sortedSearchResults?.length > 0) { return ( - {/* @ts-expect-error (non strict) */} { - const [builtInEntries, userEntries] = Array.from(allTags.entries()).reduce( - (acc, [tag, count]) => { - acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]); - return acc; - }, - [[], []] as [[Tag, number][], [Tag, number][]] + const docsUrl = api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' }); + + const noTags = useMemo( + () => ({ + id: 'no-tags', + title: 'There are no tags. Use tags to organize and filter your Storybook.', + isIndented: false, + }), + [] ); - const docsUrl = api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' }); + const [builtInEntries, userEntries] = useMemo( + () => + Array.from(allTags.entries()).reduce( + (acc, [tag, count]) => { + acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]); + return acc; + }, + [[], []] as [[Tag, number][], [Tag, number][]] + ), + [allTags] + ); - const noTags = { - id: 'no-tags', - title: 'There are no tags. Use tags to organize and filter your Storybook.', - isIndented: false, - }; + const groups = useMemo(() => { + const baseGroups = [ + allTags.size === 0 ? [noTags] : [], + userEntries + .sort((a, b) => a[0].localeCompare(b[0])) + .map(([tag, count]) => { + const checked = selectedTags.includes(tag); + const id = `tag-${tag}`; + return { + id, + title: tag, + right: count, + input: toggleTag(tag)} />, + }; + }), + builtInEntries + .sort((a, b) => a[0].localeCompare(b[0])) + .map(([tag, count]) => { + const checked = selectedTags.includes(tag); + const id = `tag-${tag}`; + return { + id, + title: tag, + right: count, + input: toggleTag(tag)} />, + }; + }), + ] as Link[][]; - const groups = [ - allTags.size === 0 ? [noTags] : [], - userEntries - .sort((a, b) => a[0].localeCompare(b[0])) - .map(([tag, count]) => { - const checked = selectedTags.includes(tag); - const id = `tag-${tag}`; - return { - id, - title: tag, - right: count, - input: toggleTag(tag)} />, - }; - }), - builtInEntries - .sort((a, b) => a[0].localeCompare(b[0])) - .map(([tag, count]) => { - const checked = selectedTags.includes(tag); - const id = `tag-${tag}`; - return { - id, - title: tag, - right: count, - input: toggleTag(tag)} />, - }; - }), - ] as Link[][]; + if (userEntries.length === 0 && isDevelopment) { + baseGroups.push([ + { + id: 'tags-docs', + title: 'Learn how to add tags', + icon: , + right: , + href: docsUrl, + }, + ]); + } - if (userEntries.length === 0 && isDevelopment) { - groups.push([ - { - id: 'tags-docs', - title: 'Learn how to add tags', - icon: , - right: , - href: docsUrl, - }, - ]); - } + return baseGroups; + }, [ + allTags.size, + userEntries, + builtInEntries, + selectedTags, + toggleTag, + isDevelopment, + docsUrl, + noTags, + ]); return ( diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index d63a68feaacd..264907c67746 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -201,19 +201,23 @@ export const TestingModule = ({ const [isCollapsed, setCollapsed] = useState(true); const [isChangingCollapse, setChangingCollapse] = useState(false); const [isUpdated, setIsUpdated] = useState(false); - const settingsUpdatedTimeoutRef = useRef>(); + const settingsUpdatedTimeoutRef = useRef>(null); useEffect(() => { const unsubscribe = internal_fullTestProviderStore.onSettingsChanged(() => { setIsUpdated(true); - clearTimeout(settingsUpdatedTimeoutRef.current); + if (settingsUpdatedTimeoutRef.current) { + clearTimeout(settingsUpdatedTimeoutRef.current); + } settingsUpdatedTimeoutRef.current = setTimeout(() => { setIsUpdated(false); }, 1000); }); return () => { unsubscribe(); - clearTimeout(settingsUpdatedTimeoutRef.current); + if (settingsUpdatedTimeoutRef.current) { + clearTimeout(settingsUpdatedTimeoutRef.current); + } }; }, []); @@ -427,7 +431,7 @@ export const TestingModule = ({ {hasTestProviders && ( ( - // @ts-expect-error (non strict) - (acc, id) => Object.assign(acc, { [id]: id in initialExpanded ? initialExpanded[id] : true }), + (acc: ExpandedState, id: string) => + Object.assign(acc, { + [id]: id in (initialExpanded || {}) ? (initialExpanded || {})[id] : true, + }), {} ); }; @@ -77,19 +79,11 @@ export const useExpanded = ({ // Track the set of currently expanded nodes within this tree. // Root nodes are expanded by default. - const [expanded, setExpanded] = useReducer< - Reducer, - { - refId: string; - data: StoriesHash; - highlightedRef: MutableRefObject; - rootIds: string[]; - initialExpanded: ExpandedState; - } - >( - (state, { ids, value }) => - ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }), - // @ts-expect-error (non strict) + const [expanded, setExpanded] = useReducer( + (state: ExpandedState, { ids, value }: ExpandAction) => + ids.reduce((acc: ExpandedState, id: string) => Object.assign(acc, { [id]: value }), { + ...state, + }), { refId, data, highlightedRef, rootIds, initialExpanded }, initializeExpanded ); @@ -101,8 +95,10 @@ export const useExpanded = ({ const highlightElement = useCallback( (element: Element) => { - // @ts-expect-error (non strict) - setHighlightedItemId(element.getAttribute('data-item-id')); + const itemId = element.getAttribute('data-item-id'); + if (itemId) { + setHighlightedItemId(itemId); + } scrollIntoView(element); }, [setHighlightedItemId] @@ -110,7 +106,6 @@ export const useExpanded = ({ const updateExpanded = useCallback( ({ ids, value }: ExpandAction) => { - // @ts-expect-error (non strict) setExpanded({ ids, value }); if (ids.length === 1) { const element = containerRef.current?.querySelector( @@ -127,18 +122,17 @@ export const useExpanded = ({ // Expand the whole ancestry of the currently selected story whenever it changes. useEffect(() => { - // @ts-expect-error (non strict) - setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true }); + if (selectedStoryId) { + setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true }); + } }, [data, selectedStoryId]); const collapseAll = useCallback(() => { const ids = Object.keys(data).filter((id) => !rootIds.includes(id)); - // @ts-expect-error (non strict) setExpanded({ ids, value: false }); }, [data, rootIds]); const expandAll = useCallback(() => { - // @ts-expect-error (non strict) setExpanded({ ids: Object.keys(data), value: true }); }, [data]); @@ -190,8 +184,7 @@ export const useExpanded = ({ const target = event.target as Element; - // @ts-expect-error (non strict) - if (!isAncestor(menuElement, target) && !isAncestor(target, menuElement)) { + if (menuElement && !isAncestor(menuElement, target) && !isAncestor(target, menuElement)) { return; } if (target.hasAttribute('data-action')) { @@ -202,7 +195,9 @@ export const useExpanded = ({ } const type = highlightedElement.getAttribute('data-nodetype'); - // @ts-expect-error (non strict) + if (!type) { + return; + } if ((isEnter || isSpace) && ['component', 'story', 'document'].includes(type)) { onSelectStoryId(highlightedItemId); } @@ -212,7 +207,6 @@ export const useExpanded = ({ if (isArrowLeft) { if (isExpanded === 'true') { // The highlighted node is expanded, so we collapse it. - // @ts-expect-error (non strict) setExpanded({ ids: [highlightedItemId], value: false }); return; } @@ -227,7 +221,6 @@ export const useExpanded = ({ // The parent can't be highlighted, which means it must be a root. // The highlighted node is already collapsed, so we collapse its descendants. - // @ts-expect-error (non strict) setExpanded({ ids: getDescendantIds(data, highlightedItemId, true), value: false }); return; } diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts index a87101a65bef..71678aa63267 100644 --- a/code/core/src/types/modules/addons.ts +++ b/code/core/src/types/modules/addons.ts @@ -374,7 +374,7 @@ export interface Addon_BaseType { * This is called as a function, so if you want to use hooks, your function needs to return a * JSX.Element within which components are rendered */ - render: (props: Partial) => ReturnType>>; + render: (props: Partial) => ReactNode; // TODO: for Storybook 9 I'd like to change this to be: // render: FC>; // This would bring it in line with how every other addon is set up. diff --git a/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx index 69b58866c510..0a27e88a52f3 100644 --- a/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx +++ b/code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx @@ -1,4 +1,4 @@ -import type { PropsWithChildren } from 'react'; +import type { JSX, PropsWithChildren } from 'react'; import React, { useMemo } from 'react'; import initHeadManager from 'next/dist/client/head-manager'; diff --git a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx index 69b58866c510..0a27e88a52f3 100644 --- a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx +++ b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx @@ -1,4 +1,4 @@ -import type { PropsWithChildren } from 'react'; +import type { JSX, PropsWithChildren } from 'react'; import React, { useMemo } from 'react'; import initHeadManager from 'next/dist/client/head-manager'; diff --git a/code/lib/codemod/src/lib/utils.ts b/code/lib/codemod/src/lib/utils.ts index a89002e10787..b6ab62fc84b8 100644 --- a/code/lib/codemod/src/lib/utils.ts +++ b/code/lib/codemod/src/lib/utils.ts @@ -1,7 +1,7 @@ import { camelCase, upperFirst } from 'es-toolkit/compat'; export const sanitizeName = (name: string) => { - let key = upperFirst(camelCase(name)); + let key: string = upperFirst(camelCase(name)) as string; // prepend _ if name starts with a digit if (/^\d/.test(key)) { key = `_${key}`; diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 8471c7011941..f6920c835b28 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -55,7 +55,7 @@ "ora": "^5.4.1", "picocolors": "^1.1.0", "prompts": "^2.4.0", - "react": "^18.2.0", + "react": "^19.1.1", "tiny-invariant": "^1.3.1", "ts-dedent": "^2.0.0", "typescript": "^5.8.3" diff --git a/code/lib/react-dom-shim/src/react-16.tsx b/code/lib/react-dom-shim/src/react-16.tsx index 8c7b2c8f5a67..94abaa594062 100644 --- a/code/lib/react-dom-shim/src/react-16.tsx +++ b/code/lib/react-dom-shim/src/react-16.tsx @@ -4,10 +4,12 @@ import * as ReactDOM from 'react-dom'; export const renderElement = async (node: ReactElement, el: Element) => { return new Promise((resolve) => { + // @ts-expect-error (Converted from ts-ignore) ReactDOM.render(node, el, () => resolve(null)); }); }; export const unmountElement = (el: Element) => { + // @ts-expect-error (Converted from ts-ignore) ReactDOM.unmountComponentAtNode(el); }; diff --git a/code/lib/react-dom-shim/src/react-18.tsx b/code/lib/react-dom-shim/src/react-18.tsx index f3398fc65ff0..f589865d98c7 100644 --- a/code/lib/react-dom-shim/src/react-18.tsx +++ b/code/lib/react-dom-shim/src/react-18.tsx @@ -20,6 +20,7 @@ const WithCallback: React.FC<{ callback: () => void; children: ReactElement }> = children, }) => { // See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079 + // @ts-expect-error - React18 allowed this const once = React.useRef<() => void>(); React.useLayoutEffect(() => { if (once.current === callback) { @@ -32,7 +33,7 @@ const WithCallback: React.FC<{ callback: () => void; children: ReactElement }> = return children; }; -// pony-fill +// pony-fill for Promise.withResolvers (ES2024 feature) if (typeof Promise.withResolvers === 'undefined') { Promise.withResolvers = () => { let resolve: PromiseWithResolvers['resolve'] = null!; diff --git a/code/package.json b/code/package.json index b163ccabbdf7..fdd068cb3e61 100644 --- a/code/package.json +++ b/code/package.json @@ -91,12 +91,12 @@ "@types/babel__traverse@npm:*": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch", "@types/babel__traverse@npm:^7.18.0": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch", "@types/node": "^22.0.0", - "@types/react": "^18.0.0", + "@types/react": "^19.0.0", "@vitest/expect@npm:3.2.4": "patch:@vitest/expect@npm%3A3.2.4#~/.yarn/patches/@vitest-expect-npm-3.2.4-97c526d5cc.patch", "esbuild": "^0.25.3", "playwright": "1.52.0", "playwright-core": "1.52.0", - "react": "^18.2.0", + "react": "^19.1.1", "serialize-javascript": "^3.1.0", "type-fest": "~2.19", "typescript": "^5.8.3" @@ -149,8 +149,8 @@ "@types/lodash-es": "^4.17.12", "@types/mock-require": "^2.0.3", "@types/node": "^22.0.0", - "@types/react": "^18.0.37", - "@types/react-dom": "^18.0.11", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.9", "@typescript-eslint/eslint-plugin": "^8.8.1", "@typescript-eslint/parser": "^8.8.1", "@vitejs/plugin-react": "^4.3.2", @@ -198,8 +198,8 @@ "prettier-plugin-jsdoc": "^1.3.0", "prettier-plugin-merge": "^0.7.0", "process": "^0.11.10", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "rimraf": "^6.0.1", "slash": "^5.0.0", "sort-package-json": "^2.14.0", diff --git a/code/renderers/preact/src/render.tsx b/code/renderers/preact/src/render.tsx index 56c599006e86..9b3d00918204 100644 --- a/code/renderers/preact/src/render.tsx +++ b/code/renderers/preact/src/render.tsx @@ -16,8 +16,6 @@ export const render: ArgsStoryFn = (args, context) => { ); } - // @ts-expect-error I think the type of Component should be Preact.ComponentType, but even that - // doesn't make TS happy, I suspect because TS wants "react" components. return ; }; diff --git a/code/renderers/react/src/csf-factories.test.tsx b/code/renderers/react/src/csf-factories.test.tsx index 03b0de64da0a..661c485bd7f9 100644 --- a/code/renderers/react/src/csf-factories.test.tsx +++ b/code/renderers/react/src/csf-factories.test.tsx @@ -3,7 +3,7 @@ import { describe, it } from 'vitest'; import { expect, test } from 'vitest'; -import type { ComponentType, KeyboardEventHandler, ReactElement, ReactNode } from 'react'; +import type { ComponentType, JSX, KeyboardEventHandler, ReactElement, ReactNode } from 'react'; import React from 'react'; import type { Canvas } from 'storybook/internal/csf'; diff --git a/code/renderers/react/src/docs/jsxDecorator.test.tsx b/code/renderers/react/src/docs/jsxDecorator.test.tsx index be425ae2233b..d181cf22b3de 100644 --- a/code/renderers/react/src/docs/jsxDecorator.test.tsx +++ b/code/renderers/react/src/docs/jsxDecorator.test.tsx @@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'; import type { FC, PropsWithChildren } from 'react'; import React, { Profiler, StrictMode, createElement } from 'react'; +// @ts-expect-error (Converted from ts-ignore) import PropTypes from 'prop-types'; import { addons, emitTransformCode, useState } from 'storybook/preview-api'; diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx index 1d1048c2e624..8c2c280042d2 100644 --- a/code/renderers/react/src/docs/jsxDecorator.tsx +++ b/code/renderers/react/src/docs/jsxDecorator.tsx @@ -54,10 +54,13 @@ export const getReactSymbolName = (elementType: any): string => { // Note: It may be better to use this function only in development environment. function simplifyNodeForStringify(node: ReactNode): ReactNode { if (isValidElement(node)) { - const props = Object.keys(node.props).reduce<{ [key: string]: any }>((acc, cur) => { - acc[cur] = simplifyNodeForStringify(node.props[cur]); - return acc; - }, {}); + const props = Object.keys(node.props as Record).reduce<{ [key: string]: any }>( + (acc, cur) => { + acc[cur] = simplifyNodeForStringify((node.props as Record)[cur]); + return acc; + }, + {} + ); return { ...node, props, @@ -104,16 +107,18 @@ export const renderJsx = (code: React.ReactElement, options?: JSXOptions) => { return null; } - if (typeof renderedJSX.props.children === 'undefined') { + const props = renderedJSX.props as Record; + + if (typeof props.children === 'undefined') { logger.warn('Not enough children to skip elements.'); if (typeof renderedJSX.type === 'function' && renderedJSX.type.name === '') { - renderedJSX = ; + renderedJSX = ; } - } else if (typeof renderedJSX.props.children === 'function') { - renderedJSX = renderedJSX.props.children(); + } else if (typeof props.children === 'function') { + renderedJSX = props.children(); } else { - renderedJSX = renderedJSX.props.children; + renderedJSX = props.children; } } diff --git a/code/renderers/react/src/docs/propTypes/handleProp.test.tsx b/code/renderers/react/src/docs/propTypes/handleProp.test.tsx index aa50241af4d7..30fd497aac08 100644 --- a/code/renderers/react/src/docs/propTypes/handleProp.test.tsx +++ b/code/renderers/react/src/docs/propTypes/handleProp.test.tsx @@ -9,6 +9,7 @@ import { extractComponentProps, } from 'storybook/internal/docs-tools'; +// @ts-expect-error (Converted from ts-ignore) import PropTypes from 'prop-types'; import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp'; diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx index 45a36ab1d015..8e417e520cd1 100644 --- a/code/renderers/react/src/public-types.test.tsx +++ b/code/renderers/react/src/public-types.test.tsx @@ -2,7 +2,7 @@ // this file tests Typescript types that's why there are no assertions import { describe, it } from 'vitest'; -import type { KeyboardEventHandler, ReactElement, ReactNode } from 'react'; +import type { JSX, KeyboardEventHandler, ReactElement, ReactNode } from 'react'; import React from 'react'; import { satisfies } from 'storybook/internal/common'; diff --git a/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/input.tsx b/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/input.tsx index 4490901b9790..9bf15289f6c0 100644 --- a/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/input.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/destructuring-assignment */ -import React from 'react'; +import React, { type JSX } from 'react'; interface IAProps { aProperty: any; diff --git a/code/renderers/react/template/stories/docgen-components/8740-ts-multi-props/input.tsx b/code/renderers/react/template/stories/docgen-components/8740-ts-multi-props/input.tsx index 1fb6607d0b71..c7985b6f8249 100644 --- a/code/renderers/react/template/stories/docgen-components/8740-ts-multi-props/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/8740-ts-multi-props/input.tsx @@ -18,6 +18,7 @@ export const Paragraph: React.FC = ({ size, children }) => (
    {children}
    ); +// @ts-expect-error (Converted from ts-ignore) Paragraph.defaultProps = { size: 'md' }; export const component = Header; diff --git a/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/input.tsx b/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/input.tsx index feee06599e1f..f2f751467cfe 100644 --- a/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/input.tsx @@ -1,6 +1,7 @@ import type { FC } from 'react'; import React from 'react'; +// @ts-expect-error (Converted from ts-ignore) import PropTypes from 'prop-types'; export interface IProps { @@ -17,6 +18,7 @@ iconButton.propTypes = { color: PropTypes.string, }; +// @ts-expect-error (Converted from ts-ignore) iconButton.defaultProps = { color: 'primary', }; diff --git a/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx b/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx index ba15a430f025..0945b5e28d0f 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx @@ -37,6 +37,7 @@ export const PropsWriter: React.FC = (props: PropsWriterProps) 
    {JSON.stringify(props)}
    ); +// @ts-expect-error (Converted from ts-ignore) PropsWriter.defaultProps = { numberOptional: 1, stringOptional: 'stringOptional', diff --git a/code/renderers/react/template/stories/docgen-components/ts-types/input.tsx b/code/renderers/react/template/stories/docgen-components/ts-types/input.tsx index 4cb8703a9daa..cf67d05e6cf2 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-types/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/ts-types/input.tsx @@ -93,6 +93,7 @@ interface TypeScriptPropsProps { } export const TypeScriptProps: FC = () =>
    TypeScript!
    ; +// @ts-expect-error (Converted from ts-ignore) TypeScriptProps.defaultProps = { any: 'Any value', string: 'A string value', diff --git a/code/tsconfig.json b/code/tsconfig.json index c93260ffc693..10be42819bb0 100644 --- a/code/tsconfig.json +++ b/code/tsconfig.json @@ -18,7 +18,7 @@ "strict": true, "noEmit": true, "strictBindCallApply": true, - "target": "ES2020" + "target": "es2020" }, "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"] } diff --git a/code/yarn.lock b/code/yarn.lock index 272bdca6c193..323b0abb8c1b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5948,9 +5948,9 @@ __metadata: "@testing-library/react": "npm:^14.0.0" axe-core: "npm:^4.2.0" execa: "npm:^9.5.2" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" - react-resize-detector: "npm:^7.1.2" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" + react-resize-detector: "npm:^12.3.0" typescript: "npm:^5.8.3" vitest-axe: "npm:^0.1.0" peerDependencies: @@ -5996,9 +5996,9 @@ __metadata: markdown-to-jsx: "npm:^7.7.2" memoizerific: "npm:^1.11.3" polished: "npm:^4.2.2" - react: "npm:^18.2.0" + react: "npm:^19.1.1" react-colorful: "npm:^5.1.2" - react-dom: "npm:^18.2.0" + react-dom: "npm:^19.1.1" rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" telejson: "npm:8.0.0" @@ -6016,8 +6016,8 @@ __metadata: resolution: "@storybook/addon-jest@workspace:addons/jest" dependencies: "@storybook/icons": "npm:^1.4.0" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" react-resize-detector: "npm:^7.1.2" tiny-invariant: "npm:^1.3.1" typescript: "npm:^5.8.3" @@ -6048,8 +6048,8 @@ __metadata: dependencies: "@neoconfetti/react": "npm:^1.0.0" "@storybook/icons": "npm:^1.4.0" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" react-joyride: "npm:^2.8.2" typescript: "npm:^5.8.3" peerDependencies: @@ -6062,8 +6062,8 @@ __metadata: resolution: "@storybook/addon-themes@workspace:addons/themes" dependencies: "@storybook/icons": "npm:^1.4.0" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.8.3" peerDependencies: @@ -6092,8 +6092,8 @@ __metadata: pathe: "npm:^1.1.2" picocolors: "npm:^1.1.0" prompts: "npm:^2.4.0" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" semver: "npm:^7.6.3" sirv: "npm:^2.0.4" slash: "npm:^5.0.0" @@ -6771,8 +6771,8 @@ __metadata: "@types/lodash-es": "npm:^4.17.12" "@types/mock-require": "npm:^2.0.3" "@types/node": "npm:^22.0.0" - "@types/react": "npm:^18.0.37" - "@types/react-dom": "npm:^18.0.11" + "@types/react": "npm:^19.1.12" + "@types/react-dom": "npm:^19.1.9" "@typescript-eslint/eslint-plugin": "npm:^8.8.1" "@typescript-eslint/parser": "npm:^8.8.1" "@vitejs/plugin-react": "npm:^4.3.2" @@ -6820,8 +6820,8 @@ __metadata: prettier-plugin-jsdoc: "npm:^1.3.0" prettier-plugin-merge: "npm:^0.7.0" process: "npm:^0.11.10" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" rimraf: "npm:^6.0.1" slash: "npm:^5.0.0" sort-package-json: "npm:^2.14.0" @@ -7926,13 +7926,6 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:*": - version: 15.7.14 - resolution: "@types/prop-types@npm:15.7.14" - checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1 - languageName: node - linkType: hard - "@types/qs@npm:*": version: 6.9.18 resolution: "@types/qs@npm:6.9.18" @@ -7947,7 +7940,7 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.0.11": +"@types/react-dom@npm:^18.0.0": version: 18.3.6 resolution: "@types/react-dom@npm:18.3.6" peerDependencies: @@ -7956,6 +7949,15 @@ __metadata: languageName: node linkType: hard +"@types/react-dom@npm:^19.1.9": + version: 19.1.9 + resolution: "@types/react-dom@npm:19.1.9" + peerDependencies: + "@types/react": ^19.0.0 + checksum: 10c0/34c8dda86c1590b3ef0e7ecd38f9663a66ba2dd69113ba74fb0adc36b83bbfb8c94c1487a2505282a5f7e5e000d2ebf36f4c0fd41b3b672f5178fd1d4f1f8f58 + languageName: node + linkType: hard + "@types/react-refresh@npm:^0": version: 0.14.6 resolution: "@types/react-refresh@npm:0.14.6" @@ -7975,7 +7977,7 @@ __metadata: languageName: node linkType: hard -"@types/react-transition-group@npm:^4": +"@types/react-transition-group@npm:^4.4.12": version: 4.4.12 resolution: "@types/react-transition-group@npm:4.4.12" peerDependencies: @@ -7984,13 +7986,12 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:^18.0.0": - version: 18.3.20 - resolution: "@types/react@npm:18.3.20" +"@types/react@npm:^19.0.0": + version: 19.1.12 + resolution: "@types/react@npm:19.1.12" dependencies: - "@types/prop-types": "npm:*" csstype: "npm:^3.0.2" - checksum: 10c0/65fa867c91357e4c4c646945c8b99044360f8973cb7f928ec4de115fe3207827985d45be236e6fd6c092b09f631c2126ce835c137be30718419e143d73300d8f + checksum: 10c0/e35912b43da0caaab5252444bab87a31ca22950cde2822b3b3dc32e39c2d42dad1a4cf7b5dde9783aa2d007f0b2cba6ab9563fc6d2dbcaaa833b35178118767c languageName: node linkType: hard @@ -11823,7 +11824,7 @@ __metadata: ora: "npm:^5.4.1" picocolors: "npm:^1.1.0" prompts: "npm:^2.4.0" - react: "npm:^18.2.0" + react: "npm:^19.1.1" semver: "npm:^7.6.2" storybook: "workspace:*" tiny-invariant: "npm:^1.3.1" @@ -13367,15 +13368,15 @@ __metadata: languageName: node linkType: hard -"es-toolkit@npm:^1.36.0": - version: 1.36.0 - resolution: "es-toolkit@npm:1.36.0" +"es-toolkit@npm:^1.36.0, es-toolkit@npm:^1.39.6": + version: 1.39.10 + resolution: "es-toolkit@npm:1.39.10" dependenciesMeta: "@trivago/prettier-plugin-sort-imports@4.3.0": unplugged: true prettier-plugin-sort-re-exports@0.0.1: unplugged: true - checksum: 10c0/ddc13b8b2dc935f517f0959b971b0a75488bb54a131368c3aec1682b8fd48467d39c4f1d46a7bcdc3d9424e9a4924d968487540ed77ec245c5a2d7b129f5ed62 + checksum: 10c0/244dd6be25bc8c7af9f085f5b9aae08169eca760fc7d4735020f8f711b6a572e0bf205400326fa85a7924e20747d315756dba1b3a5f0d2887231374ec3651a98 languageName: node linkType: hard @@ -18434,7 +18435,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -21690,7 +21691,7 @@ __metadata: languageName: node linkType: hard -"prismjs@npm:^1.27.0": +"prismjs@npm:^1.30.0": version: 1.30.0 resolution: "prismjs@npm:1.30.0" checksum: 10c0/f56205bfd58ef71ccfcbcb691fd0eb84adc96c6ff21b0b69fc6fdcf02be42d6ef972ba4aed60466310de3d67733f6a746f89f2fb79c00bf217406d465b3e8f23 @@ -22191,15 +22192,14 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.2.0": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" +"react-dom@npm:^19.1.1": + version: 19.1.1 + resolution: "react-dom@npm:19.1.1" dependencies: - loose-envify: "npm:^1.1.0" - scheduler: "npm:^0.23.2" + scheduler: "npm:^0.26.0" peerDependencies: - react: ^18.3.1 - checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + react: ^19.1.1 + checksum: 10c0/8c91198510521299c56e4e8d5e3a4508b2734fb5e52f29eeac33811de64e76fe586ad32c32182e2e84e070d98df67125da346c3360013357228172dbcd20bcdd languageName: node linkType: hard @@ -22217,7 +22217,7 @@ __metadata: languageName: node linkType: hard -"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.2.0": +"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.2.2": version: 3.2.2 resolution: "react-fast-compare@npm:3.2.2" checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367 @@ -22240,19 +22240,16 @@ __metadata: languageName: node linkType: hard -"react-helmet-async@npm:^1.3.0": - version: 1.3.0 - resolution: "react-helmet-async@npm:1.3.0" +"react-helmet-async@npm:^2.0.5": + version: 2.0.5 + resolution: "react-helmet-async@npm:2.0.5" dependencies: - "@babel/runtime": "npm:^7.12.5" invariant: "npm:^2.2.4" - prop-types: "npm:^15.7.2" - react-fast-compare: "npm:^3.2.0" + react-fast-compare: "npm:^3.2.2" shallowequal: "npm:^1.1.0" peerDependencies: react: ^16.6.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0 - checksum: 10c0/8f3e6d26beff61d2ed18f7b41561df3e4d83a7582914c7196aa65158c7f3cce939276547d7a0b8987952d9d44131406df74efba02d1f8fa8a3940b49e6ced70b + checksum: 10c0/f390ea8bf13c2681850e5f8eb5b73d8613f407c245a5fd23e9db9b2cc14a3700dd1ce992d3966632886d1d613083294c2aeee009193f49dfa7d145d9f13ea2b0 languageName: node linkType: hard @@ -22266,12 +22263,12 @@ __metadata: languageName: node linkType: hard -"react-inspector@npm:^6.0.0": - version: 6.0.2 - resolution: "react-inspector@npm:6.0.2" +"react-inspector@npm:^9.0.0": + version: 9.0.0 + resolution: "react-inspector@npm:9.0.0" peerDependencies: - react: ^16.8.4 || ^17.0.0 || ^18.0.0 - checksum: 10c0/8f9b23c21b4d95722e28c9455c2bf00fd9437347714382594461f98e5b9954d60864d0f4e74e881639b065e752a97ba52a65e39930c234072e5bff291bb02b5e + react: ^18.0.0 || ^19.0.0 + checksum: 10c0/494787480206a787ed13ae774cae48e16f369e187c52e5897ab98f4701a18ab25fab98d78d86be91fac9218f505c7f7ab687d902baa887161138896f9150f5b6 languageName: node linkType: hard @@ -22416,6 +22413,17 @@ __metadata: languageName: node linkType: hard +"react-resize-detector@npm:^12.3.0": + version: 12.3.0 + resolution: "react-resize-detector@npm:12.3.0" + dependencies: + es-toolkit: "npm:^1.39.6" + peerDependencies: + react: ^18.0.0 || ^19.0.0 + checksum: 10c0/58075af4f7842debc97934bee15947d7ac1db1af8849832258fc986482487de97489d80b15edea6658260edbe826ac8f8acf6c2df2a28e527c8f63a4bff3436f + languageName: node + linkType: hard + "react-resize-detector@npm:^7.1.2": version: 7.1.2 resolution: "react-resize-detector@npm:7.1.2" @@ -22468,23 +22476,23 @@ __metadata: languageName: node linkType: hard -"react-syntax-highlighter@npm:^15.4.5": - version: 15.6.1 - resolution: "react-syntax-highlighter@npm:15.6.1" +"react-syntax-highlighter@npm:^15.6.6": + version: 15.6.6 + resolution: "react-syntax-highlighter@npm:15.6.6" dependencies: "@babel/runtime": "npm:^7.3.1" highlight.js: "npm:^10.4.1" highlightjs-vue: "npm:^1.0.0" lowlight: "npm:^1.17.0" - prismjs: "npm:^1.27.0" + prismjs: "npm:^1.30.0" refractor: "npm:^3.6.0" peerDependencies: react: ">= 0.14.0" - checksum: 10c0/4a4cf4695c45d7a6b25078970fb79ae5a85edeba5be0a2508766ee18e8aee1c0c4cdd97bf54f5055e4af671fe7e5e71348e81cafe09a0eb07a763ae876b7f073 + checksum: 10c0/894f8b7c79ed40866c0fc542ad0a2040128a8c7e6e6decfd06ef092d8af9c63788ecdd911ea9b2b433e361a4a33a14f721bcec81fd59f1e7394442ade4e7ea46 languageName: node linkType: hard -"react-textarea-autosize@npm:^8.3.0": +"react-textarea-autosize@npm:^8.5.9": version: 8.5.9 resolution: "react-textarea-autosize@npm:8.5.9" dependencies: @@ -22512,12 +22520,10 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.2.0": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3 +"react@npm:^19.1.1": + version: 19.1.1 + resolution: "react@npm:19.1.1" + checksum: 10c0/8c9769a2dfd02e603af6445058325e6c8a24b47b185d0e461f66a6454765ddcaecb3f0a90184836c68bb509f3c38248359edbc42f0d07c23eb500a5c30c87b4e languageName: node linkType: hard @@ -23577,12 +23583,10 @@ __metadata: languageName: unknown linkType: soft -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 +"scheduler@npm:^0.26.0": + version: 0.26.0 + resolution: "scheduler@npm:0.26.0" + checksum: 10c0/5b8d5bfddaae3513410eda54f2268e98a376a429931921a81b5c3a2873aab7ca4d775a8caac5498f8cbc7d0daeab947cf923dbd8e215d61671f9f4e392d34356 languageName: node linkType: hard @@ -24399,8 +24403,8 @@ __metadata: resolution: "storybook-addon-pseudo-states@workspace:addons/pseudo-states" dependencies: "@storybook/icons": "npm:^1.4.0" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" typescript: "npm:^5.8.3" peerDependencies: storybook: "workspace:^" @@ -24454,7 +24458,7 @@ __metadata: "@types/pretty-hrtime": "npm:^1.0.0" "@types/prompts": "npm:^2.0.9" "@types/react-syntax-highlighter": "npm:11.0.5" - "@types/react-transition-group": "npm:^4" + "@types/react-transition-group": "npm:^4.4.12" "@types/semver": "npm:^7.5.8" "@types/ws": "npm:^8" "@vitest/expect": "npm:3.2.4" @@ -24516,14 +24520,14 @@ __metadata: prettier: "npm:^3.5.3" pretty-hrtime: "npm:^1.0.3" prompts: "npm:^2.4.0" - react: "npm:^18.2.0" - react-dom: "npm:^18.2.0" - react-helmet-async: "npm:^1.3.0" - react-inspector: "npm:^6.0.0" + react: "npm:^19.1.1" + react-dom: "npm:^19.1.1" + react-helmet-async: "npm:^2.0.5" + react-inspector: "npm:^9.0.0" react-popper-tooltip: "npm:^4.4.2" react-router-dom: "npm:6.15.0" - react-syntax-highlighter: "npm:^15.4.5" - react-textarea-autosize: "npm:^8.3.0" + react-syntax-highlighter: "npm:^15.6.6" + react-textarea-autosize: "npm:^8.5.9" react-transition-group: "npm:^4.4.5" recast: "npm:^0.23.5" require-from-string: "npm:^2.0.2"